update

2025-12-29 03:44:27 +09:00
parent 3885ddd977
commit f3f1a568e2
14 changed files with 380 additions and 100 deletions
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -510,6 +510,68 @@
 </head>

 <body>
+    <div id="loading-screen">
+        <div class="spinner"></div>
+        <div class="loading-text">Loading Maps...</div>
+    </div>
+    <style>
+        #loading-screen {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: #1a1a1a;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            z-index: 9999;
+            transition: opacity 0.5s ease-out;
+        }
+
+        #loading-screen.fade-out {
+            opacity: 0;
+            pointer-events: none;
+        }
+
+        .spinner {
+            width: 40px;
+            height: 40px;
+            border: 3px solid rgba(255, 255, 255, 0.1);
+            border-radius: 50%;
+            border-top-color: #007AFF;
+            animation: spin 1s ease-in-out infinite;
+            margin-bottom: 16px;
+        }
+
+        .loading-text {
+            color: rgba(255, 255, 255, 0.8);
+            font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+            font-size: 14px;
+            font-weight: 500;
+            letter-spacing: 0.5px;
+        }
+
+        @keyframes spin {
+            to {
+                transform: rotate(360deg);
+            }
+        }
+
+        [data-theme="light"] #loading-screen {
+            background-color: #f5f5f7;
+        }
+
+        [data-theme="light"] .loading-text {
+            color: rgba(0, 0, 0, 0.6);
+        }
+
+        [data-theme="light"] .spinner {
+            border-color: rgba(0, 0, 0, 0.1);
+            border-top-color: #007AFF;
+        }
+    </style>
    <div id="user-location"></div>
    <div id="compass">
        <div class="direction n">N</div>