Spaces:
Running
Running
| <html lang="it"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Marcos - La Lontra Spagnola</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Lora:ital@0;1&family=Quicksand:wght@300;400;500;600&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --ocean-deep: #0a1628; | |
| --ocean-mid: #1a3a5c; | |
| --ocean-light: #2d5a87; | |
| --seafoam: #7ec8e3; | |
| --sand: #f4e4bc; | |
| --coral: #ff6b6b; | |
| --foam: rgba(255, 255, 255, 0.15); | |
| --otter-brown: #8b5a2b; | |
| --otter-light: #c4a77d; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Quicksand', sans-serif; | |
| background: linear-gradient(180deg, var(--ocean-deep) 0%, var(--ocean-mid) 50%, var(--ocean-light) 100%); | |
| min-height: 100vh; | |
| color: white; | |
| overflow-x: hidden; | |
| position: relative; | |
| } | |
| /* Animated Background */ | |
| .ocean-bg { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| overflow: hidden; | |
| } | |
| .wave { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 200%; | |
| height: 200px; | |
| background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C150,120 350,0 600,60 C850,120 1050,0 1200,60 L1200,120 L0,120 Z' fill='rgba(126,200,227,0.1)'/%3E%3C/svg%3E") repeat-x; | |
| animation: wave 15s linear infinite; | |
| } | |
| .wave:nth-child(2) { | |
| bottom: 10px; | |
| opacity: 0.5; | |
| animation: wave 25s linear infinite reverse; | |
| } | |
| .wave:nth-child(3) { | |
| bottom: 20px; | |
| opacity: 0.3; | |
| animation: wave 35s linear infinite; | |
| } | |
| @keyframes wave { | |
| 0% { transform: translateX(0); } | |
| 100% { transform: translateX(-50%); } | |
| } | |
| /* Bubbles */ | |
| .bubble { | |
| position: absolute; | |
| border-radius: 50%; | |
| background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.4), transparent); | |
| animation: rise linear infinite; | |
| pointer-events: none; | |
| } | |
| @keyframes rise { | |
| 0% { | |
| transform: translateY(100vh) scale(0); | |
| opacity: 0; | |
| } | |
| 10% { | |
| opacity: 1; | |
| } | |
| 90% { | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: translateY(-100px) scale(1); | |
| opacity: 0; | |
| } | |
| } | |
| /* Header */ | |
| header { | |
| text-align: center; | |
| padding: 60px 20px 40px; | |
| position: relative; | |
| } | |
| .flag-badge { | |
| display: inline-block; | |
| background: linear-gradient(135deg, #aa151b 0%, #f1bf00 50%, #aa151b 100%); | |
| padding: 8px 20px; | |
| border-radius: 30px; | |
| font-size: 0.9rem; | |
| font-weight: 600; | |
| letter-spacing: 1px; | |
| margin-bottom: 20px; | |
| box-shadow: 0 4px 15px rgba(0,0,0,0.3); | |
| animation: pulse 3s ease-in-out infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| } | |
| h1 { | |
| font-family: 'Playfair Display', serif; | |
| font-size: clamp(3rem, 10vw, 6rem); | |
| font-weight: 700; | |
| background: linear-gradient(135deg, var(--sand) 0%, var(--seafoam) 50%, var(--sand) 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| text-shadow: none; | |
| margin-bottom: 10px; | |
| animation: shimmer 3s ease-in-out infinite; | |
| background-size: 200% auto; | |
| } | |
| @keyframes shimmer { | |
| 0%, 100% { background-position: 0% center; } | |
| 50% { background-position: 200% center; } | |
| } | |
| .subtitle { | |
| font-family: 'Lora', serif; | |
| font-style: italic; | |
| font-size: clamp(1rem, 3vw, 1.5rem); | |
| color: var(--seafoam); | |
| opacity: 0.9; | |
| } | |
| /* Otter Illustration */ | |
| .otter-container { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| padding: 20px; | |
| position: relative; | |
| } | |
| .otter { | |
| width: clamp(200px, 40vw, 350px); | |
| height: clamp(200px, 40vw, 350px); | |
| position: relative; | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-20px); } | |
| } | |
| .otter-body { | |
| width: 100%; | |
| height: 100%; | |
| background: radial-gradient(ellipse at 50% 30%, var(--otter-light), var(--otter-brown) 70%); | |
| border-radius: 50% 50% 45% 45%; | |
| position: relative; | |
| box-shadow: | |
| inset -20px -20px 40px rgba(0,0,0,0.3), | |
| inset 10px 10px 30px rgba(255,255,255,0.1), | |
| 0 20px 60px rgba(0,0,0,0.4); | |
| } | |
| .otter-face { | |
| position: absolute; | |
| top: 25%; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 70%; | |
| height: 50%; | |
| } | |
| .otter-eye { | |
| position: absolute; | |
| width: 18px; | |
| height: 22px; | |
| background: #1a1a1a; | |
| border-radius: 50%; | |
| top: 30%; | |
| animation: blink 4s ease-in-out infinite; | |
| } | |
| .otter-eye::after { | |
| content: ''; | |
| position: absolute; | |
| width: 6px; | |
| height: 6px; | |
| background: white; | |
| border-radius: 50%; | |
| top: 3px; | |
| left: 3px; | |
| } | |
| .otter-eye.left { left: 20%; } | |
| .otter-eye.right { right: 20%; } | |
| @keyframes blink { | |
| 0%, 90%, 100% { transform: scaleY(1); } | |
| 95% { transform: scaleY(0.1); } | |
| } | |
| .otter-nose { | |
| position: absolute; | |
| width: 25px; | |
| height: 18px; | |
| background: #2a2a2a; | |
| border-radius: 50% 50% 40% 40%; | |
| top: 55%; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| } | |
| .otter-nose::after { | |
| content: ''; | |
| position: absolute; | |
| width: 8px; | |
| height: 4px; | |
| background: #3a3a3a; | |
| border-radius: 50%; | |
| top: 60%; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| } | |
| .otter-whiskers { | |
| position: absolute; | |
| top: 52%; | |
| width: 100%; | |
| } | |
| .whisker { | |
| position: absolute; | |
| width: 40px; | |
| height: 2px; | |
| background: rgba(0,0,0,0.3); | |
| border-radius: 2px; | |
| } | |
| .whisker.left-1 { left: 5%; top: 0; transform: rotate(-10deg); } | |
| .whisker.left-2 { left: 10%; top: 8px; transform: rotate(-5deg); } | |
| .whisker.right-1 { right: 5%; top: 0; transform: rotate(10deg); } | |
| .whisker.right-2 { right: 10%; top: 8px; transform: rotate(5deg); } | |
| .otter-ears { | |
| position: absolute; | |
| top: 10%; | |
| width: 100%; | |
| } | |
| .ear { | |
| position: absolute; | |
| width: 25px; | |
| height: 30px; | |
| background: var(--otter-brown); | |
| border-radius: 50% 50% 40% 40%; | |
| } | |
| .ear.left { left: 15%; } | |
| .ear.right { right: 15%; } | |
| .ear::after { | |
| content: ''; | |
| position: absolute; | |
| width: 12px; | |
| height: 15px; | |
| background: #d4a574; | |
| border-radius: 50%; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| } | |
| /* Water ripples around otter */ | |
| .water-ring { | |
| position: absolute; | |
| border: 2px solid rgba(126, 200, 227, 0.3); | |
| border-radius: 50%; | |
| animation: ripple 4s ease-out infinite; | |
| } | |
| .water-ring:nth-child(1) { | |
| width: 120%; | |
| height: 120%; | |
| top: -10%; | |
| left: -10%; | |
| animation-delay: 0s; | |
| } | |
| .water-ring:nth-child(2) { | |
| width: 140%; | |
| height: 140%; | |
| top: -20%; | |
| left: -20%; | |
| animation-delay: 1.5s; | |
| } | |
| .water-ring:nth-child(3) { | |
| width: 160%; | |
| height: 160%; | |
| top: -30%; | |
| left: -30%; | |
| animation-delay: 3s; | |
| } | |
| @keyframes ripple { | |
| 0% { | |
| transform: scale(0.8); | |
| opacity: 0.8; | |
| } | |
| 100% { | |
| transform: scale(1.2); | |
| opacity: 0; | |
| } | |
| } | |
| /* Poem Section */ | |
| .poem-section { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| padding: 40px 20px; | |
| position: relative; | |
| } | |
| .poem-container { | |
| background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%); | |
| backdrop-filter: blur(10px); | |
| border-radius: 30px; | |
| padding: 50px 40px; | |
| border: 1px solid rgba(255,255,255,0.1); | |
| box-shadow: | |
| 0 20px 60px rgba(0,0,0,0.3), | |
| inset 0 1px 0 rgba(255,255,255,0.1); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .poem-container::before { | |
| content: '🌊'; | |
| position: absolute; | |
| top: 20px; | |
| left: 30px; | |
| font-size: 2rem; | |
| opacity: 0.5; | |
| } | |
| .poem-container::after { | |
| content: '🌊'; | |
| position: absolute; | |
| bottom: 20px; | |
| right: 30px; | |
| font-size: 2rem; | |
| opacity: 0.5; | |
| transform: rotate(180deg); | |
| } | |
| .poem-title { | |
| font-family: 'Playfair Display', serif; | |
| font-size: clamp(1.5rem, 4vw, 2.2rem); | |
| text-align: center; | |
| margin-bottom: 30px; | |
| color: var(--sand); | |
| position: relative; | |
| } | |
| .poem-title::after { | |
| content: ''; | |
| display: block; | |
| width: 100px; | |
| height: 2px; | |
| background: linear-gradient(90deg, transparent, var(--seafoam), transparent); | |
| margin: 15px auto 0; | |
| } | |
| .poem-content { | |
| font-family: 'Lora', serif; | |
| font-size: clamp(1rem, 2.5vw, 1.3rem); | |
| line-height: 2; | |
| text-align: center; | |
| color: rgba(255,255,255,0.9); | |
| } | |
| .poem-content p { | |
| margin-bottom: 25px; | |
| opacity: 0; | |
| animation: fadeInUp 1s ease forwards; | |
| } | |
| .poem-content p:nth-child(1) { animation-delay: 0.3s; } | |
| .poem-content p:nth-child(2) { animation-delay: 0.6s; } | |
| .poem-content p:nth-child(3) { animation-delay: 0.9s; } | |
| .poem-content p:nth-child(4) { animation-delay: 1.2s; } | |
| .poem-content p:nth-child(5) { animation-delay: 1.5s; } | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .poem-signature { | |
| text-align: right; | |
| margin-top: 30px; | |
| font-style: italic; | |
| color: var(--seafoam); | |
| opacity: 0; | |
| animation: fadeIn 1s ease forwards 2s; | |
| } | |
| @keyframes fadeIn { | |
| to { opacity: 0.8; } | |
| } | |
| /* Interactive Elements */ | |
| .heart-float { | |
| position: fixed; | |
| font-size: 2rem; | |
| pointer-events: none; | |
| animation: heartFloat 4s ease-out forwards; | |
| z-index: 100; | |
| } | |
| @keyframes heartFloat { | |
| 0% { | |
| opacity: 1; | |
| transform: translateY(0) scale(1); | |
| } | |
| 100% { | |
| opacity: 0; | |
| transform: translateY(-200px) scale(0.5); | |
| } | |
| } | |
| .click-hint { | |
| text-align: center; | |
| padding: 20px; | |
| color: var(--seafoam); | |
| font-size: 0.9rem; | |
| opacity: 0.7; | |
| animation: bounce 2s ease-in-out infinite; | |
| } | |
| @keyframes bounce { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-5px); } | |
| } | |
| /* Footer */ | |
| footer { | |
| text-align: center; | |
| padding: 40px 20px; | |
| color: var(--seafoam); | |
| opacity: 0.6; | |
| font-size: 0.9rem; | |
| } | |
| .anycoder-link { | |
| display: inline-block; | |
| margin-top: 10px; | |
| color: var(--sand); | |
| text-decoration: none; | |
| font-weight: 600; | |
| transition: all 0.3s ease; | |
| border-bottom: 1px solid transparent; | |
| } | |
| .anycoder-link:hover { | |
| border-bottom-color: var(--seafoam); | |
| transform: scale(1.05); | |
| } | |
| /* Responsive */ | |
| @media (max-width: 600px) { | |
| header { | |
| padding: 40px 15px 20px; | |
| } | |
| .poem-container { | |
| padding: 30px 20px; | |
| } | |
| .otter { | |
| width: clamp(150px, 50vw, 250px); | |
| height: clamp(150px, 50vw, 250px); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="ocean-bg" id="oceanBg"> | |
| <div class="wave"></div> | |
| <div class="wave"></div> | |
| <div class="wave"></div> | |
| </div> | |
| <header> | |
| <div class="flag-badge">🇪🇸 España</div> | |
| <h1>Marcos</h1> | |
| <p class="subtitle">La lontra spagnola che ha conquistato il mare</p> | |
| </header> | |
| <div class="otter-container"> | |
| <div class="water-ring"></div> | |
| <div class="water-ring"></div> | |
| <div class="water-ring"></div> | |
| <div class="otter"> | |
| <div class="otter-body"> | |
| <div class="otter-ears"> | |
| <div class="ear left"></div> | |
| <div class="ear right"></div> | |
| </div> | |
| <div class="otter-face"> | |
| <div class="otter-eye left"></div> | |
| <div class="otter-eye right"></div> | |
| <div class="otter-whiskers"> | |
| <div class="whisker left-1"></div> | |
| <div class="whisker left-2"></div> | |
| <div class="whisker right-1"></div> | |
| <div class="whisker right-2"></div> | |
| </div> | |
| <div class="otter-nose"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="click-hint">✨ Clicca intorno per creare magia ✨</div> | |
| <section class="poem-section"> | |
| <div class="poem-container"> | |
| <h2 class="poem-title">Sussurri d'Acqua - Per Marcos</h2> | |
| <div class="poem-content"> | |
| <p>Tra le acque cristalline del mare spagnolo,<br> | |
| nuota libero e felice il nostro caro Marcos,<br> | |
| con pelo lucido come seta bagnata,<br> | |
| e occhi profondi che raccontano storie antiche.</p> | |
| <p>Gioca tra le onde con grazia infinita,<br> | |
| il suo sorriso dolce conquista chi lo osserva,<br> | |
| è il re delle acque, splendido e fiero,<br> | |
| il piccolo marinaio dal cuore sincero.</p> | |
| <p>Marcos, Marcos, nome che risuona<br> | |
| come il battito delle onde al vento,<br> | |
| sei gioia pura, sei pace e allegria,<br> | |
| la lontra che illumina questa terra spagnola.</p> | |
| <p>Che la tua vita sia sempre serena,<br> | |
| tra pesciolini e schiuma marina,<br> | |
| tu sei tesoro, sei magia vivente,<br> | |
| Marcos, la lontra più bella della regione.</p> | |
| <p>E quando il sole tramonta sul mare,<br> | |
| le stelle riflettono sulla superficie,<br> | |
| Marcos nuota ancora felice nel blu,<br> | |
| simbolo eterno di libertà e di virtù.</p> | |
| </div> | |
| <div class="poem-signature"> | |
| — Con amore, dalla Italia 🇮🇹 | |
| </div> | |
| </div> | |
| </section> | |
| <footer> | |
| <p>🐾 Un tribute alla meravigliosa fauna spagnola 🐾</p> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link"> | |
| Built with anycoder | |
| </a> | |
| </footer> | |
| <script> | |
| // Create bubbles | |
| function createBubble() { | |
| const bubble = document.createElement('div'); | |
| bubble.className = 'bubble'; | |
| const size = Math.random() * 20 + 10; | |
| bubble.style.width = size + 'px'; | |
| bubble.style.height = size + 'px'; | |
| bubble.style.left = Math.random() * 100 + '%'; | |
| bubble.style.animationDuration = (Math.random() * 10 + 10) + 's'; | |
| bubble.style.animationDelay = (Math.random() * 5) + 's'; | |
| document.getElementById('oceanBg').appendChild(bubble); | |
| setTimeout(() => { | |
| bubble.remove(); | |
| }, 15000); | |
| } | |
| // Create initial bubbles | |
| for (let i = 0; i < 15; i++) { | |
| setTimeout(createBubble, i * 300); | |
| } | |
| // Continuous bubble creation | |
| setInterval(createBubble, 2000); | |
| // Click effect - create hearts | |
| document.addEventListener('click', (e) => { | |
| const heart = document.createElement('div'); | |
| heart.className = 'heart-float'; | |
| heart.innerHTML = ['💙', '💜', '🧡', '💛', '🤍'][Math.floor(Math.random() * 5)]; | |
| heart.style.left = e.clientX - 15 + 'px'; | |
| heart.style.top = e.clientY - 15 + 'px'; | |
| document.body.appendChild(heart); | |
| setTimeout(() => { | |
| heart.remove(); | |
| }, 4000); | |
| }); | |
| // Add some random sparkle effects | |
| function createSparkle(x, y) { | |
| const sparkle = document.createElement('div'); | |
| sparkle.style.cssText = ` | |
| position: fixed; | |
| left: ${x}px; | |
| top: ${y}px; | |
| width: 10px; | |
| height: 10px; | |
| background: radial-gradient(circle, white, transparent); | |
| border-radius: 50%; | |
| pointer-events: none; | |
| animation: sparkle 1s ease-out forwards; | |
| z-index: 1000; | |
| `; | |
| document.body.appendChild(sparkle); | |
| setTimeout(() => sparkle.remove(), 1000); | |
| } | |
| // Add sparkle animation | |
| const style = document.createElement('style'); | |
| style.textContent = ` | |
| @keyframes sparkle { | |
| 0% { transform: scale(0); opacity: 1; } | |
| 50% { transform: scale(2); opacity: 0.8; } | |
| 100% { transform: scale(0); opacity: 0; } | |
| } | |
| `; | |
| document.head.appendChild(style); | |
| // Random sparkles around the otter | |
| setInterval(() => { | |
| const otter = document.querySelector('.otter-container'); | |
| const rect = otter.getBoundingClientRect(); | |
| const x = rect.left + Math.random() * rect.width; | |
| const y = rect.top + Math.random() * rect.height; | |
| createSparkle(x, y); | |
| }, 500); | |
| </script> | |
| </body> | |
| </html> |