feat html: update structure for quote generator app

Tarawally · Tarawally · commit 26a472c5372e · 2025-12-13T03:24:07.000Z
diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html
@@ -3,13 +3,38 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Title here</title>
+    <title>Quote generator app</title>
+    <!-- Preconnect for fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;800&display=swap"
+      rel="stylesheet"
+    />
+
+    <link rel="stylesheet" href="style.css" />
     <script defer src="quotes.js"></script>
+    <script defer src="app.js"></script>
   </head>
   <body>
-    <h1>hello there</h1>
-    <p id="quote"></p>
-    <p id="author"></p>
-    <button type="button" id="new-quote">New quote</button>
+    <div class="container">
+      <h1>Quote generator app</h1>
+      <p id="quote"></p>
+      <p id="author"></p>
+
+      <div class="controls">
+        <button type="button" id="new-quote">New Quote</button>
+
+        <div class="auto-play-container">
+          <span class="switch-label">Auto-play</span>
+          <label class="switch">
+            <input type="checkbox" id="auto-play-switch" />
+            <span class="slider"></span>
+          </label>
+        </div>
+
+        <div id="auto-play-status" class="status-indicator">auto-play: ON</div>
+      </div>
+    </div>
   </body>
 </html>
