Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Hi - Interactive Greeting</title> | |
| <!-- Importing Google Fonts --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;500;700;900&family=Playfair+Display:ital,wght@1,700&family=Space+Grotesk:wght@700&display=swap" rel="stylesheet"> | |
| <!-- Importing Phosphor Icons --> | |
| <script src="https://unpkg.com/@phosphor-icons/web"></script> | |
| <style> | |
| :root { | |
| --primary: #6366f1; | |
| --secondary: #a855f7; | |
| --accent: #ec4899; | |
| --bg-dark: #0f172a; | |
| --text-light: #f8fafc; | |
| --glass-bg: rgba(255, 255, 255, 0.05); | |
| --glass-border: rgba(255, 255, 255, 0.1); | |
| --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); | |
| --font-main: 'Outfit', sans-serif; | |
| --font-fancy: 'Playfair Display', serif; | |
| --font-tech: 'Space Grotesk', sans-serif; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: var(--font-main); | |
| background-color: var(--bg-dark); | |
| color: var(--text-light); | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| display: flex; | |
| flex-direction: column; | |
| position: relative; | |
| } | |
| /* Animated Background */ | |
| .background-mesh { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| background: radial-gradient(circle at 15% 50%, rgba(99, 102, 241, 0.15), transparent 25%), | |
| radial-gradient(circle at 85% 30%, rgba(168, 85, 247, 0.15), transparent 25%); | |
| animation: pulseBackground 10s ease-in-out infinite alternate; | |
| } | |
| .orb { | |
| position: absolute; | |
| border-radius: 50%; | |
| filter: blur(80px); | |
| z-index: -1; | |
| opacity: 0.6; | |
| animation: float 20s infinite ease-in-out; | |
| } | |
| .orb-1 { | |
| width: 400px; | |
| height: 400px; | |
| background: var(--primary); | |
| top: -100px; | |
| left: -100px; | |
| } | |
| .orb-2 { | |
| width: 300px; | |
| height: 300px; | |
| background: var(--accent); | |
| bottom: -50px; | |
| right: -50px; | |
| animation-delay: -5s; | |
| } | |
| .orb-3 { | |
| width: 200px; | |
| height: 200px; | |
| background: var(--secondary); | |
| top: 40%; | |
| left: 40%; | |
| animation-duration: 25s; | |
| } | |
| /* Header */ | |
| header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 1.5rem 2rem; | |
| backdrop-filter: blur(10px); | |
| border-bottom: 1px solid var(--glass-border); | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| } | |
| .logo { | |
| font-weight: 900; | |
| font-size: 1.5rem; | |
| letter-spacing: -1px; | |
| background: linear-gradient(to right, #fff, #94a3b8); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .anycoder-link { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| text-decoration: none; | |
| color: var(--text-light); | |
| font-size: 0.9rem; | |
| font-weight: 500; | |
| padding: 0.5rem 1rem; | |
| border-radius: 50px; | |
| background: rgba(255,255,255,0.1); | |
| transition: all 0.3s ease; | |
| border: 1px solid transparent; | |
| } | |
| .anycoder-link:hover { | |
| background: rgba(255,255,255,0.2); | |
| border-color: var(--primary); | |
| transform: translateY(-2px); | |
| } | |
| /* Main Content */ | |
| main { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 2rem; | |
| position: relative; | |
| } | |
| .card-container { | |
| width: 100%; | |
| max-width: 600px; | |
| perspective: 1000px; | |
| } | |
| .greeting-card { | |
| background: var(--glass-bg); | |
| backdrop-filter: blur(16px); | |
| -webkit-backdrop-filter: blur(16px); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 24px; | |
| padding: 3rem 2rem; | |
| box-shadow: var(--glass-shadow); | |
| text-align: center; | |
| transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .greeting-card:hover { | |
| transform: translateY(-5px); | |
| } | |
| .greeting-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 4px; | |
| background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent)); | |
| } | |
| .greeting-text { | |
| font-size: 5rem; | |
| font-weight: 900; | |
| line-height: 1; | |
| margin-bottom: 1rem; | |
| background: linear-gradient(135deg, #fff 0%, #cbd5e1 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| position: relative; | |
| display: inline-block; | |
| transition: font-family 0.5s ease; | |
| } | |
| .greeting-sub { | |
| font-size: 1.25rem; | |
| color: #94a3b8; | |
| margin-bottom: 2.5rem; | |
| font-weight: 300; | |
| min-height: 1.5em; | |
| } | |
| /* Controls */ | |
| .controls { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| gap: 1rem; | |
| margin-bottom: 2rem; | |
| } | |
| .mood-btn { | |
| background: transparent; | |
| border: 1px solid var(--glass-border); | |
| color: #94a3b8; | |
| padding: 0.75rem 1.5rem; | |
| border-radius: 12px; | |
| cursor: pointer; | |
| font-family: var(--font-main); | |
| font-weight: 500; | |
| transition: all 0.3s ease; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .mood-btn:hover { | |
| background: rgba(255,255,255,0.05); | |
| color: #fff; | |
| border-color: rgba(255,255,255,0.3); | |
| } | |
| .mood-btn.active { | |
| background: var(--primary); | |
| color: #fff; | |
| border-color: var(--primary); | |
| box-shadow: 0 0 15px rgba(99, 102, 241, 0.4); | |
| } | |
| .action-area { | |
| display: flex; | |
| gap: 1rem; | |
| justify-content: center; | |
| } | |
| .primary-btn { | |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| border: none; | |
| color: white; | |
| padding: 1rem 2rem; | |
| border-radius: 12px; | |
| font-weight: 700; | |
| font-size: 1rem; | |
| cursor: pointer; | |
| transition: transform 0.2s, box-shadow 0.2s; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .primary-btn:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 10px 20px rgba(99, 102, 241, 0.3); | |
| } | |
| .primary-btn:active { | |
| transform: scale(0.95); | |
| } | |
| /* Confetti Canvas */ | |
| #confetti-canvas { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| pointer-events: none; | |
| z-index: 999; | |
| } | |
| /* Animations */ | |
| @keyframes float { | |
| 0%, 100% { transform: translate(0, 0); } | |
| 50% { transform: translate(30px, 50px); } | |
| } | |
| @keyframes pulseBackground { | |
| 0% { opacity: 0.5; } | |
| 100% { opacity: 1; } | |
| } | |
| @keyframes popIn { | |
| 0% { transform: scale(0.8); opacity: 0; } | |
| 100% { transform: scale(1); opacity: 1; } | |
| } | |
| .pop-in { | |
| animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; | |
| } | |
| /* Responsive */ | |
| @media (max-width: 600px) { | |
| .greeting-text { font-size: 3.5rem; } | |
| .controls { gap: 0.5rem; } | |
| .mood-btn { padding: 0.5rem 1rem; font-size: 0.9rem; } | |
| header { padding: 1rem; } | |
| .anycoder-link span { display: none; } /* Hide text on very small screens */ | |
| .anycoder-link i { font-size: 1.2rem; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Animated Background Elements --> | |
| <div class="background-mesh"></div> | |
| <div class="orb orb-1"></div> | |
| <div class="orb orb-2"></div> | |
| <div class="orb orb-3"></div> | |
| <canvas id="confetti-canvas"></canvas> | |
| <header> | |
| <div class="logo">Hi.</div> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link"> | |
| <i class="ph ph-code"></i> | |
| <span>Built with anycoder</span> | |
| </a> | |
| </header> | |
| <main> | |
| <div class="card-container"> | |
| <div class="greeting-card" id="card"> | |
| <h1 class="greeting-text" id="greetingText">Hi</h1> | |
| <p class="greeting-sub" id="greetingSub">Welcome to the interface.</p> | |
| <div class="controls"> | |
| <button class="mood-btn active" onclick="setMood('modern')"> | |
| <i class="ph ph-sparkle"></i> Modern | |
| </button> | |
| <button class="mood-btn" onclick="setMood('elegant')"> | |
| <i class="ph ph-crown"></i> Elegant | |
| </button> | |
| <button class="mood-btn" onclick="setMood('tech')"> | |
| <i class="ph ph-robot"></i> Tech | |
| </button> | |
| <button class="mood-btn" onclick="setMood('friendly')"> | |
| <i class="ph ph-smiley"></i> Friendly | |
| </button> | |
| </div> | |
| <div class="action-area"> | |
| <button class="primary-btn" onclick="sendGreeting()"> | |
| <i class="ph ph-paper-plane-right"></i> Send Greeting | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <script> | |
| // State management | |
| const moods = { | |
| modern: { | |
| text: "Hi", | |
| sub: "Welcome to the future of design.", | |
| font: "'Outfit', sans-serif", | |
| gradient: "linear-gradient(135deg, #6366f1, #a855f7)" | |
| }, | |
| elegant: { | |
| text: "Hello", | |
| sub: "A warm welcome to you.", | |
| font: "'Playfair Display', serif", | |
| gradient: "linear-gradient(135deg, #fbbf24, #d97706)" | |
| }, | |
| tech: { | |
| text: "SYSTEM_READY", | |
| sub: "Initialize connection protocol.", | |
| font: "'Space Grotesk', sans-serif", | |
| gradient: "linear-gradient(135deg, #10b981, #059669)" | |
| }, | |
| friendly: { | |
| text: "Hey there!", | |
| sub: "So glad you stopped by!", | |
| font: "'Outfit', sans-serif", | |
| gradient: "linear-gradient(135deg, #ec4899, #f43f5e)" | |
| } | |
| }; | |
| let currentMood = 'modern'; | |
| // DOM Elements | |
| const greetingText = document.getElementById('greetingText'); | |
| const greetingSub = document.getElementById('greetingSub'); | |
| const card = document.getElementById('card'); | |
| const buttons = document.querySelectorAll('.mood-btn'); | |
| // Function to change mood | |
| function setMood(moodKey) { | |
| currentMood = moodKey; | |
| const data = moods[moodKey]; | |
| // Update Buttons | |
| buttons.forEach(btn => btn.classList.remove('active')); | |
| event.currentTarget.classList.add('active'); | |
| // Update Text with animation | |
| greetingText.style.opacity = '0'; | |
| greetingText.style.transform = 'translateY(10px)'; | |
| setTimeout(() => { | |
| greetingText.innerText = data.text; | |
| greetingText.style.fontFamily = data.font; | |
| greetingText.style.background = data.gradient; | |
| greetingText.style.webkitBackgroundClip = 'text'; | |
| greetingText.style.webkitTextFillColor = 'transparent'; | |
| greetingSub.innerText = data.sub; | |
| greetingText.style.opacity = '1'; | |
| greetingText.style.transform = 'translateY(0)'; | |
| greetingText.style.transition = 'all 0.4s ease'; | |
| }, 200); | |
| // Subtle card border color change | |
| card.style.borderColor = getComputedStyle(document.documentElement).getPropertyValue('--glass-border'); | |
| } | |
| // Confetti Logic | |
| const canvas = document.getElementById('confetti-canvas'); | |
| const ctx = canvas.getContext('2d'); | |
| let particles = []; | |
| function resizeCanvas() { | |
| canvas.width = window.innerWidth; | |
| canvas.height = window.innerHeight; | |
| } | |
| window.addEventListener('resize', resizeCanvas); | |
| resizeCanvas(); | |
| class Particle { | |
| constructor(x, y) { | |
| this.x = x; | |
| this.y = y; | |
| this.size = Math.random() * 10 + 5; | |
| this.speedX = Math.random() * 6 - 3; | |
| this.speedY = Math.random() * -6 - 2; | |
| this.gravity = 0.2; | |
| this.color = `hsl(${Math.random() * 360}, 100%, 50%)`; | |
| this.rotation = Math.random() * 360; | |
| this.rotationSpeed = Math.random() * 10 - 5; | |
| } | |
| update() { | |
| this.speedY += this.gravity; | |
| this.x += this.speedX; | |
| this.y += this.speedY; | |
| this.rotation += this.rotationSpeed; | |
| if (this.size > 0.2) this.size -= 0.1; | |
| } | |
| draw() { | |
| ctx.save(); | |
| ctx.translate(this.x, this.y); | |
| ctx.rotate(this.rotation * Math.PI / 180); | |
| ctx.fillStyle = this.color; | |
| ctx.fillRect(-this.size / 2, -this.size / 2, this.size, this.size); | |
| ctx.restore(); | |
| } | |
| } | |
| function createConfetti() { | |
| for (let i = 0; i < 100; i++) { | |
| particles.push(new Particle(window.innerWidth / 2, window.innerHeight / 2)); | |
| } | |
| animateConfetti(); | |
| } | |
| function animateConfetti() { | |
| ctx.clearRect(0, 0, canvas.width, canvas.height); | |
| for (let i = 0; i < particles.length; i++) { | |
| particles[i].update(); | |
| particles[i].draw(); | |
| if (particles[i].size <= 0.3) { | |
| particles.splice(i, 1); | |
| i--; | |
| } | |
| } | |
| if (particles.length > 0) { | |
| requestAnimationFrame(animateConfetti); | |
| } | |
| } | |
| function sendGreeting() { | |
| // Visual feedback on button | |
| const btn = document.querySelector('.primary-btn'); | |
| const originalText = btn.innerHTML; | |
| btn.innerHTML = '<i class="ph ph-check"></i> Sent!'; | |
| btn.style.background = '#10b981'; | |
| createConfetti(); | |
| setTimeout(() => { | |
| btn.innerHTML = originalText; | |
| btn.style.background = ''; // Reset to CSS gradient | |
| }, 2000); | |
| } | |
| // Initial Animation | |
| window.addEventListener('load', () => { | |
| greetingText.classList.add('pop-in'); | |
| }); | |
| </script> | |
| </body> | |
| </html> |