scamleikly 1
This commit is contained in:
89
scamleikly/index.html
Normal file
89
scamleikly/index.html
Normal file
@ -0,0 +1,89 @@
|
||||
<!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>
|
Reference in New Issue
Block a user