Hugging Face's logo

Spaces:
privateuserh
/
plusbykes
Running

App Files Community
privateuserh commited on
Commit
cdff656
·
verified ·
1 Parent(s): 2b261ca

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +307 -160
index.html CHANGED
@@ -8,12 +8,6 @@
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
  <style>
11
- .map-container {
12
- height: 500px;
13
- border-radius: 1rem;
14
- overflow: hidden;
15
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
16
- }
17
  .station-card:hover {
18
  transform: translateY(-5px);
19
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
@@ -41,6 +35,14 @@
41
  50% { opacity: 0.5; }
42
  100% { opacity: 1; }
43
  }
 
 
 
 
 
 
 
 
44
  </style>
45
  </head>
46
  <body class="bg-gray-50">
@@ -53,10 +55,10 @@
53
  <h1 class="text-2xl font-bold">Metro Bike Share Tracker</h1>
54
  </div>
55
  <div class="hidden md:flex space-x-4">
56
- <a href="#" class="hover:text-blue-200">Live Map</a>
57
  <a href="#" class="hover:text-blue-200">Pricing</a>
58
  <a href="#" class="hover:text-blue-200">News</a>
59
- <a href="#" class="hover:text-blue-200">About</a>
60
  </div>
61
  <button class="md:hidden text-xl">
62
  <i class="fas fa-bars"></i>
@@ -70,14 +72,14 @@
70
  <div class="container mx-auto px-4">
71
  <div class="flex flex-col md:flex-row items-center">
72
  <div class="md:w-1/2 mb-8 md:mb-0">
73
- <h2 class="text-4xl font-bold mb-4">Real-Time Bike Share Data</h2>
74
- <p class="text-xl mb-6">Track availability, pricing trends, and station status across the Metro network</p>
75
  <div class="flex space-x-4">
76
  <button class="bg-white text-blue-600 px-6 py-3 rounded-lg font-semibold hover:bg-blue-50 transition">
77
- <i class="fas fa-map-marker-alt mr-2"></i> View Live Map
78
  </button>
79
  <button class="border border-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-600 transition">
80
- <i class="fas fa-chart-line mr-2"></i> Pricing Trends
81
  </button>
82
  </div>
83
  </div>
@@ -114,142 +116,149 @@
114
 
115
  <!-- Main Content -->
116
  <main class="container mx-auto px-4 py-12">
117
- <!-- Map Section -->
118
  <section class="mb-16">
119
- <div class="flex justify-between items-center mb-6">
120
- <h2 class="text-2xl font-bold text-gray-800">Live Station Map</h2>
121
- <div class="flex space-x-2">
122
- <button class="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm">
123
- <i class="fas fa-sync-alt mr-2"></i> Refresh
124
- </button>
125
- <div class="relative">
126
- <select class="appearance-none bg-white border border-gray-300 rounded-lg pl-4 pr-8 py-2 text-sm">
127
- <option>All Stations</option>
128
- <option>Downtown LA</option>
129
- <option>Westside</option>
130
- <option>San Fernando Valley</option>
131
- </select>
132
- <div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
133
- <i class="fas fa-chevron-down text-gray-500"></i>
134
  </div>
 
 
 
 
 
135
  </div>
136
  </div>
137
- </div>
138
- <div class="map-container bg-gray-200 relative">
139
- <!-- Map placeholder - in a real app this would be a map library like Leaflet or Google Maps -->
140
- <div class="absolute inset-0 flex items-center justify-center">
141
- <div class="text-center">
142
- <i class="fas fa-map-marked-alt text-5xl text-gray-400 mb-4"></i>
143
- <p class="text-gray-600">Interactive map would display here with real-time station data</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
144
  </div>
145
  </div>
146
  </div>
147
  </section>
148
 
149
- <!-- Station List -->
150
  <section class="mb-16">
