Spaces:

matthewspring
/

anycoder-09921165

Running

App Files Files Community

matthewspring commited on Feb 4

Commit

59db25a

verified ·

1 Parent(s): 3fa053c

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +422 -19

index.html CHANGED Viewed

@@ -1,19 +1,422 @@
-<!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>Thanks & Thumbs Up App</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: #0f172a;
+            overflow-x: hidden;
+        }
+        /* Custom Animations */
+        @keyframes float {
+            0%, 100% { transform: translateY(0px); }
+            50% { transform: translateY(-20px); }
+        }
+        @keyframes pulse-glow {
+            0%, 100% { box-shadow: 0 0 20px rgba(250, 204, 21, 0.2); }
+            50% { box-shadow: 0 0 40px rgba(250, 204, 21, 0.6); }
+        }
+        @keyframes pop {
+            0% { transform: scale(0.8); opacity: 0; }
+            50% { transform: scale(1.2); opacity: 1; }
+            100% { transform: scale(1); opacity: 1; }
+        }
+        @keyframes slide-up {
+            0% { transform: translateY(20px); opacity: 0; }
+            100% { transform: translateY(0); opacity: 1; }
+        }
+        .animate-float {
+            animation: float 6s ease-in-out infinite;
+        }
+        .animate-pop {
+            animation: pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+        }
+        .animate-slide-up {
+            animation: slide-up 0.6s ease-out forwards;
+        }
+        /* Glassmorphism */
+        .glass-panel {
+            background: rgba(255, 255, 255, 0.05);
+            backdrop-filter: blur(16px);
+            -webkit-backdrop-filter: blur(16px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        /* Gradient Text */
+        .text-gradient {
+            background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        /* Button Styles */
+        .btn-primary {
+            background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+        .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 20px -10px rgba(251, 191, 36, 0.5);
+        }
+        .btn-primary:active {
+            transform: scale(0.98);
+        }
+        /* Particle Canvas */
+        #confetti-canvas {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            z-index: 50;
+        }
+        /* Card Hover Effect */
+        .testimonial-card {
+            transition: transform 0.3s ease, background 0.3s ease;
+        }
+        .testimonial-card:hover {
+            transform: translateY(-5px);
+            background: rgba(255, 255, 255, 0.08);
+        }
+    </style>
+</head>
+<body class="text-slate-200 min-h-screen flex flex-col">
+    <!-- Canvas for Confetti -->
+    <canvas id="confetti-canvas"></canvas>
+    <!-- Navigation -->
+    <nav class="w-full glass-panel fixed top-0 z-40 border-b border-white/10">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex items-center justify-between h-16">
+                <div class="flex items-center gap-2">
+                    <div class="w-8 h-8 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-lg flex items-center justify-center text-slate-900 font-bold">
+                        <i class="fa-solid fa-thumbs-up"></i>
+                    </div>
+                    <span class="font-bold text-xl tracking-tight text-white">Gratitude<span class="text-yellow-400">Hub</span></span>
+                </div>
+                <div class="hidden md:block">
+                    <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-xs font-medium text-slate-400 hover:text-white transition-colors flex items-center gap-2 bg-white/5 px-3 py-1.5 rounded-full border border-white/10 hover:border-white/20">
+                        <i class="fa-solid fa-code"></i> Built with anycoder
+                    </a>
+                </div>
+            </div>
+        </div>
+    </nav>
+    <!-- Main Content -->
+    <main class="flex-grow pt-24 pb-12 px-4 sm:px-6 lg:px-8 relative overflow-hidden">
+        <!-- Background Decorations -->
+        <div class="absolute top-20 left-10 w-72 h-72 bg-purple-500/20 rounded-full blur-[100px] -z-10 animate-float"></div>
+        <div class="absolute bottom-20 right-10 w-96 h-96 bg-yellow-500/10 rounded-full blur-[120px] -z-10 animate-float" style="animation-delay: 2s;"></div>
+        <div class="max-w-4xl mx-auto">
+            <!-- Hero Section -->
+            <div class="text-center mb-16 animate-slide-up">
+                <div class="inline-block mb-4 px-4 py-1.5 rounded-full bg-yellow-500/10 border border-yellow-500/20 text-yellow-400 text-sm font-semibold tracking-wide uppercase">
+                    Appreciation Station
+                </div>
+                <h1 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-6">
+                    Send a <span class="text-gradient">Thumbs Up</span>
+                </h1>
+                <p class="text-lg text-slate-400 max-w-2xl mx-auto mb-10 leading-relaxed">
+                    Sometimes words aren't enough. Click the button below to send a burst of gratitude into the universe.
+                    Watch the confetti fly and the counter rise!
+                </p>
+                <!-- Interactive Counter Card -->
+                <div class="glass-panel rounded-3xl p-8 md:p-12 max-w-2xl mx-auto relative overflow-hidden group">
+                    <div class="absolute inset-0 bg-gradient-to-br from-yellow-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+                    <div class="relative z-10 flex flex-col items-center gap-8">
+                        <div class="text-center">
+                            <p class="text-slate-400 text-sm uppercase tracking-widest font-semibold mb-2">Total Appreciation Sent</p>
+                            <div id="counter-display" class="text-7xl md:text-9xl font-black text-white tabular-nums tracking-tighter drop-shadow-2xl">
+                                0
+                            </div>
+                        </div>
+                        <button id="thumbs-up-btn" class="btn-primary group relative w-24 h-24 rounded-full flex items-center justify-center shadow-2xl transform transition-all duration-200 active:scale-95">
+                            <i class="fa-solid fa-thumbs-up text-4xl text-slate-900 transition-transform duration-300 group-hover:rotate-12"></i>
+                            <div class="absolute inset-0 rounded-full border-4 border-white/20 animate-ping opacity-0 group-hover:opacity-100"></div>
+                        </button>
+                        <p class="text-slate-400 text-sm italic" id="feedback-text">Click the button to show some love!</p>
+                    </div>
+                </div>
+            </div>
+            <!-- Features / Testimonials Grid -->
+            <div class="grid md:grid-cols-3 gap-6 animate-slide-up" style="animation-delay: 0.2s;">
+                <!-- Card 1 -->
+                <div class="testimonial-card glass-panel p-6 rounded-2xl border border-white/5">
+                    <div class="flex items-center gap-4 mb-4">
+                        <div class="w-10 h-10 rounded-full bg-blue-500/20 flex items-center justify-center text-blue-400">
+                            <i class="fa-solid fa-bolt"></i>
+                        </div>
+                        <h3 class="font-bold text-white">Instant Joy</h3>
+                    </div>
+                    <p class="text-slate-400 text-sm leading-relaxed">
+                        "This app delivers serotonin directly to your browser. The animations are buttery smooth."
+                    </p>
+                </div>
+                <!-- Card 2 -->
+                <div class="testimonial-card glass-panel p-6 rounded-2xl border border-white/5">
+                    <div class="flex items-center gap-4 mb-4">
+                        <div class="w-10 h-10 rounded-full bg-pink-500/20 flex items-center justify-center text-pink-400">
+                            <i class="fa-solid fa-heart"></i>
+                        </div>
+                        <h3 class="font-bold text-white">Made with Love</h3>
+                    </div>
+                    <p class="text-slate-400 text-sm leading-relaxed">
+                        "Built using only HTML, CSS, and JS. No heavy frameworks, just pure web magic."
+                    </p>
+                </div>
+                <!-- Card 3 -->
+                <div class="testimonial-card glass-panel p-6 rounded-2xl border border-white/5">
+                    <div class="flex items-center gap-4 mb-4">
+                        <div class="w-10 h-10 rounded-full bg-green-500/20 flex items-center justify-center text-green-400">
+                            <i class="fa-solid fa-leaf"></i>
+                        </div>
+                        <h3 class="font-bold text-white">Lightweight</h3>
+                    </div>
+                    <p class="text-slate-400 text-sm leading-relaxed">
+                        "Fast loading, responsive design, and a beautiful dark mode interface by default."
+                    </p>
+                </div>
+            </div>
+        </div>
+    </main>
+    <footer class="border-t border-white/10 bg-slate-900/50 backdrop-blur-sm py-8">
+        <div class="max-w-7xl mx-auto px-4 text-center">
+            <p class="text-slate-500 text-sm">
+                &copy; 2023 GratitudeHub. Keep spreading positivity.
+            </p>
+            <div class="mt-4 md:hidden">
+                 <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-xs font-medium text-slate-400 hover:text-white transition-colors">
+                    Built with anycoder
+                </a>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // --- Configuration & State ---
+        const state = {
+            count: 1420, // Starting number for visual appeal
+            messages: [
+                "Awesome!",
+                "Great Job!",
+                "You Rock!",
+                "Keep it up!",
+                "Fantastic!",
+                "Thumbs Up!",
+                "Legendary!",
+                "Superb!"
+            ]
+        };
+        // --- DOM Elements ---
+        const counterDisplay = document.getElementById('counter-display');
+        const thumbsUpBtn = document.getElementById('thumbs-up-btn');
+        const feedbackText = document.getElementById('feedback-text');
+        const canvas = document.getElementById('confetti-canvas');
+        const ctx = canvas.getContext('2d');
+        // --- Counter Logic ---
+        // Animate number counting up on load
+        function animateValue(obj, start, end, duration) {
+            let startTimestamp = null;
+            const step = (timestamp) => {
+                if (!startTimestamp) startTimestamp = timestamp;
+                const progress = Math.min((timestamp - startTimestamp) / duration, 1);
+                obj.innerHTML = Math.floor(progress * (end - start) + start).toLocaleString();
+                if (progress < 1) {
+                    window.requestAnimationFrame(step);
+                }
+            };
+            window.requestAnimationFrame(step);
+        }
+        // Initialize counter
+        animateValue(counterDisplay, 0, state.count, 2000);
+        // --- Interaction Logic ---
+        thumbsUpBtn.addEventListener('click', (e) => {
+            // 1. Increment State
+            state.count++;
+            // 2. Update UI with animation class reset
+            counterDisplay.classList.remove('animate-pop');
+            void counterDisplay.offsetWidth; // Trigger reflow
+            counterDisplay.textContent = state.count.toLocaleString();
+            counterDisplay.classList.add('animate-pop');
+            // 3. Update Feedback Text
+            const randomMsg = state.messages[Math.floor(Math.random() * state.messages.length)];
+            feedbackText.style.opacity = 0;
+            setTimeout(() => {
+                feedbackText.textContent = randomMsg;
+                feedbackText.style.opacity = 1;
+            }, 150);
+            // 4. Trigger Confetti
+            const rect = thumbsUpBtn.getBoundingClientRect();
+            const x = (rect.left + rect.width / 2) / window.innerWidth;
+            const y = (rect.top + rect.height / 2) / window.innerHeight;
+            fireConfetti(x, y);
+        });
+        // --- Confetti Engine (Custom Implementation) ---
+        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;
+                // Randomize angle and velocity
+                const angle = Math.random() * Math.PI * 2;
+                const velocity = Math.random() * 6 + 2;
+                this.vx = Math.cos(angle) * velocity;
+                this.vy = Math.sin(angle) * velocity - 3; // Slight upward bias
+                this.gravity = 0.2;
+                this.friction = 0.96;
+                this.alpha = 1;
+                this.decay = Math.random() * 0.02 + 0.01;
+                // Color palette (Gold, Orange, White, Blue)
+                const colors = ['#fbbf24', '#f59e0b', '#ffffff', '#60a5fa', '#f472b6'];
+                this.color = colors[Math.floor(Math.random() * colors.length)];
+                this.size = Math.random() * 6 + 4;
+                this.rotation = Math.random() * 360;
+                this.rotationSpeed = (Math.random() - 0.5) * 10;
+            }
+            update() {
+                this.vx *= this.friction;
+                this.vy *= this.friction;
+                this.vy += this.gravity;
+                this.x += this.vx;
+                this.y += this.vy;
+                this.alpha -= this.decay;
+                this.rotation += this.rotationSpeed;
+            }
+            draw(ctx) {
+                ctx.save();
+                ctx.translate(this.x, this.y);
+                ctx.rotate((this.rotation * Math.PI) / 180);
+                ctx.globalAlpha = this.alpha;
+                ctx.fillStyle = this.color;
+                // Draw a square (confetti shape)
+                ctx.fillRect(-this.size / 2, -this.size / 2, this.size, this.size);
+                ctx.restore();
+            }
+        }
+        function fireConfetti(originX, originY) {
+            // Convert normalized coordinates (0-1) to pixels
+            const x = originX * canvas.width;
+            const y = originY * canvas.height;
+            // Create explosion
+            for (let i = 0; i < 60; i++) {
+                particles.push(new Particle(x, y));
+            }
+            if (!isAnimating) {
+                animateConfetti();
+            }
+        }
+        let isAnimating = false;
+        function animateConfetti() {
+            isAnimating = true;
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            for (let i = particles.length - 1; i >= 0; i--) {
+                const p = particles[i];
+                p.update();
+                p.draw(ctx);
+                if (p.alpha <= 0) {
+                    particles.splice(i, 1);
+                }
+            }
+            if (particles.length > 0) {
+                requestAnimationFrame(animateConfetti);
+            } else {
+                isAnimating = false;
+            }
+        }
+        // --- Easter Egg: Konami Code for "Super Mode" ---
+        let konamiCode = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a'];
+        let konamiIndex = 0;
+        document.addEventListener('keydown', (e) => {
+            if (e.key === konamiCode[konamiIndex]) {
+                konamiIndex++;
+                if (konamiIndex === konamiCode.length) {
+                    activateSuperMode();
+                    konamiIndex = 0;
+                }
+            } else {
+                konamiIndex = 0;
+            }
+        });
+        function activateSuperMode() {
+            feedbackText.textContent = "🚀 SUPER MODE ACTIVATED! 🚀";
+            feedbackText.classList.add('text-yellow-400', 'font-bold');
+            // Auto-clicker effect for 2 seconds
+            let clicks = 0;
+            const interval = setInterval(() => {
+                thumbsUpBtn.click();
+                clicks++;
+                if(clicks > 20) clearInterval(interval);
+            }, 100);
+        }
+    </script>
+</body>
+</html>