add simple index page for user use

2025-06-01 07:56:02 -04:00 · 2025-06-01 07:56:02 -04:00 · 0a0a1b2a50
commit 0a0a1b2a50
parent f9a4a30e61
8 changed files with 412 additions and 20 deletions
--- a/public/css/style.css
+++ b/public/css/style.css
@ -0,0 +1,170 @@
+:root {
+    --bg: #0d0d0d;
+    --fg: #f5f5f5;
+    --accent: #4ea3ff;
+    --card: #1c1c1c;
+    --border: #333;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    background: var(--bg);
+    color: var(--fg);
+    font-family: system-ui, sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    padding: 2rem;
+}
+
+main {
+    width: 100%;
+    max-width: 420px;
+    background: var(--card);
+    padding: 2rem;
+    border-radius: 1rem;
+    box-shadow: 0 0 10px #0008;
+    border: 1px solid var(--border);
+}
+
+h1,
+h2 {
+    text-align: center;
+    margin-bottom: 1rem;
+    color: var(--accent);
+}
+
+.profile {
+    text-align: center;
+    margin-bottom: 1.5rem;
+}
+
+#avatar {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    border: 2px solid var(--border);
+    margin-bottom: 0.5rem;
+}
+
+label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+}
+
+select,
+button {
+    width: 100%;
+    padding: 0.6rem;
+    margin-top: 0.25rem;
+    border: 1px solid var(--border);
+    border-radius: 0.5rem;
+    font-size: 1rem;
+    background: var(--bg);
+    color: var(--fg);
+}
+
+select:focus,
+button:hover {
+    border-color: var(--accent);
+    outline: none;
+}
+
+#set-timezone {
+    background: var(--accent);
+    color: white;
+    margin-top: 1rem;
+    cursor: pointer;
+    transition: background 0.2s ease;
+}
+
+#set-timezone:hover {
+    background: #2c8de6;
+}
+
+a#login-btn {
+    display: block;
+    text-align: center;
+    padding: 0.75rem;
+    margin-top: 1rem;
+    background: var(--accent);
+    color: white;
+    font-weight: bold;
+    border-radius: 0.5rem;
+    text-decoration: none;
+    transition: background 0.2s ease;
+}
+
+a#login-btn:hover {
+    background: #2c8de6;
+}
+
+#status-msg {
+    margin-top: 1rem;
+    text-align: center;
+    font-size: 0.9rem;
+    color: var(--accent);
+}
+
+button.danger {
+    background: #ff4e4e;
+    color: white;
+}
+
+button.danger:hover {
+    background: #e63838;
+}
+
+.ts-wrapper.single .ts-control {
+    background-color: var(--card);
+    color: var(--fg);
+    border: 1px solid var(--border);
+    border-radius: 0.5rem;
+    padding: 0.6rem;
+    font-size: 1rem;
+    box-shadow: none;
+}
+
+.ts-wrapper.single.focus .ts-control {
+    background-color: var(--card);
+    border-color: var(--accent);
+    box-shadow: 0 0 0 2px rgba(78, 163, 255, 0.25);
+}
+
+.ts-dropdown {
+    background-color: var(--card);
+    color: var(--fg);
+    border: 1px solid var(--border);
+    border-radius: 0.5rem;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
+}
+
+.ts-dropdown .option {
+    padding: 0.5rem 0.75rem;
+    cursor: pointer;
+    transition: background 0.2s;
+}
+
+.ts-dropdown .option:hover {
+    background-color: rgba(255, 255, 255, 0.05);
+}
+
+.ts-dropdown .option.active {
+    background-color: var(--accent);
+    color: #fff;
+}
+
+.ts-wrapper .ts-control input {
+    color: var(--fg);
+}
+
+
+.hidden {
+    display: none;
+}