90 lines
2.3 KiB
HTML
90 lines
2.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
<title>You just got pranked 😂</title>
|
|
<style>
|
|
html,body {
|
|
height:100%;
|
|
margin:0;
|
|
font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
|
|
}
|
|
body {
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
transition:background 800ms ease;
|
|
-webkit-font-smoothing:antialiased;
|
|
text-align:center;
|
|
}
|
|
.card {
|
|
background:rgba(255,255,255,0.18);
|
|
backdrop-filter: blur(10px) saturate(1.2);
|
|
border-radius:20px;
|
|
padding:2rem 3rem;
|
|
box-shadow:0 10px 30px rgba(0,0,0,0.25);
|
|
border:1px solid rgba(255,255,255,0.25);
|
|
}
|
|
h1 {
|
|
margin:0;
|
|
font-size:clamp(2rem,6vw,4rem);
|
|
line-height:1.2;
|
|
color:white;
|
|
text-shadow:0 6px 18px rgba(0,0,0,0.35);
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
gap:0.6rem;
|
|
}
|
|
.emoji {
|
|
font-size:1.2em;
|
|
display:inline-block;
|
|
animation:shake 2500ms infinite linear;
|
|
}
|
|
@keyframes shake {
|
|
0%{transform:rotate(0deg)}
|
|
10%{transform:rotate(12deg)}
|
|
20%{transform:rotate(-8deg)}
|
|
30%{transform:rotate(10deg)}
|
|
40%{transform:rotate(-6deg)}
|
|
50%{transform:rotate(8deg)}
|
|
60%{transform:rotate(-4deg)}
|
|
70%{transform:rotate(6deg)}
|
|
80%{transform:rotate(-2deg)}
|
|
90%{transform:rotate(4deg)}
|
|
100%{transform:rotate(0deg)}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="card">
|
|
<h1>You just got pranked <span class="emoji" aria-hidden="true">😂</span></h1>
|
|
</div>
|
|
|
|
<script>
|
|
const rInt = (min,max)=> Math.floor(Math.random()*(max-min+1))+min;
|
|
|
|
function randHsl(){
|
|
const h = rInt(0,360);
|
|
const s = rInt(60,92);
|
|
const l = rInt(40,60);
|
|
return `hsl(${h} ${s}% ${l}%)`;
|
|
}
|
|
|
|
function makeGradient(stops=3){
|
|
const angle = rInt(0,360) + 'deg';
|
|
const colors = Array.from({length:stops},()=>randHsl());
|
|
return `linear-gradient(${angle}, ${colors.join(', ')})`;
|
|
}
|
|
|
|
function applyGradient(){
|
|
const grad = makeGradient(3);
|
|
document.body.style.background = grad;
|
|
}
|
|
|
|
applyGradient();
|
|
</script>
|
|
</body>
|
|
</html>
|