Hugging Face's logo

Spaces:
LukasBe
/
tv-matchmaker
Running

App Files Community
LukasBe commited on
Commit
dca515c
·
verified ·
1 Parent(s): 70553f1

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1114 -19
  3. prompts.txt +3 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Tv Matchmaker
3
- emoji: 👀
4
- colorFrom: yellow
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: tv-matchmaker
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1114 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Amazon TV Matchmaker</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <link rel="preconnect" href="https://fonts.googleapis.com">
10
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
12
+ <style>
13
+ body {
14
+ font-family: 'Inter', sans-serif;
15
+ background-color: #f8fafc;
16
+ }
17
+
18
+ .glass-card {
19
+ background: rgba(255, 255, 255, 0.85);
20
+ backdrop-filter: blur(12px);
21
+ -webkit-backdrop-filter: blur(12px);
22
+ border: 1px solid rgba(255, 255, 255, 0.18);
23
+ }
24
+
25
+ .progress-bar {
26
+ height: 8px;
27
+ transition: width 0.6s cubic-bezier(0.65, 0, 0.35, 1);
28
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6);
29
+ }
30
+
31
+ .card-hover {
32
+ transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
33
+ }
34
+
35
+ .card-hover:hover {
36
+ transform: translateY(-8px);
37
+ box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
38
+ }
39
+
40
+ .fade-in {
41
+ animation: fadeIn 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
42
+ }
43
+
44
+ @keyframes fadeIn {
45
+ from { opacity: 0; transform: translateY(20px); }
46
+ to { opacity: 1; transform: translateY(0); }
47
+ }
48
+
49
+ .feature-icon {
50
+ width: 48px;
51
+ height: 48px;
52
+ display: flex;
53
+ align-items: center;
54
+ justify-content: center;
55
+ border-radius: 12px;
56
+ margin-right: 16px;
57
+ }
58
+
59
+ .option-card {
60
+ transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
61
+ border-radius: 16px;
62
+ }
63
+
64
+ .option-card:hover {
65
+ transform: scale(1.03);
66
+ }
67
+
68
+ .selected-card {
69
+ border: 2px solid #3b82f6;
70
+ box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.2);
71
+ }
72
+
73
+ .gradient-text {
74
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6);
75
+ -webkit-background-clip: text;
76
+ background-clip: text;
77
+ color: transparent;
78
+ }
79
+
80
+ .budget-slider {
81
+ -webkit-appearance: none;
82
+ width: 100%;
83
+ height: 8px;
84
+ border-radius: 4px;
85
+ background: linear-gradient(90deg, #e0e7ff, #3b82f6);
86
+ }
87
+
88
+ .budget-slider::-webkit-slider-thumb {
89
+ -webkit-appearance: none;
90
+ width: 24px;
91
+ height: 24px;
92
+ border-radius: 50%;
93
+ background: #3b82f6;
94
+ cursor: pointer;
95
+ box-shadow: 0 4px 6px rgba(59, 130, 246, 0.3);
96
+ border: 3px solid white;
97
+ }
98
+
99
+ .pulse {
100
+ animation: pulse 2s infinite;
101
+ }
102
+
103
+ @keyframes pulse {
104
+ 0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }
105
+ 70% { box-shadow: 0 0 0 12px rgba(59, 130, 246, 0); }
106
+ 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
107
+ }
108
+
109
+ .checkmark {
110
+ display: inline-block;
111
+ width: 22px;
112
+ height: 22px;
113
+ background-color: #10b981;
114
+ color: white;
115
+ border-radius: 50%;
116
+ text-align: center;
117
+ line-height: 22px;
118
+ margin-right: 8px;
119
+ font-size: 12px;
120
+ }
121
+ </style>
122
+ </head>
123
+ <body class="bg-gradient-to-br from-gray-50 to-blue-50 min-h-screen">
124
+ <!-- Floating Navigation -->
125
+ <nav class="fixed top-0 left-0 right-0 glass-card shadow-sm z-50">
126
+ <div class="container mx-auto px-6 py-3 flex items-center justify-between">
127
+ <div class="flex items-center space-x-3">
128
+ <div class="bg-gradient-to-r from-blue-600 to-blue-800 text-white p-2 rounded-lg">
129
+ <i class="fab fa-amazon text-2xl"></i>
130
+ </div>
131
+ <span class="text-xl font-bold text-gray-800">TV Matchmaker</span>
132
+ </div>
133
+ <div class="hidden md:flex items-center space-x-8">
134
+ <a href="#" class="text-gray-700 hover:text-blue-600 transition font-medium">Home</a>
135
+ <a href="#" class="text-gray-700 hover:text-blue-600 transition font-medium">TVs</a>
136
+ <a href="#" class="text-gray-700 hover:text-blue-600 transition font-medium">Deals</a>
137
+ <a href="#" class="text-gray-700 hover:text-blue-600 transition font-medium">Support</a>
138
+ </div>
139
+ <div class="flex items-center space-x-5">
140
+ <button class="p-2 rounded-full hover:bg-gray-100 transition text-gray-600 hover:text-blue-600">
141
+ <i class="fas fa-search"></i>
142
+ </button>
143
+ <button class="p-2 rounded-full hover:bg-gray-100 transition text-gray-600 hover:text-blue-600">
144
+ <i class="fas fa-user"></i>
145
+ </button>
146
+ <button class="p-2 rounded-full hover:bg-gray-100 transition text-gray-600 hover:text-blue-600 relative">
147
+ <i class="fas fa-shopping-cart"></i>
148
+ <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>
149
+ </button>
150
+ </div>
151
+ </div>
152
+ </nav>
153
+
154
+ <!-- Main Content -->
155
+ <main class="container mx-auto px-4 py-24">
156
+ <!-- Wizard Header -->
157
+ <div class="glass-card rounded-2xl shadow-xl p-8 mb-10 max-w-4xl mx-auto">
158
+ <div class="text-center mb-6">
159
+ <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>
160
+ <h1 class="text-4xl font-bold text-gray-900 mb-3">Tell us about your <span class="gradient-text">dream TV experience</span></h1>
161
+ <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>
162
+ </div>
163
+
164
+ <div class="mb-6">
165
+ <div class="flex justify-between mb-3">
166
+ <span class="text-sm font-medium text-gray-700">Step <span id="current-step">1</span> of 5</span>
167
+ <span class="text-sm font-medium text-blue-600" id="progress-text">20% complete</span>
168
+ </div>
169
+ <div class="w-full bg-gray-200 rounded-full h-2.5 overflow-hidden">
170
+ <div class="progress-bar h-2.5 rounded-full" style="width: 20%" id="progress-bar"></div>
171
+ </div>
172
+ </div>
173
+ </div>
174
+
175
+ <!-- Wizard Steps -->
176
+ <div class="glass-card rounded-2xl shadow-xl p-8 mb-10 max-w-4xl mx-auto fade-in" id="step-container">
177
+ <!-- Step 1 - Screen Size -->
178
+ <div class="step" id="step-1">
179
+ <div class="mb-8">
180
+ <h2 class="text-2xl font-bold text-gray-900 mb-2">Where will your new TV be placed?</h2>
181
+ <p class="text-gray-600">This helps us suggest the right screen size for your space</p>
182
+ </div>
183
+
184
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-5 mb-10">
185
+ <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">
186
+ <div class="flex items-start">
187
+ <div class="feature-icon bg-purple-100 text-purple-600">
188
+ <i class="fas fa-bed text-xl"></i>
189
+ </div>
190
+ <div>
191
+ <span class="font-semibold text-lg block">Bedroom</span>
192
+ <span class="text-gray-500">Smaller screen (32" or under)</span>
193
+ <div class="mt-3 text-blue-600 font-medium flex items-center">
194
+ <span class="checkmark hidden"><i class="fas fa-check"></i></span>
195
+ <span>Great for cozy viewing</span>
196
+ </div>
197
+ </div>
198
+ </div>
199
+ </button>
200
+ <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">
201
+ <div class="flex items-start">
202
+ <div class="feature-icon bg-blue-100 text-blue-600">
203
+ <i class="fas fa-home text-xl"></i>
204
+ </div>
205
+ <div>
206
+ <span class="font-semibold text-lg block">Small living space</span>
207
+ <span class="text-gray-500">Medium screen (40-43")</span>
208
+ <div class="mt-3 text-blue-600 font-medium flex items-center">
209
+ <span class="checkmark hidden"><i class="fas fa-check"></i></span>
210
+ <span>Ideal for apartments</span>
211
+ </div>
212
+ </div>
213
+ </div>
214
+ </button>
215
+ <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">
216
+ <div class="flex items-start">
217
+ <div class="feature-icon bg-green-100 text-green-600">
218
+ <i class="fas fa-couch text-xl"></i>
219
+ </div>
220
+ <div>
221
+ <span class="font-semibold text-lg block">Living room</span>
222
+ <span class="text-gray-500">Larger screen (50-55")</span>
223
+ <div class="mt-3 text-blue-600 font-medium flex items-center">
224
+ <span class="checkmark hidden"><i class="fas fa-check"></i></span>
225
+ <span>Perfect for family viewing</span>
226
+ </div>
227
+ </div>
228
+ </div>
229
+ </button>
230
+ <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">
231
+ <div class="flex items-start">
232
+ <div class="feature-icon bg-red-100 text-red-600">
233
+ <i class="fas fa-theater-masks text-xl"></i>
234
+ </div>
235
+ <div>
236
+ <span class="font-semibold text-lg block">Home theater</span>
237
+ <span class="text-gray-500">Extra large screen (65"+)</span>
238
+ <div class="mt-3 text-blue-600 font-medium flex items-center">
239
+ <span class="checkmark hidden"><i class="fas fa-check"></i></span>
240
+ <span>Cinematic experience</span>
241
+ </div>
242
+ </div>
243
+ </div>
244
+ </button>
245
+ </div>
246
+
247
+ <div class="flex justify-between pt-4 border-t border-gray-100">
248
+ <button class="px-8 py-3 text-gray-600 rounded-lg hover:bg-gray-50 transition font-medium" disabled>
249
+ <i class="fas fa-chevron-left mr-2"></i> Back
250
+ </button>
251
+ <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">
252
+ Next <i class="fas fa-chevron-right ml-2"></i>
253
+ </button>
254
+ </div>
255
+ </div>
256
+
257
+ <!-- Step 2 - Budget -->
258
+ <div class="step hidden" id="step-2">
259
+ <div class="mb-8">
260
+ <h2 class="text-2xl font-bold text-gray-900 mb-2">What's your comfortable budget range?</h2>
261
+ <p class="text-gray-600">We'll show you the best options that fit your price point</p>
262
+ </div>
263
+
264
+ <div class="mb-10">
265
+ <div class="flex justify-between mb-3">
266
+ <span class="text-sm font-medium text-gray-700">More affordable</span>
267
+ <span class="text-sm font-medium text-gray-700">Premium options</span>
268
+ </div>
269
+ <input type="range" min="300" max="5000" value="1000" step="100" class="budget-slider mb-6" id="budget-slider">
270
+ <div class="text-center">
271
+ <span class="text-3xl font-bold text-blue-600" id="budget-value">$1,000</span>
272
+ <span class="text-sm text-gray-500 block mt-1">Typical price for quality TVs</span>
273
+ </div>
274
+
275
+ <div class="grid grid-cols-4 gap-4 mt-8">
276
+ <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">
277
+ <span class="block">$500</span>
278
+ <span class="text-gray-500 text-xs">Budget</span>
279
+ </button>
280
+ <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">
281
+ <span class="block">$1,000</span>
282
+ <span class="text-gray-500 text-xs">Standard</span>
283
+ </button>
284
+ <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">
285
+ <span class="block">$2,000</span>
286
+ <span class="text-gray-500 text-xs">Premium</span>
287
+ </button>
288
+ <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">
289
+ <span class="block">$3,000+</span>
290
+ <span class="text-gray-500 text-xs">High-end</span>
291
+ </button>
292
+ </div>
293
+ </div>
294
+
295
+ <div class="flex justify-between pt-4 border-t border-gray-100">
296
+ <button class="px-8 py-3 text-gray-600 rounded-lg hover:bg-gray-50 transition font-medium prev-step">
297
+ <i class="fas fa-chevron-left mr-2"></i> Back
298
+ </button>
299
+ <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">
300
+ Next <i class="fas fa-chevron-right ml-2"></i>
301
+ </button>
302
+ </div>
303
+ </div>
304
+
305
+ <!-- Step 3 - Usage -->
306
+ <div class="step hidden" id="step-3">
307
+ <div class="mb-8">
308
+ <h2 class="text-2xl font-bold text-gray-900 mb-2">What do you love to watch most?</h2>
309
+ <p class="text-gray-600">We'll optimize for the best picture quality for your favorite content</p>
310
+ </div>
311
+
312
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-5 mb-10">
313
+ <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">
314
+ <div class="flex items-start">
315
+ <div class="feature-icon bg-purple-100 text-purple-600">
316
+ <i class="fas fa-film text-xl"></i>
317
+ </div>
318
+ <div>
319
+ <span class="font-semibold text-lg block">Movies & shows</span>
320
+ <span class="text-gray-500">For cinematic experiences at home</span>
321
+ <div class="mt-3 text-blue-600 font-medium flex items-center">
322
+ <span class="checkmark hidden"><i class="fas fa-check"></i></span>
323
+ <span>Deep blacks, rich colors</span>
324
+ </div>
325
+ </div>
326
+ </div>
327
+ </button>
328
+ <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">
329
+ <div class="flex items-start">
330
+ <div class="feature-icon bg-green-100 text-green-600">
331
+ <i class="fas fa-gamepad text-xl"></i>
332
+ </div>
333
+ <div>
334
+ <span class="font-semibold text-lg block">Video games</span>
335
+ <span class="text-gray-500">Smooth gameplay with fast response</span>
336
+ <div class="mt-3 text-blue-600 font-medium flex items-center">
337
+ <span class="checkmark hidden"><i class="fas fa-check"></i></span>
338
+ <span>Low input lag, high refresh</span>
339
+ </div>
340
+ </div>
341
+ </div>
342
+ </button>
343
+ <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">
344
+ <div class="flex items-start">
345
+ <div class="feature-icon bg-red-100 text-red-600">
346
+ <i class="fas fa-running text-xl"></i>
347
+ </div>
348
+ <div>
349
+ <span class="font-semibold text-lg block">Sports & action</span>
350
+ <span class="text-gray-500">Clear motion for fast-paced content</span>
351
+ <div class="mt-3 text-blue-600 font-medium flex items-center">
352
+ <span class="checkmark hidden"><i class="fas fa-check"></i></span>
353
+ <span>Motion smoothing, clarity</span>
354
+ </div>
355
+ </div>
356
+ </div>
357
+ </button>
358
+ <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">
359
+ <div class="flex items-start">
360
+ <div class="feature-icon bg-blue-100 text-blue-600">
361
+ <i class="fas fa-play-circle text-xl"></i>
362
+ </div>
363
+ <div>
364
+ <span class="font-semibold text-lg block">Streaming services</span>
365
+ <span class="text-gray-500">Built-in apps for Netflix, Prime, etc.</span>
366
+ <div class="mt-3 text-blue-600 font-medium flex items-center">
367
+ <span class="checkmark hidden"><i class="fas fa-check"></i></span>
368
+ <span>Smart platform included</span>
369
+ </div>
370
+ </div>
371
+ </div>
372
+ </button>
373
+ </div>
374
+
375
+ <div class="flex justify-between pt-4 border-t border-gray-100">
376
+ <button class="px-8 py-3 text-gray-600 rounded-lg hover:bg-gray-50 transition font-medium prev-step">
377
+ <i class="fas fa-chevron-left mr-2"></i> Back
378
+ </button>
379
+ <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">
380
+ Next <i class="fas fa-chevron-right ml-2"></i>
381
+ </button>
382
+ </div>
383
+ </div>
384
+
385
+ <!-- Step 4 - Features -->
386
+ <div class="step hidden" id="step-4">
387
+ <div class="mb-8">
388
+ <h2 class="text-2xl font-bold text-gray-900 mb-2">Which features would enhance your experience?</h2>
389
+ <p class="text-gray-600">Select all that matter to you</p>
390
+ </div>
391
+
392
+ <div class="space-y-3 mb-10">
393
+ <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">
394
+ <input type="checkbox" id="feature-4k" class="mt-1 h-5 w-5 text-blue-600 rounded focus:ring-blue-500">
395
+ <div class="ml-4">
396
+ <span class="font-semibold text-gray-900">Super sharp picture</span>
397
+ <span class="block text-gray-500 mt-1">4K resolution for incredible detail</span>
398
+ <div class="mt-2 text-blue-600 font-medium flex items-center">
399
+ <span class="checkmark hidden"><i class="fas fa-check"></i></span>
400
+ <span>4x sharper than HD</span>
401
+ </div>
402
+ </div>
403
+ </label>
404
+
405
+ <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">
406
+ <input type="checkbox" id="feature-hdr" class="mt-1 h-5 w-5 text-blue-600 rounded focus:ring-blue-500">
407
+ <div class="ml-4">
408
+ <span class="font-semibold text-gray-900">Brighter, more vivid colors</span>
409
+ <span class="block text-gray-500 mt-1">HDR for lifelike images</span>
410
+ <div class="mt-2 text-blue-600 font-medium flex items-center">
411
+ <span class="checkmark hidden"><i class="fas fa-check"></i></span>
412
+ <span>Wider color range</span>
413
+ </div>
414
+ </div>
415
+ </label>
416
+
417
+ <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">
418
+ <input type="checkbox" id="feature-smart" class="mt-1 h-5 w-5 text-blue-600 rounded focus:ring-blue-500">
419
+ <div class="ml-4">
420
+ <span class="font-semibold text-gray-900">Built-in streaming</span>
421
+ <span class="block text-gray-500 mt-1">Watch Netflix, Prime Video and more</span>
422
+ <div class="mt-2 text-blue-600 font-medium flex items-center">
423
+ <span class="checkmark hidden"><i class="fas fa-check"></i></span>
424
+ <span>No extra devices needed</span>
425
+ </div>
426
+ </div>
427
+ </label>
428
+
429
+ <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">
430
+ <input type="checkbox" id="feature-oled" class="mt-1 h-5 w-5 text-blue-600 rounded focus:ring-blue-500">
431
+ <div class="ml-4">
432
+ <span class="font-semibold text-gray-900">Perfect black levels</span>
433
+ <span class="block text-gray-500 mt-1">OLED technology for dark room viewing</span>
434
+ <div class="mt-2 text-blue-600 font-medium flex items-center">
435
+ <span class="checkmark hidden"><i class="fas fa-check"></i></span>
436
+ <span>Infinite contrast ratio</span>
437
+ </div>
438
+ </div>
439
+ </label>
440
+
441
+ <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">
442
+ <input type="checkbox" id="feature-voice" class="mt-1 h-5 w-5 text-blue-600 rounded focus:ring-blue-500">
443
+ <div class="ml-4">
444
+ <span class="font-semibold text-gray-900">Voice control</span>
445
+ <span class="block text-gray-500 mt-1">Use Alexa or Google Assistant</span>
446
+ <div class="mt-2 text-blue-600 font-medium flex items-center">
447
+ <span class="checkmark hidden"><i class="fas fa-check"></i></span>
448
+ <span>Hands-free operation</span>
449
+ </div>
450
+ </div>
451
+ </label>
452
+ </div>
453
+
454
+ <div class="flex justify-between pt-4 border-t border-gray-100">
455
+ <button class="px-8 py-3 text-gray-600 rounded-lg hover:bg-gray-50 transition font-medium prev-step">
456
+ <i class="fas fa-chevron-left mr-2"></i> Back
457
+ </button>
458
+ <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">
459
+ Next <i class="fas fa-chevron-right ml-2"></i>
460
+ </button>
461
+ </div>
462
+ </div>
463
+
464
+ <!-- Step 5 - Room Lighting -->
465
+ <div class="step hidden" id="step-5">
466
+ <div class="mb-8">
467
+ <h2 class="text-2xl font-bold text-gray-900 mb-2">How's the lighting in your room?</h2>
468
+ <p class="text-gray-600">This helps us suggest the right screen brightness and anti-glare features</p>
469
+ </div>
470
+
471
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-5 mb-10">
472
+ <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">
473
+ <div class="flex items-start">
474
+ <div class="feature-icon bg-yellow-100 text-yellow-600">
475
+ <i class="fas fa-sun text-xl"></i>
476
+ </div>
477
+ <div>
478
+ <span class="font-semibold text-lg block">Lots of sunlight</span>
479
+ <span class="text-gray-500">Big windows or very bright lights</span>
480
+ <div class="mt-3 text-blue-600 font-medium flex items-center">
481
+ <span class="checkmark hidden"><i class="fas fa-check"></i></span>
482
+ <span>Anti-glare recommended</span>
483
+ </div>
484
+ </div>
485
+ </div>
486
+ </button>
487
+ <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">
488
+ <div class="flex items-start">
489
+ <div class="feature-icon bg-orange-100 text-orange-600">
490
+ <i class="fas fa-lightbulb text-xl"></i>
491
+ </div>
492
+ <div>
493
+ <span class="font-semibold text-lg block">Normal lighting</span>
494
+ <span class="text-gray-500">Some lamps or natural light</span>
495
+ <div class="mt-3 text-blue-600 font-medium flex items-center">
496
+ <span class="checkmark hidden"><i class="fas fa-check"></i></span>
497
+ <span>Standard brightness</span>
498
+ </div>
499
+ </div>
500
+ </div>
501
+ </button>
502
+ <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">
503
+ <div class="flex items-start">
504
+ <div class="feature-icon bg-indigo-100 text-indigo-600">
505
+ <i class="fas fa-moon text-xl"></i>
506
+ </div>
507
+ <div>
508
+ <span class="font-semibold text-lg block">Dim or dark</span>
509
+ <span class="text-gray-500">Home theater or low lighting</span>
510
+ <div class="mt-3 text-blue-600 font-medium flex items-center">
511
+ <span class="checkmark hidden"><i class="fas fa-check"></i></span>
512
+ <span>Deep blacks important</span>
513
+ </div>
514
+ </div>
515
+ </div>
516
+ </button>
517
+ <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">
518
+ <div class="flex items-start">
519
+ <div class="feature-icon bg-blue-100 text-blue-600">
520
+ <i class="fas fa-adjust text-xl"></i>
521
+ </div>
522
+ <div>
523
+ <span class="font-semibold text-lg block">Changes often</span>
524
+ <span class="text-gray-500">Bright during day, dark at night</span>
525
+ <div class="mt-3 text-blue-600 font-medium flex items-center">
526
+ <span class="checkmark hidden"><i class="fas fa-check"></i></span>
527
+ <span>Adaptive brightness</span>
528
+ </div>
529
+ </div>
530
+ </div>
531
+ </button>
532
+ </div>
533
+
534
+ <div class="flex justify-between pt-4 border-t border-gray-100">
535
+ <button class="px-8 py-3 text-gray-600 rounded-lg hover:bg-gray-50 transition font-medium prev-step">
536
+ <i class="fas fa-chevron-left mr-2"></i> Back
537
+ </button>
538
+ <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">
539
+ Find My Perfect TV <i class="fas fa-tv ml-2"></i>
540
+ </button>
541
+ </div>
542
+ </div>
543
+
544
+ <!-- Results -->
545
+ <div class="step hidden" id="results">
546
+ <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8">
547
+ <div>
548
+ <h2 class="text-3xl font-bold text-gray-900 mb-1">Your Personalized TV Matches</h2>
549
+ <p class="text-gray-600">We've selected these based on your preferences</p>
550
+ </div>
551
+ <div class="mt-4 md:mt-0 flex items-center">
552
+ <span class="text-sm text-gray-600 mr-3">Sort by:</span>
553
+ <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">
554
+ <option>Best matches</option>
555
+ <option>Price: Low to High</option>
556
+ <option>Price: High to Low</option>
557
+ <option>Top rated</option>
558
+ <option>New arrivals</option>
559
+ </select>
560
+ </div>
561
+ </div>
562
+
563
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-10">
564
+ <!-- TV Card 1 -->
565
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover">
566
+ <div class="relative">
567
+ <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">
568
+ <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>
569
+ <div class="absolute top-4 right-4 bg-white rounded-full p-2 shadow-md cursor-pointer hover:bg-gray-100 transition">
570
+ <i class="far fa-heart text-gray-600 hover:text-red-500"></i>
571
+ </div>
572
+ <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">
573
+ <i class="fas fa-bolt"></i>
574
+ </div>
575
+ </div>
576
+ <div class="p-5">
577
+ <h3 class="font-bold text-xl mb-2 text-gray-900">Sony Bravia XR A80K 55" OLED TV</h3>
578
+ <div class="flex items-center mb-3">
579
+ <div class="flex text-yellow-400">
580
+ <i class="fas fa-star"></i>
581
+ <i class="fas fa-star"></i>
582
+ <i class="fas fa-star"></i>
583
+ <i class="fas fa-star"></i>
584
+ <i class="fas fa-star-half-alt"></i>
585
+ </div>
586
+ <span class="text-sm text-gray-600 ml-2">(2,487 reviews)</span>
587
+ </div>
588
+ <div class="mb-4">
589
+ <span class="text-2xl font-bold text-gray-900">$1,398.00</span>
590
+ <span class="text-sm text-gray-500 line-through ml-2">$1,599.99</span>
591
+ <span class="text-xs bg-red-100 text-red-800 font-medium ml-2 px-2 py-1 rounded-full">13% off</span>
592
+ </div>
593
+ <div class="text-sm text-gray-600 space-y-2 mb-5">
594
+ <div class="flex items-start">
595
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
596
+ <span>Perfect for movies with OLED contrast</span>
597
+ </div>
598
+ <div class="flex items-start">
599
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
600
+ <span>Great for dark rooms</span>
601
+ </div>
602
+ <div class="flex items-start">
603
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
604
+ <span>Includes Google TV with voice control</span>
605
+ </div>
606
+ </div>
607
+ <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">
608
+ <i class="fas fa-shopping-cart mr-2"></i> Add to Cart
609
+ </button>
610
+ </div>
611
+ </div>
612
+
613
+ <!-- TV Card 2 -->
614
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover">
615
+ <div class="relative">
616
+ <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">
617
+ <div class="absolute top-4 right-4 bg-white rounded-full p-2 shadow-md cursor-pointer hover:bg-gray-100 transition">
618
+ <i class="far fa-heart text-gray-600 hover:text-red-500"></i>
619
+ </div>
620
+ <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">
621
+ <i class="fas fa-bolt"></i>
622
+ </div>
623
+ </div>
624
+ <div class="p-5">
625
+ <h3 class="font-bold text-xl mb-2 text-gray-900">LG C2 Series 55" OLED TV</h3>
626
+ <div class="flex items-center mb-3">
627
+ <div class="flex text-yellow-400">
628
+ <i class="fas fa-star"></i>
629
+ <i class="fas fa-star"></i>
630
+ <i class="fas fa-star"></i>
631
+ <i class="fas fa-star"></i>
632
+ <i class="fas fa-star"></i>
633
+ </div>
634
+ <span class="text-sm text-gray-600 ml-2">(5,213 reviews)</span>
635
+ </div>
636
+ <div class="mb-4">
637
+ <span class="text-2xl font-bold text-gray-900">$1,296.99</span>
638
+ <span class="text-sm text-gray-500 line-through ml-2">$1,499.99</span>
639
+ <span class="text-xs bg-red-100 text-red-800 font-medium ml-2 px-2 py-1 rounded-full">14% off</span>
640
+ </div>
641
+ <div class="text-sm text-gray-600 space-y-2 mb-5">
642
+ <div class="flex items-start">
643
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
644
+ <span>Excellent for gaming with 120Hz refresh</span>
645
+ </div>
646
+ <div class="flex items-start">
647
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
648
+ <span>Great HDR performance</span>
649
+ </div>
650
+ <div class="flex items-start">
651
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
652
+ <span>WebOS smart platform included</span>
653
+ </div>
654
+ </div>
655
+ <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">
656
+ <i class="fas fa-shopping-cart mr-2"></i> Add to Cart
657
+ </button>
658
+ </div>
659
+ </div>
660
+
661
+ <!-- TV Card 3 -->
662
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover">
663
+ <div class="relative">
664
+ <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">
665
+ <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>
666
+ <div class="absolute top-4 right-4 bg-white rounded-full p-2 shadow-md cursor-pointer hover:bg-gray-100 transition">
667
+ <i class="far fa-heart text-gray-600 hover:text-red-500"></i>
668
+ </div>
669
+ <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">
670
+ <i class="fas fa-bolt"></i>
671
+ </div>
672
+ </div>
673
+ <div class="p-5">
674
+ <h3 class="font-bold text-xl mb-2 text-gray-900">Samsung QN90B Neo QLED 55" TV</h3>
675
+ <div class="flex items-center mb-3">
676
+ <div class="flex text-yellow-400">
677
+ <i class="fas fa-star"></i>
678
+ <i class="fas fa-star"></i>
679
+ <i class="fas fa-star"></i>
680
+ <i class="fas fa-star"></i>
681
+ <i class="far fa-star"></i>
682
+ </div>
683
+ <span class="text-sm text-gray-600 ml-2">(1,842 reviews)</span>
684
+ </div>
685
+ <div class="mb-4">
686
+ <span class="text-2xl font-bold text-gray-900">$1,497.99</span>
687
+ <span class="text-sm text-gray-500 line-through ml-2">$1,799.99</span>
688
+ <span class="text-xs bg-red-100 text-red-800 font-medium ml-2 px-2 py-1 rounded-full">17% off</span>
689
+ </div>
690
+ <div class="text-sm text-gray-600 space-y-2 mb-5">
691
+ <div class="flex items-start">
692
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
693
+ <span>Bright room performance</span>
694
+ </div>
695
+ <div class="flex items-start">
696
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
697
+ <span>Great for sports with anti-glare</span>
698
+ </div>
699
+ <div class="flex items-start">
700
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
701
+ <span>Samsung Tizen OS with Alexa</span>
702
+ </div>
703
+ </div>
704
+ <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">
705
+ <i class="fas fa-shopping-cart mr-2"></i> Add to Cart
706
+ </button>
707
+ </div>
708
+ </div>
709
+ </div>
710
+
711
+ <div class="bg-blue-50 border border-blue-100 rounded-xl p-6 mb-10">
712
+ <h3 class="font-bold text-xl text-blue-800 mb-4">Your TV Preferences</h3>
713
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
714
+ <div class="bg-white rounded-xl p-4 shadow-sm">
715
+ <span class="block text-sm text-gray-500 mb-1">Room placement</span>
716
+ <span class="font-semibold text-lg" id="pref-size">Living room</span>
717
+ </div>
718
+ <div class="bg-white rounded-xl p-4 shadow-sm">
719
+ <span class="block text-sm text-gray-500 mb-1">Your budget</span>
720
+ <span class="font-semibold text-lg" id="pref-budget">$1,000</span>
721
+ </div>
722
+ <div class="bg-white rounded-xl p-4 shadow-sm">
723
+ <span class="block text-sm text-gray-500 mb-1">Favorite content</span>
724
+ <span class="font-semibold text-lg" id="pref-usage">Movies, Gaming</span>
725
+ </div>
726
+ <div class="bg-white rounded-xl p-4 shadow-sm">
727
+ <span class="block text-sm text-gray-500 mb-1">Preferred features</span>
728
+ <span class="font-semibold text-lg" id="pref-features">4K, HDR, Smart TV</span>
729
+ </div>
730
+ <div class="bg-white rounded-xl p-4 shadow-sm">
731
+ <span class="block text-sm text-gray-500 mb-1">Room lighting</span>
732
+ <span class="font-semibold text-lg" id="pref-lighting">Moderate</span>
733
+ </div>
734
+ <div class="bg-white rounded-xl p-4 shadow-sm">
735
+ <span class="block text-sm text-gray-500 mb-1">Screen size</span>
736
+ <span class="font-semibold text-lg" id="pref-screen">50-55"</span>
737
+ </div>
738
+ </div>
739
+ </div>
740
+
741
+ <div class="flex justify-center">
742
+ <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">
743
+ <i class="fas fa-redo mr-2"></i> Start Over
744
+ </button>
745
+ </div>
746
+ </div>
747
+ </div>
748
+ </main>
749
+
750
+ <!-- Footer -->
751
+ <footer class="bg-gray-900 text-gray-300">
752
+ <div class="container mx-auto px-6 py-12">
753
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-10">
754
+ <div>
755
+ <h3 class="font-bold text-white text-lg mb-4">Get to Know Us</h3>
756
+ <ul class="space-y-3">
757
+ <li><a href="#" class="hover:text-white transition">About Us</a></li>
758
+ <li><a href="#" class="hover:text-white transition">Careers</a></li>
759
+ <li><a href="#" class="hover:text-white transition">Press Releases</a></li>
760
+ <li><a href="#" class="hover:text-white transition">Amazon Science</a></li>
761
+ </ul>
762
+ </div>
763
+ <div>
764
+ <h3 class="font-bold text-white text-lg mb-4">Make Money with Us</h3>
765
+ <ul class="space-y-3">
766
+ <li><a href="#" class="hover:text-white transition">Sell products</a></li>
767
+ <li><a href="#" class="hover:text-white transition">Become an Affiliate</a></li>
768
+ <li><a href="#" class="hover:text-white transition">Advertise Your Products</a></li>
769
+ <li><a href="#" class="hover:text-white transition">Self-Publish with Us</a></li>
770
+ </ul>
771
+ </div>
772
+ <div>
773
+ <h3 class="font-bold text-white text-lg mb-4">Payment Products</h3>
774
+ <ul class="space-y-3">
775
+ <li><a href="#" class="hover:text-white transition">Amazon Business Card</a></li>
776
+ <li><a href="#" class="hover:text-white transition">Shop with Points</a></li>
777
+ <li><a href="#" class="hover:text-white transition">Reload Your Balance</a></li>
778
+ <li><a href="#" class="hover:text-white transition">Amazon Currency Converter</a></li>
779
+ </ul>
780
+ </div>
781
+ <div>
782
+ <h3 class="font-bold text-white text-lg mb-4">Let Us Help You</h3>
783
+ <ul class="space-y-3">
784
+ <li><a href="#" class="hover:text-white transition">Your Account</a></li>
785
+ <li><a href="#" class="hover:text-white transition">Your Orders</a></li>
786
+ <li><a href="#" class="hover:text-white transition">Shipping Rates & Policies</a></li>
787
+ <li><a href="#" class="hover:text-white transition">Returns & Replacements</a></li>
788
+ <li><a href="#" class="hover:text-white transition">Help</a></li>
789
+ </ul>
790
+ </div>
791
+ </div>
792
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
793
+ <div class="flex items-center mb-6 md:mb-0">
794
+ <div class="bg-gradient-to-r from-blue-600 to-blue-800 text-white p-2 rounded-lg mr-3">
795
+ <i class="fab fa-amazon text-2xl"></i>
796
+ </div>
797
+ <span class="font-bold text-white text-xl">TV Matchmaker</span>
798
+ </div>
799
+ <div class="flex space-x-6">
800
+ <a href="#" class="text-gray-400 hover:text-white transition text-xl"><i class="fab fa-facebook-f"></i></a>
801
+ <a href="#" class="text-gray-400 hover:text-white transition text-xl"><i class="fab fa-twitter"></i></a>
802
+ <a href="#" class="text-gray-400 hover:text-white transition text-xl"><i class="fab fa-instagram"></i></a>
803
+ <a href="#" class="text-gray-400 hover:text-white transition text-xl"><i class="fab fa-youtube"></i></a>
804
+ </div>
805
+ </div>
806
+ <div class="mt-8 text-center text-sm text-gray-500">
807
+ <p>© 2023 Amazon TV Matchmaker. All rights reserved.</p>
808
+ </div>
809
+ </div>
810
+ </footer>
811
+
812
+ <script>
813
+ document.addEventListener('DOMContentLoaded', function() {
814
+ // Wizard navigation
815
+ const steps = document.querySelectorAll('.step');
816
+ const nextButtons = document.querySelectorAll('.next-step');
817
+ const prevButtons = document.querySelectorAll('.prev-step');
818
+ const showResultsButton = document.getElementById('show-results');
819
+ const restartButton = document.getElementById('restart-wizard');
820
+ const progressBar = document.getElementById('progress-bar');
821
+ const progressText = document.getElementById('progress-text');
822
+ const currentStepText = document.getElementById('current-step');
823
+ const stepContainer = document.getElementById('step-container');
824
+ const resultsSection = document.getElementById('results');
825
+
826
+ let currentStep = 1;
827
+ const totalSteps = 5;
828
+
829
+ // User preferences
830
+ const userPrefs = {
831
+ size: 'Living room',
832
+ screen: '50-55"',
833
+ budget: 1000,
834
+ usage: [],
835
+ features: [],
836
+ lighting: ''
837
+ };
838
+
839
+ // Update progress bar
840
+ function updateProgress() {
841
+ const progressPercent = (currentStep / totalSteps) * 100;
842
+ progressBar.style.width = `${progressPercent}%`;
843
+ progressText.textContent = `${Math.round(progressPercent)}% complete`;
844
+ currentStepText.textContent = currentStep;
845
+ }
846
+
847
+ // Next step
848
+ nextButtons.forEach(button => {
849
+ button.addEventListener('click', function() {
850
+ if (currentStep < totalSteps) {
851
+ document.getElementById(`step-${currentStep}`).classList.add('hidden');
852
+ currentStep++;
853
+ document.getElementById(`step-${currentStep}`).classList.remove('hidden');
854
+ updateProgress();
855
+
856
+ // Add fade-in animation
857
+ stepContainer.classList.remove('fade-in');
858
+ void stepContainer.offsetWidth; // Trigger reflow
859
+ stepContainer.classList.add('fade-in');
860
+
861
+ // Scroll to top of step
862
+ window.scrollTo({
863
+ top: stepContainer.offsetTop - 100,
864
+ behavior: 'smooth'
865
+ });
866
+ }
867
+ });
868
+ });
869
+
870
+ // Previous step
871
+ prevButtons.forEach(button => {
872
+ button.addEventListener('click', function() {
873
+ if (currentStep > 1) {
874
+ document.getElementById(`step-${currentStep}`).classList.add('hidden');
875
+ currentStep--;
876
+ document.getElementById(`step-${currentStep}`).classList.remove('hidden');
877
+ updateProgress();
878
+
879
+ // Add fade-in animation
880
+ stepContainer.classList.remove('fade-in');
881
+ void stepContainer.offsetWidth; // Trigger reflow
882
+ stepContainer.classList.add('fade-in');
883
+
884
+ // Scroll to top of step
885
+ window.scrollTo({
886
+ top: stepContainer.offsetTop - 100,
887
+ behavior: 'smooth'
888
+ });
889
+ }
890
+ });
891
+ });
892
+
893
+ // Show results
894
+ showResultsButton.addEventListener('click', function() {
895
+ document.getElementById(`step-${currentStep}`).classList.add('hidden');
896
+ resultsSection.classList.remove('hidden');
897
+ progressBar.style.width = '100%';
898
+ progressText.textContent = '100% complete';
899
+ currentStepText.textContent = 'Complete!';
900
+
901
+ // Scroll to top of results
902
+ window.scrollTo({
903
+ top: resultsSection.offsetTop - 100,
904
+ behavior: 'smooth'
905
+ });
906
+
907
+ // Update preferences display
908
+ document.getElementById('pref-size').textContent = userPrefs.size;
909
+ document.getElementById('pref-screen').textContent = userPrefs.screen;
910
+ document.getElementById('pref-budget').textContent = `$${userPrefs.budget.toLocaleString()}`;
911
+ document.getElementById('pref-usage').textContent = userPrefs.usage.length > 0 ?
912
+ userPrefs.usage.map(u => {
913
+ if (u === 'movies') return 'Movies';
914
+ if (u === 'gaming') return 'Gaming';
915
+ if (u === 'sports') return 'Sports';
916
+ if (u === 'streaming') return 'Streaming';
917
+ return u;
918
+ }).join(', ') : 'Not specified';
919
+
920
+ document.getElementById('pref-features').textContent = userPrefs.features.length > 0 ?
921
+ userPrefs.features.map(f => {
922
+ if (f === '4k') return '4K';
923
+ if (f === 'hdr') return 'HDR';
924
+ if (f === 'smart') return 'Smart TV';
925
+ if (f === 'oled') return 'OLED';
926
+ if (f === 'voice') return 'Voice Control';
927
+ return f;
928
+ }).join(', ') : 'Not specified';
929
+
930
+ document.getElementById('pref-lighting').textContent = userPrefs.lighting || 'Not specified';
931
+ });
932
+
933
+ // Restart wizard
934
+ restartButton.addEventListener('click', function() {
935
+ resultsSection.classList.add('hidden');
936
+ currentStep = 1;
937
+ document.getElementById('step-1').classList.remove('hidden');
938
+ updateProgress();
939
+ currentStepText.textContent = currentStep;
940
+
941
+ // Reset user preferences
942
+ userPrefs.size = 'Living room';
943
+ userPrefs.screen = '50-55"';
944
+ userPrefs.budget = 1000;
945
+ userPrefs.usage = [];
946
+ userPrefs.features = [];
947
+ userPrefs.lighting = '';
948
+
949
+ // Reset UI selections
950
+ document.querySelectorAll('.size-option, .usage-option, .lighting-option, .budget-preset').forEach(option => {
951
+ option.classList.remove('selected-card', 'border-blue-500', 'bg-blue-50');
952
+ option.classList.add('border-gray-100');
953
+
954
+ // Hide checkmarks
955
+ const checkmark = option.querySelector('.checkmark');
956
+ if (checkmark) checkmark.classList.add('hidden');
957
+ });
958
+
959
+ document.getElementById('budget-slider').value = 1000;
960
+ document.getElementById('budget-value').textContent = '$1,000';
961
+
962
+ document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
963
+ checkbox.checked = false;
964
+
965
+ // Hide checkmarks in feature checkboxes
966
+ const container = checkbox.closest('.feature-checkbox');
967
+ if (container) {
968
+ const checkmark = container.querySelector('.checkmark');
969
+ if (checkmark) checkmark.classList.add('hidden');
970
+ }
971
+ });
972
+
973
+ // Scroll to top
974
+ window.scrollTo({
975
+ top: 0,
976
+ behavior: 'smooth'
977
+ });
978
+ });
979
+
980
+ // Screen size selection
981
+ document.querySelectorAll('.size-option').forEach(option => {
982
+ option.addEventListener('click', function() {
983
+ document.querySelectorAll('.size-option').forEach(opt => {
984
+ opt.classList.remove('selected-card', 'border-blue-500', 'bg-blue-50');
985
+ opt.classList.add('border-gray-100');
986
+ opt.querySelector('.checkmark').classList.add('hidden');
987
+ });
988
+
989
+ this.classList.remove('border-gray-100');
990
+ this.classList.add('selected-card', 'border-blue-500', 'bg-blue-50');
991
+ this.querySelector('.checkmark').classList.remove('hidden');
992
+
993
+ const size = this.getAttribute('data-value');
994
+ if (size === '32') {
995
+ userPrefs.size = 'Bedroom';
996
+ userPrefs.screen = '32" or under';
997
+ }
998
+ else if (size === '43') {
999
+ userPrefs.size = 'Small living space';
1000
+ userPrefs.screen = '40-43"';
1001
+ }
1002
+ else if (size === '55') {
1003
+ userPrefs.size = 'Living room';
1004
+ userPrefs.screen = '50-55"';
1005
+ }
1006
+ else if (size === '65') {
1007
+ userPrefs.size = 'Home theater';
1008
+ userPrefs.screen = '65"+';
1009
+ }
1010
+ });
1011
+ });
1012
+
1013
+ // Budget slider
1014
+ const budgetSlider = document.getElementById('budget-slider');
1015
+ const budgetValue = document.getElementById('budget-value');
1016
+
1017
+ budgetSlider.addEventListener('input', function() {
1018
+ const value = parseInt(this.value);
1019
+ userPrefs.budget = value;
1020
+
1021
+ // Format as currency
1022
+ budgetValue.textContent = `$${value.toLocaleString()}`;
1023
+ });
1024
+
1025
+ // Budget presets
1026
+ document.querySelectorAll('.budget-preset').forEach(preset => {
1027
+ preset.addEventListener('click', function() {
1028
+ const value = parseInt(this.getAttribute('data-value'));
1029
+ userPrefs.budget = value;
1030
+ budgetSlider.value = value;
1031
+ budgetValue.textContent = `$${value.toLocaleString()}`;
1032
+
1033
+ // Highlight selected preset
1034
+ document.querySelectorAll('.budget-preset').forEach(p => {
1035
+ p.classList.remove('border-blue-300', 'bg-blue-50');
1036
+ p.classList.add('border-gray-200');
1037
+ });
1038
+
1039
+ this.classList.remove('border-gray-200');
1040
+ this.classList.add('border-blue-300', 'bg-blue-50');
1041
+ });
1042
+ });
1043
+
1044
+ // Usage selection
1045
+ document.querySelectorAll('.usage-option').forEach(option => {
1046
+ option.addEventListener('click', function() {
1047
+ const value = this.getAttribute('data-value');
1048
+ const index = userPrefs.usage.indexOf(value);
1049
+
1050
+ if (index === -1) {
1051
+ userPrefs.usage.push(value);
1052
+ this.classList.remove('border-gray-100');
1053
+ this.classList.add('selected-card', 'border-blue-500', 'bg-blue-50');
1054
+ this.querySelector('.checkmark').classList.remove('hidden');
1055
+ } else {
1056
+ userPrefs.usage.splice(index, 1);
1057
+ this.classList.remove('selected-card', 'border-blue-500', 'bg-blue-50');
1058
+ this.classList.add('border-gray-100');
1059
+ this.querySelector('.checkmark').classList.add('hidden');
1060
+ }
1061
+ });
1062
+ });
1063
+
1064
+ // Features selection
1065
+ document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
1066
+ checkbox.addEventListener('change', function() {
1067
+ const id = this.id.replace('feature-', '');
1068
+ const container = this.closest('.feature-checkbox');
1069
+ const checkmark = container.querySelector('.checkmark');
1070
+
1071
+ if (this.checked) {
1072
+ if (!userPrefs.features.includes(id)) {
1073
+ userPrefs.features.push(id);
1074
+ }
1075
+ container.classList.add('border-blue-500', 'bg-blue-50');
1076
+ checkmark.classList.remove('hidden');
1077
+ } else {
1078
+ const index = userPrefs.features.indexOf(id);
1079
+ if (index !== -1) {
1080
+ userPrefs.features.splice(index, 1);
1081
+ }
1082
+ container.classList.remove('border-blue-500', 'bg-blue-50');
1083
+ checkmark.classList.add('hidden');
1084
+ }
1085
+ });
1086
+ });
1087
+
1088
+ // Lighting selection
1089
+ document.querySelectorAll('.lighting-option').forEach(option => {
1090
+ option.addEventListener('click', function() {
1091
+ document.querySelectorAll('.lighting-option').forEach(opt => {
1092
+ opt.classList.remove('selected-card', 'border-blue-500', 'bg-blue-50');
1093
+ opt.classList.add('border-gray-100');
1094
+ opt.querySelector('.checkmark').classList.add('hidden');
1095
+ });
1096
+
1097
+ this.classList.remove('border-gray-100');
1098
+ this.classList.add('selected-card', 'border-blue-500', 'bg-blue-50');
1099
+ this.querySelector('.checkmark').classList.remove('hidden');
1100
+
1101
+ const lighting = this.getAttribute('data-value');
1102
+ if (lighting === 'bright') userPrefs.lighting = 'Lots of sunlight';
1103
+ else if (lighting === 'moderate') userPrefs.lighting = 'Normal lighting';
1104
+ else if (lighting === 'dark') userPrefs.lighting = 'Dim or dark';
1105
+ else if (lighting === 'variable') userPrefs.lighting = 'Changes often';
1106
+ });
1107
+ });
1108
+
1109
+ // Initialize first step
1110
+ document.querySelector('.size-option[data-value="55"]').click();
1111
+ });
1112
+ </script>
1113
+ <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>
1114
+ </html>
prompts.txt ADDED
@@ -0,0 +1,3 @@
 
 
 
 
1
+ Amazon inegrated, helpfull, user friendly, amazin UI and UX design, guided shopping wizard for TVs.
2
+ Ask indirect question, comfortable for non technical audience.
3
+ Upgrade the look and feel 1000 times!