me/fymio.us
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

upd

Browse Source
This commit is contained in:
Doschennikov Nikita
2026-01-05 23:01:09 +03:00
parent 9880d0ce93
commit 0feade8cfd
2 changed files with 1513 additions and 594 deletions
Download Patch File Download Diff File Expand all files Collapse all files

716
congrats/archive/index_new.html Normal file
View File

@@ -0,0 +1,716 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Машулечка, С Днем Рождения! 💜</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
min-height: 100vh;
overflow-x: hidden;
color: #fff;
position: relative;
}
/* Dynamic animated background */
.background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
background: linear-gradient(
135deg,
#667eea 0%,
#764ba2 50%,
#f093fb 100%
);
background-size: 400% 400%;
animation: gradientShift 15s ease infinite;
}
@keyframes gradientShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.background::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(
circle at 20% 50%,
rgba(224, 195, 252, 0.3) 0%,
transparent 50%
),
radial-gradient(
circle at 80% 80%,
rgba(167, 139, 250, 0.3) 0%,
transparent 50%
),
radial-gradient(
circle at 40% 20%,
rgba(196, 181, 253, 0.2) 0%,
transparent 50%
);
animation: pulse 8s ease-in-out infinite;
}
@keyframes pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.6;
}
}
/* Parallax layers */
.parallax-container {
position: relative;
z-index: 1;
}
.stars {
position: fixed;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.star {
position: absolute;
width: 2px;
height: 2px;
background: white;
border-radius: 50%;
animation: twinkle 3s infinite;
}
@keyframes twinkle {
0%,
100% {
opacity: 0.3;
}
50% {
opacity: 1;
}
}
.hearts {
position: fixed;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 3;
top: 0;
left: 0;
}
.heart {
position: absolute;
font-size: 2rem;
animation: floatUp 6s ease-in infinite;
opacity: 0;
}
@keyframes floatUp {
0% {
opacity: 0;
transform: translateY(0) rotate(0deg);
}
10% {
opacity: 0.8;
}
90% {
opacity: 0.8;
}
100% {
opacity: 0;
transform: translateY(-100vh) rotate(360deg);
}
}
.container {
position: relative;
z-index: 2;
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px;
}
.hero {
text-align: center;
margin-bottom: 60px;
animation: fadeInDown 1s ease-out;
min-height: 80vh;
display: flex;
flex-direction: column;
justify-content: center;
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.hero h1 {
font-size: 4rem;
font-weight: 700;
margin-bottom: 20px;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
background: linear-gradient(45deg, #fff, #e0c3fc);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero .age {
font-size: 6rem;
font-weight: 900;
display: inline-block;
animation: bounceIn 1.5s ease-out;
text-shadow: 0 4px 30px rgba(224, 195, 252, 0.6);
}
@keyframes bounceIn {
0% {
transform: scale(0);
opacity: 0;
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
opacity: 1;
}
}
.hero p {
font-size: 1.5rem;
margin-top: 20px;
opacity: 0.95;
}
/* Glassmorphism cards */
.glass-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 25px;
padding: 40px;
margin-bottom: 50px;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
border: 1px solid rgba(255, 255, 255, 0.2);
animation: fadeInUp 1s ease-out both;
position: relative;
overflow: hidden;
}
.glass-card::before {
content: "";
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
45deg,
transparent,
rgba(255, 255, 255, 0.1),
transparent
);
transform: rotate(45deg);
animation: shimmer 3s infinite;
}
@keyframes shimmer {
0% {
transform: translateX(-100%) translateY(-100%) rotate(45deg);
}
100% {
transform: translateX(100%) translateY(100%) rotate(45deg);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.glass-card h2 {
font-size: 2rem;
margin-bottom: 20px;
color: #e0c3fc;
position: relative;
z-index: 1;
}
.glass-card p {
font-size: 1.2rem;
line-height: 1.8;
margin-bottom: 15px;
position: relative;
z-index: 1;
}
.photo-gallery {
margin-top: 50px;
}
.photo-gallery h2 {
text-align: center;
font-size: 2.5rem;
margin-bottom: 40px;
animation: fadeInUp 1s ease-out both;
}
.photo-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
animation: fadeInUp 1s ease-out both;
}
.photo-item {
position: relative;
aspect-ratio: 1;
border-radius: 20px;
overflow: hidden;
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
cursor: pointer;
}
.photo-item::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
135deg,
rgba(224, 195, 252, 0.2),
rgba(167, 139, 250, 0.2)
);
z-index: 0;
}
.photo-item:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 15px 40px rgba(224, 195, 252, 0.4);
}
.photo-placeholder {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 3rem;
color: rgba(255, 255, 255, 0.6);
position: relative;
z-index: 1;
}
.photo-placeholder span {
font-size: 1rem;
margin-top: 10px;
}
.photo-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.photo-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
padding: 20px;
transform: translateY(100%);
transition: transform 0.3s ease;
z-index: 2;
}
.photo-item:hover .photo-caption {
transform: translateY(0);
}
.footer {
text-align: center;
margin-top: 80px;
padding: 40px 20px;
font-size: 1.2rem;
animation: fadeIn 2s ease-out 2s both;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Parallax decorative elements */
.parallax-element {
position: fixed;
pointer-events: none;
z-index: 2;
}
.circle-1 {
width: 300px;
height: 300px;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(224, 195, 252, 0.3),
transparent
);
top: 10%;
left: -10%;
filter: blur(40px);
}
.circle-2 {
width: 400px;
height: 400px;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(167, 139, 250, 0.3),
transparent
);
bottom: 20%;
right: -10%;
filter: blur(50px);
}
.circle-3 {
width: 250px;
height: 250px;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(196, 181, 253, 0.4),
transparent
);
top: 50%;
left: 50%;
filter: blur(30px);
}
@media (max-width: 768px) {
.hero h1 {
font-size: 2.5rem;
}
.hero .age {
font-size: 4rem;
}
.hero p {
font-size: 1.2rem;
}
.glass-card {
padding: 25px;
}
.photo-grid {
grid-template-columns: 1fr;
}
.circle-1,
.circle-2,
.circle-3 {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
</style>
</head>
<body>
<div class="background"></div>
<div class="parallax-element circle-1"></div>
<div class="parallax-element circle-2"></div>
<div class="parallax-element circle-3"></div>
<div class="stars" id="stars"></div>
<div class="hearts" id="hearts"></div>
<div class="parallax-container">
<div class="container">
<div class="hero">
<h1>Happy Birthday!</h1>
<div class="age">20</div>
<p>Машуленок, я тебя сильно сильно люблю❤️❤️❤️</p>
</div>
<div class="glass-card" style="animation-delay: 0.3s">
<h2>Ты самая лучшая на свете 💜</h2>
<p>Машуля, ты уже старая и опять меня обогнала 😮😮😮</p>
<p>
Тебе 20 годиков стало и получается третий десяточек
хихихихиха Машулечка, ты каждый день делаешь мою жизнь
лучше и не только мою но и всех вокруг. (ты потом сама
расставишь тут запятые везде). Из всех девочек которые
родилось в лесном в 2006 году мне повезло встретить тебя
в первом классе. я уже тогда конечно знал что у нас там
будет секс (через е, а не через э). ты самая добрая,
самая умная, самая красивая на свете (типа в мире). ты
всегда мне помогала в плохих ситуациях. благодаря тебе я
счастлив.
</p>
<p>
я вот никогда не писал вот эти все штуки типа вот эти
письма, но я думаю ты меня научишь потом. писать код у
меня получается лучше. я надеюсь сто в этом году ты
обновишь свой вишлист а то мы все тебе оттуда подарили и
что мы посмотрим еще больше твоих фильмов или сериалов,
потому что мои мы не смотрим
</p>
<p>
я хочу съесть шоколадку, которую тебе мама положила, но
я боюсь, что она увидит. я пока не знаю, что тут еще
надо написать. я не буду спрашивать у гпт. я сам тут
написал.
</p>
<p>
Ниже Вы можете увидеть фотоматериалы, произведенные в
течение 2025 года.
</p>
</div>
<div class="photo-gallery">
<h2>Вот тут я фоточки вставил типа ойойоойой</h2>
<div class="photo-grid">
<div class="photo-item">
<img src="1.jpg" />
</div>
<div class="photo-item">
<img src="2.jpg" />
</div>
<div class="photo-item">
<img src="3.jpg" />
</div>
<div class="photo-item">
<img src="4.jpg" />
</div>
<div class="photo-item">
<img src="5.jpg" />
</div>
<div class="photo-item">
<img src="6.jpg" />
</div>
<div class="photo-item">
<img src="7.jpg" />
</div>
<div class="photo-item">
<img src="8.jpg" />
</div>
<div class="photo-item">
<img src="9.jpg" />
</div>
<div class="photo-item">
<img src="10.jpg" />
</div>
<div class="photo-item">
<img src="11.jpg" />
</div>
<div class="photo-item">
<img src="12.jpg" />
</div>
<div class="photo-item">
<img src="13.jpg" />
</div>
<div class="photo-item">
<img src="14.jpg" />
</div>
<div class="photo-item">
<img src="15.jpg" />
</div>
<div class="photo-item">
<img src="16.jpg" />
</div>
<div class="photo-item">
<img src="17.jpg" />
</div>
<div class="photo-item">
<img src="18.jpg" />
</div>
</div>
</div>
<div class="footer">
<p>я тебя сильнее люблю 💜</p>
</div>
</div>
</div>
<script>
// Create stars
const starsContainer = document.getElementById("stars");
for (let i = 0; i < 100; i++) {
const star = document.createElement("div");
star.className = "star";
star.style.left = Math.random() * 100 + "%";
star.style.top = Math.random() * 100 + "%";
star.style.animationDelay = Math.random() * 3 + "s";
starsContainer.appendChild(star);
}
// Create floating hearts
const heartsContainer = document.getElementById("hearts");
function createHeart() {
const heart = document.createElement("div");
heart.className = "heart";
heart.innerHTML = "💜";
heart.style.left = Math.random() * 100 + "%";
heart.style.animationDuration = Math.random() * 3 + 4 + "s";
heartsContainer.appendChild(heart);
setTimeout(() => {
heart.remove();
}, 6000);
}
setInterval(createHeart, 800);
// Parallax effect
document.addEventListener("mousemove", (e) => {
const mouseX = e.clientX / window.innerWidth;
const mouseY = e.clientY / window.innerHeight;
// Move stars slower
const stars = document.querySelectorAll(".star");
stars.forEach((star, index) => {
const speed = ((index % 3) + 1) * 0.5;
const x = (mouseX - 0.5) * speed * 20;
const y = (mouseY - 0.5) * speed * 20;
star.style.transform = `translate(${x}px, ${y}px)`;
});
// Move circles with parallax
const circles = document.querySelectorAll(".parallax-element");
circles.forEach((circle, index) => {
const speed = (index + 1) * 10;
const x = (mouseX - 0.5) * speed;
const y = (mouseY - 0.5) * speed;
circle.style.transform = `translate(${x}px, ${y}px)`;
});
});
// Scroll-based parallax
let ticking = false;
document.addEventListener("scroll", () => {
if (!ticking) {
window.requestAnimationFrame(() => {
const scrolled = window.pageYOffset;
// Parallax for hero section
const hero = document.querySelector(".hero");
if (hero) {
hero.style.transform = `translateY(${scrolled * 0.5}px)`;
hero.style.opacity = Math.max(
1 - scrolled / 500,
0,
);
}
// Parallax for circles
const circle1 = document.querySelector(".circle-1");
const circle2 = document.querySelector(".circle-2");
const circle3 = document.querySelector(".circle-3");
if (circle1)
circle1.style.transform = `translateY(${scrolled * 0.3}px)`;
if (circle2)
circle2.style.transform = `translateY(${scrolled * -0.2}px)`;
if (circle3)
circle3.style.transform = `translateY(${scrolled * 0.4}px)`;
ticking = false;
});
ticking = true;
}
});
// Animate cards on scroll
const observerOptions = {
threshold: 0.1,
rootMargin: "0px 0px -100px 0px",
};
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.style.opacity = "1";
entry.target.style.transform = "translateY(0)";
}
});
}, observerOptions);
document
.querySelectorAll(".glass-card, .photo-item")
.forEach((el) => {
observer.observe(el);
});
</script>
</body>
</html>

