update

2025-12-03 04:01:36 +09:00
parent afdcf23222
commit 003aae2b6b
10 changed files with 915 additions and 348 deletions
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -68,10 +68,122 @@
            padding: 5px 10px;
            border-radius: 4px;
        }
+
+        #compass {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            width: 60px;
+            height: 60px;
+            background: rgba(0, 0, 0, 0.6);
+            border-radius: 50%;
+            border: 2px solid rgba(255, 255, 255, 0.2);
+            backdrop-filter: blur(5px);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-weight: bold;
+            pointer-events: none;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+            z-index: 100;
+        }
+
+        .direction {
+            position: absolute;
+            font-size: 14px;
+            font-family: monospace;
+        }
+
+        .n {
+            top: 4px;
+            color: #ff5555;
+        }
+
+        .s {
+            bottom: 4px;
+            color: #ddd;
+        }
+
+        .e {
+            right: 6px;
+            color: #ddd;
+        }
+
+        .w {
+            left: 6px;
+            color: #ddd;
+        }
+
+        .compass-center {
+            width: 4px;
+            height: 4px;
+            background: white;
+            border-radius: 50%;
+        }
+
+        .compass-arrow {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 0;
+            height: 0;
+            border-left: 5px solid transparent;
+            border-right: 5px solid transparent;
+            border-bottom: 20px solid #ff5555;
+            transform: translate(-50%, -100%);
+        }
    </style>
 </head>

 <body>
+    <div id="compass">
+        <div class="direction n">N</div>
+        <div class="direction e">E</div>
+        <div class="direction s">S</div>
+        <div class="direction w">W</div>
+        <div class="compass-arrow"></div>
+        <div class="compass-center"></div>
+    </div>
+
+    <div id="labels"></div>
+
+    <style>
+        #labels {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            overflow: hidden;
+        }
+
+        .label {
+            position: absolute;
+            transform: translate(-50%, -50%);
+            color: white;
+            text-shadow: 0 0 2px black, 0 0 4px black;
+            font-family: sans-serif;
+            white-space: nowrap;
+            pointer-events: none;
+        }
+
+        .label-country {
+            font-size: 16px;
+            font-weight: bold;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            color: #ffdddd;
+        }
+
+        .label-city {
+            font-size: 12px;
+            font-weight: normal;
+            color: #ffffff;
+        }
+    </style>
+
    <div id="ui-container">
        <div class="control-group">
            <button id="btn-zoom-in">+</button>