updated html with level 2

BaselAdoum · BaselAdoum · commit ad9d9e4d0e86 · 2026-02-11T10:15:51.000+01:00
diff --git a/Sprint-3/slideshow/index.html b/Sprint-3/slideshow/index.html
@@ -1,14 +1,37 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Image carousel</title>
-    <script defer src="slideshow.js"></script>
+    <head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Cat Slideshow</title>
+  <link rel="stylesheet" href="style.css"> 
+  <script defer src="slideshow.js"></script>
+</head>
   </head>
   <body>
     <img id="carousel-img" src="./assets/cute-cat-a.png" alt="cat-pic" />
-    <button type="button" id="backward-btn">Backwards</button>
-    <button type="button" id="forward-btn">Forward</button>
+    
+    <div>
+      <!-- Manual control buttons -->
+      <button type="button" id="backward-btn">Backwards</button>
+      <button type="button" id="forward-btn">Forward</button>
+    </div>
+    
+    <div>
+      <!-- Auto-play control buttons -->
+      <button type="button" id="auto-forward-btn">Auto Forward</button>
+      <button type="button" id="auto-back-btn">Auto Back</button>
+      <button type="button" id="stop-btn">Stop</button>
+    </div>
+    
+    <p style="margin-top: 20px; color: #666;">
+      <small>
+        Click "Auto Forward" to automatically move forward every 3 seconds.<br>
+        Click "Auto Back" to automatically move backward every 3 seconds.<br>
+        Click "Stop" to stop the automatic slideshow.<br>
+        You can still use "Forward" and "Backwards" buttons anytime.
+      </small>
+    </p>
   </body>
-</html>
+</html>