389
congrats/index.html
View File

@@ -1,8 +1,8 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Машулечка, С Днем Рождения! 💜</title> <title>Машулечка, С Днем Рождения! 💜</title>
<style> <style>
* { * {
@@ -12,7 +12,7 @@
} }
body { body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
min-height: 100vh; min-height: 100vh;
overflow-x: hidden; overflow-x: hidden;
color: #fff; color: #fff;
@@ -27,7 +27,12 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 0; z-index: 0;
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); background: linear-gradient(
135deg,
#667eea 0%,
#764ba2 50%,
#f093fb 100%
);
background-size: 400% 400%; background-size: 400% 400%;
animation: gradientShift 15s ease infinite; animation: gradientShift 15s ease infinite;
} }
@@ -45,20 +50,34 @@
} }
.background::before { .background::before {
content: ''; content: "";
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: radial-gradient(circle at 20% 50%, rgba(224, 195, 252, 0.3) 0%, transparent 50%), background:
radial-gradient(circle at 80% 80%, rgba(167, 139, 250, 0.3) 0%, transparent 50%), radial-gradient(
radial-gradient(circle at 40% 20%, rgba(196, 181, 253, 0.2) 0%, transparent 50%); circle at 20% 50%,
rgba(224, 195, 252, 0.3) 0%,
transparent 50%
),
radial-gradient(
circle at 80% 80%,
rgba(167, 139, 250, 0.3) 0%,
transparent 50%
),
radial-gradient(
circle at 40% 20%,
rgba(196, 181, 253, 0.2) 0%,
transparent 50%
);
animation: pulse 8s ease-in-out infinite; animation: pulse 8s ease-in-out infinite;
} }
@keyframes pulse { @keyframes pulse {
0%, 100% { 0%,
100% {
opacity: 1; opacity: 1;
} }
50% { 50% {
@@ -90,8 +109,13 @@
} }
@keyframes twinkle { @keyframes twinkle {
0%, 100% { opacity: 0.3; } 0%,
50% { opacity: 1; } 100% {
opacity: 0.3;
}
50% {
opacity: 1;
}
} }
.hearts { .hearts {
@@ -161,7 +185,7 @@
font-size: 4rem; font-size: 4rem;
font-weight: 700; font-weight: 700;
margin-bottom: 20px; margin-bottom: 20px;
text-shadow: 0 4px 20px rgba(0,0,0,0.3); text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
background: linear-gradient(45deg, #fff, #e0c3fc); background: linear-gradient(45deg, #fff, #e0c3fc);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
@@ -204,7 +228,8 @@
border-radius: 25px; border-radius: 25px;
padding: 40px; padding: 40px;
margin-bottom: 50px; margin-bottom: 50px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), box-shadow:
0 8px 32px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.3); inset 0 1px 0 rgba(255, 255, 255, 0.3);
border: 1px solid rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.2);
animation: fadeInUp 1s ease-out both; animation: fadeInUp 1s ease-out both;
@@ -213,7 +238,7 @@
} }
.glass-card::before { .glass-card::before {
content: ''; content: "";
position: absolute; position: absolute;
top: -50%; top: -50%;
left: -50%; left: -50%;
@@ -288,22 +313,28 @@
aspect-ratio: 1; aspect-ratio: 1;
border-radius: 20px; border-radius: 20px;
overflow: hidden; overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease; transition:
transform 0.3s ease,
box-shadow 0.3s ease;
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 10px 30px rgba(0,0,0,0.3); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
cursor: pointer; cursor: pointer;
} }
.photo-item::before { .photo-item::before {
content: ''; content: "";
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background: linear-gradient(135deg, rgba(224, 195, 252, 0.2), rgba(167, 139, 250, 0.2)); background: linear-gradient(
135deg,
rgba(224, 195, 252, 0.2),
rgba(167, 139, 250, 0.2)
);
z-index: 0; z-index: 0;
} }
@@ -320,7 +351,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 3rem; font-size: 3rem;
color: rgba(255,255,255,0.6); color: rgba(255, 255, 255, 0.6);
position: relative; position: relative;
z-index: 1; z-index: 1;
} }
@@ -341,7 +372,7 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
background: linear-gradient(transparent, rgba(0,0,0,0.8)); background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
padding: 20px; padding: 20px;
transform: translateY(100%); transform: translateY(100%);
transition: transform 0.3s ease; transition: transform 0.3s ease;
@@ -361,8 +392,12 @@
} }
@keyframes fadeIn { @keyframes fadeIn {
from { opacity: 0; } from {
to { opacity: 1; } opacity: 0;
}
to {
opacity: 1;
}
} }
/* Parallax decorative elements */ /* Parallax decorative elements */
@@ -376,7 +411,11 @@
width: 300px; width: 300px;
height: 300px; height: 300px;
border-radius: 50%; border-radius: 50%;
background: radial-gradient(circle, rgba(224, 195, 252, 0.3), transparent); background: radial-gradient(
circle,
rgba(224, 195, 252, 0.3),
transparent
);
top: 10%; top: 10%;
left: -10%; left: -10%;
filter: blur(40px); filter: blur(40px);
@@ -386,7 +425,11 @@
width: 400px; width: 400px;
height: 400px; height: 400px;
border-radius: 50%; border-radius: 50%;
background: radial-gradient(circle, rgba(167, 139, 250, 0.3), transparent); background: radial-gradient(
circle,
rgba(167, 139, 250, 0.3),
transparent
);
bottom: 20%; bottom: 20%;
right: -10%; right: -10%;
filter: blur(50px); filter: blur(50px);
@@ -396,19 +439,37 @@
width: 250px; width: 250px;
height: 250px; height: 250px;
border-radius: 50%; border-radius: 50%;
background: radial-gradient(circle, rgba(196, 181, 253, 0.4), transparent); background: radial-gradient(
circle,
rgba(196, 181, 253, 0.4),
transparent
);
top: 50%; top: 50%;
left: 50%; left: 50%;
filter: blur(30px); filter: blur(30px);
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.hero h1 { font-size: 2.5rem; } .hero h1 {
.hero .age { font-size: 4rem; } font-size: 2.5rem;
.hero p { font-size: 1.2rem; } }
.glass-card { padding: 25px; } .hero .age {
.photo-grid { grid-template-columns: 1fr; } font-size: 4rem;
.circle-1, .circle-2, .circle-3 { display: none; } }
.hero p {
font-size: 1.2rem;
}
.glass-card {
padding: 25px;
}
.photo-grid {
grid-template-columns: 1fr;
}
.circle-1,
.circle-2,
.circle-3 {
display: none;
}
} }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
@@ -419,8 +480,91 @@
} }
} }
</style> </style>
</head> </head>
<body> <body>
<!-- Password Protection Overlay -->
<div
id="passwordOverlay"
style="
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
"
>
<div
style="
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(20px);
border-radius: 25px;
padding: 40px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.2);
text-align: center;
max-width: 400px;
"
>
<h2
style="color: #e0c3fc; margin-bottom: 20px; font-size: 2rem"
>
🔒 секртетик
</h2>
<p style="margin-bottom: 30px; font-size: 1.1rem">
последний закреп в лс тг
</p>
<input
type="password"
id="passwordInput"
placeholder="Password"
style="
width: 100%;
padding: 15px;
border-radius: 10px;
border: 2px solid rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.1);
color: white;
font-size: 1rem;
margin-bottom: 20px;
outline: none;
"
/>
<button
onclick="checkPassword()"
style="
width: 100%;
padding: 15px;
border-radius: 10px;
border: none;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
font-size: 1.1rem;
cursor: pointer;
font-weight: 600;
transition: transform 0.2s;
"
>
Enter
</button>
<p
id="errorMsg"
style="
color: #ff6b6b;
margin-top: 15px;
font-size: 0.9rem;
display: none;
"
>
неправильно
</p>
</div>
</div>
<div class="background"></div> <div class="background"></div>
<div class="parallax-element circle-1"></div> <div class="parallax-element circle-1"></div>
@@ -430,80 +574,105 @@
<div class="stars" id="stars"></div> <div class="stars" id="stars"></div>
<div class="hearts" id="hearts"></div> <div class="hearts" id="hearts"></div>
<div class="parallax-container"> <div class="parallax-container" style="filter: blur(10px)">
<div class="container"> <div class="container">
<div class="hero"> <div class="hero">
<h1>Happy Birthday!</h1> <h1>С ДНЕМ РОЖДЕНИЯ</h1>
<div class="age">20</div> <div class="age">20</div>
<p>Машуленок, я тебя сильно сильно люблю❤️❤️❤️</p> <p>Машуленок, я тебя сильно сильно люблю❤️❤️❤️</p>
</div> </div>
<div class="glass-card" style="animation-delay: 0.3s;"> <div class="glass-card" style="animation-delay: 0.3s">
<h2>Ты самая лучшая на свете 💜</h2> <h2>Ты самая лучшая на свете 💜</h2>
<p>Машуля, ты уже старая и опять меня обогнала 😮😮😮</p> <p>Машуля, ты уже старая и опять меня обогнала 😮😮😮</p>
<p>Тебе 20 годиков стало и получается третий десяточек хихихихиха Машулечка, ты каждый день делаешь мою жизнь лучше и не только мою но и всех вокруг. (ты потом сама расставишь тут запятые везде). Из всех девочек которые родилось в лесном в 2006 году мне повезло встретить тебя в первом классе. я уже тогда конечно знал что у нас там будет секс (через е, а не через э). ты самая добрая, самая умная, самая красивая на свете (типа в мире). ты всегда мне помогала в плохих ситуациях. благодаря тебе я счастлив.</p> <p>
<p>я вот никогда не писал вот эти все штуки типа вот эти письма, но я думаю ты меня научишь потом. писать код у меня получается лучше. я надеюсь сто в этом году ты обновишь свой вишлист а то мы все тебе оттуда подарили и что мы посмотрим еще больше твоих фильмов или сериалов, потому что мои мы не смотрим</p> Тебе 20 годиков стало и получается третий десяточек
<p>я хочу съесть шоколадку, которую тебе мама положила, но я боюсь, что она увидит. я пока не знаю, что тут еще надо написать. я не буду спрашивать у гпт. я сам тут написал.</p> хихихихиха Машулечка, ты каждый день делаешь мою жизнь
лучше и не только мою но и всех вокруг. (ты потом сама
<p>Ниже Вы можете увидеть фотоматериалы, произведенные в течение 2025 года.</p> расставишь тут запятые везде). Из всех девочек которые
родилось в лесном в 2006 году мне повезло встретить тебя
в первом классе. я уже тогда конечно знал что у нас там
будет секс (через е, а не через э). ты самая добрая,
самая умная, самая красивая на свете (типа в мире). ты
всегда мне помогала в плохих ситуациях. благодаря тебе я
счастлив.
</p>
<p>
я вот никогда не писал вот эти все штуки типа вот эти
письма, но я думаю ты меня научишь потом. писать код у
меня получается лучше. я надеюсь сто в этом году ты
обновишь свой вишлист а то мы все тебе оттуда подарили и
что мы посмотрим еще больше твоих фильмов или сериалов,
потому что мои мы не смотрим
</p>
<p>
я хочу съесть шоколадку, которую тебе мама положила, но
я боюсь, что она увидит. я пока не знаю, что тут еще
надо написать. я не буду спрашивать у гпт. я сам тут
написал.
</p>
<p>
Ниже Вы можете увидеть фотоматериалы, произведенные в
течение 2025 года.
</p>
</div> </div>
<div class="photo-gallery"> <div class="photo-gallery">
<h2>Вот тут я фоточки вставил типа ойойоойой</h2> <h2>Вот тут я фоточки вставил типа ойойоойой 📸</h2>
<div class="photo-grid"> <div class="photo-grid">
<div class="photo-item"> <div class="photo-item">
<img src="1.jpg"> <img src="1.jpg" />
</div> </div>
<div class="photo-item"> <div class="photo-item">
<img src="2.jpg"> <img src="2.jpg" />
</div> </div>
<div class="photo-item"> <div class="photo-item">
<img src="3.jpg"> <img src="3.jpg" />
</div> </div>
<div class="photo-item"> <div class="photo-item">
<img src="4.jpg"> <img src="4.jpg" />
</div> </div>
<div class="photo-item"> <div class="photo-item">
<img src="5.jpg"> <img src="5.jpg" />
</div> </div>
<div class="photo-item"> <div class="photo-item">
<img src="6.jpg"> <img src="6.jpg" />
</div> </div>
<div class="photo-item"> <div class="photo-item">
<img src="7.jpg"> <img src="7.jpg" />
</div> </div>
<div class="photo-item"> <div class="photo-item">
<img src="8.jpg"> <img src="8.jpg" />
</div> </div>
<div class="photo-item"> <div class="photo-item">
<img src="9.jpg"> <img src="9.jpg" />
</div> </div>
<div class="photo-item"> <div class="photo-item">
<img src="10.jpg"> <img src="10.jpg" />
</div> </div>
<div class="photo-item"> <div class="photo-item">
<img src="11.jpg"> <img src="11.jpg" />
</div> </div>
<div class="photo-item"> <div class="photo-item">
<img src="12.jpg"> <img src="12.jpg" />
</div> </div>
<div class="photo-item"> <div class="photo-item">
<img src="13.jpg"> <img src="13.jpg" />
</div> </div>
<div class="photo-item"> <div class="photo-item">
<img src="14.jpg"> <img src="14.jpg" />
</div> </div>
<div class="photo-item"> <div class="photo-item">
<img src="15.jpg"> <img src="15.jpg" />
</div> </div>
<div class="photo-item"> <div class="photo-item">
<img src="16.jpg"> <img src="16.jpg" />
</div> </div>
<div class="photo-item"> <div class="photo-item">
<img src="17.jpg"> <img src="17.jpg" />
</div> </div>
<div class="photo-item"> <div class="photo-item">
<img src="18.jpg"> <img src="18.jpg" />
</div> </div>
</div> </div>
</div> </div>
@@ -515,25 +684,51 @@
</div> </div>
<script> <script>
// Password Protection
const correctPassword = "экстрасекс"; // Change this to your password!
function checkPassword() {
const input = document.getElementById("passwordInput").value;
if (input === correctPassword) {
document.getElementById("passwordOverlay").style.display =
"none";
document.querySelector(".parallax-container").style.filter =
"none";
} else {
document.getElementById("errorMsg").style.display = "block";
document.getElementById("passwordInput").value = "";
document.getElementById("passwordInput").focus();
}
}
// Allow Enter key to submit
document
.getElementById("passwordInput")
.addEventListener("keypress", function (e) {
if (e.key === "Enter") {
checkPassword();
}
});
// Create stars // Create stars
const starsContainer = document.getElementById('stars'); const starsContainer = document.getElementById("stars");
for (let i = 0; i < 100; i++) { for (let i = 0; i < 100; i++) {
const star = document.createElement('div'); const star = document.createElement("div");
star.className = 'star'; star.className = "star";
star.style.left = Math.random() * 100 + '%'; star.style.left = Math.random() * 100 + "%";
star.style.top = Math.random() * 100 + '%'; star.style.top = Math.random() * 100 + "%";
star.style.animationDelay = Math.random() * 3 + 's'; star.style.animationDelay = Math.random() * 3 + "s";
starsContainer.appendChild(star); starsContainer.appendChild(star);
} }
// Create floating hearts // Create floating hearts
const heartsContainer = document.getElementById('hearts'); const heartsContainer = document.getElementById("hearts");
function createHeart() { function createHeart() {
const heart = document.createElement('div'); const heart = document.createElement("div");
heart.className = 'heart'; heart.className = "heart";
heart.innerHTML = '💜'; heart.innerHTML = "💜";
heart.style.left = Math.random() * 100 + '%'; heart.style.left = Math.random() * 100 + "%";
heart.style.animationDuration = (Math.random() * 3 + 4) + 's'; heart.style.animationDuration = Math.random() * 3 + 4 + "s";
heartsContainer.appendChild(heart); heartsContainer.appendChild(heart);
setTimeout(() => { setTimeout(() => {
@@ -544,21 +739,21 @@
setInterval(createHeart, 800); setInterval(createHeart, 800);
// Parallax effect // Parallax effect
document.addEventListener('mousemove', (e) => { document.addEventListener("mousemove", (e) => {
const mouseX = e.clientX / window.innerWidth; const mouseX = e.clientX / window.innerWidth;
const mouseY = e.clientY / window.innerHeight; const mouseY = e.clientY / window.innerHeight;
// Move stars slower // Move stars slower
const stars = document.querySelectorAll('.star'); const stars = document.querySelectorAll(".star");
stars.forEach((star, index) => { stars.forEach((star, index) => {
const speed = (index % 3 + 1) * 0.5; const speed = ((index % 3) + 1) * 0.5;
const x = (mouseX - 0.5) * speed * 20; const x = (mouseX - 0.5) * speed * 20;
const y = (mouseY - 0.5) * speed * 20; const y = (mouseY - 0.5) * speed * 20;
star.style.transform = `translate(${x}px, ${y}px)`; star.style.transform = `translate(${x}px, ${y}px)`;
}); });
// Move circles with parallax // Move circles with parallax
const circles = document.querySelectorAll('.parallax-element'); const circles = document.querySelectorAll(".parallax-element");
circles.forEach((circle, index) => { circles.forEach((circle, index) => {
const speed = (index + 1) * 10; const speed = (index + 1) * 10;
const x = (mouseX - 0.5) * speed; const x = (mouseX - 0.5) * speed;
@@ -570,26 +765,32 @@
// Scroll-based parallax // Scroll-based parallax
let ticking = false; let ticking = false;
document.addEventListener('scroll', () => { document.addEventListener("scroll", () => {
if (!ticking) { if (!ticking) {
window.requestAnimationFrame(() => { window.requestAnimationFrame(() => {
const scrolled = window.pageYOffset; const scrolled = window.pageYOffset;
// Parallax for hero section // Parallax for hero section
const hero = document.querySelector('.hero'); const hero = document.querySelector(".hero");
if (hero) { if (hero) {
hero.style.transform = `translateY(${scrolled * 0.5}px)`; hero.style.transform = `translateY(${scrolled * 0.5}px)`;
hero.style.opacity = Math.max(1 - scrolled / 500, 0); hero.style.opacity = Math.max(
1 - scrolled / 500,
0,
);
} }
// Parallax for circles // Parallax for circles
const circle1 = document.querySelector('.circle-1'); const circle1 = document.querySelector(".circle-1");
const circle2 = document.querySelector('.circle-2'); const circle2 = document.querySelector(".circle-2");
const circle3 = document.querySelector('.circle-3'); const circle3 = document.querySelector(".circle-3");
if (circle1) circle1.style.transform = `translateY(${scrolled * 0.3}px)`; if (circle1)
if (circle2) circle2.style.transform = `translateY(${scrolled * -0.2}px)`; circle1.style.transform = `translateY(${scrolled * 0.3}px)`;
if (circle3) circle3.style.transform = `translateY(${scrolled * 0.4}px)`; if (circle2)
circle2.style.transform = `translateY(${scrolled * -0.2}px)`;
if (circle3)
circle3.style.transform = `translateY(${scrolled * 0.4}px)`;
ticking = false; ticking = false;
}); });
@@ -601,21 +802,23 @@
// Animate cards on scroll // Animate cards on scroll
const observerOptions = { const observerOptions = {
threshold: 0.1, threshold: 0.1,
rootMargin: '0px 0px -100px 0px' rootMargin: "0px 0px -100px 0px",
}; };
const observer = new IntersectionObserver((entries) => { const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => { entries.forEach((entry) => {
if (entry.isIntersecting) { if (entry.isIntersecting) {
entry.target.style.opacity = '1'; entry.target.style.opacity = "1";
entry.target.style.transform = 'translateY(0)'; entry.target.style.transform = "translateY(0)";
} }
}); });
}, observerOptions); }, observerOptions);
document.querySelectorAll('.glass-card, .photo-item').forEach(el => { document
.querySelectorAll(".glass-card, .photo-item")
.forEach((el) => {
observer.observe(el); observer.observe(el);
}); });
</script> </script>
</body> </body>
</html> </html>