Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Hi - Digital Greeting Experience</title> | |
| <!-- Importing Remix Icon for modern UI icons --> | |
| <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet"> | |
| <style> | |
| /* | |
| * MODERN CSS VARIABLES & RESET | |
| */ | |
| :root { | |
| --bg-dark: #0f172a; | |
| --bg-card: rgba(30, 41, 59, 0.7); | |
| --primary: #6366f1; | |
| --primary-glow: rgba(99, 102, 241, 0.5); | |
| --accent: #ec4899; | |
| --text-main: #f8fafc; | |
| --text-muted: #94a3b8; | |
| --glass-border: 1px solid rgba(255, 255, 255, 0.1); | |
| --font-main: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; | |
| --radius-lg: 24px; | |
| --radius-md: 12px; | |
| --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| font-family: var(--font-main); | |
| background-color: var(--bg-dark); | |
| background-image: | |
| radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.2) 0%, transparent 40%), | |
| radial-gradient(circle at 90% 80%, rgba(236, 72, 153, 0.2) 0%, transparent 40%); | |
| color: var(--text-main); | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| overflow-x: hidden; | |
| line-height: 1.6; | |
| } | |
| /* | |
| * LAYOUT UTILITIES | |
| */ | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 20px; | |
| width: 100%; | |
| } | |
| header { | |
| padding: 20px 0; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| backdrop-filter: blur(10px); | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| } | |
| .logo { | |
| font-weight: 700; | |
| font-size: 1.5rem; | |
| letter-spacing: -0.5px; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .logo span { | |
| color: var(--primary); | |
| } | |
| /* | |
| * HERO SECTION | |
| */ | |
| .hero { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| text-align: center; | |
| padding: 60px 0; | |
| position: relative; | |
| } | |
| .hero h1 { | |
| font-size: clamp(3rem, 8vw, 6rem); | |
| font-weight: 800; | |
| line-height: 1.1; | |
| margin-bottom: 20px; | |
| background: linear-gradient(135deg, #fff 0%, var(--text-muted) 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| animation: fadeInDown 1s ease-out; | |
| } | |
| .hero p { | |
| font-size: 1.25rem; | |
| color: var(--text-muted); | |
| max-width: 600px; | |
| margin-bottom: 40px; | |
| animation: fadeInUp 1s ease-out 0.2s backwards; | |
| } | |
| /* | |
| * CONTROLS SECTION | |
| */ | |
| .controls { | |
| display: flex; | |
| gap: 20px; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| margin-bottom: 50px; | |
| animation: fadeInUp 1s ease-out 0.4s backwards; | |
| } | |
| .input-group { | |
| position: relative; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .input-group i { | |
| position: absolute; | |
| left: 20px; | |
| color: var(--text-muted); | |
| font-size: 1.2rem; | |
| } | |
| input[type="text"] { | |
| background: var(--bg-card); | |
| border: var(--glass-border); | |
| padding: 16px 20px 16px 50px; | |
| border-radius: 50px; | |
| color: white; | |
| font-size: 1rem; | |
| width: 300px; | |
| backdrop-filter: blur(12px); | |
| transition: var(--transition); | |
| } | |
| input[type="text"]:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| box-shadow: 0 0 20px var(--primary-glow); | |
| width: 350px; | |
| } | |
| button.primary-btn { | |
| background: linear-gradient(135deg, var(--primary), var(--accent)); | |
| border: none; | |
| padding: 16px 32px; | |
| border-radius: 50px; | |
| color: white; | |
| font-weight: 600; | |
| font-size: 1rem; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| transition: var(--transition); | |
| box-shadow: 0 10px 25px -5px var(--primary-glow); | |
| } | |
| button.primary-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 15px 30px -5px var(--primary-glow); | |
| } | |
| button.primary-btn:active { | |
| transform: translateY(0); | |
| } | |
| /* | |
| * GALLERY / CARDS GRID | |
| */ | |
| .gallery { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); | |
| gap: 30px; | |
| padding-bottom: 60px; | |
| } | |
| /* | |
| * CARD COMPONENT | |
| */ | |
| .card { | |
| background: var(--bg-card); | |
| border: var(--glass-border); | |
| border-radius: var(--radius-lg); | |
| padding: 30px; | |
| position: relative; | |
| overflow: hidden; | |
| backdrop-filter: blur(12px); | |
| transition: var(--transition); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| text-align: center; | |
| animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; | |
| opacity: 0; | |
| transform: scale(0.8); | |
| } | |
| .card:hover { | |
| transform: translateY(-5px); | |
| border-color: rgba(255, 255, 255, 0.2); | |
| box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.3); | |
| } | |
| .card-avatar { | |
| width: 80px; | |
| height: 80px; | |
| border-radius: 50%; | |
| background: linear-gradient(135deg, var(--primary), var(--accent)); | |
| margin-bottom: 20px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 2rem; | |
| box-shadow: 0 5px 15px var(--primary-glow); | |
| } | |
| .card h3 { | |
| font-size: 1.5rem; | |
| margin-bottom: 10px; | |
| } | |
| .card p { | |
| color: var(--text-muted); | |
| font-size: 0.95rem; | |
| margin-bottom: 20px; | |
| } | |
| .card-footer { | |
| margin-top: auto; | |
| width: 100%; | |
| padding-top: 20px; | |
| border-top: 1px solid rgba(255, 255, 255, 0.05); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .action-btn { | |
| background: rgba(255, 255, 255, 0.1); | |
| border: none; | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| color: white; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: var(--transition); | |
| } | |
| .action-btn:hover { | |
| background: white; | |
| color: var(--bg-dark); | |
| } | |
| /* | |
| * ANIMATIONS | |
| */ | |
| @keyframes fadeInDown { | |
| from { opacity: 0; transform: translateY(-20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes fadeInUp { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes popIn { | |
| to { opacity: 1; transform: scale(1); } | |
| } | |
| /* | |
| * TOAST NOTIFICATION | |
| */ | |
| .toast { | |
| position: fixed; | |
| bottom: 30px; | |
| right: 30px; | |
| background: rgba(15, 23, 42, 0.9); | |
| border: 1px solid var(--primary); | |
| color: white; | |
| padding: 16px 24px; | |
| border-radius: var(--radius-md); | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| transform: translateY(100px); | |
| opacity: 0; | |
| transition: var(--transition); | |
| z-index: 1000; | |
| box-shadow: 0 10px 30px rgba(0,0,0,0.5); | |
| } | |
| .toast.show { | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| /* | |
| * FOOTER | |
| */ | |
| footer { | |
| text-align: center; | |
| padding: 40px; | |
| color: var(--text-muted); | |
| font-size: 0.9rem; | |
| border-top: 1px solid rgba(255, 255, 255, 0.05); | |
| } | |
| .footer-link { | |
| color: var(--primary); | |
| text-decoration: none; | |
| font-weight: 600; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 5px; | |
| transition: var(--transition); | |
| } | |
| .footer-link:hover { | |
| color: var(--accent); | |
| } | |
| /* Responsive */ | |
| @media (max-width: 600px) { | |
| .hero h1 { font-size: 3rem; } | |
| input[type="text"] { width: 100%; } | |
| input[type="text"]:focus { width: 100%; } | |
| .controls { flex-direction: column; align-items: stretch; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="container"> | |
| <div class="logo"> | |
| <i class="ri-code-s-slash-line"></i> | |
| Hi<span>App</span> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="container"> | |
| <section class="hero"> | |
| <h1>Hi, Welcome!</h1> | |
| <p>Generate unique, animated greeting cards instantly using pure HTML, CSS, and JavaScript.</p> | |
| <div class="controls"> | |
| <div class="input-group"> | |
| <i class="ri-user-smile-line"></i> | |
| <input type="text" id="nameInput" placeholder="Enter your name..." value="Friend"> | |
| </div> | |
| <button class="primary-btn" onclick="generateCard()"> | |
| <i class="ri-magic-line"></i> Generate Card | |
| </button> | |
| </div> | |
| </section> | |
| <section class="gallery" id="cardGallery"> | |
| <!-- Cards will be injected here via JS --> | |
| </section> | |
| </main> | |
| <footer> | |
| <div class="container"> | |
| <p>© 2023 Hi App. Built with anycoder</p> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="footer-link"> | |
| <i class="ri-github-fill"></i> Built with anycoder | |
| </a> | |
| </div> | |
| </footer> | |
| <!-- Toast Notification Element --> | |
| <div class="toast" id="toast"> | |
| <i class="ri-checkbox-circle-line" style="color: #4ade80; font-size: 1.2rem;"></i> | |
| <span id="toastMessage">Card Generated!</span> | |
| </div> | |
| <script> | |
| // Data for greetings to make the app feel "alive" | |
| const greetings = [ | |
| "Hello there!", | |
| "Greetings from the code!", | |
| "Welcome aboard!", | |
| "Nice to meet you!", | |
| "You look great today!", | |
| "Let's build something cool!", | |
| "Stay awesome!" | |
| ]; | |
| const cardGallery = document.getElementById('cardGallery'); | |
| const nameInput = document.getElementById('nameInput'); | |
| const toast = document.getElementById('toast'); | |
| const toastMessage = document.getElementById('toastMessage'); | |
| // Initialize with default card | |
| window.addEventListener('DOMContentLoaded', () => { | |
| generateCard(); | |
| }); | |
| function generateCard() { | |
| const name = nameInput.value.trim() || "Friend"; | |
| const greeting = greetings[Math.floor(Math.random() * greetings.length)]; | |
| // Create card element | |
| const card = document.createElement('div'); | |
| card.className = 'card'; | |
| // Randomize animation delay slightly for variety | |
| const delay = Math.random() * 0.2; | |
| // Generate a random color for the avatar | |
| const hue = Math.floor(Math.random() * 360); | |
| const avatarColor = `hsl(${hue}, 70%, 60%)`; | |
| card.innerHTML = ` | |
| <div class="card-avatar" style="background: linear-gradient(135deg, ${avatarColor}, var(--accent));"> | |
| <i class="ri-sparkling-fill"></i> | |
| </div> | |
| <h3>Hi, ${name}!</h3> | |
| <p>${greeting}</p> | |
| <div class="card-footer"> | |
| <span style="font-size: 0.8rem; color: var(--text-muted);">#${Math.floor(Math.random() * 1000)}</span> | |
| <div style="display: flex; gap: 10px;"> | |
| <button class="action-btn" onclick="copyCard(this)" title="Copy Text"> | |
| <i class="ri-file-copy-line"></i> | |
| </button> | |
| <button class="action-btn" onclick="deleteCard(this)" title="Delete"> | |
| <i class="ri-delete-bin-line"></i> | |
| </button> | |
| </div> | |
| </div> | |
| `; | |
| // Insert at the beginning | |
| cardGallery.insertBefore(card, cardGallery.firstChild); | |
| showToast(`Card created for ${name}`); | |
| } | |
| function deleteCard(btn) { | |
| const card = btn.closest('.card'); | |
| card.style.transform = 'scale(0.8)'; | |
| card.style.opacity = '0'; | |
| setTimeout(() => { | |
| card.remove(); | |
| }, 300); | |
| } | |
| function copyCard(btn) { | |
| const card = btn.closest('.card'); | |
| const name = card.querySelector('h3').innerText; | |
| const text = `${name}\n${card.querySelector('p').innerText}`; | |
| navigator.clipboard.writeText(text).then(() => { | |
| showToast("Copied to clipboard!"); | |
| }); | |
| } | |
| function showToast(message) { | |
| toastMessage.innerText = message; | |
| toast.classList.add('show'); | |
| setTimeout(() => { | |
| toast.classList.remove('show'); | |
| }, 3000); | |
| } | |
| // Allow "Enter" key to generate card | |
| nameInput.addEventListener('keypress', function (e) { | |
| if (e.key === 'Enter') { | |
| generateCard(); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |