Spaces:

mpasqua
/

anycoder-b9be9591

Running

App Files Files Community

mpasqua commited on 23 days ago

Commit

1452929

verified ·

1 Parent(s): 2a7fc34

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +682 -19

index.html CHANGED Viewed

@@ -1,19 +1,682 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<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>