Add footer

satetsu888 · May 19, 2024 · 6a4bc19 · 6a4bc19
1 parent 77c36fd
commit 6a4bc19
Showing 1 changed file with 45 additions and 4 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -39,24 +39,37 @@ function App() {
     />
   ) : (
     <>
-      <div style={{ display: "flex", alignItems: "center", flexDirection: "column" }}>
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          flexDirection: "column",
+        }}
+      >
         <img src={logo} alt="logo" style={{ width: "50%", height: "auto" }} />
-        <h1>Remote veadotube</h1>
+        <h1 style={{ marginBottom: "12px" }}>Remote veadotube</h1>
+        <p style={{ margin: "0 0 12px 0", color: "#8797a6" }}>
+          Unofficial remote controller for{" "}
+          <a href="https://veado.tube/" target="_blank">
+            veadotube
+          </a>
+          .
+        </p>
       </div>
       <div style={{ fontSize: "large", display: "grid", margin: "0 12px" }}>
         Host
         <input
           type="text"
           name="host"
-          style={{ fontSize: "x-large" }}
+          style={{ fontSize: "x-large", borderRadius: "8px" }}
           value={host}
           onChange={(e) => setHost(e.target.value)}
         />
         Port
         <input
           type="text"
           name="port"
-          style={{ fontSize: "x-large" }}
+          style={{ fontSize: "x-large", borderRadius: "8px" }}
           value={port}
           onChange={(e) => setPort(e.target.value)}
         />
@@ -71,6 +84,34 @@ function App() {
           Connect
         </button>
       </div>
+      <div style={{ marginBottom: "48px" }} />
+      <footer
+        style={{ display: "flex", flexDirection: "column", color: "#8797a6" }}
+      >
+        <div style={{ display: "flex", justifyContent: "space-evenly" }}>
+          <p>
+            <a
+              href="https://github.com/satetsu888/remote-veadotube"
+              target="_blank"
+            >
+              Github
+            </a>
+          </p>
+          <p>
+            <a href="https://buymeacoffee.com/satetsu888" target="_blank">
+              Buy me a coffee
+            </a>
+          </p>
+        </div>
+        <div style={{ display: "flex", justifyContent: "center" }}>
+          <p>
+          Provided by{" "}
+          <a href="https://x.com/satetsu888/" target="_blank">
+            satetsu888
+          </a>
+          </p>
+        </div>
+      </footer>
     </>
   );
 }