Update index.html

TheDerbiedOne · web-flow · commit ec0d7c798b0e · 2026-01-20T21:22:25.000-08:00
diff --git a/index.html b/index.html
@@ -2,20 +2,24 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Bronzed Derby Lounge</title>
-  <link rel="stylesheet" href="style.css">
+
+  <!-- ✅ CSS loads here -->
+  <link rel="stylesheet" href="style.css" />
 </head>
 
 <body>
   <main class="lounge">
-    <h1>The Bronzed Derby Lounge</h1>
-    <p class="subtitle">
-      A listening room inside Singaw Sity.<br />
-      Every order becomes a scene.
-    </p>
+    <header class="header">
+      <h1>The Bronzed Derby Lounge</h1>
+      <p class="subtitle">
+        A listening room inside Singaw Sity.<br />
+        Every order becomes a scene.
+      </p>
+    </header>
 
-    <section class="controls">
+    <section class="panel controls">
       <h2>Choose a Booth</h2>
       <div class="buttons" id="booths">
         <button type="button" data-booth="3">Booth 3 — Rust Talk</button>
@@ -34,28 +38,28 @@ <h2>Choose a Vibe</h2>
       </div>
     </section>
 
-    <section class="order">
+    <section class="panel order">
       <h2>Place an Order</h2>
-      <p>One sentence. No explanations.</p>
 
+      <p class="hint">One sentence. No explanations.</p>
       <textarea id="detail" placeholder="One detail to include..."></textarea>
 
       <div class="order-row">
-        <button id="placeOrder" type="button" class="order-btn">Place Order</button>
-        <button id="copyBtn" type="button" class="order-btn" style="display:none;">Copy Ticket</button>
+        <button id="placeOrder" class="order-btn" type="button">Place Order</button>
+        <button id="copyBtn" class="order-btn secondary" type="button" style="display:none;">Copy Ticket</button>
       </div>
 
+      <p class="confirmation" id="confirmText" aria-live="polite"></p>
+
       <pre id="ticket" class="ticket" aria-live="polite"></pre>
-      <p id="status" class="confirmation" style="display:none;">The bartender is working.</p>
     </section>
 
-    <footer>
+    <footer class="footer">
       <p>Be kind. No personal data. Stay in-world.</p>
     </footer>
   </main>
 
-  <!-- IMPORTANT: script goes at the end so the elements exist before JS runs -->
+  <!-- ✅ JS loads here (bottom of body) -->
   <script src="script.js"></script>
 </body>
 </html>
-
