From a1dbb124fa7e0a95bc93358165f03248c1de848c Mon Sep 17 00:00:00 2001
From: Harsh Burman <jangalmangal.gov>
Date: Mon, 3 Jun 2024 20:52:24 +0530
Subject: [PATCH] Added How to play? section

---
 index.html | 353 +++++++++++++++++++++++++----------------------------
 1 file changed, 166 insertions(+), 187 deletions(-)
diff --git a/index.html b/index.html
index 0b86c79..2b440ac 100644
--- a/index.html
+++ b/index.html
@@ -1,207 +1,186 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
+  <head>
     <meta charset="utf-8" />
-    <meta name="author" content="Heartland Games">
+    <meta name="author" content="Heartland Games" />
     <meta name="msapplication-tap-highlight" content="no" />
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <meta name="viewport" content="minimal-ui" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="mobile-web-app-capable" content="yes" />
     <meta name="viewport" content="width=device-width, user-scalable=no" />
 
-    <meta name="format-detection" content="telephone=no">
-    <meta name="msapplication-tap-highlight" content="no">
-    <meta name="viewport"
-        content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
-    <script src="https://kit.fontawesome.com/a2c23c1a99.js" crossorigin="anonymous"></script>
+    <meta name="format-detection" content="telephone=no" />
+    <meta name="msapplication-tap-highlight" content="no" />
+    <meta
+      name="viewport"
+      content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"
+    />
+    <script
+      src="https://kit.fontawesome.com/a2c23c1a99.js"
+      crossorigin="anonymous"
+    ></script>
     <style>
-        body {
-            background-color: #1e1e1e;
-            margin: 0;
-            padding: 0;
-            font-family: Arial, sans-serif;
-            perspective: 1000px;
-        }
-
-        .background-layer {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100vh;
-            background: radial-gradient(circle, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.1));
-            animation: rotate 30s infinite linear;
-            transform: translateZ(-100px);
-            /* Move background layer back */
-        }
-
-        .background-layer:nth-child(2) {
-            background: radial-gradient(circle, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.2));
-            animation-duration: 60s;
-            transform: translateZ(-200px);
-            /* Move second background layer further back */
-        }
-
-        @keyframes rotate {
-            from {
-                transform: rotate(0deg);
-            }
-
-            to {
-                transform: rotate(360deg);
-            }
-        }
-
-        footer {
-            text-align: center;
-            color: #fff;
-        }
-
-        .con {
-            font-size: 2rem;
-            color: #fff;
-        }
-
-        .social {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 2.5rem;
-
-        }
-
-       
-        #dialogBox {
-            display: none;
-            position: fixed;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            padding: 20px;
-            background: linear-gradient(135deg, #ADD8E6, #90EE90);
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-            z-index: 1000;
-            border-radius: 8px;
-        }
-
-        #dialogBox h2 {
-            margin: 0;
-            margin-bottom: 10px;
-        }
-
-        #dialogBox button {
-            margin-top: 10px;
-            border: none;
-            background-color: transparent;
-            color: black;
-
-        }
-
-        #dialogBox button:hover {
-            color: darkgreen;
-
-        }
-
-        #dialogBox button:active {
-            color: darkgreen;
-          
-        }
-
-        #overlay {
-            display: none;
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-color: rgba(0, 0, 0, 0.5);
-            z-index: 999;
-        }
-
-
-        .modal {
-            display: none;
-            position: fixed;
-            z-index: 1;
-            left: 0;
-            top: 0;
-            width: 100%;
-            height: 100%;
-            overflow: auto;
-            background-color: rgb(0, 0, 0);
-            background-color: rgba(0, 0, 0, 0.4);
-            padding-top: 60px;
-        }
-
-        .modal-content {
-            background-image: linear-gradient(to bottom right, rgb(255, 255, 208), rgb(255, 192, 203));
-            margin: 5% auto;
-            padding: 20px;
-            margin-top: 200px;
-            border: 1px solid #000000;
-            width: 30%;
-        }
-
-
-        .close {
-            color: #000000;
-            font-size: 14px;
-            font-weight: bold;
-        }
-
-        .close:hover,
-        .close:focus {
-            color: rgb(13, 146, 1);
-            text-decoration: none;
-            cursor: pointer;
-        }
+      body {
+        background-color: #1e1e1e; /* Dark gray background */
+        margin: 0;
+        padding: 0;
+        font-family: Arial, sans-serif;
+        perspective: 1000px; /* Add perspective for 3D effect */
+      }
+
+      .background-layer {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100vh;
+        background: radial-gradient(
+          circle,
+          rgba(255, 255, 255, 0.05),
+          rgba(0, 0, 0, 0.1)
+        );
+        animation: rotate 30s infinite linear;
+        transform: translateZ(-100px); /* Move background layer back */
+      }
+      .background-layer:nth-child(2) {
+        background: radial-gradient(
+          circle,
+          rgba(255, 255, 255, 0.1),
+          rgba(0, 0, 0, 0.2)
+        );
+        animation-duration: 60s;
+        transform: translateZ(
+          -200px
+        ); /* Move second background layer further back */
+      }
+      @keyframes rotate {
+        from {
+          transform: rotate(0deg);
+        }
+        to {
+          transform: rotate(360deg);
+        }
+      }
+
+      footer {
+        text-align: center;
+        color: #fff;
+      }
+      .con {
+        font-size: 2rem;
+        color: #fff;
+      }
+      .social {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 2.5rem;
+      }
+      .help {
+        top: 0px;
+        width: 430px;
+        height: 482px;
+        float: left;
+        overflow: hidden;
+        position: absolute;
+        color: white;
+        background: transparent;
+        padding: 9px;
+        text-align: justify;
+        font-size: 13px;
+        box-shadow: 2px 2px 20px grey;
+      }
+      .help h3 {
+        color: darkorange;
+        text-align: center;
+      }
     </style>
 
     <title>Squared Lines</title>
