diff --git a/public/index.html b/public/index.html
index 37b52e782b933b1af42f807f237e598bc9babda3..f3b8fef3573b60675940a13adda27cf6798528b6 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>