test / index.html
The22Mindset's picture
Add 1 files
813262a verified
Raw History Blame Contribute Delete
46.4 kB
<!DOCTYPE html>
<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>