From bda487f28b5e77931c50a56ca8549ed2e8e8d3c1 Mon Sep 17 00:00:00 2001 From: igna Date: Mon, 6 Sep 2021 23:48:13 +0000 Subject: [PATCH] za --- script.js | 153 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 16 +++--- 2 files changed, 161 insertions(+), 8 deletions(-) create mode 100644 script.js diff --git a/script.js b/script.js new file mode 100644 index 0000000..7a54f99 --- /dev/null +++ b/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(); +}); diff --git a/style.css b/style.css index 016129b..72200e2 100644 --- a/style.css +++ b/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;