Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Merhaba | The Greeting Experience</title> | |
| <!-- Importing Inter Font for Modern Typography --> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700;900&display=swap" rel="stylesheet"> | |
| <!-- Importing Phosphor Icons --> | |
| <script src="https://unpkg.com/@phosphor-icons/web@2.0.0/dist/index.min.js"></script> | |
| <style> | |
| :root { | |
| --primary-color: #E30A17; /* Turkish Red */ | |
| --primary-glow: rgba(227, 10, 23, 0.4); | |
| --bg-dark: #0f1115; | |
| --bg-card: #1c1f26; | |
| --text-white: #ffffff; | |
| --text-muted: #a0a0a0; | |
| --glass-border: rgba(255, 255, 255, 0.1); | |
| --transition-speed: 0.3s; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: box-sizing; | |
| font-family: 'Inter', sans-serif; | |
| } | |
| body { | |
| background-color: var(--bg-dark); | |
| color: var(--text-white); | |
| overflow-x: hidden; | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| background-image: | |
| radial-gradient(circle at 10% 20%, rgba(227, 10, 23, 0.05) 0%, transparent 40%), | |
| radial-gradient(circle at 90% 80%, rgba(60, 100, 200, 0.05) 0%, transparent 40%); | |
| } | |
| /* --- Header & Nav --- */ | |
| header { | |
| padding: 20px 40px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| z-index: 10; | |
| } | |
| .brand { | |
| font-weight: 900; | |
| font-size: 1.5rem; | |
| letter-spacing: -1px; | |
| color: var(--text-white); | |
| text-decoration: none; | |
| position: relative; | |
| } | |
| .brand span { | |
| color: var(--primary-color); | |
| } | |
| .anycoder-link { | |
| background: rgba(255, 255, 255, 0.05); | |
| padding: 8px 16px; | |
| border-radius: 50px; | |
| font-size: 0.85rem; | |
| color: var(--text-muted); | |
| text-decoration: none; | |
| border: 1px solid var(--glass-border); | |
| transition: all var(--transition-speed); | |
| } | |
| .anycoder-link:hover { | |
| background: var(--primary-color); | |
| color: white; | |
| border-color: var(--primary-color); | |
| box-shadow: 0 0 20px var(--primary-glow); | |
| } | |
| /* --- Main Content --- */ | |
| main { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 40px; | |
| position: relative; | |
| } | |
| /* --- Hero Section --- */ | |
| .hero-container { | |
| text-align: center; | |
| position: relative; | |
| z-index: 2; | |
| } | |
| .typing-container { | |
| font-size: clamp(3rem, 10vw, 8rem); | |
| font-weight: 900; | |
| line-height: 1.1; | |
| height: clamp(3rem, 10vw, 8rem); /* Prevent layout shift */ | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| overflow: hidden; | |
| } | |
| .cursor { | |
| display: inline-block; | |
| width: 10px; | |
| height: clamp(3rem, 10vw, 8rem); | |
| background-color: var(--primary-color); | |
| animation: blink 1s infinite; | |
| vertical-align: bottom; | |
| margin-left: 5px; | |
| } | |
| @keyframes blink { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0; } | |
| } | |
| .sub-text { | |
| margin-top: 20px; | |
| font-size: 1.2rem; | |
| color: var(--text-muted); | |
| max-width: 600px; | |
| line-height: 1.6; | |
| opacity: 0; | |
| animation: fadeIn 1s ease-out 1.5s forwards; | |
| } | |
| /* --- Interactive Cards Grid --- */ | |
| .grid-container { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 20px; | |
| width: 100%; | |
| max-width: 1200px; | |
| margin-top: 60px; | |
| perspective: 1000px; | |
| } | |
| .card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 16px; | |
| padding: 30px; | |
| position: relative; | |
| overflow: hidden; | |
| transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease; | |
| cursor: pointer; | |
| height: 200px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-between; | |
| } | |
| .card:hover { | |
| transform: translateY(-10px) scale(1.02); | |
| box-shadow: 0 20px 40px -10px rgba(0,0,0,0.5); | |
| border-color: var(--primary-color); | |
| } | |
| .card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; left: 0; width: 100%; height: 100%; | |
| background: linear-gradient(135deg, transparent 40%, rgba(227, 10, 23, 0.1) 100%); | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .card:hover::before { | |
| opacity: 1; | |
| } | |
| .card-icon { | |
| font-size: 2rem; | |
| color: var(--primary-color); | |
| margin-bottom: 10px; | |
| } | |
| .card-title { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| margin-bottom: 5px; | |
| } | |
| .card-desc { | |
| font-size: 0.9rem; | |
| color: var(--text-muted); | |
| } | |
| /* --- Audio Visualizer (Pure CSS) --- */ | |
| .visualizer { | |
| display: flex; | |
| gap: 5px; | |
| height: 30px; | |
| align-items: center; | |
| margin-top: 40px; | |
| } | |
| .bar { | |
| width: 6px; | |
| background: var(--primary-color); | |
| border-radius: 5px; | |
| animation: sound 0.8s infinite ease-in-out alternate; | |
| opacity: 0.7; | |
| } | |
| .bar:nth-child(odd) { animation-duration: 0.6s; } | |
| .bar:nth-child(2n) { animation-duration: 1.1s; } | |
| .bar:nth-child(3n) { animation-duration: 1.3s; } | |
| @keyframes sound { | |
| 0% { height: 5px; } | |
| 100% { height: 30px; } | |
| } | |
| /* --- Footer --- */ | |
| footer { | |
| padding: 30px; | |
| text-align: center; | |
| color: var(--text-muted); | |
| font-size: 0.8rem; | |
| border-top: 1px solid var(--glass-border); | |
| } | |
| /* --- Animations --- */ | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| /* --- Responsive Tweaks --- */ | |
| @media (max-width: 768px) { | |
| header { padding: 20px; } | |
| .grid-container { grid-template-columns: 1fr; } | |
| .typing-container { font-size: 3rem; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <a href="#" class="brand">Merhaba<span>.</span></a> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link"> | |
| Built with anycoder | |
| </a> | |
| </header> | |
| <main> | |
| <div class="hero-container"> | |
| <div class="typing-container"> | |
| <span id="typewriter"></span> | |
| <span class="cursor"></span> | |
| </div> | |
| <p class="sub-text"> | |
| Welcome to a digital experience inspired by the Turkish greeting.<br> | |
| Simple, warm, and universal. | |
| </p> | |
| <!-- CSS Audio Visualizer --> | |
| <div class="visualizer"> | |
| <div class="bar"></div><div class="bar"></div><div class="bar"></div> | |
| <div class="bar"></div><div class="bar"></div><div class="bar"></div> | |
| <div class="bar"></div><div class="bar"></div><div class="bar"></div> | |
| <div class="bar"></div><div class="bar"></div><div class="bar"></div> | |
| </div> | |
| </div> | |
| <div class="grid-container"> | |
| <!-- Card 1: Meaning --> | |
| <div class="card" onclick="playGreeting()"> | |
| <i class="ph ph-sound" class="card-icon"></i> | |
| <div> | |
| <h3 class="card-title">Meaning</h3> | |
| <p class="card-desc">"Hello" or "Welcome". It is the standard greeting used in Turkey.</p> | |
| </div> | |
| </div> | |
| <!-- Card 2: Origin --> | |
| <div class="card"> | |
| <i class="ph ph-globe" class="card-icon"></i> | |
| <div> | |
| <h3 class="card-title">Origin</h3> | |
| <p class="card-desc">Derived from the Arabic "Marhaban", meaning a welcome reception.</p> | |
| </div> | |
| </div> | |
| <!-- Card 3: Usage --> | |
| <div class="card"> | |
| <i class="ph ph-hand-heart" class="card-icon"></i> | |
| <div> | |
| <h3 class="card-title">Gesture</h3> | |
| <p class="card-desc">Often accompanied by a handshake or placing the right hand over the heart.</p> | |
| </div> | |
| </div> | |
| <!-- Card 4: Interactive --> | |
| <div class="card" id="interactive-card"> | |
| <i class="ph ph-translate" class="card-icon"></i> | |
| <div> | |
| <h3 class="card-title">Translations</h3> | |
| <p class="card-desc">Click to see "Hello" in different languages.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <footer> | |
| <p>© 2023 Merhaba Experience. Designed with Modern CSS.</p> | |
| </footer> | |
| <script> | |
| // --- Typing Effect Logic --- | |
| const textToType = "Merhaba"; | |
| const typeWriterElement = document.getElementById('typewriter'); | |
| let i = 0; | |
| function typeText() { | |
| if (i < textToType.length) { | |
| typeWriterElement.innerHTML += textToType.charAt(i); | |
| i++; | |
| setTimeout(typeText, 150); // Speed of typing | |
| } else { | |
| // Reset typing after a delay to create a loop effect | |
| setTimeout(() => { | |
| typeWriterElement.innerHTML = ""; | |
| i = 0; | |
| typeText(); | |
| }, 3000); | |
| } | |
| } | |
| // Start typing on load | |
| window.onload = typeText; | |
| // --- Interactive Card Logic --- | |
| const translations = [ | |
| { lang: "English", text: "Hello" }, | |
| { lang: "Spanish", text: "Hola" }, | |
| { lang: "French", text: "Bonjour" }, | |
| { lang: "German", text: "Hallo" }, | |
| { lang: "Japanese", text: "Konnichiwa" }, | |
| { lang: "Arabic", text: "Marhaban" } | |
| ]; | |
| const interactiveCard = document.getElementById('interactive-card'); | |
| const cardTitle = interactiveCard.querySelector('.card-title'); | |
| const cardDesc = interactiveCard.querySelector('.card-desc'); | |
| let currentTransIndex = 0; | |
| interactiveCard.addEventListener('click', () => { | |
| // Simple animation transition | |
| interactiveCard.style.opacity = '0'; | |
| setTimeout(() => { | |
| const trans = translations[currentTransIndex]; | |
| cardTitle.innerText = trans.lang; | |
| cardDesc.innerText = `"${trans.text}`; | |
| // Increment index | |
| currentTransIndex = (currentTransIndex + 1) % translations.length; | |
| interactiveCard.style.opacity = '1'; | |
| }, 200); | |
| }); | |
| // --- Audio Simulation Logic --- | |
| function playGreeting() { | |
| // Visual feedback only, simulating sound | |
| const bars = document.querySelectorAll('.bar'); | |
| bars.forEach(bar => { | |
| bar.style.background = '#fff'; | |
| setTimeout(() => { | |
| bar.style.background = 'var(--primary-color)'; | |
| }, 500); | |
| }); | |
| alert("Merhaba! (Imagine a warm voice saying this)"); | |
| } | |
| // --- Mouse Parallax Effect for Cards --- | |
| document.addEventListener('mousemove', (e) => { | |
| const cards = document.querySelectorAll('.card'); | |
| const x = e.clientX / window.innerWidth; | |
| const y = e.clientY / window.innerHeight; | |
| cards.forEach((card, index) => { | |
| const speed = (index + 1) * 0.02; | |
| const xOffset = (window.innerWidth / 2 - e.clientX) * speed; | |
| const yOffset = (window.innerHeight / 2 - e.clientY) * speed; | |
| // Only apply subtle movement if not hovering | |
| if(!card.matches(':hover')) { | |
| card.style.transform = `translate(${xOffset}px, ${yOffset}px)`; | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |