Spaces:
Running
Running
| <html lang="en" dir="ltr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Global Greetings - Interactive Language Experience</title> | |
| <!-- Font Awesome for icons --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <!-- Google Fonts --> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&family=Noto+Sans+Arabic:wght@400;700&family=Noto+Sans:wght@400;600&display=swap" rel="stylesheet"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| :root { | |
| --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); | |
| --accent-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); | |
| --dark-bg: #0f0f1e; | |
| --light-bg: #ffffff; | |
| --text-dark: #2d3748; | |
| --text-light: #ffffff; | |
| --card-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); | |
| --hover-transform: translateY(-5px); | |
| } | |
| body { | |
| font-family: 'Poppins', 'Noto Sans', sans-serif; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| position: relative; | |
| } | |
| /* Animated background particles */ | |
| .particles { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| overflow: hidden; | |
| z-index: 0; | |
| } | |
| .particle { | |
| position: absolute; | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 50%; | |
| animation: float 20s infinite; | |
| } | |
| @keyframes float { | |
| 0%, 100% { | |
| transform: translateY(0) translateX(0) scale(1); | |
| opacity: 0; | |
| } | |
| 10% { | |
| opacity: 0.4; | |
| } | |
| 90% { | |
| opacity: 0.4; | |
| } | |
| 100% { | |
| transform: translateY(-100vh) translateX(100px) scale(0.5); | |
| opacity: 0; | |
| } | |
| } | |
| /* Header */ | |
| header { | |
| position: relative; | |
| z-index: 100; | |
| padding: 1.5rem 2rem; | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| nav { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| } | |
| .logo { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| color: var(--text-light); | |
| text-decoration: none; | |
| transition: transform 0.3s ease; | |
| } | |
| .logo:hover { | |
| transform: scale(1.05); | |
| } | |
| .nav-links { | |
| display: flex; | |
| gap: 2rem; | |
| list-style: none; | |
| } | |
| .nav-links a { | |
| color: var(--text-light); | |
| text-decoration: none; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| padding: 0.5rem 1rem; | |
| border-radius: 8px; | |
| } | |
| .nav-links a:hover { | |
| background: rgba(255, 255, 255, 0.2); | |
| transform: translateY(-2px); | |
| } | |
| /* Main Container */ | |
| .container { | |
| position: relative; | |
| z-index: 10; | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| padding: 2rem; | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| text-align: center; | |
| padding: 4rem 0; | |
| animation: fadeInUp 1s ease; | |
| } | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .main-greeting { | |
| font-size: clamp(3rem, 8vw, 6rem); | |
| font-weight: 700; | |
| background: linear-gradient(135deg, #fff 0%, #f0f0f0 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| margin-bottom: 1rem; | |
| animation: pulse 2s ease infinite; | |
| } | |
| .arabic-greeting { | |
| font-family: 'Noto Sans Arabic', sans-serif; | |
| font-size: clamp(4rem, 10vw, 7rem); | |
| direction: rtl; | |
| background: linear-gradient(135deg, #ffd700 0%, #ffed4b 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| margin: 2rem 0; | |
| animation: slideInRight 1s ease; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { | |
| transform: scale(1); | |
| } | |
| 50% { | |
| transform: scale(1.05); | |
| } | |
| } | |
| @keyframes slideInRight { | |
| from { | |
| opacity: 0; | |
| transform: translateX(-50px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateX(0); | |
| } | |
| } | |
| .subtitle { | |
| color: rgba(255, 255, 255, 0.9); | |
| font-size: 1.5rem; | |
| margin-bottom: 2rem; | |
| } | |
| /* Language Cards Grid */ | |
| .language-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| margin: 4rem 0; | |
| } | |
| .language-card { | |
| background: rgba(255, 255, 255, 0.95); | |
| border-radius: 20px; | |
| padding: 2rem; | |
| box-shadow: var(--card-shadow); | |
| transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| cursor: pointer; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .language-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 4px; | |
| background: var(--primary-gradient); | |
| transform: scaleX(0); | |
| transition: transform 0.3s ease; | |
| } | |
| .language-card:hover::before { | |
| transform: scaleX(1); | |
| } | |
| .language-card:hover { | |
| transform: var(--hover-transform); | |
| box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2); | |
| } | |
| .greeting-text { | |
| font-size: 2.5rem; | |
| margin-bottom: 1rem; | |
| background: var(--primary-gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .language-name { | |
| font-size: 1.2rem; | |
| color: var(--text-dark); | |
| margin-bottom: 0.5rem; | |
| font-weight: 600; | |
| } | |
| .language-translation { | |
| color: #718096; | |
| font-size: 0.9rem; | |
| } | |
| .play-button { | |
| position: absolute; | |
| top: 1rem; | |
| right: 1rem; | |
| background: var(--accent-gradient); | |
| border: none; | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| color: white; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .play-button:hover { | |
| transform: scale(1.1) rotate(10deg); | |
| } | |
| /* Interactive Section */ | |
| .interactive-section { | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| border-radius: 30px; | |
| padding: 3rem; | |
| margin: 4rem 0; | |
| text-align: center; | |
| } | |
| .input-group { | |
| display: flex; | |
| gap: 1rem; | |
| max-width: 600px; | |
| margin: 2rem auto; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| } | |
| .name-input { | |
| flex: 1; | |
| min-width: 250px; | |
| padding: 1rem 1.5rem; | |
| border: 2px solid rgba(255, 255, 255, 0.3); | |
| border-radius: 15px; | |
| background: rgba(255, 255, 255, 0.1); | |
| color: white; | |
| font-size: 1rem; | |
| transition: all 0.3s ease; | |
| } | |
| .name-input::placeholder { | |
| color: rgba(255, 255, 255, 0.7); | |
| } | |
| .name-input:focus { | |
| outline: none; | |
| border-color: white; | |
| background: rgba(255, 255, 255, 0.2); | |
| transform: scale(1.02); | |
| } | |
| .greet-btn { | |
| padding: 1rem 2rem; | |
| background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); | |
| border: none; | |
| border-radius: 15px; | |
| color: white; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .greet-btn:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 30px rgba(240, 147, 251, 0.4); | |
| } | |
| .personalized-greeting { | |
| margin-top: 2rem; | |
| padding: 2rem; | |
| background: rgba(255, 255, 255, 0.15); | |
| border-radius: 20px; | |
| min-height: 100px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.5rem; | |
| color: white; | |
| opacity: 0; | |
| transform: scale(0.9); | |
| transition: all 0.5s ease; | |
| } | |
| .personalized-greeting.active { | |
| opacity: 1; | |
| transform: scale(1); | |
| } | |
| /* Footer */ | |
| footer { | |
| position: relative; | |
| z-index: 10; | |
| background: rgba(0, 0, 0, 0.2); | |
| backdrop-filter: blur(10px); | |
| padding: 2rem; | |
| text-align: center; | |
| color: white; | |
| margin-top: 4rem; | |
| } | |
| .footer-links { | |
| display: flex; | |
| justify-content: center; | |
| gap: 2rem; | |
| margin-top: 1rem; | |
| flex-wrap: wrap; | |
| } | |
| .footer-links a { | |
| color: white; | |
| text-decoration: none; | |
| transition: all 0.3s ease; | |
| } | |
| .footer-links a:hover { | |
| color: #ffd700; | |
| transform: translateY(-2px); | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 768px) { | |
| .nav-links { | |
| display: none; | |
| } | |
| .language-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .hero { | |
| padding: 2rem 0; | |
| } | |
| } | |
| /* Loading Animation */ | |
| .loader { | |
| width: 50px; | |
| height: 50px; | |
| border: 3px solid rgba(255, 255, 255, 0.3); | |
| border-top-color: white; | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| margin: 0 auto; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Animated Particles Background --> | |
| <div class="particles" id="particles"></div> | |
| <!-- Header --> | |
| <header> | |
| <nav> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="logo" target="_blank"> | |
| <i class="fas fa-globe"></i> Global Greetings | |
| <br><small style="font-size: 0.5rem; opacity: 0.8;">Built with anycoder</small> | |
| </a> | |
| <ul class="nav-links"> | |
| <li><a href="#home">Home</a></li> | |
| <li><a href="#languages">Languages</a></li> | |
| <li><a href="#interactive">Interactive</a></li> | |
| <li><a href="#about">About</a></li> | |
| </ul> | |
| </nav> | |
| </header> | |
| <!-- Main Container --> | |
| <div class="container"> | |
| <!-- Hero Section --> | |
| <section class="hero" id="home"> | |
| <h1 class="main-greeting">Hello World!</h1> | |
| <h2 class="arabic-greeting">سلام</h2> | |
| <p class="subtitle">Discover greetings from around the world</p> | |
| </section> | |
| <!-- Language Cards Grid --> | |
| <section id="languages"> | |
| <div class="language-grid"> | |
| <div class="language-card" data-lang="arabic"> | |
| <button class="play-button" onclick="playSound('arabic')"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| <div class="greeting-text" style="font-family: 'Noto Sans Arabic', sans-serif; direction: rtl;">سلام</div> | |
| <div class="language-name">Arabic</div> | |
| <div class="language-translation">Peace / Hello</div> | |
| </div> | |
| <div class="language-card" data-lang="spanish"> | |
| <button class="play-button" onclick="playSound('spanish')"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| <div class="greeting-text">¡Hola!</div> | |
| <div class="language-name">Spanish</div> | |
| <div class="language-translation">Hello!</div> | |
| </div> | |
| <div class="language-card" data-lang="french"> | |
| <button class="play-button" onclick="playSound('french')"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| <div class="greeting-text">Bonjour</div> | |
| <div class="language-name">French</div> | |
| <div class="language-translation">Good day / Hello</div> | |
| </div> | |
| <div class="language-card" data-lang="japanese"> | |
| <button class="play-button" onclick="playSound('japanese')"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| <div class="greeting-text">こんにちは</div> | |
| <div class="language-name">Japanese</div> | |
| <div class="language-translation">Hello / Good day</div> | |
| </div> | |
| <div class="language-card" data-lang="chinese"> | |
| <button class="play-button" onclick="playSound('chinese')"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| <div class="greeting-text">你好</div> | |
| <div class="language-name">Chinese (Mandarin)</div> | |
| <div class="language-translation">Hello</div> | |
| </div> | |
| <div class="language-card" data-lang="hindi"> | |
| <button class="play-button" onclick="playSound('hindi')"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| <div class="greeting-text">नमस्ते</div> | |
| <div class="language-name">Hindi</div> | |
| <div class="language-translation">Greetings / Hello</div> | |
| </div> | |
| <div class="language-card" data-lang="russian"> | |
| <button class="play-button" onclick="playSound('russian')"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| <div class="greeting-text">Привет</div> | |
| <div class="language-name">Russian</div> | |
| <div class="language-translation">Hi / Hello</div> | |
| </div> | |
| <div class="language-card" data-lang="german"> | |
| <button class="play-button" onclick="playSound('german')"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| <div class="greeting-text">Hallo</div> | |
| <div class="language-name">German</div> | |
| <div class="language-translation">Hello</div> | |
| </div> | |
| <div class="language-card" data-lang="portuguese"> | |
| <button class="play-button" onclick="playSound('portuguese')"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| <div class="greeting-text">Olá</div> | |
| <div class="language-name">Portuguese</div> | |
| <div class="language-translation">Hello</div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Interactive Section --> | |
| <section class="interactive-section" id="interactive"> | |
| <h2 style="color: white; font-size: 2rem; margin-bottom: 1rem;">Personalize Your Greeting</h2> | |
| <p style="color: rgba(255, 255, 255, 0.9); margin-bottom: 2rem;">Enter your name and get greeted in different languages!</p> | |
| <div class="input-group"> | |
| <input type="text" class="name-input" id="nameInput" placeholder="Enter your name..."> | |
| <button class="greet-btn" onclick="generateGreeting()"> | |
| <i class="fas fa-magic"></i> Generate Greetings | |
| </button> | |
| </div> | |
| <div class="personalized-greeting" id="personalizedGreeting"> | |
| Your personalized greetings will appear here... | |
| </div> | |
| </section> | |
| </div> | |
| <!-- Footer --> | |
| <footer> | |
| <p>© 2024 Global Greetings. Connecting the world through language.</p> | |
| <div class="footer-links"> | |
| <a href="#"><i class="fab fa-github"></i> GitHub</a> | |
| <a href="#"><i class="fab fa-twitter"></i> Twitter</a> | |
| <a href="#"><i class="fab fa-linkedin"></i> LinkedIn</a> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank"> | |
| <i class="fas fa-code"></i> Built with anycoder | |
| </a> | |
| </div> | |
| </footer> | |
| <script> | |
| // Create animated particles | |
| function createParticles() { | |
| const particlesContainer = document.getElementById('particles'); | |
| const particleCount = 30; | |
| for (let i = 0; i < particleCount; i++) { | |
| const particle = document.createElement('div'); | |
| particle.className = 'particle'; | |
| particle.style.left = Math.random() * 100 + '%'; | |
| particle.style.animationDelay = Math.random() * 20 + 's'; | |
| particle.style.width = Math.random() * 20 + 10 + 'px'; | |
| particle.style.height = particle.style.width; | |
| particlesContainer.appendChild(particle); | |
| } | |
| } | |
| // Initialize particles on load | |
| createParticles(); | |
| // Language data for personalized greetings | |
| const greetings = { | |
| arabic: { text: 'سلام', translation: 'Salam', family: 'Noto Sans Arabic', dir: 'rtl' }, | |
| spanish: { text: '¡Hola!', translation: 'Hola', family: 'Poppins', dir: 'ltr' }, | |
| french: { text: 'Bonjour', translation: 'Bonjour', family: 'Poppins', dir: 'ltr' }, | |
| japanese: { text: 'こんにちは', translation: 'Konnichiwa', family: 'Poppins', dir: 'ltr' }, | |
| chinese: { text: '你好', translation: 'Nǐ hǎo', family: 'Poppins', dir: 'ltr' }, | |
| hindi: { text: 'नमस्ते', translation: 'Namaste', family: 'Poppins', dir: 'ltr' }, | |
| russian: { text: 'Привет', translation: 'Privet', family: 'Poppins', dir: 'ltr' }, | |
| german: { text: 'Hallo', translation: 'Hallo', family: 'Poppins', dir: 'ltr' }, | |
| portuguese: { text: 'Olá', translation: 'Olá', family: 'Poppins', dir: 'ltr' } | |
| }; | |
| // Generate personalized greeting | |
| function generateGreeting() { | |
| const nameInput = document.getElementById('nameInput'); | |
| const greetingDiv = document.getElementById('personalizedGreeting'); | |
| const name = nameInput.value.trim(); | |
| if (!name) { | |
| greetingDiv.textContent = 'Please enter your name first!'; | |
| greetingDiv.classList.add('active'); | |
| return; | |
| } | |
| // Select random greetings | |
| const languages = Object.keys(greetings); | |
| const selectedLanguages = []; | |
| const numGreetings = 3; | |
| for (let i = 0; i < numGreetings && i < languages.length; i++) { | |
| const randomIndex = Math.floor(Math.random() * languages.length); | |
| const lang = languages[randomIndex]; | |
| if (!selectedLanguages.includes(lang)) { | |
| selectedLanguages.push(lang); | |
| } | |
| } | |
| // Create greeting HTML | |
| let greetingHTML = '<div style="text-align: center;">'; | |
| greetingHTML += `<p style="font-size: 1.2rem; margin-bottom: 1rem;">Hello ${name}! Here's how to greet you in different languages:</p>`; | |
| selectedLanguages.forEach(lang => { | |
| const greeting = greetings[lang]; | |
| greetingHTML += ` | |
| <div style="margin: 1rem 0; padding: 1rem; background: rgba(255, 255, 255, 0.1); border-radius: 10px;"> | |
| <span style="font-family: '${greeting.family}'; font-size: 1.8rem; font-weight: bold; direction: ${greeting.dir}; display: block;"> | |
| ${greeting.text}, ${name}! | |
| </span> | |
| <span style="font-size: 1rem; opacity: 0.8;">(${greeting.translation})</span> | |
| </div> | |
| `; | |
| }); | |
| greetingHTML += '</div>'; | |
| greetingDiv.innerHTML = greetingHTML; | |
| greetingDiv.classList.add('active'); | |
| } | |
| // Play sound simulation (visual feedback) | |
| function playSound(language) { | |
| const button = event.currentTarget; | |
| const icon = button.querySelector('i'); | |
| // Animate button | |
| button.style.transform = 'scale(1.2) rotate(360deg)'; | |
| icon.className = 'fas fa-volume-up'; | |
| setTimeout(() => { | |
| button.style.transform = 'scale(1)'; | |
| icon.className = 'fas fa-play'; | |
| }, 500); | |
| // Create a subtle notification | |
| showNotification(`Playing pronunciation for ${language.charAt(0).toUpperCase() + language.slice(1)}`); | |
| } | |
| // Show notification | |
| function showNotification(message) { | |
| const notification = document.createElement('div'); | |
| notification.style.cssText = ` | |
| position: fixed; | |
| top: 20px; | |
| right: 20px; | |
| background: rgba(255, 255, 255, 0.95); | |
| color: #333; | |
| padding: 1rem 1.5rem; | |
| border-radius: 10px; | |
| box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2); | |
| z-index: 1000; | |
| animation: slideInRight 0.3s ease; | |
| `; | |
| notification.textContent = message; | |
| document.body.appendChild(notification); | |
| setTimeout(() => { | |
| notification.style.animation = 'fadeOut 0.3s ease'; | |
| setTimeout(() => notification.remove(), 300); | |
| }, 2000); | |
| } | |
| // Add smooth scrolling | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const target = document.querySelector(this.getAttribute('href')); | |
| if (target) { | |
| target.scrollIntoView({ | |
| behavior: 'smooth', | |
| block: 'start' | |
| }); | |
| } | |
| }); | |
| }); | |
| // Add animation on scroll | |
| const observerOptions = { | |
| threshold: 0.1, | |
| rootMargin: '0px 0px -50px 0px' | |
| }; | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.style.animation = 'fadeInUp 0.6s ease forwards'; | |
| } | |
| }); | |
| }, observerOptions); | |
| // Observe all language cards | |
| document.querySelectorAll('.language-card').forEach(card => { | |
| observer.observe(card); | |
| }); | |
| // Add keyboard support for Enter key | |
| document.getElementById('nameInput').addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| generateGreeting(); | |
| } | |
| }); | |
| // Add hover effect to language cards | |
| document.querySelectorAll('.language-card').forEach(card => { | |
| card.addEventListener('mouseenter', function() { | |
| this.style.background = 'linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 240, 255, 0.95) 100%)'; | |
| }); | |
| card.addEventListener('mouseleave', function() { | |
| this.style.background = 'rgba(255, 255, 255, 0.95)'; | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |