Hugging Face's logo

Spaces:
FPRZ
/
billboard-analytics
Running

App Files Community
FPRZ commited on
Commit
f6c0ace
·
verified ·
1 Parent(s): d6da526

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +598 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Billboard Analytics
3
- emoji: 🏢
4
  colorFrom: green
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: billboard-analytics
3
+ emoji: 🐳
4
  colorFrom: green
5
+ colorTo: red
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,598 @@
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>Billboard Digitalization Dashboard</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization"></script>
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <style>
11
+ .map-container {
12
+ height: 600px;
13
+ border-radius: 12px;
14
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
15
+ }
16
+ .sidebar {
17
+ transition: all 0.3s ease;
18
+ }
19
+ .progress-bar {
20
+ height: 8px;
21
+ border-radius: 4px;
22
+ }
23
+ .chart-container {
24
+ height: 250px;
25
+ }
26
+ .heatmap-legend {
27
+ background: linear-gradient(to right, rgba(0, 0, 255, 0.2), rgba(0, 255, 0, 0.2), rgba(255, 255, 0, 0.2), rgba(255, 165, 0, 0.2), rgba(255, 0, 0, 0.2));
28
+ }
29
+ .billboard-card:hover {
30
+ transform: translateY(-5px);
31
+ box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
32
+ }
33
+ </style>
34
+ </head>
35
+ <body class="bg-gray-100">
36
+ <div class="flex h-screen overflow-hidden">
37
+ <!-- Sidebar -->
38
+ <div class="sidebar bg-indigo-800 text-white w-64 flex-shrink-0">
39
+ <div class="p-4 flex items-center space-x-2">
40
+ <i class="fas fa-ad text-2xl text-yellow-300"></i>
41
+ <h1 class="text-xl font-bold">Billboard Digitalization</h1>
42
+ </div>
43
+ <nav class="mt-8">
44
+ <div class="px-4 py-2 text-indigo-200 uppercase text-xs font-semibold">Main</div>
45
+ <a href="#" class="block px-4 py-3 text-white bg-indigo-900">
46
+ <i class="fas fa-map-marker-alt mr-2"></i> Map View
47
+ </a>
48
+ <a href="#" class="block px-4 py-3 text-indigo-200 hover:text-white hover:bg-indigo-700">
49
+ <i class="fas fa-list-ul mr-2"></i> Inventory
50
+ </a>
51
+ <a href="#" class="block px-4 py-3 text-indigo-200 hover:text-white hover:bg-indigo-700">
52
+ <i class="fas fa-chart-line mr-2"></i> Analytics
53
+ </a>
54
+ <a href="#" class="block px-4 py-3 text-indigo-200 hover:text-white hover:bg-indigo-700">
55
+ <i class="fas fa-exchange-alt mr-2"></i> Conversion
56
+ </a>
57
+
58
+ <div class="px-4 py-2 text-indigo-200 uppercase text-xs font-semibold mt-6">Reports</div>
59
+ <a href="#" class="block px-4 py-3 text-indigo-200 hover:text-white hover:bg-indigo-700">
60
+ <i class="fas fa-eye mr-2"></i> Viewability
61
+ </a>
62
+ <a href="#" class="block px-4 py-3 text-indigo-200 hover:text-white hover:bg-indigo-700">
63
+ <i class="fas fa-car mr-2"></i> Traffic
64
+ </a>
65
+ <a href="#" class="block px-4 py-3 text-indigo-200 hover:text-white hover:bg-indigo-700">
66
+ <i class="fas fa-dollar-sign mr-2"></i> Revenue
67
+ </a>
68
+
69
+ <div class="px-4 py-2 text-indigo-200 uppercase text-xs font-semibold mt-6">Settings</div>
70
+ <a href="#" class="block px-4 py-3 text-indigo-200 hover:text-white hover:bg-indigo-700">
71
+ <i class="fas fa-cog mr-2"></i> Preferences
72
+ </a>
73
+ <a href="#" class="block px-4 py-3 text-indigo-200 hover:text-white hover:bg-indigo-700">
74
+ <i class="fas fa-users mr-2"></i> Users
75
+ </a>
76
+ </nav>
77
+ </div>
78
+
79
+ <!-- Main Content -->
80
+ <div class="flex-1 overflow-auto">
81
+ <!-- Top Navigation -->
82
+ <header class="bg-white shadow-sm">
83
+ <div class="flex justify-between items-center px-6 py-4">
84
+ <div class="flex items-center space-x-4">
85
+ <button class="text-gray-500 focus:outline-none">
86
+ <i class="fas fa-bars"></i>
87
+ </button>
88
+ <h2 class="text-xl font-semibold text-gray-800">Billboard Digitalization Dashboard</h2>
89
+ </div>
90
+ <div class="flex items-center space-x-4">
91
+ <div class="relative">
92
+ <input type="text" placeholder="Search billboards..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
93
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
94
+ </div>
95
+ <button class="p-2 text-gray-500 hover:text-gray-700">
96
+ <i class="fas fa-bell"></i>
97
+ </button>
98
+ <div class="flex items-center space-x-2">
99
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-8 h-8 rounded-full">
100
+ <span class="text-sm font-medium">John Doe</span>
101
+ </div>
102
+ </div>
103
+ </div>
104
+ </header>
105
+
106
+ <!-- Dashboard Content -->
107
+ <main class="p-6">
108
+ <!-- Stats Cards -->
109
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
110
+ <div class="bg-white rounded-lg shadow p-6">
111
+ <div class="flex justify-between items-start">
112
+ <div>
113
+ <p class="text-gray-500 text-sm">Total Billboards</p>
114
+ <h3 class="text-2xl font-bold mt-1">1,247</h3>
115
+ <p class="text-green-500 text-sm mt-2"><i class="fas fa-arrow-up mr-1"></i> 12% from last month</p>
116
+ </div>
117
+ <div class="bg-indigo-100 p-3 rounded-full">
118
+ <i class="fas fa-ad text-indigo-600 text-xl"></i>
119
+ </div>
120
+ </div>
121
+ </div>
122
+
123
+ <div class="bg-white rounded-lg shadow p-6">
124
+ <div class="flex justify-between items-start">
125
+ <div>
126
+ <p class="text-gray-500 text-sm">Avg. Viewability</p>
127
+ <h3 class="text-2xl font-bold mt-1">78%</h3>
128
+ <div class="w-full bg-gray-200 rounded-full h-2 mt-3">
129
+ <div class="bg-yellow-500 h-2 rounded-full" style="width: 78%"></div>
130
+ </div>
131
+ </div>
132
+ <div class="bg-yellow-100 p-3 rounded-full">
133
+ <i class="fas fa-eye text-yellow-600 text-xl"></i>
134
+ </div>
135
+ </div>
136
+ </div>
137
+
138
+ <div class="bg-white rounded-lg shadow p-6">
139
+ <div class="flex justify-between items-start">
140
+ <div>
141
+ <p class="text-gray-500 text-sm">Daily Traffic</p>
142
+ <h3 class="text-2xl font-bold mt-1">42,589</h3>
143
+ <p class="text-green-500 text-sm mt-2"><i class="fas fa-arrow-up mr-1"></i> 8% from last week</p>
144
+ </div>
145
+ <div class="bg-green-100 p-3 rounded-full">
146
+ <i class="fas fa-car text-green-600 text-xl"></i>
147
+ </div>
148
+ </div>
149
+ </div>
150
+
151
+ <div class="bg-white rounded-lg shadow p-6">
152
+ <div class="flex justify-between items-start">
153
+ <div>
154
+ <p class="text-gray-500 text-sm">Conversion Rate</p>
155
+ <h3 class="text-2xl font-bold mt-1">24%</h3>
156
+ <div class="w-full bg-gray-200 rounded-full h-2 mt-3">
157
+ <div class="bg-red-500 h-2 rounded-full" style="width: 24%"></div>
158
+ </div>
159
+ </div>
160
+ <div class="bg-red-100 p-3 rounded-full">
161
+ <i class="fas fa-exchange-alt text-red-600 text-xl"></i>
162
+ </div>
163
+ </div>
164
+ </div>
165
+ </div>
166
+
167
+ <!-- Map and Analytics -->
168
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
169
+ <!-- Map Container -->
170
+ <div class="lg:col-span-2 bg-white rounded-lg shadow p-4">
171
+ <div class="flex justify-between items-center mb-4">
172
+ <h3 class="font-semibold text-lg">Billboard Locations</h3>
173
+ <div class="flex space-x-2">
174
+ <button class="px-3 py-1 bg-indigo-600 text-white rounded-md text-sm flex items-center">
175
+ <i class="fas fa-layer-group mr-1"></i> Layers
176
+ </button>
177
+ <button class="px-3 py-1 bg-white border border-gray-300 rounded-md text-sm flex items-center">
178
+ <i class="fas fa-filter mr-1"></i> Filter
179
+ </button>
180
+ </div>
181
+ </div>
182
+ <div id="map" class="map-container"></div>
183
+ <div class="mt-3 flex justify-between items-center">
184
+ <div class="flex space-x-2">
185
+ <div class="flex items-center">
186
+ <div class="w-3 h-3 bg-red-500 rounded-full mr-1"></div>
187
+ <span class="text-xs">Low Viewability (<50%)</span>
188
+ </div>
189
+ <div class="flex items-center">
190
+ <div class="w-3 h-3 bg-yellow-500 rounded-full mr-1"></div>
191
+ <span class="text-xs">Medium (50-80%)</span>
192
+ </div>
193
+ <div class="flex items-center">
194
+ <div class="w-3 h-3 bg-green-500 rounded-full mr-1"></div>
195
+ <span class="text-xs">High (>80%)</span>
196
+ </div>
197
+ </div>
198
+ <button class="text-indigo-600 text-sm font-medium">
199
+ <i class="fas fa-expand mr-1"></i> Fullscreen
200
+ </button>
201
+ </div>
202
+ </div>
203
+
204
+ <!-- Billboard Details -->
205
+ <div class="bg-white rounded-lg shadow p-4 overflow-y-auto" style="max-height: 600px;">
206
+ <h3 class="font-semibold text-lg mb-4">Selected Billboard</h3>
207
+
208
+ <div class="bg-gray-100 rounded-lg p-4 mb-4">
209
+ <div class="flex justify-between items-start">
210
+ <div>
211
+ <h4 class="font-medium">Times Square Mega Billboard</h4>
212
+ <p class="text-gray-500 text-sm">ID: BBD-4872</p>
213
+ </div>
214
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Active</span>
215
+ </div>
216
+ <div class="mt-3 flex items-center text-sm">
217
+ <i class="fas fa-map-marker-alt text-gray-400 mr-1"></i>
218
+ <span>40.7577° N, 73.9857° W</span>
219
+ </div>
220
+ </div>
221
+
222
+ <div class="space-y-4">
223
+ <div>
224
+ <h4 class="text-sm font-medium text-gray-500 mb-1">Owner</h4>
225
+ <p class="text-sm">Lamar Advertising Co.</p>
226
+ </div>
227
+
228
+ <div>
229
+ <h4 class="text-sm font-medium text-gray-500 mb-1">Specifications</h4>
230
+ <div class="grid grid-cols-2 gap-2 text-sm">
231
+ <div>
232
+ <p class="text-gray-500">Type</p>
233
+ <p>Digital Billboard</p>
234
+ </div>
235
+ <div>
236
+ <p class="text-gray-500">Size</p>
237
+ <p>14.6m x 6.1m</p>
238
+ </div>
239
+ <div>
240
+ <p class="text-gray-500">Ratio</p>
241
+ <p>16:9</p>
242
+ </div>
243
+ <div>
244
+ <p class="text-gray-500">Illumination</p>
245
+ <p>LED Backlit</p>
246
+ </div>
247
+ </div>
248
+ </div>
249
+
250
+ <div>
251
+ <h4 class="text-sm font-medium text-gray-500 mb-1">Performance Metrics</h4>
252
+ <div class="space-y-2">
253
+ <div>
254
+ <div class="flex justify-between text-sm mb-1">
255
+ <span>Viewability</span>
256
+ <span>92%</span>
257
+ </div>
258
+ <div class="w-full bg-gray-200 rounded-full h-2">
259
+ <div class="bg-green-500 h-2 rounded-full" style="width: 92%"></div>
260
+ </div>
261
+ </div>
262
+ <div>
263
+ <div class="flex justify-between text-sm mb-1">
264
+ <span>Daily Impressions</span>
265
+ <span>1.2M</span>
266
+ </div>
267
+ <div class="w-full bg-gray-200 rounded-full h-2">
268
+ <div class="bg-blue-500 h-2 rounded-full" style="width: 85%"></div>
269
+ </div>
270
+ </div>
271
+ <div>
272
+ <div class="flex justify-between text-sm mb-1">
273
+ <span>Conversion Potential</span>
274
+ <span>High</span>
275
+ </div>
276
+ <div class="w-full bg-gray-200 rounded-full h-2">
277
+ <div class="bg-purple-500 h-2 rounded-full" style="width: 76%"></div>
278
+ </div>
279
+ </div>
280
+ </div>
281
+ </div>
282
+
283
+ <div>
284
+ <h4 class="text-sm font-medium text-gray-500 mb-1">Traffic Data</h4>
285
+ <div class="grid grid-cols-3 gap-2 text-sm">
286
+ <div class="bg-gray-100 p-2 rounded text-center">
287
+ <p class="text-gray-500">Vehicles</p>
288
+ <p class="font-medium">42,589</p>
289
+ </div>
290
+ <div class="bg-gray-100 p-2 rounded text-center">
291
+ <p class="text-gray-500">Pedestrians</p>
292
+ <p class="font-medium">136,742</p>
293
+ </div>
294
+ <div class="bg-gray-100 p-2 rounded text-center">
295
+ <p class="text-gray-500">Avg. Speed</p>
296
+ <p class="font-medium">12 mph</p>
297
+ </div>
298
+ </div>
299
+ </div>
300
+
301
+ <button class="w-full bg-indigo-600 text-white py-2 rounded-md text-sm font-medium mt-4">
302
+ <i class="fas fa-exchange-alt mr-1"></i> Initiate Digital Conversion
303
+ </button>
304
+ </div>
305
+ </div>
306
+ </div>
307
+
308
+ <!-- Billboard List and Charts -->
309
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
310
+ <!-- Billboard List -->
311
+ <div class="bg-white rounded-lg shadow p-4">
312
+ <div class="flex justify-between items-center mb-4">
313
+ <h3 class="font-semibold text-lg">Top Billboards</h3>
314
+ <button class="text-indigo-600 text-sm font-medium">View All</button>
315
+ </div>
316
+ <div class="space-y-4">
317
+ <div class="billboard-card bg-white border border-gray-200 rounded-lg p-4 transition-all duration-300 cursor-pointer hover:shadow-md">
318
+ <div class="flex justify-between items-start">
319
+ <div>
320
+ <h4 class="font-medium">Sunset Strip Billboard</h4>
321
+ <p class="text-gray-500 text-sm">Los Angeles, CA</p>
322
+ </div>
323
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">96%</span>
324
+ </div>
325
+ <div class="mt-3 flex justify-between text-sm">
326
+ <div>
327
+ <p class="text-gray-500">Daily Traffic</p>
328
+ <p class="font-medium">38,742</p>
329
+ </div>
330
+ <div>
331
+ <p class="text-gray-500">Size</p>
332
+ <p class="font-medium">10.6m x 5.2m</p>
333
+ </div>
334
+ </div>
335
+ </div>
336
+
337
+ <div class="billboard-card bg-white border border-gray-200 rounded-lg p-4 transition-all duration-300 cursor-pointer hover:shadow-md">
338
+ <div class="flex justify-between items-start">
339
+ <div>
340
+ <h4 class="font-medium">Michigan Ave Tower</h4>
341
+ <p class="text-gray-500 text-sm">Chicago, IL</p>
342
+ </div>
343
+ <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded">72%</span>
344
+ </div>
345
+ <div class="mt-3 flex justify-between text-sm">
346
+ <div>
347
+ <p class="text-gray-500">Daily Traffic</p>
348
+ <p class="font-medium">29,156</p>
349
+ </div>
350
+ <div>
351
+ <p class="text-gray-500">Size</p>
352
+ <p class="font-medium">8.4m x 3.8m</p>
353
+ </div>
354
+ </div>
355
+ </div>
356
+
357
+ <div class="billboard-card bg-white border border-gray-200 rounded-lg p-4 transition-all duration-300 cursor-pointer hover:shadow-md">
358
+ <div class="flex justify-between items-start">
359
+ <div>
360
+ <h4 class="font-medium">Bay Bridge Signage</h4>
361
+ <p class="text-gray-500 text-sm">San Francisco, CA</p>
362
+ </div>
363
+ <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded">43%</span>
364
+ </div>
365
+ <div class="mt-3 flex justify-between text-sm">
366
+ <div>
367
+ <p class="text-gray-500">Daily Traffic</p>
368
+ <p class="font-medium">52,891</p>
369
+ </div>
370
+ <div>
371
+ <p class="text-gray-500">Size</p>
372
+ <p class="font-medium">12.1m x 4.5m</p>
373
+ </div>
374
+ </div>
375
+ </div>
376
+ </div>
377
+ </div>
378
+
379
+ <!-- Viewability Chart -->
380
+ <div class="bg-white rounded-lg shadow p-4">
381
+ <div class="flex justify-between items-center mb-4">
382
+ <h3 class="font-semibold text-lg">Viewability by Type</h3>
383
+ <div class="flex space-x-2">
384
+ <button class="px-2 py-1 bg-white border border-gray-300 rounded-md text-xs">Week</button>
385
+ <button class="px-2 py-1 bg-indigo-600 text-white rounded-md text-xs">Month</button>
386
+ <button class="px-2 py-1 bg-white border border-gray-300 rounded-md text-xs">Year</button>
387
+ </div>
388
+ </div>
389
+ <div class="chart-container">
390
+ <canvas id="viewabilityChart"></canvas>
391
+ </div>
392
+ </div>
393
+
394
+ <!-- Traffic Heatmap -->
395
+ <div class="bg-white rounded-lg shadow p-4">
396
+ <div class="flex justify-between items-center mb-4">
397
+ <h3 class="font-semibold text-lg">Traffic Heatmap</h3>
398
+ <button class="text-indigo-600 text-sm font-medium">View Details</button>
399
+ </div>
400
+ <div class="chart-container">
401
+ <canvas id="trafficHeatmap"></canvas>
402
+ </div>
403
+ <div class="mt-3">
404
+ <div class="heatmap-legend h-4 rounded-md mb-2"></div>
405
+ <div class="flex justify-between text-xs text-gray-500">
406
+ <span>Low Traffic</span>
407
+ <span>Medium</span>
408
+ <span>High Traffic</span>
409
+ </div>
410
+ </div>
411
+ </div>
412
+ </div>
413
+ </main>
414
+ </div>
415
+ </div>
416
+
417
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
418
+ <script>
419
+ // Initialize Google Map
420
+ function initMap() {
421
+ const map = new google.maps.Map(document.getElementById("map"), {
422
+ center: { lat: 40.7128, lng: -74.0060 },
423
+ zoom: 12,
424
+ styles: [
425
+ {
426
+ featureType: "poi.business",
427
+ stylers: [{ visibility: "off" }]
428
+ },
429
+ {
430
+ featureType: "transit",
431
+ elementType: "labels.icon",
432
+ stylers: [{ visibility: "off" }]
433
+ }
434
+ ]
435
+ });
436
+
437
+ // Add sample billboard markers with different colors based on viewability
438
+ const billboards = [
439
+ { lat: 40.7577, lng: -73.9857, viewability: 92, title: "Times Square Billboard", id: "BBD-4872" },
440
+ { lat: 40.7580, lng: -73.9785, viewability: 85, title: "Broadway Tower", id: "BBD-5123" },
441
+ { lat: 40.7510, lng: -73.9875, viewability: 78, title: "Madison Square", id: "BBD-4981" },
442
+ { lat: 40.7400, lng: -73.9900, viewability: 65, title: "Flatiron District", id: "BBD-5234" },
443
+ { lat: 40.7300, lng: -73.9950, viewability: 45, title: "Union Square", id: "BBD-5092" },
444
+ { lat: 40.7150, lng: -74.0050, viewability: 92, title: "Wall Street", id: "BBD-5345" },
445
+ { lat: 40.7050, lng: -74.0150, viewability: 72, title: "Battery Park", id: "BBD-5213" }
446
+ ];
447
+
448
+ billboards.forEach(billboard => {
449
+ let color;
450
+ if (billboard.viewability >= 80) color = "green";
451
+ else if (billboard.viewability >= 50) color = "yellow";
452
+ else color = "red";
453
+
454
+ const marker = new google.maps.Marker({
455
+ position: { lat: billboard.lat, lng: billboard.lng },
456
+ map: map,
457
+ title: billboard.title,
458
+ icon: {
459
+ path: google.maps.SymbolPath.CIRCLE,
460
+ fillColor: color,
461
+ fillOpacity: 0.8,
462
+ strokeWeight: 0,
463
+ scale: 10
464
+ }
465
+ });
466
+
467
+ // Add click event to show info window
468
+ const infowindow = new google.maps.InfoWindow({
469
+ content: `
470
+ <div class="p-2">
471
+ <h4 class="font-medium">${billboard.title}</h4>
472
+ <p class="text-sm">ID: ${billboard.id}</p>
473
+ <p class="text-sm">Viewability: ${billboard.viewability}%</p>
474
+ <p class="text-sm">Lat: ${billboard.lat.toFixed(4)}, Lng: ${billboard.lng.toFixed(4)}</p>
475
+ </div>
476
+ `
477
+ });
478
+
479
+ marker.addListener("click", () => {
480
+ infowindow.open(map, marker);
481
+ });
482
+ });
483
+
484
+ // Add heatmap layer for traffic density
485
+ const heatmapData = [
486
+ { location: new google.maps.LatLng(40.7577, -73.9857), weight: 0.9 },
487
+ { location: new google.maps.LatLng(40.7580, -73.9785), weight: 0.7 },
488
+ { location: new google.maps.LatLng(40.7510, -73.9875), weight: 0.6 },
489
+ { location: new google.maps.LatLng(40.7400, -73.9900), weight: 0.5 },
490
+ { location: new google.maps.LatLng(40.7300, -73.9950), weight: 0.4 },
491
+ { location: new google.maps.LatLng(40.7150, -74.0050), weight: 0.8 },
492
+ { location: new google.maps.LatLng(40.7050, -74.0150), weight: 0.6 }
493
+ ];
494
+
495
+ const heatmap = new google.maps.visualization.HeatmapLayer({
496
+ data: heatmapData,
497
+ map: map,
498
+ radius: 30
499
+ });
500
+ }
501
+
502
+ // Initialize charts when DOM is loaded
503
+ document.addEventListener('DOMContentLoaded', function() {
504
+ // Viewability by Type Chart
505
+ const viewabilityCtx = document.getElementById('viewabilityChart').getContext('2d');
506
+ const viewabilityChart = new Chart(viewabilityCtx, {
507
+ type: 'bar',
508
+ data: {
509
+ labels: ['Digital', 'Bulletin', 'Poster', 'Wallscape', 'Transit'],
510
+ datasets: [{
511
+ label: 'Viewability %',
512
+ data: [85, 72, 65, 78, 68],
513
+ backgroundColor: [
514
+ 'rgba(79, 70, 229, 0.7)',
515
+ 'rgba(234, 88, 12, 0.7)',
516
+ 'rgba(16, 185, 129, 0.7)',
517
+ 'rgba(220, 38, 38, 0.7)',
518
+ 'rgba(245, 158, 11, 0.7)'
519
+ ],
520
+ borderColor: [
521
+ 'rgba(79, 70, 229, 1)',
522
+ 'rgba(234, 88, 12, 1)',
523
+ 'rgba(16, 185, 129, 1)',
524
+ 'rgba(220, 38, 38, 1)',
525
+ 'rgba(245, 158, 11, 1)'
526
+ ],
527
+ borderWidth: 1
528
+ }]
529
+ },
530
+ options: {
531
+ responsive: true,
532
+ maintainAspectRatio: false,
533
+ scales: {
534
+ y: {
535
+ beginAtZero: true,
536
+ max: 100,
537
+ ticks: {
538
+ callback: function(value) {
539
+ return value + '%';
540
+ }
541
+ }
542
+ }
543
+ },
544
+ plugins: {
545
+ legend: {
546
+ display: false
547
+ }
548
+ }
549
+ }
550
+ });
551
+
552
+ // Traffic Heatmap Chart
553
+ const trafficCtx = document.getElementById('trafficHeatmap').getContext('2d');
554
+ const trafficChart = new Chart(trafficCtx, {
555
+ type: 'line',
556
+ data: {
557
+ labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
558
+ datasets: [
559
+ {
560
+ label: 'Vehicles',
561
+ data: [32000, 35000, 38000, 42000, 45000, 28000, 22000],
562
+ borderColor: 'rgba(79, 70, 229, 1)',
563
+ backgroundColor: 'rgba(79, 70, 229, 0.1)',
564
+ tension: 0.3,
565
+ fill: true
566
+ },
567
+ {
568
+ label: 'Pedestrians',
569
+ data: [45000, 48000, 52000, 55000, 58000, 90000, 85000],
570
+ borderColor: 'rgba(16, 185, 129, 1)',
571
+ backgroundColor: 'rgba(16, 185, 129, 0.1)',
572
+ tension: 0.3,
573
+ fill: true
574
+ }
575
+ ]
576
+ },
577
+ options: {
578
+ responsive: true,
579
+ maintainAspectRatio: false,
580
+ plugins: {
581
+ legend: {
582
+ position: 'top',
583
+ }
584
+ },
585
+ scales: {
586
+ y: {
587
+ beginAtZero: true
588
+ }
589
+ }
590
+ }
591
+ });
592
+
593
+ // Initialize Google Maps
594
+ initMap();
595
+ });
596
+ </script>
597
+ <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=FPRZ/billboard-analytics" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
598
+ </html>
prompts.txt ADDED
File without changes