add credits/disclaimer to a fixed footer

noahm · Sep 2, 2024 · e1391e3 · e1391e3
1 parent 48487ef
commit e1391e3
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 10 deletions.
diff --git a/ui/styles.css b/ui/styles.css
@@ -8,7 +8,7 @@
 :root {
   --color-bg: white;
   --color-text-main: #000000;
-  --color-primary: #FFFF00;
+  --color-primary: #ffff00;
   --wrapper-height: 87vh;
   --image-max-width: 300px;
   --image-margin: 3rem;
@@ -42,12 +42,24 @@ body {
   background-color: var(--color-bg);
 }
 
+footer {
+  position: fixed;
+  bottom: 0em;
+  padding: 1em 0;
+  width: 100%;
+  background-image: linear-gradient(
+    to bottom,
+    rgba(255, 255, 255, 0),
+    #ffffff 2em
+  );
+}
+
 button,
 input,
 select {
   font-family: inherit;
   font-size: 100%;
-  background: #FFFFFF;
+  background: #ffffff;
   border: 1px solid currentColor;
   box-sizing: border-box;
   border-radius: 5px;
@@ -86,7 +98,16 @@ button:focus {
   background-color: silver;
   padding: 4em 1em 4em;
   --corner-cut-size: 3em;
-  clip-path: polygon(var(--corner-cut-size) 0, calc(100% - var(--corner-cut-size)) 0, 100% var(--corner-cut-size), 100% calc(100% - var(--corner-cut-size)), calc(100% - var(--corner-cut-size)) 100%, var(--corner-cut-size) 100%, 0 calc(100% - var(--corner-cut-size)), 0 var(--corner-cut-size));
+  clip-path: polygon(
+    var(--corner-cut-size) 0,
+    calc(100% - var(--corner-cut-size)) 0,
+    100% var(--corner-cut-size),
+    100% calc(100% - var(--corner-cut-size)),
+    calc(100% - var(--corner-cut-size)) 100%,
+    var(--corner-cut-size) 100%,
+    0 calc(100% - var(--corner-cut-size)),
+    0 var(--corner-cut-size)
+  );
 }
 .pad::after {
   /* its a bar! */
@@ -115,7 +136,8 @@ button:focus {
   background-color: red;
 }
 
-.fsr, .load-cell {
+.fsr,
+.load-cell {
   position: absolute;
   font-family: monospace;
 }

diff --git a/ui/ui.tsx b/ui/ui.tsx
@@ -34,12 +34,7 @@ export function UI() {
 
   return (
     <>
-      <h1>
-        SMX Web Config{" "}
-        <small>
-          (<a href="https://github.com/noahm/smx-config-web">source</a>)
-        </small>
-      </h1>
+      <h1>SMX Web Config</h1>
       <StageTest stageAtom={selectedStage$} />
       <p>
         <PickDevice /> <DebugCommands />
@@ -48,6 +43,13 @@ export function UI() {
         <TestDataDisplayToggle />
       </p>
       <StatusDisplay />
+      <footer>
+        A project of Cathadan and SenPi. This tool is unofficial and not affiliated with Step Revolution. Want to help?{" "}
+        <a href="https://discord.gg/VjvCKYVxBR" target="_blank" rel="noreferrer">
+          join our discord
+        </a>{" "}
+        or <a href="https://github.com/noahm/smx-config-web">browse the source code</a>
+      </footer>
     </>
   );
 }