From 0ccce3b33664a0dfeb7f9ca3fbc7edd5fa42e416 Mon Sep 17 00:00:00 2001
From: enr27 <enr27@drexel.edu>
Date: Sun, 8 Dec 2024 03:55:44 +0000
Subject: [PATCH] Replace index.html

---
 public/index.html | 29 ++++++++++++++++++++++++++---
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/public/index.html b/public/index.html
index 37b52e7..f3b8fef 100644
--- a/public/index.html
+++ b/public/index.html
@@ -9,9 +9,9 @@
 <body>
     <main class="main">
         <header class="header">
-            <a href="#" class="logo">Welcome to the Trivia Game</a>
+            <a href="#" class="logo">Trivia Website</a>
             <nav class="navbar">
-                <a href="#">Home</a>
+                <a href="#" class="active">Home</a>
                 <a href="#">About</a>
                 <a href="#">Leaderboards</a>
             </nav>
@@ -46,7 +46,7 @@
         </section>
 
         <section id="gameArea" style="display:none;">
-            <div id="timer">Time left: 60 seconds</div>
+            <div id="timer">Time: 30 seconds</div>
             <h2 id="question">Question will appear here</h2>
             <div id="options">Options will appear here</div>
             <p id="score">Score: 0</p>
@@ -58,6 +58,29 @@
             <button id="resetGame">Play Again</button>
         </section>
     </main>
+
+    <div id="playModal" class="modal" style="display:none;">
+        <div class="modal-content">
+            <h2>Join or Create a Room</h2>
+            <label for="modalRoomCode">Enter Room Code or leave blank to create a new room:</label>
+            <input type="text" id="modalRoomCode" placeholder="Room Code" autocomplete="off">
+            <label for="modalPlayerName">Enter Your Name:</label>
+            <input type="text" id="modalPlayerName" placeholder="Name" autocomplete="off">
+            <div style="margin-top: 20px;">
+                <button id="modalExitButton" class="exit-button">Exit</button> 
+                <button id="modalPlayButton">Continue</button>
+            </div>
+        </div>
+    </div>
+
+    <div id="roomCreatedModal" class="modal" style="display: none;">
+        <div class="modal-content">
+            <h2>Room Created!</h2>
+            <p id="roomCodeDisplay">Your room code is: <strong></strong></p>
+            <button id="roomCreatedContinueButton">Continue</button>
+        </div>
+    </div>    
+    
     <script src="/socket.io/socket.io.js"></script>
     <script src="script.js"></script>
 </body>
-- 
GitLab