|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Crafty Configurator Hub | Products</title> |
|
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<style> |
|
|
.product-card { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.product-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
.selected { |
|
|
border: 2px solid #667eea; |
|
|
background-color: #f0f4ff; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
<nav class="bg-white shadow-sm"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between h-16"> |
|
|
<div class="flex items-center"> |
|
|
<i data-feather="package" class="text-indigo-600"></i> |
|
|
<span class="ml-2 text-xl font-semibold text-gray-900">Crafty Configurator</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<button id="logoutBtn" class="text-gray-500 hover:text-gray-700 px-3 py-2 rounded-md text-sm font-medium flex items-center"> |
|
|
<i data-feather="log-out" class="mr-1"></i> Logout |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
<main class="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-12"> |
|
|
<h1 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> |
|
|
Our Customizable Products |
|
|
</h1> |
|
|
<p class="mt-3 max-w-2xl mx-auto text-xl text-gray-500 sm:mt-4"> |
|
|
Select a product to begin your customization journey |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="product-card bg-white rounded-lg shadow-md overflow-hidden cursor-pointer p-6" onclick="selectProduct(this, 'premium-watch')"> |
|
|
<div class="flex justify-center mb-4"> |
|
|
<img src="http://static.photos/retail/640x360/1" alt="Premium Watch" class="h-48 object-contain"> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold text-gray-900 mb-2">Premium Watch</h3> |
|
|
<p class="text-gray-600 mb-4">Customizable luxury timepiece with various strap and face options</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-lg font-bold text-indigo-600">Customizable</span> |
|
|
<i data-feather="chevron-right" class="text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="product-card bg-white rounded-lg shadow-md overflow-hidden cursor-pointer p-6" onclick="selectProduct(this, 'designer-bag')"> |
|
|
<div class="flex justify-center mb-4"> |
|
|
<img src="http://static.photos/retail/640x360/2" alt="Designer Bag" class="h-48 object-contain"> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold text-gray-900 mb-2">Designer Bag</h3> |
|
|
<p class="text-gray-600 mb-4">Personalize your perfect bag with different colors and materials</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-lg font-bold text-indigo-600">Customizable</span> |
|
|
<i data-feather="chevron-right" class="text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="product-card bg-white rounded-lg shadow-md overflow-hidden cursor-pointer p-6" onclick="selectProduct(this, 'custom-sneakers')"> |
|
|
<div class="flex justify-center mb-4"> |
|
|
<img src="http://static.photos/retail/640x360/3" alt="Custom Sneakers" class="h-48 object-contain"> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold text-gray-900 mb-2">Custom Sneakers</h3> |
|
|
<p class="text-gray-600 mb-4">Design your unique sneakers with multiple color combinations</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-lg font-bold text-indigo-600">Customizable</span> |
|
|
<i data-feather="chevron-right" class="text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-12 flex justify-center"> |
|
|
<button id="continueBtn" disabled class="px-6 py-3 bg-indigo-600 text-white font-medium rounded-md shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-all duration-200 opacity-50 cursor-not-allowed"> |
|
|
Continue to Customization |
|
|
</button> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
<script> |
|
|
feather.replace(); |
|
|
let selectedProduct = null; |
|
|
|
|
|
function selectProduct(element, productId) { |
|
|
|
|
|
document.querySelectorAll('.product-card').forEach(card => { |
|
|
card.classList.remove('selected'); |
|
|
}); |
|
|
|
|
|
|
|
|
element.classList.add('selected'); |
|
|
selectedProduct = productId; |
|
|
|
|
|
|
|
|
document.getElementById('continueBtn').disabled = false; |
|
|
document.getElementById('continueBtn').classList.remove('opacity-50', 'cursor-not-allowed'); |
|
|
} |
|
|
|
|
|
document.getElementById('continueBtn').addEventListener('click', function() { |
|
|
if (selectedProduct) { |
|
|
window.location.href = `customize.html?product=${selectedProduct}`; |
|
|
} |
|
|
}); |
|
|
|
|
|
document.getElementById('logoutBtn').addEventListener('click', function() { |
|
|
window.location.href = 'index.html'; |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
