Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Hi!</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| :root { | |
| --primary-color: #667eea; | |
| --secondary-color: #764ba2; | |
| --text-color: #2d3748; | |
| --bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| background: var(--bg-gradient); | |
| overflow: hidden; | |
| } | |
| /* Floating circles background */ | |
| .background-shapes { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| overflow: hidden; | |
| z-index: 0; | |
| pointer-events: none; | |
| } | |
| .shape { | |
| position: absolute; | |
| border-radius: 50%; | |
| background: rgba(255, 255, 255, 0.1); | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| .shape:nth-child(1) { | |
| width: 80px; | |
| height: 80px; | |
| top: 10%; | |
| left: 10%; | |
| animation-delay: 0s; | |
| } | |
| .shape:nth-child(2) { | |
| width: 120px; | |
| height: 120px; | |
| top: 60%; | |
| left: 80%; | |
| animation-delay: 1s; | |
| } | |
| .shape:nth-child(3) { | |
| width: 60px; | |
| height: 60px; | |
| top: 80%; | |
| left: 20%; | |
| animation-delay: 2s; | |
| } | |
| .shape:nth-child(4) { | |
| width: 100px; | |
| height: 100px; | |
| top: 20%; | |
| left: 70%; | |
| animation-delay: 3s; | |
| } | |
| .shape:nth-child(5) { | |
| width: 40px; | |
| height: 40px; | |
| top: 40%; | |
| left: 40%; | |
| animation-delay: 4s; | |
| } | |
| @keyframes float { | |
| 0%, 100% { | |
| transform: translateY(0) rotate(0deg); | |
| } | |
| 50% { | |
| transform: translateY(-20px) rotate(180deg); | |
| } | |
| } | |
| /* Header */ | |
| header { | |
| position: relative; | |
| z-index: 10; | |
| padding: 1rem 2rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| } | |
| .logo { | |
| font-size: 1.2rem; | |
| font-weight: 600; | |
| color: white; | |
| text-decoration: none; | |
| padding: 0.5rem 1rem; | |
| border-radius: 25px; | |
| background: rgba(255, 255, 255, 0.2); | |
| transition: all 0.3s ease; | |
| } | |
| .logo:hover { | |
| background: rgba(255, 255, 255, 0.3); | |
| transform: scale(1.05); | |
| } | |
| /* Main content */ | |
| main { | |
| flex: 1; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| position: relative; | |
| z-index: 10; | |
| } | |
| .greeting-container { | |
| text-align: center; | |
| padding: 2rem; | |
| } | |
| .greeting { | |
| font-size: clamp(3rem, 15vw, 12rem); | |
| font-weight: 800; | |
| color: white; | |
| text-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); | |
| animation: pulse 2s ease-in-out infinite; | |
| letter-spacing: -0.05em; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { | |
| transform: scale(1); | |
| } | |
| 50% { | |
| transform: scale(1.05); | |
| } | |
| } | |
| .sub-greeting { | |
| font-size: clamp(1rem, 4vw, 2rem); | |
| color: rgba(255, 255, 255, 0.9); | |
| margin-top: 1rem; | |
| opacity: 0; | |
| animation: fadeInUp 1s ease-out 0.5s forwards; | |
| } | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| /* Interactive wave effect */ | |
| .wave-hand { | |
| display: inline-block; | |
| animation: wave 2s ease-in-out infinite; | |
| transform-origin: 70% 70%; | |
| } | |
| @keyframes wave { | |
| 0%, 100% { | |
| transform: rotate(0deg); | |
| } | |
| 20% { | |
| transform: rotate(14deg); | |
| } | |
| 40% { | |
| transform: rotate(-8deg); | |
| } | |
| 60% { | |
| transform: rotate(14deg); | |
| } | |
| 80% { | |
| transform: -8deg; | |
| } | |
| } | |
| /* Footer */ | |
| footer { | |
| position: relative; | |
| z-index: 10; | |
| padding: 1.5rem; | |
| text-align: center; | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| } | |
| .built-with { | |
| color: rgba(255, 255, 255, 0.8); | |
| font-size: 0.9rem; | |
| text-decoration: none; | |
| padding: 0.5rem 1rem; | |
| border-radius: 20px; | |
| background: rgba(255, 255, 255, 0.15); | |
| transition: all 0.3s ease; | |
| display: inline-block; | |
| } | |
| .built-with:hover { | |
| background: rgba(255, 255, 255, 0.25); | |
| color: white; | |
| transform: translateY(-2px); | |
| } | |
| /* Responsive adjustments */ | |
| @media (max-width: 768px) { | |
| header { | |
| padding: 1rem; | |
| } | |
| .greeting-container { | |
| padding: 1rem; | |
| } | |
| .logo { | |
| font-size: 1rem; | |
| padding: 0.4rem 0.8rem; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .shape:nth-child(3) { | |
| left: 60%; | |
| } | |
| .shape:nth-child(4) { | |
| left: 10%; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Background shapes --> | |
| <div class="background-shapes"> | |
| <div class="shape"></div> | |
| <div class="shape"></div> | |
| <div class="shape"></div> | |
| <div class="shape"></div> | |
| <div class="shape"></div> | |
| </div> | |
| <!-- Header --> | |
| <header> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="logo"> | |
| ✨ Built with anycoder | |
| </a> | |
| </header> | |
| <!-- Main content --> | |
| <main> | |
| <div class="greeting-container"> | |
| <h1 class="greeting"> | |
| <span class="wave-hand">👋</span> Hi! | |
| </h1> | |
| <p class="sub-greeting">Welcome! Great to see you here.</p> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with"> | |
| 🤖 Built with anycoder | |
| </a> | |
| </footer> | |
| <script> | |
| // Add click anywhere to create ripple effect | |
| document.addEventListener('click', function(e) { | |
| const ripple = document.createElement('div'); | |
| ripple.style.cssText = ` | |
| position: fixed; | |
| width: 20px; | |
| height: 20px; | |
| background: rgba(255, 255, 255, 0.5); | |
| border-radius: 50%; | |
| pointer-events: none; | |
| transform: translate(-50%, -50%); | |
| animation: rippleEffect 0.6s ease-out forwards; | |
| left: ${e.clientX}px; | |
| top: ${e.clientY}px; | |
| z-index: 1000; | |
| `; | |
| document.body.appendChild(ripple); | |
| setTimeout(() => ripple.remove(), 600); | |
| }); | |
| // Add ripple animation keyframe dynamically | |
| const style = document.createElement('style'); | |
| style.textContent = ` | |
| @keyframes rippleEffect { | |
| to { | |
| transform: translate(-50%, -50%) scale(20); | |
| opacity: 0; | |
| } | |
| } | |
| `; | |
| document.head.appendChild(style); | |
| // Add parallax effect to shapes on mouse move | |
| document.addEventListener('mousemove', function(e) { | |
| const shapes = document.querySelectorAll('.shape'); | |
| const x = (e.clientX / window.innerWidth - 0.5) * 20; | |
| const y = (e.clientY / window.innerHeight - 0.5) * 20; | |
| shapes.forEach((shape, index) => { | |
| const speed = (index + 1) * 0.5; | |
| shape.style.transform = `translate(${x * speed}px, ${y * speed}px)`; | |
| }); | |
| }); | |
| // Add subtle hover effect to greeting | |
| const greeting = document.querySelector('.greeting'); | |
| greeting.addEventListener('mouseenter', function() { | |
| this.style.transition = 'transform 0.3s ease'; | |
| this.style.transform = 'scale(1.1)'; | |
| }); | |
| greeting.addEventListener('mouseleave', function() { | |
| this.style.transform = 'scale(1)'; | |
| }); | |
| console.log('👋 Hi there! Thanks for visiting!'); | |
| </script> | |
| </body> | |
| </html> |