From 0657a2b6db96aa0f3f994efebd9392d0bf657dcb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Orzech?= <pawel@pawelorzech.pl>
Date: Sat, 28 Jun 2025 02:52:00 +0200
Subject: [PATCH] Create paulina.html

paulina wip
---
 paulina.html | 318 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 318 insertions(+)
 create mode 100644 paulina.html
diff --git a/paulina.html b/paulina.html
new file mode 100644
index 0000000..227c90a
--- /dev/null
+++ b/paulina.html
@@ -0,0 +1,318 @@
+
+<!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>
