From 60c5a4597f0993c3dc7a64a6a93bb7dd765de37d Mon Sep 17 00:00:00 2001
From: Sanu Kumar <145834771+sk66641@users.noreply.github.com>
Date: Thu, 1 Aug 2024 07:40:43 +0530
Subject: [PATCH] Revert "Removing unnecessary code from index.html"

---
 index.html | 174 ++++++++++++++++++++++++++++++++++++++++-------------
 1 file changed, 131 insertions(+), 43 deletions(-)
diff --git a/index.html b/index.html
index 0841902..07fa24b 100644
--- a/index.html
+++ b/index.html
@@ -43,7 +43,7 @@
         0 0 60px #f523f5,
         0 0 100px #23bdf5;
         animation: colors 1s infinite;
-       transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
     }
 
     .circle-container {
@@ -71,7 +71,11 @@
   }
 
 }
-</style>
+
+
+  </style>
+
+
 </head>
 
 <body>
@@ -145,8 +149,6 @@
       animateCircles();
     });
   </script>
-
-
   <div class="loader">
     <div>
       <lottie-player src="https://lottie.host/451aadfb-9af8-4298-98be-e9c583f8a72c/jPRsrfR2jf.json"
@@ -154,8 +156,6 @@
       </lottie-player>
     </div>
   </div>
-
-
   <div class="indexpage">
     <button id="backToTopBtn" title="Back to Top" aria-label="Back to Top" onclick="backToTop()"><i class="fas fa-arrow-up"></i></button>
   </div>
@@ -164,7 +164,6 @@
     <div id="particles-js"></div>
   </div>
 
-  <!-- navbar -->
   <div class="navHeader">
     <div class="header-content">
       <nav>
@@ -199,6 +198,31 @@
               </select>
             </li>
           </div>
+          <!-- Add this inside your existing HTML structure, preferably at the end of <body> -->
+          <!-- <div id="editPopup" class="edit-popup">
+          <div class="edit-popup-content">
+              <h2>Edit Options</h2>
+              <ul>
+                  <li><a href="#" id="addTimeOption">Add Time</a></li>
+                  <li><a href="#"</a>
+                    <select id="musicDropdown" style="display: none;">
+                      <option value="select" disabled selected>Change Music</option>
+                      <option value="none">None</option>
+                      <option value="disco">Disco</option>
+                      <option value="fairies">Fairies</option>
+                      <option value="funky">Funky</option>
+                      <option value="upbeatdisco">Upbeatdisco</option>
+                      <option value="vintage">Vintage</option>
+                      <option value="whistle">Whistle</option>
+                      <option value="snare">Snare</option>
+                    </select>
+                  </a>
+                  </li>
+                  Add more options as needed
+              </ul>
+              <button id="closeEditPopup">Close</button>
+          </div>
+      </div> -->
           <li><a href="pages/about.html">About</a></li>
           <li><a href="pages/features.html">Features</a></li>
           <li><a href="./Login/index1.html">Step In</a></li>
@@ -216,13 +240,26 @@
     </div>
   </div>
 
-
-<!-- Main body that will display after loader -->
   <div class="unload">
     <div class="container">
+
+      <!-- <div class="background">
+        <div class="shape"></div>
+        <div class="shape"></div>
+      </div> -->
+
+
       <div class="box" id="box">
+
+
         <h1 id="changingHeading">Random Disco <span id="changing">Light Simulator</span></h1>
 
+        <!-- Random Disco
+          <span id="changing"
+            style="font-family: Arial, sans-serif; font-size: 30px; font-weight: bold; color: #ff7f50;">
+            Light Simulator
+          </span>
+        </h1> -->
         <div class="form">
           <div class="form-group">
             <label for="color">1. Number of Colors: <span style="color:red">*</span></label>
@@ -292,6 +329,8 @@ <h1 id="changingHeading">Random Disco <span id="changing">Light Simulator</span>
             <input type="url" id="youtubeUrlInput" placeholder="Paste YouTube URL">
            
           </div>
+
+
         </div>
 
         <div id="error" aria-live="polite"></div>
