Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Black Swans Swooping Down on Earth</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Playfair+Display:ital@0;1&display=swap'); | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| :root { | |
| --space-dark: #0a0a1a; | |
| --space-light: #1a1a3a; | |
| --earth-blue: #1a5f7a; | |
| --earth-green: #2d8b5a; | |
| --atmosphere-glow: rgba(100, 200, 255, 0.3); | |
| --swan-black: #0a0a0a; | |
| --swan-wing: #1a1a1a; | |
| } | |
| body { | |
| overflow: hidden; | |
| background: linear-gradient(180deg, | |
| var(--space-dark) 0%, | |
| var(--space-light) 40%, | |
| #2a3a5a 60%, | |
| #4a5a7a 80%, | |
| #6a7a9a 100%); | |
| min-height: 100vh; | |
| font-family: 'Cinzel', serif; | |
| } | |
| /* Header */ | |
| .header { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| z-index: 1000; | |
| padding: 20px 40px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 100%); | |
| } | |
| .logo { | |
| color: #fff; | |
| font-size: 1.2rem; | |
| text-decoration: none; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| transition: all 0.3s ease; | |
| } | |
| .logo:hover { | |
| color: #64b5f6; | |
| transform: scale(1.05); | |
| } | |
| .logo i { | |
| font-size: 1.5rem; | |
| } | |
| .title { | |
| color: #fff; | |
| font-size: 1.5rem; | |
| letter-spacing: 3px; | |
| text-shadow: 0 0 20px rgba(100, 181, 246, 0.5); | |
| } | |
| /* Stars Container */ | |
| .stars-container { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| pointer-events: none; | |
| z-index: 1; | |
| } | |
| .star { | |
| position: absolute; | |
| background: #fff; | |
| border-radius: 50%; | |
| animation: twinkle var(--duration) ease-in-out infinite; | |
| } | |
| @keyframes twinkle { | |
| 0%, 100% { opacity: var(--opacity); transform: scale(1); } | |
| 50% { opacity: 1; transform: scale(1.5); } | |
| } | |
| /* Earth Container */ | |
| .earth-container { | |
| position: fixed; | |
| bottom: -10%; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 150vw; | |
| height: 80vh; | |
| z-index: 10; | |
| } | |
| .earth { | |
| width: 100%; | |
| height: 100%; | |
| border-radius: 50%; | |
| background: | |
| radial-gradient(ellipse at 30% 30%, rgba(76, 175, 80, 0.6) 0%, transparent 50%), | |
| radial-gradient(ellipse at 70% 60%, rgba(33, 150, 243, 0.8) 0%, transparent 40%), | |
| radial-gradient(ellipse at 50% 80%, rgba(76, 175, 80, 0.5) 0%, transparent 30%), | |
| radial-gradient(ellipse at 20% 70%, rgba(33, 150, 243, 0.6) 0%, transparent 35%), | |
| radial-gradient(ellipse at 80% 30%, rgba(76, 175, 80, 0.4) 0%, transparent 25%), | |
| linear-gradient(180deg, | |
| #1a3a5c 0%, | |
| #2d5a7b 15%, | |
| #3d7a9c 30%, | |
| #4a8ab8 45%, | |
| #5a9ac8 55%, | |
| #4a8ab8 65%, | |
| #3d7a9c 75%, | |
| #2d5a7b 85%, | |
| #1a3a5c 100%); | |
| box-shadow: | |
| inset -50px -30px 100px rgba(0,0,0,0.8), | |
| inset 20px 20px 60px rgba(100, 200, 255, 0.2), | |
| 0 0 100px rgba(100, 181, 246, 0.4), | |
| 0 0 200px rgba(100, 181, 246, 0.2); | |
| animation: earthRotate 120s linear infinite; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| @keyframes earthRotate { | |
| from { transform: rotate(0deg); } | |
| to { transform: rotate(360deg); } | |
| } | |
| /* Continents on Earth */ | |
| .continents { | |
| position: absolute; | |
| width: 200%; | |
| height: 200%; | |
| top: -50%; | |
| left: -50%; | |
| background-image: | |
| radial-gradient(ellipse 15% 10% at 25% 35%, rgba(76, 175, 80, 0.7) 0%, transparent 70%), | |
| radial-gradient(ellipse 12% 8% at 75% 25%, rgba(76, 175, 80, 0.6) 0%, transparent 60%), | |
| radial-gradient(ellipse 10% 15% at 60% 55%, rgba(76, 175, 80, 0.5) 0%, transparent 50%), | |
| radial-gradient(ellipse 8% 12% at 35% 65%, rgba(76, 175, 80, 0.6) 0%, transparent 55%), | |
| radial-gradient(ellipse 6% 10% at 80% 70%, rgba(76, 175, 80, 0.5) 0%, transparent 45%); | |
| animation: continentsMove 60s linear infinite; | |
| } | |
| @keyframes continentsMove { | |
| from { transform: rotate(0deg); } | |
| to { transform: rotate(360deg); } | |
| } | |
| /* Atmosphere Glow */ | |
| .atmosphere { | |
| position: absolute; | |
| top: -5%; | |
| left: -5%; | |
| width: 110%; | |
| height: 110%; | |
| border-radius: 50%; | |
| background: radial-gradient(circle at 30% 30%, | |
| rgba(135, 206, 250, 0.4) 0%, | |
| rgba(100, 181, 246, 0.2) 30%, | |
| transparent 70%); | |
| pointer-events: none; | |
| animation: atmospherePulse 4s ease-in-out infinite; | |
| } | |
| @keyframes atmospherePulse { | |
| 0%, 100% { opacity: 0.8; transform: scale(1); } | |
| 50% { opacity: 1; transform: scale(1.02); } | |
| } | |
| /* Clouds */ | |
| .clouds { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| overflow: hidden; | |
| opacity: 0.3; | |
| } | |
| .cloud { | |
| position: absolute; | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 50%; | |
| filter: blur(10px); | |
| } | |
| /* Swans Container */ | |
| .swans-container { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 100; | |
| pointer-events: none; | |
| } | |
| /* Individual Swan */ | |
| .swan { | |
| position: absolute; | |
| width: var(--swan-size); | |
| height: var(--swan-size); | |
| --swan-size: 60px; | |
| animation: swoop var(--duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite; | |
| animation-delay: var(--delay); | |
| opacity: 0; | |
| z-index: var(--z-index); | |
| } | |
| .swan-body { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| /* Swan SVG Styling */ | |
| .swan svg { | |
| width: 100%; | |
| height: 100%; | |
| filter: drop-shadow(0 0 10px rgba(0,0,0,0.5)); | |
| } | |
| .swan-wing-left, .swan-wing-right { | |
| transform-origin: center; | |
| animation: flap var(--flap-speed) ease-in-out infinite; | |
| } | |
| @keyframes flap { | |
| 0%, 100% { transform: rotate(0deg); } | |
| 50% { transform: rotate(-15deg); } | |
| } | |
| @keyframes swoop { | |
| 0% { | |
| opacity: 0; | |
| transform: translate(var(--start-x), var(--start-y)) scale(0.3); | |
| } | |
| 5% { | |
| opacity: 1; | |
| } | |
| 15% { | |
| transform: translate(var(--mid-x), var(--mid-y)) scale(0.6); | |
| } | |
| 50% { | |
| transform: translate(var(--peak-x), var(--peak-y)) scale(1); | |
| } | |
| 70% { | |
| transform: translate(var(--down-x), var(--down-y)) scale(0.9); | |
| } | |
| 100% { | |
| opacity: 0; | |
| transform: translate(var(--end-x), var(--end-y)) scale(0.5); | |
| } | |
| } | |
| /* Moon */ | |
| .moon { | |
| position: fixed; | |
| top: 15%; | |
| right: 20%; | |
| width: 80px; | |
| height: 80px; | |
| border-radius: 50%; | |
| background: radial-gradient(circle at 30% 30%, #fff 0%, #f5f5dc 50%, #ddd 100%); | |
| box-shadow: 0 0 50px rgba(255, 255, 200, 0.5), 0 0 100px rgba(255, 255, 200, 0.3); | |
| z-index: 2; | |
| } | |
| .moon::before { | |
| content: ''; | |
| position: absolute; | |
| top: 10px; | |
| left: 15px; | |
| width: 15px; | |
| height: 15px; | |
| border-radius: 50%; | |
| background: rgba(200, 200, 180, 0.5); | |
| } | |
| .moon::after { | |
| content: ''; | |
| position: absolute; | |
| top: 30px; | |
| left: 40px; | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| background: rgba(200, 200, 180, 0.4); | |
| } | |
| /* Information Panel */ | |
| .info-panel { | |
| position: fixed; | |
| bottom: 30px; | |
| left: 30px; | |
| z-index: 1000; | |
| color: #fff; | |
| max-width: 300px; | |
| } | |
| .info-panel h2 { | |
| font-family: 'Playfair Display', serif; | |
| font-size: 1.8rem; | |
| margin-bottom: 10px; | |
| text-shadow: 0 0 20px rgba(0,0,0,0.8); | |
| } | |
| .info-panel p { | |
| font-size: 0.9rem; | |
| opacity: 0.8; | |
| line-height: 1.6; | |
| text-shadow: 0 0 10px rgba(0,0,0,0.8); | |
| } | |
| .stats { | |
| display: flex; | |
| gap: 20px; | |
| margin-top: 15px; | |
| } | |
| .stat { | |
| text-align: center; | |
| } | |
| .stat-number { | |
| font-size: 2rem; | |
| font-weight: bold; | |
| color: #64b5f6; | |
| } | |
| .stat-label { | |
| font-size: 0.7rem; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| /* Ambient Light Effect */ | |
| .ambient-light { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: radial-gradient(ellipse at 50% 100%, | |
| rgba(100, 181, 246, 0.15) 0%, | |
| transparent 60%); | |
| pointer-events: none; | |
| z-index: 5; | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 768px) { | |
| .header { | |
| padding: 15px 20px; | |
| } | |
| .title { | |
| font-size: 1rem; | |
| } | |
| .moon { | |
| width: 50px; | |
| height: 50px; | |
| top: 10%; | |
| right: 15%; | |
| } | |
| .earth-container { | |
| bottom: -20%; | |
| height: 70vh; | |
| } | |
| .info-panel { | |
| bottom: 20px; | |
| left: 20px; | |
| max-width: 200px; | |
| } | |
| .info-panel h2 { | |
| font-size: 1.3rem; | |
| } | |
| .stat-number { | |
| font-size: 1.5rem; | |
| } | |
| .swan { | |
| --swan-size: 40px; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .title { | |
| display: none; | |
| } | |
| .info-panel { | |
| max-width: 150px; | |
| } | |
| .info-panel h2 { | |
| font-size: 1.1rem; | |
| } | |
| .info-panel p { | |
| font-size: 0.75rem; | |
| } | |
| } | |
| /* Particle Effects */ | |
| .particle { | |
| position: absolute; | |
| width: 3px; | |
| height: 3px; | |
| background: rgba(255, 255, 255, 0.6); | |
| border-radius: 50%; | |
| pointer-events: none; | |
| animation: particle-float 10s linear infinite; | |
| } | |
| @keyframes particle-float { | |
| 0% { | |
| transform: translateY(100vh) translateX(0); | |
| opacity: 0; | |
| } | |
| 10% { | |
| opacity: 1; | |
| } | |
| 90% { | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: translateY(-100vh) translateX(50px); | |
| opacity: 0; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header class="header"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="logo" target="_blank"> | |
| <i class="fas fa-code"></i> | |
| <span>Built with anycoder</span> | |
| </a> | |
| <h1 class="title">Black Swan Descent</h1> | |
| </header> | |
| <!-- Stars Container --> | |
| <div class="stars-container" id="stars"></div> | |
| <!-- Moon --> | |
| <div class="moon"></div> | |
| <!-- Ambient Light --> | |
| <div class="ambient-light"></div> | |
| <!-- Earth Container --> | |
| <div class="earth-container"> | |
| <div class="earth"> | |
| <div class="continents"></div> | |
| <div class="atmosphere"></div> | |
| <div class="clouds" id="clouds"></div> | |
| </div> | |
| </div> | |
| <!-- Swans Container --> | |
| <div class="swans-container" id="swans-container"></div> | |
| <!-- Particles --> | |
| <div class="particles" id="particles"></div> | |
| <!-- Info Panel --> | |
| <div class="info-panel"> | |
| <h2>The Descent</h2> | |
| <p>A magnificent flock of black swans, rare and enigmatic, swoops down towards Earth in an awe-inspiring display of nature's beauty.</p> | |
| <div class="stats"> | |
| <div class="stat"> | |
| <div class="stat-number" id="swan-count">0</div> | |
| <div class="stat-label">Swans</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="stat-number">∞</div> | |
| <div class="stat-label">Beauty</div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Generate Stars | |
| function generateStars() { | |
| const container = document.getElementById('stars'); | |
| const starCount = 200; | |
| for (let i = 0; i < starCount; i++) { | |
| const star = document.createElement('div'); | |
| star.className = 'star'; | |
| star.style.left = Math.random() * 100 + '%'; | |
| star.style.top = Math.random() * 70 + '%'; | |
| const size = Math.random() * 2 + 1; | |
| star.style.width = size + 'px'; | |
| star.style.height = size + 'px'; | |
| star.style.setProperty('--opacity', Math.random() * 0.5 + 0.3); | |
| star.style.setProperty('--duration', (Math.random() * 3 + 2) + 's'); | |
| container.appendChild(star); | |
| } | |
| } | |
| // Generate Clouds | |
| function generateClouds() { | |
| const container = document.getElementById('clouds'); | |
| const cloudCount = 8; | |
| for (let i = 0; i < cloudCount; i++) { | |
| const cloud = document.createElement('div'); | |
| cloud.className = 'cloud'; | |
| const size = Math.random() * 100 + 50; | |
| cloud.style.width = size + 'px'; | |
| cloud.style.height = (size * 0.6) + 'px'; | |
| cloud.style.left = Math.random() * 100 + '%'; | |
| cloud.style.top = Math.random() * 100 + '%'; | |
| cloud.style.animationDelay = Math.random() * 5 + 's'; | |
| container.appendChild(cloud); | |
| } | |
| } | |
| // Swan SVG Template | |
| function createSwanSVG(wingColor = '#1a1a1a') { | |
| return ` | |
| <svg viewBox="0 0 100 60" xmlns="http://www.w3.org/2000/svg"> | |
| <defs> | |
| <linearGradient id="swanGradient" x1="0%" y1="0%" x2="100%" y2="100%"> | |
| <stop offset="0%" style="stop-color:#2a2a2a"/> | |
| <stop offset="50%" style="stop-color:#1a1a1a"/> | |
| <stop offset="100%" style="stop-color:#0a0a0a"/> | |
| </linearGradient> | |
| </defs> | |
| <!-- Body --> | |
| <ellipse cx="50" cy="35" rx="35" ry="18" fill="url(#swanGradient)"/> | |
| <!-- Neck --> | |
| <path d="M 80 30 Q 90 15 85 5 Q 80 0 75 5 Q 70 15 75 25" fill="url(#swanGradient)"/> | |
| <!-- Head --> | |
| <ellipse cx="78" cy="5" rx="8" ry="6" fill="url(#swanGradient)"/> | |
| <!-- Beak --> | |
| <path d="M 85 5 L 95 6 L 85 8 Z" fill="#ff8c00"/> | |
| <!-- Eyes --> | |
| <circle cx="80" cy="3" r="1.5" fill="#fff"/> | |
| <circle cx="80" cy="3" r="0.8" fill="#000"/> | |
| <!-- Left Wing --> | |
| <g class="swan-wing-left"> | |
| <path d="M 20 30 Q 5 20 10 40 Q 25 35 35 45 L 45 40 Q 30 30 20 30" fill="${wingColor}"/> | |
| </g> | |
| <!-- Right Wing --> | |
| <g class="swan-wing-right"> | |
| <path d="M 30 32 Q 15 25 20 42 Q 35 38 45 48 L 50 42 Q 35 32 30 32" fill="${wingColor}"/> | |
| </g> | |
| <!-- Tail --> | |
| <path d="M 15 35 Q 5 30 8 38 Q 12 42 18 40" fill="url(#swanGradient)"/> | |
| </svg> | |
| `; | |
| } | |
| // Create Swans | |
| function createSwans() { | |
| const container = document.getElementById('swans-container'); | |
| const swanCount = 25; | |
| for (let i = 0; i < swanCount; i++) { | |
| const swan = document.createElement('div'); | |
| swan.className = 'swan'; | |
| // Random size variation | |
| const sizeMultiplier = 0.5 + Math.random() * 1; | |
| swan.style.setProperty('--swan-size', (60 * sizeMultiplier) + 'px'); | |
| // Random start position (top of screen) | |
| const startX = (Math.random() - 0.5) * 50; // -25% to 25% of screen width | |
| const startY = -100 - Math.random() * 200; // Above screen | |
| // Mid swoop position | |
| const midX = (Math.random() - 0.5) * 30; | |
| const midY = 20 + Math.random() * 30; | |
| // Peak diving position | |
| const peakX = (Math.random() - 0.5) * 20; | |
| const peakY = 40 + Math.random() * 20; | |
| // Downward swoop | |
| const downX = (Math.random() - 0.5) * 15; | |
| const downY = 60 + Math.random() * 15; | |
| // End position (towards Earth) | |
| const endX = (Math.random() - 0.5) * 10; | |
| const endY = 120; | |
| swan.style.setProperty('--start-x', startX + '%'); | |
| swan.style.setProperty('--start-y', startY + 'px'); | |
| swan.style.setProperty('--mid-x', midX + '%'); | |
| swan.style.setProperty('--mid-y', midY + '%'); | |
| swan.style.setProperty('--peak-x', peakX + '%'); | |
| swan.style.setProperty('--peak-y', peakY + '%'); | |
| swan.style.setProperty('--down-x', downX + '%'); | |
| swan.style.setProperty('--down-y', downY + '%'); | |
| swan.style.setProperty('--end-x', endX + '%'); | |
| swan.style.setProperty('--end-y', endY + '%'); | |
| // Animation duration and delay | |
| const duration = 8 + Math.random() * 6; | |
| const delay = Math.random() * 10; | |
| swan.style.setProperty('--duration', duration + 's'); | |
| swan.style.setProperty('--delay', -delay + 's'); | |
| swan.style.setProperty('--z-index', Math.floor(Math.random() * 100)); | |
| // Wing flap speed variation | |
| const flapSpeed = 0.2 + Math.random() * 0.3; | |
| swan.innerHTML = ` | |
| <div class="swan-body"> | |
| ${createSwanSVG()} | |
| </div> | |
| `; | |
| // Add individual wing animation | |
| const wingLeft = swan.querySelector('.swan-wing-left'); | |
| const wingRight = swan.querySelector('.swan-wing-right'); | |
| if (wingLeft && wingRight) { | |
| wingLeft.style.animationDuration = flapSpeed + 's'; | |
| wingRight.style.animationDuration = flapSpeed + 's'; | |
| } | |
| container.appendChild(swan); | |
| } | |
| // Update swan count in stats | |
| animateValue('swan-count', 0, swanCount, 2000); | |
| } | |
| // Animate numbers | |
| function animateValue(id, start, end, duration) { | |
| const obj = document.getElementById(id); | |
| let startTimestamp = null; | |
| const step = (timestamp) => { | |
| if (!startTimestamp) startTimestamp = timestamp; | |
| const progress = Math.min((timestamp - startTimestamp) / duration, 1); | |
| obj.innerHTML = Math.floor(progress * (end - start) + start); | |
| if (progress < 1) { | |
| window.requestAnimationFrame(step); | |
| } | |
| }; | |
| window.requestAnimationFrame(step); | |
| } | |
| // Generate floating particles | |
| function generateParticles() { | |
| const container = document.getElementById('particles'); | |
| const particleCount = 30; | |
| for (let i = 0; i < particleCount; i++) { | |
| const particle = document.createElement('div'); | |
| particle.className = 'particle'; | |
| particle.style.left = Math.random() * 100 + '%'; | |
| particle.style.animationDelay = Math.random() * 10 + 's'; | |
| particle.style.animationDuration = (8 + Math.random() * 4) + 's'; | |
| container.appendChild(particle); | |
| } | |
| } | |
| // Mouse parallax effect | |
| function addParallaxEffect() { | |
| document.addEventListener('mousemove', (e) => { | |
| const mouseX = (e.clientX / window.innerWidth - 0.5) * 2; | |
| const mouseY = (e.clientY / window.innerHeight - 0.5) * 2; | |
| const swans = document.querySelectorAll('.swan'); | |
| swans.forEach((swan, index) => { | |
| const depth = (index % 3 + 1) * 0.3; | |
| const currentTransform = swan.style.transform; | |
| if (currentTransform && currentTransform !== 'none') { | |
| swan.style.transform = `translate(calc(var(--current-x) + ${mouseX * depth * 20}px), | |
| calc(var(--current-y) + ${mouseY * depth * 20}px))`; | |
| } | |
| }); | |
| }); | |
| } | |
| // Initialize | |
| document.addEventListener('DOMContentLoaded', () => { | |
| generateStars(); | |
| generateClouds(); | |
| createSwans(); | |
| generateParticles(); | |
| addParallaxEffect(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |