318 lines
12 KiB
HTML
318 lines
12 KiB
HTML
|
|
<!DOCTYPE html>
|
|
<html lang="pl" class="">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Paulina Orzech - Strona w budowie</title>
|
|
<meta name="description" content="Strona Pauliny Orzech - w budowie. Wkrótce więcej informacji.">
|
|
<meta name="keywords" content="Paulina Orzech, orzech.me, strona w budowie, wkrótce">
|
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🌰</text></svg>">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
|
|
|
|
<script>
|
|
tailwind.config = {
|
|
darkMode: 'class'
|
|
}
|
|
const applyTheme = () => {
|
|
const theme = localStorage.getItem('theme') || 'system';
|
|
if (theme === 'dark' || (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
|
document.documentElement.classList.add('dark');
|
|
document.body.classList.remove('light-mode-animated');
|
|
} else {
|
|
document.documentElement.classList.remove('dark');
|
|
document.body.classList.add('light-mode-animated');
|
|
}
|
|
};
|
|
applyTheme();
|
|
</script>
|
|
|
|
<style>
|
|
body {
|
|
font-family: 'Poppins', sans-serif;
|
|
background-size: 200% 200%;
|
|
}
|
|
@keyframes wind-breeze {
|
|
0% { background-position: 0% 50%; }
|
|
25% { background-position: 100% 0%; }
|
|
50% { background-position: 0% 100%; }
|
|
75% { background-position: 100% 50%; }
|
|
100% { background-position: 0% 50%; }
|
|
}
|
|
body.light-mode-animated {
|
|
animation: wind-breeze 30s ease infinite;
|
|
background-size: 400% 400%;
|
|
}
|
|
.animate-on-load {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
|
|
}
|
|
.animate-in {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
@keyframes twinkle {
|
|
0%, 100% { opacity: 0; transform: scale(0.5); }
|
|
50% { opacity: 1; transform: scale(1); }
|
|
}
|
|
.star {
|
|
position: absolute;
|
|
background-color: rgba(255, 255, 255, 0.8);
|
|
border-radius: 50%;
|
|
animation: twinkle 2s infinite ease-in-out alternate;
|
|
pointer-events: none;
|
|
}
|
|
@keyframes shoot {
|
|
0% {
|
|
transform: translate(0, 0) scale(0.5);
|
|
opacity: 0;
|
|
}
|
|
10% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: translate(200px, 200px) scale(1);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.shooting-star {
|
|
position: absolute;
|
|
width: 4px;
|
|
height: 4px;
|
|
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8));
|
|
border-radius: 50%;
|
|
filter: blur(1px);
|
|
animation: shoot 2s linear forwards;
|
|
pointer-events: none;
|
|
transform-origin: 0% 0%;
|
|
}
|
|
@keyframes sun-glow {
|
|
0%, 100% { box-shadow: 0 0 20px 8px rgba(255, 255, 200, 0.4); }
|
|
50% { box-shadow: 0 0 40px 15px rgba(255, 255, 200, 0.7); }
|
|
}
|
|
@keyframes sun-drift {
|
|
0% { transform: translate(-50%, -50%); }
|
|
25% { transform: translate(-48%, -49%); }
|
|
50% { transform: translate(-52%, -51%); }
|
|
75% { transform: translate(-49%, -48%); }
|
|
100% { transform: translate(-50%, -50%); }
|
|
}
|
|
.sun {
|
|
position: absolute;
|
|
top: 10%;
|
|
left: 50%;
|
|
width: 180px;
|
|
height: 180px;
|
|
background: radial-gradient(circle, #FFFACD, #FFEFD5);
|
|
border-radius: 50%;
|
|
animation: sun-glow 6s infinite alternate, sun-drift 20s infinite ease-in-out;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
transition: opacity 0.5s ease-in-out;
|
|
}
|
|
.sun.visible {
|
|
opacity: 1;
|
|
}
|
|
@keyframes moon-glow {
|
|
0%, 100% { box-shadow: 0 0 20px 8px rgba(200, 200, 255, 0.2); }
|
|
50% { box-shadow: 0 0 40px 15px rgba(200, 200, 255, 0.4); }
|
|
}
|
|
@keyframes moon-drift {
|
|
0% { transform: translate(-50%, -50%); }
|
|
25% { transform: translate(-48%, -49%); }
|
|
50% { transform: translate(-52%, -51%); }
|
|
75% { transform: translate(-49%, -48%); }
|
|
100% { transform: translate(-50%, -50%); }
|
|
}
|
|
.moon {
|
|
position: absolute;
|
|
top: 10%;
|
|
left: 50%;
|
|
width: 150px;
|
|
height: 150px;
|
|
background: radial-gradient(circle, #E0E0E0, #B0B0B0);
|
|
border-radius: 50%;
|
|
animation: moon-glow 6s infinite alternate, moon-drift 20s infinite ease-in-out;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
transition: opacity 0.5s ease-in-out;
|
|
}
|
|
.moon.visible {
|
|
opacity: 1;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gradient-to-r from-blue-50 to-blue-100 dark:bg-gradient-to-r dark:from-gray-900 dark:to-gray-800 text-gray-800 flex items-center justify-center min-h-screen transition-colors duration-300">
|
|
|
|
<div id="star-container" class="absolute inset-0 overflow-hidden pointer-events-none"></div>
|
|
<div id="sun-container" class="absolute top-0 left-0 w-full h-1/2 overflow-hidden pointer-events-none"></div>
|
|
<div id="moon-container" class="absolute top-0 left-0 w-full h-1/2 overflow-hidden pointer-events-none"></div>
|
|
|
|
<main id="content" class="animate-on-load text-center p-8 space-y-10">
|
|
<h1 class="text-5xl md:text-7xl font-bold tracking-tight text-blue-900 dark:text-blue-200">
|
|
Strona Pauliny
|
|
</h1>
|
|
<p class="text-lg md:text-xl text-gray-600 dark:text-gray-300 mb-4">
|
|
W budowie! Wkrótce więcej informacji.
|
|
</p>
|
|
<a href="index.html" class="bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 px-8 py-4 rounded-2xl shadow-lg hover:shadow-xl dark:hover:bg-blue-800 hover:bg-blue-200 hover:scale-105 transition-all duration-300 font-semibold">
|
|
Wróć do strony głównej
|
|
</a>
|
|
</main>
|
|
|
|
<script>
|
|
let shootingStarInterval;
|
|
|
|
const isNightTime = () => {
|
|
const hour = new Date().getHours();
|
|
return hour >= 20 || hour < 6;
|
|
};
|
|
|
|
const toggleCelestialBodies = (showSun, showMoon) => {
|
|
const sunContainer = document.getElementById('sun-container');
|
|
let sunElement = document.getElementById('animated-sun');
|
|
const moonContainer = document.getElementById('moon-container');
|
|
let moonElement = document.getElementById('animated-moon');
|
|
|
|
if (showSun) {
|
|
if (!sunElement) {
|
|
sunElement = document.createElement('div');
|
|
sunElement.id = 'animated-sun';
|
|
sunElement.className = 'sun';
|
|
sunContainer.appendChild(sunElement);
|
|
}
|
|
sunElement.classList.add('visible');
|
|
} else {
|
|
if (sunElement) {
|
|
sunElement.classList.remove('visible');
|
|
}
|
|
}
|
|
|
|
if (showMoon) {
|
|
if (!moonElement) {
|
|
moonElement = document.createElement('div');
|
|
moonElement.id = 'animated-moon';
|
|
moonElement.className = 'moon';
|
|
moonContainer.appendChild(moonElement);
|
|
}
|
|
moonElement.classList.add('visible');
|
|
} else {
|
|
if (moonElement) {
|
|
moonElement.classList.remove('visible');
|
|
}
|
|
}
|
|
};
|
|
|
|
const createStars = () => {
|
|
const starContainer = document.getElementById('star-container');
|
|
starContainer.innerHTML = '';
|
|
const numStars = 25;
|
|
|
|
for (let i = 0; i < numStars; i++) {
|
|
const star = document.createElement('div');
|
|
star.className = 'star';
|
|
const size = Math.random() * 1.5 + 0.5;
|
|
star.style.width = `${size}px`;
|
|
star.style.height = `${size}px`;
|
|
star.style.left = `${Math.random() * 100}%`;
|
|
star.style.top = `${Math.random() * 100}%`;
|
|
star.style.animationDelay = `${Math.random() * 8}s`;
|
|
star.style.animationDuration = `${Math.random() * 6 + 3}s`;
|
|
starContainer.appendChild(star);
|
|
}
|
|
};
|
|
|
|
const removeStars = () => {
|
|
const starContainer = document.getElementById('star-container');
|
|
starContainer.innerHTML = '';
|
|
};
|
|
|
|
const createShootingStar = () => {
|
|
const starContainer = document.getElementById('star-container');
|
|
const shootingStar = document.createElement('div');
|
|
shootingStar.className = 'shooting-star';
|
|
|
|
const startX = Math.random() * window.innerWidth * 0.7;
|
|
const startY = Math.random() * window.innerHeight * 0.3;
|
|
shootingStar.style.left = `${startX}px`;
|
|
shootingStar.style.top = `${startY}px`;
|
|
|
|
shootingStar.style.animationDuration = `${Math.random() * 1.5 + 1}s`;
|
|
shootingStar.style.animationDelay = `${Math.random() * 0.5}s`;
|
|
|
|
starContainer.appendChild(shootingStar);
|
|
|
|
shootingStar.addEventListener('animationend', () => {
|
|
shootingStar.remove();
|
|
});
|
|
};
|
|
|
|
const startShootingStars = () => {
|
|
if (!shootingStarInterval) {
|
|
shootingStarInterval = setInterval(() => {
|
|
if (document.documentElement.classList.contains('dark') && isNightTime()) {
|
|
createShootingStar();
|
|
} else {
|
|
stopShootingStars();
|
|
}
|
|
}, 30000);
|
|
}
|
|
};
|
|
|
|
const stopShootingStars = () => {
|
|
if (shootingStarInterval) {
|
|
clearInterval(shootingStarInterval);
|
|
shootingStarInterval = null;
|
|
}
|
|
};
|
|
|
|
window.addEventListener('load', () => {
|
|
const content = document.getElementById('content');
|
|
setTimeout(() => content.classList.add('animate-in'), 100);
|
|
|
|
const isDarkModeInitial = document.documentElement.classList.contains('dark');
|
|
const isCurrentlyNightInitial = isNightTime();
|
|
|
|
if (isDarkModeInitial && isCurrentlyNightInitial) {
|
|
createStars();
|
|
startShootingStars();
|
|
toggleCelestialBodies(false, true);
|
|
} else if (!isDarkModeInitial) {
|
|
removeStars();
|
|
stopShootingStars();
|
|
toggleCelestialBodies(true, false);
|
|
} else {
|
|
removeStars();
|
|
stopShootingStars();
|
|
toggleCelestialBodies(false, false);
|
|
}
|
|
|
|
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
|
|
if (localStorage.getItem('theme') === 'system') {
|
|
applyTheme();
|
|
const isDarkMode = document.documentElement.classList.contains('dark');
|
|
const isCurrentlyNight = isNightTime();
|
|
if (isDarkMode && isCurrentlyNight) {
|
|
createStars();
|
|
startShootingStars();
|
|
toggleCelestialBodies(false, true);
|
|
} else if (!isDarkMode) {
|
|
removeStars();
|
|
stopShootingStars();
|
|
toggleCelestialBodies(true, false);
|
|
} else {
|
|
removeStars();
|
|
stopShootingStars();
|
|
toggleCelestialBodies(false, false);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|