223 lines
No EOL
5.9 KiB
HTML
223 lines
No EOL
5.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>ПОМИДОРКИ 🍅🍅🍅</title>
|
|
<style>
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
body {
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
background: repeating-linear-gradient(
|
|
45deg,
|
|
#ff003c, #ff003c 10px,
|
|
#ffee00 10px, #ffee00 20px,
|
|
#00ff66 20px, #00ff66 30px,
|
|
#ff00e6 30px, #ff00e6 40px
|
|
);
|
|
background-size: 200% 200%;
|
|
animation: bgshift 1.2s linear infinite, huerotate 3s linear infinite;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: 'Comic Sans MS', 'Arial Black', sans-serif;
|
|
position: relative;
|
|
}
|
|
|
|
@keyframes bgshift {
|
|
0% { background-position: 0% 0%; }
|
|
100% { background-position: 200% 200%; }
|
|
}
|
|
@keyframes huerotate {
|
|
0% { filter: hue-rotate(0deg) saturate(3); }
|
|
100% { filter: hue-rotate(360deg) saturate(3); }
|
|
}
|
|
|
|
.tomato-rain span {
|
|
position: absolute;
|
|
font-size: 40px;
|
|
top: -60px;
|
|
animation: fall linear infinite;
|
|
filter: drop-shadow(0 0 10px yellow);
|
|
}
|
|
@keyframes fall {
|
|
to { transform: translateY(110vh) rotate(720deg); }
|
|
}
|
|
|
|
#stage {
|
|
position: relative;
|
|
z-index: 5;
|
|
text-align: center;
|
|
transition: transform 0.05s linear;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 4rem;
|
|
color: #fff;
|
|
-webkit-text-stroke: 3px #ff0000;
|
|
text-shadow:
|
|
0 0 10px #fff,
|
|
0 0 20px #ff0,
|
|
0 0 30px #f0f,
|
|
0 0 40px #0ff;
|
|
animation: pulse 0.4s infinite alternate, wiggle 0.3s infinite;
|
|
}
|
|
@keyframes pulse {
|
|
from { transform: scale(1); }
|
|
to { transform: scale(1.15); }
|
|
}
|
|
@keyframes wiggle {
|
|
0% { transform: rotate(-3deg); }
|
|
50% { transform: rotate(3deg); }
|
|
100% { transform: rotate(-3deg); }
|
|
}
|
|
|
|
button {
|
|
margin-top: 40px;
|
|
padding: 25px 50px;
|
|
font-size: 2rem;
|
|
font-weight: 900;
|
|
background: radial-gradient(circle, #ff0000, #ff8800, #ffee00);
|
|
border: 6px dashed #ffffff;
|
|
border-radius: 50px;
|
|
color: #000;
|
|
cursor: pointer;
|
|
box-shadow: 0 0 40px #ff00ff, 0 0 80px #00ffff inset;
|
|
animation: btnpulse 0.5s infinite;
|
|
text-shadow: 2px 2px #fff;
|
|
}
|
|
@keyframes btnpulse {
|
|
0%,100% { transform: scale(1) rotate(0deg); }
|
|
50% { transform: scale(1.1) rotate(-5deg); }
|
|
}
|
|
button:active { transform: scale(0.9); }
|
|
|
|
.spinning {
|
|
animation: mega-spin 0.15s linear infinite !important;
|
|
}
|
|
@keyframes mega-spin {
|
|
0% { transform: rotate(0deg) scale(1); }
|
|
25% { transform: rotate(180deg) scale(1.3); }
|
|
50% { transform: rotate(720deg) scale(0.7); }
|
|
75% { transform: rotate(1080deg) scale(1.5); }
|
|
100% { transform: rotate(1440deg) scale(1); }
|
|
}
|
|
|
|
body.freak {
|
|
animation: bgshift 0.05s linear infinite, huerotate 0.1s linear infinite, shake 0.08s infinite;
|
|
}
|
|
@keyframes shake {
|
|
0% { transform: translate(0,0); }
|
|
25% { transform: translate(-20px,15px); }
|
|
50% { transform: translate(15px,-20px); }
|
|
75% { transform: translate(-15px,-15px); }
|
|
100% { transform: translate(20px,20px); }
|
|
}
|
|
|
|
.popup {
|
|
position: fixed;
|
|
font-size: 3rem;
|
|
font-weight: 900;
|
|
color: #fff;
|
|
-webkit-text-stroke: 2px #000;
|
|
pointer-events: none;
|
|
z-index: 999;
|
|
animation: popfly 1.4s ease-out forwards;
|
|
white-space: nowrap;
|
|
}
|
|
@keyframes popfly {
|
|
0% { transform: translate(0,0) scale(0) rotate(0deg); opacity: 1; }
|
|
50% { transform: translate(var(--dx), var(--dy)) scale(2) rotate(360deg); opacity: 1; }
|
|
100% { transform: translate(calc(var(--dx) * 1.6), calc(var(--dy) * 1.6)) scale(0.3) rotate(720deg); opacity: 0; }
|
|
}
|
|
|
|
.flash {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: white;
|
|
z-index: 998;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
}
|
|
.flash.on {
|
|
animation: flashit 0.1s;
|
|
}
|
|
@keyframes flashit {
|
|
0% { opacity: 0.9; }
|
|
100% { opacity: 0; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="tomato-rain" id="rain"></div>
|
|
<div class="flash" id="flash"></div>
|
|
|
|
<div id="stage">
|
|
<h1>🍅 ПОМИДОРКИ ПРАВЯТ МИРОМ 🍅</h1>
|
|
<p style="color:#fff; font-size:1.5rem; text-shadow:2px 2px #f0f; margin-top:10px;">
|
|
нажми на кнопку и всё поедет нахуй
|
|
</p>
|
|
<br>
|
|
<button id="btn">🍅 НАЖАТЬ 🍅</button>
|
|
</div>
|
|
|
|
<script>
|
|
const stage = document.getElementById('stage');
|
|
const btn = document.getElementById('btn');
|
|
const flash = document.getElementById('flash');
|
|
const rain = document.getElementById('rain');
|
|
|
|
const texts = ["67", "67ims топ", "🍅🍅", "pashol naxxuy kozel", "ПОМИДОР БОГ", "🍅🌀🍅"];
|
|
|
|
// tomato rain background
|
|
for (let i = 0; i < 25; i++) {
|
|
const t = document.createElement('span');
|
|
t.textContent = "🍅";
|
|
t.style.left = Math.random() * 100 + "vw";
|
|
t.style.animationDuration = (2 + Math.random() * 3) + "s";
|
|
t.style.animationDelay = (Math.random() * 3) + "s";
|
|
rain.appendChild(t);
|
|
}
|
|
|
|
let spinning = false;
|
|
let spinInterval;
|
|
|
|
btn.addEventListener('click', () => {
|
|
if (spinning) return;
|
|
spinning = true;
|
|
document.body.classList.add('freak');
|
|
stage.classList.add('spinning');
|
|
|
|
spinInterval = setInterval(() => {
|
|
spawnPopup();
|
|
flash.classList.remove('on');
|
|
void flash.offsetWidth; // reflow trick
|
|
flash.classList.add('on');
|
|
}, 150);
|
|
|
|
setTimeout(() => {
|
|
clearInterval(spinInterval);
|
|
document.body.classList.remove('freak');
|
|
stage.classList.remove('spinning');
|
|
spinning = false;
|
|
}, 4000);
|
|
});
|
|
|
|
function spawnPopup() {
|
|
const p = document.createElement('div');
|
|
p.className = 'popup';
|
|
p.textContent = texts[Math.floor(Math.random() * texts.length)];
|
|
p.style.left = (10 + Math.random() * 80) + "vw";
|
|
p.style.top = (10 + Math.random() * 80) + "vh";
|
|
p.style.color = `hsl(${Math.random()*360},100%,60%)`;
|
|
p.style.setProperty('--dx', (Math.random() * 300 - 150) + "px");
|
|
p.style.setProperty('--dy', (Math.random() * 300 - 150) + "px");
|
|
document.body.appendChild(p);
|
|
setTimeout(() => p.remove(), 1400);
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html> |