Spaces:

vinrox10
/

anycoder-fa762921

Running

App Files Files Community

vinrox10 commited on 9 days ago

Commit

0027da1

verified ·

1 Parent(s): d0a6be7

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +514 -19

index.html CHANGED Viewed

@@ -1,19 +1,514 @@
-<!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 - Interactive Greeting</title>
+    <!-- Importing 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=Playfair+Display:ital,wght@1,700&family=Space+Grotesk:wght@700&display=swap" rel="stylesheet">
+    <!-- Importing Phosphor Icons -->
+    <script src="https://unpkg.com/@phosphor-icons/web"></script>
+    <style>
+        :root {
+            --primary: #6366f1;
+            --secondary: #a855f7;
+            --accent: #ec4899;
+            --bg-dark: #0f172a;
+            --text-light: #f8fafc;
+            --glass-bg: rgba(255, 255, 255, 0.05);
+            --glass-border: rgba(255, 255, 255, 0.1);
+            --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+            --font-main: 'Outfit', sans-serif;
+            --font-fancy: 'Playfair Display', serif;
+            --font-tech: 'Space Grotesk', sans-serif;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: var(--font-main);
+            background-color: var(--bg-dark);
+            color: var(--text-light);
+            min-height: 100vh;
+            overflow-x: hidden;
+            display: flex;
+            flex-direction: column;
+            position: relative;
+        }
+        /* Animated Background */
+        .background-mesh {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+            background: radial-gradient(circle at 15% 50%, rgba(99, 102, 241, 0.15), transparent 25%),
+                        radial-gradient(circle at 85% 30%, rgba(168, 85, 247, 0.15), transparent 25%);
+            animation: pulseBackground 10s ease-in-out infinite alternate;
+        }
+        .orb {
+            position: absolute;
+            border-radius: 50%;
+            filter: blur(80px);
+            z-index: -1;
+            opacity: 0.6;
+            animation: float 20s infinite ease-in-out;
+        }
+        .orb-1 {
+            width: 400px;
+            height: 400px;
+            background: var(--primary);
+            top: -100px;
+            left: -100px;
+        }
+        .orb-2 {
+            width: 300px;
+            height: 300px;
+            background: var(--accent);
+            bottom: -50px;
+            right: -50px;
+            animation-delay: -5s;
+        }
+        .orb-3 {
+            width: 200px;
+            height: 200px;
+            background: var(--secondary);
+            top: 40%;
+            left: 40%;
+            animation-duration: 25s;
+        }
+        /* Header */
+        header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 1.5rem 2rem;
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--glass-border);
+            position: sticky;
+            top: 0;
+            z-index: 100;
+        }
+        .logo {
+            font-weight: 900;
+            font-size: 1.5rem;
+            letter-spacing: -1px;
+            background: linear-gradient(to right, #fff, #94a3b8);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .anycoder-link {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            text-decoration: none;
+            color: var(--text-light);
+            font-size: 0.9rem;
+            font-weight: 500;
+            padding: 0.5rem 1rem;
+            border-radius: 50px;
+            background: rgba(255,255,255,0.1);
+            transition: all 0.3s ease;
+            border: 1px solid transparent;
+        }
+        .anycoder-link:hover {
+            background: rgba(255,255,255,0.2);
+            border-color: var(--primary);
+            transform: translateY(-2px);
+        }
+        /* Main Content */
+        main {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            padding: 2rem;
+            position: relative;
+        }
+        .card-container {
+            width: 100%;
+            max-width: 600px;
+            perspective: 1000px;
+        }
+        .greeting-card {
+            background: var(--glass-bg);
+            backdrop-filter: blur(16px);
+            -webkit-backdrop-filter: blur(16px);
+            border: 1px solid var(--glass-border);
+            border-radius: 24px;
+            padding: 3rem 2rem;
+            box-shadow: var(--glass-shadow);
+            text-align: center;
+            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+            position: relative;
+            overflow: hidden;
+        }
+        .greeting-card:hover {
+            transform: translateY(-5px);
+        }
+        .greeting-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 4px;
+            background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
+        }
+        .greeting-text {
+            font-size: 5rem;
+            font-weight: 900;
+            line-height: 1;
+            margin-bottom: 1rem;
+            background: linear-gradient(135deg, #fff 0%, #cbd5e1 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            position: relative;
+            display: inline-block;
+            transition: font-family 0.5s ease;
+        }
+        .greeting-sub {
+            font-size: 1.25rem;
+            color: #94a3b8;
+            margin-bottom: 2.5rem;
+            font-weight: 300;
+            min-height: 1.5em;
+        }
+        /* Controls */
+        .controls {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            gap: 1rem;
+            margin-bottom: 2rem;
+        }
+        .mood-btn {
+            background: transparent;
+            border: 1px solid var(--glass-border);
+            color: #94a3b8;
+            padding: 0.75rem 1.5rem;
+            border-radius: 12px;
+            cursor: pointer;
+            font-family: var(--font-main);
+            font-weight: 500;
+            transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .mood-btn:hover {
+            background: rgba(255,255,255,0.05);
+            color: #fff;
+            border-color: rgba(255,255,255,0.3);
+        }
+        .mood-btn.active {
+            background: var(--primary);
+            color: #fff;
+            border-color: var(--primary);
+            box-shadow: 0 0 15px rgba(99, 102, 241, 0.4);
+        }
+        .action-area {
+            display: flex;
+            gap: 1rem;
+            justify-content: center;
+        }
+        .primary-btn {
+            background: linear-gradient(135deg, var(--primary), var(--secondary));
+            border: none;
+            color: white;
+            padding: 1rem 2rem;
+            border-radius: 12px;
+            font-weight: 700;
+            font-size: 1rem;
+            cursor: pointer;
+            transition: transform 0.2s, box-shadow 0.2s;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .primary-btn:hover {
+            transform: scale(1.05);
+            box-shadow: 0 10px 20px rgba(99, 102, 241, 0.3);
+        }
+        .primary-btn:active {
+            transform: scale(0.95);
+        }
+        /* Confetti Canvas */
+        #confetti-canvas {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            z-index: 999;
+        }
+        /* Animations */
+        @keyframes float {
+            0%, 100% { transform: translate(0, 0); }
+            50% { transform: translate(30px, 50px); }
+        }
+        @keyframes pulseBackground {
+            0% { opacity: 0.5; }
+            100% { opacity: 1; }
+        }
+        @keyframes popIn {
+            0% { transform: scale(0.8); opacity: 0; }
+            100% { transform: scale(1); opacity: 1; }
+        }
+        .pop-in {
+            animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+        }
+        /* Responsive */
+        @media (max-width: 600px) {
+            .greeting-text { font-size: 3.5rem; }
+            .controls { gap: 0.5rem; }
+            .mood-btn { padding: 0.5rem 1rem; font-size: 0.9rem; }
+            header { padding: 1rem; }
+            .anycoder-link span { display: none; } /* Hide text on very small screens */
+            .anycoder-link i { font-size: 1.2rem; }
+        }
+    </style>
+</head>
+<body>
+    <!-- Animated Background Elements -->
+    <div class="background-mesh"></div>
+    <div class="orb orb-1"></div>
+    <div class="orb orb-2"></div>
+    <div class="orb orb-3"></div>
+    <canvas id="confetti-canvas"></canvas>
+    <header>
+        <div class="logo">Hi.</div>
+        <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
+            <i class="ph ph-code"></i>
+            <span>Built with anycoder</span>
+        </a>
+    </header>
+    <main>
+        <div class="card-container">
+            <div class="greeting-card" id="card">
+                <h1 class="greeting-text" id="greetingText">Hi</h1>
+                <p class="greeting-sub" id="greetingSub">Welcome to the interface.</p>
+                <div class="controls">
+                    <button class="mood-btn active" onclick="setMood('modern')">
+                        <i class="ph ph-sparkle"></i> Modern
+                    </button>
+                    <button class="mood-btn" onclick="setMood('elegant')">
+                        <i class="ph ph-crown"></i> Elegant
+                    </button>
+                    <button class="mood-btn" onclick="setMood('tech')">
+                        <i class="ph ph-robot"></i> Tech
+                    </button>
+                    <button class="mood-btn" onclick="setMood('friendly')">
+                        <i class="ph ph-smiley"></i> Friendly
+                    </button>
+                </div>
+                <div class="action-area">
+                    <button class="primary-btn" onclick="sendGreeting()">
+                        <i class="ph ph-paper-plane-right"></i> Send Greeting
+                    </button>
+                </div>
+            </div>
+        </div>
+    </main>
+    <script>
+        // State management
+        const moods = {
+            modern: {
+                text: "Hi",
+                sub: "Welcome to the future of design.",
+                font: "'Outfit', sans-serif",
+                gradient: "linear-gradient(135deg, #6366f1, #a855f7)"
+            },
+            elegant: {
+                text: "Hello",
+                sub: "A warm welcome to you.",
+                font: "'Playfair Display', serif",
+                gradient: "linear-gradient(135deg, #fbbf24, #d97706)"
+            },
+            tech: {
+                text: "SYSTEM_READY",
+                sub: "Initialize connection protocol.",
+                font: "'Space Grotesk', sans-serif",
+                gradient: "linear-gradient(135deg, #10b981, #059669)"
+            },
+            friendly: {
+                text: "Hey there!",
+                sub: "So glad you stopped by!",
+                font: "'Outfit', sans-serif",
+                gradient: "linear-gradient(135deg, #ec4899, #f43f5e)"
+            }
+        };
+        let currentMood = 'modern';
+        // DOM Elements
+        const greetingText = document.getElementById('greetingText');
+        const greetingSub = document.getElementById('greetingSub');
+        const card = document.getElementById('card');
+        const buttons = document.querySelectorAll('.mood-btn');
+        // Function to change mood
+        function setMood(moodKey) {
+            currentMood = moodKey;
+            const data = moods[moodKey];
+            // Update Buttons
+            buttons.forEach(btn => btn.classList.remove('active'));
+            event.currentTarget.classList.add('active');
+            // Update Text with animation
+            greetingText.style.opacity = '0';
+            greetingText.style.transform = 'translateY(10px)';
+            setTimeout(() => {
+                greetingText.innerText = data.text;
+                greetingText.style.fontFamily = data.font;
+                greetingText.style.background = data.gradient;
+                greetingText.style.webkitBackgroundClip = 'text';
+                greetingText.style.webkitTextFillColor = 'transparent';
+                greetingSub.innerText = data.sub;
+                greetingText.style.opacity = '1';
+                greetingText.style.transform = 'translateY(0)';
+                greetingText.style.transition = 'all 0.4s ease';
+            }, 200);
+            // Subtle card border color change
+            card.style.borderColor = getComputedStyle(document.documentElement).getPropertyValue('--glass-border');
+        }
+        // Confetti Logic
+        const canvas = document.getElementById('confetti-canvas');
+        const ctx = canvas.getContext('2d');
+        let particles = [];
+        function resizeCanvas() {
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+        }
+        window.addEventListener('resize', resizeCanvas);
+        resizeCanvas();
+        class Particle {
+            constructor(x, y) {
+                this.x = x;
+                this.y = y;
+                this.size = Math.random() * 10 + 5;
+                this.speedX = Math.random() * 6 - 3;
+                this.speedY = Math.random() * -6 - 2;
+                this.gravity = 0.2;
+                this.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
+                this.rotation = Math.random() * 360;
+                this.rotationSpeed = Math.random() * 10 - 5;
+            }
+            update() {
+                this.speedY += this.gravity;
+                this.x += this.speedX;
+                this.y += this.speedY;
+                this.rotation += this.rotationSpeed;
+                if (this.size > 0.2) this.size -= 0.1;
+            }
+            draw() {
+                ctx.save();
+                ctx.translate(this.x, this.y);
+                ctx.rotate(this.rotation * Math.PI / 180);
+                ctx.fillStyle = this.color;
+                ctx.fillRect(-this.size / 2, -this.size / 2, this.size, this.size);
+                ctx.restore();
+            }
+        }
+        function createConfetti() {
+            for (let i = 0; i < 100; i++) {
+                particles.push(new Particle(window.innerWidth / 2, window.innerHeight / 2));
+            }
+            animateConfetti();
+        }
+        function animateConfetti() {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            for (let i = 0; i < particles.length; i++) {
+                particles[i].update();
+                particles[i].draw();
+                if (particles[i].size <= 0.3) {
+                    particles.splice(i, 1);
+                    i--;
+                }
+            }
+            if (particles.length > 0) {
+                requestAnimationFrame(animateConfetti);
+            }
+        }
+        function sendGreeting() {
+            // Visual feedback on button
+            const btn = document.querySelector('.primary-btn');
+            const originalText = btn.innerHTML;
+            btn.innerHTML = '<i class="ph ph-check"></i> Sent!';
+            btn.style.background = '#10b981';
+            createConfetti();
+            setTimeout(() => {
+                btn.innerHTML = originalText;
+                btn.style.background = ''; // Reset to CSS gradient
+            }, 2000);
+        }
+        // Initial Animation
+        window.addEventListener('load', () => {
+            greetingText.classList.add('pop-in');
+        });
+    </script>
+</body>
+</html>