109 lines
2.3 KiB
HTML
109 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Calendar Dashboard</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<a href="#content" class="skip-link">Skip to main content</a>
|
|
|
|
<div class="login-screen" id="login-screen">
|
|
|
|
<div class="login-box">
|
|
|
|
<h2>Calendar</h2>
|
|
|
|
<form onsubmit="handleLogin(event)">
|
|
|
|
<label class="field-label" for="login-username">Username</label>
|
|
<input
|
|
type="text"
|
|
id="login-username"
|
|
placeholder="Username"
|
|
autocomplete="username"
|
|
required
|
|
>
|
|
|
|
<label class="field-label" for="login-password">Password</label>
|
|
<input
|
|
type="password"
|
|
id="login-password"
|
|
placeholder="Password"
|
|
autocomplete="current-password"
|
|
required
|
|
>
|
|
|
|
<button type="submit">Log in</button>
|
|
|
|
</form>
|
|
|
|
<button onclick="handleRegister(event)">
|
|
Create account
|
|
</button>
|
|
|
|
<p id="login-error" class="error" role="alert" aria-live="assertive"></p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="layout" id="app">
|
|
|
|
<aside class="sidebar">
|
|
|
|
<div class="logo">
|
|
<h2>Calendar</h2>
|
|
</div>
|
|
|
|
|
|
<nav aria-label="Main navigation">
|
|
|
|
<a data-page="dashboard" onclick="showPage('dashboard')" class="active" tabindex="0" role="button">
|
|
Dashboard
|
|
</a>
|
|
|
|
<a data-page="rooms" onclick="showPage('rooms')" tabindex="0" role="button">
|
|
Rooms
|
|
</a>
|
|
|
|
<a data-page="events" onclick="showPage('events')" tabindex="0" role="button">
|
|
Events
|
|
</a>
|
|
|
|
<a data-page="settings" onclick="showPage('settings')" tabindex="0" role="button">
|
|
Settings
|
|
</a>
|
|
|
|
</nav>
|
|
|
|
|
|
<div class="sidebar-bottom">
|
|
|
|
<button onclick="toggleTheme()">
|
|
Toggle theme
|
|
</button>
|
|
|
|
</div>
|
|
|
|
</aside>
|
|
|
|
|
|
|
|
<main class="content" id="content" tabindex="-1">
|
|
|
|
</main>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<script src="app.js"></script>
|
|
|
|
</body>
|
|
</html>
|