update frontend

2026-08-04 16:45:20 +02:00
parent 2cc0496afb
commit 3719bb37e0
5 changed files with 1828 additions and 38 deletions
@@ -1,26 +1,100 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>Calendar</title>
+    <title>Calendar Dashboard</title>
    <link rel="stylesheet" href="style.css">
 </head>
+
 <body>
-<div class="layout">
-    <aside class="sidebar">
+
+<div class="login-screen" id="login-screen">
+
+    <div class="login-box">
+
        <h2>Calendar</h2>
-        <nav>
-            <a href="#">Dashboard</a>
-            <a href="#">Rooms</a>
-            <a href="#">Events</a>
-            <a href="#">Settings</a>
-        </nav>
-    </aside>
-    <main class="content">
-        <h1>Dashboard</h1>
-        <div class="calendar">
-            Kalender komt hier
-        </div>
-    </main>
+
+        <form onsubmit="handleLogin(event)">
+
+            <input
+                type="text"
+                id="login-username"
+                placeholder="Username"
+                required
+            >
+
+            <input
+                type="password"
+                id="login-password"
+                placeholder="Password"
+                required
+            >
+
+            <button type="submit">Log in</button>
+
+        </form>
+
+        <button onclick="handleRegister(event)">
+            Create account
+        </button>
+
+        <p id="login-error" class="error"></p>
+
+    </div>
+
 </div>
+
+
+<div class="layout" id="app">
+
+    <aside class="sidebar">
+
+        <div class="logo">
+            <h2>Calendar</h2>
+        </div>
+
+
+        <nav>
+
+            <a data-page="dashboard" onclick="showPage('dashboard')" class="active">
+                Dashboard
+            </a>
+
+            <a data-page="rooms" onclick="showPage('rooms')">
+                Rooms
+            </a>
+
+            <a data-page="events" onclick="showPage('events')">
+                Events
+            </a>
+
+            <a data-page="settings" onclick="showPage('settings')">
+                Settings
+            </a>
+
+        </nav>
+
+
+        <div class="sidebar-bottom">
+
+            <button onclick="toggleTheme()">
+                dark / light Theme
+            </button>
+
+        </div>
+
+    </aside>
+
+
+
+    <main class="content" id="content">
+
+    </main>
+
+
+</div>
+
+
+<script src="app.js"></script>
+
 </body>
 </html>