Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Hello World - Interactive Experience</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| :root { | |
| --primary-color: #667eea; | |
| --secondary-color: #764ba2; | |
| --text-color: #ffffff; | |
| --bg-color: #0f0f23; | |
| --card-bg: rgba(255, 255, 255, 0.05); | |
| --border-color: rgba(255, 255, 255, 0.1); | |
| --shadow-color: rgba(102, 126, 234, 0.5); | |
| } | |
| [data-theme="light"] { | |
| --primary-color: #667eea; | |
| --secondary-color: #764ba2; | |
| --text-color: #1a202c; | |
| --bg-color: #f7fafc; | |
| --card-bg: rgba(255, 255, 255, 0.8); | |
| --border-color: rgba(0, 0, 0, 0.1); | |
| --shadow-color: rgba(102, 126, 234, 0.3); | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; | |
| background: var(--bg-color); | |
| color: var(--text-color); | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| /* Animated Background */ | |
| .bg-animation { | |
| position: fixed; | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| left: 0; | |
| z-index: 0; | |
| background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); | |
| opacity: 0.1; | |
| } | |
| .bg-animation::before { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| left: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: radial-gradient(circle, var(--primary-color) 0%, transparent 70%); | |
| animation: rotate 20s linear infinite; | |
| } | |
| @keyframes rotate { | |
| 0% { | |
| transform: rotate(0deg); | |
| } | |
| 100% { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| /* Header */ | |
| header { | |
| position: relative; | |
| z-index: 100; | |
| padding: 20px; | |
| background: var(--card-bg); | |
| backdrop-filter: blur(10px); | |
| border-bottom: 1px solid var(--border-color); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| gap: 15px; | |
| } | |
| .logo { | |
| font-size: 1.5rem; | |
| font-weight: bold; | |
| background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .header-controls { | |
| display: flex; | |
| gap: 15px; | |
| align-items: center; | |
| } | |
| .theme-toggle { | |
| width: 50px; | |
| height: 25px; | |
| background: var(--border-color); | |
| border-radius: 25px; | |
| position: relative; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .theme-toggle::after { | |
| content: '🌙'; | |
| position: absolute; | |
| width: 21px; | |
| height: 21px; | |
| background: white; | |
| border-radius: 50%; | |
| top: 2px; | |
| left: 2px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 12px; | |
| transition: all 0.3s ease; | |
| } | |
| [data-theme="light"] .theme-toggle::after { | |
| content: '☀️'; | |
| left: calc(100% - 23px); | |
| } | |
| .language-selector { | |
| padding: 8px 15px; | |
| background: var(--card-bg); | |
| border: 1px solid var(--border-color); | |
| border-radius: 20px; | |
| color: var(--text-color); | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .language-selector:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px var(--shadow-color); | |
| } | |
| /* Main Content */ | |
| .container { | |
| position: relative; | |
| z-index: 10; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 40px 20px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| min-height: calc(100vh - 85px); | |
| justify-content: center; | |
| } | |
| .hello-world { | |
| font-size: clamp(3rem, 10vw, 8rem); | |
| font-weight: 900; | |
| text-align: center; | |
| margin-bottom: 30px; | |
| position: relative; | |
| letter-spacing: -2px; | |
| animation: fadeInUp 1s ease-out; | |
| } | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .gradient-text { | |
| background: linear-gradient(135deg, var(--primary-color), var(--secondary-color), #f093fb, #f5576c); | |
| background-size: 300% 300%; | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| animation: gradientShift 5s ease infinite; | |
| } | |
| @keyframes gradientShift { | |
| 0%, | |
| 100% { | |
| background-position: 0% 50%; | |
| } | |
| 50% { | |
| background-position: 100% 50%; | |
| } | |
| } | |
| .subtitle { | |
| font-size: 1.5rem; | |
| opacity: 0.8; | |
| margin-bottom: 40px; | |
| animation: fadeInUp 1s ease-out 0.2s both; | |
| } | |
| /* Interactive Cards */ | |
| .cards-container { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 25px; | |
| width: 100%; | |
| max-width: 900px; | |
| margin-bottom: 40px; | |
| } | |
| .card { | |
| background: var(--card-bg); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid var(--border-color); | |
| border-radius: 20px; | |
| padding: 30px; | |
| text-align: center; | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| animation: fadeInUp 1s ease-out calc(0.4s + var(--index)) both; | |
| } | |
| .card:hover { | |
| transform: translateY(-10px) scale(1.05); | |
| box-shadow: 0 20px 40px var(--shadow-color); | |
| border-color: var(--primary-color); | |
| } | |
| .card-icon { | |
| font-size: 3rem; | |
| margin-bottom: 15px; | |
| } | |
| .card-title { | |
| font-size: 1.3rem; | |
| font-weight: 600; | |
| margin-bottom: 10px; | |
| color: var(--primary-color); | |
| } | |
| .card-description { | |
| opacity: 0.7; | |
| line-height: 1.6; | |
| } | |
| /* Interactive Button */ | |
| .cta-button { | |
| padding: 18px 50px; | |
| font-size: 1.2rem; | |
| font-weight: 600; | |
| background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); | |
| color: white; | |
| border: none; | |
| border-radius: 50px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| animation: fadeInUp 1s ease-out 0.6s both; | |
| } | |
| .cta-button::before { | |
| content: ''; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| width: 0; | |
| height: 0; | |
| border-radius: 50%; | |
| background: rgba(255, 255, 255, 0.3); | |
| transform: translate(-50%, -50%); | |
| transition: width 0.6s, height 0.6s; | |
| } | |
| .cta-button:hover::before { | |
| width: 300px; | |
| height: 300px; | |
| } | |
| .cta-button:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 15px 30px var(--shadow-color); | |
| } | |
| /* Particle Canvas */ | |
| #particleCanvas { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 1; | |
| pointer-events: none; | |
| } | |
| /* Floating Animation */ | |
| .floating { | |
| animation: floating 3s ease-in-out infinite; | |
| } | |
| @keyframes floating { | |
| 0%, | |
| 100% { | |
| transform: translateY(0px); | |
| } | |
| 50% { | |
| transform: translateY(-20px); | |
| } | |
| } | |
| /* Typing Animation */ | |
| .typing-container { | |
| min-height: 40px; | |
| margin-bottom: 30px; | |
| font-size: 1.2rem; | |
| font-family: 'Courier New', monospace; | |
| } | |
| .typing-text { | |
| border-right: 3px solid var(--primary-color); | |
| animation: blink 0.7s infinite; | |
| } | |
| @keyframes blink { | |
| 0%, | |
| 50% { | |
| border-color: var(--primary-color); | |
| } | |
| 51%, | |
| 100% { | |
| border-color: transparent; | |
| } | |
| } | |
| /* Footer */ | |
| footer { | |
| position: relative; | |
| z-index: 100; | |
| padding: 20px; | |
| text-align: center; | |
| background: var(--card-bg); | |
| backdrop-filter: blur(10px); | |
| border-top: 1px solid var(--border-color); | |
| margin-top: auto; | |
| } | |
| .footer-link { | |
| color: var(--primary-color); | |
| text-decoration: none; | |
| font-weight: 600; | |
| transition: all 0.3s ease; | |
| } | |
| .footer-link:hover { | |
| text-decoration: underline; | |
| transform: scale(1.05); | |
| display: inline-block; | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 768px) { | |
| .hello-world { | |
| font-size: clamp(2.5rem, 12vw, 5rem); | |
| } | |
| .subtitle { | |
| font-size: 1.2rem; | |
| } | |
| .cards-container { | |
| grid-template-columns: 1fr; | |
| max-width: 400px; | |
| } | |
| } | |
| /* Toast Notification */ | |
| .toast { | |
| position: fixed; | |
| bottom: 30px; | |
| right: 30px; | |
| background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); | |
| color: white; | |
| padding: 15px 25px; | |
| border-radius: 10px; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); | |
| transform: translateX(400px); | |
| transition: transform 0.3s ease; | |
| z-index: 1000; | |
| } | |
| .toast.show { | |
| transform: translateX(0); | |
| } | |
| </style> | |
| </head> | |
| <body data-theme="dark"> | |
| <div class="bg-animation"></div> | |
| <canvas id="particleCanvas"></canvas> | |
| <header> | |
| <div class="logo">Hello World</div> | |
| <div class="header-controls"> | |
| <select class="language-selector" id="languageSelector"> | |
| <option value="en">English</option> | |
| <option value="es">Español</option> | |
| <option value="fr">Français</option> | |
| <option value="de">Deutsch</option> | |
| <option value="ja">日本語</option> | |
| <option value="zh">中文</option> | |
| </select> | |
| <div class="theme-toggle" id="themeToggle"></div> | |
| </div> | |
| </header> | |
| <main class="container"> | |
| <div class="typing-container"> | |
| <span class="typing-text" id="typingText"></span> | |
| </div> | |
| <h1 class="hello-world gradient-text floating"> | |
| <span id="helloText">Hello</span> <span id="worldText">World</span> | |
| </h1> | |
| <p class="subtitle" id="subtitle">Welcome to the future of web experiences</p> | |
| <div class="cards-container"> | |
| <div class="card" style="--index: 0s" onclick="handleCardClick('design')"> | |
| <div class="card-icon">🎨</div> | |
| <h3 class="card-title">Modern Design</h3> | |
| <p class="card-description">Beautiful gradients and animations that captivate</p> | |
| </div> | |
| <div class="card" style="--index: 0.1s" onclick="handleCardClick('interactive')"> | |
| <div class="card-icon">⚡</div> | |
| <h3 class="card-title">Interactive</h3> | |
| <p class="card-description">Click, hover, and explore dynamic elements</p> | |
| </div> | |
| <div class="card" style="--index: 0.2s" onclick="handleCardClick('responsive')"> | |
| <div class="card-icon">📱</div> | |
| <h3 class="card-title">Responsive</h3> | |
| <p class="card-description">Perfectly adapted for every screen size</p> | |
| </div> | |
| </div> | |
| <button class="cta-button" onclick="handleCTAClick()"> | |
| Experience More | |
| </button> | |
| </main> | |
| <footer> | |
| <p>Created with ❤️ | <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" | |
| class="footer-link">Built with anycoder</a></p> | |
| </footer> | |
| <div class="toast" id="toast"></div> | |
| <script> | |
| // Translations | |
| const translations = { | |
| en: { hello: 'Hello', world: 'World', subtitle: 'Welcome to the future of web experiences' }, | |
| es: { hello: 'Hola', world: 'Mundo', subtitle: 'Bienvenido al futuro de las experiencias web' }, | |
| fr: { hello: 'Bonjour', world: 'Monde', subtitle: 'Bienvenue dans le futur des expériences web' }, | |
| de: { hello: 'Hallo', world: 'Welt', subtitle: 'Willkommen in der Zukunft des Web-Erlebnisses' }, | |
| ja: { hello: 'こんにちは', world: '世界', subtitle: 'ウェブ体験の未来へようこそ' }, | |
| zh: { hello: '你好', world: '世界', subtitle: '欢迎来到网络体验的未来' } | |
| }; | |
| // Theme Toggle | |
| const themeToggle = document.getElementById('themeToggle'); | |
| const body = document.body; | |
| themeToggle.addEventListener('click', () => { | |
| const currentTheme = body.getAttribute('data-theme'); | |
| const newTheme = currentTheme === 'dark' ? 'light' : 'dark'; | |
| body.setAttribute('data-theme', newTheme); | |
| localStorage.setItem('theme', newTheme); | |
| }); | |
| // Load saved theme | |
| const savedTheme = localStorage.getItem('theme') || 'dark'; | |
| body.setAttribute('data-theme', savedTheme); | |
| // Language Selector | |
| const languageSelector = document.getElementById('languageSelector'); | |
| const helloText = document.getElementById('helloText'); | |
| const worldText = document.getElementById('worldText'); | |
| const subtitle = document.getElementById('subtitle'); | |
| languageSelector.addEventListener('change', (e) => { | |
| const lang = e.target.value; | |
| const translation = translations[lang]; | |
| helloText.textContent = translation.hello; | |
| worldText.textContent = translation.world; | |
| subtitle.textContent = translation.subtitle; | |
| showToast(`Language changed to ${e.target.options[e.target.selectedIndex].text}`); | |
| }); | |
| // Typing Animation | |
| const messages = [ | |
| 'Initializing experience...', | |
| 'Loading modern UI...', | |
| 'Preparing interactions...', | |
| 'Welcome aboard!' | |
| ]; | |
| let messageIndex = 0; | |
| let charIndex = 0; | |
| let isDeleting = false; | |
| function typeMessage() { | |
| const typingText = document.getElementById('typingText'); | |
| const currentMessage = messages[messageIndex]; | |
| if (isDeleting) { | |
| typingText.textContent = currentMessage.substring(0, charIndex - 1); | |
| charIndex--; | |
| } else { | |
| typingText.textContent = currentMessage.substring(0, charIndex + 1); | |
| charIndex++; | |
| } | |
| let typeSpeed = isDeleting ? 50 : 100; | |
| if (!isDeleting && charIndex === currentMessage.length) { | |
| typeSpeed = 2000; | |
| isDeleting = true; | |
| } else if (isDeleting && charIndex === 0) { | |
| isDeleting = false; | |
| messageIndex = (messageIndex + 1) % messages.length; | |
| typeSpeed = 500; | |
| } | |
| setTimeout(typeMessage, typeSpeed); | |
| } | |
| typeMessage(); | |
| // Particle Animation | |
| const canvas = document.getElementById('particleCanvas'); | |
| const ctx = canvas.getContext('2d'); | |
| let particles = []; | |
| function resizeCanvas() { | |
| canvas.width = window.innerWidth; | |
| canvas.height = window.innerHeight; | |
| } | |
| class Particle { | |
| constructor() { | |
| this.x = Math.random() * canvas.width; | |
| this.y = Math.random() * canvas.height; | |
| this.size = Math.random() * 3 + 1; | |
| this.speedX = Math.random() * 2 - 1; | |
| this.speedY = Math.random() * 2 - 1; | |
| this.opacity = Math.random() * 0.5 + 0.2; | |
| } | |
| update() { | |
| this.x += this.speedX; | |
| this.y += this.speedY; | |
| if (this.x > canvas.width) this.x = 0; | |
| if (this.x < 0) this.x = canvas.width; | |
| if (this.y > canvas.height) this.y = 0; | |
| if (this.y < 0) this.y = canvas.height; | |
| } | |
| draw() { | |
| ctx.fillStyle = `rgba(102, 126, 234, ${this.opacity})`; | |
| ctx.beginPath(); | |
| ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); | |
| ctx.fill(); | |
| } | |
| } | |
| function initParticles() { | |
| particles = []; | |
| for (let i = 0; i < 50; i++) { | |
| particles.push(new Particle()); | |
| } | |
| } | |
| function animateParticles() { | |
| ctx.clearRect(0, 0, canvas.width, canvas.height); | |
| particles.forEach(particle => { | |
| particle.update(); | |
| particle.draw(); | |
| }); | |
| // Draw connections | |
| particles.forEach((particle, index) => { | |
| for (let j = index + 1; j < particles.length; j++) { | |
| const dx = particles[j].x - particle.x; | |
| const dy = particles[j].y - particle.y; | |
| const distance = Math.sqrt(dx * dx + dy * dy); | |
| if (distance < 150) { | |
| ctx.strokeStyle = `rgba(102, 126, 234, ${0.1 * (1 - distance / 150)})`; | |
| ctx.lineWidth = 1; | |
| ctx.beginPath(); | |
| ctx.moveTo(particle.x, particle.y); | |
| ctx.lineTo(particles[j].x, particles[j].y); | |
| ctx.stroke(); | |
| } | |
| } | |
| }); | |
| requestAnimationFrame(animateParticles); | |
| } | |
| window.addEventListener('resize', () => { | |
| resizeCanvas(); | |
| initParticles(); | |
| }); | |
| resizeCanvas(); | |
| initParticles(); | |
| animateParticles(); | |
| // Card Click Handler | |
| function handleCardClick(type) { | |
| const messages = { | |
| design: 'Design is not just what it looks like. Design is how it works!', | |
| interactive: 'Interactivity makes the web come alive!', | |
| responsive: 'Responsive design ensures everyone gets a great experience!' | |
| }; | |
| showToast(messages[type]); | |
| } | |
| // CTA Button Handler | |
| function handleCTAClick() { | |
| const helloWorld = document.querySelector('.hello-world'); | |
| helloWorld.style.transform = 'scale(1.2) rotate(5deg)'; | |
| setTimeout(() => { | |
| helloWorld.style.transform = 'scale(1) rotate(0deg)'; | |
| }, 300); | |
| showToast('Amazing! You discovered the secret animation! 🎉'); | |
| // Create confetti effect | |
| createConfetti(); | |
| } | |
| // Toast Notification | |
| function showToast(message) { | |
| const toast = document.getElementById('toast'); | |
| toast.textContent = message; | |
| toast.classList.add('show'); | |
| setTimeout(() => { | |
| toast.classList.remove('show'); | |
| }, 3000); | |
| } | |
| // Confetti Effect | |
| function createConfetti() { | |
| const colors = ['#667eea', '#764ba2', '#f093fb', '#f5576c']; | |
| const confettiCount = 50; | |
| for (let i = 0; i < confettiCount; i++) { | |
| const confetti = document.createElement('div'); | |
| confetti.style.position = 'fixed'; | |
| confetti.style.width = '10px'; | |
| confetti.style.height = '10px'; | |
| confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; | |
| confetti.style.left = Math.random() * 100 + '%'; | |
| confetti.style.top = '-10px'; | |
| confetti.style.opacity = '1'; | |
| confetti.style.transform = `rotate(${Math.random() * 360}deg)`; | |
| confetti.style.transition = 'all 2s ease-out'; | |
| confetti.style.zIndex = '9999'; | |
| confetti.style.pointerEvents = 'none'; | |
| document.body.appendChild(confetti); | |
| setTimeout(() => { | |
| confetti.style.top = '100%'; | |
| confetti.style.opacity = '0'; | |
| confetti.style.transform = `rotate(${Math.random() * 720}deg)`; | |
| }, 10); | |
| setTimeout(() => { | |
| confetti.remove(); | |
| }, 2000); | |
| } | |
| } | |
| // Mouse interaction with particles | |
| canvas.style.pointerEvents = 'auto'; | |
| canvas.addEventListener('mousemove', (e) => { | |
| const mouseX = e.clientX; | |
| const mouseY = e.clientY; | |
| particles.forEach(particle => { | |
| const dx = mouseX - particle.x; | |
| const dy = mouseY - particle.y; | |
| const distance = Math.sqrt(dx * dx + dy * dy); | |
| if (distance < 100) { | |
| const force = (100 - distance) / 100; | |
| particle.x -= (dx / distance) * force * 2; | |
| particle.y -= (dy / distance) * force * 2; | |
| } | |
| }); | |
| }); | |
| // Initial welcome message | |
| setTimeout(() => { | |
| showToast('Welcome! Explore the interactive features! 👋'); | |
| }, 2000); | |
| </script> | |
| </body> | |
| </html> |