💄 ADD background

La-404-Devinci · Mar 10, 2024 · b9ac46b · b9ac46b
1 parent c0ad7fb
commit b9ac46b
Show file tree

Hide file tree

Showing 8 changed files with 239 additions and 95 deletions.
diff --git a/assets/Background1.png b/assets/Background1.png
diff --git a/assets/Group 2.png b/assets/Group 2.png
diff --git a/assets/cactus2W 1.png b/assets/cactus2W 1.png
diff --git a/background.css b/background.css
@@ -0,0 +1,27 @@
+html,
+body {
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
+}
+
+#background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: grid;
+}
+
+#background > div {
+  display: flex;
+  height: 48px;
+}
+
+#background > div > div {
+  height: 48px;
+  width: 48px;
+  background: rgb(246, 116, 35);
+  transition: opacity 0.2s steps(3, jump-none);
+}
diff --git a/background.js b/background.js
@@ -0,0 +1,73 @@
+const background = document.querySelector("#background");
+let cases = {};
+let heightCount = 0;
+let widthCount = 0;
+
+// Click on case
+const effect = (originX, originY, depth = 0) => {
+  if (depth < 3) {
+    setTimeout(() => effect(originX, originY, depth + 1), 100);
+  }
+
+  for (let y = -depth; y <= depth; y++) {
+    const gridY = originY + y;
+    if (gridY < 0 || gridY >= heightCount) continue;
+
+    for (let x = -depth; x <= depth; x++) {
+      if (y !== -depth && y !== depth && x !== -depth && x !== depth) continue;
+
+      const gridX = originX + x;
+      if (gridX < 0 || gridX >= widthCount) continue;
+
+      const selectedCase = cases[gridX + "-" + gridY];
+      const opacityDiff = (0.5 / depth) * (0.9 + Math.random() * 0.2);
+      selectedCase.style.opacity += opacityDiff;
+
+      setTimeout(
+        (opacityDiff) => {
+          selectedCase.style.opacity -= opacityDiff;
+
+          if (selectedCase.style.opacity < 0.001) {
+            selectedCase.style.opacity = 0;
+          }
+        },
+        200,
+        opacityDiff
+      );
+    }
+  }
+};
+
+// Generate background
+const generate = () => {
+  heightCount = Math.ceil(background.clientHeight / 48);
+  widthCount = Math.ceil(background.clientWidth / 48);
+
+  // Clear
+  background.innerHTML = "";
+  cases = {};
+
+  for (let y = 0; y < heightCount; y++) {
+    const line = document.createElement("div");
+    for (let x = 0; x < widthCount; x++) {
+      const element = document.createElement("div");
+      const r = Math.random() * 255;
+      const g = Math.random() * 255;
+      const b = Math.random() * 255;
+      element.style.opacity = 0;
+      line.appendChild(element);
+
+      cases[x + "-" + y] = element;
+    }
+    background.appendChild(line);
+  }
+};
+
+window.addEventListener("mousemove", (e) => {
+  const x = Math.floor(e.clientX / 48);
+  const y = Math.floor(e.clientY / 48);
+  effect(x, y);
+});
+
+window.addEventListener("resize", generate);
+generate();
diff --git a/index.html b/index.html
@@ -1,30 +1,52 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Pixelify+Sans:[email protected]&family=Press+Start+2P&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="style.css">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Pixelify+Sans:[email protected]&family=Press+Start+2P&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="background.css" />
+
+    <script src="script.js"></script>
+    <script src="background.js" defer></script>
     <title>Document</title>
-</head>
-<body>
+  </head>
+  <body>
+    <div id="background"></div>
     <section>
-        <div class="title">
-            <p>PIXEL</p>
-            <p><span>//</span>WAR</p>
-        </div>
+      <div class="title">
+        <p>PIXEL</p>
+        <p><span>//</span>WAR</p>
+      </div>
 
-        <div id="countdown"></div>
+      <div id="countdown"></div>
 
-        <button class="btn-notification"> 
-            <img src="assets/phone.svg" alt="phone-icone"> Me notifier
+      <a href="https://www.instagram.com/la404.devinci/">
+        <button class="btn-notification">
+          <img src="assets/phone.svg" alt="phone-icone" /> Me notifier
         </button>
+      </a>
     </section>
 
-    <p class="wait">En attendant, commencez votre <a href="https://hack.404devinci.fr/">Hacker's Journey</a>!</p>
-
-    <script src="script.js"></script>
-</body>
-</html>
+    <img
+      src="assets/cactus2W 1.png"
+      alt="img-cactus-pixelisé"
+      class="cactus-gauche"
+    />
+    <p class="wait">
+      En attendant, commencez votre<a href="https://hack.404devinci.fr/">
+        Hacker's Journey</a
+      >!
+    </p>
+    <img
+      src="assets/Group 2.png"
+      alt="img-cactus-pixelisé"
+      class="cactus-droit"
+    />
+  </body>
+</html>
diff --git a/script.js b/script.js
@@ -1,15 +1,10 @@
 // modifier heure si nécessaire
 const endDate = new Date("2024-03-22T13:00:00").getTime();
 
-const refreshCountdown = () => {
+const countdown = setInterval(() => {
     const now = new Date().getTime();
     const distance = endDate - now;
 
-    // Reload when the timer is over
-    if (distance < 0) {
-        window.location.reload();
-    }
-
     const days = Math.floor(distance / (1000 * 60 * 60 * 24));
     const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
     const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
@@ -19,7 +14,11 @@ const refreshCountdown = () => {
     document.getElementById("countdown").innerHTML += `<p>${hours}<span>H</span></p>`;
     document.getElementById("countdown").innerHTML += `<p>${minutes}<span>M</span></p>`;
     document.getElementById("countdown").innerHTML += `<p>${seconds}<span>S</span></p>`;
-}
 
-setInterval(refreshCountdown, 1000);
-refreshCountdown();
+    if (distance < 0) {
+        clearInterval(countdown);
+        document.getElementById("countdown").innerHTML ="Le countdown est terminé !";
+    }
+}, 1000);
+
+