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 Experience</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --primary: #6366f1; | |
| --secondary: #ec4899; | |
| --accent: #06b6d4; | |
| --dark: #0f172a; | |
| --light: #f8fafc; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background: var(--dark); | |
| color: var(--light); | |
| overflow-x: hidden; | |
| min-height: 100vh; | |
| } | |
| /* Animated Background */ | |
| .bg-mesh { | |
| position: fixed; | |
| inset: 0; | |
| z-index: -1; | |
| background: | |
| radial-gradient(ellipse at 20% 80%, rgba(99, 102, 241, 0.15) 0%, transparent 50%), | |
| radial-gradient(ellipse at 80% 20%, rgba(236, 72, 153, 0.15) 0%, transparent 50%), | |
| radial-gradient(ellipse at 50% 50%, rgba(6, 182, 212, 0.08) 0%, transparent 50%); | |
| animation: bgShift 20s ease-in-out infinite; | |
| } | |
| @keyframes bgShift { | |
| 0%, 100% { transform: scale(1) rotate(0deg); } | |
| 50% { transform: scale(1.1) rotate(2deg); } | |
| } | |
| /* Floating particles */ | |
| .particle { | |
| position: fixed; | |
| width: 4px; | |
| height: 4px; | |
| background: rgba(255, 255, 255, 0.3); | |
| border-radius: 50%; | |
| pointer-events: none; | |
| animation: float 15s infinite ease-in-out; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(100vh) rotate(0deg); opacity: 0; } | |
| 10% { opacity: 1; } | |
| 90% { opacity: 1; } | |
| 100% { transform: translateY(-100vh) rotate(720deg); opacity: 0; } | |
| } | |
| /* Glass morphism cards */ | |
| .glass { | |
| background: rgba(255, 255, 255, 0.03); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| } | |
| .glass-strong { | |
| background: rgba(15, 23, 42, 0.6); | |
| backdrop-filter: blur(30px); | |
| -webkit-backdrop-filter: blur(30px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| /* Typography effects */ | |
| .gradient-text { | |
| background: linear-gradient(135deg, var(--primary), var(--secondary), var(--accent)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .glow-text { | |
| text-shadow: 0 0 40px rgba(99, 102, 241, 0.5), 0 0 80px rgba(236, 72, 153, 0.3); | |
| } | |
| /* Interactive elements */ | |
| .btn-magnetic { | |
| position: relative; | |
| overflow: hidden; | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .btn-magnetic::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .btn-magnetic:hover::before { | |
| opacity: 1; | |
| } | |
| .btn-magnetic:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 20px 40px rgba(99, 102, 241, 0.3); | |
| } | |
| /* Wave animation for greeting */ | |
| .wave-hand { | |
| display: inline-block; | |
| animation: wave 2s ease-in-out infinite; | |
| transform-origin: 70% 70%; | |
| } | |
| @keyframes wave { | |
| 0%, 100% { transform: rotate(0deg); } | |
| 10% { transform: rotate(14deg); } | |
| 20% { transform: rotate(-8deg); } | |
| 30% { transform: rotate(14deg); } | |
| 40% { transform: rotate(-4deg); } | |
| 50% { transform: rotate(10deg); } | |
| 60% { transform: rotate(0deg); } | |
| } | |
| /* Typing cursor */ | |
| .cursor-blink { | |
| animation: blink 1s step-end infinite; | |
| } | |
| @keyframes blink { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0; } | |
| } | |
| /* Card hover effects */ | |
| .feature-card { | |
| transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-8px) scale(1.02); | |
| border-color: rgba(99, 102, 241, 0.4); | |
| box-shadow: 0 25px 50px rgba(99, 102, 241, 0.15); | |
| } | |
| /* Scroll reveal */ | |
| .reveal { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .reveal.active { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: var(--dark); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: linear-gradient(var(--primary), var(--secondary)); | |
| border-radius: 4px; | |
| } | |
| /* Noise texture overlay */ | |
| .noise { | |
| position: fixed; | |
| inset: 0; | |
| z-index: -1; | |
| opacity: 0.03; | |
| background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); | |
| pointer-events: none; | |
| } | |
| /* Interactive canvas */ | |
| #interactiveCanvas { | |
| position: fixed; | |
| inset: 0; | |
| z-index: -1; | |
| pointer-events: none; | |
| } | |
| /* Morphing blob */ | |
| .blob { | |
| position: absolute; | |
| width: 500px; | |
| height: 500px; | |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| border-radius: 50%; | |
| filter: blur(80px); | |
| opacity: 0.3; | |
| animation: morph 8s ease-in-out infinite; | |
| } | |
| @keyframes morph { | |
| 0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: rotate(0deg) scale(1); } | |
| 25% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; transform: rotate(90deg) scale(1.1); } | |
| 50% { border-radius: 50% 60% 30% 60% / 30% 40% 70% 50%; transform: rotate(180deg) scale(1); } | |
| 75% { border-radius: 60% 40% 60% 30% / 70% 30% 50% 60%; transform: rotate(270deg) scale(1.1); } | |
| } | |
| /* Stagger children animation */ | |
| .stagger-children > * { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| animation: staggerIn 0.6s ease forwards; | |
| } | |
| .stagger-children > *:nth-child(1) { animation-delay: 0.1s; } | |
| .stagger-children > *:nth-child(2) { animation-delay: 0.2s; } | |
| .stagger-children > *:nth-child(3) { animation-delay: 0.3s; } | |
| .stagger-children > *:nth-child(4) { animation-delay: 0.4s; } | |
| @keyframes staggerIn { | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| /* Input styling */ | |
| .fancy-input { | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| transition: all 0.3s; | |
| } | |
| .fancy-input:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2); | |
| background: rgba(255, 255, 255, 0.08); | |
| } | |
| /* Terminal effect */ | |
| .terminal { | |
| font-family: 'Space Mono', monospace; | |
| } | |
| .terminal-line { | |
| position: relative; | |
| padding-left: 1.5rem; | |
| } | |
| .terminal-line::before { | |
| content: '>'; | |
| position: absolute; | |
| left: 0; | |
| color: var(--accent); | |
| } | |
| /* Pulse ring */ | |
| .pulse-ring { | |
| position: relative; | |
| } | |
| .pulse-ring::after { | |
| content: ''; | |
| position: absolute; | |
| inset: -4px; | |
| border-radius: inherit; | |
| border: 2px solid var(--primary); | |
| animation: pulseRing 2s ease-out infinite; | |
| } | |
| @keyframes pulseRing { | |
| 0% { transform: scale(1); opacity: 1; } | |
| 100% { transform: scale(1.2); opacity: 0; } | |
| } | |
| /* 3D tilt card */ | |
| .tilt-card { | |
| transform-style: preserve-3d; | |
| perspective: 1000px; | |
| } | |
| .tilt-inner { | |
| transition: transform 0.1s ease-out; | |
| transform-style: preserve-3d; | |
| } | |
| /* Loading shimmer */ | |
| .shimmer { | |
| background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); | |
| background-size: 200% 100%; | |
| animation: shimmer 2s infinite; | |
| } | |
| @keyframes shimmer { | |
| 0% { background-position: -200% 0; } | |
| 100% { background-position: 200% 0; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Background elements --> | |
| <div class="bg-mesh"></div> | |
| <div class="noise"></div> | |
| <canvas id="interactiveCanvas"></canvas> | |
| <!-- Floating particles container --> | |
| <div id="particles"></div> | |
| <!-- Navigation --> | |
| <nav class="fixed top-0 left-0 right-0 z-50 glass-strong"> | |
| <div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between"> | |
| <a href="#" class="text-xl font-bold gradient-text tracking-tight">hi.</a> | |
| <div class="hidden md:flex items-center gap-8"> | |
| <a href="#experience" class="text-sm text-slate-400 hover:text-white transition-colors">Experience</a> | |
| <a href="#features" class="text-sm text-slate-400 hover:text-white transition-colors">Features</a> | |
| <a href="#connect" class="text-sm text-slate-400 hover:text-white transition-colors">Connect</a> | |
| </div> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-xs text-slate-500 hover:text-slate-300 transition-colors"> | |
| Built with anycoder | |
| </a> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="relative min-h-screen flex items-center justify-center px-6 overflow-hidden"> | |
| <div class="blob top-1/4 left-1/4"></div> | |
| <div class="blob bottom-1/4 right-1/4" style="animation-delay: -4s; background: linear-gradient(135deg, var(--accent), var(--primary));"></div> | |
| <div class="relative z-10 text-center max-w-4xl mx-auto"> | |
| <div class="mb-6 inline-flex items-center gap-2 px-4 py-2 rounded-full glass text-sm text-slate-400"> | |
| <span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span> | |
| <span id="liveTime">Loading...</span> | |
| </div> | |
| <h1 class="text-6xl md:text-8xl lg:text-9xl font-black mb-6 tracking-tighter"> | |
| <span class="wave-hand">👋</span> | |
| <span class="gradient-text glow-text">hi</span> | |
| </h1> | |
| <div class="h-16 md:h-20 flex items-center justify-center"> | |
| <p class="text-xl md:text-3xl text-slate-400 font-light"> | |
| <span id="typewriter"></span><span class="cursor-blink text-cyan-400">|</span> | |
| </p> | |
| </div> | |
| <p class="text-slate-500 max-w-lg mx-auto mb-10 leading-relaxed"> | |
| An interactive greeting experience crafted with modern web technologies. | |
| Type your name below and let's make it personal. | |
| </p> | |
| <div class="flex flex-col sm:flex-row items-center justify-center gap-4 max-w-md mx-auto"> | |
| <input | |
| type="text" | |
| id="nameInput" | |
| placeholder="Enter your name..." | |
| class="fancy-input w-full px-6 py-4 rounded-2xl text-white placeholder-slate-500 text-center sm:text-left" | |
| autocomplete="off" | |
| > | |
| <button | |
| id="greetBtn" | |
| class="btn-magnetic px-8 py-4 rounded-2xl font-semibold text-white whitespace-nowrap relative z-10" | |
| > | |
| Say Hi Back | |
| </button> | |
| </div> | |
| <div id="greetingResult" class="mt-8 opacity-0 transition-all duration-500 transform translate-y-4"></div> | |
| </div> | |
| <div class="absolute bottom-10 left-1/2 -translate-x-1/2 animate-bounce"> | |
| <svg class="w-6 h-6 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path> | |
| </svg> | |
| </div> | |
| </section> | |
| <!-- Experience Section --> | |
| <section id="experience" class="py-24 px-6"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="reveal text-center mb-16"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-4">The <span class="gradient-text">Experience</span></h2> | |
| <p class="text-slate-500 max-w-2xl mx-auto">Every interaction is designed to delight. Hover, click, and explore.</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-6 stagger-children"> | |
| <!-- Card 1: Interactive Terminal --> | |
| <div class="feature-card glass rounded-3xl p-8 tilt-card" data-tilt> | |
| <div class="tilt-inner"> | |
| <div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center mb-6 text-2xl"> | |
| ⌨️ | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Live Terminal</h3> | |
| <div class="terminal text-sm text-slate-400 space-y-2" id="terminalOutput"> | |
| <div class="terminal-line">system.init()</div> | |
| <div class="terminal-line">loading modules...</div> | |
| <div class="terminal-line text-emerald-400">ready ✓</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 2: Mood Detector --> | |
| <div class="feature-card glass rounded-3xl p-8 tilt-card" data-tilt> | |
| <div class="tilt-inner"> | |
| <div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-pink-500 to-rose-600 flex items-center justify-center mb-6 text-2xl"> | |
| 😊 | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Mood Visualizer</h3> | |
| <p class="text-slate-400 text-sm mb-4">Move your mouse to paint emotions</p> | |
| <div class="flex gap-2 flex-wrap" id="moodTags"> | |
| <span class="px-3 py-1 rounded-full text-xs bg-indigo-500/20 text-indigo-300 border border-indigo-500/30">curious</span> | |
| <span class="px-3 py-1 rounded-full text-xs bg-pink-500/20 text-pink-300 border border-pink-500/30">excited</span> | |
| <span class="px-3 py-1 rounded-full text-xs bg-cyan-500/20 text-cyan-300 border border-cyan-500/30">creative</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 3: Time Capsule --> | |
| <div class="feature-card glass rounded-3xl p-8 tilt-card" data-tilt> | |
| <div class="tilt-inner"> | |
| <div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center mb-6 text-2xl"> | |
| ⏰ | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Time Capsule</h3> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-slate-500">Session duration</span> | |
| <span class="text-cyan-400 font-mono" id="sessionTime">00:00</span> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-slate-500">Interactions</span> | |
| <span class="text-cyan-400 font-mono" id="interactionCount">0</span> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-slate-500">Mouse distance</span> | |
| <span class="text-cyan-400 font-mono" id="mouseDistance">0 px</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Grid --> | |
| <section id="features" class="py-24 px-6 relative"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="reveal text-center mb-16"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-4">What Makes Us <span class="gradient-text">Different</span></h2> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-4 reveal"> | |
| <div class="glass rounded-2xl p-6 hover:bg-white/5 transition-all group cursor-pointer" onclick="triggerConfetti(this)"> | |
| <div class="text-3xl mb-3 group-hover:scale-110 transition-transform">🎨</div> | |
| <h4 class="font-semibold mb-1">Generative Art</h4> | |
| <p class="text-sm text-slate-500">Every visit creates unique visual patterns</p> | |
| </div> | |
| <div class="glass rounded-2xl p-6 hover:bg-white/5 transition-all group cursor-pointer" onclick="triggerConfetti(this)"> | |
| <div class="text-3xl mb-3 group-hover:scale-110 transition-transform">⚡</div> | |
| <h4 class="font-semibold mb-1">Lightning Fast</h4> | |
| <p class="text-sm text-slate-500">Optimized for 60fps animations</p> | |
| </div> | |
| <div class="glass rounded-2xl p-6 hover:bg-white/5 transition-all group cursor-pointer" onclick="triggerConfetti(this)"> | |
| <div class="text-3xl mb-3 group-hover:scale-110 transition-transform">🔒</div> | |
| <h4 class="font-semibold mb-1">Privacy First</h4> | |
| <p class="text-sm text-slate-500">No data leaves your browser</p> | |
| </div> | |
| <div class="glass rounded-2xl p-6 hover:bg-white/5 transition-all group cursor-pointer" onclick="triggerConfetti(this)"> | |
| <div class="text-3xl mb-3 group-hover:scale-110 transition-transform">🌐</div> | |
| <h4 class="font-semibold mb-1">Universal</h4> | |
| <p class="text-sm text-slate-500">Works on every modern device</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Interactive Playground --> | |
| <section class="py-24 px-6"> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="reveal glass rounded-3xl p-8 md:p-12"> | |
| <h2 class="text-3xl font-bold mb-8 text-center">Interactive <span class="gradient-text">Playground</span></h2> | |
| <!-- Color Harmony --> | |
| <div class="mb-10"> | |
| <h3 class="text-sm font-semibold text-slate-400 uppercase tracking-wider mb-4">Color Harmony</h3> | |
| <div class="flex gap-4 justify-center flex-wrap" id="colorPalette"> | |
| <button class="w-16 h-16 rounded-2xl bg-gradient-to-br from-indigo-500 to-purple-600 hover:scale-110 transition-transform shadow-lg shadow-indigo-500/25" onclick="setTheme('indigo')"></button> | |
| <button class="w-16 h-16 rounded-2xl bg-gradient-to-br from-pink-500 to-rose-600 hover:scale-110 transition-transform shadow-lg shadow-pink-500/25" onclick="setTheme('pink')"></button> | |
| <button class="w-16 h-16 rounded-2xl bg-gradient-to-br from-cyan-500 to-blue-600 hover:scale-110 transition-transform shadow-lg shadow-cyan-500/25" onclick="setTheme('cyan')"></button> | |
| <button class="w-16 h-16 rounded-2xl bg-gradient-to-br from-amber-500 to-orange-600 hover:scale-110 transition-transform shadow-lg shadow-amber-500/25" onclick="setTheme('amber')"></button> | |
| <button class="w-16 h-16 rounded-2xl bg-gradient-to-br from-emerald-500 to-teal-600 hover:scale-110 transition-transform shadow-lg shadow-emerald-500/25" onclick="setTheme('emerald')"></button> | |
| </div> | |
| </div> | |
| <!-- Sound Visualizer (Visual Only) --> | |
| <div class="mb-10"> | |
| <h3 class="text-sm font-semibold text-slate-400 uppercase tracking-wider mb-4">Rhythm Visualizer</h3> | |
| <div class="flex items-end justify-center gap-1 h-32" id="visualizer"> | |
| <!-- Bars generated by JS --> | |
| </div> | |
| </div> | |
| <!-- Emoji Reactions --> | |
| <div class="text-center"> | |
| <h3 class="text-sm font-semibold text-slate-400 uppercase tracking-wider mb-4">How are you feeling?</h3> | |
| <div class="flex gap-4 justify-center flex-wrap"> | |
| <button class="glass px-6 py-3 rounded-2xl hover:scale-110 transition-all text-2xl" onclick="react('🤩')">🤩</button> | |
| <button class="glass px-6 py-3 rounded-2xl hover:scale-110 transition-all text-2xl" onclick="react('😎')">😎</button> | |
| <button class="glass px-6 py-3 rounded-2xl hover:scale-110 transition-all text-2xl" onclick="react('🤔')">🤔</button> | |
| <button class="glass px-6 py-3 rounded-2xl hover:scale-110 transition-all text-2xl" onclick="react('🥳')">🥳</button> | |
| <button class="glass px-6 py-3 rounded-2xl hover:scale-110 transition-all text-2xl" onclick="react('😴')">😴</button> | |
| </div> | |
| <div id="reactionDisplay" class="mt-6 text-6xl animate-bounce hidden"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Connect Section --> | |
| <section id="connect" class="py-24 px-6"> | |
| <div class="max-w-2xl mx-auto text-center reveal"> | |
| <h2 class="text-4xl font-bold mb-4">Let's <span class="gradient-text">Connect</span></h2> | |
| <p class="text-slate-500 mb-10">Have an idea? Want to collaborate? Just want to say hi back?</p> | |
| <form class="space-y-4" onsubmit="handleSubmit(event)"> | |
| <input type="email" placeholder="your@email.com" class="fancy-input w-full px-6 py-4 rounded-2xl text-white placeholder-slate-500" required> | |
| <textarea placeholder="What's on your mind?" rows="4" class="fancy-input w-full px-6 py-4 rounded-2xl text-white placeholder-slate-500 resize-none" required></textarea> | |
| <button type="submit" class="btn-magnetic w-full px-8 py-4 rounded-2xl font-semibold text-white relative z-10"> | |
| Send Message | |
| </button> | |
| </form> | |
| <div class="mt-12 flex justify-center gap-6"> | |
| <a href="#" class="w-12 h-12 rounded-2xl glass flex items-center justify-center hover:scale-110 transition-transform text-slate-400 hover:text-white"> | |
| <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/></svg> | |
| </a> | |
| <a href="#" class="w-12 h-12 rounded-2xl glass flex items-center justify-center hover:scale-110 transition-transform text-slate-400 hover:text-white"> | |
| <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg> | |
| </a> | |
| <a href="#" class="w-12 h-12 rounded-2xl glass flex items-center justify-center hover:scale-110 transition-transform text-slate-400 hover:text-white"> | |
| <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="py-12 px-6 border-t border-white/5"> | |
| <div class="max-w-6xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4"> | |
| <p class="text-slate-600 text-sm"> Crafted with curiosity and code.</p> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-sm text-slate-500 hover:text-slate-300 transition-colors"> | |
| Built with anycoder → | |
| </a> | |
| </div> | |
| </footer> | |
| <!-- Toast notification --> | |
| <div id="toast" class="fixed bottom-6 right-6 glass-strong px-6 py-4 rounded-2xl transform translate-y-20 opacity-0 transition-all duration-300 z-50 max-w-sm"> | |
| <p id="toastMessage" class="text-sm"></p> | |
| </div> | |
| <script> | |
| // ========== PARTICLE SYSTEM ========== | |
| function createParticles() { | |
| const container = document.getElementById('particles'); | |
| for (let i = 0; i < 30; i++) { | |
| const particle = document.createElement('div'); | |
| particle.className = 'particle'; | |
| particle.style.left = Math.random() * 100 + '%'; | |
| particle.style.animationDelay = Math.random() * 15 + 's'; | |
| particle.style.animationDuration = (10 + Math.random() * 10) + 's'; | |
| particle.style.width = (2 + Math.random() * 4) + 'px'; | |
| particle.style.height = particle.style.width; | |
| container.appendChild(particle); | |
| } | |
| } | |
| createParticles(); | |
| // ========== CANVAS INTERACTIVE BACKGROUND ========== | |
| const canvas = document.getElementById('interactiveCanvas'); | |
| const ctx = canvas.getContext('2d'); | |
| let mouseX = 0, mouseY = 0; | |
| let canvasDots = []; | |
| function resizeCanvas() { | |
| canvas.width = window.innerWidth; | |
| canvas.height = window.innerHeight; | |
| } | |
| resizeCanvas(); | |
| window.addEventListener('resize', resizeCanvas); | |
| class Dot { | |
| constructor() { | |
| this.x = Math.random() * canvas.width; | |
| this.y = Math.random() * canvas.height; | |
| this.vx = (Math.random() - 0.5) * 0.5; | |
| this.vy = (Math.random() - 0.5) * 0.5; | |
| this.radius = Math.random() * 2 + 1; | |
| } | |
| update() { | |
| // Mouse attraction | |
| const dx = mouseX - this.x; | |
| const dy = mouseY - this.y; | |
| const dist = Math.sqrt(dx * dx + dy * dy); | |
| if (dist < 200) { | |
| this.vx += dx * 0.0001; | |
| this.vy += dy * 0.0001; | |
| } | |
| this.x += this.vx; | |
| this.y += this.vy; | |
| // Bounce | |
| if (this.x < 0 || this.x > canvas.width) this.vx *= -1; | |
| if (this.y < 0 || this.y > canvas.height) this.vy *= -1; | |
| // Friction | |
| this.vx *= 0.99; | |
| this.vy *= 0.99; | |
| } | |
| draw() { | |
| ctx.beginPath(); | |
| ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); | |
| ctx.fillStyle = 'rgba(99, 102, 241, 0.5)'; | |
| ctx.fill(); | |
| } | |
| } | |
| for (let i = 0; i < 50; i++) { | |
| canvasDots.push(new Dot()); | |
| } | |
| function animateCanvas() { | |
| ctx.clearRect(0, 0, canvas.width, canvas.height); | |
| // Draw connections | |
| for (let i = 0; i < canvasDots.length; i++) { | |
| for (let j = i + 1; j < canvasDots.length; j++) { | |
| const dx = canvasDots[i].x - canvasDots[j].x; | |
| const dy = canvasDots[i].y - canvasDots[j].y; | |
| const dist = Math.sqrt(dx * dx + dy * dy); | |
| if (dist < 150) { | |
| ctx.beginPath(); | |
| ctx.moveTo(canvasDots[i].x, canvasDots[i].y); | |
| ctx.lineTo(canvasDots[j].x, canvasDots[j].y); | |
| ctx.strokeStyle = `rgba(99, 102, 241, ${0.2 * (1 - dist / 150)})`; | |
| ctx.lineWidth = 0.5; | |
| ctx.stroke(); | |
| } | |
| } | |
| } | |
| canvasDots.forEach(dot => { | |
| dot.update(); | |
| dot.draw(); | |
| }); | |
| requestAnimationFrame(animateCanvas); | |
| } | |
| animateCanvas(); | |
| // ========== MOUSE TRACKING ========== | |
| let lastMouseX = 0, lastMouseY = 0, totalDistance = 0; | |
| document.addEventListener('mousemove', (e) => { | |
| mouseX = e.clientX; | |
| mouseY = e.clientY; | |
| const dx = e.clientX - lastMouseX; | |
| const dy = e.clientY - lastMouseY; | |
| totalDistance += Math.sqrt(dx * dx + dy * dy); | |
| lastMouseX = e.clientX; | |
| lastMouseY = e.clientY; | |
| document.getElementById('mouseDistance').textContent = Math.floor(totalDistance) + ' px'; | |
| }); | |
| // ========== TYPEWRITER EFFECT ========== | |
| const phrases = [ | |
| 'Nice to meet you.', | |
| 'Welcome to my world.', | |
| 'Let\'s create something amazing.', | |
| 'What brings you here today?' | |
| ]; | |
| let phraseIndex = 0; | |
| let charIndex = 0; | |
| let isDeleting = false; | |
| const typewriter = document.getElementById('typewriter'); | |
| function typeEffect() { | |
| const current = phrases[phraseIndex]; | |
| if (isDeleting) { | |
| typewriter.textContent = current.substring(0, charIndex - 1); | |
| charIndex--; | |
| } else { | |
| typewriter.textContent = current.substring(0, charIndex + 1); | |
| charIndex++; | |
| } | |
| let typeSpeed = isDeleting ? 50 : 100; | |
| if (!isDeleting && charIndex === current.length) { | |
| typeSpeed = 2000; | |
| isDeleting = true; | |
| } else if (isDeleting && charIndex === 0) { | |
| isDeleting = false; | |
| phraseIndex = (phraseIndex + 1) % phrases.length; | |
| typeSpeed = 500; | |
| } | |
| setTimeout(typeEffect, typeSpeed); | |
| } | |
| typeEffect(); | |
| // ========== LIVE TIME ========== | |
| function updateTime() { | |
| const now = new Date(); | |
| const timeStr = now.toLocaleTimeString('en-US', { | |
| hour: '2-digit', | |
| minute: '2-digit', | |
| second: '2-digit', | |
| hour12: true | |
| }); | |
| document.getElementById('liveTime').textContent = timeStr; | |
| } | |
| setInterval(updateTime, 1000); | |
| updateTime(); | |
| // ========== SESSION TIMER ========== | |
| let sessionStart = Date.now(); | |
| let interactionCount = 0; | |
| function updateSession() { | |
| const elapsed = Math.floor((Date.now() - sessionStart) / 1000); | |
| const mins = Math.floor(elapsed / 60).toString().padStart(2, '0'); | |
| const secs = (elapsed % 60).toString().padStart(2, '0'); | |
| document.getElementById('sessionTime').textContent = `${mins}:${secs}`; | |
| } | |
| setInterval(updateSession, 1000); | |
| // Track interactions | |
| document.addEventListener('click', () => { | |
| interactionCount++; | |
| document.getElementById('interactionCount').textContent = interactionCount; | |
| }); | |
| // ========== GREETING SYSTEM ========== | |
| const nameInput = document.getElementById('nameInput'); | |
| const greetBtn = document.getElementById('greetBtn'); | |
| const greetingResult = document.getElementById('greetingResult'); | |
| const greetings = { | |
| morning: ['Good morning', 'Rise and shine', 'Top of the morning'], | |
| afternoon: ['Good afternoon', 'Hope you\'re having a great day', 'Hello there'], | |
| evening: ['Good evening', 'Hope you had a wonderful day', 'Nice to see you this evening'], | |
| night: ['Working late', 'Night owl spotted', 'Can\'t sleep either'] | |
| }; | |
| function getGreeting() { | |
| const hour = new Date().getHours(); | |
| if (hour < 12) return greetings.morning; | |
| if (hour < 17) return greetings.afternoon; | |
| if (hour < 21) return greetings.evening; | |
| return greetings.night; | |
| } | |
| greetBtn.addEventListener('click', () => { | |
| const name = nameInput.value.trim(); | |
| if (!name) { | |
| showToast('Please enter your name first!'); | |
| nameInput.focus(); | |
| return; | |
| } | |
| const timeGreetings = getGreeting(); | |
| const randomGreeting = timeGreetings[Math.floor(Math.random() * timeGreetings.length)]; | |
| greetingResult.innerHTML = ` | |
| <div class="glass rounded-3xl p-8 inline-block"> | |
| <p class="text-2xl md:text-4xl font-bold gradient-text mb-2">${randomGreeting}, ${name}!</p> | |
| <p class="text-slate-400">Thanks for saying hi back.</p> | |
| <div class="mt-4 flex gap-2 justify-center"> | |
| ${Array(5).fill().map(() => '<span class="text-2xl animate-bounce" style="animation-delay: ' + Math.random() + 's">✨</span>').join('')} | |
| </div> | |
| </div> | |
| `; | |
| greetingResult.style.opacity = '1'; | |
| greetingResult.style.transform = 'translateY(0)'; | |
| // Add terminal line | |
| addTerminalLine(`greeted user: ${name}`); | |
| }); | |
| nameInput.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') greetBtn.click(); | |
| }); | |
| // ========== TERMINAL ========== | |
| function addTerminalLine(text) { | |
| const terminal = document.getElementById('terminalOutput'); | |
| const line = document.createElement('div'); | |
| line.className = 'terminal-line'; | |
| line.textContent = text; | |
| terminal.appendChild(line); | |
| terminal.scrollTop = terminal.scrollHeight; | |
| // Keep only last 5 lines | |
| while (terminal.children.length > 5) { | |
| terminal.removeChild(terminal.firstChild); | |
| } | |
| } | |
| // Terminal auto-updates | |
| setInterval(() => { | |
| const events = [ | |
| 'heartbeat: ' + Math.floor(Math.random() * 100) + 'ms', | |
| 'mouse tracking: active', | |
| 'particles: ' + document.querySelectorAll('.particle').length, | |
| 'canvas fps: 60', | |
| 'theme: ' + getComputedStyle(document.documentElement).getPropertyValue('--primary') | |
| ]; | |
| addTerminalLine(events[Math.floor(Math.random() * events.length)]); | |
| }, 3000); | |
| // ========== 3D TILT CARDS ========== | |
| document.querySelectorAll('[data-tilt]').forEach(card => { | |
| const inner = card.querySelector('.tilt-inner'); | |
| card.addEventListener('mousemove', (e) => { | |
| const rect = card.getBoundingClientRect(); | |
| const x = e.clientX - rect.left; | |
| const y = e.clientY - rect.top; | |
| const centerX = rect.width / 2; | |
| const center |