<!-- CODE = #A016 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>NETBYZZ A016</title> <link rel="stylesheet" href="style.css"> </head> <body> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3niQHzllfpJWl9Iss3ArAI7HSP4wA-vWMv-oN6X5ZUfZBiM4g9p92gO4mxJwExsrpAtRPLfb8WyFnOpjKWwSShfW0ohM0i3eoocCEF4bg0ppj0QcdOPy77suge-W_u-Dde5wIM4YbO0RQ39uXwpRB5H8yJBir9MWjJ_fO3bMhOdOYrGzBlWmI223Urew/s1000/Netbyzz4.png" alt="Netbyzz Logo" class="Netbyzz"> <div class="slide"> <label for="dimmer">Dimmer</label> <input type="range" min="0.3" max="1.0" step="0.1" value="1.0" class="dimmer" id="dimmer"> </div> <button class="lightSwitch">Lights On!</button> <div class="container"> <hr> <div class="light"></div> <div class="light"></div> <div class="light"></div> <div class="light"></div> <div class="light"></div> <div class="light"></div> <div class="light"></div> <div class="light"></div> <div class="light"></div> <div class="light"></div> </div> <script src="script.js"></script> </body> </html>
body { width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; background: #000 linear-gradient(transparent 5%, rgba(0, 27, 102, 0.9)); font-size: 12px; font-weight: lighter; } label { letter-spacing: 2px; text-transform: uppercase; color: #fff; padding: 5px 10px; } .slide { position: absolute; top: 0; left: 0; padding: 25px; right: 50%; .dimmer { transition: all 0.3s linear; width: 100%; height: 5px; margin: 10px 0 0 0; opacity: 0.7; border-radius: 3px; border: 1px solid rgb(88, 136, 169); background: #464646; &:hover { opacity: 1; } &::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 15px; height: 20px; border-radius: 50%; background: #fff; cursor: pointer; } } } button { color: #000; transition: all 0.3s linear; border: 2px solid rgba(88, 136, 169, 1); background: #ddd; position: absolute; top: 25px; right: 25px; border-radius: 3px; cursor: pointer; &:hover { background: rgba(88, 136, 169, 0.5); color: #ddd; } } .Netbyzz { margin-left: 0px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; width: 50%; /* Adjust the size of the logo */ opacity: 3%; } .container { width: 100%; height: 45px; display: flex; position: relative; flex-direction: vertical; justify-content: space-evenly; hr { position: absolute; top: -3px; height: 4px; width: 100%; background-color: #103718; border: none; border-bottom: 1px solid #547c55; margin: 0; } .light { position: relative; z-index: 0; width: 20px; border-radius: 100%; transition: all 0.4s linear; background-image: radial-gradient(circle closest-side, transparent, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7) 180%); background-color: #000; box-shadow: 0 0 40px 0 rgba(255, 255, 255, 0.1), 0 20px 80px 8px rgba(15, 240, 255, 0.5); &:before { content: ""; position: absolute; background: #103718 radial-gradient(circle closest-side, transparent, rgba(0, 0, 0, 0.4) 100%); width: 16px; height: 8px; margin: 0; border-radius: 5px 5px 0 0; top: -1px; left: 9%; } } }
const element = document.querySelector(".container"), // query all .light containers lights = document.querySelectorAll(".container .light"), dimmer = document.querySelector(".dimmer"); // Random colour generator // #HEX function getRandomHEX() { var letters = "0123456789ABCDEF", value = "#"; for (var i = 0; i < 6; i++) { value += letters[Math.floor(Math.random() * 16)]; } return value; } // RGBA() function getRandomRGBA(alpha) { function numbers() { var x = Math.floor(Math.random() * 256); return x; } alpha = dimmer.value; // Change alpha of RGBA on dimmer change dimmer.oninput = () => { alpha.innerHTML = this.value; }; return ( "rgba(" + numbers() + ", " + numbers() + ", " + numbers() + ", " + alpha /*.toFixed(1)*/ + ")" ); } function randomLights() { // random colours applied to each light lights.forEach(function (self) { let color = getRandomRGBA(); self.style.backgroundColor = color; self.style["boxShadow"] = "0 0 0 rgba(255,255,255,0.2), 0 20px 100px 8px " + color + ", 0 5px 50px 0 #fff"; }); } // button with .lightSwitch let lightsToggle = document.querySelector(".lightSwitch"); //lights on/off toggle button lightsToggle.addEventListener("click", () => { element.classList.toggle("flash"); if (lightsToggle.innerHTML === "Lights On!") { lightsToggle.innerHTML = "Lights Off."; } else { lightsToggle.innerHTML = "Lights On!"; } // Trigger random lights at set interval let random = setInterval(() => { randomLights(); if (element.classList.contains("flash") === false) { clearInterval(random); //remove inline styles from all lights for (i = 0; i < lights.length; i++) { lights[i].removeAttribute("style"); } } }, 800); });