Hugging Face's logo

Spaces:
Stevensayer7
/
time
Running

App Files Community
Stevensayer7 commited on
Commit
a8ac40a
·
verified ·
1 Parent(s): 1f2dc6d

Add 3 files

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