Spaces:

victor
/

hello

Running

App Files Files Community

victor HF Staff commited on Mar 27

Commit

e258993

verified ·

1 Parent(s): 4112698

Add index.html

Browse files

Files changed (1) hide show

index.html +382 -18

index.html CHANGED Viewed

@@ -1,19 +1,383 @@
-<!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>Interactive Greeting</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Poppins', sans-serif;
+        }
+        body {
+            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            overflow: hidden;
+        }
+        .greeting-card {
+            position: relative;
+            width: 90%;
+            max-width: 500px;
+            background: white;
+            border-radius: 20px;
+            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
+            padding: 40px;
+            text-align: center;
+            transform-style: preserve-3d;
+            transition: transform 0.5s;
+            overflow: hidden;
+            cursor: pointer;
+        }
+        .greeting-card::before {
+            content: '';
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+            transform: rotate(45deg);
+            transition: 0.5s;
+        }
+        .greeting-card:hover::before {
+            left: 100%;
+        }
+        .card-content {
+            position: relative;
+            z-index: 1;
+        }
+        h1 {
+            color: #444;
+            margin-bottom: 20px;
+            font-weight: 700;
+            font-size: 2.2rem;
+            transition: all 0.3s;
+        }
+        p {
+            color: #666;
+            line-height: 1.6;
+            margin-bottom: 30px;
+            font-size: 1.1rem;
+        }
+        .btn {
+            display: inline-block;
+            padding: 12px 30px;
+            background: linear-gradient(45deg, #667eea, #764ba2);
+            color: white;
+            border-radius: 30px;
+            text-decoration: none;
+            font-weight: 600;
+            box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
+            transition: all 0.3s;
+            border: none;
+            cursor: pointer;
+        }
+        .btn:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 15px 30px rgba(102, 126, 234, 0.4);
+        }
+        .bubbles {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+            z-index: -1;
+            pointer-events: none;
+        }
+        .bubble {
+            position: absolute;
+            background: rgba(255, 255, 255, 0.5);
+            border-radius: 50%;
+            animation: float 15s infinite linear;
+        }
+        @keyframes float {
+            0% {
+                transform: translateY(0) rotate(0deg);
+                opacity: 1;
+            }
+            100% {
+                transform: translateY(-1000px) rotate(720deg);
+                opacity: 0;
+            }
+        }
+        .emoji-container {
+            font-size: 3rem;
+            margin: 20px 0;
+            height: 80px;
+            position: relative;
+        }
+        .emoji {
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+        }
+        .hidden {
+            opacity: 0;
+            transform: translateX(-50%) scale(0.5);
+        }
+        .stars {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+            z-index: -1;
+        }
+        .star {
+            position: absolute;
+            background: white;
+            width: 3px;
+            height: 3px;
+            border-radius: 50%;
+            animation: twinkle 4s infinite;
+        }
+        @keyframes twinkle {
+            0% { opacity: 0.2; }
+            50% { opacity: 1; }
+            100% { opacity: 0.2; }
+        }
+    </style>
+</head>
+<body>
+    <div class="greeting-card" id="card">
+        <div class="bubbles"></div>
+        <div class="stars"></div>
+        <div class="card-content">
+            <div class="emoji-container">
+                <div class="emoji" id="hello-emoji">👋</div>
+                <div class="emoji hidden" id="smile-emoji">😊</div>
+                <div class="emoji hidden" id="heart-emoji">❤️</div>
+            </div>
+            <h1 id="greeting-text">Hello!</h1>
+            <p id="message-text">Thanks for stopping by! Click me to see some magic happen.</p>
+            <button class="btn" id="action-btn">Surprise Me!</button>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const card = document.getElementById('card');
+            const greetingText = document.getElementById('greeting-text');
+            const messageText = document.getElementById('message-text');
+            const actionBtn = document.getElementById('action-btn');
+            const helloEmoji = document.getElementById('hello-emoji');
+            const smileEmoji = document.getElementById('smile-emoji');
+            const heartEmoji = document.getElementById('heart-emoji');
+            const bubblesContainer = document.querySelector('.bubbles');
+            const starsContainer = document.querySelector('.stars');
+            // Create bubbles
+            for (let i = 0; i < 20; i++) {
+                createBubble();
+            }
+            // Create stars
+            for (let i = 0; i < 50; i++) {
+                createStar();
+            }
+            // Current state
+            let state = 0;
+            const messages = [
+                { greeting: "Hello!", message: "Thanks for stopping by! Click me to see some magic happen.", emoji: "👋" },
+                { greeting: "Have a wonderful day!", message: "I hope your day is filled with joy and happiness.", emoji: "😊" },
+                { greeting: "You're awesome!", message: "Just wanted to remind you how amazing you are!", emoji: "❤️" },
+                { greeting: "Hello again!", message: "The magic continues! Click the button for another surprise.", emoji: "✨" }
+            ];
+            // Card click event
+            card.addEventListener('click', function() {
+                state = (state + 1) % 4;
+                updateCard();
+                animateCard();
+            });
+            // Button click event
+            actionBtn.addEventListener('click', function(e) {
+                e.stopPropagation();
+                createConfetti();
+            });
+            function updateCard() {
+                const currentMessage = messages[state];
+                greetingText.textContent = currentMessage.greeting;
+                messageText.textContent = currentMessage.message;
+                // Hide all emojis
+                [helloEmoji, smileEmoji, heartEmoji].forEach(emoji => {
+                    emoji.classList.add('hidden');
+                });
+                // Show the appropriate emoji
+                switch(state) {
+                    case 0:
+                        helloEmoji.classList.remove('hidden');
+                        break;
+                    case 1:
+                        smileEmoji.classList.remove('hidden');
+                        break;
+                    case 2:
+                        heartEmoji.classList.remove('hidden');
+                        break;
+                    case 3:
+                        // For the 4th state, show all briefly
+                        [helloEmoji, smileEmoji, heartEmoji].forEach((emoji, index) => {
+                            setTimeout(() => {
+                                emoji.classList.remove('hidden');
+                                setTimeout(() => {
+                                    emoji.classList.add('hidden');
+                                }, 500);
+                            }, index * 300);
+                        });
+                        break;
+                }
+            }
+            function animateCard() {
+                card.style.transform = 'rotateY(10deg)';
+                setTimeout(() => {
+                    card.style.transform = 'rotateY(-10deg)';
+                    setTimeout(() => {
+                        card.style.transform = 'rotateY(0)';
+                    }, 150);
+                }, 150);
+            }
+            function createBubble() {
+                const bubble = document.createElement('div');
+                bubble.classList.add('bubble');
+                const size = Math.random() * 40 + 10;
+                const posX = Math.random() * 100;
+                const delay = Math.random() * 15;
+                const duration = Math.random() * 10 + 10;
+                bubble.style.width = `${size}px`;
+                bubble.style.height = `${size}px`;
+                bubble.style.left = `${posX}%`;
+                bubble.style.bottom = `-${size}px`;
+                bubble.style.animationDuration = `${duration}s`;
+                bubble.style.animationDelay = `${delay}s`;
+                bubblesContainer.appendChild(bubble);
+                // Remove bubble after animation completes
+                setTimeout(() => {
+                    bubble.remove();
+                    createBubble(); // Create new bubble
+                }, (duration + delay) * 1000);
+            }
+            function createStar() {
+                const star = document.createElement('div');
+                star.classList.add('star');
+                const posX = Math.random() * 100;
+                const posY = Math.random() * 100;
+                const delay = Math.random() * 4;
+                const size = Math.random() * 2 + 1;
+                star.style.left = `${posX}%`;
+                star.style.top = `${posY}%`;
+                star.style.width = `${size}px`;
+                star.style.height = `${size}px`;
+                star.style.animationDelay = `${delay}s`;
+                starsContainer.appendChild(star);
+            }
+            function createConfetti() {
+                // Clear any existing confetti
+                const existingConfetti = document.querySelectorAll('.confetti');
+                existingConfetti.forEach(el => el.remove());
+                // Create 50 confetti pieces
+                for (let i = 0; i < 50; i++) {
+                    const confetti = document.createElement('div');
+                    confetti.classList.add('confetti');
+                    // Random properties
+                    const colors = ['#ff9ff3', '#feca57', '#ff6b6b', '#48dbfb', '#1dd1a1', '#f368e0'];
+                    const color = colors[Math.floor(Math.random() * colors.length)];
+                    const size = Math.random() * 10 + 5;
+                    const posX = Math.random() * 100;
+                    const rotation = Math.random() * 360;
+                    const animationDuration = Math.random() * 3 + 2;
+                    // Position absolutely within the card
+                    confetti.style.position = 'absolute';
+                    confetti.style.width = `${size}px`;
+                    confetti.style.height = `${size}px`;
+                    confetti.style.backgroundColor = color;
+                    confetti.style.left = `${posX}%`;
+                    confetti.style.top = '20%';
+                    confetti.style.borderRadius = '50%';
+                    confetti.style.transform = `rotate(${rotation}deg)`;
+                    confetti.style.zIndex = '10';
+                    // Animation - falls down with varying timing
+                    confetti.style.animation = `confetti-fall ${animationDuration}s forwards`;
+                    card.appendChild(confetti);
+                    // Remove after animation
+                    setTimeout(() => {
+                        confetti.remove();
+                    }, animationDuration * 1000);
+                }
+                // Add CSS for animation
+                const style = document.createElement('style');
+                style.innerHTML = `
+                    @keyframes confetti-fall {
+                        0% {
+                            transform: translateY(0) rotate(0deg);
+                            opacity: 1;
+                        }
+                        100% {
+                            transform: translateY(300px) rotate(720deg);
+                            opacity: 0;
+                        }
+                    }
+                `;
+                document.head.appendChild(style);
+            }
+            // Automatic greeting change every 8 seconds
+            setInterval(() => {
+                state = (state + 1) % 4;
+                updateCard();
+                animateCard();
+            }, 8000);
+        });
+    </script>
+</body>
 </html>