From 085bd86a5b515366be5ed06fc1550b00cecc1214 Mon Sep 17 00:00:00 2001
From: Sai pradyumna Goud Chiragoni
 <143107589+Saipradyumnagoud@users.noreply.github.com>
Date: Fri, 19 Jul 2024 05:44:21 +0000
Subject: [PATCH] added How to play button

---
 howtoplay.html | 487 +++++++++++++++++++++++++++++++++++++++++++++++++
 index.html     |   1 +
 2 files changed, 488 insertions(+)
 create mode 100644 howtoplay.html
diff --git a/howtoplay.html b/howtoplay.html
new file mode 100644
index 0000000..d1a1f44
--- /dev/null
+++ b/howtoplay.html
@@ -0,0 +1,487 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="icon" href="./atom.png" type="image/png" />
+  <title>How To Play</title>
+  <style>
+    body {
+      background-color: #121212;
+      font-family: Arial, Helvetica, sans-serif;
+      color: #f0f3ff;
+      margin: 0;
+      padding: 50px;
+      text-align: justify;
+      text-justify: inter-word;
+      background-image: url('https://i.pinimg.com/originals/e6/c9/e3/e6c9e3d891aa56637847ba09c28fa00c.jpg');
+      background-repeat: no-repeat;
+      background-size: 100%;
+      background-attachment: fixed;
+
+    }
+    /* Custom Scrollbar Styles */
+::-webkit-scrollbar {
+  width: 10px;
+
+}
+
+::-webkit-scrollbar-track {
+  background: #000;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #d61c1c;
+  border: 1px solid black;
+  border-radius: 10px;
+  transition: background-color 0.3s ease;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    outline: none;
+    border-color: red;
+    border-radius: 10px;
+    box-shadow: 0 0 10px darkred;
+}
+
+
+    #homecontent {
+      display: flex;
+      margin-left: auto;
+      margin-right: auto;
+
+
+      color: #fff;
+      width: 90%;
+      height: 100%;
+      text-align: left;
+      font-size: 2.5em;
+    }
+
+    #homecontent h1 {
+      margin-left: 26%;
+      color: #ff5c5c;
+    }
+
+    #homecontent span,
+    #homecontent div {
+      font-style: normal;
+    }
+
+    .buttons {
+      display: flex;
+      flex-direction: column;
+      align-items: left;
+      justify-content: center;
+    }
+
+    .buttons .btn {
+      position: relative;
+      width: 140px;
+      height: 20px;
+      cursor: pointer;
+      padding: 17px;
+      padding-left: 26px;
+      padding-right: 26spx;
+      align-items: center;
+      background: none;
+      border: none;
+      color: #fff;
+      font-weight: 500;
+      font-size: 18px;
+      margin-bottom: 10px;
+      z-index: 1;
+    }
+
+    .buttons a {
+      text-decoration: none;
+    }
+
+    .buttons .btn::before,
+    .buttons .btn::after {
+      position: absolute;
+      content: "";
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      backdrop-filter: blur(15px);
+      background: rgba(253, 251, 251, 0.049);
+      border-radius: 10px;
+      box-shadow: 20px 20px 50px rgba(74, 65, 57, 0.5);
+      z-index: -2;
+    }
+
+    .buttons .btn::after {
+      width: 99%;
+      height: 75%;
+      top: 25%;
+      left: 0.5%;
+      z-index: -3;
+      transform: scaleX(0.5);
+      transition: all 0.3s;
+      background: linear-gradient(135deg, #f47f0a, #ff045c);
+    }
+
+    .buttons .btn:hover:after {
+      transform: scaleX(1.01) translateY(-15px);
+    }
+
+    h1,
+    h3 {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+      margin: 10px 0;
+    }
+
+    h1 {
+      font-size: 50px;
+      color: #ff6347;
+    }
+
+    h3 {
+      font-size: 30px;
+      color: gold;
+    }
+
+    p {
+      font-size: 20px;
+      line-height: 1.6;
+      margin: 20px auto;
+    }
+
+    ul {
+      list-style-type: none;
+
+      padding: 20px;
+      margin: 20px auto;
+    }
+
+    ul.explore,
+    ul.features,
+    ul.why {
+      list-style-type: none;
+      padding: 20px;
+      border: 1px solid #f0f3ff;
+      border-radius: 25px;
+      margin: 20px auto;
+      background-color: #151515;
+    }
+
+    li {
+      margin: 10px 0;
+      font-size: 20px;
+    }
+
+    .explore li,
+    .features li,
+    .why li {
+      padding-bottom: 10px;
+    }
+
+    .content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .highlight {
+      color: #f43636;
+      font-weight: 900;
+      text-decoration: underline;
+    }
+
+    .welcome {
+      line-height: 45px;
+    }
+
+    .welcome .highlight {
+      display: contents;
+    }
+
+    .popup {
+      background-color: #282828;
+      border: 2px solid #f43636;
+      padding: 10px;
+      margin: 20px;
+      border-radius: 10px;
+    }
+
+    .step {
+      display: flex;
+      align-items: center;
+      margin: 20px 0;
+      font-size: 20px;
+      flex-direction: column-reverse;
+      flex-wrap: nowrap;
+    }
+
+    .step img {
+      width: 50%;
+      margin-right: 50px;
+      margin-top: 30px;
+      border-radius: 10px;
+    }
+
+    .step1 {
+      display: flex;
+      align-items: center;
+      margin: 20px 0;
+      font-size: 20px;
+      flex-direction: column-reverse;
+      flex-wrap: nowrap;
+    }
+
+    .step1 img {
+      max-width: 250px;
+      margin-top: 30px;
+      margin-right: 50px;
+      border-radius: 10px;
+    }
+
+    .typewriter {
+      overflow: hidden;
+      border-right: 0.15em solid #f0f3ff;
+      white-space: nowrap;
+      margin: 0 auto;
+      letter-spacing: 0.15em;
+      animation: typing 3.5s steps(30, end),
+        blink-caret 0.5s step-end infinite;
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    }
+
+    @keyframes typing {
+      from {
+        width: 0;
+      }
+
+      to {
+        width: 100%;
+      }
+    }
+
+    @keyframes blink-caret {
+
+      from,
+      to {
+        border-color: transparent;
+        border-width: 1px;
+      }
+
+      50% {
+        border-color: #f0f3ff;
+      }
+    }
+
+    .bounce {
+      animation: bounce 0.4s ease infinite alternate;
+      -webkit-animation: bounce 0.4s ease infinite alternate;
+    }
+
+    @keyframes bounce {
+      0% {
+        text-shadow: 0 5px 0 #ccc, 0 2px 3px rgba(0, 0, 0, 1);
+      }
+
+      100% {
+        transform: translateY(-20px);
+        text-shadow: 0 50px 0 #000, 0 0 20px rgba(0, 0, 0, 0.8);
+      }
+    }
+
+    @-webkit-keyframes bounce {
+      0% {
+        text-shadow: 0 5px 0 #ccc, 0 2px 3px rgba(0, 0, 0, 1);
+      }
+
+      100% {
+        -webkit-transform: translateY(-20px);
+        text-shadow: 0 50px 0 #000, 0 0 20px rgba(0, 0, 0, 0.8);
+      }
+    }
+
+    @media screen and (max-width: 600px) {
+      #homecontent h1 {
+        margin-left: 10px;
+        margin-top: 1px;
+        font-size: 25px;
+      }
+
+      .step,
+      .step1 {
+        flex-direction: column;
+        align-items: center;
+      }
+
+      .step img,
+      .step1 img {
+        width: 80%;
+        margin: 10px 0;
+      }
+
+      h1 {
+        font-size: 36px;
+      }
+
+      h3 {
+        font-size: 24px;
+      }
+
+      p,
+      li {
+        font-size: 18px;
+      }
+
+      ul {
+        padding: 10px;
+        margin: 10px auto;
+      }
+
+      .typewriter {
+        font-size: 20px;
+        width: 100%;
+        margin: 0;
+        text-align: center;
+      }
+
+      .buttons .btn {
+        width: 120px;
+        /* Adjust the width */
+        height: 15px;
+        /* Adjust the height */
+        padding: 14px;
+        /* Adjust the padding */
+        font-size: 16px;
+        /* Adjust the font size */
+        margin-bottom: 8px;
+        /* Adjust the margin bottom */
+      }
+    }
+
+    .fullCont {
+      background-color: rgba(0, 0, 0, 0.8);
+      padding: 20px;
+      box-shadow: 0 0 20px rgba(255, 0, 0, 0.8);
+      animation: fadeIn 2s ease-in-out;
+      border-radius: 20px;
+    }
+    @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(-20px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  </style>
+</head>
+
+<body>
+  <div class="fullCont">
+    <div id="homecontent">
+      <div class="buttons">
+        <a href="index.html"><span id="playbutton" class="btn">HOME</span></a><br />
+      </div>
+      <h1>HOW TO PLAY</h1>
+    </div>
+
+    <h3>
+      <div class="typewriter">
+        Welcome to&nbsp;<span class="highlight">Physi-c-Tech</span>: The
+        Ultimate Elemental Adventure!
+      </div>
+    </h3>
+
+
+
+      <h3>
+        <div class="bounce">How to Play?</div>
+      </h3>
+
+      <ul>
+        <div class="step1">
+          <img src="1.png" alt="Start Your Adventure" />
+          <div>
+            <span class="highlight">Start Your Adventure:</span> Begin by
+            selecting "Play or Continue" to start or resume your game. If you're
+            new, choose "New Game" to begin your journey from scratch.
+          </div>
+        </div>
+        <br />
+        <div class="step">
+          <img src="2.png" alt="Combine Elements" />
+          <div>
+            <span class="highlight">Combine Elements:</span> You will start with
+            a set of basic elements. Drag and drop one element onto another to
+            attempt a combination. If a valid combination is made, a new element
+            is created.
+          </div>
+        </div>
+        <br />
+        <div class="step">
+          <img src="4.png" alt="Track Your Progress" />
+          <div>
+            <span class="highlight">Track Your Progress:</span> Your element box
+            keeps track of all discovered elements. Review your collection and
+            read up on the facts about each element you've created.
+          </div>
+        </div>
+        <br />
+        <div class="step">
+          <img src="3.png" alt="Discover and Learn" />
+          <div>
+            <span class="highlight">Discover and Learn:</span> When you create a
+            new element, a pop-up box will appear with details and interesting
+            facts about it. The new element is added to your element box,
+            expanding your collection.
+          </div>
+        </div>
+        <br />
+        <div class="step">
+          <img src="5.png" alt="Advance Through Levels" />
+          <div>
+            <span class="highlight">Advance Through Levels:</span> Each level
+            challenges you to discover 100 new elements. As you progress,
+            combinations become more complex, requiring creative thinking and
+            experimentation.
+          </div>
+        </div>
+        <br />
+
+        <li>
+          <span class="highlight">Stay Engaged:</span> Use the "Sound On/Off"
+          button to enhance your gaming experience with immersive sound effects.
+          Visit the "About" section for more information on game mechanics and
+          tips.
+        </li>
+      </ul>
+      <br /><br /><br />
+
+
+      <p>
+        Prepare yourself for an adventure where your creativity and intellect
+        are your greatest tools. Whether you're a student eager to learn, a
+        teacher looking for a fun educational tool, or simply someone who loves
+        science and technology,
+        <span class="highlight">Physi-c-Tech</span> promises an unforgettable
+        experience.
+      </p>
+
+      <p>
+        <span class="highlight">Start your journey now and see how many elements you can
+          discover!</span>
+      </p>
+    </div>
+  </div>
+  <footer style="text-align: center;">
+    &copy; 2024 Physi-c-Tech. All rights reserved.
+  </footer>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/index.html b/index.html
index 219cdf2..46a5346 100644
--- a/index.html
+++ b/index.html
@@ -50,6 +50,7 @@ <h1 class="focusin">Physi-c<br />Tech</h1>
           <span id="playbutton" class="btn" onclick="play()">PLAY</span><br />
           <span id="newgamebutton" class="btn" onclick="newgame()">NEW GAME</span><br />
           <span id="soundbutton" class="btn" onclick="toggleSound()">SOUND ON</span><br />
+          <a href="howtoplay.html" class="btn" style="text-decoration: none;">HOW TO PLAY</a><br />
           <span class="btn" onclick="window.location.href='about.html'">ABOUT</span><br />
         </div>
       </div>
