Add service worker for push notifications, create calendar layout, and implement WLAN QR code page
- 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.
This commit is contained in:
313
public/test.html
Normal file
313
public/test.html
Normal file
@@ -0,0 +1,313 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user