BolkeDerBaer
038910e9f0
- Implemented a service worker (sw.js) to handle push notifications with dynamic options and notification click events. - Created a calendar layout in test.html with a grid system for displaying events across days and times. - Developed a visually engaging WLAN QR code page (wlan.html) with animated backgrounds, particle effects, and tips for connecting to the network.
313 lines
8.7 KiB
HTML
313 lines
8.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
<style>
|
|
:root {
|
|
--numDays: 5;
|
|
--numHours: 7;
|
|
--timeHeight: 60px;
|
|
--calBgColor: #fff1f8;
|
|
--eventBorderColor: #f2d3d8;
|
|
--eventColor1: #ffd6d1;
|
|
--eventColor2: #fafaa3;
|
|
--eventColor3: #e2f8ff;
|
|
--eventColor4: #d1ffe6;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.calendar {
|
|
display: grid;
|
|
gap: 10px;
|
|
grid-template-columns: auto 1fr;
|
|
margin: 2rem;
|
|
}
|
|
|
|
.timeline {
|
|
display: grid;
|
|
grid-template-rows: repeat(var(--numHours), var(--timeHeight));
|
|
}
|
|
|
|
.days {
|
|
display: grid;
|
|
grid-column: 2;
|
|
gap: 5px;
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
}
|
|
|
|
.events {
|
|
display: grid;
|
|
grid-template-rows: repeat(var(--numHours), var(--timeHeight));
|
|
border-radius: 5px;
|
|
background: var(--calBgColor);
|
|
}
|
|
|
|
.start-10 {
|
|
grid-row-start: 2;
|
|
}
|
|
|
|
.start-12 {
|
|
grid-row-start: 4;
|
|
}
|
|
|
|
.start-1 {
|
|
grid-row-start: 5;
|
|
}
|
|
|
|
.start-2 {
|
|
grid-row-start: 6;
|
|
}
|
|
|
|
.end-12 {
|
|
grid-row-end: 4;
|
|
}
|
|
|
|
.end-1 {
|
|
grid-row-end: 5;
|
|
}
|
|
|
|
.end-3 {
|
|
grid-row-end: 7;
|
|
}
|
|
|
|
.end-4 {
|
|
grid-row-end: 8;
|
|
}
|
|
|
|
.end-5 {
|
|
grid-row-end: 9;
|
|
}
|
|
|
|
.title {
|
|
font-weight: 600;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.event {
|
|
border: 1px solid var(--eventBorderColor);
|
|
border-radius: 5px;
|
|
padding: 0.5rem;
|
|
margin: 0 0.5rem;
|
|
background: white;
|
|
}
|
|
|
|
.space,
|
|
.date {
|
|
height: 60px
|
|
}
|
|
|
|
body {
|
|
font-family: system-ui, sans-serif;
|
|
}
|
|
|
|
.corp-fi {
|
|
background: var(--eventColor1);
|
|
}
|
|
|
|
.ent-law {
|
|
background: var(--eventColor2);
|
|
}
|
|
|
|
.writing {
|
|
background: var(--eventColor3);
|
|
}
|
|
|
|
.securities {
|
|
background: var(--eventColor4);
|
|
}
|
|
|
|
.date {
|
|
display: flex;
|
|
gap: 1em;
|
|
}
|
|
|
|
.date-num {
|
|
font-size: 3rem;
|
|
font-weight: 600;
|
|
display: inline;
|
|
}
|
|
|
|
.date-day {
|
|
display: inline;
|
|
font-size: 3rem;
|
|
font-weight: 100;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="calendar">
|
|
<div class="days">
|
|
<div class="day mon">
|
|
<div class="date">
|
|
<p class="date-num">9</p>
|
|
<p class="date-day">Mon</p>
|
|
</div>
|
|
<div class="events">
|
|
<div class="event start-2 end-5 securities">
|
|
<p class="title">Securities Regulation</p>
|
|
<p class="time">2:00 - 5:00</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="day tues">
|
|
<div class="date">
|
|
<p class="date-num">12</p>
|
|
<p class="date-day">Tues</p>
|
|
</div>
|
|
<div class="events">
|
|
<div class="event start-10 end-12 corp-fi">
|
|
<p class="title">Corporate Finance</p>
|
|
<p class="time">10:00 - 12:00</p>
|
|
</div>
|
|
<div class="event start-1 end-4 ent-law">
|
|
<p class="title">Entertainment Law</p>
|
|
<p class="time">1PM - 4PM</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="day wed">
|
|
<div class="date">
|
|
<p class="date-num">11</p>
|
|
<p class="date-day">Wed</p>
|
|
</div>
|
|
<div class="events">
|
|
<div class="event start-12 end-1 writing">
|
|
<p class="title">Writing Seminar</p>
|
|
<p class="time">11:00 - 12:00</p>
|
|
</div>
|
|
<div class="event start-2 end-5 securities">
|
|
<p class="title">Securities Regulation</p>
|
|
<p class="time">2:00 - 5:00</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="day thurs">
|
|
<div class="date">
|
|
<p class="date-num">12</p>
|
|
<p class="date-day">Thurs</p>
|
|
</div>
|
|
<div class="events">
|
|
<div class="event start-10 end-12 corp-fi">
|
|
<p class="title">Corporate Finance</p>
|
|
<p class="time">10:00 - 12:00</p>
|
|
</div>
|
|
<div class="event start-1 end-4 ent-law">
|
|
<p class="title">Entertainment Law</p>
|
|
<p class="time">1PM - 4PM</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="day fri">
|
|
<div class="date">
|
|
<p class="date-num">13</p>
|
|
<p class="date-day">Fri</p>
|
|
</div>
|
|
<div class="events">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script>
|
|
class Calander {
|
|
|
|
#timeHeight = 60;
|
|
#timeSlice = 1;
|
|
|
|
constructor(parent) {
|
|
this.parent = document.querySelector(parent);
|
|
|
|
this.elements = {
|
|
timeline: undefined,
|
|
days: undefined,
|
|
events: {},
|
|
}
|
|
|
|
this.createTimeline();
|
|
this.createDays();
|
|
|
|
this.parent.appendChild(this.elements.timeline);
|
|
this.parent.appendChild(this.elements.days);
|
|
}
|
|
|
|
createElement(type, content) {
|
|
let el = document.createElement(type);
|
|
if (content) el.textContent = content;
|
|
return el;
|
|
}
|
|
|
|
createTimeline(von = 16, bis = 22) {
|
|
let timeline = this.createElement('div');
|
|
|
|
timeline.style.display = 'grid';
|
|
timeline.style.gridTemplateRows = `repeat(${bis - von + 2}, ${this.#timeHeight}px)`;
|
|
|
|
console.log(timeline);
|
|
|
|
let spacer = this.createElement('div');
|
|
timeline.appendChild(spacer);
|
|
|
|
for (let i = von; i <= bis; i++) {
|
|
let timeMarker = this.createElement('div', `${i}:00`);
|
|
timeline.appendChild(timeMarker);
|
|
}
|
|
|
|
this.elements.timeline = timeline;
|
|
}
|
|
|
|
createDays() {
|
|
let days = this.createElement('div');
|
|
let dayNames = ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri'];
|
|
|
|
days.style.display = 'grid';
|
|
days.style.gridColumn = '2';
|
|
days.style.gap = '5px';
|
|
days.style.gridTemplateColumns = 'repeat(auto-fit, minmax(150px, 1fr))';
|
|
|
|
dayNames.forEach((dayName, i) => {
|
|
let date = this.createElement('div');
|
|
date.style.display = 'flex';
|
|
date.style.gap = '1em';
|
|
|
|
let daytime = new Date();
|
|
daytime.setDate(daytime.getDate() + (daytime.getDay() === 0 ? -6 : 1 - daytime.getDay()));
|
|
let num = this.createElement('p', daytime.getDate() + i);
|
|
num.style.fontSize = '3rem';
|
|
num.style.fontWeight = '600';
|
|
num.style.display = 'inline';
|
|
date.appendChild(num);
|
|
|
|
let day = this.createElement('p', dayName);
|
|
day.style.fontSize = '3rem';
|
|
day.style.fontWeight = '100';
|
|
day.style.display = 'inline';
|
|
date.appendChild(day);
|
|
|
|
days.appendChild(date);
|
|
let events = this.createElement('div');
|
|
this.elements.events.dayName = events;
|
|
days.appendChild(events);
|
|
});
|
|
|
|
|
|
this.elements.days = days;
|
|
}
|
|
|
|
}
|
|
|
|
let cal = new Calander('.calendar');
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html> |