Initial commit: Valentine landing template
This commit is contained in:
admin
@@ -0,0 +1,4 @@
|
|||||||
|
.DS_Store
|
||||||
|
Thumbs.db
|
||||||
|
*.swp
|
||||||
|
*.tmp
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
# Valentine
|
||||||
|
|
||||||
|
Шаблон-заготовка одностраничной валентинки. Сохранён как пример простой статической страницы для дальнейшей разработки.
|
||||||
|
|
||||||
|
## Содержимое
|
||||||
|
- `index.html` — единственный файл страницы
|
||||||
+150
@@ -0,0 +1,150 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>💝 С Днём Святого Валентина, Александра!</title>
|
||||||
|
<meta property="og:title" content="💝 Для тебя, Александра">
|
||||||
|
<meta property="og:description" content="С Днём Святого Валентина, любовь моя!">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Great+Vibes&display=swap" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
|
||||||
|
:root{--rose:#c2185b;--rose-light:#e91e63;--rose-deep:#880e4f;--gold:#d4a574;--gold-light:#e8c9a0;--cream:#fdf6f0;--blush:#fce4ec;--wine:#4a0e2b}
|
||||||
|
html{scroll-behavior:smooth}
|
||||||
|
body{font-family:'Cormorant Garamond',serif;background:var(--cream);color:var(--wine);overflow-x:hidden;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'><text y='15' font-size='15'>💕</text></svg>") 10 10,auto}
|
||||||
|
.intro-screen{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#2d0a1a 0%,#1a0510 50%,#0d020a 100%);transition:opacity 1.2s ease,transform 1.2s ease}
|
||||||
|
.intro-screen.hidden{opacity:0;transform:scale(1.1);pointer-events:none}
|
||||||
|
.intro-envelope{width:200px;height:150px;position:relative;cursor:pointer;animation:envelopeFloat 3s ease-in-out infinite;transition:transform .5s ease}
|
||||||
|
.intro-envelope:hover{transform:scale(1.1)}
|
||||||
|
.envelope-body{width:100%;height:100%;background:linear-gradient(135deg,#f8e8e0 0%,#f0d0c0 100%);border-radius:8px;position:relative;box-shadow:0 20px 60px rgba(194,24,91,.4),0 0 100px rgba(194,24,91,.2)}
|
||||||
|
.envelope-flap{position:absolute;top:0;left:0;width:100%;height:75px;background:linear-gradient(135deg,#f0d0c0,#e8c0b0);clip-path:polygon(0 0,50% 100%,100% 0);transform-origin:top center;transition:transform .8s ease;z-index:2}
|
||||||
|
.intro-envelope:hover .envelope-flap{transform:rotateX(180deg)}
|
||||||
|
.envelope-heart{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:40px;z-index:1;animation:heartPulse 1.5s ease-in-out infinite}
|
||||||
|
.intro-text{margin-top:40px;font-family:'Great Vibes',cursive;font-size:28px;color:var(--gold-light);opacity:0;animation:fadeInUp 1s ease .5s forwards;text-shadow:0 0 30px rgba(212,165,116,.5)}
|
||||||
|
.intro-hint{margin-top:16px;font-family:'Cormorant Garamond',serif;font-size:14px;color:rgba(255,255,255,.4);letter-spacing:3px;text-transform:uppercase;opacity:0;animation:fadeInUp 1s ease 1s forwards,pulse 2s ease-in-out 2s infinite}
|
||||||
|
.hearts-bg{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
|
||||||
|
.floating-heart{position:absolute;bottom:-50px;opacity:0;animation:floatUp linear forwards;font-size:var(--size);filter:blur(var(--blur,0px))}
|
||||||
|
.main-content{position:relative;z-index:1;opacity:0;transition:opacity 1.5s ease .5s}
|
||||||
|
.main-content.visible{opacity:1}
|
||||||
|
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 20px;position:relative;background:radial-gradient(ellipse at 20% 50%,rgba(252,228,236,.8) 0%,transparent 50%),radial-gradient(ellipse at 80% 50%,rgba(248,187,208,.5) 0%,transparent 50%),radial-gradient(ellipse at 50% 0%,rgba(212,165,116,.15) 0%,transparent 40%),var(--cream)}
|
||||||
|
.hero::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5 C25 0, 15 0, 15 10 C15 20, 30 25, 30 25 C30 25, 45 20, 45 10 C45 0, 35 0, 30 5Z' fill='rgba(194,24,91,0.03)'/%3E%3C/svg%3E");opacity:.5}
|
||||||
|
.hero-date{font-family:'Cormorant Garamond',serif;font-size:14px;letter-spacing:6px;text-transform:uppercase;color:var(--gold);margin-bottom:30px;opacity:0;animation:fadeInUp 1s ease .3s forwards}
|
||||||
|
.hero-for{font-family:'Cormorant Garamond',serif;font-size:18px;letter-spacing:4px;text-transform:uppercase;color:var(--rose);margin-bottom:10px;opacity:0;animation:fadeInUp 1s ease .6s forwards}
|
||||||
|
.hero-name{font-family:'Great Vibes',cursive;font-size:clamp(48px,12vw,120px);color:var(--rose-deep);line-height:1.1;margin-bottom:20px;opacity:0;animation:fadeInUp 1s ease .9s forwards;text-shadow:2px 4px 8px rgba(136,14,79,.15);position:relative}
|
||||||
|
.hero-name::after{content:'♥';position:absolute;font-size:.3em;top:-10px;right:-20px;color:var(--rose-light);animation:heartPulse 2s ease-in-out infinite}
|
||||||
|
.hero-divider{width:120px;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:20px auto;opacity:0;animation:fadeInUp 1s ease 1.2s forwards}
|
||||||
|
.hero-subtitle{font-family:'Cormorant Garamond',serif;font-size:20px;font-style:italic;color:var(--wine);opacity:0;animation:fadeInUp 1s ease 1.4s forwards;font-weight:300}
|
||||||
|
.poem-section{padding:100px 20px;display:flex;justify-content:center;position:relative;background:linear-gradient(180deg,var(--cream) 0%,var(--blush) 50%,var(--cream) 100%)}
|
||||||
|
.poem-section::before{content:'"';position:absolute;top:40px;left:50%;transform:translateX(-50%);font-family:'Playfair Display',serif;font-size:200px;color:rgba(194,24,91,.07);line-height:1}
|
||||||
|
.poem-card{max-width:600px;background:rgba(255,255,255,.7);backdrop-filter:blur(20px);border:1px solid rgba(212,165,116,.3);border-radius:20px;padding:60px 50px;text-align:center;position:relative;box-shadow:0 30px 80px rgba(136,14,79,.08);opacity:0;transform:translateY(40px);transition:all 1s ease}
|
||||||
|
.poem-card.visible{opacity:1;transform:translateY(0)}
|
||||||
|
.poem-card::before,.poem-card::after{content:'✦';position:absolute;font-size:20px;color:var(--gold);opacity:.5}
|
||||||
|
.poem-card::before{top:20px;left:30px}
|
||||||
|
.poem-card::after{bottom:20px;right:30px}
|
||||||
|
.poem-title{font-family:'Great Vibes',cursive;font-size:36px;color:var(--rose);margin-bottom:30px}
|
||||||
|
.poem-text{font-family:'Cormorant Garamond',serif;font-size:20px;line-height:2;color:var(--wine);font-weight:400;font-style:italic}
|
||||||
|
.poem-text .line{display:block;opacity:0;transform:translateY(10px);transition:all .6s ease}
|
||||||
|
.poem-text .line.visible{opacity:1;transform:translateY(0)}
|
||||||
|
.reasons-section{padding:80px 20px;max-width:800px;margin:0 auto}
|
||||||
|
.reasons-title{font-family:'Great Vibes',cursive;font-size:42px;color:var(--rose-deep);text-align:center;margin-bottom:50px}
|
||||||
|
.reason-item{display:flex;align-items:flex-start;gap:20px;margin-bottom:30px;padding:25px 30px;background:rgba(255,255,255,.6);backdrop-filter:blur(10px);border-radius:16px;border-left:3px solid var(--rose-light);opacity:0;transform:translateX(-30px);transition:all .7s ease}
|
||||||
|
.reason-item.visible{opacity:1;transform:translateX(0)}
|
||||||
|
.reason-item:nth-child(even){transform:translateX(30px);border-left:none;border-right:3px solid var(--gold)}
|
||||||
|
.reason-item:nth-child(even).visible{transform:translateX(0)}
|
||||||
|
.reason-number{font-family:'Playfair Display',serif;font-size:36px;font-weight:700;color:var(--rose-light);opacity:.4;line-height:1;min-width:40px}
|
||||||
|
.reason-text{font-family:'Cormorant Garamond',serif;font-size:19px;line-height:1.6;color:var(--wine)}
|
||||||
|
.heart-section{padding:80px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:80vh;background:radial-gradient(ellipse at center,var(--blush) 0%,var(--cream) 70%);position:relative}
|
||||||
|
.big-heart{width:300px;height:300px;position:relative;cursor:pointer;animation:heartPulse 2s ease-in-out infinite;transition:transform .3s ease;filter:drop-shadow(0 20px 40px rgba(194,24,91,.3))}
|
||||||
|
.big-heart:hover{transform:scale(1.1)}
|
||||||
|
.big-heart svg{width:100%;height:100%}
|
||||||
|
.heart-message{margin-top:40px;font-family:'Great Vibes',cursive;font-size:32px;color:var(--rose-deep);text-align:center;opacity:0;transform:translateY(20px);transition:all 1s ease}
|
||||||
|
.heart-message.visible{opacity:1;transform:translateY(0)}
|
||||||
|
.final-section{padding:100px 20px;text-align:center;background:linear-gradient(180deg,var(--cream) 0%,#2d0a1a 100%);min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center}
|
||||||
|
.final-text{font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--wine);max-width:500px;line-height:1.8;margin-bottom:40px;opacity:0;transform:translateY(20px);transition:all 1s ease}
|
||||||
|
.final-text.visible{opacity:1;transform:translateY(0)}
|
||||||
|
.final-signature{font-family:'Great Vibes',cursive;font-size:48px;color:var(--gold-light);opacity:0;transition:all 1s ease .5s}
|
||||||
|
.final-signature.visible{opacity:1}
|
||||||
|
.final-date{margin-top:20px;font-family:'Cormorant Garamond',serif;font-size:14px;letter-spacing:4px;color:rgba(255,255,255,.3);opacity:0;transition:all 1s ease 1s}
|
||||||
|
.final-date.visible{opacity:1}
|
||||||
|
.sparkle{position:fixed;pointer-events:none;z-index:9999;font-size:20px;animation:sparkleAnim 1s ease forwards}
|
||||||
|
.music-toggle{position:fixed;bottom:20px;right:20px;z-index:100;width:50px;height:50px;border-radius:50%;border:2px solid var(--rose-light);background:rgba(255,255,255,.9);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:20px;transition:all .3s ease;box-shadow:0 4px 15px rgba(194,24,91,.2)}
|
||||||
|
.music-toggle:hover{transform:scale(1.1);background:var(--blush)}
|
||||||
|
@keyframes envelopeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}
|
||||||
|
@keyframes heartPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
|
||||||
|
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
|
||||||
|
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:.8}}
|
||||||
|
@keyframes floatUp{0%{transform:translateY(0) rotate(0deg) scale(1);opacity:0}10%{opacity:var(--opacity,.6)}90%{opacity:var(--opacity,.6)}100%{transform:translateY(-110vh) rotate(var(--rotation,360deg)) scale(var(--endScale,.5));opacity:0}}
|
||||||
|
@keyframes sparkleAnim{0%{transform:translate(-50%,-50%) scale(0) rotate(0deg);opacity:1}100%{transform:translate(-50%,-50%) scale(1.5) rotate(180deg);opacity:0}}
|
||||||
|
@media(max-width:600px){.poem-card{padding:40px 25px}.poem-text{font-size:17px}.reason-item{padding:20px;flex-direction:column;gap:10px}.big-heart{width:200px;height:200px}.hero-name{font-size:clamp(40px,15vw,80px)}}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="intro-screen" id="intro">
|
||||||
|
<div class="intro-envelope" id="envelope" onclick="openValentine()">
|
||||||
|
<div class="envelope-flap"></div>
|
||||||
|
<div class="envelope-body"></div>
|
||||||
|
<div class="envelope-heart">💌</div>
|
||||||
|
</div>
|
||||||
|
<div class="intro-text">У тебя письмо...</div>
|
||||||
|
<div class="intro-hint">нажми на конверт</div>
|
||||||
|
</div>
|
||||||
|
<div class="hearts-bg" id="heartsBg"></div>
|
||||||
|
<div class="main-content" id="mainContent">
|
||||||
|
<section class="hero">
|
||||||
|
<div class="hero-date">14 февраля 2026</div>
|
||||||
|
<div class="hero-for">Моей единственной</div>
|
||||||
|
<h1 class="hero-name">Александре</h1>
|
||||||
|
<div class="hero-divider"></div>
|
||||||
|
<div class="hero-subtitle">С Днём Святого Валентина, любовь моя</div>
|
||||||
|
</section>
|
||||||
|
<section class="poem-section">
|
||||||
|
<div class="poem-card" id="poemCard">
|
||||||
|
<div class="poem-title">Для тебя</div>
|
||||||
|
<div class="poem-text">
|
||||||
|
<span class="line">Ты — мой рассвет и мой закат,</span>
|
||||||
|
<span class="line">Мой самый ценный в жизни клад.</span>
|
||||||
|
<span class="line">С тобой я — дома, ты — мой свет,</span>
|
||||||
|
<span class="line">Теплей тебя на свете нет.</span>
|
||||||
|
<span class="line"> </span>
|
||||||
|
<span class="line">Ты — смех, что лечит от невзгод,</span>
|
||||||
|
<span class="line">Ты — сила, что меня ведёт.</span>
|
||||||
|
<span class="line">И в этот день скажу одно:</span>
|
||||||
|
<span class="line">Любить тебя — мне суждено. ♥</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="reasons-section">
|
||||||
|
<div class="reasons-title">За что я тебя люблю</div>
|
||||||
|
<div class="reason-item" data-scroll><span class="reason-number">01</span><span class="reason-text">За твою улыбку, которая делает любой день лучше — даже самый тяжёлый понедельник</span></div>
|
||||||
|
<div class="reason-item" data-scroll><span class="reason-number">02</span><span class="reason-text">За то, что ты веришь в меня, даже когда я сам в себе сомневаюсь</span></div>
|
||||||
|
<div class="reason-item" data-scroll><span class="reason-number">03</span><span class="reason-text">За тепло твоих рук и доброту твоего сердца</span></div>
|
||||||
|
<div class="reason-item" data-scroll><span class="reason-number">04</span><span class="reason-text">За то, что рядом с тобой я становлюсь лучшей версией себя</span></div>
|
||||||
|
<div class="reason-item" data-scroll><span class="reason-number">05</span><span class="reason-text">За каждое утро, в которое я просыпаюсь рядом с тобой — это лучшее, что есть в моей жизни</span></div>
|
||||||
|
</section>
|
||||||
|
<section class="heart-section">
|
||||||
|
<div class="big-heart" id="bigHeart" onclick="heartClick()">
|
||||||
|
<svg viewBox="0 0 200 200"><defs><linearGradient id="heartGrad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:#e91e63"/><stop offset="50%" style="stop-color:#c2185b"/><stop offset="100%" style="stop-color:#880e4f"/></linearGradient><filter id="glow"><feGaussianBlur stdDeviation="3" result="blur"/><feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><path d="M100 180 C60 140,0 100,0 60 C0 20,30 0,55 0 C75 0,90 15,100 30 C110 15,125 0,145 0 C170 0,200 20,200 60 C200 100,140 140,100 180Z" fill="url(#heartGrad)" filter="url(#glow)"/><text x="100" y="105" text-anchor="middle" font-family="Great Vibes,cursive" font-size="28" fill="white" opacity=".9">Люблю</text></svg>
|
||||||
|
</div>
|
||||||
|
<div class="heart-message" id="heartMsg">Нажми на сердце 💕</div>
|
||||||
|
</section>
|
||||||
|
<section class="final-section">
|
||||||
|
<div class="final-text" id="finalText">Ты — лучшее, что случилось в моей жизни.<br>Каждый день с тобой — это подарок.<br><br>Я люблю тебя больше, чем слова могут передать,<br>но я буду стараться показывать это<br>каждый день. ♥</div>
|
||||||
|
<div class="final-signature" id="finalSig">Навсегда твой ♾️</div>
|
||||||
|
<div class="final-date" id="finalDate">14 • 02 • 2026</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<div class="music-toggle" id="musicBtn" onclick="toggleMusic()" title="Включить музыку">🎵</div>
|
||||||
|
<script>
|
||||||
|
function openValentine(){const i=document.getElementById('intro'),m=document.getElementById('mainContent');i.classList.add('hidden');setTimeout(()=>{m.classList.add('visible');startFloatingHearts();i.style.display='none'},600)}
|
||||||
|
function startFloatingHearts(){const c=document.getElementById('heartsBg'),h=['♥','♡','❤','💕','💗','✦','♥'];function create(){const e=document.createElement('div');e.className='floating-heart';e.textContent=h[Math.floor(Math.random()*h.length)];const s=10+Math.random()*30,l=Math.random()*100,d=8+Math.random()*12,b=Math.random()>.6?Math.random()*2:0,o=.15+Math.random()*.35,r=-180+Math.random()*360;e.style.cssText=`--size:${s}px;--blur:${b}px;--opacity:${o};--rotation:${r}deg;--endScale:${.3+Math.random()*.7};left:${l}%;font-size:${s}px;color:${Math.random()>.5?'var(--rose-light)':'var(--gold)'};animation-duration:${d}s;animation-delay:0s;`;c.appendChild(e);setTimeout(()=>e.remove(),d*1000)}setInterval(create,800);for(let i=0;i<8;i++)setTimeout(create,i*300)}
|
||||||
|
const obs=new IntersectionObserver(e=>{e.forEach(en=>{if(en.isIntersecting){en.target.classList.add('visible');if(en.target.id==='poemCard'){en.target.querySelectorAll('.line').forEach((l,i)=>{setTimeout(()=>l.classList.add('visible'),i*200)})}}})},{threshold:.2});
|
||||||
|
document.querySelectorAll('.poem-card,.reason-item,.heart-message,.final-text,.final-signature,.final-date').forEach(el=>obs.observe(el));
|
||||||
|
let hc=0;const msgs=['Люблю тебя! 💕','Ты — моё всё! 💖','Навсегда вместе! 💗','Ты лучшая! 🌹','Моё сердце — твоё! ♥','Обнимаю крепко! 🤗','Целую нежно! 💋','Ты — моё счастье! ✨','Я так тебя люблю! 💝','Ты — мой мир! 🌍'];
|
||||||
|
function heartClick(){hc++;const m=document.getElementById('heartMsg');m.textContent=msgs[hc%msgs.length];m.classList.add('visible');for(let i=0;i<12;i++){setTimeout(()=>{const h=document.createElement('div');h.className='sparkle';h.textContent=['♥','💕','✨','💗','💖','🌹'][Math.floor(Math.random()*6)];const r=document.getElementById('bigHeart').getBoundingClientRect(),cx=r.left+r.width/2,cy=r.top+r.height/2,a=(Math.PI*2*i)/12,d=80+Math.random()*100;h.style.left=(cx+Math.cos(a)*d)+'px';h.style.top=(cy+Math.sin(a)*d)+'px';h.style.fontSize=(16+Math.random()*20)+'px';document.body.appendChild(h);setTimeout(()=>h.remove(),1000)},i*50)}}
|
||||||
|
document.addEventListener('click',e=>{if(e.target.closest('.intro-envelope')||e.target.closest('.big-heart')||e.target.closest('.music-toggle'))return;const sp=['✨','💕','♥','✦'];for(let i=0;i<3;i++){const s=document.createElement('div');s.className='sparkle';s.textContent=sp[Math.floor(Math.random()*sp.length)];s.style.left=(e.clientX+(Math.random()-.5)*40)+'px';s.style.top=(e.clientY+(Math.random()-.5)*40)+'px';document.body.appendChild(s);setTimeout(()=>s.remove(),1000)}});
|
||||||
|
let ac=null,mp=false,mi=null;
|
||||||
|
function toggleMusic(){const b=document.getElementById('musicBtn');if(!mp){ac=new(window.AudioContext||window.webkitAudioContext)();playMelody();b.textContent='🔇';b.title='Выключить музыку';mp=true}else{if(mi)clearInterval(mi);if(ac)ac.close();b.textContent='🎵';b.title='Включить музыку';mp=false}}
|
||||||
|
function playMelody(){const m=[{f:523.25,d:.4},{f:587.33,d:.4},{f:659.25,d:.6},{f:587.33,d:.3},{f:523.25,d:.6},{f:493.88,d:.4},{f:523.25,d:.8},{f:0,d:.3},{f:659.25,d:.4},{f:698.46,d:.4},{f:783.99,d:.6},{f:698.46,d:.3},{f:659.25,d:.6},{f:587.33,d:.4},{f:523.25,d:.8}];let t=ac.currentTime+.1;function play(){t=ac.currentTime+.1;m.forEach(n=>{if(n.f>0){const o=ac.createOscillator(),g=ac.createGain();o.type='sine';o.frequency.value=n.f;g.gain.setValueAtTime(0,t);g.gain.linearRampToValueAtTime(.08,t+.05);g.gain.exponentialRampToValueAtTime(.001,t+n.d);o.connect(g);g.connect(ac.destination);o.start(t);o.stop(t+n.d+.1)}t+=n.d})}play();const td=m.reduce((s,n)=>s+n.d,0);mi=setInterval(play,td*1000+500)}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user