ben/ben.de-roo.org
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updates js/css/html

Browse Source
This commit is contained in:
ben
2026-08-06 18:23:39 +02:00
parent a087a5e66f
commit ec80f8dca4
3 changed files with 1229 additions and 621 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.js
+814 -586
View File
File diff suppressed because it is too large Load Diff
index.html
+17 -9
View File
@@ -1,12 +1,16 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calendar Dashboard</title> <title>Calendar Dashboard</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<a href="#content" class="skip-link">Skip to main content</a>
<div class="login-screen" id="login-screen"> <div class="login-screen" id="login-screen">
<div class="login-box"> <div class="login-box">
@@ -15,17 +19,21 @@
<form onsubmit="handleLogin(event)"> <form onsubmit="handleLogin(event)">
<label class="field-label" for="login-username">Username</label>
<input <input
type="text" type="text"
id="login-username" id="login-username"
placeholder="Username" placeholder="Username"
autocomplete="username"
required required
> >
<label class="field-label" for="login-password">Password</label>
<input <input
type="password" type="password"
id="login-password" id="login-password"
placeholder="Password" placeholder="Password"
autocomplete="current-password"
required required
> >
@@ -37,7 +45,7 @@
Create account Create account
</button> </button>
<p id="login-error" class="error"></p> <p id="login-error" class="error" role="alert" aria-live="assertive"></p>
</div> </div>
@@ -53,21 +61,21 @@
</div> </div>
<nav> <nav aria-label="Main navigation">
<a data-page="dashboard" onclick="showPage('dashboard')" class="active"> <a data-page="dashboard" onclick="showPage('dashboard')" class="active" tabindex="0" role="button">
Dashboard Dashboard
</a> </a>
<a data-page="rooms" onclick="showPage('rooms')"> <a data-page="rooms" onclick="showPage('rooms')" tabindex="0" role="button">
Rooms Rooms
</a> </a>
<a data-page="events" onclick="showPage('events')"> <a data-page="events" onclick="showPage('events')" tabindex="0" role="button">
Events Events
</a> </a>
<a data-page="settings" onclick="showPage('settings')"> <a data-page="settings" onclick="showPage('settings')" tabindex="0" role="button">
Settings Settings
</a> </a>
@@ -77,7 +85,7 @@
<div class="sidebar-bottom"> <div class="sidebar-bottom">
<button onclick="toggleTheme()"> <button onclick="toggleTheme()">
dark / light Theme Toggle theme
</button> </button>
</div> </div>
@@ -86,7 +94,7 @@
<main class="content" id="content"> <main class="content" id="content" tabindex="-1">
</main> </main>
style.css
+377 -5
View File
@@ -38,6 +38,8 @@
--status-busy-tint: #f6ede1; --status-busy-tint: #f6ede1;
--status-private: #4b4d57; --status-private: #4b4d57;
--status-private-tint: #eceae7; --status-private-tint: #eceae7;
--status-proposed: #2f5d86;
--status-proposed-tint: #e6eef6;
--danger: #ad2b38; --danger: #ad2b38;
@@ -62,6 +64,9 @@
--font-display: "Source Serif 4", Georgia, serif; --font-display: "Source Serif 4", Georgia, serif;
--font-body: Inter, system-ui, sans-serif; --font-body: Inter, system-ui, sans-serif;
--font-mono: "IBM Plex Mono", ui-monospace, monospace; --font-mono: "IBM Plex Mono", ui-monospace, monospace;
/* Accessibility */
--font-scale: 1;
} }
.dark { .dark {
@@ -88,6 +93,8 @@
--status-busy-tint: #26200f; --status-busy-tint: #26200f;
--status-private: #9294a0; --status-private: #9294a0;
--status-private-tint: #1c1d21; --status-private-tint: #1c1d21;
--status-proposed: #6ba2d6;
--status-proposed-tint: #101c28;
--danger: #e2707c; --danger: #e2707c;
@@ -104,12 +111,44 @@ body {
background: var(--bg); background: var(--bg);
color: var(--text); color: var(--text);
font-family: var(--font-body); font-family: var(--font-body);
font-size: 14px; font-size: calc(14px * var(--font-scale));
line-height: 1.5; line-height: 1.5;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
transition: background 0.2s var(--ease), color 0.2s var(--ease); transition: background 0.2s var(--ease), color 0.2s var(--ease);
} }
/* ============================================================
Skip link
============================================================ */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 1000;
background: var(--accent);
color: #fff;
padding: 10px 16px;
border-radius: var(--radius-sm);
}
.skip-link:focus {
left: var(--space-4);
top: var(--space-4);
}
/* ============================================================ /* ============================================================
Layout Layout
============================================================ */ ============================================================ */
@@ -199,11 +238,45 @@ button:hover {
button:focus-visible, button:focus-visible,
a:focus-visible, a:focus-visible,
input:focus-visible { input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--accent); outline: 2px solid var(--accent);
outline-offset: 2px; outline-offset: 2px;
} }
/* button variants */
.btn-primary {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
.btn-primary:hover {
background: var(--accent-hover);
border-color: var(--accent-hover);
}
.btn-danger {
color: var(--danger);
border-color: var(--danger);
background: transparent;
}
.btn-danger:hover {
background: var(--danger);
color: #fff;
border-color: var(--danger);
}
.btn-sm {
width: auto;
padding: 6px 12px;
font-size: 12.5px;
margin-top: 0;
}
.sidebar button { .sidebar button {
background: transparent; background: transparent;
border-color: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.12);
@@ -239,9 +312,17 @@ h1 {
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
} }
.card h3 {
margin-top: 0;
font-family: var(--font-display);
font-weight: 600;
}
/* forms */ /* forms */
input { input,
select,
textarea {
width: 100%; width: 100%;
padding: 10px 12px; padding: 10px 12px;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
@@ -254,7 +335,14 @@ input {
transition: border-color 0.15s var(--ease); transition: border-color 0.15s var(--ease);
} }
input:focus { textarea {
resize: vertical;
min-height: 64px;
}
input:focus,
select:focus,
textarea:focus {
border-color: var(--accent); border-color: var(--accent);
} }
@@ -263,6 +351,25 @@ form {
flex-direction: column; flex-direction: column;
} }
.field-label {
display: block;
margin-top: var(--space-3);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.01em;
color: var(--muted);
text-transform: uppercase;
}
.field-row {
display: flex;
gap: var(--space-3);
}
.field-row > div {
flex: 1;
}
.muted { .muted {
color: var(--muted); color: var(--muted);
} }
@@ -271,6 +378,10 @@ form {
color: var(--danger); color: var(--danger);
} }
.success {
color: var(--accent);
}
/* list items */ /* list items */
.list-item { .list-item {
@@ -285,16 +396,196 @@ form {
border-color: var(--border-strong); border-color: var(--border-strong);
} }
/* badges */
.badge {
display: inline-block;
padding: 2px 9px;
border-radius: 999px;
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.02em;
text-transform: uppercase;
border: 1px solid transparent;
}
.badge-confirmed { background: var(--status-confirmed-tint); color: var(--status-confirmed); }
.badge-busy { background: var(--status-busy-tint); color: var(--status-busy); }
.badge-private { background: var(--status-private-tint); color: var(--status-private); }
.badge-proposed { background: var(--status-proposed-tint); color: var(--status-proposed); }
/* event actions */ /* event actions */
.event-actions { .event-actions {
display: flex; display: flex;
flex-wrap: wrap;
gap: var(--space-2); gap: var(--space-2);
margin-top: var(--space-4); margin-top: var(--space-4);
} }
.event-actions button { .event-actions button {
margin-top: 0; margin-top: 0;
width: auto;
padding: 8px 14px;
}
.event-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
}
/* radio kind picker */
.kind-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-2);
margin-top: var(--space-2);
}
.kind-option {
position: relative;
display: block;
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 12px 14px;
cursor: pointer;
transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.kind-option:hover {
border-color: var(--border-strong);
}
.kind-option input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
margin: 0;
}
.kind-option-title {
display: block;
font-weight: 600;
}
.kind-option-desc {
display: block;
font-size: 12px;
color: var(--muted);
margin-top: 2px;
}
.kind-option:has(input:checked) {
border-color: var(--accent);
background: var(--accent-tint);
}
/* settings toggles */
.setting-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-3) 0;
border-bottom: 1px solid var(--border);
}
.setting-row:last-child {
border-bottom: none;
}
.setting-info {
max-width: 70%;
}
.setting-title {
font-weight: 600;
}
.setting-desc {
font-size: 12.5px;
color: var(--muted);
margin-top: 2px;
}
.setting-control {
flex-shrink: 0;
}
.setting-control select {
width: auto;
margin-top: 0;
}
/* switch */
.switch {
position: relative;
display: inline-block;
width: 44px;
height: 24px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
margin: 0;
}
.switch .slider {
position: absolute;
inset: 0;
background: var(--border-strong);
border-radius: 999px;
transition: background 0.15s var(--ease);
}
.switch .slider::before {
content: "";
position: absolute;
height: 18px;
width: 18px;
left: 3px;
top: 3px;
background: #fff;
border-radius: 50%;
transition: transform 0.15s var(--ease);
box-shadow: var(--shadow-sm);
}
.switch input:checked + .slider {
background: var(--accent);
}
.switch input:checked + .slider::before {
transform: translateX(20px);
}
.switch input:focus-visible + .slider {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* member list */
.member-list {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-top: var(--space-2);
}
.member-chip {
padding: 4px 10px;
border: 1px solid var(--border);
border-radius: 999px;
font-size: 12px;
} }
/* calendar */ /* calendar */
@@ -321,6 +612,7 @@ form {
.calendar-legend { .calendar-legend {
display: flex; display: flex;
flex-wrap: wrap;
gap: var(--space-5); gap: var(--space-5);
margin-top: var(--space-4); margin-top: var(--space-4);
font-size: 12px; font-size: 12px;
@@ -391,6 +683,11 @@ form {
color: var(--muted); color: var(--muted);
} }
.calendar-day-header.today {
color: var(--accent);
font-weight: 600;
}
.calendar-day-track { .calendar-day-track {
position: relative; position: relative;
height: 576px; /* 12 uur zichtbaar x 48px */ height: 576px; /* 12 uur zichtbaar x 48px */
@@ -453,13 +750,25 @@ form {
border-left-color: var(--status-private); border-left-color: var(--status-private);
} }
.event-proposed {
background: var(--status-proposed-tint);
border-left-color: var(--status-proposed);
border-left-style: dashed;
}
.legend-dot.event-confirmed, .legend-dot.event-confirmed,
.legend-dot.event-busy, .legend-dot.event-busy,
.legend-dot.event-private { .legend-dot.event-private,
.legend-dot.event-proposed {
border-radius: 2px; border-radius: 2px;
border-left: none; border-left: none;
} }
.legend-dot.event-confirmed { background: var(--status-confirmed); }
.legend-dot.event-busy { background: var(--status-busy); }
.legend-dot.event-private { background: var(--status-private); }
.legend-dot.event-proposed { background: var(--status-proposed); }
/* login screen */ /* login screen */
.login-screen { .login-screen {
@@ -487,3 +796,66 @@ form {
font-weight: 600; font-weight: 600;
text-align: center; text-align: center;
} }
/* ============================================================
Accessibility preference classes (toggled on <body>)
============================================================ */
/* High contrast: stronger borders + pure ink/paper text */
body.a11y-contrast {
--border: #000000;
--border-strong: #000000;
--muted: #2a2a2a;
--text: #000000;
}
body.a11y-contrast.dark {
--border: #ffffff;
--border-strong: #ffffff;
--muted: #d8d8d8;
--text: #ffffff;
}
body.a11y-contrast .card,
body.a11y-contrast .list-item,
body.a11y-contrast input,
body.a11y-contrast select,
body.a11y-contrast textarea {
border-width: 2px;
}
/* Underline all links for clarity */
body.a11y-underline a {
text-decoration: underline;
}
/* Reduce motion */
body.a11y-reduce-motion,
body.a11y-reduce-motion * {
transition: none !important;
animation: none !important;
scroll-behavior: auto !important;
}
/* Dyslexia-friendly reading: readable stack + generous spacing */
body.a11y-dyslexic {
font-family: "Atkinson Hyperlegible", "Comic Sans MS", Verdana, sans-serif;
letter-spacing: 0.03em;
word-spacing: 0.12em;
line-height: 1.8;
}
body.a11y-dyslexic h1,
body.a11y-dyslexic h2,
body.a11y-dyslexic h3,
body.a11y-dyslexic .card h3 {
font-family: "Atkinson Hyperlegible", "Comic Sans MS", Verdana, sans-serif;
}
/* Respect the OS-level reduced motion request too */
@media (prefers-reduced-motion: reduce) {
* {
transition: none !important;
animation: none !important;
}
}