-    <link rel="icon" type="image/x-icon" href="./favicon.ico">
-</head>
+    <link rel="icon" type="image/x-icon" href="./favicon.ico" />
+  </head>
 
-<body>
-    <div class="background-layer"></div>
+  <body>
     <div class="background-layer"></div>
     <div id="container">
-        <canvas id="game"></canvas>
-        <footer>
-            <h2>Made with ❤️ by Chrome Gaming</h2>
-            <p>Connect with Me</p>
-            <div class="social">
-                <a class="con" href="https://www.linkedin.com/company/chromegaming/"><i
-                        class="fa-brands fa-linkedin"></i></a>
-                <a class="con" href="https://github.com/GameSphere-MultiPlayer"><i class="fa-brands fa-github"></i></a>
-                <a class="con" href="https://discord.gg/rZb46cCMmK"><i class="fa-brands fa-discord"></i></a>
-                <a class="con" href="mailto:gamespheremultiplayer@gmail.com"><i
-                        class="fa-light fa-square-envelope"></i></a>
-            </div>
-            <p class="opyright">© Copyright Squard Line @Durgesh4993</p>
-        </footer>
-    </div>
-
-    <div id="overlay"></div>
-
-    <div id="dialogBox">
-        <h2>Welcome to the Squared Game</h2>
-        <button onclick="closeDialog()">LET'S PLAY!</button>
-    </div>
-
-    <div id="myModal" class="modal">
-        <div class="modal-content">
-            <p id="modalMessage"></p>
-            <div class="close">RESTART</div>
-
+      <div class="help">
+        <h3>How to play?</h3>
+        <div class="content">
+          <b style="color: lightblue">Gameplay:</b>
+          <br /><span style="color: green">>></span> After starting the game,
+          you'll see the game <br /><span style="color: greenyellow">>></span>
+          Your goal is to cut the board into procedurally declared blocks.
+          <br /><span style="color: green">>></span> To cut a block, tap on the
+          board to select the squares you want to include in the block.
+          <br /><span style="color: greenyellow">>></span> Once you've selected
+          a block, it will be highlighted.
+        </div>
+        <div class="content">
+          <br />
+          <b style="color: lightblue">Scoring:</b>
+          <br /><span style="color: green">>></span> Your score is calculated
+          based on the number of blocks you successfully cut. <br /><span
+            style="color: greenyellow"
+            >>></span
+          >
+          The game will alert you when you complete a level or reach certain
+          milestones in your score.
         </div>
+        <div class="content">
+          <br />
+          <b style="color: lightblue">Winning:</b>
+          <br /><span style="color: green">>></span> If you reach level 128, you
+          win the game. <br /><span style="color: greenyellow">>></span>
+          Alternatively, you can win by completing all levels with a high score.
+        </div>
+        <div class="content">
+          <br />
+          <b style="color: lightblue">Level Up:</b>
+          <br /><span style="color: green">>></span> As you progress through
+          levels, the difficulty may increase. <br /><span
+            style="color: greenyellow"
+            >>></span
+          >
+          To advance to the next level, successfully complete the current level
+          by cutting all the required blocks. <br /><span style="color: green"
+            >>></span
+          >
+          Each level introduces new challenges and requires strategic thinking
+          to complete efficiently.
+        </div>
+        <div class="content">
+          <br />
+          <b style="color: lightblue">Game Over:</b>
+          <br /><span style="color: green">>></span> If you make a mistake or
+          fail to complete a level within the time limit, the game ends.
+          <br /><span style="color: greenyellow">>></span> You'll have the
+          option to start a new game from the beginning.
+        </div>
+      </div>
+      <canvas id="game"></canvas>
+      <footer>
+        <h2>Made by ❤️ by Chrome Gaming</h2>
+        <p>Connect with Me</p>
+        <div class="social">
+          <a class="con" href="https://www.linkedin.com/company/chromegaming/"
+            ><i class="fa-brands fa-linkedin"></i
+          ></a>
+          <a class="con" href="https://github.com/GameSphere-MultiPlayer"
+            ><i class="fa-brands fa-github"></i
+          ></a>
+          <a class="con" href="https://discord.gg/rZb46cCMmK"
+            ><i class="fa-brands fa-discord"></i
+          ></a>
+          <a class="con" href="mailto:gamespheremultiplayer@gmail.com"
+            ><i class="fa-light fa-square-envelope"></i
+          ></a>
+        </div>
+        <p class="opyright">© Copyright Squard Line @Durgesh4993</p>
+        <p></p>
+      </footer>
     </div>
 
     <script src="game.js"></script>
-    <script>
-
-    </script>
-</body>
-
-</html>
\ No newline at end of file
+  </body>
+</html>
