Delete paulina.html
This commit is contained in:
Paweł Orzech
parent
7a8dae5a41
commit
012f47d9c8
1 changed files with 0 additions and 318 deletions
318
paulina.html
318
paulina.html
|
|
@ -1,318 +0,0 @@
|
||||||
|
|
||||||
<!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>
|
|
||||||
Loading…
Reference in a new issue