Spaces:
Running
Running
Download index.html from The22Mindset/test: direct link, hf CLI and curl.
- Browser
- Download file 46.4 kB
-
https://huggingface.co/spaces/The22Mindset/test/resolve/main/index.html
- Command line
-
hf download hf://spaces/The22Mindset/test/index.html
-
curl -L -o index.html https://huggingface.co/spaces/The22Mindset/test/resolve/main/index.html
46.4 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TagCheck Game - Collect NFC Chips!</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 float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-20px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.1); } | |
| 100% { transform: scale(1); } | |
| } | |
| .phone { | |
| transition: all 0.2s ease; | |
| } | |
| .nfc-chip { | |
| animation: float 3s ease-in-out infinite; | |
| transition: all 0.3s ease; | |
| } | |
| .collected { | |
| animation: pulse 0.5s ease-out; | |
| opacity: 0; | |
| } | |
| .discount-unlocked { | |
| animation: pulse 1s ease-in-out; | |
| } | |
| #gameArea { | |
| background: linear-gradient(135deg, #6e8efb, #a777e3); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .progress-bar { | |
| transition: width 0.5s ease; | |
| } | |
| /* Shop styles */ | |
| .shop-container { | |
| display: none; | |
| } | |
| .product-card { | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .product-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| .cart-item { | |
| transition: all 0.3s ease; | |
| } | |
| .cart-item:hover { | |
| background-color: #f8f9fa; | |
| } | |
| /* Tab styles */ | |
| .tab-button { | |
| transition: all 0.3s ease; | |
| } | |
| .tab-button.active { | |
| background-color: #6b46c1; | |
| color: white; | |
| } | |
| /* Modal styles */ | |
| .modal { | |
| transition: opacity 0.3s ease, transform 0.3s ease; | |
| } | |
| .modal.hidden { | |
| opacity: 0; | |
| transform: translateY(-20px); | |
| pointer-events: none; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <div class="container mx-auto px-4 py-8 max-w-6xl"> | |
| <!-- Navigation Tabs --> | |
| <div class="flex mb-8 bg-white rounded-xl shadow overflow-hidden"> | |
| <button id="gameTab" class="tab-button flex-1 py-4 font-bold text-center active"> | |
| <i class="fas fa-gamepad mr-2"></i> TagCheck Game | |
| </button> | |
| <button id="shopTab" class="tab-button flex-1 py-4 font-bold text-center"> | |
| <i class="fas fa-shopping-cart mr-2"></i> TagCheck Shop | |
| </button> | |
| </div> | |
| <!-- Game Container --> | |
| <div id="gameContainer"> | |
| <header class="text-center mb-8"> | |
| <h1 class="text-4xl font-bold text-purple-800 mb-2">TagCheck Game</h1> | |
| <p class="text-lg text-gray-600">Collect NFC chips to unlock discounts at TagCheck Shop</p> | |
| </header> | |
| <div class="bg-white rounded-xl shadow-xl overflow-hidden mb-8"> | |
| <div class="flex justify-between items-center bg-purple-700 text-white p-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-wifi text-yellow-300 mr-2"></i> | |
| <span id="score" class="font-bold text-xl">0</span> | |
| <span class="ml-1">NFC chips</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-tag text-green-300 mr-2"></i> | |
| <span id="discount" class="font-bold text-xl">0%</span> | |
| <span class="ml-1">Discount</span> | |
| </div> | |
| </div> | |
| <div id="gameArea" class="relative h-96 w-full"> | |
| <!-- Phone character --> | |
| <div id="phone" class="phone absolute w-16 h-28 bg-black rounded-xl border-4 border-gray-300 flex items-center justify-center" style="bottom: 20px; left: 50%; transform: translateX(-50%);"> | |
| <div class="w-12 h-20 bg-gray-900 rounded flex flex-col items-center justify-between p-1"> | |
| <div class="w-2 h-2 bg-gray-700 rounded-full mt-1"></div> | |
| <div class="w-8 h-8 rounded-full border-2 border-purple-500 flex items-center justify-center"> | |
| <i class="fas fa-wifi text-purple-400"></i> | |
| </div> | |
| <div class="w-8 h-2 bg-gray-700 rounded-full mb-1"></div> | |
| </div> | |
| </div> | |
| <!-- NFC chips will be generated here --> | |
| </div> | |
| <div class="p-4 bg-gray-50"> | |
| <div class="mb-4"> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-purple-700">Next discount at: <span id="nextDiscount">5</span> chips</span> | |
| <span class="text-sm font-medium text-purple-700"><span id="collected">0</span>/<span id="needed">5</span></span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div id="progressBar" class="progress-bar bg-purple-600 h-2.5 rounded-full" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-3 gap-4 mb-4"> | |
| <div class="bg-white p-3 rounded-lg shadow text-center"> | |
| <div class="text-purple-600 mb-1"><i class="fas fa-bolt"></i></div> | |
| <div class="font-bold" id="speed">1x</div> | |
| <div class="text-xs text-gray-500">Speed</div> | |
| </div> | |
| <div class="bg-white p-3 rounded-lg shadow text-center"> | |
| <div class="text-purple-600 mb-1"><i class="fas fa-trophy"></i></div> | |
| <div class="font-bold" id="level">1</div> | |
| <div class="text-xs text-gray-500">Level</div> | |
| </div> | |
| <div class="bg-white p-3 rounded-lg shadow text-center"> | |
| <div class="text-purple-600 mb-1"><i class="fas fa-clock"></i></div> | |
| <div class="font-bold" id="time">60</div> | |
| <div class="text-xs text-gray-500">Seconds</div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between"> | |
| <button id="startBtn" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-6 rounded-full transition"> | |
| <i class="fas fa-play mr-2"></i> Start Game | |
| </button> | |
| <button id="shopBtn" class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-6 rounded-full transition"> | |
| <i class="fas fa-shopping-cart mr-2"></i> Visit Shop | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-xl p-6 mb-8"> | |
| <h2 class="text-2xl font-bold text-purple-800 mb-4">How to Play</h2> | |
| <div class="grid md:grid-cols-3 gap-4"> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-100 p-3 rounded-full mr-3"> | |
| <i class="fas fa-mobile-alt text-purple-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-gray-800">Move Your Phone</h3> | |
| <p class="text-gray-600 text-sm">Use arrow keys or swipe to move your smartphone and collect NFC chips</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-100 p-3 rounded-full mr-3"> | |
| <i class="fas fa-tag text-purple-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-gray-800">Collect Chips</h3> | |
| <p class="text-gray-600 text-sm">Each NFC chip increases your score and brings you closer to discounts</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-100 p-3 rounded-full mr-3"> | |
| <i class="fas fa-percentage text-purple-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-gray-800">Earn Discounts</h3> | |
| <p class="text-gray-600 text-sm">Redeem your earned discounts at TagCheck Shop</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Shop Container --> | |
| <div id="shopContainer" class="shop-container"> | |
| <header class="text-center mb-8"> | |
| <h1 class="text-4xl font-bold text-purple-800 mb-2">TagCheck Shop</h1> | |
| <p class="text-lg text-gray-600">Use your earned discounts on our premium NFC products</p> | |
| </header> | |
| <div class="bg-white rounded-xl shadow-xl overflow-hidden mb-8"> | |
| <div class="flex justify-between items-center bg-purple-700 text-white p-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-tag text-green-300 mr-2"></i> | |
| <span id="shopDiscount" class="font-bold text-xl">0%</span> | |
| <span class="ml-1">Discount Available</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-shopping-cart text-yellow-300 mr-2"></i> | |
| <span id="cartCount" class="font-bold text-xl">0</span> | |
| <span class="ml-1">Items in Cart</span> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold text-gray-800">Our Products</h2> | |
| <div class="relative"> | |
| <button id="viewCartBtn" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded-full transition flex items-center"> | |
| <i class="fas fa-shopping-cart mr-2"></i> | |
| View Cart | |
| <span id="cartBadge" class="ml-2 bg-yellow-400 text-purple-800 rounded-full w-6 h-6 flex items-center justify-center text-sm hidden">0</span> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8"> | |
| <!-- Product cards will be inserted here --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Cart Modal --> | |
| <div id="cartModal" class="modal fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50 hidden"> | |
| <div class="bg-white rounded-xl p-6 max-w-md w-full max-h-[80vh] overflow-y-auto"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-2xl font-bold text-gray-800">Your Shopping Cart</h2> | |
| <button id="closeCartBtn" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div id="cartItems" class="mb-4"> | |
| <!-- Cart items will be inserted here --> | |
| <div class="text-center py-8 text-gray-500"> | |
| <i class="fas fa-shopping-cart text-4xl mb-2"></i> | |
| <p>Your cart is empty</p> | |
| </div> | |
| </div> | |
| <div class="border-t pt-4"> | |
| <div class="flex justify-between mb-2"> | |
| <span>Subtotal:</span> | |
| <span id="cartSubtotal">$0.00</span> | |
| </div> | |
| <div class="flex justify-between mb-2"> | |
| <span>Discount (<span id="appliedDiscount">0%</span>):</span> | |
| <span id="cartDiscount">-$0.00</span> | |
| </div> | |
| <div class="flex justify-between font-bold text-lg"> | |
| <span>Total:</span> | |
| <span id="cartTotal">$0.00</span> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-between"> | |
| <button id="continueShoppingBtn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded-full transition"> | |
| Continue Shopping | |
| </button> | |
| <button id="checkoutBtn" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-6 rounded-full transition"> | |
| Checkout | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Checkout Modal --> | |
| <div id="checkoutModal" class="modal fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50 hidden"> | |
| <div class="bg-white rounded-xl p-6 max-w-md w-full"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-2xl font-bold text-gray-800">Checkout</h2> | |
| <button id="closeCheckoutBtn" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <form id="checkoutForm" class="space-y-4"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium text-gray-700">Full Name</label> | |
| <input type="text" id="name" name="name" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500 p-2 border"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-700">Email</label> | |
| <input type="email" id="email" name="email" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500 p-2 border"> | |
| </div> | |
| <div> | |
| <label for="address" class="block text-sm font-medium text-gray-700">Shipping Address</label> | |
| <textarea id="address" name="address" rows="3" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500 p-2 border"></textarea> | |
| </div> | |
| <div> | |
| <label for="payment" class="block text-sm font-medium text-gray-700">Payment Method</label> | |
| <select id="payment" name="payment" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500 p-2 border"> | |
| <option value="">Select payment method</option> | |
| <option value="credit">Credit Card</option> | |
| <option value="paypal">PayPal</option> | |
| <option value="crypto">Cryptocurrency</option> | |
| </select> | |
| </div> | |
| </form> | |
| <div class="mt-6 border-t pt-4"> | |
| <div class="flex justify-between font-bold text-lg"> | |
| <span>Total:</span> | |
| <span id="checkoutTotal">$0.00</span> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-end"> | |
| <button id="confirmCheckoutBtn" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-6 rounded-full transition"> | |
| Complete Purchase | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Order Confirmation Modal --> | |
| <div id="confirmationModal" class="modal fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50 hidden"> | |
| <div class="bg-white rounded-xl p-8 max-w-sm w-full text-center"> | |
| <div class="text-6xl text-green-500 mb-4"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-2">Order Confirmed!</h2> | |
| <p class="text-gray-600 mb-4">Thank you for your purchase. Your order has been placed successfully.</p> | |
| <p class="text-gray-600 mb-6">A confirmation has been sent to your email.</p> | |
| <button id="returnToShopBtn" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-6 rounded-full transition"> | |
| Return to Shop | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Discount Unlocked Modal (Game) --> | |
| <div id="discountUnlocked" class="modal fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50 hidden"> | |
| <div class="bg-white rounded-xl p-8 max-w-sm w-full text-center discount-unlocked"> | |
| <div class="text-6xl text-green-500 mb-4"> | |
| <i class="fas fa-trophy"></i> | |
| </div> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-2">Discount Unlocked!</h2> | |
| <p class="text-gray-600 mb-4">You've earned a <span id="unlockedDiscount" class="font-bold text-green-600">5%</span> discount at TagCheck Shop!</p> | |
| <button id="continueBtn" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-6 rounded-full transition"> | |
| Continue Playing | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Game variables | |
| let score = 0; | |
| let discount = 0; | |
| let level = 1; | |
| let gameSpeed = 1; | |
| let gameActive = false; | |
| let timeLeft = 60; | |
| let chipsCollected = 0; | |
| let chipsNeeded = 5; | |
| let gameInterval; | |
| let timeInterval; | |
| let phonePosition = { x: 50, y: 20 }; | |
| let phoneElement = document.getElementById('phone'); | |
| let gameArea = document.getElementById('gameArea'); | |
| let gameAreaRect = gameArea.getBoundingClientRect(); | |
| // Discount thresholds (chips needed for each discount level) | |
| const discountThresholds = [ | |
| { chips: 5, discount: 5 }, | |
| { chips: 15, discount: 10 }, | |
| { chips: 30, discount: 15 }, | |
| { chips: 50, discount: 20 }, | |
| { chips: 75, discount: 25 }, | |
| { chips: 100, discount: 30 } | |
| ]; | |
| // Current threshold index | |
| let currentThresholdIndex = 0; | |
| // Shop variables | |
| let cart = []; | |
| let products = [ | |
| { | |
| id: 1, | |
| name: "NFC Starter Kit", | |
| description: "Everything you need to start with NFC technology", | |
| price: 29.99, | |
| image: "https://via.placeholder.com/300x200?text=NFC+Starter+Kit", | |
| category: "starter" | |
| }, | |
| { | |
| id: 2, | |
| name: "Premium NFC Tags (10pk)", | |
| description: "High-quality NFC tags for various applications", | |
| price: 19.99, | |
| image: "https://via.placeholder.com/300x200?text=Premium+NFC+Tags", | |
| category: "tags" | |
| }, | |
| { | |
| id: 3, | |
| name: "NFC Business Cards", | |
| description: "50 customizable NFC-enabled business cards", | |
| price: 49.99, | |
| image: "https://via.placeholder.com/300x200?text=NFC+Business+Cards", | |
| category: "business" | |
| }, | |
| { | |
| id: 4, | |
| name: "NFC Reader Device", | |
| description: "Professional NFC reader for advanced applications", | |
| price: 89.99, | |
| image: "https://via.placeholder.com/300x200?text=NFC+Reader", | |
| category: "hardware" | |
| }, | |
| { | |
| id: 5, | |
| name: "NFC Stickers (25pk)", | |
| description: "Waterproof NFC stickers for any surface", | |
| price: 24.99, | |
| image: "https://via.placeholder.com/300x200?text=NFC+Stickers", | |
| category: "tags" | |
| }, | |
| { | |
| id: 6, | |
| name: "NFC Developer Bundle", | |
| description: "Tools and tags for NFC app development", | |
| price: 129.99, | |
| image: "https://via.placeholder.com/300x200?text=NFC+Developer+Bundle", | |
| category: "development" | |
| } | |
| ]; | |
| // Initialize game | |
| function initGame() { | |
| score = 0; | |
| discount = 0; | |
| level = 1; | |
| gameSpeed = 1; | |
| timeLeft = 60; | |
| chipsCollected = 0; | |
| chipsNeeded = discountThresholds[0].chips; | |
| currentThresholdIndex = 0; | |
| updateUI(); | |
| resetPhonePosition(); | |
| } | |
| // Start game | |
| document.getElementById('startBtn').addEventListener('click', function() { | |
| if (gameActive) return; | |
| initGame(); | |
| gameActive = true; | |
| this.innerHTML = '<i class="fas fa-pause mr-2"></i> Pause Game'; | |
| // Start game loop | |
| gameInterval = setInterval(createNfcChip, 1000 / gameSpeed); | |
| // Start timer | |
| timeInterval = setInterval(function() { | |
| timeLeft--; | |
| document.getElementById('time').textContent = timeLeft; | |
| if (timeLeft <= 0) { | |
| endGame(); | |
| } | |
| }, 1000); | |
| }); | |
| // Pause game | |
| function togglePause() { | |
| if (!gameActive) return; | |
| gameActive = !gameActive; | |
| if (gameActive) { | |
| document.getElementById('startBtn').innerHTML = '<i class="fas fa-pause mr-2"></i> Pause Game'; | |
| gameInterval = setInterval(createNfcChip, 1000 / gameSpeed); | |
| timeInterval = setInterval(function() { | |
| timeLeft--; | |
| document.getElementById('time').textContent = timeLeft; | |
| if (timeLeft <= 0) { | |
| endGame(); | |
| } | |
| }, 1000); | |
| } else { | |
| document.getElementById('startBtn').innerHTML = '<i class="fas fa-play mr-2"></i> Resume Game'; | |
| clearInterval(gameInterval); | |
| clearInterval(timeInterval); | |
| } | |
| } | |
| // End game | |
| function endGame() { | |
| gameActive = false; | |
| clearInterval(gameInterval); | |
| clearInterval(timeInterval); | |
| document.getElementById('startBtn').innerHTML = '<i class="fas fa-play mr-2"></i> Start Game'; | |
| // Show game over with final score | |
| alert(`Game Over!\n\nFinal Score: ${score} NFC chips\nDiscount Earned: ${discount}%\n\nVisit the shop to use your discount!`); | |
| } | |
| // Create NFC chip | |
| function createNfcChip() { | |
| if (!gameActive) return; | |
| const chip = document.createElement('div'); | |
| chip.className = 'nfc-chip absolute w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center text-white'; | |
| chip.innerHTML = '<i class="fas fa-wifi"></i>'; | |
| // Random position (avoid edges) | |
| const x = Math.random() * (gameAreaRect.width - 40) + 20; | |
| const y = Math.random() * (gameAreaRect.height - 120) + 20; | |
| chip.style.left = `${x}px`; | |
| chip.style.top = `${y}px`; | |
| // Add click/touch event | |
| chip.addEventListener('click', function() { | |
| collectChip(chip); | |
| }); | |
| // Auto-remove after 5 seconds if not collected | |
| setTimeout(() => { | |
| if (chip.parentNode) { | |
| chip.classList.add('opacity-0', 'transition-opacity'); | |
| setTimeout(() => { | |
| if (chip.parentNode) { | |
| gameArea.removeChild(chip); | |
| } | |
| }, 300); | |
| } | |
| }, 5000); | |
| gameArea.appendChild(chip); | |
| } | |
| // Collect NFC chip | |
| function collectChip(chip) { | |
| if (!gameActive) return; | |
| chip.classList.add('collected'); | |
| setTimeout(() => { | |
| if (chip.parentNode) { | |
| gameArea.removeChild(chip); | |
| } | |
| }, 500); | |
| // Increase score | |
| score++; | |
| chipsCollected++; | |
| // Check if discount threshold reached | |
| if (chipsCollected >= chipsNeeded) { | |
| unlockDiscount(); | |
| } | |
| // Level up every 10 chips | |
| if (score % 10 === 0) { | |
| level++; | |
| gameSpeed += 0.5; | |
| document.getElementById('speed').textContent = `${gameSpeed}x`; | |
| document.getElementById('level').textContent = level; | |
| } | |
| // Add time bonus | |
| timeLeft = Math.min(timeLeft + 2, 60); | |
| updateUI(); | |
| } | |
| // Unlock discount | |
| function unlockDiscount() { | |
| discount = discountThresholds[currentThresholdIndex].discount; | |
| // Show discount unlocked modal | |
| document.getElementById('unlockedDiscount').textContent = `${discount}%`; | |
| document.getElementById('discountUnlocked').classList.remove('hidden'); | |
| // Update shop discount display | |
| document.getElementById('shopDiscount').textContent = `${discount}%`; | |
| // Move to next threshold if available | |
| currentThresholdIndex++; | |
| if (currentThresholdIndex < discountThresholds.length) { | |
| chipsNeeded = discountThresholds[currentThresholdIndex].chips - discountThresholds[currentThresholdIndex - 1].chips; | |
| } else { | |
| // If all discounts unlocked, set a repeating pattern | |
| chipsNeeded = 25; | |
| } | |
| chipsCollected = 0; | |
| updateUI(); | |
| } | |
| // Continue playing after discount unlocked | |
| document.getElementById('continueBtn').addEventListener('click', function() { | |
| document.getElementById('discountUnlocked').classList.add('hidden'); | |
| }); | |
| // Update UI elements | |
| function updateUI() { | |
| document.getElementById('score').textContent = score; | |
| document.getElementById('discount').textContent = discount; | |
| document.getElementById('collected').textContent = chipsCollected; | |
| document.getElementById('needed').textContent = chipsNeeded; | |
| document.getElementById('nextDiscount').textContent = discountThresholds[currentThresholdIndex]?.chips || (discountThresholds[discountThresholds.length - 1].chips + (chipsNeeded * (currentThresholdIndex - discountThresholds.length + 1))); | |
| // Update progress bar | |
| const progressPercent = (chipsCollected / chipsNeeded) * 100; | |
| document.getElementById('progressBar').style.width = `${progressPercent}%`; | |
| } | |
| // Reset phone position | |
| function resetPhonePosition() { | |
| phonePosition = { | |
| x: gameAreaRect.width / 2 - phoneElement.offsetWidth / 2, | |
| y: gameAreaRect.height - phoneElement.offsetHeight - 20 | |
| }; | |
| updatePhonePosition(); | |
| } | |
| // Update phone position | |
| function updatePhonePosition() { | |
| phoneElement.style.left = `${phonePosition.x}px`; | |
| phoneElement.style.bottom = `${gameAreaRect.height - phonePosition.y - phoneElement.offsetHeight}px`; | |
| } | |
| // Handle keyboard controls | |
| document.addEventListener('keydown', function(e) { | |
| if (!gameActive) return; | |
| const moveAmount = 20; | |
| switch(e.key) { | |
| case 'ArrowLeft': | |
| phonePosition.x = Math.max(0, phonePosition.x - moveAmount); | |
| break; | |
| case 'ArrowRight': | |
| phonePosition.x = Math.min(gameAreaRect.width - phoneElement.offsetWidth, phonePosition.x + moveAmount); | |
| break; | |
| case 'ArrowUp': | |
| phonePosition.y = Math.min(gameAreaRect.height - phoneElement.offsetHeight, phonePosition.y + moveAmount); | |
| break; | |
| case 'ArrowDown': | |
| phonePosition.y = Math.max(0, phonePosition.y - moveAmount); | |
| break; | |
| case ' ': | |
| // Space bar to pause | |
| togglePause(); | |
| break; | |
| } | |
| updatePhonePosition(); | |
| // Check for collision with NFC chips | |
| checkCollisions(); | |
| }); | |
| // Handle touch controls for mobile | |
| let touchStartX = 0; | |
| let touchStartY = 0; | |
| gameArea.addEventListener('touchstart', function(e) { | |
| if (!gameActive) return; | |
| touchStartX = e.touches[0].clientX; | |
| touchStartY = e.touches[0].clientY; | |
| e.preventDefault(); | |
| }, { passive: false }); | |
| gameArea.addEventListener('touchmove', function(e) { | |
| if (!gameActive) return; | |
| const touchX = e.touches[0].clientX; | |
| const touchY = e.touches[0].clientY; | |
| const diffX = touchX - touchStartX; | |
| const diffY = touchY - touchStartY; | |
| phonePosition.x = Math.max(0, Math.min(gameAreaRect.width - phoneElement.offsetWidth, phonePosition.x + diffX)); | |
| phonePosition.y = Math.max(0, Math.min(gameAreaRect.height - phoneElement.offsetHeight, phonePosition.y + diffY)); | |
| touchStartX = touchX; | |
| touchStartY = touchY; | |
| updatePhonePosition(); | |
| // Check for collision with NFC chips | |
| checkCollisions(); | |
| e.preventDefault(); | |
| }, { passive: false }); | |
| // Check for collisions with NFC chips | |
| function checkCollisions() { | |
| const phoneRect = phoneElement.getBoundingClientRect(); | |
| const chips = document.querySelectorAll('.nfc-chip'); | |
| chips.forEach(chip => { | |
| const chipRect = chip.getBoundingClientRect(); | |
| // Simple collision detection | |
| if (!(phoneRect.right < chipRect.left || | |
| phoneRect.left > chipRect.right || | |
| phoneRect.bottom < chipRect.top || | |
| phoneRect.top > chipRect.bottom)) { | |
| collectChip(chip); | |
| } | |
| }); | |
| } | |
| // Initialize game area dimensions | |
| function updateGameAreaDimensions() { | |
| gameAreaRect = gameArea.getBoundingClientRect(); | |
| resetPhonePosition(); | |
| } | |
| window.addEventListener('resize', updateGameAreaDimensions); | |
| updateGameAreaDimensions(); | |
| /* SHOP FUNCTIONALITY */ | |
| // Tab switching | |
| document.getElementById('gameTab').addEventListener('click', function() { | |
| document.getElementById('gameContainer').style.display = 'block'; | |
| document.getElementById('shopContainer').style.display = 'none'; | |
| this.classList.add('active'); | |
| document.getElementById('shopTab').classList.remove('active'); | |
| }); | |
| document.getElementById('shopTab').addEventListener('click', function() { | |
| document.getElementById('gameContainer').style.display = 'none'; | |
| document.getElementById('shopContainer').style.display = 'block'; | |
| this.classList.add('active'); | |
| document.getElementById('gameTab').classList.remove('active'); | |
| // Initialize shop if not already done | |
| if (document.querySelector('#shopContainer .grid').children.length === 0) { | |
| initializeShop(); | |
| } | |
| }); | |
| // Initialize shop products | |
| function initializeShop() { | |
| const productsContainer = document.querySelector('#shopContainer .grid'); | |
| productsContainer.innerHTML = ''; | |
| products.forEach(product => { | |
| const productCard = document.createElement('div'); | |
| productCard.className = 'product-card bg-white rounded-lg shadow overflow-hidden'; | |
| productCard.innerHTML = ` | |
| <img src="${product.image}" alt="${product.name}" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">${product.name}</h3> | |
| <p class="text-gray-600 text-sm mb-2">${product.description}</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-purple-600">$${product.price.toFixed(2)}</span> | |
| <button class="add-to-cart bg-purple-100 hover:bg-purple-200 text-purple-800 py-1 px-3 rounded-full text-sm transition" data-id="${product.id}"> | |
| <i class="fas fa-cart-plus mr-1"></i> Add to Cart | |
| </button> | |
| </div> | |
| </div> | |
| `; | |
| productsContainer.appendChild(productCard); | |
| }); | |
| // Add event listeners to add to cart buttons | |
| document.querySelectorAll('.add-to-cart').forEach(button => { | |
| button.addEventListener('click', function() { | |
| const productId = parseInt(this.getAttribute('data-id')); | |
| addToCart(productId); | |
| }); | |
| }); | |
| } | |
| // Add product to cart | |
| function addToCart(productId) { | |
| const product = products.find(p => p.id === productId); | |
| if (!product) return; | |
| // Check if product already in cart | |
| const existingItem = cart.find(item => item.id === productId); | |
| if (existingItem) { | |
| existingItem.quantity++; | |
| } else { | |
| cart.push({ | |
| ...product, | |
| quantity: 1 | |
| }); | |
| } | |
| updateCartUI(); | |
| // Show feedback | |
| const button = document.querySelector(`.add-to-cart[data-id="${productId}"]`); | |
| button.innerHTML = '<i class="fas fa-check mr-1"></i> Added!'; | |
| button.classList.remove('bg-purple-100', 'text-purple-800'); | |
| button.classList.add('bg-green-100', 'text-green-800'); | |
| setTimeout(() => { | |
| button.innerHTML = '<i class="fas fa-cart-plus mr-1"></i> Add to Cart'; | |
| button.classList.remove('bg-green-100', 'text-green-800'); | |
| button.classList.add('bg-purple-100', 'text-purple-800'); | |
| }, 1000); | |
| } | |
| // Update cart UI | |
| function updateCartUI() { | |
| // Update cart count | |
| const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0); | |
| document.getElementById('cartCount').textContent = totalItems; | |
| // Update cart badge | |
| const cartBadge = document.getElementById('cartBadge'); | |
| if (totalItems > 0) { | |
| cartBadge.textContent = totalItems; | |
| cartBadge.classList.remove('hidden'); | |
| } else { | |
| cartBadge.classList.add('hidden'); | |
| } | |
| // Update cart modal if open | |
| if (!document.getElementById('cartModal').classList.contains('hidden')) { | |
| renderCartItems(); | |
| } | |
| } | |
| // Render cart items in modal | |
| function renderCartItems() { | |
| const cartItemsContainer = document.getElementById('cartItems'); | |
| if (cart.length === 0) { | |
| cartItemsContainer.innerHTML = ` | |
| <div class="text-center py-8 text-gray-500"> | |
| <i class="fas fa-shopping-cart text-4xl mb-2"></i> | |
| <p>Your cart is empty</p> | |
| </div> | |
| `; | |
| // Update totals | |
| document.getElementById('cartSubtotal').textContent = '$0.00'; | |
| document.getElementById('cartDiscount').textContent = '$0.00'; | |
| document.getElementById('cartTotal').textContent = '$0.00'; | |
| document.getElementById('checkoutTotal').textContent = '$0.00'; | |
| document.getElementById('appliedDiscount').textContent = '0%'; | |
| return; | |
| } | |
| cartItemsContainer.innerHTML = ''; | |
| let subtotal = 0; | |
| cart.forEach(item => { | |
| const itemTotal = item.price * item.quantity; | |
| subtotal += itemTotal; | |
| const cartItem = document.createElement('div'); | |
| cartItem.className = 'cart-item flex justify-between items-center py-3 border-b'; | |
| cartItem.innerHTML = ` | |
| <div class="flex items-center"> | |
| <img src="${item.image}" alt="${item.name}" class="w-12 h-12 object-cover rounded mr-3"> | |
| <div> | |
| <h4 class="font-medium">${item.name}</h4> | |
| <p class="text-sm text-gray-500">$${item.price.toFixed(2)} × ${item.quantity}</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="font-bold mr-4">$${itemTotal.toFixed(2)}</span> | |
| <button class="remove-item text-red-500 hover:text-red-700" data-id="${item.id}"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| `; | |
| cartItemsContainer.appendChild(cartItem); | |
| }); | |
| // Calculate discount | |
| const discountAmount = subtotal * (discount / 100); | |
| const total = subtotal - discountAmount; | |
| // Update totals | |
| document.getElementById('cartSubtotal').textContent = `$${subtotal.toFixed(2)}`; | |
| document.getElementById('cartDiscount').textContent = `-$${discountAmount.toFixed(2)}`; | |
| document.getElementById('cartTotal').textContent = `$${total.toFixed(2)}`; | |
| document.getElementById('checkoutTotal').textContent = `$${total.toFixed(2)}`; | |
| document.getElementById('appliedDiscount').textContent = `${discount}%`; | |
| // Add event listeners to remove buttons | |
| document.querySelectorAll('.remove-item').forEach(button => { | |
| button.addEventListener('click', function() { | |
| const productId = parseInt(this.getAttribute('data-id')); | |
| removeFromCart(productId); | |
| }); | |
| }); | |
| } | |
| // Remove item from cart | |
| function removeFromCart(productId) { | |
| const itemIndex = cart.findIndex(item => item.id === productId); | |
| if (itemIndex !== -1) { | |
| if (cart[itemIndex].quantity > 1) { | |
| cart[itemIndex].quantity--; | |
| } else { | |
| cart.splice(itemIndex, 1); | |
| } | |
| updateCartUI(); | |
| } | |
| } | |
| // Cart modal controls | |
| document.getElementById('viewCartBtn').addEventListener('click', function() { | |
| document.getElementById('cartModal').classList.remove('hidden'); | |
| renderCartItems(); | |
| }); | |
| document.getElementById('closeCartBtn').addEventListener('click', function() { | |
| document.getElementById('cartModal').classList.add('hidden'); | |
| }); | |
| document.getElementById('continueShoppingBtn').addEventListener('click', function() { | |
| document.getElementById('cartModal').classList.add('hidden'); | |
| }); | |
| // Checkout controls | |
| document.getElementById('checkoutBtn').addEventListener('click', function() { | |
| if (cart.length === 0) { | |
| alert('Your cart is empty. Please add some products before checkout.'); | |
| return; | |
| } | |
| document.getElementById('cartModal').classList.add('hidden'); | |
| document.getElementById('checkoutModal').classList.remove('hidden'); | |
| }); | |
| document.getElementById('closeCheckoutBtn').addEventListener('click', function() { | |
| document.getElementById('checkoutModal').classList.add('hidden'); | |
| }); | |
| // Confirm checkout | |
| document.getElementById('confirmCheckoutBtn').addEventListener('click', function() { | |
| const form = document.getElementById('checkoutForm'); | |
| const inputs = form.querySelectorAll('input, select, textarea'); | |
| let isValid = true; | |
| // Simple validation | |
| inputs.forEach(input => { | |
| if (!input.value.trim()) { | |
| isValid = false; | |
| input.classList.add('border-red-500'); | |
| } else { | |
| input.classList.remove('border-red-500'); | |
| } | |
| }); | |
| if (!isValid) { | |
| alert('Please fill in all required fields.'); | |
| return; | |
| } | |
| // Process checkout (in a real app, this would send to a server) | |
| document.getElementById('checkoutModal').classList.add('hidden'); | |
| // Show confirmation | |
| document.getElementById('confirmationModal').classList.remove('hidden'); | |
| // Clear cart | |
| cart = []; | |
| updateCartUI(); | |
| }); | |
| // Return to shop after purchase | |
| document.getElementById('returnToShopBtn').addEventListener('click', function() { | |
| document.getElementById('confirmationModal').classList.add('hidden'); | |
| }); | |
| // Initialize shop discount display | |
| document.getElementById('shopDiscount').textContent = `${discount}%`; | |
| // Shop button in game | |
| document.getElementById('shopBtn').addEventListener('click', function() { | |
| document.getElementById('gameContainer').style.display = 'none'; | |
| document.getElementById('shopContainer').style.display = 'block'; | |
| document.getElementById('gameTab').classList.remove('active'); | |
| document.getElementById('shopTab').classList.add('active'); | |
| // Initialize shop if not already done | |
| if (document.querySelector('#shopContainer .grid').children.length === 0) { | |
| initializeShop(); | |
| } | |
| }); | |
| </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=The22Mindset/nfc" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> | |
| </html> |