feat(loading_page): move loading page css to style.css and serve as static asset

2026-04-18 14:39:49 +02:00 · 2025-11-06 20:32:40 +08:00
parent ef893974ea
commit d57d76dc65
4 changed files with 108 additions and 104 deletions
--- a/internal/idlewatcher/html/loading_page.html
+++ b/internal/idlewatcher/html/loading_page.html
@@ -4,109 +4,8 @@
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{{.Title}}</title>
-    <style>
-      /* size variables */
-      :root {
-        --dot-size: 12px;
-        --logo-size: 100px;
-      }
-      /* Global Styles */
-      * {
-        box-sizing: border-box;
-        margin: 0;
-        padding: 0;
-      }
-      body {
-        font-family:
-          "Inter",
-          -apple-system,
-          BlinkMacSystemFont,
-          "Segoe UI",
-          Roboto,
-          Oxygen,
-          Ubuntu,
-          Cantarell,
-          "Open Sans",
-          "Helvetica Neue",
-          sans-serif;
-        font-size: 16px;
-        line-height: 1.5;
-        color: #f8f9fa;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        height: 100vh;
-        margin: 0;
-        gap: 32px;
-        background: linear-gradient(135deg, #121212 0%, #1e1e1e 100%);
-      }
-
-      /* Container */
-      .container {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        padding: 48px;
-        border-radius: 16px;
-        background-color: rgba(30, 30, 30, 0.6);
-        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
-        backdrop-filter: blur(8px);
-        max-width: 90%;
-        transition: all 0.3s ease;
-      }
-
-      /* Spinner Styles */
-      .loading-dots {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        gap: 8px;
-        padding-top: 20px;
-        padding-bottom: 6px;
-      }
-      .dot {
-        width: var(--dot-size);
-        height: var(--dot-size);
-        background-color: #66d9ef;
-        border-radius: 50%;
-        animation: bounce 1.3s infinite ease-in-out;
-      }
-      .dot:nth-child(1) {
-        animation-delay: -0.32s;
-      }
-      .dot:nth-child(2) {
-        animation-delay: -0.16s;
-      }
-      @keyframes bounce {
-        0%,
-        80%,
-        100% {
-          transform: translateY(0);
-        }
-        40% {
-          transform: translateY(-10px);
-        }
-      }
-
-      /* Message Styles */
-      .message {
-        font-size: 20px;
-        font-weight: 500;
-        text-align: center;
-        color: #f8f9fa;
-        max-width: 500px;
-        letter-spacing: 0.3px;
-        white-space: nowrap;
-      }
-
-      /* Logo */
-      .logo {
-        width: var(--logo-size);
-        height: var(--logo-size);
-      }
-    </style>
+    <link rel="stylesheet" href="/style.css" />
+    <link rel="icon" href="/favicon.ico" />
  </head>
  <body>
    <div class="container">