small fixes, more colors, english comments

fireworks.css

@@ -1,13 +1,15 @@
 .fireworks {
-  /*position: fixed;*/
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
-  /*overflow: hidden;*/
   z-index: 10;
+
+  /* activate the following for fixed positioning */
+  /*position: fixed;*/
+  /*overflow: hidden;*/
 }
 
 .rocket-trail {
@@ -15,13 +17,18 @@
   left: var(--trailX);
   top: var(--trailStartY);
   width: 4px;
-  /*height: 4px;*/
+
+  /* activate the following for rocket trail */
   height: 60px;
-  /*background: white;*/
   background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
   filter: blur(2px);
+
+  /* activate the following for rocket trail as a point */
+  /*height: 4px;*/
+  /*background: white;*/
   /*border-radius: 50%;
   box-shadow: 0 0 8px 2px white;*/
+
   animation: rocket-trail-animation 1s linear forwards;
 }
 
@@ -36,7 +43,7 @@
   }
 }
 
-/* Animation für die Partikel */
+/* Animation for the particles */
 @keyframes fireworkParticle {
   0% {
     opacity: 1;

fireworks.js

@@ -1,6 +1,9 @@
 const fireworks = true; // enable/disable fireworks
 const scrollFireworks = true; // enable fireworks to scroll with page content
 const particlesPerFirework = 50; // count of particles per firework
+const minFireworks = 4; // minimum number of simultaneous fireworks
+const maxFireworks = 6; // maximum number of simultaneous fireworks
+const fireworksInterval = 3000; // interval for the fireworks
 
 // array of color palettes for the fireworks
 const colorPalettes = [
@@ -10,6 +13,8 @@ const colorPalettes = [
   ['#ffd700', '#c0c0c0', '#ff6347'], // gold, silver, red
   ['#ff00ff', '#ff99ff', '#800080'], // magenta's
   ['#ffef00', '#ffff99', '#ffd700'], // yellow's
+  ['#ff4500', '#ff6347', '#ff7f50'], // orange's
+  ['#e3e3e3', '#c0c0c0', '#7d7c7c'], // silver's
 ];
 
 let msgPrinted = false; // flag to prevent multiple console messages
@@ -53,39 +58,37 @@ observer.observe(document.body, {
 });
 
 
-
+// Function to create a rocket trail
-// Funktion, um einen Schweif zu erzeugen
 function createRocketTrail(x, startY, endY) {
   const fireworkContainer = document.querySelector('.fireworks');
   const rocketTrail = document.createElement('div');
   rocketTrail.classList.add('rocket-trail');
   fireworkContainer.appendChild(rocketTrail);
 
-  // Setze Position und Animation
+  // Set position and animation
   rocketTrail.style.setProperty('--trailX', `${x}px`);
   rocketTrail.style.setProperty('--trailStartY', `${startY}px`);
   rocketTrail.style.setProperty('--trailEndY', `${endY}px`);
 
-  // Entferne das Element nach der Animation
+  // Remove the element after the animation
   setTimeout(() => {
     fireworkContainer.removeChild(rocketTrail);
-  }, 2000); // Dauer der Animation
+  }, 2000); // Duration of the animation
 }
 
-
+// Function for particle explosion
-// Funktion für die Partikel-Explosion
 function createExplosion(x, y) {
   const fireworkContainer = document.querySelector('.fireworks');
 
-  // Wähle eine zufällige Farbkombination
+  // Choose a random color palette
   const chosenPalette = colorPalettes[Math.floor(Math.random() * colorPalettes.length)];
 
   for (let i = 0; i < particlesPerFirework; i++) {
     const particle = document.createElement('div');
     particle.classList.add('firework');
 
-    const angle = Math.random() * 2 * Math.PI; // Zufällige Richtung
+    const angle = Math.random() * 2 * Math.PI; // Random direction
-    const distance = Math.random() * 180 + 100; // Zufällige Distanz
+    const distance = Math.random() * 180 + 100; // Random distance
     const xOffset = Math.cos(angle) * distance;
     const yOffset = Math.sin(angle) * distance;
 
@@ -97,53 +100,50 @@ function createExplosion(x, y) {
 
     fireworkContainer.appendChild(particle);
 
-    // Entferne Partikel nach der Animation
+    // Remove particle after the animation
     setTimeout(() => particle.remove(), 3000);
   }
 }
 
-// Funktion für das Feuerwerk mit Schweif
+// Function for the firework with trail
 function launchFirework() {
   const fireworkContainer = document.querySelector('.fireworks');
   if (!fireworkContainer) return;
 
-  // Zufällige horizontale Position
+  // Random horizontal position
-  //const x = Math.random() * window.innerWidth * 0.7 + window.innerWidth * 0.15;
+  const x = Math.random() * window.innerWidth; // Any value across the entire width
-  const x = Math.random() * window.innerWidth; // Beliebiger Wert auf der gesamten Breite
 
-  // Schweif startet unten und endet auf einer zufälligen Höhe um die Mitte
+  // Trail starts at the bottom and ends at a random height around the middle
   let startY, endY;
   if (scrollFireworks) {
-    // Y-Position berücksichtigt das Scrollen
+    // Y-position considers scrolling
-    startY = window.scrollY + window.innerHeight; // Unterkante des Fensters plus der Scroll-Offset
+    startY = window.scrollY + window.innerHeight; // Bottom edge of the window plus the scroll offset
-    endY = Math.random() * window.innerHeight * 0.5 + window.innerHeight * 0.2 + window.scrollY; // Bereich um die Mitte, aber auch mit Scrollen
+    endY = Math.random() * window.innerHeight * 0.5 + window.innerHeight * 0.2 + window.scrollY; // Area around the middle, but also with scrolling
   } else {
-    startY = window.innerHeight; // Unterkante des Fensters
+    startY = window.innerHeight; // Bottom edge of the window
-    endY = Math.random() * window.innerHeight * 0.5 + window.innerHeight * 0.2; // Bereich um die Mitte
+    endY = Math.random() * window.innerHeight * 0.5 + window.innerHeight * 0.2; // Area around the middle
   }
-  //console.log(startY, endY);
 
-  // Schweif erzeugen
+  // Create trail
   createRocketTrail(x, startY, endY);
 
-  // Explosion erzeugen
+  // Create explosion
   setTimeout(() => {
-    createExplosion(x, endY); // Explosion an der Endhöhe
+    createExplosion(x, endY); // Explosion at the end height
   }, 1000); // or 1200
 }
 
-// Startet die Feuerwerksroutine
+// Start the firework routine
 function startFireworks() {
   fireworksInterval = setInterval(() => {
-    const randomCount = Math.floor(Math.random() * 4) + 4;
+    const randomCount = Math.floor(Math.random() * maxFireworks) + minFireworks;
     for (let i = 0; i < randomCount; i++) {
       launchFirework();
     }
-  }, 1800);
+  }, fireworksInterval); // Interval between fireworks
 }
 
-
+// Initialize fireworks and add random fireworks after the DOM is loaded
-// initialize snowflakes and add random snowflakes after the DOM is loaded
 document.addEventListener('DOMContentLoaded', () => {
   if (!fireworks) return; // exit if fireworks are disabled
   startFireworks();