Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Revert "Removing unnecessary code from index.html" #549

Merged
merged 1 commit into from
Aug 1, 2024
Merged

Revert "Removing unnecessary code from index.html" #549

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
174 changes: 131 additions & 43 deletions index.html
View file
Open in desktop
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
Loading