Merge pull request #62 from sujal-98/sujal

updated background #59
sk66641 · May 30, 2024 · 589f89e · 589f89e
2 parents 9af15fb + 1dd8dc4
commit 589f89e
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 1 deletion.
diff --git a/background.js b/background.js
@@ -0,0 +1,72 @@
+particlesJS('particles-js', 
+{
+  "particles": {
+    "number": {
+      "value": 200, 
+      "density": {
+        "enable": true,
+        "value_area": 800 
+      }
+    },
+    "color": {
+      "value": "#ffffff" 
+    },
+    "shape": {
+      "type": "circle",
+      "stroke": {
+        "width": 0,
+        "color": "#000000"
+      }
+    },
+    "opacity": {
+      "value": 0.8, 
+      "random": true, 
+      "anim": {
+        "enable": true,
+        "speed": 1,
+        "opacity_min": 0.3,
+        "sync": false
+      }
+    },
+    "size": {
+      "value": 2,
+      "random": true, 
+      "anim": {
+        "enable": false,
+        "speed": 40,
+        "size_min": 0.1,
+        "sync": false
+      }
+    },
+    "line_linked": {
+      "enable": false 
+    },
+    "move": {
+      "enable": true,
+      "speed": 1, 
+      "direction": "none",
+      "random": true, 
+      "straight": false,
+      "out_mode": "out",
+      "bounce": false,
+      "attract": {
+        "enable": false,
+        "rotateX": 600,
+        "rotateY": 1200
+      }
+    }
+  },
+  "interactivity": {
+    "detect_on": "canvas",
+    "events": {
+      "onhover": {
+        "enable": false
+      },
+      "onclick": {
+        "enable": false
+      },
+      "resize": true
+    }
+  },
+  "retina_detect": true
+});
diff --git a/index.html b/index.html
@@ -10,6 +10,7 @@
 
 	</head>
 	<body>
+    <div id="particles-js"></div>
 		<div class="container">
 			<div class="background">
 				<div class="shape"></div>
@@ -109,6 +110,8 @@ <h1>Random Disco Light Simulator</h1>
   <audio id="upbeatdisco" src="assets/audios/upbeatdisco.mp3"></audio>
 		<div id="message">The timer has ended. The page will reload.</div>
     <button id="fullscreenBtn">Fullscreen</button>
+    <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>
 	</body>
 </html>
diff --git a/script.js b/script.js
@@ -78,6 +78,7 @@ document.addEventListener('DOMContentLoaded', () => {
         alert("Double click on the screen to reload!");
 
         document.body.children[0].style.display = 'none';
+        document.body.children[1].style.display = 'none';
         document.body.style.cursor = "pointer";
 
         document.body.addEventListener("dblclick", () => {

diff --git a/style.css b/style.css
@@ -10,10 +10,18 @@ body {
   display: flex;
   justify-content: center;
   align-items: center;
-  background: url('https://media.istockphoto.com/id/523382283/vector/simple-stars-space-stock-vector-background.jpg?s=612x612&w=0&k=20&c=PE-1LqWTOaxMuu_0TkUohHQWAF8TVxFSm-lfyCWdbO4=');
+  background-color: black;
   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
 
+
+#particles-js {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+}
+
 ::-webkit-scrollbar {
   display: none;
 }