151
- <h2 class="text-2xl font-bold text-gray-800 mb-6">Nearby Stations</h2>
152
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
153
- <!-- Station Card 1 -->
154
- <div class="station-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 availability-high">
155
- <div class="p-5">
156
- <div class="flex justify-between items-start">
157
- <div>
158
- <h3 class="font-bold text-lg">Union Station</h3>
159
- <p class="text-gray-500 text-sm">800 N Alameda St</p>
160
- </div>
161
- <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">0.3 mi</span>
162
- </div>
163
- <div class="mt-4 flex justify-between">
164
- <div>
165
- <p class="text-gray-500 text-sm">Bikes Available</p>
166
- <p class="text-2xl font-bold">12</p>
167
- </div>
168
- <div>
169
- <p class="text-gray-500 text-sm">Docks Available</p>
170
- <p class="text-2xl font-bold">8</p>
171
- </div>
172
- </div>
173
  </div>
174
- <div class="bg-gray-50 px-5 py-3 flex justify-between items-center">
175
- <div class="flex items-center">
176
- <i class="fas fa-clock text-gray-400 mr-2"></i>
177
- <span class="text-sm text-gray-600">Updated 2 min ago</span>
178
- </div>
179
- <button class="text-blue-600 text-sm font-semibold hover:text-blue-800">
180
- <i class="fas fa-directions mr-1"></i> Directions
181
- </button>
182
  </div>
183
  </div>
184
 
185
- <!-- Station Card 2 -->
186
- <div class="station-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 availability-medium">
187
- <div class="p-5">
188
- <div class="flex justify-between items-start">
189
- <div>
190
- <h3 class="font-bold text-lg">Pershing Square</h3>
191
- <p class="text-gray-500 text-sm">532 S Olive St</p>
192
- </div>
193
- <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">0.7 mi</span>
194
- </div>
195
- <div class="mt-4 flex justify-between">
196
- <div>
197
- <p class="text-gray-500 text-sm">Bikes Available</p>
198
- <p class="text-2xl font-bold">4</p>
199
- </div>
200
- <div>
201
- <p class="text-gray-500 text-sm">Docks Available</p>
202
- <p class="text-2xl font-bold">3</p>
203
- </div>
204
- </div>
205
  </div>
206
- <div class="bg-gray-50 px-5 py-3 flex justify-between items-center">
207
- <div class="flex items-center">
208
- <i class="fas fa-clock text-gray-400 mr-2"></i>
209
- <span class="text-sm text-gray-600">Updated 5 min ago</span>
210
- </div>
211
- <button class="text-blue-600 text-sm font-semibold hover:text-blue-800">
212
- <i class="fas fa-directions mr-1"></i> Directions
213
- </button>
214
  </div>
215
  </div>
216
 
217
- <!-- Station Card 3 -->
218
- <div class="station-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 availability-low">
219
- <div class="p-5">
220
- <div class="flex justify-between items-start">
221
- <div>
222
- <h3 class="font-bold text-lg">Grand Park</h3>
223
- <p class="text-gray-500 text-sm">200 N Grand Ave</p>
224
- </div>
225
- <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">1.2 mi</span>
226
- </div>
227
- <div class="mt-4 flex justify-between">
228
- <div>
229
- <p class="text-gray-500 text-sm">Bikes Available</p>
230
- <p class="text-2xl font-bold">0</p>
231
- </div>
232
- <div>
233
- <p class="text-gray-500 text-sm">Docks Available</p>
234
- <p class="text-2xl font-bold">15</p>
235
- </div>
236
- </div>
237
  </div>
238
- <div class="bg-gray-50 px-5 py-3 flex justify-between items-center">
239
- <div class="flex items-center">
240
- <i class="fas fa-clock text-gray-400 mr-2"></i>
241
- <span class="text-sm text-gray-600">Updated 8 min ago</span>
242
- </div>
243
- <button class="text-blue-600 text-sm font-semibold hover:text-blue-800">
244
- <i class="fas fa-directions mr-1"></i> Directions
245
- </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
246
  </div>
247
  </div>
248
- </div>
249
- <div class="mt-6 text-center">
250
- <button class="text-blue-600 font-semibold hover:text-blue-800">
251
- View All Stations <i class="fas fa-chevron-right ml-1"></i>
252
- </button>
253
  </div>
254
  </section>
