Добавить index.html
This commit is contained in:
parent
f904d9fa4c
commit
2ed4d53345
1 changed files with 223 additions and 0 deletions
223
index.html
Normal file
223
index.html
Normal file
|
|
@ -0,0 +1,223 @@
|
|||
<!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>
|
||||
Loading…
Reference in a new issue