В этом году предлагаю тряхнуть стариной и поздравить своих половинок на чистом HTML (ладно, с чуть-чуть CSS и JS), потому что никакая нейронка не заменит качественный человеческий билд 💃
Как использовать:
— Копируем (и редактируем под себя) код ниже и сохраняем как .html файл;
— Или просто закинь его в онлайн-песочницу и отправь ссылку.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<style>
body{background:#000125;margin:0;overflow:hidden;font-family:monospace;display:flex;justify-content:center;align-items:center;height:100vh}
canvas{position:absolute;top:0;left:0;z-index:0;opacity:0.3}
.wrapper{position:relative;display:flex;justify-content:center;align-items:center;z-index:1}
.heart{position:relative;width:100px;height:100px;background:#f04;transform:rotate(-45deg);box-shadow:0 0 40px #f04;animation:b .8s infinite alternate;display:flex;justify-content:center;align-items:center}
.heart::before,.heart::after{content:"";position:absolute;width:100px;height:100px;background:#f04;border-radius:50%}
.heart::before{top:-50px;left:0}.heart::after{top:0;left:50px}
.text-container{
transform:rotate(45deg);
z-index:10;
text-align:center;
color:#fff;
margin-top:-18px;
}
h1{font-size:20px;margin:0;text-shadow:0 0 10px #fff}
.feature{position:absolute;background:rgba(255,0,64,.1);border:3px solid #f04;padding:12px;border-radius:10px;font-size:14px;white-space:nowrap;opacity:0;left:50%;top:50%;transform:translate(-50%,-50%);transition:all .8s cubic-bezier(.17,.88,.32,1.27);color:#fff}
.f1.show{transform:translate(-270px,-130px);opacity:1}
.f2.show{transform:translate(80px,-130px);opacity:1}
.f3.show{transform:translate(-265px,30px);opacity:1}
.f4.show{transform:translate(90px,30px);opacity:1}
.f5.show{transform:translate(-50%,140px);opacity:1;background:#f04;font-weight:700}
.brand{
position:fixed;
bottom:60px;
right:50px;
opacity:0;
transition:1s;
color:#fff;
font-size:20px;
font-weight:bold;
text-shadow: 0 0 15px rgba(255,255,255,0.3);
}
.v{opacity:1!important}
@keyframes b{to{transform:scale(1.1) rotate(-45deg);box-shadow:0 0 70px #f04}}
</style>
</head>
<body>
<canvas id="c"></canvas>
<div class="wrapper">
<div class="heart"><div class="text-container"><h1>ТЫ > ИИ</h1></div></div>
<div class="feature f1">Не галлюцинируешь</div>
<div class="feature f2">Не требуешь токены</div>
<div class="feature f3">Прекрасный UI/UX</div>
<div class="feature f4">Крепкий бэкенд</div>
<div class="feature f5">ЛЮБЛЮ ТЕБЯ!</div>
</div>
<div class="brand" id="b">🔥 CodeCamp</div>
<script>
const c=document.getElementById("c"),ctx=c.getContext("2d");
c.width=window.innerWidth;c.height=window.innerHeight;
const s="01",f=14,cl=c.width/f,d=Array(Math.floor(cl)).fill(1);
function draw(){
ctx.fillStyle="rgba(0,1,37,0.1)";ctx.fillRect(0,0,c.width,c.height);
ctx.fillStyle="#0064ff";ctx.font=f+"px monospace";
d.forEach((y,i)=>{
const t=s[Math.floor(Math.random()*s.length)];
ctx.fillText(t,i*f,y*f);
if(y*f>c.height&&Math.random()>0.975)d[i]=0;d[i]++;
});
}
setInterval(draw,50);
window.onload=()=>{
const f=document.querySelectorAll('.feature'),b=document.getElementById('b');
f.forEach((el,i)=>setTimeout(()=>el.classList.add('show'),1000+i*600));
setTimeout(()=>b.classList.add('v'),3900);
}
</script>
</body>
</html>
И помните: ВЫ > ИИ 😘