Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Hi. | Modern Greeting Experience</title> | |
| <!-- Google Fonts --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;500;700;900&family=Space+Grotesk:wght@300;500;700&display=swap" rel="stylesheet"> | |
| <!-- FontAwesome for Icons --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| /* --- CSS Variables & Reset --- */ | |
| :root { | |
| --bg-dark: #0f172a; | |
| --bg-darker: #020617; | |
| --primary: #6366f1; /* Indigo */ | |
| --secondary: #ec4899; /* Pink */ | |
| --accent: #8b5cf6; /* Violet */ | |
| --text-main: #f8fafc; | |
| --text-muted: #94a3b8; | |
| --glass-bg: rgba(255, 255, 255, 0.03); | |
| --glass-border: rgba(255, 255, 255, 0.05); | |
| --card-hover: rgba(255, 255, 255, 0.08); | |
| --shadow: 0 10px 40px -10px rgba(0,0,0,0.5); | |
| --font-display: 'Outfit', sans-serif; | |
| --font-body: 'Space Grotesk', sans-serif; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| background-color: var(--bg-dark); | |
| color: var(--text-main); | |
| font-family: var(--font-body); | |
| line-height: 1.6; | |
| overflow-x: hidden; | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| background-image: | |
| radial-gradient(circle at 15% 50%, rgba(99, 102, 241, 0.15) 0%, transparent 50%), | |
| radial-gradient(circle at 85% 30%, rgba(236, 72, 153, 0.15) 0%, transparent 50%); | |
| } | |
| /* --- Animations --- */ | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-20px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes gradientText { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| @keyframes pulseGlow { | |
| 0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); } | |
| 70% { box-shadow: 0 0 0 20px rgba(99, 102, 241, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); } | |
| } | |
| /* --- Header / Navigation --- */ | |
| header { | |
| position: fixed; | |
| top: 0; | |
| width: 100%; | |
| padding: 1.5rem 5%; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| z-index: 1000; | |
| backdrop-filter: blur(12px); | |
| background: rgba(15, 23, 42, 0.7); | |
| border-bottom: 1px solid var(--glass-border); | |
| transition: all 0.3s ease; | |
| } | |
| .logo { | |
| font-family: var(--font-display); | |
| font-weight: 700; | |
| font-size: 1.5rem; | |
| letter-spacing: -0.02em; | |
| color: var(--text-main); | |
| text-decoration: none; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .logo i { | |
| color: var(--primary); | |
| } | |
| .anycoder-link { | |
| font-size: 0.875rem; | |
| color: var(--text-muted); | |
| text-decoration: none; | |
| padding: 0.5rem 1rem; | |
| border: 1px solid var(--glass-border); | |
| border-radius: 50px; | |
| background: var(--glass-bg); | |
| transition: all 0.3s ease; | |
| font-weight: 500; | |
| } | |
| .anycoder-link:hover { | |
| color: var(--primary); | |
| border-color: var(--primary); | |
| background: rgba(99, 102, 241, 0.1); | |
| } | |
| /* --- Main Content --- */ | |
| main { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 8rem 1.5rem 4rem; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| width: 100%; | |
| } | |
| /* --- Hero Section --- */ | |
| .hero { | |
| text-align: center; | |
| margin-bottom: 4rem; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .greeting-container { | |
| margin-bottom: 1.5rem; | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .main-text { | |
| font-family: var(--font-display); | |
| font-size: clamp(5rem, 15vw, 12rem); | |
| font-weight: 900; | |
| line-height: 0.9; | |
| background: linear-gradient(135deg, #fff 0%, #94a3b8 50%, #6366f1 100%); | |
| background-size: 200% 200%; | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| animation: gradientText 6s ease infinite; | |
| letter-spacing: -0.05em; | |
| display: block; | |
| cursor: pointer; | |
| transition: transform 0.3s ease; | |
| } | |
| .main-text:hover { | |
| transform: scale(1.02); | |
| } | |
| .sub-text { | |
| font-size: clamp(1.1rem, 2vw, 1.5rem); | |
| color: var(--text-muted); | |
| max-width: 600px; | |
| margin: 0 auto 2.5rem; | |
| font-weight: 300; | |
| animation: fadeIn 1s ease-out 0.5s backwards; | |
| } | |
| /* --- Interactive Button --- */ | |
| .action-btn { | |
| background: linear-gradient(90deg, var(--primary), var(--accent)); | |
| color: white; | |
| border: none; | |
| padding: 1rem 2.5rem; | |
| font-size: 1.1rem; | |
| border-radius: 12px; | |
| font-family: var(--font-display); | |
| font-weight: 600; | |
| cursor: pointer; | |
| position: relative; | |
| overflow: hidden; | |
| transition: transform 0.2s ease, box-shadow 0.3s ease; | |
| box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4); | |
| animation: fadeIn 1s ease-out 0.8s backwards; | |
| } | |
| .action-btn::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); | |
| transition: 0.5s; | |
| } | |
| .action-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 25px rgba(99, 102, 241, 0.6); | |
| } | |
| .action-btn:hover::before { | |
| left: 100%; | |
| } | |
| .action-btn:active { | |
| transform: translateY(1px); | |
| } | |
| /* --- Features Grid --- */ | |
| .features { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 2rem; | |
| width: 100%; | |
| margin-top: 2rem; | |
| } | |
| .card { | |
| background: var(--glass-bg); | |
| border: 1px solid var(--glass-border); | |
| padding: 2rem; | |
| border-radius: 24px; | |
| backdrop-filter: blur(10px); | |
| transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| position: relative; | |
| overflow: hidden; | |
| animation: fadeIn 1s ease-out 1.1s backwards; | |
| } | |
| .card:nth-child(2) { | |
| animation-delay: 1.3s; | |
| } | |
| .card:nth-child(3) { | |
| animation-delay: 1.5s; | |
| } | |
| .card:hover { | |
| transform: translateY(-10px); | |
| background: var(--card-hover); | |
| border-color: rgba(99, 102, 241, 0.3); | |
| box-shadow: var(--shadow); | |
| } | |
| .card-icon { | |
| font-size: 2rem; | |
| margin-bottom: 1.5rem; | |
| background: rgba(99, 102, 241, 0.1); | |
| width: 60px; | |
| height: 60px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 16px; | |
| color: var(--primary); | |
| } | |
| .card h3 { | |
| font-family: var(--font-display); | |
| font-size: 1.25rem; | |
| margin-bottom: 0.75rem; | |
| color: var(--text-main); | |
| } | |
| .card p { | |
| color: var(--text-muted); | |
| font-size: 0.95rem; | |
| } | |
| /* --- Decorative Elements --- */ | |
| .floating-shape { | |
| position: absolute; | |
| border-radius: 50%; | |
| filter: blur(80px); | |
| z-index: -1; | |
| opacity: 0.6; | |
| } | |
| .shape-1 { | |
| top: 20%; | |
| left: 10%; | |
| width: 300px; | |
| height: 300px; | |
| background: var(--primary); | |
| animation: float 8s ease-in-out infinite; | |
| } | |
| .shape-2 { | |
| bottom: 20%; | |
| right: 10%; | |
| width: 250px; | |
| height: 250px; | |
| background: var(--secondary); | |
| animation: float 10s ease-in-out infinite reverse; | |
| } | |
| /* --- Footer --- */ | |
| footer { | |
| text-align: center; | |
| padding: 2rem; | |
| color: var(--text-muted); | |
| font-size: 0.9rem; | |
| border-top: 1px solid var(--glass-border); | |
| background: rgba(2, 6, 23, 0.5); | |
| } | |
| /* --- Responsive Tweaks --- */ | |
| @media (max-width: 768px) { | |
| header { | |
| padding: 1rem 5%; | |
| } | |
| .main-text { | |
| font-size: 4.5rem; | |
| } | |
| .features { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Decorative Background Shapes --> | |
| <div class="floating-shape shape-1"></div> | |
| <div class="floating-shape shape-2"></div> | |
| <!-- Header --> | |
| <header> | |
| <a href="#" class="logo"> | |
| <i class="fa-solid fa-wave-square"></i> | |
| Hi.App | |
| </a> | |
| <!-- CRITICAL LINK --> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link"> | |
| Built with anycoder <i class="fa-solid fa-arrow-up-right-from-square" style="font-size: 0.7em; margin-left: 4px;"></i> | |
| </a> | |
| </header> | |
| <!-- Main Content --> | |
| <main> | |
| <!-- Hero Section --> | |
| <section class="hero"> | |
| <div class="greeting-container"> | |
| <h1 class="main-text" id="greeting-text">Hi.</h1> | |
| </div> | |
| <p class="sub-text"> | |
| A minimal, responsive, and interactive greeting experience.<br> | |
| Start a conversation with the digital world. | |
| </p> | |
| <button class="action-btn" id="greet-btn" onclick="changeGreeting()"> | |
| <i class="fa-solid fa-language"></i> Say Hello | |
| </button> | |
| </section> | |
| <!-- Feature Cards --> | |
| <section class="features"> | |
| <article class="card"> | |
| <div class="card-icon"> | |
| <i class="fa-solid fa-bolt"></i> | |
| </div> | |
| <h3>Instant Interaction</h3> | |
| <p>Experience seamless transitions and immediate feedback with vanilla JavaScript logic.</p> | |
| </article> | |
| <article class="card"> | |
| <div class="card-icon"> | |
| <i class="fa-solid fa-layer-group"></i> | |
| </div> | |
| <h3>Modern Aesthetics</h3> | |
| <p>Styled with modern CSS variables, glassmorphism effects, and fluid typography.</p> | |
| </article> | |
| <article class="card"> | |
| <div class="card-icon"> | |
| <i class="fa-solid fa-mobile-screen"></i> | |
| </div> | |
| <h3>Fully Responsive</h3> | |
| <p>Adapts perfectly to any screen size, ensuring a great look on mobile, tablet, and desktop.</p> | |
| </article> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer> | |
| <p>© 2023 Hi.App. Designed for the web.</p> | |
| </footer> | |
| <!-- JavaScript Logic --> | |
| <script> | |
| // Data for greeting rotation | |
| const greetings = [ | |
| { text: "Hi.", lang: "English" }, | |
| { text: "Hola.", lang: "Spanish" }, | |
| { text: "Bonjour.", lang: "French" }, | |
| { text: "Ciao.", lang: "Italian" }, | |
| { text: "Hallo.", lang: "German" }, | |
| { text: "Olá.", lang: "Portuguese" }, | |
| { text: "你好.", lang: "Chinese" }, | |
| { text: "こんにちは.", lang: "Japanese" }, | |
| { text: "안녕하세요.", lang: "Korean" }, | |
| { text: "مرحبا.", lang: "Arabic" }, | |
| { text: "Привет.", lang: "Russian" } | |
| ]; | |
| let currentIndex = 0; | |
| const greetingElement = document.getElementById('greeting-text'); | |
| const btnElement = document.getElementById('greet-btn'); | |
| let isAnimating = false; | |
| function changeGreeting() { | |
| if (isAnimating) return; | |
| isAnimating = true; | |
| // 1. Fade out | |
| greetingElement.style.opacity = '0'; | |
| greetingElement.style.transform = 'translateY(-20px) rotateX(90deg)'; | |
| greetingElement.style.transition = 'all 0.4s ease'; | |
| // 2. Change text and fade in after short delay | |
| setTimeout(() => { | |
| // Increment index | |
| currentIndex = (currentIndex + 1) % greetings.length; | |
| const nextGreeting = greetings[currentIndex]; | |
| // Update DOM | |
| greetingElement.innerText = nextGreeting.text; | |
| // Optional: Update button text to show language | |
| btnElement.innerHTML = `<i class="fa-solid fa-language"></i> ${nextGreeting.lang}`; | |
| // Fade in | |
| greetingElement.style.opacity = '1'; | |
| greetingElement.style.transform = 'translateY(0) rotateX(0)'; | |
| isAnimating = false; | |
| }, 400); | |
| } | |
| // Add subtle mouse parallax effect to the main text | |
| document.addEventListener('mousemove', (e) => { | |
| const x = (window.innerWidth - e.pageX * 2) / 100; | |
| const y = (window.innerHeight - e.pageY * 2) / 100; | |
| // Apply slight rotation/shift to the main text | |
| greetingElement.style.transform = `perspective(1000px) rotateY(${x * 0.5}deg) rotateX(${y * -0.5}deg)`; | |
| }); | |
| // Add click effect to the main text itself | |
| greetingElement.addEventListener('click', changeGreeting); | |
| greetingElement.style.cursor = "pointer"; | |
| </script> | |
| </body> | |
| </html> |