| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Welcome App</title> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| :root { |
| --primary-color: #6366f1; |
| --secondary-color: #8b5cf6; |
| --accent-color: #ec4899; |
| --bg-color: #0f172a; |
| --card-bg: #1e293b; |
| --text-primary: #f8fafc; |
| --text-secondary: #94a3b8; |
| } |
| |
| body { |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
| background: var(--bg-color); |
| min-height: 100vh; |
| color: var(--text-primary); |
| overflow-x: hidden; |
| } |
| |
| |
| .bg-animation { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| z-index: -1; |
| overflow: hidden; |
| } |
| |
| .bg-animation span { |
| position: absolute; |
| width: 20px; |
| height: 20px; |
| background: linear-gradient(45deg, var(--primary-color), var(--secondary-color)); |
| border-radius: 50%; |
| animation: float 15s infinite; |
| opacity: 0.1; |
| } |
| |
| .bg-animation span:nth-child(1) { left: 10%; animation-delay: 0s; } |
| .bg-animation span:nth-child(2) { left: 20%; animation-delay: 2s; width: 30px; height: 30px; } |
| .bg-animation span:nth-child(3) { left: 35%; animation-delay: 4s; } |
| .bg-animation span:nth-child(4) { left: 50%; animation-delay: 0s; width: 40px; height: 40px; } |
| .bg-animation span:nth-child(5) { left: 65%; animation-delay: 3s; } |
| .bg-animation span:nth-child(6) { left: 75%; animation-delay: 5s; width: 25px; height: 25px; } |
| .bg-animation span:nth-child(7) { left: 85%; animation-delay: 1s; } |
| .bg-animation span:nth-child(8) { left: 90%; animation-delay: 6s; width: 35px; height: 35px; } |
| |
| @keyframes float { |
| 0% { |
| transform: translateY(100vh) rotate(0deg); |
| opacity: 0; |
| } |
| 10% { |
| opacity: 0.1; |
| } |
| 90% { |
| opacity: 0.1; |
| } |
| 100% { |
| transform: translateY(-100vh) rotate(720deg); |
| opacity: 0; |
| } |
| } |
| |
| |
| header { |
| padding: 1rem 2rem; |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| background: rgba(30, 41, 59, 0.8); |
| backdrop-filter: blur(10px); |
| position: sticky; |
| top: 0; |
| z-index: 100; |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); |
| } |
| |
| .logo { |
| font-size: 1.5rem; |
| font-weight: 700; |
| background: linear-gradient(135deg, var(--primary-color), var(--accent-color)); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| } |
| |
| .built-with { |
| color: var(--text-secondary); |
| text-decoration: none; |
| font-size: 0.875rem; |
| transition: color 0.3s ease; |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| } |
| |
| .built-with:hover { |
| color: var(--primary-color); |
| } |
| |
| |
| main { |
| max-width: 1200px; |
| margin: 0 auto; |
| padding: 2rem; |
| } |
| |
| |
| .hero { |
| text-align: center; |
| padding: 4rem 1rem; |
| animation: fadeInUp 1s ease; |
| } |
| |
| @keyframes fadeInUp { |
| from { |
| opacity: 0; |
| transform: translateY(30px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
| |
| .hero h1 { |
| font-size: clamp(2rem, 5vw, 3.5rem); |
| margin-bottom: 1rem; |
| background: linear-gradient(135deg, var(--text-primary), var(--primary-color)); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| } |
| |
| .hero p { |
| font-size: 1.25rem; |
| color: var(--text-secondary); |
| max-width: 600px; |
| margin: 0 auto 2rem; |
| line-height: 1.8; |
| } |
| |
| .cta-buttons { |
| display: flex; |
| gap: 1rem; |
| justify-content: center; |
| flex-wrap: wrap; |
| } |
| |
| .btn { |
| padding: 0.875rem 2rem; |
| border-radius: 50px; |
| font-size: 1rem; |
| font-weight: 600; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| text-decoration: none; |
| display: inline-flex; |
| align-items: center; |
| gap: 0.5rem; |
| } |
| |
| .btn-primary { |
| background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); |
| color: white; |
| border: none; |
| box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4); |
| } |
| |
| .btn-primary:hover { |
| transform: translateY(-3px); |
| box-shadow: 0 8px 25px rgba(99, 102, 241, 0.5); |
| } |
| |
| .btn-secondary { |
| background: transparent; |
| color: var(--text-primary); |
| border: 2px solid var(--primary-color); |
| } |
| |
| .btn-secondary:hover { |
| background: var(--primary-color); |
| transform: translateY(-3px); |
| } |
| |
| |
| .features { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); |
| gap: 2rem; |
| padding: 4rem 0; |
| } |
| |
| .feature-card { |
| background: var(--card-bg); |
| border-radius: 20px; |
| padding: 2rem; |
| text-align: center; |
| transition: all 0.3s ease; |
| border: 1px solid rgba(255, 255, 255, 0.05); |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .feature-card::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| height: 3px; |
| background: linear-gradient(90deg, var(--primary-color), var(--accent-color)); |
| transform: scaleX(0); |
| transition: transform 0.3s ease; |
| } |
| |
| .feature-card:hover::before { |
| transform: scaleX(1); |
| } |
| |
| .feature-card:hover { |
| transform: translateY(-10px); |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); |
| } |
| |
| .feature-icon { |
| width: 70px; |
| height: 70px; |
| border-radius: 50%; |
| background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| margin: 0 auto 1.5rem; |
| font-size: 1.75rem; |
| } |
| |
| .feature-card h3 { |
| font-size: 1.25rem; |
| margin-bottom: 0.75rem; |
| } |
| |
| .feature-card p { |
| color: var(--text-secondary); |
| line-height: 1.6; |
| } |
| |
| |
| .stats { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); |
| gap: 2rem; |
| padding: 3rem 2rem; |
| background: var(--card-bg); |
| border-radius: 20px; |
| margin: 2rem 0; |
| } |
| |
| .stat-item { |
| text-align: center; |
| } |
| |
| .stat-number { |
| font-size: 2.5rem; |
| font-weight: 700; |
| background: linear-gradient(135deg, var(--primary-color), var(--accent-color)); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| } |
| |
| .stat-label { |
| color: var(--text-secondary); |
| margin-top: 0.5rem; |
| } |
| |
| |
| .interactive-section { |
| padding: 4rem 0; |
| text-align: center; |
| } |
| |
| .interactive-section h2 { |
| font-size: 2rem; |
| margin-bottom: 2rem; |
| } |
| |
| .input-group { |
| display: flex; |
| gap: 1rem; |
| max-width: 500px; |
| margin: 0 auto; |
| flex-wrap: wrap; |
| justify-content: center; |
| } |
| |
| .input-group input { |
| flex: 1; |
| min-width: 200px; |
| padding: 1rem 1.5rem; |
| border: 2px solid rgba(255, 255, 255, 0.1); |
| border-radius: 50px; |
| background: var(--card-bg); |
| color: var(--text-primary); |
| font-size: 1rem; |
| outline: none; |
| transition: border-color 0.3s ease; |
| } |
| |
| .input-group input:focus { |
| border-color: var(--primary-color); |
| } |
| |
| .greeting-display { |
| margin-top: 2rem; |
| padding: 2rem; |
| background: var(--card-bg); |
| border-radius: 20px; |
| min-height: 100px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 1.5rem; |
| opacity: 0; |
| transform: scale(0.9); |
| transition: all 0.5s ease; |
| } |
| |
| .greeting-display.show { |
| opacity: 1; |
| transform: scale(1); |
| } |
| |
| |
| footer { |
| text-align: center; |
| padding: 2rem; |
| color: var(--text-secondary); |
| border-top: 1px solid rgba(255, 255, 255, 0.1); |
| margin-top: 4rem; |
| } |
| |
| footer a { |
| color: var(--primary-color); |
| text-decoration: none; |
| } |
| |
| footer a:hover { |
| text-decoration: underline; |
| } |
| |
| |
| @media (max-width: 768px) { |
| header { |
| flex-direction: column; |
| gap: 1rem; |
| text-align: center; |
| } |
| |
| .hero { |
| padding: 2rem 1rem; |
| } |
| |
| .stats { |
| padding: 2rem 1rem; |
| } |
| |
| .stat-number { |
| font-size: 2rem; |
| } |
| } |
| |
| |
| .fade-in { |
| opacity: 0; |
| transform: translateY(20px); |
| transition: all 0.6s ease; |
| } |
| |
| .fade-in.visible { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| </style> |
| </head> |
| <body> |
| |
| <div class="bg-animation"> |
| <span></span> |
| <span></span> |
| <span></span> |
| <span></span> |
| <span></span> |
| <span></span> |
| <span></span> |
| <span></span> |
| </div> |
|
|
| |
| <header> |
| <div class="logo"> |
| <i class="fas fa-rocket"></i> SimpleApp |
| </div> |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="built-with" target="_blank"> |
| <i class="fas fa-code"></i> Built with anycoder |
| </a> |
| </header> |
|
|
| |
| <main> |
| |
| <section class="hero"> |
| <h1>Welcome to SimpleApp</h1> |
| <p>A beautiful, modern, and responsive HTML application built with pure HTML, CSS, and JavaScript. Experience the power of simplicity.</p> |
| <div class="cta-buttons"> |
| <button class="btn btn-primary" onclick="scrollToInteractive()"> |
| <i class="fas fa-play"></i> Get Started |
| </button> |
| <a href="#features" class="btn btn-secondary"> |
| <i class="fas fa-info-circle"></i> Learn More |
| </a> |
| </div> |
| </section> |
|
|
| |
| <section class="features fade-in" id="features"> |
| <div class="feature-card"> |
| <div class="feature-icon"> |
| <i class="fas fa-bolt"></i> |
| </div> |
| <h3>Lightning Fast</h3> |
| <p>Optimized performance with minimal load times and smooth animations.</p> |
| </div> |
| <div class="feature-card"> |
| <div class="feature-icon"> |
| <i class="fas fa-mobile-alt"></i> |
| </div> |
| <h3>Fully Responsive</h3> |
| <p>Looks perfect on any device, from mobile phones to large desktops.</p> |
| </div> |
| <div class="feature-card"> |
| <div class="feature-icon"> |
| <i class="fas fa-palette"></i> |
| </div> |
| <h3>Modern Design</h3> |
| <p>Clean and elegant UI with beautiful gradients and smooth transitions.</p> |
| </div> |
| </section> |
|
|
| |
| <section class="stats fade-in"> |
| <div class="stat-item"> |
| <div class="stat-number" data-target="100">0</div> |
| <div class="stat-label">Lines of Code</div> |
| </div> |
| <div class="stat-item"> |
| <div class="stat-number" data-target="3">0</div> |
| <div class="stat-label">Features</div> |
| </div> |
| <div class="stat-item"> |
| <div class="stat-number" data-target="0">0</div> |
| <div class="stat-label">Dependencies</div> |
| </div> |
| <div class="stat-item"> |
| <div class="stat-number" data-target="100">0</div> |
| <div class="stat-label">% Responsive</div> |
| </div> |
| </section> |
|
|
| |
| <section class="interactive-section fade-in" id="interactive"> |
| <h2><i class="fas fa-hand-sparkles"></i> Try It Out!</h2> |
| <div class="input-group"> |
| <input type="text" id="nameInput" placeholder="Enter your name..." maxlength="30"> |
| <button class="btn btn-primary" onclick="greetUser()"> |
| <i class="fas fa-paper-plane"></i> Say Hello |
| </button> |
| </div> |
| <div class="greeting-display" id="greetingDisplay"> |
| <span id="greetingText"></span> |
| </div> |
| </section> |
| </main> |
|
|
| |
| <footer> |
| <p>Made with <i class="fas fa-heart" style="color: var(--accent-color);"></i> using pure HTML, CSS & JavaScript</p> |
| <p style="margin-top: 0.5rem;"> |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a> |
| </p> |
| </footer> |
|
|
| <script> |
| |
| function scrollToInteractive() { |
| document.getElementById('interactive').scrollIntoView({ behavior: 'smooth' }); |
| } |
| |
| |
| function greetUser() { |
| const nameInput = document.getElementById('nameInput'); |
| const greetingDisplay = document.getElementById('greetingDisplay'); |
| const greetingText = document.getElementById('greetingText'); |
| |
| const name = nameInput.value.trim(); |
| |
| if (name) { |
| const greetings = [ |
| `Hello, ${name}! 👋 Welcome aboard!`, |
| `Hey ${name}! 🌟 Great to see you!`, |
| `Hi there, ${name}! 🚀 Ready to explore?`, |
| `Welcome, ${name}! ✨ You're awesome!`, |
| `Greetings, ${name}! 🎉 Let's get started!` |
| ]; |
| |
| const randomGreeting = greetings[Math.floor(Math.random() * greetings.length)]; |
| greetingText.textContent = randomGreeting; |
| greetingDisplay.classList.add('show'); |
| } else { |
| greetingText.textContent = 'Please enter your name! 😊'; |
| greetingDisplay.classList.add('show'); |
| } |
| } |
| |
| |
| document.getElementById('nameInput').addEventListener('keypress', function(e) { |
| if (e.key === 'Enter') { |
| greetUser(); |
| } |
| }); |
| |
| |
| const observerOptions = { |
| threshold: 0.1, |
| rootMargin: '0px 0px -50px 0px' |
| }; |
| |
| const observer = new IntersectionObserver((entries) => { |
| entries.forEach(entry => { |
| if (entry.isIntersecting) { |
| entry.target.classList.add('visible'); |
| |
| |
| if (entry.target.classList.contains('stats')) { |
| animateStats(); |
| } |
| } |
| }); |
| }, observerOptions); |
| |
| document.querySelectorAll('.fade-in').forEach(el => { |
| observer.observe(el); |
| }); |
| |
| |
| function animateStats() { |
| const statNumbers = document.querySelectorAll('.stat-number'); |
| |
| statNumbers.forEach(stat => { |
| const target = parseInt(stat.getAttribute('data-target')); |
| const duration = 2000; |
| const step = target / (duration / 16); |
| let current = 0; |
| |
| const updateNumber = () => { |
| current += step; |
| if (current < target) { |
| stat.textContent = Math.floor(current); |
| requestAnimationFrame(updateNumber); |
| } else { |
| stat.textContent = target; |
| } |
| }; |
| |
| updateNumber(); |
| }); |
| } |
| |
| |
| document.querySelectorAll('.feature-card').forEach(card => { |
| card.addEventListener('mouseenter', function() { |
| this.querySelector('.feature-icon').style.transform = 'scale(1.1) rotate(5deg)'; |
| }); |
| |
| card.addEventListener('mouseleave', function() { |
| this.querySelector('.feature-icon').style.transform = 'scale(1) rotate(0deg)'; |
| }); |
| }); |
| |
| |
| document.querySelectorAll('.feature-icon').forEach(icon => { |
| icon.style.transition = 'transform 0.3s ease'; |
| }); |
| </script> |
| </body> |
| </html> |
