Update index.html

index.html

@@ -8,11 +8,11 @@
     <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
     <style>
-        html,
-        body {
+        html, body {
             width: 100%;
             height: 100%;
             margin: 0;
+            background: #000;
         }
 
         .map-container {
@@ -20,35 +20,32 @@
             height: 900px;
             position: relative;
             background-image: url('./map-bg.png');
+            background-size: cover;
+            background-position: center;
         }
 
-        .map {
-            width: 100%;
-            height: 100%;
-            background-image: url('./map.png');
-            mix-blend-mode: multiply;
-            filter: grayscale(1);
-            position: relative;
-        }
-
-        .map .mask {
+        #leaflet-map {
             width: 100%;
             height: 100%;
-            background-image: url("./cloud.png");
-            mix-blend-mode: lighten;
-            animation: 3s linear 0s magic forwards;
             position: absolute;
             top: 0;
             left: 0;
+            background: transparent;
         }
 
-        #leaflet-map {
+        .leaflet-tile-container img {
+            opacity: 0.15 !important;
+        }
+
+        .map .mask {
             width: 100%;
             height: 100%;
+            background-image: url("./cloud.png");
+            mix-blend-mode: lighten;
+            animation: 8s linear 0s magic forwards;
             position: absolute;
             top: 0;
             left: 0;
-            background: transparent;
         }
 
         .track {
@@ -98,12 +95,10 @@
             0% {
                 opacity: 0;
             }
-
             25% {
                 opacity: 1;
                 filter: brightness(1);
             }
-
             100% {
                 opacity: 1;
                 filter: brightness(10);
@@ -118,31 +113,24 @@
             0% {
                 background-position-x: 0px;
             }
-
             25% {
                 background-position-x: 0px;
             }
-
             25.1% {
                 background-position-x: -10px;
             }
-
             50% {
                 background-position-x: -10px;
             }
-
             50.1% {
                 background-position-x: -20px;
             }
-
             75% {
                 background-position-x: -20px;
             }
-
             75.1% {
                 background-position-x: -30px;
             }
-
             100% {
                 background-position-x: -30px;
             }
@@ -161,12 +149,17 @@
         }
 
         @keyframes magic {
-            from {
+            0% {
                 filter: brightness(10);
+                opacity: 1;
             }
-
-            to {
+            70% {
+                filter: brightness(8);
+                opacity: 1;
+            }
+            100% {
                 filter: brightness(0);
+                opacity: 0;
             }
         }
 
@@ -179,16 +172,17 @@
             background-size: 160px 40px;
             text-align: center;
             line-height: 30px;
-            font-family: 'Apple Chancery';
+            font-family: 'Apple Chancery', cursive;
             z-index: 1000;
             animation: 1s linear 0s nameShow forwards;
+            color: #3c2a1e;
+            text-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
         }
 
         @keyframes nameShow {
             from {
                 opacity: 0;
             }
-
             to {
                 opacity: 1;
             }
@@ -211,6 +205,7 @@
             border: 1px solid #8b4513;
             border-radius: 4px;
             font-family: 'Apple Chancery', cursive;
+            background: rgba(255, 255, 255, 0.9);
         }
 
         .user-controls button {
@@ -221,10 +216,11 @@
             border-radius: 4px;
             cursor: pointer;
             font-family: 'Apple Chancery', cursive;
+            transition: background-color 0.3s;
         }
 
-        .leaflet-container {
-            background: transparent !important;
+        .user-controls button:hover {
+            background: #654321;
         }
 
         .leaflet-control-attribution {
@@ -232,7 +228,6 @@
         }
     </style>
 </head>
-
 <body>
     <div class="map-container">
         <div class="map">
@@ -254,7 +249,7 @@
         let otherUsers = {};
         let lastPosition = null;
         let lastUpdateTime = 0;
-        const updateInterval = 1000; // 位置更新最小间隔（毫秒）
+        const updateInterval = 1000;
 
         function initSocket() {
             socket = io();
@@ -293,6 +288,7 @@
         }
 
         function getAngle(p0, p1) {
+            if (!p0 || !p1) return 0;
             const deltaX = p1.lng - p0.lng;
             const deltaY = p1.lat - p0.lat;
             return Math.atan2(deltaY, deltaX);
@@ -377,7 +373,6 @@
                 }
             }
 
-            // 移除已断开连接的用户
             for (const name of Object.keys(otherUsers)) {
                 if (!users[name]) {
                     map.removeLayer(otherUsers[name]);
@@ -412,15 +407,13 @@
             map = L.map('leaflet-map', {
                 center: [39.9042, 116.4074],
                 zoom: 16,
-                zoomControl: false,
-                attributionControl: false
+                zoomControl: false
             });
 
             L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                 maxZoom: 19
             }).addTo(map);
 
-            // 等待cloud.png动画结束后开始初始化其他功能
             const mapMask = document.getElementById('mapMask');
             mapMask.addEventListener('animationend', () => {
                 initSocket();
@@ -437,7 +430,6 @@
             });
         }
 
-        // 启动应用
         initMap();
     </script>
 </body>