Spaces:

Juno360219
/

cookie-slot-browser-click

Running

App Files Files Community

Juno360219 commited on Aug 14

Commit

b3db6f8

verified ·

1 Parent(s): 2b6b768

undefined - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +587 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Cookie Slot Browser Click
-emoji: 🌖
-colorFrom: yellow
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: cookie-slot-browser-click
+emoji: 🐳
+colorFrom: purple
+colorTo: purple
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,587 @@
-<!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>Tab Cookie Garden</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @keyframes pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.1); }
+            100% { transform: scale(1); }
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .cookie-pulse {
+            animation: pulse 2s infinite;
+        }
+        .flower-grow {
+            transition: all 0.5s ease-out;
+        }
+        .slot-spin {
+            animation: spin 0.5s ease-out;
+        }
+        .sidebar {
+            transition: transform 0.3s ease-in-out;
+        }
+        .domain-news {
+            background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
+        }
+        .domain-social {
+            background: linear-gradient(135deg, #f472b6 0%, #ec4899 100%);
+        }
+        .domain-shopping {
+            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+        }
+        .domain-entertainment {
+            background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
+        }
+        .domain-other {
+            background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
+        }
+        .tooltip {
+            visibility: hidden;
+            opacity: 0;
+            transition: opacity 0.3s;
+        }
+        .cookie-container:hover .tooltip {
+            visibility: visible;
+            opacity: 1;
+        }
+        @media (max-width: 768px) {
+            .sidebar {
+                width: 100%;
+                height: auto;
+                bottom: 0;
+                left: 0;
+                transform: translateY(100%);
+            }
+            .sidebar.open {
+                transform: translateY(0);
+            }
+            .cookie-bar {
+                flex-direction: column;
+                align-items: flex-start;
+                padding: 0.5rem;
+            }
+        }
+    </style>
+</head>
+<body class="bg-gray-100 font-sans">
+    <!-- Main Browser Simulation -->
+    <div class="max-w-6xl mx-auto p-4">
+        <div class="bg-white rounded-lg shadow-lg overflow-hidden">
+            <!-- Browser Toolbar -->
+            <div class="bg-gray-800 text-white p-3 flex items-center justify-between">
+                <div class="flex items-center space-x-2">
+                    <button class="p-1 rounded hover:bg-gray-700">
+                        <i class="fas fa-arrow-left"></i>
+                    </button>
+                    <button class="p-1 rounded hover:bg-gray-700">
+                        <i class="fas fa-arrow-right"></i>
+                    </button>
+                    <button class="p-1 rounded hover:bg-gray-700">
+                        <i class="fas fa-redo"></i>
+                    </button>
+                </div>
+                <div class="flex-1 mx-4">
+                    <input type="text" class="w-full bg-gray-700 rounded-full py-1 px-4 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Search or enter address">
+                </div>
+                <div class="flex items-center space-x-2">
+                    <button class="p-1 rounded hover:bg-gray-700">
+                        <i class="fas fa-star"></i>
+                    </button>
+                    <button class="p-1 rounded hover:bg-gray-700">
+                        <i class="fas fa-ellipsis-h"></i>
+                    </button>
+                </div>
+            </div>
+            <!-- Cookie Bar -->
+            <div class="bg-gray-100 border-b flex items-center justify-between px-4 py-2 cookie-bar">
+                <div class="flex items-center space-x-2 overflow-x-auto py-2">
+                    <!-- Cookies will appear here -->
+                </div>
+                <button id="toggleSidebar" class="bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded-full text-sm flex items-center">
+                    <i class="fas fa-gamepad mr-1"></i> Play
+                </button>
+            </div>
+            <!-- Browser Content Area -->
+            <div class="h-96 bg-white flex items-center justify-center">
+                <div class="text-center p-8">
+                    <h1 class="text-3xl font-bold text-gray-800 mb-4">Welcome to Tab Cookie Garden</h1>
+                    <p class="text-gray-600 mb-6">Open new tabs to grow cookies that blossom into flowers!</p>
+                    <button id="simulateNewTab" class="bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-6 rounded-full">
+                        Simulate New Tab
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Sidebar Game -->
+    <div id="sidebar" class="sidebar fixed top-0 right-0 h-full w-80 bg-white shadow-lg z-10 transform translate-x-full">
+        <div class="p-4 border-b flex justify-between items-center">
+            <h2 class="text-xl font-bold">Cookie Slots</h2>
+            <button id="closeSidebar" class="text-gray-500 hover:text-gray-700">
+                <i class="fas fa-times"></i>
+            </button>
+        </div>
+        <div class="p-4">
+            <div class="bg-gray-100 rounded-lg p-4 mb-4">
+                <div class="flex justify-between items-center mb-2">
+                    <span class="font-medium">Cookie Coins:</span>
+                    <span id="coinCount" class="font-bold text-blue-600">0</span>
+                </div>
+                <div class="flex justify-between items-center">
+                    <span class="font-medium">Flowers Grown:</span>
+                    <span id="flowerCount" class="font-bold text-green-600">0</span>
+                </div>
+            </div>
+            <div class="mb-6">
+                <h3 class="text-lg font-semibold mb-2">Slot Machine</h3>
+                <div class="bg-gray-800 rounded-lg p-4">
+                    <div class="flex justify-between mb-4">
+                        <div id="slot1" class="slot w-16 h-16 bg-white rounded flex items-center justify-center text-3xl font-bold">
+                            🍪
+                        </div>
+                        <div id="slot2" class="slot w-16 h-16 bg-white rounded flex items-center justify-center text-3xl font-bold">
+                            🌸
+                        </div>
+                        <div id="slot3" class="slot w-16 h-16 bg-white rounded flex items-center justify-center text-3xl font-bold">
+                            🎰
+                        </div>
+                    </div>
+                    <button id="spinButton" class="w-full bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded">
+                        Spin (Cost: 5 coins)
+                    </button>
+                </div>
+            </div>
+            <div>
+                <h3 class="text-lg font-semibold mb-2">Global Garden</h3>
+                <div class="grid grid-cols-3 gap-2" id="globalGarden">
+                    <!-- Global flowers will appear here -->
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Game state
+        const state = {
+            cookies: [],
+            coins: 0,
+            flowers: 0,
+            globalFlowers: [],
+            slotItems: ['🍪', '🌸', '🌿', '🌻', '🌼', '🌺', '🌹', '🌷', '💐', '🎰'],
+            domainCategories: {
+                news: ['cnn.com', 'bbc.com', 'nytimes.com', 'theguardian.com'],
+                social: ['facebook.com', 'twitter.com', 'instagram.com', 'reddit.com'],
+                shopping: ['amazon.com', 'ebay.com', 'etsy.com', 'walmart.com'],
+                entertainment: ['youtube.com', 'netflix.com', 'spotify.com', 'twitch.tv'],
+                other: ['wikipedia.org', 'github.com', 'stackoverflow.com', 'medium.com']
+            },
+            activeUsers: {}
+        };
+        // DOM elements
+        const cookieBar = document.querySelector('.cookie-bar > div');
+        const sidebar = document.getElementById('sidebar');
+        const toggleSidebarBtn = document.getElementById('toggleSidebar');
+        const closeSidebarBtn = document.getElementById('closeSidebar');
+        const simulateNewTabBtn = document.getElementById('simulateNewTab');
+        const coinCountEl = document.getElementById('coinCount');
+        const flowerCountEl = document.getElementById('flowerCount');
+        const spinButton = document.getElementById('spinButton');
+        const slot1 = document.getElementById('slot1');
+        const slot2 = document.getElementById('slot2');
+        const slot3 = document.getElementById('slot3');
+        const globalGarden = document.getElementById('globalGarden');
+        // Initialize
+        document.addEventListener('DOMContentLoaded', () => {
+            // Load saved state
+            const savedState = localStorage.getItem('tabCookieGame');
+            if (savedState) {
+                Object.assign(state, JSON.parse(savedState));
+                updateUI();
+                renderGlobalGarden();
+            }
+            // Simulate some initial global flowers
+            if (state.globalFlowers.length === 0) {
+                state.globalFlowers = [
+                    { domain: 'news', type: '🌻', clicks: 42 },
+                    { domain: 'social', type: '🌺', clicks: 78 },
+                    { domain: 'shopping', type: '🌹', clicks: 35 },
+                    { domain: 'entertainment', type: '🌸', clicks: 120 }
+                ];
+                renderGlobalGarden();
+            }
+            // Simulate some active users
+            simulateActiveUsers();
+        });
+        // Toggle sidebar
+        toggleSidebarBtn.addEventListener('click', () => {
+            sidebar.classList.toggle('translate-x-full');
+            sidebar.classList.toggle('translate-x-0');
+        });
+        closeSidebarBtn.addEventListener('click', () => {
+            sidebar.classList.add('translate-x-full');
+            sidebar.classList.remove('translate-x-0');
+        });
+        // Simulate new tab
+        simulateNewTabBtn.addEventListener('click', () => {
+            const domains = [
+                'cnn.com', 'facebook.com', 'amazon.com', 'youtube.com',
+                'wikipedia.org', 'twitter.com', 'nytimes.com', 'github.com',
+                'reddit.com', 'netflix.com', 'bbc.com', 'stackoverflow.com'
+            ];
+            const randomDomain = domains[Math.floor(Math.random() * domains.length)];
+            createCookie(randomDomain);
+        });
+        // Spin slots
+        spinButton.addEventListener('click', () => {
+            if (state.coins < 5) {
+                alert("You need at least 5 coins to spin!");
+                return;
+            }
+            state.coins -= 5;
+            updateUI();
+            // Disable button during spin
+            spinButton.disabled = true;
+            spinButton.classList.add('opacity-50');
+            // Spin animation
+            const spins = 10 + Math.floor(Math.random() * 10);
+            let spinCount = 0;
+            const spinInterval = setInterval(() => {
+                slot1.textContent = getRandomSlotItem();
+                slot2.textContent = getRandomSlotItem();
+                slot3.textContent = getRandomSlotItem();
+                spinCount++;
+                if (spinCount >= spins) {
+                    clearInterval(spinInterval);
+                    finishSpin();
+                }
+            }, 100);
+        });
+        function finishSpin() {
+            // Final slot values
+            const val1 = getRandomSlotItem();
+            const val2 = getRandomSlotItem();
+            const val3 = getRandomSlotItem();
+            slot1.textContent = val1;
+            slot2.textContent = val2;
+            slot3.textContent = val3;
+            // Add slot spin animation
+            slot1.classList.add('slot-spin');
+            slot2.classList.add('slot-spin');
+            slot3.classList.add('slot-spin');
+            setTimeout(() => {
+                slot1.classList.remove('slot-spin');
+                slot2.classList.remove('slot-spin');
+                slot3.classList.remove('slot-spin');
+                // Check for win
+                if (val1 === val2 && val2 === val3) {
+                    // Big win!
+                    const winAmount = val1 === '🎰' ? 50 : 20;
+                    state.coins += winAmount;
+                    alert(`JACKPOT! You won ${winAmount} coins!`);
+                } else if (val1 === val2 || val2 === val3 || val1 === val3) {
+                    // Small win
+                    state.coins += 5;
+                    alert("You won 5 coins!");
+                }
+                updateUI();
+                spinButton.disabled = false;
+                spinButton.classList.remove('opacity-50');
+                saveGame();
+            }, 500);
+        }
+        function getRandomSlotItem() {
+            return state.slotItems[Math.floor(Math.random() * state.slotItems.length)];
+        }
+        function createCookie(domain) {
+            // Determine domain category
+            let category = 'other';
+            for (const [cat, domains] of Object.entries(state.domainCategories)) {
+                if (domains.some(d => domain.includes(d))) {
+                    category = cat;
+                    break;
+                }
+            }
+            // Check if cookie already exists for this domain
+            const existingCookie = state.cookies.find(c => c.domain === domain);
+            if (existingCookie) {
+                existingCookie.clicks++;
+                animateCookie(existingCookie.id);
+                return;
+            }
+            // Create new cookie
+            const cookieId = 'cookie-' + Date.now();
+            const newCookie = {
+                id: cookieId,
+                domain,
+                category,
+                clicks: 1,
+                growth: 0,
+                type: null,
+                activeUsers: Math.floor(Math.random() * 100) + 1
+            };
+            state.cookies.push(newCookie);
+            state.activeUsers[domain] = newCookie.activeUsers;
+            // Render cookie
+            renderCookie(newCookie);
+            // Start growth timer
+            startCookieGrowth(newCookie);
+            // Save game
+            saveGame();
+        }
+        function renderCookie(cookie) {
+            const cookieEl = document.createElement('div');
+            cookieEl.id = cookie.id;
+            cookieEl.className = 'cookie-container relative';
+            const cookieIcon = document.createElement('div');
+            cookieIcon.className = 'w-10 h-10 rounded-full flex items-center justify-center text-white cursor-pointer shadow-md cookie-pulse';
+            cookieIcon.innerHTML = '<i class="fas fa-cookie-bite text-xl"></i>';
+            // Set color based on domain category
+            cookieIcon.classList.add(`domain-${cookie.category}`);
+            // Tooltip
+            const tooltip = document.createElement('div');
+            tooltip.className = 'tooltip absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 bg-gray-800 text-white text-xs rounded py-1 px-2 whitespace-nowrap z-20';
+            tooltip.innerHTML = `
+                <div class="font-bold">${cookie.domain}</div>
+                <div>Visitors: ${cookie.activeUsers.toLocaleString()}</div>
+                <div>Clicks: ${cookie.clicks}</div>
+            `;
+            // Arrow
+            const arrow = document.createElement('div');
+            arrow.className = 'absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-b-0 border-t-4 border-l-transparent border-r-transparent border-t-gray-800';
+            tooltip.appendChild(arrow);
+            cookieEl.appendChild(cookieIcon);
+            cookieEl.appendChild(tooltip);
+            cookieBar.appendChild(cookieEl);
+            // Click handler
+            cookieIcon.addEventListener('click', () => {
+                handleCookieClick(cookie);
+            });
+        }
+        function handleCookieClick(cookie) {
+            // Increment clicks
+            cookie.clicks++;
+            // Add coin
+            state.coins++;
+            updateUI();
+            // Animate
+            animateCookie(cookie.id);
+            // Update tooltip
+            const tooltip = document.querySelector(`#${cookie.id} .tooltip`);
+            if (tooltip) {
+                tooltip.innerHTML = `
+                    <div class="font-bold">${cookie.domain}</div>
+                    <div>Visitors: ${cookie.activeUsers.toLocaleString()}</div>
+                    <div>Clicks: ${cookie.clicks}</div>
+                `;
+                tooltip.appendChild(document.createElement('div')).className = 'absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-b-0 border-t-4 border-l-transparent border-r-transparent border-t-gray-800';
+            }
+            // Save game
+            saveGame();
+        }
+        function animateCookie(cookieId) {
+            const cookieEl = document.getElementById(cookieId);
+            if (!cookieEl) return;
+            cookieEl.classList.add('animate-ping');
+            setTimeout(() => {
+                cookieEl.classList.remove('animate-ping');
+            }, 1000);
+        }
+        function startCookieGrowth(cookie) {
+            const growthInterval = setInterval(() => {
+                cookie.growth += 5;
+                // Check if fully grown
+                if (cookie.growth >= 100) {
+                    clearInterval(growthInterval);
+                    cookieGrown(cookie);
+                }
+            }, 1000);
+        }
+        function cookieGrown(cookie) {
+            // Determine flower type based on domain category and clicks
+            const flowerTypes = {
+                news: ['🌻', '📰', '🗞️'],
+                social: ['🌺', '💬', '👥'],
+                shopping: ['🌹', '🛍️', '💰'],
+                entertainment: ['🌸', '🎬', '🎮'],
+                other: ['🌼', '❓', '🔍']
+            };
+            // More clicks = rarer flower
+            const rarity = Math.min(Math.floor(cookie.clicks / 10), 2);
+            cookie.type = flowerTypes[cookie.category][rarity];
+            // Add to flowers count
+            state.flowers++;
+            // Add to global garden if enough clicks
+            if (cookie.clicks >= 15) {
+                state.globalFlowers.push({
+                    domain: cookie.category,
+                    type: cookie.type,
+                    clicks: cookie.clicks
+                });
+                renderGlobalGarden();
+            }
+            // Update cookie to show flower
+            const cookieEl = document.getElementById(cookie.id);
+            if (cookieEl) {
+                const cookieIcon = cookieEl.querySelector('div:first-child');
+                cookieIcon.innerHTML = `<span class="text-2xl">${cookie.type}</span>`;
+                cookieIcon.classList.remove('cookie-pulse');
+                cookieIcon.classList.add('flower-grow');
+                // Update tooltip
+                const tooltip = cookieEl.querySelector('.tooltip');
+                if (tooltip) {
+                    tooltip.innerHTML = `
+                        <div class="font-bold">${cookie.domain}</div>
+                        <div>Flower: ${cookie.type}</div>
+                        <div>Visitors: ${cookie.activeUsers.toLocaleString()}</div>
+                        <div>Clicks: ${cookie.clicks}</div>
+                    `;
+                    tooltip.appendChild(document.createElement('div')).className = 'absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-b-0 border-t-4 border-l-transparent border-r-transparent border-t-gray-800';
+                }
+            }
+            updateUI();
+            saveGame();
+        }
+        function renderGlobalGarden() {
+            globalGarden.innerHTML = '';
+            state.globalFlowers.forEach((flower, index) => {
+                const flowerEl = document.createElement('div');
+                flowerEl.className = 'flex flex-col items-center p-2 bg-gray-100 rounded';
+                const flowerIcon = document.createElement('div');
+                flowerIcon.className = 'text-3xl mb-1';
+                flowerIcon.textContent = flower.type;
+                const flowerText = document.createElement('div');
+                flowerText.className = 'text-xs text-center';
+                flowerText.textContent = `${flower.domain} (${flower.clicks})`;
+                flowerEl.appendChild(flowerIcon);
+                flowerEl.appendChild(flowerText);
+                globalGarden.appendChild(flowerEl);
+            });
+        }
+        function updateUI() {
+            coinCountEl.textContent = state.coins;
+            flowerCountEl.textContent = state.flowers;
+            // Disable spin button if not enough coins
+            spinButton.disabled = state.coins < 5;
+            spinButton.classList.toggle('opacity-50', state.coins < 5);
+        }
+        function saveGame() {
+            localStorage.setItem('tabCookieGame', JSON.stringify({
+                cookies: state.cookies,
+                coins: state.coins,
+                flowers: state.flowers,
+                globalFlowers: state.globalFlowers
+            }));
+        }
+        function simulateActiveUsers() {
+            // Randomly fluctuate active users
+            setInterval(() => {
+                state.cookies.forEach(cookie => {
+                    const change = Math.floor(Math.random() * 10) - 3; // -3 to +6
+                    cookie.activeUsers = Math.max(1, cookie.activeUsers + change);
+                    state.activeUsers[cookie.domain] = cookie.activeUsers;
+                    // Update tooltip if exists
+                    const tooltip = document.querySelector(`#${cookie.id} .tooltip`);
+                    if (tooltip) {
+                        tooltip.innerHTML = `
+                            <div class="font-bold">${cookie.domain}</div>
+                            ${cookie.type ? `<div>Flower: ${cookie.type}</div>` : ''}
+                            <div>Visitors: ${cookie.activeUsers.toLocaleString()}</div>
+                            <div>Clicks: ${cookie.clicks}</div>
+                        `;
+                        tooltip.appendChild(document.createElement('div')).className = 'absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-b-0 border-t-4 border-l-transparent border-r-transparent border-t-gray-800';
+                    }
+                });
+            }, 5000);
+        }
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Juno360219/cookie-slot-browser-click" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>