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.
2026-02-22 00:50:22 +01:00
parent 6b96cd2012
commit 038910e9f0
26 changed files with 32980 additions and 5 deletions
--- a/public/index.less
+++ b/public/index.less
@@ -0,0 +1,197 @@
+.mainbox {
+    padding: 8px 16px;
+    color: #000000;
+    background-color: #ffffff;
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+}
+
+
+
+.events {
+
+
+    h3 {
+        color: #009688;
+    }
+
+    .event {
+        display: flex;
+        align-items: center;
+        margin-bottom: 16px;
+        border-bottom: 1px solid #ddd;
+        padding-bottom: 8px;
+
+        .date {
+            width: 60px;
+            text-align: center;
+            background: #707070;
+            color: #fff;
+            padding: 10px;
+            border-radius: 8px;
+            font-weight: 600;
+            line-height: 1.2;
+            margin-right: 12px;
+
+            &.today {
+                background-color: #222222;
+            }
+        }
+
+        .info {
+
+            .type {
+                color: #009688;
+                font-weight: bold;
+                font-size: 13px;
+                text-transform: uppercase
+            }
+
+            p {
+                margin: 0;
+                padding: 0;
+            }
+        }
+    }
+}
+
+
+
+.modul {
+    @color_1: white;
+    @color_2: #4f46e5;
+
+
+    #auth-module {
+        display: none;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, 0.5);
+        justify-content: center;
+        align-items: center;
+        z-index: 1000;
+
+
+        .close-btn {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            width: auto;
+            background: red;
+            color: @color_1;
+            border: none;
+            border-radius: 5px;
+            padding: 5px 10px;
+            cursor: pointer;
+        }
+
+
+        .auth-box {
+            background: #fff;
+            padding: 2rem;
+            width: 320px;
+            border-radius: 10px;
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+            position: relative;
+
+            &.shake {
+                animation: shake 0.3s;
+            }
+
+
+            @keyframes shake {
+                0% {
+                    transform: translateX(0);
+                }
+
+                25% {
+                    transform: translateX(-10px) rotate(-2deg);
+                }
+
+                50% {
+                    transform: translateX(10px) rotate(2deg);
+                }
+
+                75% {
+                    transform: translateX(-10px) rotate(-2deg);
+                }
+
+                100% {
+                    transform: translateX(0);
+                }
+            }
+        }
+
+        h2 {
+            text-align: center;
+            margin-bottom: 1rem;
+        }
+
+        input {
+            width: 100%;
+            padding: 10px;
+            margin: 8px 0;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+        }
+
+        button {
+            width: 100%;
+            padding: 10px;
+            background: #4f46e5;
+            color: @color_1;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            margin-top: 10px;
+
+            &:hover {
+                background: #4338ca;
+            }
+        }
+
+        .switch {
+            text-align: center;
+            margin-top: 1rem;
+            font-size: 0.9rem;
+
+            span {
+                color: @color_2;
+                cursor: pointer;
+                font-weight: bold;
+            }
+        }
+
+        .hidden {
+            display: none;
+        }
+
+
+    }
+}
+
+
+@keyframes rainbow_animation {
+    0% {
+        background-position: 0 0;
+    }
+
+    50% {
+        background-position: 50% 0;
+    }
+
+    100% {
+        background-position: 100% 0;
+    }
+}
+
+.rainbow-text {
+    background: linear-gradient(to right, #6666ff, #0099ff, #00ff00, #ff3399, #6666ff);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    animation: rainbow_animation 6s infinite;
+    background-size: 400% 100%;
+}