Skip to content

Commit

Permalink
Revert "Removing unnecessary code from index.html"
Browse files Browse the repository at this point in the history
  • Loading branch information
@sk66641
sk66641 authored Aug 1, 2024
1 parent 25afb3c commit 60c5a45
Showing 1 changed file with 131 additions and 43 deletions.
174 changes: 131 additions & 43 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -71,7 +71,11 @@
}

}
</style>


</style>


</head>

<body>
Expand Down Expand Up @@ -145,17 +149,13 @@
animateCircles();
});
</script>


<div class="loader">
<div>
<lottie-player src="https://lottie.host/451aadfb-9af8-4298-98be-e9c583f8a72c/jPRsrfR2jf.json"
background="##FFFFFF" speed="1" style="width: 300px; height: 300px" loop autoplay mode="normal">
</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>
Expand All @@ -164,7 +164,6 @@
<div id="particles-js"></div>
</div>

<!-- navbar -->
<div class="navHeader">
<div class="header-content">
<nav>
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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>
Expand All @@ -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()">
Expand All @@ -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">
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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">
Expand All @@ -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>
Expand Down

0 comments on commit 60c5a45

Please sign in to comment.