Replace index.html

public/index.html

@@ -21,6 +21,26 @@
             <div class="home-content">
                 <h1>Trivia Game</h1>
                 <p>Select your options and click Play</p>
+                
+                <div id="gameSettings">
+                    <label for="numQuestions">Number of Questions:</label>
+                    <input type="number" id="numQuestions" min="1" max="50" value="10">
+
+                    <label for="category">Category:</label>
+                    <select id="category">
+                        <option value="9">General Knowledge</option>
+                        <option value="17">Science & Nature</option>
+                        <option value="23">History</option>
+                    </select>
+
+                    <label for="difficulty">Difficulty:</label>
+                    <select id="difficulty">
+                        <option value="easy">Easy</option>
+                        <option value="medium">Medium</option>
+                        <option value="hard">Hard</option>
+                    </select>
+                </div>
+                
                 <button class="start-button" id="startGame">Play</button>
             </div>
         </section>
@@ -29,7 +49,12 @@
             <h2 id="question">Question will appear here</h2>
             <div id="options">Options will appear here</div>
             <p id="score">Score: 0</p>
-            <button id="nextQuestion" style="display:none;">Next Question</button>
+        </section>
+
+        <section id="endGameArea" style="display:none;">
+            <h2>Game Over!</h2>
+            <p id="winner">The winner is...</p>
+            <button id="resetGame">Play Again</button>
         </section>
     </main>
     <script src="/socket.io/socket.io.js"></script>