Spaces:

helloThien
/

anycoder-1351e55d

Running

App Files Files Community

helloThien commited on Jan 16

Commit

c79342b

verified ·

1 Parent(s): 7c2cb7f

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +476 -19

index.html CHANGED Viewed

@@ -1,19 +1,476 @@
-<!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>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>&copy; 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>