za

script.js

@@ -0,0 +1,153 @@
+//Clock
+function getTime() {
+  var date = new Date();
+  var h = date.getHours() <= 9 ? "0" + date.getHours() : date.getHours();
+  var m = date.getMinutes() <= 9 ? "0" + date.getMinutes() : date.getMinutes();
+  var s = date.getSeconds() <= 9 ? "0" + date.getSeconds() : date.getSeconds();
+  $("#time").text(`${h}:${m}:${s}`);
+}
+setInterval(getTime, 1000);
+getTime();
+
+//Colored Text
+let colorsArr = ["red", "cyan", "purple", "orange"];
+let colori = 0;
+setInterval(() => {
+  document.documentElement.style.setProperty("--color", colorsArr[colori]);
+  if (colori == colorsArr.length - 1) {
+    colori = 0;
+  } else {
+    colori++;
+  }
+}, 2000);
+
+//Video volume
+document.getElementById("vid").volume = 0.6;
+
+//Main Function
+mainActive = false;
+setTimeout(() => {
+  if (document.getElementById("vid").paused) {
+    $("#clickToPlay").css("opacity", "1");
+  } else {
+    main();
+  }
+}, 1000);
+function main() {
+  if (mainActive) return;
+  mainActive = true;
+  $("#clickToPlay").css("opacity", "0");
+  $("#main").css("opacity", "1");
+  $("#widgetContainer").css("opacity", "1");
+  $(".hitCount").css("opacity", "1");
+  setTimeout(() => {
+    $("#clickToPlay").css("display", "none");
+  }, 1050);
+  document.getElementById("vid").play();
+  //Border
+  borderTop = 0;
+  borderRight = 0;
+  borderBottom = 0;
+  borderLeft = 0;
+  function topBorder() {
+    let int = setInterval(() => {
+      borderTop++;
+      if (borderTop <= 100) {
+        $("#borderTop").css("width", borderTop + "%");
+      } else {
+        rightBorder();
+        clearInterval(int);
+        $("#borderTop").css({ left: "", right: "0" });
+        setTimeout(() => {
+          let int = setInterval(() => {
+            borderTop--;
+            if (borderTop >= 0) {
+              $("#borderTop").css("width", borderTop + "%");
+            } else {
+              $("#borderTop").css({ right: "", left: "0" });
+              clearInterval(int);
+            }
+          }, 7);
+        }, 250);
+      }
+    }, 7);
+  }
+  function rightBorder() {
+    let int = setInterval(() => {
+      borderRight++;
+      if (borderRight <= 100) {
+        $("#borderRight").css("height", borderRight + "%");
+      } else {
+        bottomBorder();
+        clearInterval(int);
+        $("#borderRight").css({ top: "", bottom: "0" });
+
+        setTimeout(() => {
+          let int = setInterval(() => {
+            borderRight--;
+            if (borderRight >= 0) {
+              $("#borderRight").css("height", borderRight + "%");
+            } else {
+              $("#borderRight").css({ bottom: "", top: "0" });
+              clearInterval(int);
+            }
+          }, 5);
+        }, 450);
+      }
+    }, 5);
+  }
+  function bottomBorder() {
+    let int = setInterval(() => {
+      borderBottom++;
+      if (borderBottom <= 100) {
+        $("#borderBottom").css("width", borderBottom + "%");
+      } else {
+        leftBorder();
+        clearInterval(int);
+        $("#borderBottom").css({ right: "", left: "0" });
+
+        setTimeout(() => {
+          let int = setInterval(() => {
+            borderBottom--;
+            if (borderBottom >= 0) {
+              $("#borderBottom").css("width", borderBottom + "%");
+            } else {
+              $("#borderBottom").css({ left: "", right: "0" });
+              clearInterval(int);
+            }
+          }, 7);
+        }, 250);
+      }
+    }, 7);
+  }
+  function leftBorder() {
+    let int = setInterval(() => {
+      borderLeft++;
+      if (borderLeft <= 100) {
+        $("#borderLeft").css("height", borderLeft + "%");
+      } else {
+        topBorder();
+        clearInterval(int);
+        $("#borderLeft").css({ bottom: "", top: "0" });
+
+        setTimeout(() => {
+          let int = setInterval(() => {
+            borderLeft--;
+            if (borderLeft >= 0) {
+              $("#borderLeft").css("height", borderLeft + "%");
+            } else {
+              $("#borderLeft").css({ top: "", bottom: "0" });
+              clearInterval(int);
+            }
+          }, 5);
+        }, 450);
+      }
+    }, 5);
+  }
+  topBorder();
+}
+
+//Start Main Function
+$("#clickToPlay").click(() => {
+  main();
+});

style.css

@@ -90,10 +90,10 @@ pre {
   color: purple;
   background: repeating-linear-gradient(
     120deg,
-    orange 0%,
-    yellow 12.5%,
-    red 37.5%,
-    orange 60%
+    lightgray 0%,
+    gray 12.5%,
+    black 37.5%,
+    white 60%
   );
   background-size: 60vw 60vw;
   -webkit-text-fill-color: transparent;
@@ -119,10 +119,10 @@ pre {
   height: 38px;
   background: repeating-linear-gradient(
     120deg,
-    pink 0%,
-    purple 12.5%,
-    white 37.5%,
-    pink 60%
+    white 0%,
+    gray 12.5%,
+    black 37.5%,
+    gray 60%
   );
   background-size: 60vw 60vw;
   animation: slide 10s linear infinite forwards;