| | <!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> |
