Hugging Face's logo

Spaces:
LukasBe
/
tv-matchmaker
Running

App Files Community
tv-matchmaker / index.html
LukasBe's picture
LukasBe
Add 3 files
dca515c verified
raw
history blame contribute delete
66.5 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Amazon TV Matchmaker</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">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #f8fafc;
}
.glass-card {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.18);
}
.progress-bar {
height: 8px;
transition: width 0.6s cubic-bezier(0.65, 0, 0.35, 1);
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
}
.card-hover {
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.card-hover:hover {
transform: translateY(-8px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
}
.fade-in {
animation: fadeIn 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.feature-icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
margin-right: 16px;
}
.option-card {
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
border-radius: 16px;
}
.option-card:hover {
transform: scale(1.03);
}
.selected-card {
border: 2px solid #3b82f6;
box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.2);
}
.gradient-text {
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.budget-slider {
-webkit-appearance: none;
width: 100%;
height: 8px;
border-radius: 4px;
background: linear-gradient(90deg, #e0e7ff, #3b82f6);
}
.budget-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 24px;
height: 24px;
border-radius: 50%;
background: #3b82f6;
cursor: pointer;
box-shadow: 0 4px 6px rgba(59, 130, 246, 0.3);
border: 3px solid white;
}
.pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }
70% { box-shadow: 0 0 0 12px rgba(59, 130, 246, 0); }
100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}
.checkmark {
display: inline-block;
width: 22px;
height: 22px;
background-color: #10b981;
color: white;
border-radius: 50%;
text-align: center;
line-height: 22px;
margin-right: 8px;
font-size: 12px;
}
</style>
</head>
<body class="bg-gradient-to-br from-gray-50 to-blue-50 min-h-screen">
<!-- Floating Navigation -->
<nav class="fixed top-0 left-0 right-0 glass-card shadow-sm z-50">
<div class="container mx-auto px-6 py-3 flex items-center justify-between">
<div class="flex items-center space-x-3">
<div class="bg-gradient-to-r from-blue-600 to-blue-800 text-white p-2 rounded-lg">
<i class="fab fa-amazon text-2xl"></i>
</div>
<span class="text-xl font-bold text-gray-800">TV Matchmaker</span>
</div>
<div class="hidden md:flex items-center space-x-8">
<a href="#" class="text-gray-700 hover:text-blue-600 transition font-medium">Home</a>
<a href="#" class="text-gray-700 hover:text-blue-600 transition font-medium">TVs</a>
<a href="#" class="text-gray-700 hover:text-blue-600 transition font-medium">Deals</a>
<a href="#" class="text-gray-700 hover:text-blue-600 transition font-medium">Support</a>
</div>
<div class="flex items-center space-x-5">
<button class="p-2 rounded-full hover:bg-gray-100 transition text-gray-600 hover:text-blue-600">
<i class="fas fa-search"></i>
</button>
<button class="p-2 rounded-full hover:bg-gray-100 transition text-gray-600 hover:text-blue-600">
<i class="fas fa-user"></i>
</button>
<button class="p-2 rounded-full hover:bg-gray-100 transition text-gray-600 hover:text-blue-600 relative">
<i class="fas fa-shopping-cart"></i>
<span class="absolute -top-1 -right-1 bg-yellow-400 text-black text-xs rounded-full h-5 w-5 flex items-center justify-center font-bold">0</span>
</button>
</div>
</div>
</nav>
<!-- Main Content -->
<main class="container mx-auto px-4 py-24">
<!-- Wizard Header -->
<div class="glass-card rounded-2xl shadow-xl p-8 mb-10 max-w-4xl mx-auto">
<div class="text-center mb-6">
<span class="inline-block bg-blue-100 text-blue-600 px-4 py-1 rounded-full text-sm font-medium mb-3">Find Your Perfect TV</span>
<h1 class="text-4xl font-bold text-gray-900 mb-3">Tell us about your <span class="gradient-text">dream TV experience</span></h1>
<p class="text-lg text-gray-600 max-w-2xl mx-auto">We'll match you with the ideal television based on your space, budget, and viewing preferences</p>
</div>
<div class="mb-6">
<div class="flex justify-between mb-3">
<span class="text-sm font-medium text-gray-700">Step <span id="current-step">1</span> of 5</span>
<span class="text-sm font-medium text-blue-600" id="progress-text">20% complete</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5 overflow-hidden">
<div class="progress-bar h-2.5 rounded-full" style="width: 20%" id="progress-bar"></div>
</div>
</div>
</div>
<!-- Wizard Steps -->
<div class="glass-card rounded-2xl shadow-xl p-8 mb-10 max-w-4xl mx-auto fade-in" id="step-container">
<!-- Step 1 - Screen Size -->
<div class="step" id="step-1">
<div class="mb-8">
<h2 class="text-2xl font-bold text-gray-900 mb-2">Where will your new TV be placed?</h2>
<p class="text-gray-600">This helps us suggest the right screen size for your space</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-5 mb-10">
<button class="size-option option-card bg-white border-2 border-gray-100 rounded-xl p-6 text-left hover:border-blue-200 hover:shadow-md transition-all" data-value="32">
<div class="flex items-start">
<div class="feature-icon bg-purple-100 text-purple-600">
<i class="fas fa-bed text-xl"></i>
</div>
<div>
<span class="font-semibold text-lg block">Bedroom</span>
<span class="text-gray-500">Smaller screen (32" or under)</span>
<div class="mt-3 text-blue-600 font-medium flex items-center">
<span class="checkmark hidden"><i class="fas fa-check"></i></span>
<span>Great for cozy viewing</span>
</div>
</div>
</div>
</button>
<button class="size-option option-card bg-white border-2 border-gray-100 rounded-xl p-6 text-left hover:border-blue-200 hover:shadow-md transition-all" data-value="43">
<div class="flex items-start">
<div class="feature-icon bg-blue-100 text-blue-600">
<i class="fas fa-home text-xl"></i>
</div>
<div>
<span class="font-semibold text-lg block">Small living space</span>
<span class="text-gray-500">Medium screen (40-43")</span>
<div class="mt-3 text-blue-600 font-medium flex items-center">
<span class="checkmark hidden"><i class="fas fa-check"></i></span>
<span>Ideal for apartments</span>
</div>
</div>
</div>
</button>
<button class="size-option option-card bg-white border-2 border-gray-100 rounded-xl p-6 text-left hover:border-blue-200 hover:shadow-md transition-all" data-value="55">
<div class="flex items-start">
<div class="feature-icon bg-green-100 text-green-600">
<i class="fas fa-couch text-xl"></i>
</div>
<div>
<span class="font-semibold text-lg block">Living room</span>
<span class="text-gray-500">Larger screen (50-55")</span>
<div class="mt-3 text-blue-600 font-medium flex items-center">
<span class="checkmark hidden"><i class="fas fa-check"></i></span>
<span>Perfect for family viewing</span>
</div>
</div>
</div>
</button>
<button class="size-option option-card bg-white border-2 border-gray-100 rounded-xl p-6 text-left hover:border-blue-200 hover:shadow-md transition-all" data-value="65">
<div class="flex items-start">
<div class="feature-icon bg-red-100 text-red-600">
<i class="fas fa-theater-masks text-xl"></i>
</div>
<div>
<span class="font-semibold text-lg block">Home theater</span>
<span class="text-gray-500">Extra large screen (65"+)</span>
<div class="mt-3 text-blue-600 font-medium flex items-center">
<span class="checkmark hidden"><i class="fas fa-check"></i></span>
<span>Cinematic experience</span>
</div>
</div>
</div>
</button>
</div>
<div class="flex justify-between pt-4 border-t border-gray-100">
<button class="px-8 py-3 text-gray-600 rounded-lg hover:bg-gray-50 transition font-medium" disabled>
<i class="fas fa-chevron-left mr-2"></i> Back
</button>
<button class="px-8 py-3 bg-gradient-to-r from-blue-600 to-blue-500 text-white rounded-lg hover:from-blue-700 hover:to-blue-600 transition shadow-md hover:shadow-lg next-step">
Next <i class="fas fa-chevron-right ml-2"></i>
</button>
</div>
</div>
<!-- Step 2 - Budget -->
<div class="step hidden" id="step-2">
<div class="mb-8">
<h2 class="text-2xl font-bold text-gray-900 mb-2">What's your comfortable budget range?</h2>
<p class="text-gray-600">We'll show you the best options that fit your price point</p>
</div>
<div class="mb-10">
<div class="flex justify-between mb-3">
<span class="text-sm font-medium text-gray-700">More affordable</span>
<span class="text-sm font-medium text-gray-700">Premium options</span>
</div>
<input type="range" min="300" max="5000" value="1000" step="100" class="budget-slider mb-6" id="budget-slider">
<div class="text-center">
<span class="text-3xl font-bold text-blue-600" id="budget-value">$1,000</span>
<span class="text-sm text-gray-500 block mt-1">Typical price for quality TVs</span>
</div>
<div class="grid grid-cols-4 gap-4 mt-8">
<button class="budget-preset py-2 px-3 rounded-lg border border-gray-200 hover:border-blue-300 hover:bg-blue-50 text-sm font-medium transition" data-value="500">
<span class="block">$500</span>
<span class="text-gray-500 text-xs">Budget</span>
</button>
<button class="budget-preset py-2 px-3 rounded-lg border border-gray-200 hover:border-blue-300 hover:bg-blue-50 text-sm font-medium transition" data-value="1000">
<span class="block">$1,000</span>
<span class="text-gray-500 text-xs">Standard</span>
</button>
<button class="budget-preset py-2 px-3 rounded-lg border border-gray-200 hover:border-blue-300 hover:bg-blue-50 text-sm font-medium transition" data-value="2000">
<span class="block">$2,000</span>
<span class="text-gray-500 text-xs">Premium</span>
</button>
<button class="budget-preset py-2 px-3 rounded-lg border border-gray-200 hover:border-blue-300 hover:bg-blue-50 text-sm font-medium transition" data-value="3000">
<span class="block">$3,000+</span>
<span class="text-gray-500 text-xs">High-end</span>
</button>
</div>
</div>
<div class="flex justify-between pt-4 border-t border-gray-100">
<button class="px-8 py-3 text-gray-600 rounded-lg hover:bg-gray-50 transition font-medium prev-step">
<i class="fas fa-chevron-left mr-2"></i> Back
</button>
<button class="px-8 py-3 bg-gradient-to-r from-blue-600 to-blue-500 text-white rounded-lg hover:from-blue-700 hover:to-blue-600 transition shadow-md hover:shadow-lg next-step">
Next <i class="fas fa-chevron-right ml-2"></i>
</button>
</div>
</div>
<!-- Step 3 - Usage -->
<div class="step hidden" id="step-3">
<div class="mb-8">
<h2 class="text-2xl font-bold text-gray-900 mb-2">What do you love to watch most?</h2>
<p class="text-gray-600">We'll optimize for the best picture quality for your favorite content</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-5 mb-10">
<button class="usage-option option-card bg-white border-2 border-gray-100 rounded-xl p-6 text-left hover:border-blue-200 hover:shadow-md transition-all" data-value="movies">
<div class="flex items-start">
<div class="feature-icon bg-purple-100 text-purple-600">
<i class="fas fa-film text-xl"></i>
</div>
<div>
<span class="font-semibold text-lg block">Movies & shows</span>
<span class="text-gray-500">For cinematic experiences at home</span>
<div class="mt-3 text-blue-600 font-medium flex items-center">
<span class="checkmark hidden"><i class="fas fa-check"></i></span>
<span>Deep blacks, rich colors</span>
</div>
</div>
</div>
</button>
<button class="usage-option option-card bg-white border-2 border-gray-100 rounded-xl p-6 text-left hover:border-blue-200 hover:shadow-md transition-all" data-value="gaming">
<div class="flex items-start">
<div class="feature-icon bg-green-100 text-green-600">
<i class="fas fa-gamepad text-xl"></i>
</div>
<div>
<span class="font-semibold text-lg block">Video games</span>
<span class="text-gray-500">Smooth gameplay with fast response</span>
<div class="mt-3 text-blue-600 font-medium flex items-center">
<span class="checkmark hidden"><i class="fas fa-check"></i></span>
<span>Low input lag, high refresh</span>
</div>
</div>
</div>
</button>
<button class="usage-option option-card bg-white border-2 border-gray-100 rounded-xl p-6 text-left hover:border-blue-200 hover:shadow-md transition-all" data-value="sports">
<div class="flex items-start">
<div class="feature-icon bg-red-100 text-red-600">
<i class="fas fa-running text-xl"></i>
</div>
<div>
<span class="font-semibold text-lg block">Sports & action</span>
<span class="text-gray-500">Clear motion for fast-paced content</span>
<div class="mt-3 text-blue-600 font-medium flex items-center">
<span class="checkmark hidden"><i class="fas fa-check"></i></span>
<span>Motion smoothing, clarity</span>
</div>
</div>
</div>
</button>
<button class="usage-option option-card bg-white border-2 border-gray-100 rounded-xl p-6 text-left hover:border-blue-200 hover:shadow-md transition-all" data-value="streaming">
<div class="flex items-start">
<div class="feature-icon bg-blue-100 text-blue-600">
<i class="fas fa-play-circle text-xl"></i>
</div>
<div>
<span class="font-semibold text-lg block">Streaming services</span>
<span class="text-gray-500">Built-in apps for Netflix, Prime, etc.</span>
<div class="mt-3 text-blue-600 font-medium flex items-center">
<span class="checkmark hidden"><i class="fas fa-check"></i></span>
<span>Smart platform included</span>
</div>
</div>
</div>
</button>
</div>
<div class="flex justify-between pt-4 border-t border-gray-100">
<button class="px-8 py-3 text-gray-600 rounded-lg hover:bg-gray-50 transition font-medium prev-step">
<i class="fas fa-chevron-left mr-2"></i> Back
</button>
<button class="px-8 py-3 bg-gradient-to-r from-blue-600 to-blue-500 text-white rounded-lg hover:from-blue-700 hover:to-blue-600 transition shadow-md hover:shadow-lg next-step">
Next <i class="fas fa-chevron-right ml-2"></i>
</button>
</div>
</div>
<!-- Step 4 - Features -->
<div class="step hidden" id="step-4">
<div class="mb-8">
<h2 class="text-2xl font-bold text-gray-900 mb-2">Which features would enhance your experience?</h2>
<p class="text-gray-600">Select all that matter to you</p>
</div>
<div class="space-y-3 mb-10">
<label class="feature-checkbox flex items-start p-4 bg-white rounded-xl border-2 border-gray-100 hover:border-blue-200 hover:shadow-md cursor-pointer transition-all">
<input type="checkbox" id="feature-4k" class="mt-1 h-5 w-5 text-blue-600 rounded focus:ring-blue-500">
<div class="ml-4">
<span class="font-semibold text-gray-900">Super sharp picture</span>
<span class="block text-gray-500 mt-1">4K resolution for incredible detail</span>
<div class="mt-2 text-blue-600 font-medium flex items-center">
<span class="checkmark hidden"><i class="fas fa-check"></i></span>
<span>4x sharper than HD</span>
</div>
</div>
</label>
<label class="feature-checkbox flex items-start p-4 bg-white rounded-xl border-2 border-gray-100 hover:border-blue-200 hover:shadow-md cursor-pointer transition-all">
<input type="checkbox" id="feature-hdr" class="mt-1 h-5 w-5 text-blue-600 rounded focus:ring-blue-500">
<div class="ml-4">
<span class="font-semibold text-gray-900">Brighter, more vivid colors</span>
<span class="block text-gray-500 mt-1">HDR for lifelike images</span>
<div class="mt-2 text-blue-600 font-medium flex items-center">
<span class="checkmark hidden"><i class="fas fa-check"></i></span>
<span>Wider color range</span>
</div>
</div>
</label>
<label class="feature-checkbox flex items-start p-4 bg-white rounded-xl border-2 border-gray-100 hover:border-blue-200 hover:shadow-md cursor-pointer transition-all">
<input type="checkbox" id="feature-smart" class="mt-1 h-5 w-5 text-blue-600 rounded focus:ring-blue-500">
<div class="ml-4">
<span class="font-semibold text-gray-900">Built-in streaming</span>
<span class="block text-gray-500 mt-1">Watch Netflix, Prime Video and more</span>
<div class="mt-2 text-blue-600 font-medium flex items-center">
<span class="checkmark hidden"><i class="fas fa-check"></i></span>
<span>No extra devices needed</span>
</div>
</div>
</label>
<label class="feature-checkbox flex items-start p-4 bg-white rounded-xl border-2 border-gray-100 hover:border-blue-200 hover:shadow-md cursor-pointer transition-all">
<input type="checkbox" id="feature-oled" class="mt-1 h-5 w-5 text-blue-600 rounded focus:ring-blue-500">
<div class="ml-4">
<span class="font-semibold text-gray-900">Perfect black levels</span>
<span class="block text-gray-500 mt-1">OLED technology for dark room viewing</span>
<div class="mt-2 text-blue-600 font-medium flex items-center">
<span class="checkmark hidden"><i class="fas fa-check"></i></span>
<span>Infinite contrast ratio</span>
</div>
</div>
</label>
<label class="feature-checkbox flex items-start p-4 bg-white rounded-xl border-2 border-gray-100 hover:border-blue-200 hover:shadow-md cursor-pointer transition-all">
<input type="checkbox" id="feature-voice" class="mt-1 h-5 w-5 text-blue-600 rounded focus:ring-blue-500">
<div class="ml-4">
<span class="font-semibold text-gray-900">Voice control</span>
<span class="block text-gray-500 mt-1">Use Alexa or Google Assistant</span>
<div class="mt-2 text-blue-600 font-medium flex items-center">
<span class="checkmark hidden"><i class="fas fa-check"></i></span>
<span>Hands-free operation</span>
</div>
</div>
</label>
</div>
<div class="flex justify-between pt-4 border-t border-gray-100">
<button class="px-8 py-3 text-gray-600 rounded-lg hover:bg-gray-50 transition font-medium prev-step">
<i class="fas fa-chevron-left mr-2"></i> Back
</button>
<button class="px-8 py-3 bg-gradient-to-r from-blue-600 to-blue-500 text-white rounded-lg hover:from-blue-700 hover:to-blue-600 transition shadow-md hover:shadow-lg next-step">
Next <i class="fas fa-chevron-right ml-2"></i>
</button>
</div>
</div>
<!-- Step 5 - Room Lighting -->
<div class="step hidden" id="step-5">
<div class="mb-8">
<h2 class="text-2xl font-bold text-gray-900 mb-2">How's the lighting in your room?</h2>
<p class="text-gray-600">This helps us suggest the right screen brightness and anti-glare features</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-5 mb-10">
<button class="lighting-option option-card bg-white border-2 border-gray-100 rounded-xl p-6 hover:border-blue-200 hover:shadow-md transition-all" data-value="bright">
<div class="flex items-start">
<div class="feature-icon bg-yellow-100 text-yellow-600">
<i class="fas fa-sun text-xl"></i>
</div>
<div>
<span class="font-semibold text-lg block">Lots of sunlight</span>
<span class="text-gray-500">Big windows or very bright lights</span>
<div class="mt-3 text-blue-600 font-medium flex items-center">
<span class="checkmark hidden"><i class="fas fa-check"></i></span>
<span>Anti-glare recommended</span>
</div>
</div>
</div>
</button>
<button class="lighting-option option-card bg-white border-2 border-gray-100 rounded-xl p-6 hover:border-blue-200 hover:shadow-md transition-all" data-value="moderate">
<div class="flex items-start">
<div class="feature-icon bg-orange-100 text-orange-600">
<i class="fas fa-lightbulb text-xl"></i>
</div>
<div>
<span class="font-semibold text-lg block">Normal lighting</span>
<span class="text-gray-500">Some lamps or natural light</span>
<div class="mt-3 text-blue-600 font-medium flex items-center">
<span class="checkmark hidden"><i class="fas fa-check"></i></span>
<span>Standard brightness</span>
</div>
</div>
</div>
</button>
<button class="lighting-option option-card bg-white border-2 border-gray-100 rounded-xl p-6 hover:border-blue-200 hover:shadow-md transition-all" data-value="dark">
<div class="flex items-start">
<div class="feature-icon bg-indigo-100 text-indigo-600">
<i class="fas fa-moon text-xl"></i>
</div>
<div>
<span class="font-semibold text-lg block">Dim or dark</span>
<span class="text-gray-500">Home theater or low lighting</span>
<div class="mt-3 text-blue-600 font-medium flex items-center">
<span class="checkmark hidden"><i class="fas fa-check"></i></span>
<span>Deep blacks important</span>
</div>
</div>
</div>
</button>
<button class="lighting-option option-card bg-white border-2 border-gray-100 rounded-xl p-6 hover:border-blue-200 hover:shadow-md transition-all" data-value="variable">
<div class="flex items-start">
<div class="feature-icon bg-blue-100 text-blue-600">
<i class="fas fa-adjust text-xl"></i>
</div>
<div>
<span class="font-semibold text-lg block">Changes often</span>
<span class="text-gray-500">Bright during day, dark at night</span>
<div class="mt-3 text-blue-600 font-medium flex items-center">
<span class="checkmark hidden"><i class="fas fa-check"></i></span>
<span>Adaptive brightness</span>
</div>
</div>
</div>
</button>
</div>
<div class="flex justify-between pt-4 border-t border-gray-100">
<button class="px-8 py-3 text-gray-600 rounded-lg hover:bg-gray-50 transition font-medium prev-step">
<i class="fas fa-chevron-left mr-2"></i> Back
</button>
<button class="px-8 py-3 bg-gradient-to-r from-blue-600 to-blue-500 text-white rounded-lg hover:from-blue-700 hover:to-blue-600 transition shadow-md hover:shadow-lg pulse" id="show-results">
Find My Perfect TV <i class="fas fa-tv ml-2"></i>
</button>
</div>
</div>
<!-- Results -->
<div class="step hidden" id="results">
<div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8">
<div>
<h2 class="text-3xl font-bold text-gray-900 mb-1">Your Personalized TV Matches</h2>
<p class="text-gray-600">We've selected these based on your preferences</p>
</div>
<div class="mt-4 md:mt-0 flex items-center">
<span class="text-sm text-gray-600 mr-3">Sort by:</span>
<select class="border border-gray-300 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white">
<option>Best matches</option>
<option>Price: Low to High</option>
<option>Price: High to Low</option>
<option>Top rated</option>
<option>New arrivals</option>
</select>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-10">
<!-- TV Card 1 -->
<div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover">
<div class="relative">
<img src="https://m.media-amazon.com/images/I/71vZypjNkVL._AC_SX679_.jpg" alt="Sony Bravia XR" class="w-full h-56 object-contain p-4">
<div class="absolute top-4 left-4 bg-yellow-400 text-black text-xs font-bold px-2 py-1 rounded-full">Best Seller</div>
<div class="absolute top-4 right-4 bg-white rounded-full p-2 shadow-md cursor-pointer hover:bg-gray-100 transition">
<i class="far fa-heart text-gray-600 hover:text-red-500"></i>
</div>
<div class="absolute bottom-4 right-4 bg-blue-600 text-white rounded-full p-2 shadow-md cursor-pointer hover:bg-blue-700 transition">
<i class="fas fa-bolt"></i>
</div>
</div>
<div class="p-5">
<h3 class="font-bold text-xl mb-2 text-gray-900">Sony Bravia XR A80K 55" OLED TV</h3>
<div class="flex items-center mb-3">
<div class="flex text-yellow-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<span class="text-sm text-gray-600 ml-2">(2,487 reviews)</span>
</div>
<div class="mb-4">
<span class="text-2xl font-bold text-gray-900">$1,398.00</span>
<span class="text-sm text-gray-500 line-through ml-2">$1,599.99</span>
<span class="text-xs bg-red-100 text-red-800 font-medium ml-2 px-2 py-1 rounded-full">13% off</span>
</div>
<div class="text-sm text-gray-600 space-y-2 mb-5">
<div class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>Perfect for movies with OLED contrast</span>
</div>
<div class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>Great for dark rooms</span>
</div>
<div class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>Includes Google TV with voice control</span>
</div>
</div>
<button class="w-full bg-gradient-to-r from-yellow-400 to-yellow-500 hover:from-yellow-500 hover:to-yellow-600 text-black font-bold py-3 px-4 rounded-lg shadow-md hover:shadow-lg transition">
<i class="fas fa-shopping-cart mr-2"></i> Add to Cart
</button>
</div>
</div>
<!-- TV Card 2 -->
<div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover">
<div class="relative">
<img src="https://m.media-amazon.com/images/I/71CjUSx422L._AC_SX679_.jpg" alt="LG C2 Series" class="w-full h-56 object-contain p-4">
<div class="absolute top-4 right-4 bg-white rounded-full p-2 shadow-md cursor-pointer hover:bg-gray-100 transition">
<i class="far fa-heart text-gray-600 hover:text-red-500"></i>
</div>
<div class="absolute bottom-4 right-4 bg-blue-600 text-white rounded-full p-2 shadow-md cursor-pointer hover:bg-blue-700 transition">
<i class="fas fa-bolt"></i>
</div>
</div>
<div class="p-5">
<h3 class="font-bold text-xl mb-2 text-gray-900">LG C2 Series 55" OLED TV</h3>
<div class="flex items-center mb-3">
<div class="flex text-yellow-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<span class="text-sm text-gray-600 ml-2">(5,213 reviews)</span>
</div>
<div class="mb-4">
<span class="text-2xl font-bold text-gray-900">$1,296.99</span>
<span class="text-sm text-gray-500 line-through ml-2">$1,499.99</span>
<span class="text-xs bg-red-100 text-red-800 font-medium ml-2 px-2 py-1 rounded-full">14% off</span>
</div>
<div class="text-sm text-gray-600 space-y-2 mb-5">
<div class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>Excellent for gaming with 120Hz refresh</span>
</div>
<div class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>Great HDR performance</span>
</div>
<div class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>WebOS smart platform included</span>
</div>
</div>
<button class="w-full bg-gradient-to-r from-yellow-400 to-yellow-500 hover:from-yellow-500 hover:to-yellow-600 text-black font-bold py-3 px-4 rounded-lg shadow-md hover:shadow-lg transition">
<i class="fas fa-shopping-cart mr-2"></i> Add to Cart
</button>
</div>
</div>
<!-- TV Card 3 -->
<div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover">
<div class="relative">
<img src="https://m.media-amazon.com/images/I/71QeVa5UE+L._AC_SX679_.jpg" alt="Samsung QN90B" class="w-full h-56 object-contain p-4">
<div class="absolute top-4 left-4 bg-blue-100 text-blue-800 text-xs font-bold px-2 py-1 rounded-full">Deal</div>
<div class="absolute top-4 right-4 bg-white rounded-full p-2 shadow-md cursor-pointer hover:bg-gray-100 transition">
<i class="far fa-heart text-gray-600 hover:text-red-500"></i>
</div>
<div class="absolute bottom-4 right-4 bg-blue-600 text-white rounded-full p-2 shadow-md cursor-pointer hover:bg-blue-700 transition">
<i class="fas fa-bolt"></i>
</div>
</div>
<div class="p-5">
<h3 class="font-bold text-xl mb-2 text-gray-900">Samsung QN90B Neo QLED 55" TV</h3>
<div class="flex items-center mb-3">
<div class="flex text-yellow-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</div>
<span class="text-sm text-gray-600 ml-2">(1,842 reviews)</span>
</div>
<div class="mb-4">
<span class="text-2xl font-bold text-gray-900">$1,497.99</span>
<span class="text-sm text-gray-500 line-through ml-2">$1,799.99</span>
<span class="text-xs bg-red-100 text-red-800 font-medium ml-2 px-2 py-1 rounded-full">17% off</span>
</div>
<div class="text-sm text-gray-600 space-y-2 mb-5">
<div class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>Bright room performance</span>
</div>
<div class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>Great for sports with anti-glare</span>
</div>
<div class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>Samsung Tizen OS with Alexa</span>
</div>
</div>
<button class="w-full bg-gradient-to-r from-yellow-400 to-yellow-500 hover:from-yellow-500 hover:to-yellow-600 text-black font-bold py-3 px-4 rounded-lg shadow-md hover:shadow-lg transition">
<i class="fas fa-shopping-cart mr-2"></i> Add to Cart
</button>
</div>
</div>
</div>
<div class="bg-blue-50 border border-blue-100 rounded-xl p-6 mb-10">
<h3 class="font-bold text-xl text-blue-800 mb-4">Your TV Preferences</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-white rounded-xl p-4 shadow-sm">
<span class="block text-sm text-gray-500 mb-1">Room placement</span>
<span class="font-semibold text-lg" id="pref-size">Living room</span>
</div>
<div class="bg-white rounded-xl p-4 shadow-sm">
<span class="block text-sm text-gray-500 mb-1">Your budget</span>
<span class="font-semibold text-lg" id="pref-budget">$1,000</span>
</div>
<div class="bg-white rounded-xl p-4 shadow-sm">
<span class="block text-sm text-gray-500 mb-1">Favorite content</span>
<span class="font-semibold text-lg" id="pref-usage">Movies, Gaming</span>
</div>
<div class="bg-white rounded-xl p-4 shadow-sm">
<span class="block text-sm text-gray-500 mb-1">Preferred features</span>
<span class="font-semibold text-lg" id="pref-features">4K, HDR, Smart TV</span>
</div>
<div class="bg-white rounded-xl p-4 shadow-sm">
<span class="block text-sm text-gray-500 mb-1">Room lighting</span>
<span class="font-semibold text-lg" id="pref-lighting">Moderate</span>
</div>
<div class="bg-white rounded-xl p-4 shadow-sm">
<span class="block text-sm text-gray-500 mb-1">Screen size</span>
<span class="font-semibold text-lg" id="pref-screen">50-55"</span>
</div>
</div>
</div>
<div class="flex justify-center">
<button class="px-8 py-3 bg-white border-2 border-gray-200 text-gray-700 rounded-lg hover:bg-gray-50 hover:border-gray-300 transition font-medium shadow-sm" id="restart-wizard">
<i class="fas fa-redo mr-2"></i> Start Over
</button>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="bg-gray-900 text-gray-300">
<div class="container mx-auto px-6 py-12">
<div class="grid grid-cols-1 md:grid-cols-4 gap-10">
<div>
<h3 class="font-bold text-white text-lg mb-4">Get to Know Us</h3>
<ul class="space-y-3">
<li><a href="#" class="hover:text-white transition">About Us</a></li>
<li><a href="#" class="hover:text-white transition">Careers</a></li>
<li><a href="#" class="hover:text-white transition">Press Releases</a></li>
<li><a href="#" class="hover:text-white transition">Amazon Science</a></li>
</ul>
</div>
<div>
<h3 class="font-bold text-white text-lg mb-4">Make Money with Us</h3>
<ul class="space-y-3">
<li><a href="#" class="hover:text-white transition">Sell products</a></li>
<li><a href="#" class="hover:text-white transition">Become an Affiliate</a></li>
<li><a href="#" class="hover:text-white transition">Advertise Your Products</a></li>
<li><a href="#" class="hover:text-white transition">Self-Publish with Us</a></li>
</ul>
</div>
<div>
<h3 class="font-bold text-white text-lg mb-4">Payment Products</h3>
<ul class="space-y-3">
<li><a href="#" class="hover:text-white transition">Amazon Business Card</a></li>
<li><a href="#" class="hover:text-white transition">Shop with Points</a></li>
<li><a href="#" class="hover:text-white transition">Reload Your Balance</a></li>
<li><a href="#" class="hover:text-white transition">Amazon Currency Converter</a></li>
</ul>
</div>
<div>
<h3 class="font-bold text-white text-lg mb-4">Let Us Help You</h3>
<ul class="space-y-3">
<li><a href="#" class="hover:text-white transition">Your Account</a></li>
<li><a href="#" class="hover:text-white transition">Your Orders</a></li>
<li><a href="#" class="hover:text-white transition">Shipping Rates & Policies</a></li>
<li><a href="#" class="hover:text-white transition">Returns & Replacements</a></li>
<li><a href="#" class="hover:text-white transition">Help</a></li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
<div class="flex items-center mb-6 md:mb-0">
<div class="bg-gradient-to-r from-blue-600 to-blue-800 text-white p-2 rounded-lg mr-3">
<i class="fab fa-amazon text-2xl"></i>
</div>
<span class="font-bold text-white text-xl">TV Matchmaker</span>
</div>
<div class="flex space-x-6">
<a href="#" class="text-gray-400 hover:text-white transition text-xl"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition text-xl"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition text-xl"><i class="fab fa-instagram"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition text-xl"><i class="fab fa-youtube"></i></a>
</div>
</div>
<div class="mt-8 text-center text-sm text-gray-500">
<p>© 2023 Amazon TV Matchmaker. All rights reserved.</p>
</div>
</div>
</footer>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Wizard navigation
const steps = document.querySelectorAll('.step');
const nextButtons = document.querySelectorAll('.next-step');
const prevButtons = document.querySelectorAll('.prev-step');
const showResultsButton = document.getElementById('show-results');
const restartButton = document.getElementById('restart-wizard');
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
const currentStepText = document.getElementById('current-step');
const stepContainer = document.getElementById('step-container');
const resultsSection = document.getElementById('results');
let currentStep = 1;
const totalSteps = 5;
// User preferences
const userPrefs = {
size: 'Living room',
screen: '50-55"',
budget: 1000,
usage: [],
features: [],
lighting: ''
};
// Update progress bar
function updateProgress() {
const progressPercent = (currentStep / totalSteps) * 100;
progressBar.style.width = `${progressPercent}%`;
progressText.textContent = `${Math.round(progressPercent)}% complete`;
currentStepText.textContent = currentStep;
}
// Next step
nextButtons.forEach(button => {
button.addEventListener('click', function() {
if (currentStep < totalSteps) {
document.getElementById(`step-${currentStep}`).classList.add('hidden');
currentStep++;
document.getElementById(`step-${currentStep}`).classList.remove('hidden');
updateProgress();
// Add fade-in animation
stepContainer.classList.remove('fade-in');
void stepContainer.offsetWidth; // Trigger reflow
stepContainer.classList.add('fade-in');
// Scroll to top of step
window.scrollTo({
top: stepContainer.offsetTop - 100,
behavior: 'smooth'
});
}
});
});
// Previous step
prevButtons.forEach(button => {
button.addEventListener('click', function() {
if (currentStep > 1) {
document.getElementById(`step-${currentStep}`).classList.add('hidden');
currentStep--;
document.getElementById(`step-${currentStep}`).classList.remove('hidden');
updateProgress();
// Add fade-in animation
stepContainer.classList.remove('fade-in');
void stepContainer.offsetWidth; // Trigger reflow
stepContainer.classList.add('fade-in');
// Scroll to top of step
window.scrollTo({
top: stepContainer.offsetTop - 100,
behavior: 'smooth'
});
}
});
});
// Show results
showResultsButton.addEventListener('click', function() {
document.getElementById(`step-${currentStep}`).classList.add('hidden');
resultsSection.classList.remove('hidden');
progressBar.style.width = '100%';
progressText.textContent = '100% complete';
currentStepText.textContent = 'Complete!';
// Scroll to top of results
window.scrollTo({
top: resultsSection.offsetTop - 100,
behavior: 'smooth'
});
// Update preferences display
document.getElementById('pref-size').textContent = userPrefs.size;
document.getElementById('pref-screen').textContent = userPrefs.screen;
document.getElementById('pref-budget').textContent = `$${userPrefs.budget.toLocaleString()}`;
document.getElementById('pref-usage').textContent = userPrefs.usage.length > 0 ?
userPrefs.usage.map(u => {
if (u === 'movies') return 'Movies';
if (u === 'gaming') return 'Gaming';
if (u === 'sports') return 'Sports';
if (u === 'streaming') return 'Streaming';
return u;
}).join(', ') : 'Not specified';
document.getElementById('pref-features').textContent = userPrefs.features.length > 0 ?
userPrefs.features.map(f => {
if (f === '4k') return '4K';
if (f === 'hdr') return 'HDR';
if (f === 'smart') return 'Smart TV';
if (f === 'oled') return 'OLED';
if (f === 'voice') return 'Voice Control';
return f;
}).join(', ') : 'Not specified';
document.getElementById('pref-lighting').textContent = userPrefs.lighting || 'Not specified';
});
// Restart wizard
restartButton.addEventListener('click', function() {
resultsSection.classList.add('hidden');
currentStep = 1;
document.getElementById('step-1').classList.remove('hidden');
updateProgress();
currentStepText.textContent = currentStep;
// Reset user preferences
userPrefs.size = 'Living room';
userPrefs.screen = '50-55"';
userPrefs.budget = 1000;
userPrefs.usage = [];
userPrefs.features = [];
userPrefs.lighting = '';
// Reset UI selections
document.querySelectorAll('.size-option, .usage-option, .lighting-option, .budget-preset').forEach(option => {
option.classList.remove('selected-card', 'border-blue-500', 'bg-blue-50');
option.classList.add('border-gray-100');
// Hide checkmarks
const checkmark = option.querySelector('.checkmark');
if (checkmark) checkmark.classList.add('hidden');
});
document.getElementById('budget-slider').value = 1000;
document.getElementById('budget-value').textContent = '$1,000';
document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
checkbox.checked = false;
// Hide checkmarks in feature checkboxes
const container = checkbox.closest('.feature-checkbox');
if (container) {
const checkmark = container.querySelector('.checkmark');
if (checkmark) checkmark.classList.add('hidden');
}
});
// Scroll to top
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
// Screen size selection
document.querySelectorAll('.size-option').forEach(option => {
option.addEventListener('click', function() {
document.querySelectorAll('.size-option').forEach(opt => {
opt.classList.remove('selected-card', 'border-blue-500', 'bg-blue-50');
opt.classList.add('border-gray-100');
opt.querySelector('.checkmark').classList.add('hidden');
});
this.classList.remove('border-gray-100');
this.classList.add('selected-card', 'border-blue-500', 'bg-blue-50');
this.querySelector('.checkmark').classList.remove('hidden');
const size = this.getAttribute('data-value');
if (size === '32') {
userPrefs.size = 'Bedroom';
userPrefs.screen = '32" or under';
}
else if (size === '43') {
userPrefs.size = 'Small living space';
userPrefs.screen = '40-43"';
}
else if (size === '55') {
userPrefs.size = 'Living room';
userPrefs.screen = '50-55"';
}
else if (size === '65') {
userPrefs.size = 'Home theater';
userPrefs.screen = '65"+';
}
});
});
// Budget slider
const budgetSlider = document.getElementById('budget-slider');
const budgetValue = document.getElementById('budget-value');
budgetSlider.addEventListener('input', function() {
const value = parseInt(this.value);
userPrefs.budget = value;
// Format as currency
budgetValue.textContent = `$${value.toLocaleString()}`;
});
// Budget presets
document.querySelectorAll('.budget-preset').forEach(preset => {
preset.addEventListener('click', function() {
const value = parseInt(this.getAttribute('data-value'));
userPrefs.budget = value;
budgetSlider.value = value;
budgetValue.textContent = `$${value.toLocaleString()}`;
// Highlight selected preset
document.querySelectorAll('.budget-preset').forEach(p => {
p.classList.remove('border-blue-300', 'bg-blue-50');
p.classList.add('border-gray-200');
});
this.classList.remove('border-gray-200');
this.classList.add('border-blue-300', 'bg-blue-50');
});
});
// Usage selection
document.querySelectorAll('.usage-option').forEach(option => {
option.addEventListener('click', function() {
const value = this.getAttribute('data-value');
const index = userPrefs.usage.indexOf(value);
if (index === -1) {
userPrefs.usage.push(value);
this.classList.remove('border-gray-100');
this.classList.add('selected-card', 'border-blue-500', 'bg-blue-50');
this.querySelector('.checkmark').classList.remove('hidden');
} else {
userPrefs.usage.splice(index, 1);
this.classList.remove('selected-card', 'border-blue-500', 'bg-blue-50');
this.classList.add('border-gray-100');
this.querySelector('.checkmark').classList.add('hidden');
}
});
});
// Features selection
document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
checkbox.addEventListener('change', function() {
const id = this.id.replace('feature-', '');
const container = this.closest('.feature-checkbox');
const checkmark = container.querySelector('.checkmark');
if (this.checked) {
if (!userPrefs.features.includes(id)) {
userPrefs.features.push(id);
}
container.classList.add('border-blue-500', 'bg-blue-50');
checkmark.classList.remove('hidden');
} else {
const index = userPrefs.features.indexOf(id);
if (index !== -1) {
userPrefs.features.splice(index, 1);
}
container.classList.remove('border-blue-500', 'bg-blue-50');
checkmark.classList.add('hidden');
}
});
});
// Lighting selection
document.querySelectorAll('.lighting-option').forEach(option => {
option.addEventListener('click', function() {
document.querySelectorAll('.lighting-option').forEach(opt => {
opt.classList.remove('selected-card', 'border-blue-500', 'bg-blue-50');
opt.classList.add('border-gray-100');
opt.querySelector('.checkmark').classList.add('hidden');
});
this.classList.remove('border-gray-100');
this.classList.add('selected-card', 'border-blue-500', 'bg-blue-50');
this.querySelector('.checkmark').classList.remove('hidden');
const lighting = this.getAttribute('data-value');
if (lighting === 'bright') userPrefs.lighting = 'Lots of sunlight';
else if (lighting === 'moderate') userPrefs.lighting = 'Normal lighting';
else if (lighting === 'dark') userPrefs.lighting = 'Dim or dark';
else if (lighting === 'variable') userPrefs.lighting = 'Changes often';
});
});
// Initialize first step
document.querySelector('.size-option[data-value="55"]').click();
});
</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=LukasBe/tv-matchmaker" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>