Update index.html

index.html

@@ -87,38 +87,34 @@
         }
 
         #crosshair {
-        position: fixed;
-        top: 25%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        width: 40px;
-        height: 40px;
-        border: 2px solid rgba(255,0,0,0.7);
-        border-radius: 50%;
-        z-index: 1001;
-        pointer-events: none;
-        mix-blend-mode: difference;
-        transition: all 0.2s ease; /* 부드러운 전환 효과 추가 */
-    }
-/* 조준 가능 상태의 크로스헤어 스타일 */
-#crosshair.target-locked {
-    border: 4px solid rgba(0,255,0,0.9);
-    box-shadow: 0 0 10px rgba(0,255,0,0.5);
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 40px;
+    height: 40px;
+    border: 2px solid #00ff00;
+    border-radius: 50%;
+    z-index: 1001;
+    pointer-events: none;
+    transition: all 0.2s ease;
+}
+
+/* 물체가 감지되었을 때의 스타일 */
+#crosshair.target-detected {
+    border-color: #ff0000;
+    border-width: 3px;
+    box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
 }
 
 #crosshair::before,
 #crosshair::after {
     content: '';
     position: absolute;
-    background: rgba(255,0,0,0.7);
+    background: #00ff00;
     transition: all 0.2s ease;
 }
 
-#crosshair.target-locked::before,
-#crosshair.target-locked::after {
-    background: rgba(0,255,0,0.9);
-}
-
 #crosshair::before {
     top: 50%;
     left: -10px;
@@ -135,12 +131,10 @@
     transform: translateX(-50%);
 }
 
-#crosshair.target-locked::before {
-    height: 4px;
-}
-
-#crosshair.target-locked::after {
-    width: 4px;
+/* 물체가 감지되었을 때의 크로스 라인 스타일 */
+#crosshair.target-detected::before,
+#crosshair.target-detected::after {
+    background: #ff0000;
 }
 
         #healthBar {