255 lines
5.5 KiB
HTML
255 lines
5.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>DX NKSP</title>
|
|
<script src="js/site.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<h1 data-value="DX NKSP">DX NKSP</h1>
|
|
<p class="modified-text">created by NKSP</p>
|
|
|
|
<script>
|
|
const letters = "ZVZVZVZVZVZVZVZVZVZVZVZVZV";
|
|
let interval = null;
|
|
|
|
window.addEventListener("DOMContentLoaded", () => {
|
|
startLetterAnimation();
|
|
});
|
|
|
|
function startLetterAnimation() {
|
|
const heading = document.querySelector("h1");
|
|
let iteration = 0;
|
|
clearInterval(interval);
|
|
|
|
interval = setInterval(() => {
|
|
heading.innerText = heading.innerText
|
|
.split("")
|
|
.map((letter, index) => {
|
|
if (index < iteration) {
|
|
return heading.dataset.value[index];
|
|
}
|
|
|
|
return letters[Math.floor(Math.random() * 26)];
|
|
})
|
|
.join("");
|
|
|
|
if (iteration >= heading.dataset.value.length) {
|
|
clearInterval(interval);
|
|
setTimeout(() => {
|
|
removeOtherLetters();
|
|
}, 200);
|
|
}
|
|
|
|
iteration += 1 / 3;
|
|
}, 100);
|
|
}
|
|
|
|
|
|
function removeOtherLetters() {
|
|
const heading = document.querySelector("h1");
|
|
const otherLetters = Array.from(heading.innerText)
|
|
.filter(letter => !heading.dataset.value.includes(letter))
|
|
.join("");
|
|
|
|
let iteration = 0;
|
|
clearInterval(interval);
|
|
|
|
interval = setInterval(() => {
|
|
heading.innerText = heading.innerText
|
|
.split("")
|
|
.map((letter, index) => {
|
|
if (heading.dataset.value.includes(letter)) {
|
|
return letter;
|
|
}
|
|
|
|
if (index < iteration) {
|
|
return otherLetters[index];
|
|
}
|
|
|
|
return letters[Math.floor(Math.random() * 26)];
|
|
})
|
|
.join("");
|
|
|
|
if (iteration >= otherLetters.length) {
|
|
clearInterval(interval);
|
|
animateBubbles();
|
|
setTimeout(() => {
|
|
window.location.href = "/scan.html";
|
|
}, 7000);
|
|
}
|
|
|
|
iteration += 1 / 3;
|
|
}, 100);
|
|
}
|
|
|
|
function animateBubbles() {
|
|
const bubbleCount = 100; // Number of additional bubbles
|
|
const bubbleSizeMin = 10; // Minimum bubble size in pixels
|
|
const bubbleSizeMax = 30; // Maximum bubble size in pixels
|
|
const bubbleSpeedMin = 4; // Minimum bubble rising speed in seconds
|
|
const bubbleSpeedMax = 10; // Maximum bubble rising speed in seconds
|
|
|
|
const heading = document.querySelector("h1");
|
|
const headingRect = heading.getBoundingClientRect();
|
|
const bodyRect = document.body.getBoundingClientRect();
|
|
|
|
for (let i = 0; i < bubbleCount; i++) {
|
|
const bubble = document.createElement("div");
|
|
bubble.classList.add("bubble");
|
|
bubble.style.left = `${Math.random() * (bodyRect.width - headingRect.width)}px`;
|
|
bubble.style.bottom = `${Math.random() * bodyRect.height}px`;
|
|
bubble.style.width = `${bubbleSizeMin + Math.random() * (bubbleSizeMax - bubbleSizeMin)}px`;
|
|
bubble.style.height = bubble.style.width;
|
|
|
|
const delay = Math.random() * 500; // Random delay before bubble appears (reduced to 500 milliseconds)
|
|
const duration = bubbleSpeedMin + Math.random() * (bubbleSpeedMax - bubbleSpeedMin); // Random duration for bubble rising
|
|
|
|
setTimeout(() => {
|
|
heading.appendChild(bubble);
|
|
bubble.style.animationDuration = `${duration}s`;
|
|
bubble.addEventListener("animationend", () => {
|
|
bubble.remove();
|
|
});
|
|
}, delay);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
body {
|
|
display: grid;
|
|
place-items: center;
|
|
height: 100vh;
|
|
background-color: black;
|
|
margin: 0rem;
|
|
overflow: hidden; /* Prevent scroll bar from appearing */
|
|
}
|
|
|
|
|
|
.container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
h1 {
|
|
font-family: 'Space Mono', monospace;
|
|
font-size: clamp(3rem, 10vw, 10rem);
|
|
color: white;
|
|
padding: 0rem clamp(1rem, 2vw, 3rem);
|
|
border-radius: clamp(0.4rem, 0.75vw, 1rem);
|
|
text-align: center;
|
|
}
|
|
|
|
.modified-text {
|
|
font-family: 'Space Mono', monospace;
|
|
font-size: 1rem;
|
|
color: white;
|
|
text-align: center;
|
|
position: absolute;
|
|
bottom: 15px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
|
|
.bubble {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
transform: translate(-50%, 100%);
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
opacity: 0;
|
|
animation-name: bubble-rise;
|
|
animation-timing-function: ease-in-out;
|
|
animation-fill-mode: forwards;
|
|
z-index: 9999;
|
|
}
|
|
|
|
@keyframes bubble-rise {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translate(-50%, 100%);
|
|
}
|
|
70% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: translate(-50%, -200%);
|
|
}
|
|
}
|
|
|
|
.bubble::before {
|
|
content: "";
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
background-color: rgb(104, 0, 0); /* Default white color */
|
|
}
|
|
|
|
|
|
|
|
|
|
/* -- YouTube Link Styles -- */
|
|
|
|
body.menu-toggled > .meta-link > span {
|
|
color: rgb(30, 30, 30);
|
|
}
|
|
|
|
#source-link {
|
|
bottom: 60px;
|
|
}
|
|
|
|
#source-link > i {
|
|
color: rgb(94, 106, 210);
|
|
}
|
|
|
|
#yt-link > i {
|
|
color: rgb(239, 83, 80);
|
|
}
|
|
|
|
.meta-link {
|
|
align-items: center;
|
|
backdrop-filter: blur(3px);
|
|
background-color: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 6px;
|
|
bottom: 10px;
|
|
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
gap: 5px;
|
|
left: 10px;
|
|
padding: 10px 20px;
|
|
position: fixed;
|
|
text-decoration: none;
|
|
transition: background-color 400ms, border-color 400ms;
|
|
z-index: 10000;
|
|
}
|
|
|
|
.meta-link:hover {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.meta-link > i,
|
|
.meta-link > span {
|
|
height: 20px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.meta-link > span {
|
|
color: white;
|
|
font-family: "Rubik", sans-serif;
|
|
font-weight: 500;
|
|
}</style>
|
|
|
|
</body>
|
|
</html>
|
|
|