255
 
@@ -289,11 +298,11 @@
289
  <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full mr-2">NEW</span>
290
  <span class="text-gray-500 text-sm">May 15, 2023</span>
291
  </div>
292
- <h3 class="font-bold text-lg mb-2">Metro Expands Bike Share to Westside</h3>
293
- <p class="text-gray-600 mb-4">10 new stations added in Santa Monica and Venice, increasing system capacity by 15%.</p>
294
  <div class="flex justify-between items-center">
295
  <span class="text-sm text-blue-600 font-semibold">
296
- <i class="fas fa-arrow-up price-trend-up mr-1"></i> 12% more rides in first week
297
  </span>
298
  <button class="text-blue-600 text-sm font-semibold hover:text-blue-800">
299
  Read More <i class="fas fa-chevron-right ml-1"></i>
@@ -329,11 +338,11 @@
329
  <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full mr-2">UPDATE</span>
330
  <span class="text-gray-500 text-sm">May 5, 2023</span>
331
  </div>
332
- <h3 class="font-bold text-lg mb-2">New E-Bike Fleet Added</h3>
333
- <p class="text-gray-600 mb-4">200 electric-assist bikes now available at 30 stations across downtown.</p>
334
  <div class="flex justify-between items-center">
335
  <span class="text-sm text-blue-600 font-semibold">
336
- <i class="fas fa-bolt mr-1"></i> $1.00 per 30min extra
337
  </span>
338
  <button class="text-blue-600 text-sm font-semibold hover:text-blue-800">
339
  Read More <i class="fas fa-chevron-right ml-1"></i>
@@ -349,11 +358,11 @@
349
  <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full mr-2">TREND</span>
350
  <span class="text-gray-500 text-sm">April 28, 2023</span>
351
  </div>
352
- <h3 class="font-bold text-lg mb-2">Ridership Hits Record High</h3>
353
- <p class="text-gray-600 mb-4">March saw 12% more rides than previous record, with average trip duration decreasing.</p>
354
  <div class="flex justify-between items-center">
355
  <span class="text-sm text-blue-600 font-semibold">
356
- <i class="fas fa-arrow-down price-trend-down mr-1"></i> 8% fewer empty docks
357
  </span>
358
  <button class="text-blue-600 text-sm font-semibold hover:text-blue-800">
359
  Read More <i class="fas fa-chevron-right ml-1"></i>
@@ -371,7 +380,7 @@
371
  <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
372
  <div>
373
  <h3 class="font-bold text-lg mb-4">Metro Bike Share</h3>
374
- <p class="text-gray-400">Real-time tracking and analytics for Los Angeles' bike share system.</p>
375
  <div class="mt-4 flex space-x-4">
376
  <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
377
  <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook"></i></a>
@@ -381,19 +390,19 @@
381
  <div>
382
  <h3 class="font-bold text-lg mb-4">Quick Links</h3>
383
  <ul class="space-y-2">
384
- <li><a href="#" class="text-gray-400 hover:text-white">Live Map</a></li>
385
- <li><a href="#" class="text-gray-400 hover:text-white">Station List</a></li>
386
  <li><a href="#" class="text-gray-400 hover:text-white">Pricing</a></li>
387
- <li><a href="#" class="text-gray-400 hover:text-white">Membership</a></li>
388
  </ul>
389
  </div>
390
  <div>
391
- <h3 class="font-bold text-lg mb-4">Resources</h3>
392
  <ul class="space-y-2">
393
- <li><a href="#" class="text-gray-400 hover:text-white">API Documentation</a></li>
394
- <li><a href="#" class="text-gray-400 hover:text-white">Developer Portal</a></li>
395
- <li><a href="#" class="text-gray-400 hover:text-white">Data Downloads</a></li>
396
- <li><a href="#" class="text-gray-400 hover:text-white">System Map</a></li>
397
  </ul>
398
  </div>
399
  <div>
@@ -415,7 +424,7 @@
415
  </div>
416
  </div>
417
  <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
418
- <p>&copy; 2023 Metro Bike Share Tracker. Not affiliated with Metro Los Angeles.</p>
419
  </div>
420
  </div>
421
  </footer>
@@ -469,6 +478,159 @@
469
  }
470
  });
471
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
472
  // Pricing Trend Chart
473
  const pricingCtx = document.getElementById('pricingTrendChart').getContext('2d');
474
  const pricingChart = new Chart(pricingCtx, {
@@ -504,21 +666,6 @@
504
  return context.dataset.label + ': $' + context.raw.toFixed(2);
505
  }
506
  }
507
- },
508
- annotation: {
509
- annotations: {
510
- line1: {
511
- type: 'line',
512
- yMin: 3.50,
513
- yMax: 3.50,
514
- borderColor: 'rgb(255, 99, 132)',
515
- borderWidth: 2,
516
- label: {
517
- content: 'Price increase coming',
518
- enabled: true
519
- }
520
- }
521
- }
522
  }
523
  },
524
  scales: {
 
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
  <style>
 
 
 
 
 
 
11
  .station-card:hover {
12
  transform: translateY(-5px);
13
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 
35
  50% { opacity: 0.5; }
36
  100% { opacity: 1; }
37
  }
38
+ .forecast-card {
39
+ background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
40
+ border-radius: 1rem;
41
+ }
42
+ .beach-card {
43
+ background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
44
+ border-radius: 1rem;
45
+ }
46
  </style>
47
  </head>
48
  <body class="bg-gray-50">
 
55
  <h1 class="text-2xl font-bold">Metro Bike Share Tracker</h1>
56
  </div>
57
  <div class="hidden md:flex space-x-4">
58
+ <a href="#" class="hover:text-blue-200">Dashboard</a>
59
  <a href="#" class="hover:text-blue-200">Pricing</a>
60
  <a href="#" class="hover:text-blue-200">News</a>
61
+ <a href="#" class="hover:text-blue-200">Beach Locations</a>
62
  </div>
63
  <button class="md:hidden text-xl">
64
  <i class="fas fa-bars"></i>
 
72
  <div class="container mx-auto px-4">
73
  <div class="flex flex-col md:flex-row items-center">
74
  <div class="md:w-1/2 mb-8 md:mb-0">
75
+ <h2 class="text-4xl font-bold mb-4">Bike Share Data & 2025 Forecasts</h2>
76
+ <p class="text-xl mb-6">Track current availability and explore growth projections for California's bike share network</p>
77
  <div class="flex space-x-4">
78
  <button class="bg-white text-blue-600 px-6 py-3 rounded-lg font-semibold hover:bg-blue-50 transition">
79
+ <i class="fas fa-chart-line mr-2"></i> View Trends
80
  </button>
81
  <button class="border border-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-600 transition">
82
+ <i class="fas fa-umbrella-beach mr-2"></i> Beach Locations
83
  </button>
84
  </div>
85
  </div>
 
116
 
117
  <!-- Main Content -->
118
  <main class="container mx-auto px-4 py-12">
119
+ <!-- 2025 Forecast Section -->
120
  <section class="mb-16">
121
+ <h2 class="text-2xl font-bold text-gray-800 mb-6">2025 Growth Forecast</h2>
122
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
123
+ <!-- Forecast Card 1 -->
124
+ <div class="forecast-card p-6 shadow-md">
125
+ <div class="flex items-center mb-4">
126
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
127
+ <i class="fas fa-chart-line text-blue-600 text-xl"></i>
 
 
 
 
 
 
 
 
128
  </div>
129
+ <h3 class="font-bold text-lg">Projected Expansion</h3>
130
+ </div>
131
+ <p class="text-gray-600 mb-4">Metro Bike Share plans to double its fleet by 2025, adding 150 new stations across Los Angeles County with focus on beach communities and transit connections.</p>
132
+ <div class="mt-4">
133
+ <canvas id="expansionChart"></canvas>
134
  </div>
135
  </div>
136
+
137
+ <!-- Forecast Card 2 -->
138
+ <div class="forecast-card p-6 shadow-md">
139
+ <div class="flex items-center mb-4">
140
+ <div class="bg-green-100 p-3 rounded-full mr-4">
141
+ <i class="fas fa-users text-green-600 text-xl"></i>
142
+ </div>
143
+ <h3 class="font-bold text-lg">Ridership Projections</h3>
144
+ </div>
145
+ <p class="text-gray-600 mb-4">With expanded service area and improved integration with transit, annual ridership is expected to grow from 1.2M to 3.5M trips by 2025.</p>
146
+ <div class="mt-4">
147
+ <canvas id="ridershipChart"></canvas>
148
+ </div>
149
+ </div>
150
+
151
+ <!-- Forecast Card 3 -->
152
+ <div class="forecast-card p-6 shadow-md">
153
+ <div class="flex items-center mb-4">
154
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
155
+ <i class="fas fa-bolt text-purple-600 text-xl"></i>
156
+ </div>
157
+ <h3 class="font-bold text-lg">E-Bike Adoption</h3>
158
+ </div>
159
+ <p class="text-gray-600 mb-4">Electric-assist bikes will comprise 40% of the fleet by 2025, making hilly areas and longer trips more accessible to riders.</p>
160
+ <div class="mt-4">
161
+ <canvas id="ebikeChart"></canvas>
162
+ </div>
163
+ </div>
164
+
165
+ <!-- Forecast Card 4 -->
166
+ <div class="forecast-card p-6 shadow-md">
167
+ <div class="flex items-center mb-4">
168
+ <div class="bg-yellow-100 p-3 rounded-full mr-4">
169
+ <i class="fas fa-dollar-sign text-yellow-600 text-xl"></i>
170
+ </div>
171
+ <h3 class="font-bold text-lg">Economic Impact</h3>
172
+ </div>
173
+ <p class="text-gray-600 mb-4">The expanded system is projected to generate $28M in annual revenue and support 120 new local jobs by 2025.</p>
174
+ <div class="mt-4">
175
+ <canvas id="economicChart"></canvas>
176
  </div>
177
  </div>
178
  </div>
179
  </section>
180
 
181
+ <!-- California Beach Locations -->
182
  <section class="mb-16">
183
+ <h2 class="text-2xl font-bold text-gray-800 mb-6">California Beach Locations</h2>
184
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
185
+ <!-- Beach Card 1 -->
186
+ <div class="beach-card p-5 shadow-md">
187
+ <div class="flex items-center mb-3">
188
+ <i class="fas fa-umbrella-beach text-blue-500 mr-3"></i>
189
+ <h3 class="font-bold text-lg">Santa Monica</h3>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
190
  </div>
191
+ <p class="text-gray-600 mb-3">42 stations along the beach path and downtown area. Expansion planned for 2024.</p>
192
+ <div class="flex justify-between text-sm">
193
+ <span class="text-gray-500">Bikes: 280+</span>
194
+ <a href="https://www.bikeshare.metro.net" class="text-blue-600 hover:underline">Details</a>
 
 
 
 
195
  </div>
196
  </div>
197
 
198
+ <!-- Beach Card 2 -->
199
+ <div class="beach-card p-5 shadow-md">
200
+ <div class="flex items-center mb-3">
201
+ <i class="fas fa-umbrella-beach text-blue-500 mr-3"></i>
202
+ <h3 class="font-bold text-lg">Venice Beach</h3>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
203
  </div>
204
+ <p class="text-gray-600 mb-3">28 stations along the boardwalk and canals. New e-bikes coming 2024.</p>
205
+ <div class="flex justify-between text-sm">
206
+ <span class="text-gray-500">Bikes: 180+</span>
207
+ <a href="https://www.bikeshare.metro.net" class="text-blue-600 hover:underline">Details</a>
 
 
 
 
208
  </div>
209
  </div>
210
 
211
+ <!-- Beach Card 3 -->
212
+ <div class="beach-card p-5 shadow-md">
213
+ <div class="flex items-center mb-3">
214
+ <i class="fas fa-umbrella-beach text-blue-500 mr-3"></i>
215
+ <h3 class="font-bold text-lg">Long Beach</h3>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
216
  </div>
217
+ <p class="text-gray-600 mb-3">35 stations serving downtown and shoreline areas. Integrated with Metro system.</p>
218
+ <div class="flex justify-between text-sm">
219
+ <span class="text-gray-500">Bikes: 250+</span>
220
+ <a href="https://www.longbeachbikeshare.com" class="text-blue-600 hover:underline">Details</a>
221
+ </div>
222
+ </div>
223
+
224
+ <!-- Beach Card 4 -->
225
+ <div class="beach-card p-5 shadow-md">
226
+ <div class="flex items-center mb-3">
227
+ <i class="fas fa-umbrella-beach text-blue-500 mr-3"></i>
228
+ <h3 class="font-bold text-lg">Huntington Beach</h3>
229
+ </div>
230
+ <p class="text-gray-600 mb-3">New pilot program launching 2024 with 15 stations along the pier and main beach.</p>
231
+ <div class="flex justify-between text-sm">
232
+ <span class="text-gray-500">Coming 2024</span>
233
+ <a href="https://www.huntingtonbeachca.gov" class="text-blue-600 hover:underline">Details</a>
234
+ </div>
235
+ </div>
236
+
237
+ <!-- Beach Card 5 -->
238
+ <div class="beach-card p-5 shadow-md">
239
+ <div class="flex items-center mb-3">
240
+ <i class="fas fa-umbrella-beach text-blue-500 mr-3"></i>
241
+ <h3 class="font-bold text-lg">San Diego</h3>
242
+ </div>
243
+ <p class="text-gray-600 mb-3">60+ stations in Mission Beach and Pacific Beach areas. Largest beach network in CA.</p>
244
+ <div class="flex justify-between text-sm">
245
+ <span class="text-gray-500">Bikes: 400+</span>
246
+ <a href="https://www.sandiego.gov" class="text-blue-600 hover:underline">Details</a>
247
+ </div>
248
+ </div>
249
+
250
+ <!-- Beach Card 6 -->
251
+ <div class="beach-card p-5 shadow-md">
252
+ <div class="flex items-center mb-3">
253
+ <i class="fas fa-umbrella-beach text-blue-500 mr-3"></i>
254
+ <h3 class="font-bold text-lg">Santa Barbara</h3>
255
+ </div>
256
+ <p class="text-gray-600 mb-3">20 stations along waterfront and downtown. Electric bike fleet only.</p>
257
+ <div class="flex justify-between text-sm">
258
+ <span class="text-gray-500">Bikes: 150+</span>
259
+ <a href="https://www.santabarbaraca.gov" class="text-blue-600 hover:underline">Details</a>
260
  </div>
261
  </div>
 
 
 
 
 
262
  </div>
263
  </section>
264
 
 
298
  <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full mr-2">NEW</span>
299
  <span class="text-gray-500 text-sm">May 15, 2023</span>
300
  </div>
301
+ <h3 class="font-bold text-lg mb-2">Metro Announces 2025 Expansion Plan</h3>
302
+ <p class="text-gray-600 mb-4">$45M investment will bring bike share to 15 new beach communities and double the current fleet size by 2025.</p>
303
  <div class="flex justify-between items-center">
304
  <span class="text-sm text-blue-600 font-semibold">
305
+ <i class="fas fa-arrow-up price-trend-up mr-1"></i> 150 new stations planned
306
  </span>
307
  <button class="text-blue-600 text-sm font-semibold hover:text-blue-800">
308
  Read More <i class="fas fa-chevron-right ml-1"></i>
 
338
  <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full mr-2">UPDATE</span>
339
  <span class="text-gray-500 text-sm">May 5, 2023</span>
340
  </div>
341
+ <h3 class="font-bold text-lg mb-2">Long Beach Integration Complete</h3>
342
+ <p class="text-gray-600 mb-4">TapToGo payment system now works across all Metro and Long Beach bike share stations.</p>
343
  <div class="flex justify-between items-center">
344
  <span class="text-sm text-blue-600 font-semibold">
345
+ <i class="fas fa-credit-card mr-1"></i> Single payment system
346
  </span>
347
  <button class="text-blue-600 text-sm font-semibold hover:text-blue-800">
348
  Read More <i class="fas fa-chevron-right ml-1"></i>
 
358
  <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full mr-2">TREND</span>
359
  <span class="text-gray-500 text-sm">April 28, 2023</span>
360
  </div>
361
+ <h3 class="font-bold text-lg mb-2">Beach Ridership Soars</h3>
362
+ <p class="text-gray-600 mb-4">Santa Monica and Venice stations see 40% increase in usage as summer season begins.</p>
363
  <div class="flex justify-between items-center">
364
  <span class="text-sm text-blue-600 font-semibold">
365
+ <i class="fas fa-arrow-up price-trend-up mr-1"></i> Record beach usage
366
  </span>
367
  <button class="text-blue-600 text-sm font-semibold hover:text-blue-800">
368
  Read More <i class="fas fa-chevron-right ml-1"></i>
 
380
  <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
381
  <div>
382
  <h3 class="font-bold text-lg mb-4">Metro Bike Share</h3>
383
+ <p class="text-gray-400">Real-time tracking and analytics for California's bike share system.</p>
384
  <div class="mt-4 flex space-x-4">
385
  <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
386
  <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook"></i></a>
 
390
  <div>
391
  <h3 class="font-bold text-lg mb-4">Quick Links</h3>
392
  <ul class="space-y-2">
393
+ <li><a href="#" class="text-gray-400 hover:text-white">Dashboard</a></li>
394
+ <li><a href="#" class="text-gray-400 hover:text-white">Beach Locations</a></li>
395
  <li><a href="#" class="text-gray-400 hover:text-white">Pricing</a></li>
396
+ <li><a href="#" class="text-gray-400 hover:text-white">2025 Forecast</a></li>
397
  </ul>
398
  </div>
399
  <div>
400
+ <h3 class="font-bold text-lg mb-4">Partner Systems</h3>
401
  <ul class="space-y-2">
402
+ <li><a href="https://www.taptogo.net/MetroBikeShare" class="text-gray-400 hover:text-white">TapToGo Payment</a></li>
403
+ <li><a href="https://www.longbeachbikeshare.com" class="text-gray-400 hover:text-white">Long Beach Bike Share</a></li>
404
+ <li><a href="https://bikeshare.metro.net" class="text-gray-400 hover:text-white">Metro Bike Share</a></li>
405
+ <li><a href="https://www.baywheels.com" class="text-gray-400 hover:text-white">Bay Wheels (NorCal)</a></li>
406
  </ul>
407
  </div>
408
  <div>
 
424
  </div>
425
  </div>
426
  <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
427
+ <p>&copy; 2023 California Bike Share Tracker. Data provided by Metro and partner agencies.</p>
428
  </div>
429
  </div>
430
  </footer>
 
478
  }
479
  });
480
 
481
+ // Expansion Forecast Chart
482
+ const expansionCtx = document.getElementById('expansionChart').getContext('2d');
483
+ const expansionChart = new Chart(expansionCtx, {
484
+ type: 'bar',
485
+ data: {
486
+ labels: ['2020', '2021', '2022', '2023', '2024', '2025'],
487
+ datasets: [{
488
+ label: 'Number of Stations',
489
+ data: [80, 95, 110, 142, 180, 290],
490
+ backgroundColor: 'rgba(59, 130, 246, 0.7)',
491
+ borderColor: 'rgba(59, 130, 246, 1)',
492
+ borderWidth: 1
493
+ }]
494
+ },
495
+ options: {
496
+ responsive: true,
497
+ plugins: {
498
+ legend: {
499
+ display: false
500
+ },
501
+ tooltip: {
502
+ callbacks: {
503
+ label: function(context) {
504
+ return context.dataset.label + ': ' + context.raw;
505
+ }
506
+ }
507
+ }
508
+ },
509
+ scales: {
510
+ y: {
511
+ beginAtZero: true,
512
+ title: {
513
+ display: true,
514
+ text: 'Number of Stations'
515
+ }
516
+ }
517
+ }
518
+ }
519
+ });
520
+
521
+ // Ridership Forecast Chart
522
+ const ridershipCtx = document.getElementById('ridershipChart').getContext('2d');
523
+ const ridershipChart = new Chart(ridershipCtx, {
524
+ type: 'line',
525
+ data: {
526
+ labels: ['2020', '2021', '2022', '2023', '2024', '2025'],
527
+ datasets: [{
528
+ label: 'Annual Ridership (millions)',
529
+ data: [0.8, 1.0, 1.2, 1.5, 2.4, 3.5],
530
+ backgroundColor: 'rgba(16, 185, 129, 0.1)',
531
+ borderColor: 'rgba(16, 185, 129, 1)',
532
+ borderWidth: 2,
533
+ tension: 0.3,
534
+ fill: true
535
+ }]
536
+ },
537
+ options: {
538
+ responsive: true,
539
+ plugins: {
540
+ legend: {
541
+ display: false
542
+ },
543
+ tooltip: {
544
+ callbacks: {
545
+ label: function(context) {
546
+ return context.dataset.label + ': ' + context.raw + 'M';
547
+ }
548
+ }
549
+ }
550
+ },
551
+ scales: {
552
+ y: {
553
+ beginAtZero: true,
554
+ title: {
555
+ display: true,
556
+ text: 'Annual Ridership (millions)'
557
+ }
558
+ }
559
+ }
560
+ }
561
+ });
562
+
563
+ // E-Bike Forecast Chart
564
+ const ebikeCtx = document.getElementById('ebikeChart').getContext('2d');
565
+ const ebikeChart = new Chart(ebikeCtx, {
566
+ type: 'doughnut',
567
+ data: {
568
+ labels: ['Traditional Bikes', 'E-Bikes'],
569
+ datasets: [{
570
+ data: [85, 15],
571
+ backgroundColor: [
572
+ 'rgba(99, 102, 241, 0.7)',
573
+ 'rgba(168, 85, 247, 0.7)'
574
+ ],
575
+ borderColor: [
576
+ 'rgba(99, 102, 241, 1)',
577
+ 'rgba(168, 85, 247, 1)'
578
+ ],
579
+ borderWidth: 1
580
+ }]
581
+ },
582
+ options: {
583
+ responsive: true,
584
+ plugins: {
585
+ legend: {
586
+ position: 'bottom',
587
+ },
588
+ title: {
589
+ display: true,
590
+ text: 'Current Fleet (2023)'
591
+ }
592
+ }
593
+ }
594
+ });
595
+
596
+ // Economic Impact Chart
597
+ const economicCtx = document.getElementById('economicChart').getContext('2d');
598
+ const economicChart = new Chart(economicCtx, {
599
+ type: 'bar',
600
+ data: {
601
+ labels: ['Revenue ($M)', 'Jobs Created'],
602
+ datasets: [
603
+ {
604
+ label: '2023',
605
+ data: [12, 60],
606
+ backgroundColor: 'rgba(234, 179, 8, 0.7)',
607
+ borderColor: 'rgba(234, 179, 8, 1)',
608
+ borderWidth: 1
609
+ },
610
+ {
611
+ label: '2025 Projected',
612
+ data: [28, 120],
613
+ backgroundColor: 'rgba(245, 158, 11, 0.7)',
614
+ borderColor: 'rgba(245, 158, 11, 1)',
615
+ borderWidth: 1
616
+ }
617
+ ]
618
+ },
619
+ options: {
620
+ responsive: true,
621
+ plugins: {
622
+ legend: {
623
+ position: 'bottom',
624
+ }
625
+ },
626
+ scales: {
627
+ y: {
628
+ beginAtZero: true
629
+ }
630
+ }
631
+ }
632
+ });
633
+
634
  // Pricing Trend Chart
635
  const pricingCtx = document.getElementById('pricingTrendChart').getContext('2d');
636
  const pricingChart = new Chart(pricingCtx, {
 
666
  return context.dataset.label + ': $' + context.raw.toFixed(2);
667
  }
668
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
669
  }
670
  },
671
  scales: {