Spaces:

ProjectGenesis
/

deepsite-project-bvljk

Running

App Files Files Community

ProjectGenesis commited on Mar 28

Commit

6e722c8

verified ·

1 Parent(s): db0c97c

Initial DeepSite commit

Browse files

Files changed (2) hide show

README.md +8 -5
index.html +623 -19

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Deepsite Project Bvljk
-emoji: 🐠
 colorFrom: purple
-colorTo: gray
 sdk: static
-pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: DeepSite Project
 colorFrom: purple
+colorTo: yellow
 sdk: static
+emoji: 📱
+tags:
+  - deepsite-v4
 ---
+# DeepSite Project
+This project has been created with [DeepSite](https://deepsite.hf.co) AI Vibe Coding.

index.html CHANGED Viewed

@@ -1,19 +1,623 @@
-<!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>Casino Win Animation</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800;900&display=swap');
+        body {
+            font-family: 'Inter', sans-serif;
+            overflow: hidden;
+            background: #0a0a0a;
+        }
+        /* Slot Machine Background */
+        .slot-background {
+            position: absolute;
+            inset: 0;
+            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%);
+            filter: blur(12px) brightness(0.4);
+            transform: scale(1.1);
+        }
+        .reels-container {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            grid-template-columns: repeat(5, 1fr);
+            gap: 2rem;
+            padding: 4rem;
+            opacity: 0.6;
+        }
+        .reel {
+            background: linear-gradient(180deg, #2a2a4a 0%, #1a1a2e 100%);
+            border-radius: 1rem;
+            border: 2px solid rgba(255, 215, 0, 0.1);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: space-around;
+            padding: 1rem;
+            box-shadow: inset 0 0 30px rgba(0,0,0,0.5);
+        }
+        .slot-symbol {
+            font-size: 3rem;
+            filter: drop-shadow(0 0 10px currentColor);
+            opacity: 0.8;
+        }
+        /* Vignette Overlay */
+        .vignette {
+            position: absolute;
+            inset: 0;
+            background: radial-gradient(circle at center, transparent 0%, rgba(0,0,0,0.8) 70%, rgba(0,0,0,0.95) 100%);
+            pointer-events: none;
+        }
+        /* Win Popup Cards */
+        .popup-card {
+            position: absolute;
+            width: 280px;
+            height: 90px;
+            background: linear-gradient(135deg, #ffd700 0%, #ffed4e 25%, #ffd700 50%, #ffed4e 75%, #ffd700 100%);
+            background-size: 200% 200%;
+            border-radius: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-shadow:
+                0 20px 60px rgba(255, 215, 0, 0.4),
+                0 0 0 4px rgba(255, 215, 0, 0.3),
+                inset 0 2px 10px rgba(255, 255, 255, 0.5),
+                inset 0 -2px 10px rgba(0, 0, 0, 0.1);
+            transform-origin: center center;
+            opacity: 0;
+            transform: scale(0) translateY(50px) rotateX(-45deg);
+        }
+        .popup-card::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            border-radius: 16px;
+            background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, transparent 50%, rgba(0,0,0,0.1) 100%);
+            pointer-events: none;
+        }
+        .popup-card::after {
+            content: '';
+            position: absolute;
+            top: -2px;
+            left: -2px;
+            right: -2px;
+            bottom: -2px;
+            border-radius: 18px;
+            background: linear-gradient(135deg, #ffd700, #ffed4e, #ffd700);
+            z-index: -1;
+            filter: blur(8px);
+            opacity: 0.6;
+        }
+        .popup-text {
+            font-size: 1.75rem;
+            font-weight: 900;
+            color: #1a1a1a;
+            text-shadow: 0 1px 2px rgba(255,255,255,0.5);
+            letter-spacing: -0.02em;
+        }
+        /* Animation Keyframes */
+        @keyframes popIn {
+            0% {
+                opacity: 0;
+                transform: scale(0) translateY(50px) rotateX(-45deg);
+            }
+            60% {
+                opacity: 1;
+                transform: scale(1.1) translateY(-10px) rotateX(5deg);
+            }
+            80% {
+                transform: scale(0.95) translateY(0) rotateX(-2deg);
+            }
+            100% {
+                opacity: 1;
+                transform: scale(1) translateY(0) rotateX(0deg);
+            }
+        }
+        @keyframes settle {
+            0%, 100% {
+                transform: translateY(0) scale(1);
+            }
+        }
+        @keyframes shimmer {
+            0% { background-position: -200% center; }
+            100% { background-position: 200% center; }
+        }
+        .animate-pop-1 { animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
+        .animate-pop-2 { animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s forwards; }
+        .animate-pop-3 { animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s forwards; }
+        .animate-pop-4 { animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.9s forwards; }
+        .animate-pop-5 { animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.2s forwards; }
+        .animate-pop-6 { animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.5s forwards; }
+        .animate-pop-7 { animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.8s forwards; }
+        .animate-pop-8 { animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 2.1s forwards; }
+        .animate-pop-9 { animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 2.4s forwards; }
+        .animate-pop-10 { animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 2.7s forwards; }
+        .animate-pop-11 { animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 3.0s forwards; }
+        .animate-pop-12 { animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 3.3s forwards; }
+        .animate-pop-13 { animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 3.6s forwards; }
+        .animate-pop-14 { animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 3.9s forwards; }
+        .animate-pop-15 { animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 4.2s forwards; }
+        .animate-pop-16 { animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 4.5s forwards; }
+        .animate-pop-17 { animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 4.8s forwards; }
+        .animate-pop-18 { animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 5.1s forwards; }
+        .stack-offset-1 { transform: translateY(-20px) scale(0.98); }
+        .stack-offset-2 { transform: translateY(-40px) scale(0.96); }
+        .stack-offset-3 { transform: translateY(-60px) scale(0.94); }
+        .stack-offset-4 { transform: translateY(-80px) scale(0.92); }
+        .stack-offset-5 { transform: translateY(-100px) scale(0.90); }
+        .stack-offset-6 { transform: translateY(-120px) scale(0.88); }
+        .stack-offset-7 { transform: translateY(-140px) scale(0.86); }
+        .stack-offset-8 { transform: translateY(-160px) scale(0.84); }
+        .stack-offset-9 { transform: translateY(-180px) scale(0.82); }
+        .stack-offset-10 { transform: translateY(-200px) scale(0.80); }
+        .stack-offset-11 { transform: translateY(-220px) scale(0.78); }
+        .stack-offset-12 { transform: translateY(-240px) scale(0.76); }
+        .stack-offset-13 { transform: translateY(-260px) scale(0.74); }
+        .stack-offset-14 { transform: translateY(-280px) scale(0.72); }
+        .stack-offset-15 { transform: translateY(-300px) scale(0.70); }
+        .stack-offset-16 { transform: translateY(-320px) scale(0.68); }
+        .stack-offset-17 { transform: translateY(-340px) scale(0.66); }
+        /* Particle Effects */
+        .particle {
+            position: absolute;
+            pointer-events: none;
+            border-radius: 50%;
+        }
+        .gold-spark {
+            width: 4px;
+            height: 4px;
+            background: #ffd700;
+            box-shadow: 0 0 10px #ffd700, 0 0 20px #ffed4e;
+        }
+        .shimmer-dust {
+            width: 2px;
+            height: 2px;
+            background: rgba(255, 237, 78, 0.8);
+            box-shadow: 0 0 6px rgba(255, 215, 0, 0.8);
+        }
+        .coin-glint {
+            width: 8px;
+            height: 8px;
+            background: radial-gradient(circle, #fff 0%, #ffd700 50%, transparent 70%);
+            border-radius: 50%;
+        }
+        @keyframes floatUp {
+            0% {
+                opacity: 1;
+                transform: translateY(0) scale(1) rotate(0deg);
+            }
+            100% {
+                opacity: 0;
+                transform: translateY(-150px) scale(0.5) rotate(360deg);
+            }
+        }
+        @keyframes burst {
+            0% {
+                opacity: 1;
+                transform: translate(0, 0) scale(1);
+            }
+            100% {
+                opacity: 0;
+                transform: translate(var(--tx), var(--ty)) scale(0);
+            }
+        }
+        @keyframes streak {
+            0% {
+                opacity: 0;
+                transform: translateX(-100px) scaleX(0);
+            }
+            50% {
+                opacity: 1;
+                transform: translateX(0) scaleX(1);
+            }
+            100% {
+                opacity: 0;
+                transform: translateX(100px) scaleX(0);
+            }
+        }
+        .light-streak {
+            position: absolute;
+            height: 2px;
+            width: 100px;
+            background: linear-gradient(90deg, transparent, #ffd700, transparent);
+            opacity: 0;
+        }
+        /* Glow pulse for cards */
+        @keyframes glowPulse {
+            0%, 100% { box-shadow: 0 20px 60px rgba(255, 215, 0, 0.4), 0 0 0 4px rgba(255, 215, 0, 0.3); }
+            50% { box-shadow: 0 25px 70px rgba(255, 215, 0, 0.6), 0 0 0 4px rgba(255, 215, 0, 0.5); }
+        }
+        .glow-active {
+            animation: glowPulse 2s ease-in-out infinite;
+        }
+        /* Reset animation class */
+        .reset {
+            animation: none !important;
+            opacity: 0;
+            transform: scale(0) translateY(50px) rotateX(-45deg);
+        }
+    </style>
+</head>
+<body class="h-screen w-screen flex items-center justify-center relative">
+    <!-- Blurred Slot Machine Background -->
+    <div class="slot-background">
+        <div class="reels-container">
+            <!-- Generate 5 reels with symbols -->
+            <div class="reel">
+                <span class="slot-symbol text-red-500">7️⃣</span>
+                <span class="slot-symbol text-yellow-400">💎</span>
+                <span class="slot-symbol text-red-600">🍒</span>
+            </div>
+            <div class="reel">
+                <span class="slot-symbol text-purple-400">💜</span>
+                <span class="slot-symbol text-yellow-500">⭐</span>
+                <span class="slot-symbol text-red-500">7️⃣</span>
+            </div>
+            <div class="reel">
+                <span class="slot-symbol text-yellow-400">💎</span>
+                <span class="slot-symbol text-red-600">🍒</span>
+                <span class="slot-symbol text-purple-400">💜</span>
+            </div>
+            <div class="reel">
+                <span class="slot-symbol text-red-500">7️⃣</span>
+                <span class="slot-symbol text-yellow-400">💎</span>
+                <span class="slot-symbol text-yellow-500">⭐</span>
+            </div>
+            <div class="reel">
+                <span class="slot-symbol text-red-600">🍒</span>
+                <span class="slot-symbol text-purple-400">💜</span>
+                <span class="slot-symbol text-red-500">7️⃣</span>
+            </div>
+        </div>
+    </div>
+    <!-- Vignette Overlay -->
+    <div class="vignette"></div>
+    <!-- Particle Container -->
+    <div id="particle-container" class="absolute inset-0 pointer-events-none overflow-hidden"></div>
+    <!-- Center Popup Stack Container -->
+    <div class="relative z-10 flex flex-col items-center justify-center" style="perspective: 1000px;">
+        <!-- Card 1 (Bottom) -->
+        <div id="card1" class="popup-card" style="z-index: 1;">
+            <span class="popup-text">Win $3.75</span>
+        </div>
+        <!-- Card 2 -->
+        <div id="card2" class="popup-card" style="z-index: 2;">
+            <span class="popup-text">Win $0.50</span>
+        </div>
+        <!-- Card 3 -->
+        <div id="card3" class="popup-card" style="z-index: 3;">
+            <span class="popup-text">Win $5.50</span>
+        </div>
+        <!-- Card 4 -->
+        <div id="card4" class="popup-card" style="z-index: 4;">
+            <span class="popup-text">Win $0.10</span>
+        </div>
+        <!-- Card 5 -->
+        <div id="card5" class="popup-card" style="z-index: 5;">
+            <span class="popup-text">Win $1.15</span>
+        </div>
+        <!-- Card 6 -->
+        <div id="card6" class="popup-card" style="z-index: 6;">
+            <span class="popup-text">Win $6.25</span>
+        </div>
+        <!-- Card 7 -->
+        <div id="card7" class="popup-card" style="z-index: 7;">
+            <span class="popup-text">Win $0.50</span>
+        </div>
+        <!-- Card 8 -->
+        <div id="card8" class="popup-card" style="z-index: 8;">
+            <span class="popup-text">Win $2.25</span>
+        </div>
+        <!-- Card 9 -->
+        <div id="card9" class="popup-card" style="z-index: 9;">
+            <span class="popup-text">Win $0.75</span>
+        </div>
+        <!-- Card 10 -->
+        <div id="card10" class="popup-card" style="z-index: 10;">
+            <span class="popup-text">Win $3.75</span>
+        </div>
+        <!-- Card 11 -->
+        <div id="card11" class="popup-card" style="z-index: 11;">
+            <span class="popup-text">Win $0.50</span>
+        </div>
+        <!-- Card 12 -->
+        <div id="card12" class="popup-card" style="z-index: 12;">
+            <span class="popup-text">Win $5.50</span>
+        </div>
+        <!-- Card 13 -->
+        <div id="card13" class="popup-card" style="z-index: 13;">
+            <span class="popup-text">Win $0.10</span>
+        </div>
+        <!-- Card 14 -->
+        <div id="card14" class="popup-card" style="z-index: 14;">
+            <span class="popup-text">Win $1.15</span>
+        </div>
+        <!-- Card 15 -->
+        <div id="card15" class="popup-card" style="z-index: 15;">
+            <span class="popup-text">Win $6.25</span>
+        </div>
+        <!-- Card 16 -->
+        <div id="card16" class="popup-card" style="z-index: 16;">
+            <span class="popup-text">Win $0.50</span>
+        </div>
+        <!-- Card 17 -->
+        <div id="card17" class="popup-card" style="z-index: 17;">
+            <span class="popup-text">Win $2.25</span>
+        </div>
+        <!-- Card 18 (Top) -->
+        <div id="card18" class="popup-card" style="z-index: 18;">
+            <span class="popup-text">Win $0.75</span>
+        </div>
+    </div>
+    <script>
+        // Particle System
+        function createParticle(x, y, type) {
+            const particle = document.createElement('div');
+            particle.className = `particle ${type}`;
+            particle.style.left = x + 'px';
+            particle.style.top = y + 'px';
+            const container = document.getElementById('particle-container');
+            container.appendChild(particle);
+            // Random animation properties
+            const duration = 1 + Math.random() * 1.5;
+            const delay = Math.random() * 0.2;
+            if (type === 'gold-spark' || type === 'shimmer-dust') {
+                particle.style.animation = `floatUp ${duration}s ease-out ${delay}s forwards`;
+            } else if (type === 'coin-glint') {
+                const angle = Math.random() * Math.PI * 2;
+                const distance = 50 + Math.random() * 100;
+                const tx = Math.cos(angle) * distance;
+                const ty = Math.sin(angle) * distance - 50;
+                particle.style.setProperty('--tx', tx + 'px');
+                particle.style.setProperty('--ty', ty + 'px');
+                particle.style.animation = `burst ${duration}s ease-out ${delay}s forwards`;
+            }
+            // Cleanup
+            setTimeout(() => particle.remove(), (duration + delay) * 1000);
+        }
+        function createLightStreak(x, y) {
+            const streak = document.createElement('div');
+            streak.className = 'light-streak';
+            streak.style.left = (x - 50) + 'px';
+            streak.style.top = y + 'px';
+            streak.style.animation = 'streak 0.8s ease-out forwards';
+            const container = document.getElementById('particle-container');
+            container.appendChild(streak);
+            setTimeout(() => streak.remove(), 800);
+        }
+        function emitParticles(x, y, intensity = 'medium') {
+            const counts = {
+                low: { sparks: 8, dust: 15, coins: 5 },
+                medium: { sparks: 15, dust: 25, coins: 10 },
+                high: { sparks: 25, dust: 40, coins: 15 }
+            };
+            const count = counts[intensity] || counts.medium;
+            // Gold sparks
+            for (let i = 0; i < count.sparks; i++) {
+                setTimeout(() => {
+                    const offsetX = (Math.random() - 0.5) * 200;
+                    const offsetY = (Math.random() - 0.5) * 100;
+                    createParticle(x + offsetX, y + offsetY, 'gold-spark');
+                }, i * 30);
+            }
+            // Shimmer dust
+            for (let i = 0; i < count.dust; i++) {
+                setTimeout(() => {
+                    const offsetX = (Math.random() - 0.5) * 300;
+                    const offsetY = (Math.random() - 0.5) * 150;
+                    createParticle(x + offsetX, y + offsetY, 'shimmer-dust');
+                }, i * 20);
+            }
+            // Coin glints (burst pattern)
+            for (let i = 0; i < count.coins; i++) {
+                setTimeout(() => {
+                    createParticle(x, y, 'coin-glint');
+                }, i * 50);
+            }
+            // Light streaks
+            for (let i = 0; i < 3; i++) {
+                setTimeout(() => {
+                    const offsetY = (Math.random() - 0.5) * 60;
+                    createLightStreak(x, y + offsetY);
+                }, i * 100);
+            }
+        }
+        // Animation Sequence
+        function runAnimation() {
+            const cards = [
+                document.getElementById('card1'),
+                document.getElementById('card2'),
+                document.getElementById('card3'),
+                document.getElementById('card4'),
+                document.getElementById('card5'),
+                document.getElementById('card6'),
+                document.getElementById('card7'),
+                document.getElementById('card8'),
+                document.getElementById('card9'),
+                document.getElementById('card10'),
+                document.getElementById('card11'),
+                document.getElementById('card12'),
+                document.getElementById('card13'),
+                document.getElementById('card14'),
+                document.getElementById('card15'),
+                document.getElementById('card16'),
+                document.getElementById('card17'),
+                document.getElementById('card18')
+            ];
+            const centerX = window.innerWidth / 2;
+            const centerY = window.innerHeight / 2;
+            // Reset all cards
+            cards.forEach(card => {
+                card.className = 'popup-card reset';
+                card.classList.remove('glow-active');
+            });
+            // Force reflow
+            void cards[0].offsetWidth;
+            // Stack offsets for 18 cards
+            const stackOffsets = [
+                'translateY(0) scale(1)',
+                'translateY(-20px) scale(0.98)',
+                'translateY(-40px) scale(0.96)',
+                'translateY(-60px) scale(0.94)',
+                'translateY(-80px) scale(0.92)',
+                'translateY(-100px) scale(0.90)',
+                'translateY(-120px) scale(0.88)',
+                'translateY(-140px) scale(0.86)',
+                'translateY(-160px) scale(0.84)',
+                'translateY(-180px) scale(0.82)',
+                'translateY(-200px) scale(0.80)',
+                'translateY(-220px) scale(0.78)',
+                'translateY(-240px) scale(0.76)',
+                'translateY(-260px) scale(0.74)',
+                'translateY(-280px) scale(0.72)',
+                'translateY(-300px) scale(0.70)',
+                'translateY(-320px) scale(0.68)',
+                'translateY(-340px) scale(0.66)'
+            ];
+            // Card 1 animation
+            setTimeout(() => {
+                cards[0].classList.remove('reset');
+                cards[0].classList.add('animate-pop-1');
+                if(cards[0].style) cards[0].style.transform = stackOffsets[0];
+                emitParticles(centerX, centerY + 40, 'high');
+            }, 100);
+            // Cards 2-18 with sequential stacking
+            for (let i = 1; i < 18; i++) {
+                setTimeout(() => {
+                    cards[i].classList.remove('reset');
+                    cards[i].classList.add(`animate-pop-${i + 1}`);
+                    cards[i].style.transform = stackOffsets[i];
+                    // Emit particles for each card appearance (high intensity on cards 4, 6, 9, 13, 15, 18)
+                    const intensity = (i === 3 || i === 5 || i === 8 || i === 12 || i === 14 || i === 17) ? 'high' : 'medium';
+                    emitParticles(centerX, centerY - (i * 20), intensity);
+                }, 100 + (i * 300));
+            }
+            // Add glow to all cards when stack is complete (after last card)
+            setTimeout(() => {
+                cards.forEach(card => card.classList.add('glow-active'));
+            }, 100 + (17 * 300) + 600);
+            // Reset after 5 second pause (last card appears at ~5200ms, so 10200ms total)
+            setTimeout(() => {
+                cards.forEach(card => {
+                    card.classList.remove('glow-active');
+                    card.style.opacity = '0';
+                    card.style.transition = 'opacity 0.5s ease-out';
+                });
+                setTimeout(() => {
+                    cards.forEach(card => {
+                        card.style.transition = '';
+                        card.style.transform = '';
+                    });
+                    runAnimation();
+                }, 500);
+            }, 10800); // 5.2s for animations + 5s pause + 0.6s buffer
+        }
+        // Ambient particles
+        function createAmbientParticles() {
+            const centerX = window.innerWidth / 2;
+            const centerY = window.innerHeight / 2;
+            setInterval(() => {
+                if (Math.random() > 0.7) {
+                    const x = centerX + (Math.random() - 0.5) * 400;
+                    const y = centerY + (Math.random() - 0.5) * 300;
+                    createParticle(x, y, 'shimmer-dust');
+                }
+            }, 200);
+        }
+        // Start
+        window.addEventListener('load', () => {
+            runAnimation();
+            createAmbientParticles();
+        });
+        // Handle resize
+        window.addEventListener('resize', () => {
+            // Animation will adapt automatically due to center positioning
+        });
+    </script>
+<script src="https://deepsite.hf.co/deepsite-badge.js"></script>
+</body>
+</html>