Spaces:

Hiren122
/

anycoder-590de0d3

Running

App Files Files Community

Hiren122 commited on Dec 24, 2025

Commit

c093cb0

verified ·

1 Parent(s): cc5a37e

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +545 -19

index.html CHANGED Viewed

@@ -1,19 +1,545 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<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>