@@ -332,8 +371,6 @@ <h1 id="changingHeading">Random Disco <span id="changing">Light Simulator</span>
 
       </div>
     </div>
-
-    <!-- Socials (right side of the page) -->
     <footer class="footer" style="width: 100%;height: 2px; ">
       <div class="socialIcons" style="z-index: 9999;">
         <span class="icons">
@@ -367,11 +404,8 @@ <h1 id="changingHeading">Random Disco <span id="changing">Light Simulator</span>
 
 
     </footer>
-    
-    <!-- Counter in simulation -->
+
     <div id="timerDisplay" aria-label="Timer Display" style="display: none"></div>
-    
-    <!-- audio files  -->
     <audio id="disco" src="assets/audios/disco.mp3"></audio>
     <audio id="fairies" src="assets/audios/fairies.mp3"></audio>
     <audio id="funky" src="assets/audios/funkydisco.mp3"></audio>
@@ -381,8 +415,11 @@ <h1 id="changingHeading">Random Disco <span id="changing">Light Simulator</span>
     <audio id="vintage" src="assets/audios/vintage.mp3"></audio>
     <audio id="whistle" src="assets/audios/whistle.mp3"></audio>
 
-   <!-- Theme toggle -->
-   <span class="slider" style="width: 40px; height: 20px; display: none;"></span> 
+
+    <!-- <div id="message" aria-live="polite">The timer has ended. The page will reload.</div> -->
+
+    
+    <span class="slider" style="width: 40px; height: 20px; display: none;"></span> 
 
     <div id="sun-moon-mode-toggler" class="toggle-container" >
       <input type="checkbox" id="themeToggle" class="switch-checkbox" onclick="toggleTheme()">
@@ -395,9 +432,6 @@ <h1 id="changingHeading">Random Disco <span id="changing">Light Simulator</span>
     </div>
 
 
-    <!-- Modal section -->
-
-
     <!-- Modal background -->
     <!-- <div id="modalBackground" style="color: #fff;">
   <div class="login-box">
@@ -472,6 +506,7 @@ <h1 id="changingHeading">Random Disco <span id="changing">Light Simulator</span>
     </style>
 
 
+
     <div id="warningModal" class="modal">
       <div class="modal-content">
         <span class="close" id="closeModal">&times;</span>
@@ -485,7 +520,6 @@ <h2>Warning: Sensitivity to Flashing Lights</h2>
       </div>
     </div>
   </div>
-
   <div id="infomodal" class="modal">
     <div class="modal-content">
       <span class="close" id="closeModal1">&times;</span>
@@ -505,7 +539,6 @@ <h2>Important!!</h2>
       <button id="proceed1" aria-label="Proceed">Proceed</button>
     </div>
   </div>
-
   <div id="addtimeModel" class="modal">
     <div class="modal-content">
       <span class="close" id="closeAddtimeModal">&times;</span>
@@ -545,7 +578,19 @@ <h2>Load Preset</h2>
       <button id="loadButton" aria-label="Load preset">Load</button>
     </div>
   </div>
-  
+
+  <button class="notification" id="failnotification" style="display:none;">
+    <span class="message" id="failmsg">Failed</span>
+    <span class="closenotif" id="closeFailNotification">✖</span>
+    <div class="timerline" id="timerline"></div>
+  </button>
+
+  <button class="notification" id="successnotification" style="display:none;">
+    <span class="message" id="successmsg">Success</span>
+    <span class="closenotif" id="closeSuccessNotification">✖</span>
+    <div class="timerline" id="timerline"></div>
+  </button>
+
   <div id="replayModel" class="modal">
     <div class="modal-content">
       <h2>Wanna replay the disco..?</h2>
@@ -557,6 +602,69 @@ <h2>Wanna replay the disco..?</h2>
     </div>
   </div>
 
+  <script src="//code.tidio.co/fdylvmddtyb7vzsk5frdt3ncrk6cwobs.js" async></script>
+  <!--  <div id="aboutPopup" class="popup">
+    <div class="popup-content">
+      <span class="close" onclick="closeAboutPopup()" aria-label="Close">&times;</span>
+      <h2><strong class="nameAbout">About</strong></h2>
+      <p>
+        <strong>The Random Disco Light Simulator</strong> is a fun and interactive project that
+        brings the excitement of a disco dance floor to your screen whether
+        you're a developer, a party enthusiast, or just curious.
+      </p>
+      <p>
+        <strong>Inputs:</strong>
+        - How many random colors you want to be shown?
+        <br />
+        - With how much time interval (in milliseconds) you want to change the
+        colors randomly?
+        <br />
+        - What type of view you want to choose (conic, linear, or radial)?
+        <br />
+        - Countdown timer (in seconds)
+        <br />
+        - Sound Effect
+      </p>
+      <p>
+        <strong> Output:</strong>
+        On the basis of these inputs, it simulates the selected view.
+      </p>
+      <p>Try these inputs and have fun! 😄</p>
+      <p>1000 1 milliseconds conic 60</p>
+      <p>1000 1 milliseconds radial 60</p>
+      <p>1000 1 milliseconds linear 60</p>
+    </div>
+  </div>
+  <div id="featuresPopup" class="popup">
+    <div class="popup-content">
+      <span class="close" onclick="closeFeaturesPopup()" aria-label="Close">&times;</span>
+      <h2><strong class="nameAbout">Features</strong></h2>
+
+      <p><strong>Conic Mode</strong>
+        Imagine a spotlight sweeping across the room, creating vibrant cones
+        of light. The colors change dynamically as the spotlight moves, adding
+        an electrifying effect.
+      </p>
+      <img src="assets/images/learn/Conic_1.jpg" alt="Conic Mode Example 1" style="width: 180px; height: 180px">
+      <img src="assets/images/learn/Conic_2.jpg" alt="Conic Mode Example 2" style="width: 180px; height: 180px;">
+
+      <p><strong>Radial Mode</strong>
+        Picture a pulsating ring of light expanding and contracting. The
+        radial pattern syncs perfectly with the beat, making you feel the
+        rhythm.
+      </p>
+      <img src="assets/images/learn/Radial_01.jpg" alt="Radial Mode Example 1" style="width:180px; height: 180px;">
+      <img src="assets/images/learn/Radial_02.jpg" alt="Radial Mode Example 2" style="width:180px; height: 180px;">
+
+      <p><strong>Linear Mode</strong>
+        Visualize colorful streaks of light moving in straight lines. These
+        streaks crisscross, intersect, and dance across the floor,
+        transforming your space into a dynamic disco.
+      </p>
+      <img src="assets/images/learn/Linear_01.jpg" alt="Linear Mode Example 1" style="width:180px; height: 180px;">
+      <img src="assets/images/learn/Linear_02.jpg" alt="Linear Mode Example 2" style="width:180px; height: 180px;">
+    </div>
+  </div> -->
   <!-- Account Not Available Modal -->
   <div id="accountNotAvailableModal" class="account-not-available-modal">
     <div class="account-not-available-modal-content">
@@ -569,35 +677,15 @@ <h2>Account Not Available</h2>
       <p>Thank you for your continued support! </p>
     </div>
   </div>
-
-  <!-- Notifications -->
-  <button class="notification" id="failnotification" style="display:none;">
-    <span class="message" id="failmsg">Failed</span>
-    <span class="closenotif" id="closeFailNotification">✖</span>
-    <div class="timerline" id="timerline"></div>
-  </button>
-
-  <button class="notification" id="successnotification" style="display:none;">
-    <span class="message" id="successmsg">Success</span>
-    <span class="closenotif" id="closeSuccessNotification">✖</span>
-    <div class="timerline" id="timerline"></div>
-  </button>
-
-<!-- Chatbot -->
-  <script src="//code.tidio.co/fdylvmddtyb7vzsk5frdt3ncrk6cwobs.js" async></script>
-  
   <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
-  
   <script src="js/background.js"></script>
   <script src="js/social.js"></script>
   <script src="js/script.js"></script>
-  
   <script type="text/javascript">
     function googleTranslateElementInit() {
       new google.translate.TranslateElement({ pageLanguage: 'en' }, 'google_translate_element');
     }
   </script>
-  
   <script type="text/javascript"
     src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
 </body>
