Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Pelican Cyclist - Interactive SVG Art</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| :root { | |
| --primary-color: #2563eb; | |
| --secondary-color: #10b981; | |
| --accent-color: #f59e0b; | |
| --bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| --text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); | |
| } | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| background: var(--bg-gradient); | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| color: white; | |
| overflow-x: hidden; | |
| } | |
| header { | |
| background: rgba(0, 0, 0, 0.2); | |
| backdrop-filter: blur(10px); | |
| padding: 1rem 2rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| h1 { | |
| font-size: clamp(1.5rem, 4vw, 2.5rem); | |
| text-shadow: var(--text-shadow); | |
| background: linear-gradient(45deg, #fff, #f0f0f0); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .credits { | |
| font-size: clamp(0.8rem, 2vw, 1rem); | |
| opacity: 0.9; | |
| } | |
| .credits a { | |
| color: var(--accent-color); | |
| text-decoration: none; | |
| transition: all 0.3s ease; | |
| font-weight: bold; | |
| } | |
| .credits a:hover { | |
| color: white; | |
| text-shadow: 0 0 10px var(--accent-color); | |
| transform: scale(1.05); | |
| } | |
| main { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 2rem; | |
| position: relative; | |
| } | |
| .svg-container { | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| border-radius: 20px; | |
| padding: clamp(1rem, 3vw, 2rem); | |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); | |
| max-width: 90vw; | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| .controls { | |
| margin-top: 2rem; | |
| display: flex; | |
| gap: 1rem; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| } | |
| button { | |
| background: rgba(255, 255, 255, 0.2); | |
| backdrop-filter: blur(10px); | |
| border: 2px solid rgba(255, 255, 255, 0.3); | |
| color: white; | |
| padding: 0.8rem 1.5rem; | |
| border-radius: 50px; | |
| cursor: pointer; | |
| font-size: 1rem; | |
| font-weight: bold; | |
| transition: all 0.3s ease; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| button:hover { | |
| background: rgba(255, 255, 255, 0.3); | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); | |
| } | |
| button:active { | |
| transform: translateY(0); | |
| } | |
| .scene { | |
| width: min(800px, 90vw); | |
| height: auto; | |
| } | |
| /* SVG Animations */ | |
| .wheel { | |
| animation: rotate 3s linear infinite; | |
| transform-origin: center; | |
| } | |
| @keyframes rotate { | |
| from { transform: rotate(0deg); } | |
| to { transform: rotate(360deg); } | |
| } | |
| .pedal { | |
| animation: pedalRotate 2s linear infinite; | |
| transform-origin: center; | |
| } | |
| @keyframes pedalRotate { | |
| from { transform: rotate(0deg); } | |
| to { transform: rotate(360deg); } | |
| } | |
| .wing { | |
| animation: flap 1.5s ease-in-out infinite; | |
| transform-origin: center; | |
| } | |
| @keyframes flap { | |
| 0%, 100% { transform: rotate(0deg); } | |
| 50% { transform: rotate(-10deg); } | |
| } | |
| .beak { | |
| animation: snap 2s ease-in-out infinite; | |
| transform-origin: center; | |
| } | |
| @keyframes snap { | |
| 0%, 100% { transform: rotate(0deg); } | |
| 50% { transform: rotate(-5deg); } | |
| } | |
| .cloud { | |
| animation: drift 20s linear infinite; | |
| } | |
| @keyframes drift { | |
| from { transform: translateX(-100px); } | |
| to { transform: translateX(calc(100vw + 100px)); } | |
| } | |
| .sun { | |
| animation: glow 4s ease-in-out infinite; | |
| } | |
| @keyframes glow { | |
| 0%, 100% { opacity: 0.8; } | |
| 50% { opacity: 1; } | |
| } | |
| @media (max-width: 768px) { | |
| header { | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .controls { | |
| flex-direction: column; | |
| } | |
| button { | |
| width: 100%; | |
| max-width: 300px; | |
| } | |
| } | |
| /* Accessibility */ | |
| @media (prefers-reduced-motion: reduce) { | |
| .wheel, .pedal, .wing, .beak, .cloud, .sun, .svg-container { | |
| animation: none; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>🦆 Pelican Cyclist</h1> | |
| <div class="credits">Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a></div> | |
| </header> | |
| <main> | |
| <div class="svg-container"> | |
| <svg class="scene" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg"> | |
| <!-- Background Sky --> | |
| <defs> | |
| <linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%"> | |
| <stop offset="0%" style="stop-color:#87CEEB;stop-opacity:1" /> | |
| <stop offset="100%" style="stop-color:#E0F6FF;stop-opacity:1" /> | |
| </linearGradient> | |
| <linearGradient id="groundGradient" x1="0%" y1="0%" x2="0%" y2="100%"> | |
| <stop offset="0%" style="stop-color:#90EE90;stop-opacity:1" /> | |
| <stop offset="100%" style="stop-color:#228B22;stop-opacity:1" /> | |
| </linearGradient> | |
| </defs> | |
| <rect width="800" height="600" fill="url(#skyGradient)"/> | |
| <!-- Animated Sun --> | |
| <circle class="sun" cx="700" cy="80" r="50" fill="#FFD700" opacity="0.9"/> | |
| <!-- Clouds --> | |
| <g class="cloud" style="animation-delay: 0s;"> | |
| <ellipse cx="200" cy="100" rx="60" ry="30" fill="white" opacity="0.8"/> | |
| <ellipse cx="250" cy="95" rx="50" ry="25" fill="white" opacity="0.8"/> | |
| <ellipse cx="150" cy="95" rx="40" ry="20" fill="white" opacity="0.8"/> | |
| </g> | |
| <g class="cloud" style="animation-delay: 5s;"> | |
| <ellipse cx="500" cy="80" rx="50" ry="25" fill="white" opacity="0.8"/> | |
| <ellipse cx="540" cy="75" rx="40" ry="20" fill="white" opacity="0.8"/> | |
| <ellipse cx="460" cy="75" rx="30" ry="15" fill="white" opacity="0.8"/> | |
| </g> | |
| <!-- Ground --> | |
| <rect y="500" width="800" height="100" fill="url(#groundGradient)"/> | |
| <!-- Road --> | |
| <rect y="480" width="800" height="40" fill="#555"/> | |
| <line x1="0" y1="500" x2="800" y2="500" stroke="white" stroke-width="3" stroke-dasharray="30,20"/> | |
| <!-- Bicycle --> | |
| <g id="bicycle" transform="translate(200, 350)"> | |
| <!-- Rear wheel --> | |
| <g class="wheel"> | |
| <circle cx="0" cy="100" r="60" fill="none" stroke="#333" stroke-width="8"/> | |
| <circle cx="0" cy="100" r="50" fill="none" stroke="#666" stroke-width="2"/> | |
| <line x1="0" y1="100" x2="0" y2="50" stroke="#666" stroke-width="2"/> | |
| <line x1="0" y1="100" x2="43.3" y2="75" stroke="#666" stroke-width="2"/> | |
| <line x1="0" y1="100" x2="43.3" y2="125" stroke="#666" stroke-width="2"/> | |
| <line x1="0" y1="100" x2="-43.3" y2="75" stroke="#666" stroke-width="2"/> | |
| <line x1="0" y1="100" x2="-43.3" y2="125" stroke="#666" stroke-width="2"/> | |
| </g> | |
| <!-- Front wheel --> | |
| <g class="wheel" transform="translate(200, 0)"> | |
| <circle cx="0" cy="100" r="60" fill="none" stroke="#333" stroke-width="8"/> | |
| <circle cx="0" cy="100" r="50" fill="none" stroke="#666" stroke-width="2"/> | |
| <line x1="0" y1="100" x2="0" y2="50" stroke="#666" stroke-width="2"/> | |
| <line x1="0" y1="100" x2="43.3" y2="75" stroke="#666" stroke-width="2"/> | |
| <line x1="0" y1="100" x2="43.3" y2="125" stroke="#666" stroke-width="2"/> | |
| <line x1="0" y1="100" x2="-43.3" y2="75" stroke="#666" stroke-width="2"/> | |
| <line x1="0" y1="100" x2="-43.3" y2="125" stroke="#666" stroke-width="2"/> | |
| </g> | |
| <!-- Frame --> | |
| <line x1="0" y1="100" x2="100" y2="50" stroke="#DC143C" stroke-width="6"/> | |
| <line x1="100" y1="50" x2="200" y2="100" stroke="#DC143C" stroke-width="6"/> | |
| <line x1="100" y1="50" x2="100" y2="100" stroke="#DC143C" stroke-width="6"/> | |
| <line x1="0" y1="100" x2="100" y2="100" stroke="#DC143C" stroke-width="6"/> | |
| <line x1="200" y1="100" x2="100" y2="100" stroke="#DC143C" stroke-width="6"/> | |
| <!-- Handlebars --> | |
| <line x1="200" y1="100" x2="210" y2="70" stroke="#333" stroke-width="6"/> | |
| <line x1="210" y1="70" x2="230" y2="70" stroke="#333" stroke-width="6"/> | |
| <!-- Seat --> | |
| <path d="M 90 40 Q 95 35 105 40 L 110 45 Q 105 50 95 50 Z" fill="#8B4513"/> | |
| <!-- Pedals --> | |
| <g class="pedal" transform="translate(100, 100)"> | |
| <circle cx="0" cy="0" r="8" fill="#666"/> | |
| <rect x="-20" y="-3" width="40" height="6" fill="#666" rx="3"/> | |
| <rect x="-5" y="-15" width="10" height="30" fill="#DC143C" rx="3"/> | |
| </g> | |
| </g> | |
| <!-- Pelican --> | |
| <g id="pelican" transform="translate(280, 220)"> | |
| <!-- Body --> | |
| <ellipse cx="0" cy="80" rx="60" ry="40" fill="white" stroke="#E0E0E0" stroke-width="2"/> | |
| <!-- Wing --> | |
| <g class="wing"> | |
| <ellipse cx="-30" cy="85" rx="35" ry="20" fill="#F5F5F5" stroke="#E0E0E0" stroke-width="2"/> | |
| <line x1="-50" y1="85" x2="-10" y2="95" stroke="#DDD" stroke-width="1"/> | |
| <line x1="-45" y1="80" x2="-5" y2="90" stroke="#DDD" stroke-width="1"/> | |
| </g> | |
| <!-- Head --> | |
| <circle cx="50" cy="60" r="25" fill="white" stroke="#E0E0E0" stroke-width="2"/> | |
| <!-- Eye --> | |
| <circle cx="55" cy="55" r="8" fill="white"/> | |
| <circle cx="57" cy="55" r="5" fill="#333"/> | |
| <circle cx="59" cy="53" r="2" fill="white"/> | |
| <!-- Beak --> | |
| <g class="beak"> | |
| <path d="M 75 65 Q 95 60 115 62 Q 100 70 75 68 Z" fill="#FFA500" stroke="#FF8C00" stroke-width="2"/> | |
| <path d="M 75 60 Q 90 58 105 60 Q 90 62 75 60 Z" fill="#FFB84D" stroke="#FF8C00" stroke-width="1"/> | |
| </g> | |
| <!-- Neck --> | |
| <path d="M 30 75 Q 35 60 40 50 Q 45 45 50 50" fill="white" stroke="#E0E0E0" stroke-width="2"/> | |
| <!-- Tail --> | |
| <path d="M -60 80 Q -80 75 -85 85 Q -70 85 -60 90 Z" fill="white" stroke="#E0E0E0" stroke-width="2"/> | |
| <!-- Legs --> | |
| <g id="legs"> | |
| <!-- Back leg --> | |
| <path d="M -10 110 L -5 130 L -5 145" stroke="#FFA500" stroke-width="6" stroke-linecap="round"/> | |
| <ellipse cx="-5" cy="150" rx="12" ry="5" fill="#FFA500"/> | |
| <!-- Front leg reaching pedal --> | |
| <path d="M 10 110 L 50 130 L 100 140" stroke="#FFA500" stroke-width="6" stroke-linecap="round"/> | |
| <ellipse cx="100" cy="145" rx="12" ry="5" fill="#FFA500"/> | |
| </g> | |
| </g> | |
| <!-- Motion lines --> | |
| <g opacity="0.3"> | |
| <line x1="150" y1="500" x2="80" y2="500" stroke="#FFF" stroke-width="3" stroke-linecap="round"/> | |
| <line x1="120" y1="520" x2="50" y2="520" stroke="#FFF" stroke-width="3" stroke-linecap="round"/> | |
| <line x1="180" y1="480" x2="110" y2="480" stroke="#FFF" stroke-width="3" stroke-linecap="round"/> | |
| </g> | |
| </svg> | |
| </div> | |
| <div class="controls"> | |
| <button onclick="toggleAnimations()">⏯️ Toggle Animation</button> | |
| <button onclick="changeColors()">🎨 Change Colors</button> | |
| <button onclick="boostSpeed()">⚡ Speed Boost</button> | |
| </div> | |
| </main> | |
| <script> | |
| let animationsEnabled = true; | |
| let colorIndex = 0; | |
| let speedMultiplier = 1; | |
| const colorSchemes = [ | |
| { primary: '#2563eb', secondary: '#10b981', accent: '#f59e0b' }, | |
| { primary: '#ec4899', secondary: '#8b5cf6', accent: '#06b6d4' }, | |
| { primary: '#ef4444', secondary: '#f59e0b', accent: '#10b981' }, | |
| { primary: '#6366f1', secondary: '#ec4899', accent: '#f59e0b' } | |
| ]; | |
| function toggleAnimations() { | |
| animationsEnabled = !animationsEnabled; | |
| const wheels = document.querySelectorAll('.wheel, .pedal, .wing, .beak, .cloud, .sun'); | |
| wheels.forEach(element => { | |
| if (animationsEnabled) { | |
| element.style.animationPlayState = 'running'; | |
| } else { | |
| element.style.animationPlayState = 'paused'; | |
| } | |
| }); | |
| const button = event.target; | |
| button.textContent = animationsEnabled ? '⏸️ Pause Animation' : '▶️ Play Animation'; | |
| } | |
| function changeColors() { | |
| colorIndex = (colorIndex + 1) % colorSchemes.length; | |
| const colors = colorSchemes[colorIndex]; | |
| document.documentElement.style.setProperty('--primary-color', colors.primary); | |
| document.documentElement.style.setProperty('--secondary-color', colors.secondary); | |
| document.documentElement.style.setProperty('--accent-color', colors.accent); | |
| // Update SVG colors | |
| const bicycleFrame = document.querySelectorAll('#bicycle line'); | |
| bicycleFrame.forEach(line => { | |
| if (line.getAttribute('stroke') === '#DC143C') { | |
| line.setAttribute('stroke', colors.primary); | |
| } | |
| }); | |
| const pedals = document.querySelectorAll('.pedal rect:last-child'); | |
| pedals.forEach(pedal => { | |
| pedal.setAttribute('fill', colors.accent); | |
| }); | |
| } | |
| function boostSpeed() { | |
| speedMultiplier = speedMultiplier === 1 ? 2 : 1; | |
| const animatedElements = document.querySelectorAll('.wheel, .pedal, .wing, .beak, .cloud, .sun'); | |
| animatedElements.forEach(element => { | |
| const currentDuration = parseFloat(getComputedStyle(element).animationDuration); | |
| element.style.animationDuration = `${currentDuration / speedMultiplier}s`; | |
| }); | |
| const button = event.target; | |
| button.textContent = speedMultiplier === 2 ? '🐌 Normal Speed' : '⚡ Speed Boost'; | |
| } | |
| // Add some interactivity to the pelican's eye | |
| const pelicanEye = document.querySelector('circle[cx="57"][cy="55"]'); | |
| let lookingRight = true; | |
| setInterval(() => { | |
| if (lookingRight) { | |
| pelicanEye.setAttribute('cx', '53'); | |
| } else { | |
| pelicanEye.setAttribute('cx', '57'); | |
| } | |
| lookingRight = !lookingRight; | |
| }, 2000); | |
| // Add click interaction to make the pelican "quack" | |
| const pelican = document.getElementById('pelican'); | |
| pelican.style.cursor = 'pointer'; | |
| pelican.addEventListener('click', () => { | |
| const quack = document.createElement('div'); | |
| quack.textContent = '🦆 QUACK!'; | |
| quack.style.position = 'absolute'; | |
| quack.style.left = '50%'; | |
| quack.style.top = '20%'; | |
| quack.style.transform = 'translateX(-50%)'; | |
| quack.style.fontSize = '2rem'; | |
| quack.style.fontWeight = 'bold'; | |
| quack.style.color = '#FFD700'; | |
| quack.style.textShadow = '2px 2px 4px rgba(0,0,0,0.5)'; | |
| quack.style.animation = 'float 2s ease-out forwards'; | |
| quack.style.pointerEvents = 'none'; | |
| quack.style.zIndex = '1000'; | |
| document.body.appendChild(quack); | |
| setTimeout(() => { | |
| quack.remove(); | |
| }, 2000); | |
| }); | |
| </script> | |
| </body> | |
| </html> |