ben/calendar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update frontend

Browse Source
This commit is contained in:
ben
2026-08-04 16:45:20 +02:00
parent 2cc0496afb
commit 3719bb37e0
5 changed files with 1828 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/main.py
+1 -1
View File
@@ -14,7 +14,7 @@ import sqlite3
from typing import Literal from typing import Literal
from fastapi.middleware.cors import CORSMiddleware from fastapi.middleware.cors import CORSMiddleware
from events import delete_event from events import delete_event, get_room_events
class Login(BaseModel): class Login(BaseModel):
username: str username: str
frontend/www/app.js
+1144
View File
File diff suppressed because it is too large Load Diff
frontend/www/events/index.html
-1
View File
@@ -1 +0,0 @@
hier komt de events pagina
frontend/www/index.html
+86 -12
View File
@@ -1,26 +1,100 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Calendar</title> <title>Calendar Dashboard</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<div class="layout">
<aside class="sidebar"> <div class="login-screen" id="login-screen">
<div class="login-box">
<h2>Calendar</h2> <h2>Calendar</h2>
<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> <nav>
<a href="#">Dashboard</a>
<a href="#">Rooms</a> <a data-page="dashboard" onclick="showPage('dashboard')" class="active">
<a href="#">Events</a> Dashboard
<a href="#">Settings</a> </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> </nav>
<div class="sidebar-bottom">
<button onclick="toggleTheme()">
dark / light Theme
</button>
</div>
</aside> </aside>
<main class="content">
<h1>Dashboard</h1>
<div class="calendar">
Kalender komt hier <main class="content" id="content">
</div>
</main> </main>
</div> </div>
<script src="app.js"></script>
</body> </body>
</html> </html>
frontend/www/style.css
+593 -20
View File
@@ -1,59 +1,632 @@
:root {
--bg: #f4f5f7;
--panel: white;
--sidebar: #ffffff;
--text: #111;
--muted: #666;
--border: #ddd;
--accent: #2563eb;
}
.dark {
--bg: #080808;
--panel: #151515;
--sidebar: #101010;
--text: #eee;
--muted: #aaa;
--border: #333;
--accent: #38bdf8;
}
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
body { body {
margin: 0; margin: 0;
background: #080808;
color: white; background: var(--bg);
font-family: monospace;
color: var(--text);
font-family:
Inter,
system-ui,
sans-serif;
transition: 0.2s;
} }
.layout { .layout {
display: grid; display: grid;
grid-template-columns: 250px 1fr; grid-template-columns: 260px 1fr;
height: 100vh; height: 100vh;
display: none;
} }
.sidebar { .sidebar {
background: #111;
padding: 20px;
border-right: 1px solid #333;
}
background: var(--sidebar);
border-right: 1px solid var(--border);
padding: 25px;
.sidebar nav {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 15px;
} }
.sidebar a {
.logo {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 40px;
}
.logo h2 {
margin: 0;
}
nav {
display: flex;
flex-direction: column;
gap: 8px;
}
nav a {
cursor: pointer;
padding: 12px 15px;
border-radius: 10px;
color: var(--muted);
transition: 0.2s;
}
nav a:hover,
nav .active {
background: var(--accent);
color: white; color: white;
text-decoration: none;
} }
.sidebar a:hover {
color: cyan; .sidebar-bottom {
margin-top: auto;
} }
button {
width: 100%;
padding: 12px;
border-radius: 10px;
border: 1px solid var(--border);
background: var(--panel);
color: var(--text);
cursor: pointer;
margin-top: 8px;
}
/* Content */
.content { .content {
padding: 30px;
padding: 40px;
overflow-y: auto;
} }
.calendar {
background: #151515; h1 {
border: 1px solid #333;
margin-top: 0;
}
.card {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 16px;
padding: 25px;
margin-top: 20px;
box-shadow:
0 10px 30px rgba(0,0,0,0.05);
}
/* forms */
input {
width: 100%;
padding: 12px;
border-radius: 10px; border-radius: 10px;
height: 500px;
padding: 20px; border: 1px solid var(--border);
background: var(--bg);
color: var(--text);
margin-top: 8px;
}
form {
display: flex;
flex-direction: column;
}
.muted {
color: var(--muted);
}
.error {
color: #e11d48;
}
/* list items */
.list-item {
padding: 10px 15px;
border: 1px solid var(--border);
border-radius: 10px;
margin-top: 10px;
}
/* event actions */
.event-actions {
display: flex;
gap: 10px;
margin-top: 15px;
}
.event-actions button {
margin-top: 0;
}
/* calendar */
.calendar-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.calendar-header h3 {
margin: 0;
text-transform: capitalize;
}
.calendar-nav-btn {
width: auto;
padding: 8px 14px;
margin-top: 0;
}
.calendar-legend {
display: flex;
gap: 18px;
margin-top: 14px;
font-size: 12px;
color: var(--muted);
}
.legend-item {
display: flex;
align-items: center;
gap: 6px;
}
.legend-dot {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
}
/* week grid */
.calendar-week {
display: flex;
margin-top: 16px;
overflow-x: auto;
}
.calendar-gutter {
display: flex;
flex-direction: column;
width: 55px;
flex-shrink: 0;
}
.calendar-hour-label {
font-size: 11px;
color: var(--muted);
text-align: right;
padding-right: 8px;
box-sizing: border-box;
transform: translateY(-6px);
}
.calendar-days {
display: flex;
flex: 1;
min-width: 700px;
}
.calendar-day-column {
flex: 1;
display: flex;
flex-direction: column;
border-left: 1px solid var(--border);
}
.calendar-day-header {
text-align: center;
padding: 6px 0 10px 0;
font-size: 12px;
color: var(--muted);
}
.calendar-day-header.today .calendar-day-number {
color: white;
background: var(--accent);
border-radius: 50%;
padding: 2px 7px;
}
.calendar-day-name {
text-transform: uppercase;
font-size: 10px;
letter-spacing: 0.05em;
}
.calendar-day-number {
font-size: 14px;
font-weight: 600;
color: var(--text);
margin-top: 2px;
display: inline-block;
}
.calendar-day-track {
position: relative;
background-image:
repeating-linear-gradient(
to bottom,
var(--border) 0,
var(--border) 1px,
transparent 1px,
transparent 48px
);
}
.calendar-event {
position: absolute;
border-radius: 6px;
padding: 3px 6px;
font-size: 11px;
color: white;
cursor: pointer;
overflow: hidden;
box-shadow: 0 2px 6px rgba(0,0,0,0.25);
opacity: 0.92;
border: 1px solid rgba(255,255,255,0.4);
transition: opacity 0.15s;
}
.calendar-event:hover {
opacity: 1;
z-index: 99 !important;
}
.calendar-event-time {
display: block;
font-size: 10px;
opacity: 0.85;
}
.calendar-event-title {
display: block;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.event-confirmed {
background: #16a34a;
}
.event-busy {
background: #f97316;
}
.event-private {
background: #6b7280;
}
/* login screen */
.login-screen {
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.login-box {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 16px;
padding: 40px;
width: 320px;
box-shadow:
0 10px 30px rgba(0,0,0,0.05);
}
.login-box h2 {
margin-top: 0;
text-align: center;
} }