Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Hello Application</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 20px; | |
| } | |
| .header { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| padding: 15px 20px; | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.2); | |
| z-index: 1000; | |
| } | |
| .built-with { | |
| color: white; | |
| text-decoration: none; | |
| font-size: 14px; | |
| font-weight: 500; | |
| transition: all 0.3s ease; | |
| } | |
| .built-with:hover { | |
| color: #ffd700; | |
| transform: translateY(-1px); | |
| } | |
| .container { | |
| background: rgba(255, 255, 255, 0.95); | |
| border-radius: 20px; | |
| padding: 40px; | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); | |
| text-align: center; | |
| max-width: 500px; | |
| width: 100%; | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.3); | |
| animation: fadeInUp 0.8s ease-out; | |
| } | |
| .hello-text { | |
| font-size: 4rem; | |
| font-weight: 700; | |
| background: linear-gradient(135deg, #667eea, #764ba2); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| margin-bottom: 20px; | |
| line-height: 1.1; | |
| } | |
| .subtitle { | |
| color: #666; | |
| font-size: 1.2rem; | |
| margin-bottom: 30px; | |
| line-height: 1.5; | |
| } | |
| .interactive-section { | |
| margin: 30px 0; | |
| } | |
| .input-group { | |
| display: flex; | |
| gap: 10px; | |
| margin-bottom: 20px; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| } | |
| .name-input { | |
| flex: 1; | |
| min-width: 200px; | |
| padding: 12px 16px; | |
| border: 2px solid #e1e5e9; | |
| border-radius: 10px; | |
| font-size: 16px; | |
| transition: all 0.3s ease; | |
| outline: none; | |
| } | |
| .name-input:focus { | |
| border-color: #667eea; | |
| box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); | |
| } | |
| .greet-btn { | |
| background: linear-gradient(135deg, #667eea, #764ba2); | |
| color: white; | |
| border: none; | |
| padding: 12px 24px; | |
| border-radius: 10px; | |
| font-size: 16px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| min-width: 120px; | |
| } | |
| .greet-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3); | |
| } | |
| .greeting-display { | |
| background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); | |
| color: white; | |
| padding: 20px; | |
| border-radius: 15px; | |
| font-size: 1.4rem; | |
| font-weight: 600; | |
| margin-top: 20px; | |
| opacity: 0; | |
| transform: translateY(10px); | |
| transition: all 0.4s ease; | |
| } | |
| .greeting-display.show { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .features { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); | |
| gap: 15px; | |
| margin-top: 30px; | |
| } | |
| .feature { | |
| background: rgba(102, 126, 234, 0.1); | |
| padding: 15px; | |
| border-radius: 10px; | |
| transition: all 0.3s ease; | |
| } | |
| .feature:hover { | |
| transform: translateY(-5px); | |
| background: rgba(102, 126, 234, 0.2); | |
| } | |
| .feature-icon { | |
| font-size: 2rem; | |
| margin-bottom: 8px; | |
| } | |
| .feature-text { | |
| font-size: 0.9rem; | |
| color: #667eea; | |
| font-weight: 600; | |
| } | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| @keyframes bounce { | |
| 0%, 20%, 50%, 80%, 100% { | |
| transform: translateY(0); | |
| } | |
| 40% { | |
| transform: translateY(-10px); | |
| } | |
| 60% { | |
| transform: translateY(-5px); | |
| } | |
| } | |
| .bounce { | |
| animation: bounce 2s infinite; | |
| } | |
| @media (max-width: 768px) { | |
| .container { | |
| padding: 30px 20px; | |
| margin: 20px; | |
| } | |
| .hello-text { | |
| font-size: 3rem; | |
| } | |
| .input-group { | |
| flex-direction: column; | |
| } | |
| .name-input { | |
| min-width: auto; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .hello-text { | |
| font-size: 2.5rem; | |
| } | |
| .features { | |
| grid-template-columns: 1fr 1fr; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header class="header"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="built-with" target="_blank"> | |
| Built with anycoder | |
| </a> | |
| </header> | |
| <div class="container"> | |
| <h1 class="hello-text bounce">Hello!</h1> | |
| <p class="subtitle"> | |
| Welcome to this beautiful interactive hello application. | |
| Enter your name below and let's get started! | |
| </p> | |
| <div class="interactive-section"> | |
| <div class="input-group"> | |
| <input | |
| type="text" | |
| class="name-input" | |
| id="nameInput" | |
| placeholder="Enter your name..." | |
| maxlength="50" | |
| > | |
| <button class="greet-btn" id="greetButton"> | |
| Say Hello! | |
| </button> | |
| </div> | |
| <div class="greeting-display" id="greetingDisplay"> | |
| Hello there! 👋 | |
| </div> | |
| </div> | |
| <div class="features"> | |
| <div class="feature"> | |
| <div class="feature-icon">⚡</div> | |
| <div class="feature-text">Fast</div> | |
| </div> | |
| <div class="feature"> | |
| <div class="feature-icon">📱</div> | |
| <div class="feature-text">Responsive</div> | |
| </div> | |
| <div class="feature"> | |
| <div class="feature-icon">🎨</div> | |
| <div class="feature-text">Modern</div> | |
| </div> | |
| <div class="feature"> | |
| <div class="feature-icon">🚀</div> | |
| <div class="feature-text">Interactive</div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const nameInput = document.getElementById('nameInput'); | |
| const greetButton = document.getElementById('greetButton'); | |
| const greetingDisplay = document.getElementById('greetingDisplay'); | |
| // Function to generate a personalized greeting | |
| function getPersonalizedGreeting(name) { | |
| const greetings = [ | |
| `Hello ${name}! 👋`, | |
| `Hey ${name}! ✨`, | |
| `Welcome ${name}! 🌟`, | |
| `Greetings ${name}! 🎉`, | |
| `Nice to meet you ${name}! 🤝` | |
| ]; | |
| return greetings[Math.floor(Math.random() * greetings.length)]; | |
| } | |
| // Function to handle the greeting | |
| function handleGreeting() { | |
| const name = nameInput.value.trim(); | |
| if (name) { | |
| const greeting = getPersonalizedGreeting(name); | |
| greetingDisplay.textContent = greeting; | |
| greetingDisplay.classList.add('show'); | |
| // Add a little celebration effect | |
| greetButton.textContent = '🎉 Success!'; | |
| setTimeout(() => { | |
| greetButton.textContent = 'Say Hello!'; | |
| }, 2000); | |
| } else { | |
| greetingDisplay.textContent = 'Please enter your name first! 😊'; | |
| greetingDisplay.classList.add('show'); | |
| // Add shake animation to input | |
| nameInput.style.animation = 'shake 0.5s'; | |
| setTimeout(() => { | |
| nameInput.style.animation = ''; | |
| }, 500); | |
| } | |
| } | |
| // Event listeners | |
| greetButton.addEventListener('click', handleGreeting); | |
| nameInput.addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| handleGreeting(); | |
| } | |
| }); | |
| // Add shake animation to CSS | |
| const style = document.createElement('style'); | |
| style.textContent = ` | |
| @keyframes shake { | |
| 0%, 100% { transform: translateX(0); } | |
| 25% { transform: translateX(-5px); } | |
| 75% { transform: translateX(5px); } | |
| } | |
| `; | |
| document.head.appendChild(style); | |
| // Auto-focus on input | |
| nameInput.focus(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |