Skip to content

Commit

Permalink
Merge branch 'main' into random-button
Browse files Browse the repository at this point in the history
  • Loading branch information
@sk66641
sk66641 authored May 31, 2024
2 parents f1c8c40 + cf1e913 commit 565fef5
Show file tree
Hide file tree
Showing 3 changed files with 458 additions and 4 deletions.
107 changes: 105 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,52 @@
<title>Random Disco Light Simulator</title>
<link rel="icon" href="assets/images/favicon/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="snowflakes">
<!-- Generate snowflakes dynamically with JavaScript -->
</div>
<div id="particles-js"></div>
<div class="container">
<div class="background">
<div class="shape"></div>
<div class="shape"></div>
</div>
<div class="box">
<h1>Random Disco Light Simulator</h1>
<h1
id="changingHeading"
style="
font-family: Arial, sans-serif;
font-size: 39px;
color: #ffffff;
"
>
Random Disco
<span
id="changing"
style="
font-family: Arial, sans-serif;
font-size: 39px;
font-weight: bold;
color: #ff7f50;
"
>Light Simulator</span
>
</h1>
<header>
<div class="header-content">
<nav>
<ul>
<li><a href="#about" onclick="showAboutPopup()">About</a></li>
<li>
<a href="#features" onclick="showFeaturesPopup()">Features</a>
</li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
<div>
<label for="color">1. Number of Colors:</label>
<input type="number" id="color" placeholder="Enter" />
Expand Down Expand Up @@ -122,5 +157,73 @@ <h1>Random Disco Light Simulator</h1>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script src="background.js"></script>
<script src="script.js"></script>
<div id="warningModal" class="modal">
<div class="modal-content">
<span class="close" id="closeModal">&times;</span>
<h2>Warning: Sensitivity to Flashing Lights</h2>
<p>
This site contains flashing lights that may cause discomfort or
trigger seizures for people with photosensitive epilepsy. Viewer
discretion is advised.
</p>
<button id="proceed">Proceed</button>
</div>
</div>
<div id="aboutPopup" class="popup">
<div class="popup-content">
<span class="close" onclick="closeAboutPopup()">&times;</span>
<h2>About</h2>
<p>
The Random Disco Light Simulator 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>
Inputs:
- 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>
Output:
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()">&times;</span>
<h2>Features</h2>
<h1>Conic Mode</h1>
<p>
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>
<h1>Radial Mode</h1>
<p>
Picture a pulsating ring of light expanding and contracting. The
radial pattern syncs perfectly with the beat, making you feel the
rhythm.
</p>
<h1>Linear Mode</h1>
<p>
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>
</div>
</div>
</body>
</html>
97 changes: 95 additions & 2 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@


document.addEventListener('DOMContentLoaded', () => {
const submitButton = document.getElementById('submit');
const resetButton = document.getElementById('reset');
Expand Down Expand Up @@ -54,8 +56,8 @@ document.addEventListener('DOMContentLoaded', () => {
if (countdownValue && countdownValue > 0 && Number(n) >= 0 && Number.isInteger(Number(n)) && n !== "" && unit !== "unit" && view !== "select") {
// Clear error message if everything is correct
document.getElementById("error").innerHTML = "";

// Start the simulation
// Hide the main container
document.querySelector(".container").style.display = "none";
startSimulation(n, set_time, unit, view);

// Start the countdown timer
Expand Down Expand Up @@ -153,6 +155,97 @@ document.addEventListener('DOMContentLoaded', () => {
});
});


window.onload = function() {
// Warning modal logic
var modal = document.getElementById("warningModal");
var closeModal = document.getElementById("closeModal");
var proceedButton = document.getElementById("proceed");


modal.style.display = "block";

closeModal.onclick = function() {
modal.style.display = "none";
}

proceedButton.onclick = function() {
modal.style.display = "none";
}


window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
// Text animation logic
var words = ["Light Simulator", "Beat Spectrum"];
var index = 0;
var direction = "left";
var interval = 100;

function animateText() {
var word = words[index];
var len = word.length;
var i = direction === "left" ? 0 : len;
var timer = setInterval(function () {
$("#changing").text(word.substring(0, i));
if (direction === "left") {
i++;
if (i > len) {
clearInterval(timer);
direction = "right";
animateText();
}
} else {
i--;
if (i === 0) {
clearInterval(timer);
index = (index + 1) % words.length;
direction = "left";
animateText();
}
}
}, interval);
}
animateText();

// Snowflakes animation logic

const snowflakesContainer = document.querySelector(".snowflakes");
const numberOfSnowflakes = 300;

for (let i = 0; i < numberOfSnowflakes; i++) {
const snowflake = document.createElement("div");
snowflake.classList.add("snowflake");
snowflake.style.left = `${Math.random() * 100}%`;
snowflake.style.animationDelay = `${Math.random() * 10}s`; // Randomize animation delay
snowflake.style.width = `${Math.random() * 6 + 2}px`; // Randomize snowflake size (2px to 8px)
snowflake.style.height = `${Math.random() * 6 + 2}px`; // Randomize snowflake size (2px to 8px)
snowflakesContainer.appendChild(snowflake);
}

};


function showAboutPopup() {
document.getElementById("aboutPopup").style.display = "block";
}

function closeAboutPopup() {
document.getElementById("aboutPopup").style.display = "none";
}

function showFeaturesPopup() {
document.getElementById('featuresPopup').style.display = 'block';
}


function closeFeaturesPopup() {
document.getElementById('featuresPopup').style.display = 'none';
}

document.addEventListener('DOMContentLoaded', () => {
const randomizeButton = document.getElementById('randomize');

Expand Down
Loading

0 comments on commit 565fef5

Please sign in to comment.