Spaces:

cutechicken
/

TankWar3D

Running

App Files Files Community

cutechicken commited on 19 days ago

Commit

9c0f025

•

1 Parent(s): 6fd82de

Update index.html

Browse files

Files changed (1) hide show

index.html +33 -112

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Combat Helicopter Simulator</title>
     <style>
         body {
             margin: 0;
@@ -45,29 +45,6 @@
             text-align: center;
         }
-        #cockpit-frame {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            border: 20px solid #2a2a2a;
-            box-sizing: border-box;
-            pointer-events: none;
-            z-index: 1000;
-        }
-        #cockpit-overlay {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(135deg, rgba(0,0,0,0.3) 0%, transparent 50%, rgba(0,0,0,0.3) 100%);
-            pointer-events: none;
-            z-index: 999;
-        }
         #info {
             position: absolute;
             top: 10px;
@@ -89,7 +66,7 @@
             transform: translate(-50%, -50%);
             width: 40px;
             height: 40px;
-            border: 2px solid rgba(0,255,0,0.7);
             border-radius: 50%;
             z-index: 1001;
             pointer-events: none;
@@ -99,7 +76,7 @@
         #crosshair::after {
             content: '';
             position: absolute;
-            background: rgba(0,255,0,0.7);
         }
         #crosshair::before {
@@ -122,12 +99,12 @@
             position: absolute;
             bottom: 20px;
             left: 20px;
-            width: 400px;
-            height: 30px;
             background: rgba(0,20,0,0.7);
             border: 2px solid #0f0;
             z-index: 1001;
-            border-radius: 15px;
             overflow: hidden;
         }
@@ -151,112 +128,56 @@
             border-radius: 5px;
         }
-        #altitude-indicator,
-        #speed-indicator,
-        #compass {
-            position: fixed;
             color: #0f0;
             background: rgba(0,20,0,0.7);
             padding: 10px;
             border: 1px solid #0f0;
             border-radius: 5px;
-            z-index: 1001;
-        }
-        #altitude-indicator {
-            left: 20px;
-            top: 50%;
-        }
-        #speed-indicator {
-            right: 20px;
-            top: 50%;
         }
-        #compass {
-            top: 20px;
-            left: 50%;
-            transform: translateX(-50%);
-        }
-        #radar {
-            position: fixed;
-            bottom: 20px;
-            right: 20px;
-            width: 200px;
-            height: 200px;
-            background: rgba(0,20,0,0.7);
-            border: 2px solid #0f0;
-            border-radius: 50%;
-            z-index: 1001;
-            overflow: hidden;
-        }
-        .radar-sweep {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            width: 50%;
-            height: 2px;
-            background: linear-gradient(90deg, #0f0, transparent);
-            transform-origin: left center;
-            animation: radar-sweep 4s infinite linear;
-        }
-        .radar-dot {
-            position: absolute;
-            width: 4px;
-            height: 4px;
-            background: #f00;
-            border-radius: 50%;
-            transform: translate(-50%, -50%);
-        }
-        @keyframes radar-sweep {
-            from { transform: rotate(0deg); }
-            to { transform: rotate(360deg); }
-        }
-        #stage {
             position: absolute;
-            top: 50%;
             left: 50%;
-            transform: translate(-50%, -50%);
             color: #0f0;
-            background: rgba(0,20,0,0.8);
-            padding: 20px;
-            font-size: 32px;
             z-index: 1001;
-            border-radius: 10px;
-            display: none;
         }
     </style>
 </head>
 <body>
     <div id="loading">
         <div class="loading-spinner"></div>
-        <div class="loading-text">Loading game assets...</div>
     </div>
-    <div id="cockpit-frame"></div>
-    <div id="cockpit-overlay"></div>
     <div id="info">
         Click to start<br>
-        WASD - Move Helicopter<br>
-        Mouse - Aim<br>
-        Left Click - Shoot<br>
-        R - Reload
     </div>
     <div id="crosshair"></div>
     <div id="healthBar"><div id="health"></div></div>
-    <div id="ammo">Ammo: 30/30</div>
-    <div id="stage">Stage 1</div>
-    <div id="altitude-indicator">ALT: <span>50</span>m</div>
-    <div id="speed-indicator">SPD: <span>0</span>km/h</div>
-    <div id="compass">HDG: <span>0</span>°</div>
-    <div id="radar">
-        <div class="radar-sweep"></div>
-        <div class="radar-targets"></div>
-    </div>
     <script type="importmap">
         {

 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tank Combat Simulator</title>
     <style>
         body {
             margin: 0;
             text-align: center;
         }
         #info {
             position: absolute;
             top: 10px;
             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;
         #crosshair::after {
             content: '';
             position: absolute;
+            background: rgba(255,0,0,0.7);
         }
         #crosshair::before {
             position: absolute;
             bottom: 20px;
             left: 20px;
+            width: 200px;
+            height: 20px;
             background: rgba(0,20,0,0.7);
             border: 2px solid #0f0;
             z-index: 1001;
+            border-radius: 10px;
             overflow: hidden;
         }
             border-radius: 5px;
         }
+        #turretInfo {
+            position: absolute;
+            top: 50px;
+            right: 20px;
             color: #0f0;
             background: rgba(0,20,0,0.7);
             padding: 10px;
+            font-size: 16px;
+            z-index: 1001;
             border: 1px solid #0f0;
             border-radius: 5px;
         }
+        #controls {
             position: absolute;
+            top: 10px;
             left: 50%;
+            transform: translateX(-50%);
             color: #0f0;
+            background: rgba(0,20,0,0.7);
+            padding: 10px;
+            font-size: 14px;
             z-index: 1001;
+            border: 1px solid #0f0;
+            border-radius: 5px;
+            text-align: center;
         }
     </style>
 </head>
 <body>
     <div id="loading">
         <div class="loading-spinner"></div>
+        <div class="loading-text">Loading tank assets...</div>
     </div>
     <div id="info">
         Click to start<br>
+        W - Forward<br>
+        S - Backward<br>
+        A - Rotate Left<br>
+        D - Rotate Right<br>
+        Mouse - Aim Turret<br>
+        Left Click - Fire
     </div>
+    <div id="controls">Tank Combat Simulator</div>
     <div id="crosshair"></div>
     <div id="healthBar"><div id="health"></div></div>
+    <div id="ammo">Ammo: 10/10</div>
+    <div id="turretInfo">Turret Angle: 0°</div>
     <script type="importmap">
         {