✨ Adds index.html

2025-10-07 17:15:40 +02:00
parent 7f1af014ae
commit 8e8a51c3a0
4 changed files with 162 additions and 10 deletions
--- a/static/index.html
+++ b/static/index.html
@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="author" content="Daniel Svitan">
+    <title>Setra</title>
+    <style>
+        body {
+            display: flex;
+            align-items: center;
+            flex-direction: column;
+        }
+
+        .container {
+            width: 60vw;
+
+            margin-top: 2rem;
+        }
+
+        h1 {
+            margin: 0;
+        }
+
+        p {
+            width: min-content;
+        }
+
+        .create-form {
+            display: flex;
+            flex-direction: column;
+
+            border: 1px black solid;
+            padding: 0.5rem;
+            border-radius: 0.5rem;
+        }
+
+        .create-form label {
+            font-size: 1.15rem;
+        }
+
+        .create-form input {
+            width: min-content;
+            border-radius: 0.5rem;
+            border: 1px gray solid;
+            padding: 0.4rem 0.4rem 0.15rem 0.4rem;
+            font-size: 1.05rem;
+        }
+
+        .create-form button[type=submit] {
+            width: min-content;
+            margin-top: 0.5rem;
+            border: none;
+            font-size: 1.05rem;
+            color: #eeeeee;
+            background: #0078e7;
+            padding: 0.5rem 0.75rem 0.25rem 0.75rem;
+            border-radius: 0.5rem;
+            cursor: pointer;
+        }
+
+        .dialog {
+            width: 100vw;
+            height: 100vh;
+            position: fixed;
+            top: 0;
+            left: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            backdrop-filter: blur(1rem);
+        }
+
+        .dialog form {
+            border: 1px solid black;
+            padding: 0.5rem;
+            border-radius: 0.5rem;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .dialog form label {
+            font-size: 1.15rem;
+        }
+
+        .dialog form input {
+            width: min-content;
+            border-radius: 0.5rem;
+            border: 1px gray solid;
+            padding: 0.4rem 0.4rem 0.15rem 0.4rem;
+            font-size: 1.05rem;
+        }
+
+        .dialog form button[type=submit] {
+            width: min-content;
+            margin-top: 0.5rem;
+            border: none;
+            font-size: 1.05rem;
+            color: #eeeeee;
+            background: #0078e7;
+            padding: 0.5rem 0.75rem 0.25rem 0.75rem;
+            border-radius: 0.5rem;
+            align-self: end;
+            cursor: pointer;
+        }
+    </style>
+</head>
+<body>
+<div class="container">
+    <h1>Setra</h1>
+
+    <form class="create-form">
+        <label for="name-input">Name:</label>
+        <input id="name-input" type="text">
+
+        <button type="submit">Create</button>
+    </form>
+
+    <div class="dialog" id="dialog">
+        <form onsubmit="saveAPIKey(event)">
+            <label for="api-key-input">API key:</label>
+            <input id="api-key-input" type="password">
+
+            <button type="submit">Save</button>
+        </form>
+    </div>
+</div>
+
+<script>
+    function saveAPIKey(event) {
+        event.preventDefault();
+        const input = document.getElementById("api-key-input");
+        localStorage.setItem("api-key", input.value);
+        console.log("set api-key to", input.value);
+        document.getElementById("dialog").style.display = "none";
+    }
+
+    function init() {
+        if (localStorage.getItem("api-key")) {
+            document.getElementById("dialog").style.display = "none";
+        }
+    }
+
+    init();
+</script>
+</body>
+</html>