Hugging Face's logo

Spaces:
Stevensayer7
/
time1
Running

App Files Community
Stevensayer7 commited on
Commit
30e50d2
·
verified ·
1 Parent(s): 05ef33c

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +919 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Time1
3
- emoji: 🏆
4
- colorFrom: blue
5
- colorTo: gray
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: time1
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,919 @@
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>EACH Pricing Guide</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
9
+ <style>
10
+ body {
11
+ font-family: 'Inter', sans-serif;
12
+ background-color: #4c1d95;
13
+ color: white; /* Added to make all text white by default */
14
+ }
15
+ .scrollbar-hide::-webkit-scrollbar {
16
+ display: none;
17
+ }
18
+ .scrollbar-hide {
19
+ -ms-overflow-style: none;
20
+ scrollbar-width: none;
21
+ }
22
+ .fade-in {
23
+ animation: fadeIn 0.3s ease-in-out;
24
+ }
25
+ @keyframes fadeIn {
26
+ from { opacity: 0; }
27
+ to { opacity: 1; }
28
+ }
29
+ .performance-table {
30
+ width: 100%;
31
+ border-collapse: collapse;
32
+ font-size: 0.875rem;
33
+ }
34
+ .performance-table th {
35
+ background-color: #5B2C6F;
36
+ color: white;
37
+ padding: 0.5rem;
38
+ text-align: center;
39
+ font-weight: 600;
40
+ }
41
+ .performance-table td {
42
+ padding: 0.375rem;
43
+ border-bottom: 1px solid #5B2C6F;
44
+ color: white; /* Added to make table data white */
45
+ }
46
+ .performance-table tr:nth-child(even) {
47
+ background-color: #5B2C6F20;
48
+ }
49
+ .performance-table tr:hover {
50
+ background-color: #5B2C6F40;
51
+ }
52
+ .text-green {
53
+ color: #4ade80;
54
+ }
55
+ .text-red {
56
+ color: #f87171;
57
+ }
58
+ </style>
59
+ </head>
60
+ <body class="min-h-screen p-4">
61
+ <div id="app" class="max-w-4xl mx-auto">
62
+ <!-- Header -->
63
+ <div class="flex items-center justify-between bg-gradient-to-r from-purple-800 to-purple-600 p-4 rounded-lg mb-4 shadow-lg">
64
+ <div class="flex items-center">
65
+ <div class="mr-3">
66
+ <div class="flex flex-col shadow-lg">
67
+ <div class="bg-purple-900 w-16 h-10 flex items-center justify-center border-t border-l border-r border-purple-800">
68
+ <div class="text-white font-bold text-xl tracking-wide lowercase">each</div>
69
+ </div>
70
+ <div class="bg-gradient-to-b from-orange-500 to-orange-600 w-16 py-0.5 px-0.5 border-b border-l border-r border-orange-600">
71
+ <div class="text-white text-center leading-tight text-xs">
72
+ East Anglia's<br>Children's Hospices
73
+ </div>
74
+ </div>
75
+ </div>
76
+ </div>
77
+ <div>
78
+ <h1 class="text-3xl font-bold text-white">Pricing Guide</h1>
79
+ <p class="text-xs text-purple-300">Your complete brand pricing reference</p>
80
+ </div>
81
+ </div>
82
+ <button id="settingsBtn" class="p-2 bg-purple-700 hover:bg-purple-500 rounded-full transition-colors shadow-md">
83
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6 text-white">
84
+ <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"></path>
85
+ <circle cx="12" cy="12" r="3"></circle>
86
+ </svg>
87
+ </button>
88
+ </div>
89
+
90
+ <!-- Tabs -->
91
+ <div class="flex space-x-2 items-center justify-start mb-4 overflow-x-auto pb-2 scrollbar-hide">
92
+ <button id="categoriesTab" class="flex items-center justify-center transition-colors rounded-lg bg-purple-500 w-16 h-16 ring-2 ring-white shrink-0">
93
+ <span class="text-4xl">👚</span>
94
+ </button>
95
+ <button id="sweTab" class="flex items-center justify-center transition-colors rounded-lg bg-purple-500 w-16 h-16 shrink-0">
96
+ <span class="text-4xl">🌟</span>
97
+ </button>
98
+ <button id="ebayTab" class="flex items-center justify-center transition-colors rounded-lg bg-purple-600 w-16 h-16 shrink-0">
99
+ <div class="flex items-center justify-center text-2xl font-bold">
100
+ <span class="text-red-600">e</span>
101
+ <span class="text-blue-600">b</span>
102
+ <span class="text-yellow-500">a</span>
103
+ <span class="text-green-600">y</span>
104
+ </div>
105
+ </button>
106
+ <button id="doNotSellTab" class="flex items-center justify-center transition-colors rounded-lg bg-purple-500 w-16 h-16 shrink-0">
107
+ <div class="rounded-full bg-red-600 w-12 h-12 flex items-center justify-center">
108
+ <div class="bg-white h-2 w-8 rounded-sm"></div>
109
+ </div>
110
+ </button>
111
+ <button id="performanceTab" class="flex items-center justify-center transition-colors rounded-lg bg-purple-500 w-16 h-16 shrink-0">
112
+ <span class="text-4xl">📊</span>
113
+ </button>
114
+ </div>
115
+
116
+ <!-- Main Content -->
117
+ <div id="contentContainer">
118
+ <!-- Categories Section (default) -->
119
+ <div id="categoriesSection" class="fade-in">
120
+ <div class="relative mt-4">
121
+ <input id="searchInput" type="text" placeholder="Search brands or categories..." class="w-full bg-purple-600 rounded-lg p-3 pl-10 text-white placeholder-purple-300 focus:outline-none focus:ring-2 focus:ring-purple-400">
122
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 absolute left-3 top-3.5 text-purple-300">
123
+ <circle cx="11" cy="11" r="8"></circle>
124
+ <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
125
+ </svg>
126
+ </div>
127
+
128
+ <div id="searchInfo" class="hidden bg-purple-800 p-3 rounded-lg mt-2 text-white"></div>
129
+
130
+ <div id="categoriesContent" class="space-y-4 mt-4">
131
+ <div class="bg-purple-600 rounded-lg p-4 text-center space-y-4 text-white">
132
+ <div class="flex justify-center">
133
+ <span class="text-5xl">🏷️</span>
134
+ </div>
135
+ <h2 class="text-xl font-semibold">Welcome to the Pricing Guide</h2>
136
+ <p>Search for brand names or categories to find pricing information.</p>
137
+ <div class="bg-purple-700 rounded-lg p-3 text-sm">
138
+ <p class="font-medium mb-2">Search suggestions:</p>
139
+ <div class="flex flex-wrap gap-2 justify-center">
140
+ <button class="search-suggestion cursor-pointer bg-purple-500 hover:bg-purple-400 transition-colors rounded-full px-3 py-1 text-white" data-query="Ladies">Ladies</button>
141
+ <button class="search-suggestion cursor-pointer bg-purple-500 hover:bg-purple-400 transition-colors rounded-full px-3 py-1 text-white" data-query="Gold">Gold</button>
142
+ <button class="search-suggestion cursor-pointer bg-purple-500 hover:bg-purple-400 transition-colors rounded-full px-3 py-1 text-white" data-query="Men's">Men's</button>
143
+ </div>
144
+ </div>
145
+ </div>
146
+ </div>
147
+ </div>
148
+
149
+ <!-- Style With EACH Brands Section -->
150
+ <div id="sweSection" class="hidden fade-in text-white">
151
+ <div class="bg-purple-600 rounded-lg p-4">
152
+ <div class="flex items-center mb-4">
153
+ <span class="text-2xl mr-2">🌟</span>
154
+ <h2 class="text-xl font-semibold">Style With EACH Brands</h2>
155
+ </div>
156
+ <div class="grid grid-cols-2 gap-3 md:grid-cols-3">
157
+ <div class="bg-purple-700 rounded-2xl px-4 py-3 text-center">Lucy & Yak</div>
158
+ <div class="bg-purple-700 rounded-2xl px-4 py-3 text-center">Football Shirts</div>
159
+ <div class="bg-purple-700 rounded-2xl px-4 py-3 text-center">Berghaus</div>
160
+ <div class="bg-purple-700 rounded-2xl px-4 py-3 text-center">Trainers</div>
161
+ <div class="bg-purple-700 rounded-2xl px-4 py-3 text-center">Kate Spade</div>
162
+ <div class="bg-purple-700 rounded-2xl px-4 py-3 text-center">Tour T-shirts</div>
163
+ <div class="bg-purple-700 rounded-2xl px-4 py-3 text-center">Whistles</div>
164
+ <div class="bg-purple-700 rounded-2xl px-4 py-3 text-center">Cowboy/Cowgirl Boots</div>
165
+ <div class="bg-purple-700 rounded-2xl px-4 py-3 text-center">Stone Island</div>
166
+ <div class="bg-purple-700 rounded-2xl px-4 py-3 text-center">Vintage/Rare T-shirts</div>
167
+ <div class="bg-purple-700 rounded-2xl px-4 py-3 text-center">Laura Ashley (Vintage only)</div>
168
+ <div class="bg-purple-700 rounded-2xl px-4 py-3 text-center">Dr. Martens Boots</div>
169
+ </div>
170
+ </div>
171
+ </div>
172
+
173
+ <!-- eBay Section -->
174
+ <div id="ebaySection" class="hidden fade-in text-white">
175
+ <div class="bg-purple-600 rounded-lg p-4">
176
+ <div class="flex items-center mb-4">
177
+ <div class="flex items-center text-3xl font-bold mr-3">
178
+ <span class="text-red-600">e</span>
179
+ <span class="text-blue-600">b</span>
180
+ <span class="text-yellow-500">a</span>
181
+ <span class="text-green-600">y</span>
182
+ </div>
183
+ <h2 class="text-xl font-semibold">eBay Reseller Guide</h2>
184
+ </div>
185
+
186
+ <!-- Gold Markings -->
187
+ <div class="bg-purple-700 rounded-lg p-4 mb-4">
188
+ <h3 class="font-semibold mb-3 flex items-center">
189
+ <span class="text-xl mr-2">✨</span>
190
+ Gold Hallmark Guide
191
+ </h3>
192
+ <div class="grid grid-cols-2 gap-3 md:grid-cols-3">
193
+ <div class="bg-purple-800 rounded-lg p-3">
194
+ <div class="font-medium text-yellow-300 mb-1">375</div>
195
+ <div class="text-sm">9 carat (37.5% pure)</div>
196
+ </div>
197
+ <div class="bg-purple-800 rounded-lg p-3">
198
+ <div class="font-medium text-yellow-300 mb-1">585</div>
199
+ <div class="text-sm">14 carat (58.5% pure)</div>
200
+ </div>
201
+ <div class="bg-purple-800 rounded-lg p-3">
202
+ <div class="font-medium text-yellow-300 mb-1">750</div>
203
+ <div class="text-sm">18 carat (75% pure)</div>
204
+ </div>
205
+ <div class="bg-purple-800 rounded-lg p-3">
206
+ <div class="font-medium text-yellow-300 mb-1">916</div>
207
+ <div class="text-sm">22 carat (91.6% pure)</div>
208
+ </div>
209
+ <div class="bg-purple-800 rounded-lg p-3">
210
+ <div class="font-medium text-yellow-300 mb-1">990</div>
211
+ <div class="text-sm">24 carat (99% pure)</div>
212
+ </div>
213
+ <div class="bg-purple-800 rounded-lg p-3">
214
+ <div class="font-medium text-yellow-300 mb-1">GF / RGP</div>
215
+ <div class="text-sm">Gold Filled / Rolled Gold</div>
216
+ </div>
217
+ </div>
218
+ </div>
219
+
220
+ <!-- Silver Markings -->
221
+ <div class="bg-purple-700 rounded-lg p-4 mb-4">
222
+ <h3 class="font-semibold mb-3 flex items-center">
223
+ <span class="text-xl mr-2">🥈</span>
224
+ Silver Hallmark Guide
225
+ </h3>
226
+ <div class="grid grid-cols-2 gap-3 md:grid-cols-3">
227
+ <div class="bg-purple-800 rounded-lg p-3">
228
+ <div class="font-medium text-gray-300 mb-1">925</div>
229
+ <div class="text-sm">Sterling Silver (92.5% pure)</div>
230
+ </div>
231
+ <div class="bg-purple-800 rounded-lg p-3">
232
+ <div class="font-medium text-gray-300 mb-1">800</div>
233
+ <div class="text-sm">80% Silver content</div>
234
+ </div>
235
+ <div class="bg-purple-800 rounded-lg p-3">
236
+ <div class="font-medium text-gray-300 mb-1">EPNS</div>
237
+ <div class="text-sm">Electroplated Nickel Silver</div>
238
+ </div>
239
+ <div class="bg-purple-800 rounded-lg p-3">
240
+ <div class="font-medium text-gray-300 mb-1">A1</div>
241
+ <div class="text-sm">Highest grade silver plate</div>
242
+ </div>
243
+ </div>
244
+ </div>
245
+
246
+ <!-- Toy Identification Guide -->
247
+ <div class="bg-purple-700 rounded-lg p-4 mb-4">
248
+ <h3 class="font-semibold mb-3 flex items-center">
249
+ <span class="text-xl mr-2">🧸</span>
250
+ Toy Identification Guide
251
+ </h3>
252
+
253
+ <div class="bg-purple-800 rounded-lg p-3 mb-2">
254
+ <div class="flex justify-between items-center">
255
+ <h4 class="font-medium">Key Value Indicators</h4>
256
+ <span class="text-xs bg-purple-600 px-2 py-1 rounded text-purple-300">Toy Guide</span>
257
+ </div>
258
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-2 mt-2">
259
+ <div class="bg-purple-700 p-2 rounded text-sm">
260
+ <span class="text-green-400 mr-1">✅</span>
261
+ <strong>Pre-2000 Toys</strong> (70s-90s are best)
262
+ </div>
263
+ <div class="bg-purple-700 p-2 rounded text-sm">
264
+ <span class="text-green-400 mr-1">✅</span>
265
+ <strong>Factory Sealed</strong> (NIB/NOS)
266
+ </div>
267
+ <div class="bg-purple-700 p-2 rounded text-sm">
268
+ <span class="text-green-400 mr-1">✅</span>
269
+ <strong>Limited Editions</strong> & Exclusives
270
+ </div>
271
+ <div class="bg-purple-700 p-2 rounded text-sm">
272
+ <span class="text-green-400 mr-1">✅</span>
273
+ <strong>Original Star Wars</strong> (1977-1985)
274
+ </div>
275
+ </div>
276
+ </div>
277
+
278
+ <div class="flex text-sm mb-3">
279
+ <div class="bg-purple-800 p-2 rounded-l w-1/2">
280
+ <h5 class="font-medium mb-1">Check For:</h5>
281
+ <ul class="space-y-1 pl-1">
282
+ <li><span class="text-purple-300 mr-1">•</span>Year of Manufacture</li>
283
+ <li><span class="text-purple-300 mr-1">•</span>Country of Origin</li>
284
+ <li><span class="text-purple-300 mr-1">•</span>Model/Serial Numbers</li>
285
+ </ul>
286
+ </div>
287
+ <div class="bg-purple-800 p-2 rounded-r w-1/2">
288
+ <h5 class="font-medium mb-1">Avoid:</h5>
289
+ <ul class="space-y-1 pl-1">
290
+ <li><span class="text-purple-300 mr-1">•</span>Overproduced items</li>
291
+ <li><span class="text-purple-300 mr-1">•</span>Missing pieces</li>
292
+ <li><span class="text-purple-300 mr-1">•</span>Knockoffs/bootlegs</li>
293
+ </ul>
294
+ </div>
295
+ </div>
296
+
297
+ <div class="text-sm bg-purple-700 p-2 rounded-md flex">
298
+ <span class="text-yellow-300 mr-1">💡</span>
299
+ <span><strong>Pro Tip:</strong> Always check eBay Sold Listings to verify value before buying!</span>
300
+ </div>
301
+ </div>
302
+
303
+ <!-- Hidden Gems -->
304
+ <div class="bg-purple-700 rounded-lg p-4 mb-4">
305
+ <h3 class="font-semibold mb-3 flex items-center">
306
+ <span class="text-xl mr-2">💎</span>
307
+ Hidden Gems to Look For
308
+ </h3>
309
+ <div class="space-y-3">
310
+ <div class="bg-purple-800 rounded-lg p-3">
311
+ <h4 class="font-medium mb-1">Clothing Tags to Watch For</h4>
312
+ <div class="grid grid-cols-2 gap-2 md:grid-cols-3 text-sm">
313
+ <div class="bg-purple-700 p-2 rounded-md">Burberry Nova Check</div>
314
+ <div class="bg-purple-700 p-2 rounded-md">Vintage Levi's Red Tab</div>
315
+ <div class="bg-purple-700 p-2 rounded-md">Nike ACG</div>
316
+ <div class="bg-purple-700 p-2 rounded-md">Dead Stock Sportswear</div>
317
+ <div class="bg-purple-700 p-2 rounded-md">Band Tour T-shirts</div>
318
+ <div class="bg-purple-700 p-2 rounded-md">1990s Y2K Brands</div>
319
+ </div>
320
+ </div>
321
+
322
+ <div class="bg-purple-800 rounded-lg p-3">
323
+ <h4 class="font-medium mb-1">Collectible Items</h4>
324
+ <div class="grid grid-cols-2 gap-2 md:grid-cols-3 text-sm">
325
+ <div class="bg-purple-700 p-2 rounded-md">Vintage Board Games</div>
326
+ <div class="bg-purple-700 p-2 rounded-md">Retired LEGO Sets</div>
327
+ <div class="bg-purple-700 p-2 rounded-md">First Edition Books</div>
328
+ <div class="bg-purple-700 p-2 rounded-md">Vintage Comics</div>
329
+ <div class="bg-purple-700 p-2 rounded-md">Film Cameras</div>
330
+ <div class="bg-purple-700 p-2 rounded-md">Retro Video Games</div>
331
+ </div>
332
+ </div>
333
+ </div>
334
+ </div>
335
+
336
+ <!-- Seasonal Selling Calendar -->
337
+ <div class="bg-purple-700 rounded-lg p-4">
338
+ <h3 class="font-semibold mb-3 flex items-center">
339
+ <span class="text-xl mr-2">📅</span>
340
+ Seasonal Selling Guide
341
+ </h3>
342
+ <div class="grid grid-cols-2 gap-3 md:grid-cols-4">
343
+ <div class="bg-purple-800 rounded-lg p-2">
344
+ <h4 class="font-medium text-center border-b border-purple-600 pb-1 mb-2">Winter</h4>
345
+ <ul class="text-xs pl-3 list-disc">
346
+ <li>Winter coats (Oct-Dec)</li>
347
+ <li>Christmas items (Oct-Dec)</li>
348
+ <li>Ski gear (Sep-Jan)</li>
349
+ <li>Thermal clothing (Sept-Jan)</li>
350
+ </ul>
351
+ </div>
352
+ <div class="bg-purple-800 rounded-lg p-2">
353
+ <h4 class="font-medium text-center border-b border-purple-600 pb-1 mb-2">Spring</h4>
354
+ <ul class="text-xs pl-3 list-disc">
355
+ <li>Garden tools (Feb-May)</li>
356
+ <li>Easter items (Feb-Apr)</li>
357
+ <li>Spring fashion (Jan-Apr)</li>
358
+ <li>Wedding attire (Jan-May)</li>
359
+ </ul>
360
+ </div>
361
+ </div>
362
+ </div>
363
+ </div>
364
+ </div>
365
+
366
+ <!-- Do Not Sell Section -->
367
+ <div id="doNotSellSection" class="hidden fade-in text-white">
368
+ <div class="bg-purple-600 rounded-lg p-4 space-y-6">
369
+ <div class="flex items-center mb-2">
370
+ <div class="rounded-full bg-red-600 w-12 h-12 flex items-center justify-center mr-3">
371
+ <div class="bg-white h-2 w-8 rounded-sm"></div>
372
+ </div>
373
+ <h2 class="text-xl font-semibold">Items Not For Sale</h2>
374
+ </div>
375
+
376
+ <div class="space-y-6">
377
+ <!-- Cannot sell anywhere section -->
378
+ <div>
379
+ <h3 class="text-lg font-medium mb-3 bg-red-600 px-3 py-1 rounded-md inline-block">
380
+ Items we cannot sell anywhere
381
+ </h3>
382
+ <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
383
+ <div class="bg-purple-700 border border-red-500 rounded-lg px-3 py-2 text-center">VAPES</div>
384
+ <div class="bg-purple-700 border border-red-500 rounded-lg px-3 py-2 text-center">Bikes</div>
385
+ <div class="bg-purple-700 border border-red-500 rounded-lg px-3 py-2 text-center">Cots, Prams, High chairs, Stairgates</div>
386
+ <div class="bg-purple-700 border border-red-500 rounded-lg px-3 py-2 text-center">Roller-skates</div>
387
+ <div class="bg-purple-700 border border-red-500 rounded-lg px-3 py-2 text-center">Ironing boards with asbestos heat pads</div>
388
+ <div class="bg-purple-700 border border-red-500 rounded-lg px-3 py-2 text-center">Bike, riding or motorcycle helmets</div>
389
+ <div class="bg-purple-700 border border-red-500 rounded-lg px-3 py-2 text-center">Real fur coats</div>
390
+ <div class="bg-purple-700 border border-red-500 rounded-lg px-3 py-2 text-center">Inflatable water bands and rings</div>
391
+ <div class="bg-purple-700 border border-red-500 rounded-lg px-3 py-2 text-center">Candles without warning labels</div>
392
+ <div class="bg-purple-700 border border-red-500 rounded-lg px-3 py-2 text-center">Firearms, knives or weapons</div>
393
+ <div class="bg-purple-700 border border-red-500 rounded-lg px-3 py-2 text-center">Food or drink (including alcohol)</div>
394
+ <div class="bg-purple-700 border border-red-500 rounded-lg px-3 py-2 text-center">Offensive, sexist or racist items</div>
395
+ <div class="bg-purple-700 border border-red-500 rounded-lg px-3 py-2 text-center">Upholstered furniture without fire labels</div>
396
+ <div class="bg-purple-700 border border-red-500 rounded-lg px-3 py-2 text-center">Children's fancy dress costumes</div>
397
+ <div class="bg-purple-700 border border-red-500 rounded-lg px-3 py-2 text-center">TVs that are not flat screen</div>
398
+ <div class="bg-purple-700 border border-red-500 rounded-lg px-3 py-2 text-center">Used underwear</div>
399
+ <div class="bg-purple-700 border border-red-500 rounded-lg px-3 py-2 text-center">Toys without CE labels</div>
400
+ <div class="bg-purple-700 border border-red-500 rounded-lg px-3 py-2 text-center">Children's car seats</div>
401
+ <div class="bg-purple-700 border border-red-500 rounded-lg px-3 py-2 text-center">Items containing ivory</div>
402
+ <div class="bg-purple-700 border border-red-500 rounded-lg px-3 py-2 text-center">Electric blankets</div>
403
+ <div class="bg-purple-700 border border-red-500 rounded-lg px-3 py-2 text-center">Bassinets</div>
404
+ </div>
405
+ </div>
406
+
407
+ <!-- Manager's discretion section -->
408
+ <div>
409
+ <h3 class="text-lg font-medium mb-3 bg-orange-600 px-3 py-1 rounded-md inline-block">
410
+ Items we can only accept in shops at the Manager's discretion
411
+ </h3>
412
+ <p class="text-sm mb-3 text-purple-300">
413
+ If unsold these items must be disposed of locally, either through your recycler or your shop bin - please do not return to RDC
414
+ </p>
415
+ <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
416
+ <div class="bg-purple-700 border border-orange-500 rounded-lg px-3 py-2 text-center">Computer screens</div>
417
+ <div class="bg-purple-700 border border-orange-500 rounded-lg px-3 py-2 text-center">Duvets</div>
418
+ <div class="bg-purple-700 border border-orange-500 rounded-lg px-3 py-2 text-center">Video or music cassettes</div>
419
+ <div class="bg-purple-700 border border-orange-500 rounded-lg px-3 py-2 text-center">Microwaves (RDC & Clacton only)</div>
420
+ <div class="bg-purple-700 border border-orange-500 rounded-lg px-3 py-2 text-center">Large Pictures and Photo frames</div>
421
+ <div class="bg-purple-700 border border-orange-500 rounded-lg px-3 py-2 text-center">Items containing gas or air canisters</div>
422
+ <div class="bg-purple-700 border border-orange-500 rounded-lg px-3 py-2 text-center">Mattresses</div>
423
+ <div class="bg-purple-700 border border-orange-500 rounded-lg px-3 py-2 text-center">Printers</div>
424
+ <div class="bg-purple-700 border border-orange-500 rounded-lg px-3 py-2 text-center">CD's and DVD's for culling</div>
425
+ </div>
426
+ </div>
427
+
428
+ <!-- Restricted items section -->
429
+ <div>
430
+ <h3 class="text-lg font-medium mb-3 bg-yellow-600 px-3 py-1 rounded-md inline-block">
431
+ Items must be in a cabinet & sold to over 18's
432
+ </h3>
433
+ <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
434
+ <div class="bg-purple-700 border border-yellow-500 rounded-lg px-3 py-2 text-center">Knives, scissors & sharp kitchen utensils</div>
435
+ <div class="bg-purple-700 border border-yellow-500 rounded-lg px-3 py-2 text-center">Knitting needles</div>
436
+ <div class="bg-purple-700 border border-yellow-500 rounded-lg px-3 py-2 text-center">DVD's with 15 or 18 certificates</div>
437
+ </div>
438
+ <p class="text-sm mt-3 text-purple-300">
439
+ Knitting needles may be kept in the sorting room / behind the till. Check the age appropriateness of 15 or 18 certificates for DVD's (do not need to be kept in cabinet).
440
+ </p>
441
+ </div>
442
+ </div>
443
+ </div>
444
+ </div>
445
+
446
+ <!-- Performance Section -->
447
+ <div id="performanceSection" class="hidden fade-in text-white">
448
+ <div class="bg-purple-600 rounded-lg p-4">
449
+ <div class="flex items-center mb-4">
450
+ <span class="text-2xl mr-2">📊</span>
451
+ <h2 class="text-xl font-semibold">South Region YTD (Week 7)</h2>
452
+ </div>
453
+
454
+ <div class="overflow-x-auto">
455
+ <table class="performance-table">
456
+ <thead>
457
+ <tr>
458
+ <th>Shop</th>
459
+ <th>Actual (£)</th>
460
+ <th>Budget (£)</th>
461
+ <th>Δ vs Budget</th>
462
+ <th>Last Year (£)</th>
463
+ <th>Δ vs Last Year</th>
464
+ </tr>
465
+ </thead>
466
+ <tbody>
467
+ <tr>
468
+ <td class="text-center">ANGO</td>
469
+ <td class="text-right">£16,516</td>
470
+ <td class="text-right">£17,280</td>
471
+ <td class="text-right text-red">–4.4%</td>
472
+ <td class="text-right">£16,963</td>
473
+ <td class="text-right text-red">–2.6%</td>
474
+ </tr>
475
+ <tr>
476
+ <td class="text-center">CLAC</td>
477
+ <td class="text-right">£27,196</td>
478
+ <td class="text-right">£26,672</td>
479
+ <td class="text-right text-green">+2.0%</td>
480
+ <td class="text-right">£25,949</td>
481
+ <td class="text-right text-green">+4.8%</td>
482
+ </tr>
483
+ <tr>
484
+ <td class="text-center">COLC</td>
485
+ <td class="text-right">£13,458</td>
486
+ <td class="text-right">£13,737</td>
487
+ <td class="text-right text-red">–2.0%</td>
488
+ <td class="text-right">£12,531</td>
489
+ <td class="text-right text-green">+7.4%</td>
490
+ </tr>
491
+ <tr>
492
+ <td class="text-center">DOVE</td>
493
+ <td class="text-right">£22,458</td>
494
+ <td class="text-right">£22,975</td>
495
+ <td class="text-right text-red">–2.3%</td>
496
+ <td class="text-right">£20,974</td>
497
+ <td class="text-right text-green">+7.1%</td>
498
+ </tr>
499
+ <tr>
500
+ <td class="text-center">FELI</td>
501
+ <td class="text-right">£23,035</td>
502
+ <td class="text-right">£21,774</td>
503
+ <td class="text-right text-green">+5.8%</td>
504
+ <td class="text-right">£15,920</td>
505
+ <td class="text-right text-green">+44.7%</td>
506
+ </tr>
507
+ <tr>
508
+ <td class="text-center">FRAM</td>
509
+ <td class="text-right">£21,671</td>
510
+ <td class="text-right">£23,268</td>
511
+ <td class="text-right text-red">–6.9%</td>
512
+ <td class="text-right">£22,982</td>
513
+ <td class="text-right text-red">–5.7%</td>
514
+ </tr>
515
+ <tr>
516
+ <td class="text-center">FRIN</td>
517
+ <td class="text-right">£23,754</td>
518
+ <td class="text-right">£17,989</td>
519
+ <td class="text-right text-green">+32.0%</td>
520
+ <td class="text-right">£17,748</td>
521
+ <td class="text-right text-green">+33.8%</td>
522
+ </tr>
523
+ <tr>
524
+ <td class="text-center">HADL</td>
525
+ <td class="text-right">£33,566</td>
526
+ <td class="text-right">£32,773</td>
527
+ <td class="text-right text-green">+2.4%</td>
528
+ <td class="text-right">£33,918</td>
529
+ <td class="text-right text-red">–1.0%</td>
530
+ </tr>
531
+ <tr>
532
+ <td class="text-center">HALS</td>
533
+ <td class="text-right">£12,431</td>
534
+ <td class="text-right">£14,183</td>
535
+ <td class="text-right text-red">–12.4%</td>
536
+ <td class="text-right">£14,083</td>
537
+ <td class="text-right text-red">–11.7%</td>
538
+ </tr>
539
+ <tr>
540
+ <td class="text-center">IPSW</td>
541
+ <td class="text-right">£11,992</td>
542
+ <td class="text-right">£13,361</td>
543
+ <td class="text-right text-red">–10.2%</td>
544
+ <td class="text-right">£12,620</td>
545
+ <td class="text-right text-red">–5.0%</td>
546
+ </tr>
547
+ <tr>
548
+ <td class="text-center">LEIS</td>
549
+ <td class="text-right">£14,649</td>
550
+ <td class="text-right">£16,601</td>
551
+ <td class="text-right text-red">–11.8%</td>
552
+ <td class="text-right">£15,634</td>
553
+ <td class="text-right text-red">–6.3%</td>
554
+ </tr>
555
+ <tr>
556
+ <td class="text-center">MERE</td>
557
+ <td class="text-right">£14,557</td>
558
+ <td class="text-right">£15,472</td>
559
+ <td class="text-right text-red">–5.9%</td>
560
+ <td class="text-right">£15,030</td>
561
+ <td class="text-right text-red">–3.1%</td>
562
+ </tr>
563
+ <tr>
564
+ <td class="text-center">SAXM</td>
565
+ <td class="text-right">£26,417</td>
566
+ <td class="text-right">£25,624</td>
567
+ <td class="text-right text-green">+3.1%</td>
568
+ <td class="text-right">£24,936</td>
569
+ <td class="text-right text-green">+5.9%</td>
570
+ </tr>
571
+ <tr>
572
+ <td class="text-center">SUDB</td>
573
+ <td class="text-right">£15,081</td>
574
+ <td class="text-right">£14,690</td>
575
+ <td class="text-right text-green">+2.7%</td>
576
+ <td class="text-right">£14,327</td>
577
+ <td class="text-right text-green">+5.3%</td>
578
+ </tr>
579
+ <tr>
580
+ <td class="text-center">WOOD</td>
581
+ <td class="text-right">£31,141</td>
582
+ <td class="text-right">£33,837</td>
583
+ <td class="text-right text-red">–8.0%</td>
584
+ <td class="text-right">£31,718</td>
585
+ <td class="text-right text-red">–1.8%</td>
586
+ </tr>
587
+ </tbody>
588
+ </table>
589
+ </div>
590
+
591
+ <div class="mt-4 bg-purple-700 rounded-lg p-3">
592
+ <div class="flex items-center">
593
+ <span class="text-xl mr-2">📌</span>
594
+ <h3 class="font-medium">Key Takeaways</h3>
595
+ </div>
596
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-3 mt-2">
597
+ <div class="bg-purple-800 p-2 rounded-md">
598
+ <div class="flex items-center">
599
+ <span class="text-green-400 mr-2">▲</span>
600
+ <span class="font-medium">Top Performers:</span>
601
+ </div>
602
+ <div class="text-sm mt-1">
603
+ FRIN (+32.0% vs budget), FELI (+44.7% vs LY), CLAC (+4.8% vs LY)
604
+ </div>
605
+ </div>
606
+ <div class="bg-purple-800 p-2 rounded-md">
607
+ <div class="flex items-center">
608
+ <span class="text-red-400 mr-2">▼</span>
609
+ <span class="font-medium">Needs Attention:</span>
610
+ </div>
611
+ <div class="text-sm mt-1">
612
+ HALS (-12.4% vs budget), LEIS (-11.8% vs budget), IPSW (-10.2% vs budget)
613
+ </div>
614
+ </div>
615
+ </div>
616
+ </div>
617
+ </div>
618
+ </div>
619
+ </div>
620
+
621
+ <!-- Footer -->
622
+ <div class="mt-6 pt-4 border-t border-purple-600 text-center text-purple-300 text-xs">
623
+ <p>© 2025 East Anglia's Children's Hospices</p>
624
+ <p>
625
+ <a href="#" class="text-purple-200 hover:text-white underline">www.each.org.uk</a>
626
+ </p>
627
+ </div>
628
+ </div>
629
+
630
+ <script>
631
+ // Sample data
632
+ const BRAND_CATEGORIES = {
633
+ ladies: {
634
+ name: 'Ladies (Sept 2023)',
635
+ emoji: '👗',
636
+ brands: [
637
+ 'Atmosphere',
638
+ 'BHS',
639
+ 'Bon Marche',
640
+ 'Cherokee',
641
+ 'Damart',
642
+ 'Evie',
643
+ 'EWM',
644
+ 'F & F',
645
+ 'George',
646
+ 'M & Co',
647
+ 'New Look',
648
+ 'Nutmeg',
649
+ 'Papaya',
650
+ 'Primark',
651
+ 'Select',
652
+ 'Shein',
653
+ 'TU',
654
+ 'ASOS'
655
+ ],
656
+ prices: {
657
+ 'Blouses/Shirts (Basic)': 3.75,
658
+ 'Blouses/Shirts (Standard)': 4.5,
659
+ 'Blouses/Shirts (Standard+)': 4.95,
660
+ 'T Shirts (Basic)': 2.5,
661
+ 'T Shirts (Standard)': 3.75,
662
+ 'T Shirts (Standard+)': 3.95
663
+ }
664
+ },
665
+ ladiesGold: {
666
+ name: 'Ladies Gold (Sept 2023)',
667
+ emoji: '✨',
668
+ brands: [
669
+ 'Animal',
670
+ 'Apricot',
671
+ 'Billabong',
672
+ 'FatFace',
673
+ 'GAP',
674
+ 'Mango',
675
+ 'Oasis'
676
+ ],
677
+ prices: {
678
+ 'Blouses/Shirts (Gold G1)': '£7.50 - £10.00',
679
+ 'Blouses/Shirts (Gold G2)': '£10.00 - £15.00',
680
+ 'Blouses/Shirts (Gold G3)': '£15.00+'
681
+ }
682
+ },
683
+ mens: {
684
+ name: "Men's (Sept 2023)",
685
+ emoji: '👔',
686
+ brands: [
687
+ 'George',
688
+ 'F&F',
689
+ 'H&M Men',
690
+ 'Next',
691
+ 'River Island'
692
+ ],
693
+ prices: {
694
+ 'Shirts Short (Basic)': 3.5,
695
+ 'Shirts Short (Standard)': 4.5,
696
+ 'Shirts Short (Standard+)': 4.75
697
+ }
698
+ }
699
+ };
700
+
701
+ // Convert categories to an array for easier filtering
702
+ const categoryArray = Object.entries(BRAND_CATEGORIES).map(([key, category]) => ({
703
+ id: key,
704
+ ...category
705
+ }));
706
+
707
+ // DOM elements
708
+ const categoriesTab = document.getElementById('categoriesTab');
709
+ const sweTab = document.getElementById('sweTab');
710
+ const ebayTab = document.getElementById('ebayTab');
711
+ const doNotSellTab = document.getElementById('doNotSellTab');
712
+ const performanceTab = document.getElementById('performanceTab');
713
+
714
+ const categoriesSection = document.getElementById('categoriesSection');
715
+ const sweSection = document.getElementById('sweSection');
716
+ const ebaySection = document.getElementById('ebaySection');
717
+ const doNotSellSection = document.getElementById('doNotSellSection');
718
+ const performanceSection = document.getElementById('performanceSection');
719
+
720
+ const searchInput = document.getElementById('searchInput');
721
+ const searchInfo = document.getElementById('searchInfo');
722
+ const categoriesContent = document.getElementById('categoriesContent');
723
+
724
+ // Tab switching
725
+ function showSection(section) {
726
+ // Hide all sections
727
+ categoriesSection.classList.add('hidden');
728
+ sweSection.classList.add('hidden');
729
+ ebaySection.classList.add('hidden');
730
+ doNotSellSection.classList.add('hidden');
731
+ performanceSection.classList.add('hidden');
732
+
733
+ // Remove active state from all tabs
734
+ categoriesTab.classList.remove('ring-2', 'ring-white');
735
+ sweTab.classList.remove('ring-2', 'ring-white');
736
+ ebayTab.classList.remove('ring-2', 'ring-white');
737
+ doNotSellTab.classList.remove('ring-2', 'ring-white');
738
+ performanceTab.classList.remove('ring-2', 'ring-white');
739
+
740
+ // Show selected section and set active tab
741
+ switch(section) {
742
+ case 'categories':
743
+ categoriesSection.classList.remove('hidden');
744
+ categoriesTab.classList.add('ring-2', 'ring-white');
745
+ break;
746
+ case 'swe':
747
+ sweSection.classList.remove('hidden');
748
+ sweTab.classList.add('ring-2', 'ring-white');
749
+ break;
750
+ case 'ebay':
751
+ ebaySection.classList.remove('hidden');
752
+ ebayTab.classList.add('ring-2', 'ring-white');
753
+ break;
754
+ case 'doNotSell':
755
+ doNotSellSection.classList.remove('hidden');
756
+ doNotSellTab.classList.add('ring-2', 'ring-white');
757
+ break;
758
+ case 'performance':
759
+ performanceSection.classList.remove('hidden');
760
+ performanceTab.classList.add('ring-2', 'ring-white');
761
+ break;
762
+ }
763
+ }
764
+
765
+ // Event listeners for tabs
766
+ categoriesTab.addEventListener('click', () => showSection('categories'));
767
+ sweTab.addEventListener('click', () => showSection('swe'));
768
+ ebayTab.addEventListener('click', () => showSection('ebay'));
769
+ doNotSellTab.addEventListener('click', () => showSection('doNotSell'));
770
+ performanceTab.addEventListener('click', () => showSection('performance'));
771
+
772
+ // Search functionality
773
+ function renderPrice(price) {
774
+ return typeof price === 'number' ? `£${price.toFixed(2)}` : price;
775
+ }
776
+
777
+ function groupPrices(prices) {
778
+ const groups = {};
779
+ Object.entries(prices).forEach(([key, value]) => {
780
+ const baseType = key.split(' (')[0];
781
+ if (!groups[baseType]) groups[baseType] = [];
782
+ groups[baseType].push({ key, value });
783
+ });
784
+ return groups;
785
+ }
786
+
787
+ function renderCategoryCard(category) {
788
+ const priceGroups = groupPrices(category.prices);
789
+
790
+ return `
791
+ <div class="bg-purple-600 rounded-lg p-4 space-y-3 text-white">
792
+ <div class="flex items-center justify-between">
793
+ <div class="flex items-center">
794
+ <span class="text-2xl mr-2">${category.emoji}</span>
795
+ <h3 class="text-lg font-semibold">${category.name}</h3>
796
+ </div>
797
+ </div>
798
+
799
+ <div class="text-sm text-purple-200">
800
+ <div class="font-medium mb-1">Brands:</div>
801
+ <div class="max-h-32 overflow-y-auto scrollbar-hide">
802
+ ${category.brands.map(brand => `
803
+ <span class="inline-block bg-purple-700 rounded-full px-2 py-1 text-xs mr-1 mb-1 text-white">
804
+ ${brand}
805
+ </span>
806
+ `).join('')}
807
+ </div>
808
+ </div>
809
+
810
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
811
+ ${Object.entries(priceGroups).slice(0, 4).map(([groupName, items]) => `
812
+ <div class="bg-purple-700 bg-opacity-50 p-2 rounded-md">
813
+ <div class="text-sm text-purple-200 font-medium mb-1">
814
+ ${groupName}
815
+ </div>
816
+ ${items.slice(0, 2).map(({ key, value }) => {
817
+ const splitKey = key.split(' (');
818
+ const detailPart = splitKey[1] ? splitKey[1].replace(')', '') : '';
819
+ return `
820
+ <div class="text-sm flex justify-between text-white">
821
+ <span class="text-purple-200">${detailPart}</span>
822
+ <span>${renderPrice(value)}</span>
823
+ </div>
824
+ `;
825
+ }).join('')}
826
+ ${items.length > 2 ? `
827
+ <div class="text-purple-300 text-xs mt-1">
828
+ + ${items.length - 2} more
829
+ </div>
830
+ ` : ''}
831
+ </div>
832
+ `).join('')}
833
+ </div>
834
+ </div>
835
+ `;
836
+ }
837
+
838
+ function handleSearch() {
839
+ const searchQuery = searchInput.value.trim().toLowerCase();
840
+
841
+ if (!searchQuery) {
842
+ searchInfo.classList.add('hidden');
843
+ categoriesContent.innerHTML = `
844
+ <div class="bg-purple-600 rounded-lg p-4 text-center space-y-4 text-white">
845
+ <div class="flex justify-center">
846
+ <span class="text-5xl">🏷️</span>
847
+ </div>
848
+ <h2 class="text-xl font-semibold">Welcome to the Pricing Guide</h2>
849
+ <p>Search for brand names or categories to find pricing information.</p>
850
+ <div class="bg-purple-700 rounded-lg p-3 text-sm">
851
+ <p class="font-medium mb-2">Search suggestions:</p>
852
+ <div class="flex flex-wrap gap-2 justify-center">
853
+ <button class="search-suggestion cursor-pointer bg-purple-500 hover:bg-purple-400 transition-colors rounded-full px-3 py-1 text-white" data-query="Ladies">Ladies</button>
854
+ <button class="search-suggestion cursor-pointer bg-purple-500 hover:bg-purple-400 transition-colors rounded-full px-3 py-1 text-white" data-query="Gold">Gold</button>
855
+ <button class="search-suggestion cursor-pointer bg-purple-500 hover:bg-purple-400 transition-colors rounded-full px-3 py-1 text-white" data-query="Men's">Men's</button>
856
+ </div>
857
+ </div>
858
+ </div>
859
+ `;
860
+
861
+ // Reattach event listeners to suggestion buttons
862
+ document.querySelectorAll('.search-suggestion').forEach(button => {
863
+ button.addEventListener('click', (e) => {
864
+ searchInput.value = e.target.dataset.query;
865
+ handleSearch();
866
+ });
867
+ });
868
+
869
+ return;
870
+ }
871
+
872
+ const filteredResults = categoryArray.filter((category) => {
873
+ const nameMatches = category.name.toLowerCase().includes(searchQuery);
874
+ const brandMatches = category.brands.some(brand =>
875
+ brand.toLowerCase().includes(searchQuery)
876
+ );
877
+ return nameMatches || brandMatches;
878
+ });
879
+
880
+ searchInfo.classList.remove('hidden');
881
+ searchInfo.innerHTML = `
882
+ <p>Searching for: ${searchQuery}</p>
883
+ <p>Results: ${filteredResults.length}</p>
884
+ `;
885
+
886
+ if (filteredResults.length === 0) {
887
+ categoriesContent.innerHTML = `
888
+ <div class="bg-purple-600 rounded-lg p-4 text-center text-white">
889
+ <p>No categories or brands match your search.</p>
890
+ </div>
891
+ `;
892
+ } else {
893
+ categoriesContent.innerHTML = filteredResults.slice(0, 2).map(category =>
894
+ renderCategoryCard(category)
895
+ ).join('');
896
+ }
897
+ }
898
+
899
+ // Event listeners
900
+ searchInput.addEventListener('input', handleSearch);
901
+
902
+ // Initialize suggestion buttons
903
+ document.querySelectorAll('.search-suggestion').forEach(button => {
904
+ button.addEventListener('click', (e) => {
905
+ searchInput.value = e.target.dataset.query;
906
+ handleSearch();
907
+ });
908
+ });
909
+
910
+ // Settings button
911
+ document.getElementById('settingsBtn').addEventListener('click', () => {
912
+ alert('Settings functionality would go here');
913
+ });
914
+
915
+ // Initialize with categories section visible
916
+ showSection('categories');
917
+ </script>
918
+ <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=Stevensayer7/time1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
919
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ any black text to white but all else the same