From ec714228cbc95c0d8352a25d09b9edc97f83bde1 Mon Sep 17 00:00:00 2001
From: ThiML10 <157675695+ThiML10@users.noreply.github.com>
Date: Thu, 2 May 2024 03:22:36 +0000
Subject: [PATCH] cm

---
 html/index.html | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/html/index.html b/html/index.html
index 432918c..55d37d4 100644
--- a/html/index.html
+++ b/html/index.html
@@ -39,6 +39,14 @@ <h2>Timer: <span id="timer">30</span> seconds</h2>
     <div id="lobbyContainer">
         <div id="userInputSection">
             <button id="helpButton">HELP</button>
+            
+
+            <div id="helpModal" style="display:none; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); background: white; padding: 20px; z-index: 100; border: 1px solid black;">
+                <h2>Help Instructions</h2>
+                <p>Find and circle all the hidden words within the grid. Words may be placed horizontally, vertically, diagonally, forward, or backward.</p>
+                <button onclick="toggleHelp()">Close</button>
+            </div>
+            
             <button id="standbyButton">PUT ON STANDBY</button>
         
             <!--
@@ -539,5 +547,19 @@ <h2>Leaderboard</h2>
     socket.send(JSON.stringify(data));
     
 }
+
+function toggleHelp() {
+    var helpModal = document.getElementById('helpModal');
+    if (helpModal.style.display === "none") {
+        helpModal.style.display = "block";
+    } else {
+        helpModal.style.display = "none";
+    }
+}
+
+document.getElementById('helpButton').addEventListener('click', function() {
+    toggleHelp();
+});
+
 </script>