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

nieuwe commit

Browse Source
This commit is contained in:
ben
2026-08-04 17:39:35 +02:00
parent 8d52c29d34
commit 921746fa0a
4 changed files with 1971 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.js
+1178
View File
File diff suppressed because it is too large Load Diff
calender/index.html
+146
View File
@@ -0,0 +1,146 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic HTML Calendar</title>
<style>
.calendar {
--accent: #0e2b68;
max-width: 480px;
margin: 0 auto;
font-family: system-ui, sans-serif;
}
.calendar-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 0;
}
.calendar-header button {
background: none;
border: 1px solid #3a71b9;
border-radius: 6px;
padding: 0.4rem 0.8rem;
cursor: pointer;
font-size: 0.9rem;
}
.calendar-header button:hover { background: #435466; }
.month-year {
font-size: 1.2rem;
font-weight: 600;
color: var(--accent);
}
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
text-align: center;
}
.day-name {
padding: 0.5rem 0;
font-size: 0.8rem;
font-weight: 600;
color: #4270b1;
}
.day {
padding: 0.6rem 0;
font-size: 0.95rem;
border-radius: 6px;
}
.day:hover { background: #258ff8; }
.today {
background: var(--accent);
color: #ffffff;
font-weight: 600;
}
.today:hover { background: var(--accent); }
</style>
</head>
<body>
<div class="calendar">
<div class="calendar-header">
<button id="prev">&larr; Prev</button>
<span class="month-year" id="monthYear"></span>
<button id="next">Next &rarr;</button>
</div>
<div class="calendar-grid" id="grid">
<span class="day-name">Mon</span>
<span class="day-name">Tue</span>
<span class="day-name">Wed</span>
<span class="day-name">Thu</span>
<span class="day-name">Fri</span>
<span class="day-name">Sat</span>
<span class="day-name">Sun</span>
</div>
</div>
<script>
const grid = document.getElementById("grid");
const monthYear = document.getElementById("monthYear");
const now = new Date();
let currentMonth = now.getMonth(); // 0-based: 0 = January
let currentYear = now.getFullYear();
const monthNames = [
"January","February","March","April","May","June",
"July","August","September","October","November","December"
];
function renderCalendar() {
// Clear previous day cells, keep the 7 day-name headers
grid.querySelectorAll(".day").forEach(d => d.remove());
monthYear.textContent = monthNames[currentMonth] + " " + currentYear;
// Day of week for the 1st (0=Sun). Convert to Mon-start: Mon=0 … Sun=6
let firstDay = new Date(currentYear, currentMonth, 1).getDay();
firstDay = (firstDay + 6) % 7;
const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
const today = new Date();
// Blank cells before the first day
for (let i = 0; i < firstDay; i++) {
const blank = document.createElement("span");
blank.className = "day";
grid.appendChild(blank);
}
// Day cells
for (let d = 1; d <= daysInMonth; d++) {
const cell = document.createElement("span");
cell.className = "day";
cell.textContent = d;
if (
d === today.getDate() &&
currentMonth === today.getMonth() &&
currentYear === today.getFullYear()
) {
cell.classList.add("today");
}
grid.appendChild(cell);
}
}
document.getElementById("prev").addEventListener("click", () => {
currentMonth--;
if (currentMonth < 0) { currentMonth = 11; currentYear--; }
renderCalendar();
});
document.getElementById("next").addEventListener("click", () => {
currentMonth++;
if (currentMonth > 11) { currentMonth = 0; currentYear++; }
renderCalendar();
});
renderCalendar();
</script>
<br>
<br>
<br>
</body>
</html>
index.html
+100
View File
@@ -0,0 +1,100 @@
<!DOCTYPE html>
<html>
<head>
<title>Calendar Dashboard</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="login-screen" id="login-screen">
<div class="login-box">
<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>
<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>
style.css
+547
View File
@@ -0,0 +1,547 @@
: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;
}
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family:
Inter,
system-ui,
sans-serif;
transition: 0.2s;
}
.layout {
display: grid;
grid-template-columns: 260px 1fr;
height: 100vh;
display: none;
}
.sidebar {
background: var(--sidebar);
border-right: 1px solid var(--border);
padding: 25px;
display: flex;
flex-direction: column;
}
.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;
}
.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 {
padding: 40px;
overflow-y: auto;
}
h1 {
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: 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 {
width: 55px;
flex-shrink: 0;
padding-top: 0px;
}
.calendar-hour-label {
height: 48px; /* 2 uur = 48px */
font-size: 11px;
color: var(--muted);
text-align: right;
padding-right: 8px;
display: flex;
justify-content: flex-end;
align-items: flex-start;
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 {
height: 32px;
text-align: center;
padding: 6px 0;
font-size: 12px;
color: var(--muted);
}
.calendar-day-track {
position: relative;
height: 576px; /* 12 uur zichtbaar × 48px */
background-image:
repeating-linear-gradient(
to bottom,
var(--border) 0,
var(--border) 1px,
transparent 1px,
transparent 48px
);
}
.calendar-event {
position: absolute;
left: 4px;
right: 4px;
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);
}
.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;
}