Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Universal Greetings</title> | |
| <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%); | |
| --tertiary-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); | |
| --dark-bg: #0f0f23; | |
| --light-text: #ffffff; | |
| --glass-bg: rgba(255, 255, 255, 0.1); | |
| --glass-border: rgba(255, 255, 255, 0.2); | |
| } | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| min-height: 100vh; | |
| background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); | |
| background-size: 400% 400%; | |
| animation: gradientShift 15s ease infinite; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| overflow-x: hidden; | |
| position: relative; | |
| } | |
| @keyframes gradientShift { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| .floating-shapes { | |
| position: fixed; | |
| width: 100%; | |
| height: 100%; | |
| overflow: hidden; | |
| z-index: 1; | |
| } | |
| .shape { | |
| position: absolute; | |
| background: var(--glass-bg); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid var(--glass-border); | |
| animation: float 20s infinite; | |
| } | |
| .shape:nth-child(1) { | |
| width: 80px; | |
| height: 80px; | |
| left: 10%; | |
| animation-duration: 25s; | |
| border-radius: 50%; | |
| } | |
| .shape:nth-child(2) { | |
| width: 120px; | |
| height: 120px; | |
| right: 20%; | |
| animation-duration: 30s; | |
| animation-delay: 2s; | |
| transform: rotate(45deg); | |
| } | |
| .shape:nth-child(3) { | |
| width: 60px; | |
| height: 60px; | |
| left: 70%; | |
| animation-duration: 35s; | |
| animation-delay: 4s; | |
| border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; | |
| } | |
| .shape:nth-child(4) { | |
| width: 100px; | |
| height: 100px; | |
| right: 10%; | |
| animation-duration: 28s; | |
| animation-delay: 1s; | |
| border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; | |
| } | |
| @keyframes float { | |
| 0%, 100% { | |
| transform: translateY(0) rotate(0deg); | |
| opacity: 0.5; | |
| } | |
| 25% { | |
| transform: translateY(-100px) rotate(90deg); | |
| opacity: 0.8; | |
| } | |
| 50% { | |
| transform: translateY(-200px) rotate(180deg); | |
| opacity: 0.5; | |
| } | |
| 75% { | |
| transform: translateY(-100px) rotate(270deg); | |
| opacity: 0.8; | |
| } | |
| } | |
| header { | |
| position: fixed; | |
| top: 0; | |
| width: 100%; | |
| padding: 20px; | |
| z-index: 1000; | |
| background: var(--glass-bg); | |
| backdrop-filter: blur(10px); | |
| border-bottom: 1px solid var(--glass-border); | |
| } | |
| .header-content { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| font-size: 1.5rem; | |
| font-weight: bold; | |
| background: var(--primary-gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .anycoder-link { | |
| color: var(--light-text); | |
| text-decoration: none; | |
| font-size: 0.9rem; | |
| transition: all 0.3s ease; | |
| padding: 8px 16px; | |
| border-radius: 20px; | |
| background: var(--glass-bg); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid var(--glass-border); | |
| } | |
| .anycoder-link:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(255, 255, 255, 0.3); | |
| } | |
| main { | |
| position: relative; | |
| z-index: 10; | |
| text-align: center; | |
| padding: 20px; | |
| } | |
| .greeting-container { | |
| background: var(--glass-bg); | |
| backdrop-filter: blur(20px); | |
| border-radius: 30px; | |
| padding: 60px 40px; | |
| border: 2px solid var(--glass-border); | |
| box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); | |
| max-width: 600px; | |
| margin: 0 auto; | |
| animation: slideInUp 0.8s ease-out; | |
| } | |
| @keyframes slideInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(50px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .main-greeting { | |
| font-size: clamp(3rem, 8vw, 5rem); | |
| font-weight: 800; | |
| background: linear-gradient(135deg, #fff 0%, #f0f0f0 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| margin-bottom: 20px; | |
| animation: pulse 2s ease-in-out infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| } | |
| .time-greeting { | |
| font-size: 1.5rem; | |
| color: rgba(255, 255, 255, 0.9); | |
| margin-bottom: 30px; | |
| font-weight: 300; | |
| } | |
| .language-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); | |
| gap: 15px; | |
| margin-top: 40px; | |
| } | |
| .lang-btn { | |
| padding: 15px 20px; | |
| background: var(--glass-bg); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 15px; | |
| color: var(--light-text); | |
| font-size: 1.1rem; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .lang-btn::before { | |
| content: ''; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| width: 0; | |
| height: 0; | |
| border-radius: 50%; | |
| background: rgba(255, 255, 255, 0.3); | |
| transform: translate(-50%, -50%); | |
| transition: width 0.6s, height 0.6s; | |
| } | |
| .lang-btn:hover::before { | |
| width: 300px; | |
| height: 300px; | |
| } | |
| .lang-btn:hover { | |
| transform: translateY(-3px) scale(1.05); | |
| box-shadow: 0 10px 30px rgba(255, 255, 255, 0.2); | |
| } | |
| .lang-btn span { | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .lang-code { | |
| font-size: 0.7rem; | |
| opacity: 0.7; | |
| display: block; | |
| margin-top: 5px; | |
| } | |
| .custom-input { | |
| margin-top: 40px; | |
| display: flex; | |
| gap: 10px; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| } | |
| .input-field { | |
| padding: 15px 25px; | |
| background: var(--glass-bg); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 50px; | |
| color: var(--light-text); | |
| font-size: 1rem; | |
| width: 250px; | |
| transition: all 0.3s ease; | |
| } | |
| .input-field::placeholder { | |
| color: rgba(255, 255, 255, 0.6); | |
| } | |
| .input-field:focus { | |
| outline: none; | |
| border-color: rgba(255, 255, 255, 0.5); | |
| box-shadow: 0 0 20px rgba(255, 255, 255, 0.2); | |
| } | |
| .submit-btn { | |
| padding: 15px 40px; | |
| background: var(--primary-gradient); | |
| border: none; | |
| border-radius: 50px; | |
| color: white; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .submit-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4); | |
| } | |
| .emoji-rain { | |
| position: fixed; | |
| top: -50px; | |
| font-size: 2rem; | |
| animation: fall linear; | |
| z-index: 5; | |
| pointer-events: none; | |
| } | |
| @keyframes fall { | |
| to { | |
| transform: translateY(calc(100vh + 50px)); | |
| } | |
| } | |
| .stats { | |
| margin-top: 30px; | |
| display: flex; | |
| justify-content: center; | |
| gap: 30px; | |
| flex-wrap: wrap; | |
| } | |
| .stat-item { | |
| text-align: center; | |
| color: rgba(255, 255, 255, 0.9); | |
| } | |
| .stat-number { | |
| font-size: 2rem; | |
| font-weight: bold; | |
| background: var(--secondary-gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .stat-label { | |
| font-size: 0.9rem; | |
| opacity: 0.8; | |
| } | |
| @media (max-width: 768px) { | |
| .greeting-container { | |
| padding: 40px 20px; | |
| } | |
| .language-grid { | |
| grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); | |
| } | |
| .custom-input { | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .input-field { | |
| width: 100%; | |
| max-width: 300px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="floating-shapes"> | |
| <div class="shape"></div> | |
| <div class="shape"></div> | |
| <div class="shape"></div> | |
| <div class="shape"></div> | |
| </div> | |
| <header> | |
| <div class="header-content"> | |
| <div class="logo">๐ Universal Greetings</div> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link"> | |
| Built with anycoder | |
| </a> | |
| </div> | |
| </header> | |
| <main> | |
| <div class="greeting-container"> | |
| <h1 class="main-greeting" id="mainGreeting">Hi</h1> | |
| <p class="time-greeting" id="timeGreeting">Good day!</p> | |
| <div class="stats"> | |
| <div class="stat-item"> | |
| <div class="stat-number" id="greetingCount">0</div> | |
| <div class="stat-label">Greetings Shared</div> | |
| </div> | |
| <div class="stat-item"> | |
| <div class="stat-number" id="languageCount">1</div> | |
| <div class="stat-label">Languages</div> | |
| </div> | |
| </div> | |
| <div class="language-grid"> | |
| <button class="lang-btn" onclick="changeGreeting('Hello', 'English')"> | |
| <span>Hello<span class="lang-code">EN</span></span> | |
| </button> | |
| <button class="lang-btn" onclick="changeGreeting('Hola', 'Spanish')"> | |
| <span>Hola<span class="lang-code">ES</span></span> | |
| </button> | |
| <button class="lang-btn" onclick="changeGreeting('Bonjour', 'French')"> | |
| <span>Bonjour<span class="lang-code">FR</span></span> | |
| </button> | |
| <button class="lang-btn" onclick="changeGreeting('Ciao', 'Italian')"> | |
| <span>Ciao<span class="lang-code">IT</span></span> | |
| </button> | |
| <button class="lang-btn" onclick="changeGreeting('Hallo', 'German')"> | |
| <span>Hallo<span class="lang-code">DE</span></span> | |
| </button> | |
| <button class="lang-btn" onclick="changeGreeting('ใใใซใกใฏ', 'Japanese')"> | |
| <span>ใใใซใกใฏ<span class="lang-code">JA</span></span> | |
| </button> | |
| <button class="lang-btn" onclick="changeGreeting('์๋ ํ์ธ์', 'Korean')"> | |
| <span>์๋ ํ์ธ์<span class="lang-code">KO</span></span> | |
| </button> | |
| <button class="lang-btn" onclick="changeGreeting('ะัะธะฒะตั', 'Russian')"> | |
| <span>ะัะธะฒะตั<span class="lang-code">RU</span></span> | |
| </button> | |
| <button class="lang-btn" onclick="changeGreeting('ไฝ ๅฅฝ', 'Chinese')"> | |
| <span>ไฝ ๅฅฝ<span class="lang-code">ZH</span></span> | |
| </button> | |
| <button class="lang-btn" onclick="changeGreeting('ู ุฑุญุจุง', 'Arabic')"> | |
| <span>ู ุฑุญุจุง<span class="lang-code">AR</span></span> | |
| </button> | |
| </div> | |
| <div class="custom-input"> | |
| <input type="text" class="input-field" id="customGreeting" placeholder="Enter your greeting..." maxlength="30"> | |
| <button class="submit-btn" onclick="submitCustomGreeting()">Share Greeting</button> | |
| </div> | |
| </div> | |
| </main> | |
| <script> | |
| let greetingCount = 0; | |
| let languagesUsed = new Set(['English']); | |
| function updateTimeGreeting() { | |
| const hour = new Date().getHours(); | |
| const timeGreeting = document.getElementById('timeGreeting'); | |
| if (hour < 12) { | |
| timeGreeting.textContent = 'Good morning! โ๏ธ'; | |
| } else if (hour < 17) { | |
| timeGreeting.textContent = 'Good afternoon! ๐ค๏ธ'; | |
| } else if (hour < 21) { | |
| timeGreeting.textContent = 'Good evening! ๐ '; | |
| } else { | |
| timeGreeting.textContent = 'Good night! ๐'; | |
| } | |
| } | |
| function changeGreeting(greeting, language) { | |
| const mainGreeting = document.getElementById('mainGreeting'); | |
| mainGreeting.style.transform = 'scale(0.8)'; | |
| mainGreeting.style.opacity = '0.5'; | |
| setTimeout(() => { | |
| mainGreeting.textContent = greeting; | |
| mainGreeting.style.transform = 'scale(1)'; | |
| mainGreeting.style.opacity = '1'; | |
| }, 200); | |
| greetingCount++; | |
| languagesUsed.add(language); | |
| updateStats(); | |
| createEmojiRain(); | |
| } | |
| function submitCustomGreeting() { | |
| const input = document.getElementById('customGreeting'); | |
| const greeting = input.value.trim(); | |
| if (greeting) { | |
| changeGreeting(greeting, 'Custom'); | |
| input.value = ''; | |
| // Add celebration effect | |
| for (let i = 0; i < 5; i++) { | |
| setTimeout(() => createEmojiRain(), i * 100); | |
| } | |
| } | |
| } | |
| function updateStats() { | |
| document.getElementById('greetingCount').textContent = greetingCount; | |
| document.getElementById('languageCount').textContent = languagesUsed.size; | |
| } | |
| function createEmojiRain() { | |
| const emojis = ['๐', '๐', '๐', 'โจ', '๐ซ', '๐']; | |
| const emoji = document.createElement('div'); | |
| emoji.className = 'emoji-rain'; | |
| emoji.textContent = emojis[Math.floor(Math.random() * emojis.length)]; | |
| emoji.style.left = Math.random() * window.innerWidth + 'px'; | |
| emoji.style.animationDuration = (Math.random() * 3 + 2) + 's'; | |
| document.body.appendChild(emoji); | |
| setTimeout(() => emoji.remove(), 5000); | |
| } | |
| // Handle Enter key for custom greeting | |
| document.getElementById('customGreeting').addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| submitCustomGreeting(); | |
| } | |
| }); | |
| // Initialize | |
| updateTimeGreeting(); | |
| setInterval(updateTimeGreeting, 60000); // Update every minute | |
| // Add some initial emoji rain | |
| setInterval(() => { | |
| if (Math.random() > 0.7) { | |
| createEmojiRain(); | |
| } | |
| }, 3000); | |
| // Add hover sound effect (visual feedback) | |
| document.querySelectorAll('.lang-btn, .submit-btn').forEach(btn => { | |
| btn.addEventListener('mouseenter', () => { | |
| btn.style.transform = 'translateY(-3px) scale(1.05)'; | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |