Update index.html

index.html

@@ -88,7 +88,34 @@
             font-size: 72px;
             color: white;
             text-shadow: 2px 2px 5px black;
-            margin-bottom: 50px;
+            margin-bottom: 30px;
+        }
+        .stage-container {
+            display: flex;
+            gap: 40px;
+            align-items: flex-start;
+        }
+        .stage-item {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 15px;
+        }
+        .stage-preview {
+            width: 200px;
+            height: 120px;
+            border: 3px solid #4CAF50;
+            border-radius: 8px;
+            overflow: hidden;
+            transition: transform 0.3s ease;
+        }
+        .stage-preview img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+        .stage-preview:hover {
+            transform: scale(1.05);
         }
         .stageButton {
             padding: 15px 30px;
@@ -98,7 +125,10 @@
             border: none;
             border-radius: 5px;
             cursor: pointer;
-            margin: 10px;
+            transition: background-color 0.3s ease;
+        }
+        .stageButton:hover {
+            background: #45a049;
         }
         .stageButton:disabled {
             background: #666;
@@ -135,11 +165,31 @@
     
     <div id="titleScreen">
         <h1>TANK WAR</h1>
-        <div id="stageSelect">
-            <button class="stageButton" onclick="startStage(1)">Stage 1</button>
-            <button class="stageButton" onclick="startStage(2)">Stage 2</button>
-            <button class="stageButton" onclick="startStage(3)">Stage 3</button>
-            <button class="stageButton" disabled>Stage 4</button>
+        <div class="stage-container">
+            <div class="stage-item">
+                <button class="stageButton" onclick="startStage(1)">Stage 1</button>
+                <div class="stage-preview">
+                    <img src="stage1.png" alt="Stage 1 Preview">
+                </div>
+            </div>
+            <div class="stage-item">
+                <button class="stageButton" onclick="startStage(2)">Stage 2</button>
+                <div class="stage-preview">
+                    <img src="stage2.png" alt="Stage 2 Preview">
+                </div>
+            </div>
+            <div class="stage-item">
+                <button class="stageButton" onclick="startStage(3)">Stage 3</button>
+                <div class="stage-preview">
+                    <img src="stage3.png" alt="Stage 3 Preview">
+                </div>
+            </div>
+            <div class="stage-item">
+                <button class="stageButton" disabled>Stage 4</button>
+                <div class="stage-preview">
+                    <img src="stage4.png" alt="Stage 4 Preview">
+                </div>
+            </div>
         </div>
     </div>
     <div id="shop" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:rgba(0,0,0,0.9); padding:20px; border-radius:10px; color:white; z-index:1000;">
@@ -185,7 +235,6 @@
     </div>
     <button id="bossButton" class="button">Fight Boss!</button>
     <div id="winMessage" class="button" style="font-size: 72px; background: none;">You Win!</div>
-
     <script>
         const canvas = document.getElementById('gameCanvas');
         const ctx = canvas.getContext('2d');