PageSourceSearch

https://metromatchapp.com/destinations

html metromatchapp.com collected 2026-10-07 21:51:34 UTC 239,971 bytes, 6,873 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <!-- Character Encoding and Viewport -->
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    
8    <!-- Primary SEO Meta Tags -->
9    <title>DC Metro Station Destinations - Hotels, Restaurants, Bars & Amenities | MetroMatch</title>
10    <meta name="description" content="Explore what's near every DC Metro station. Find hotels, restaurants, bars, coffee shops, pharmacies, and supermarkets within walking distance of Washington Metro stations. Your guide to car-free DC neighborhoods.">
11    <meta name="keywords" content="DC Metro stations, Metro accessible hotels, restaurants near Metro, DC station amenities, Metro station guide, Washington Metro destinations, car-free DC neighborhoods, Metro station directory">
12    
13    <!-- Canonical URL -->
14    <link rel="canonical" href="https://metromatchapp.com/destinations">
15    
16    <!-- Geographic Meta Tags for Local SEO -->
17    <meta name="geo.region" content="US-DC">
18    <meta name="geo.placename" content="Washington, District of Columbia">
19    <meta name="geo.position" content="38.9072;-77.0369">
20    
21    <!-- Open Graph Tags for Social Media -->
22    <meta property="og:title" content="DC Metro Station Destinations Guide | MetroMatch">
23    <meta property="og:description" content="Discover hotels, restaurants, bars, and amenities near every DC Metro station. Plan your car-free outing in Washington.">
24    <meta property="og:type" content="website">
25    <meta property="og:url" content="https://metromatchapp.com/destinations">
26    <meta property="og:image" content="https://metromatchapp.com/static/images/metromatch-preview.jpg">
27    <meta property="og:image:width" content="1200">
28    <meta property="og:image:height" content="630">
29    <meta property="og:image:type" content="image/jpeg">
30    <meta property="og:image:alt" content="MetroMatch DC Metro destinations guide">
31    <meta property="og:locale" content="en_US">
32    <meta property="og:site_name" content="MetroMatch">
33    
34    <!-- Twitter Card Tags -->
35    <meta name="twitter:card" content="summary_large_image">
36    <meta name="twitter:title" content="DC Metro Station Destinations Guide | MetroMatch">
37    <meta name="twitter:description" content="Discover hotels, restaurants, bars, and amenities near every DC Metro station.">
38    <meta name="twitter:image" content="https://metromatchapp.com/static/images/metromatch-preview.jpg">
39    
40    <!-- Favicon -->
41    <link rel="icon" href="/static/favicon.ico" type="image/x-icon">
42    
43    <!-- Structured Data (JSON-LD) for Search Engines -->
44    
44<script type="application/ld+json">
45    {
46      "@context": "https://schema.org",
47      "@type": "ItemList",
48      "name": "DC Metro Station Destinations",
49      "description": "Complete directory of Washington DC Metro stations with nearby hotels, restaurants, bars, and amenities",
50      "url": "https://metromatchapp.com/destinations",
51      "numberOfItems": "125",
52      "itemListElement": [
53        {
54          "@type": "ListItem",
55          "position": 1,
56          "item": {
57            "@type": "Place",
58            "name": "DC Metro Stations",
59            "description": "Comprehensive guide to destinations accessible via Washington Metro"
60          }
61        }
62      ],
63      "provider": {
64        "@type": "WebApplication",
65        "name": "MetroMatch",
66        "url": "https://metromatchapp.com"
67      }
68    }
69    </script>
69
70    
71    <!-- Breadcrumb Structured Data -->
72    
72<script type="application/ld+json">
73    {
74      "@context": "https://schema.org",
75      "@type": "BreadcrumbList",
76      "itemListElement": [
77        {
78          "@type": "ListItem",
79          "position": 1,
80          "name": "Home",
81          "item": "https://metromatchapp.com"
82        },
83        {
84          "@type": "ListItem",
85          "position": 2,
86          "name": "Destinations",
87          "item": "https://metromatchapp.com/destinations"
88        }
89      ]
90    }
91    </script>
91
92    
93    <!-- NOTE: Review this script - consider moving to end of body for better performance -->
94    <!-- ALSO: This script is duplicated twice (lines 4-11 and 12-19 in original) - remove one -->
95    
95<script data-noptimize="1" data-cfasync="false" data-wpfc-render="false">
96      (function () {
97          var script = document.createElement("script");
98          script.async = 1;
99          script.src = 'https://mn-tz.com/NDIzMjM2.js?t=423236';
100          document.head.appendChild(script);
101      })();
102    </script>
102
103    
104    <!-- Link to your custom CSS -->
105    <link rel="stylesheet" href="/static/css/styles.css">
106    
107    <!-- FontAwesome CSS for icons -->
108    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
109    
110    <!-- Load Leaflet JS only if map exists -->
111    
111<script>
112        // Check if the map container exists and load map.js only if it does
113        window.addEventListener('load', function() {
114            const mapContainer = document.getElementById('map');
115            if (mapContainer) {
116                const script = document.createElement('script');
117                script.src = "/static/js/map.js";
118                document.head.appendChild(script);
119                console.log('map.js loaded successfully for map page.');
120            }
121        });
122    </script>
122
123    
124    <!-- Inline CSS Styles for Additional Styling -->
125    <style>
126        /* Your existing styles continue here... */
127    </style>
128</head>
129    <!-- Inline CSS Styles for Additional Styling -->
130    <style>
131        
132        /* Search Container Styles */
133        .search-container {
134            max-width: 800px;
135            margin: 80px auto 20px auto; /* Adjust top margin to account for navbar */
136            display: flex;
137            gap: 10px;
138            justify-content: center;
139            align-items: center;
140        }
141        .search-container input,
142        .search-container select,
143        .search-container button {
144            padding: 8px;
145            font-size: 16px;
146            border: 1px solid #ccc;
147            border-radius: 4px;
148        }
149        #clear-search {
150            background-color: #f44336;
151            color: white;
152            border: none;
153            cursor: pointer;
154        }
155        #clear-search:hover {
156            background-color: #d32f2f;
157        }
158        /* Line Circle Styles */
159        .line-circle {
160            display: inline-block;
161            width: 12px;
162            height: 12px;
163            border-radius: 50%;
164            margin-right: 2px;
165            border: 1px solid #000; /* Optional border for better visibility */
166        }
167        /* Station Header Styles */
168        .station-header {
169            cursor: pointer;
170            display: flex;
171            align-items: center;
172            padding: 10px;
173            background-color: #f9f9f9;
174            border: 1px solid #ddd;
175            border-radius: 4px;
176            transition: background-color 0.3s;
177	    justify-content: space-between;
178	}
179	.station-header .toggle-icon {
180   	 transition: transform 0.3s;
181   	 user-select: none; /* Prevents text selection of the + symbol */
182	}
183        
184        .station-header:hover {
185            background-color: #f1f1f1;
186        }
187        .station-header span.line-circle {
188            margin-right: 10px;
189        }
190        /* Station List Styles */
191        .station-list {
192            list-style-type: none;
193            padding: 0;
194            max-width: 800px;
195            margin: 20px auto;
196        }
197        .station-item {
198            margin-bottom: 15px;
199        }
200        /* Amenities List Styles */
201        .amenities-list {
202            list-style-type: none;
203            padding-left: 30px;
204            margin-top: 10px;
205            display: none; /* Hidden by default */
206        }
207        .amenities-list li {
208            margin-bottom: 8px;
209        }
210
211        /* Category Header Styles */
212        .category-header {
213            cursor: pointer;
214            padding: 8px 12px;
215            background-color: #e8f4f8;
216            border: 1px solid #b3d9e8;
217            border-radius: 4px;
218            margin: 5px 0;
219            display: flex;
220            align-items: center;
221            justify-content: space-between;
222            transition: background-color 0.3s;
223            font-weight: bold;
224        }
225        .category-header:hover {
226            background-color: #d1ecf1;
227        }
228        .category-header .toggle-icon {
229            font-size: 12px;
230            transition: transform 0.3s;
231        }
232        .category-header.expanded .toggle-icon {
233            transform: rotate(90deg);
234        }
235
236        /* Category Content Styles */
237        .category-content {
238            display: none;
239            padding-left: 20px;
240            margin-bottom: 10px;
241        }
242        .category-content ul {
243            list-style-type: none;
244            padding: 0;
245            margin: 5px 0;
246        }
247        .category-content li {
248            margin-bottom: 6px;
249            padding: 4px 0;
250        }
251
252        /* Category Count Badge */
253        .category-count {
254            background-color: #007bff;
255            color: white;
256            border-radius: 12px;
257            padding: 2px 8px;
258            font-size: 12px;
259            font-weight: normal;
260            margin-left: 8px;
261        }
262
263        /* Loading and Error Messages */
264        .loading, .error {
265            font-style: italic;
266            color: #555;
267        }
268        /* Highlight Matching Stations */
269        .station-item.match {
270            background-color: #e0f7fa; /* Light cyan background */
271            transition: background-color 0.3s;
272        }
273
274        /* Footer Styles - Added to match other pages */
275        .about-footer {
276            text-align: center;
277            padding: 15px 20px;
278            background-color: #f8f9fa;
279        }
280        
281        .footer-content {
282            max-width: 1200px;
283            margin: 0 auto;
284        }
285        
286        /* Button Row */
287        .footer-buttons {
288            display: flex;
289            justify-content: center;
290            align-items: center;
291            gap: 20px;
292            margin-bottom: 15px;
293            flex-wrap: wrap;
294        }
295        
296        .footer-button img {
297            height: 45px;
298            width: auto;
299            max-width: 150px;
300            min-width: 100px;
301	    object-fit: contain; /* Add this line */
302
303        }
304        
305        /* Footer Info */
306        .footer-info {
307            margin: 0;
308        }
309        
310        .footer-info p {
311            margin: 0;
312            font-size: 0.9rem;
313            color: #666;
314        }
315        
316        /* Ensure images have good contrast */
317        .footer-button img {
318            background-color: transparent;
319            border-radius: 4px;
320            filter: drop-shadow(0 1px 3px rgba(0,0,0,0.1));
321        }
322        
323        /* Mobile Responsive - Footer */
324        @media (max-width: 768px) {
325            .footer-buttons {
326                gap: 15px;
327            }
328            
329            .footer-button img {
330                height: 40px;
331                min-width: 85px;
332                max-width: 130px;
333		object-fit: contain; /* Add this line */
334            }
335            
336            .footer-info p {
337                font-size: 0.85rem;
338            }
339        }
340        
341        @media (max-width: 480px) {
342            .footer-buttons {
343                gap: 10px;
344            }
345            
346            .footer-button img {
347                height: 35px;
348                min-width: 75px;
349                max-width: 110px;
350		object-fit: contain; /* Add this line */
351            }
352            
353            .about-footer {
354                padding: 12px 15px;
355            }
356            
357            .footer-info p {
358                font-size: 0.8rem;
359            }
360        }
361
362        /* Responsive Design - Existing Station Page Styles */
363      @media (max-width: 600px) {
364    .search-container {
365        flex-direction: column;
366        align-items: stretch;
367    }
368    .station-header {
369        /* Keep horizontal layout on mobile */
370        display: flex;
371        flex-direction: row;
372        align-items: center;
373        flex-wrap: wrap; /* Allow wrapping if needed */
374        gap: 5px; /* Add small gap between elements */
375    }
376    .station-header span.line-circle {
377        margin-right: 2px;
378        margin-bottom: 0; /* Remove vertical spacing */
379    }
380    .station-header strong {
381        margin-right: 5px; /* Add spacing after station name */
382    }
383    .category-content {
384        padding-left: 10px;
385    }
386}
387    </style>
388</head>
389<body>
390
391    <!-- Navigation Bar -->
392    <header>
393        <div class="navbar">
394            <h1>MetroMatch</h1>
395            <!-- Hamburger Icon for Mobile -->
396            <span class="hamburger" onclick="toggleMenu()">&#9776;</span>
397            
398            <!-- Navigation Links for Desktop and Mobile -->
399            <nav class="nav-links">
400                <a href="/" class="">
401                    <i class="fas fa-map-marker-alt"></i> Home (Map)
402                </a>
403                <a href="/destinations" class="active">
404                    <i class="fas fa-list"></i> Destinations
405                </a>
406                <a href="/itineraries" class="">
407                    <i class="fas fa-route"></i> Itineraries
408                </a>
409  		<a href="/how-to-use" class="">
410        	<i class="fas fa-question-circle"></i> How to Use
411                <a href="/about" class="">
412                    <i class="fas fa-info-circle"></i> About
413                </a>
414            </nav>
415        </div>
416        
417        <!-- Mobile Menu (Hidden by Default) -->
418        <div class="mobile-menu" id="mobileMenu">
419            <a href="/" class="">
420                <i class="fas fa-map-marker-alt"></i> Home (Map)
421            </a>
422            <a href="/destinations" class="active">
423                <i class="fas fa-list"></i> Destinations
424            </a>
425            <a href="/itineraries" class="">
426                <i class="fas fa-route"></i> Itineraries
427	    </a>
428 	 <a href="/how-to-use" class="">
429        <i class="fas fa-question-circle"></i> How to Use
430    </a>
431            <a href="/about" class="">
432                <i class="fas fa-info-circle"></i> About
433            </a>
434        </div>
435    </header>
436<h1 style="text-align: center; margin-top: 80px;">DC Metro Station Guide: Hotels, Restaurants & Amenities Near Every Station</h1>
437
438<img src="/static/images/sign.jpg" alt="Exit Sign" style="display: block; margin: 20px auto; width: 60%; max-width: 450px; height: auto;">
439
440<!-- Updated text-container styles -->
441<div class="text-container" style="max-width: 800px; margin: 0 auto; padding: 0 20px; text-align: center;">
442    <p>
443        What if there were the equivalent of highway exit signs that direct you to places to 
443stay, eat, drink, and shop near transit stations? Now there are! Use this page to explore neighborhoods near transit, plan your outing, and find places to meet up with friends. Click a station to see what's nearby or enter a station or line in the filter and head over to the map page for a visual.
444    </p>
445</div>
446 
447    <!-- Search Container -->
448    <div class="search-container">
449        <input type="text" id="station-search" placeholder="Search for a station..." aria-label="Search for a station" />
450        <select id="line-search" aria-label="Filter by transit line">
451            <option value="">All Lines</option>
452            
453                <option value="Red">Red</option>
454            
455                <option value="Blue">Blue</option>
456            
457                <option value="Yellow">Yellow</option>
458            
459                <option value="Green">Green</option>
460            
461                <option value="Orange">Orange</option>
462            
463                <option value="Silver">Silver</option>
464            
465                <option value="MARC">MARC</option>
466            
467                <option value="VRE">VRE</option>
468            
469        </select>
470        <button id="clear-search" aria-label="Clear search filters">Clear Search</button>
471    </div>
472
473   <ul class="station-list">
474    
475        <li class="station-item">
476          <div class="station-header" onclick="toggleAmenities('41')">
477    <!-- Display circles for each metro line -->
478    
479        
480        <span class="line-circle" style="background-color: #0000FF;" title="BLUE"></span>
481    
482        
483        <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span>
484    
485    <strong>ADDISON ROAD METRO STATION</strong>
486    
487    <!-- Hotel icon if hotels are available -->
488    
489    
490    <!-- Coffee shop icon if coffee shops are available -->
491    
492        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (1)"></i>
493    
494    
495    <!-- Restaurant icon if restaurants are available -->
496    
497        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (4)"></i>
498    
499    
500    <!-- Nightlife icon if bars are available -->
501    
502    
503    <!-- Pharmacy icon if pharmacies are available -->
504    
505    
506    <!-- Supermarket icon if supermarkets are available -->
507    
508
509 <!-- Museum icon if museums are available -->
510    
511    
512    <span class="toggle-icon" id="toggle-41" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
513</div>
514            <ul class="amenities-list" id="amenities-41">
515                <!-- Amenities will be dynamically loaded here -->
516                <li class="loading">Loading amenities...</li>
517            </ul>
518        </li>
519    
520        <li class="station-item">
521          <div class="station-header" onclick="toggleAmenities('112')">
522    <!-- Display circles for each metro line -->
523    
524        
525        <span class="line-circle" style="background-color: #800080;" title="VRE"></span>
526    
527    <strong>ALEXANDRIA VRE</strong>
528    
529    <!-- Hotel icon if hotels are available -->
530    
531    
532    <!-- Coffee shop icon if coffee shops are available -->
533    
534        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (1)"></i>
535    
536    
537    <!-- Restaurant icon if restaurants are available -->
538    
539        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (6)"></i>
540    
541    
542    <!-- Nightlife icon if bars are available -->
543    
544        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (1)"></i>
545    
546    
547    <!-- Pharmacy icon if pharmacies are available -->
548    
549    
550    <!-- Supermarket icon if supermarkets are available -->
551    
552
553 <!-- Museum icon if museums are available -->
554    
555        <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (2)"></i>
556    
557    
558    <span class="toggle-icon" id="toggle-112" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
559</div>
560            <ul class="amenities-list" id="amenities-112">
561                <!-- Amenities will be dynamically loaded here -->
562                <li class="loading">Loading amenities...</li>
563            </ul>
564        </li>
565    
566        <li class="station-item">
567          <div class="station-header" onclick="toggleAmenities('31')">
568    <!-- Display circles for each metro line -->
569    
570        
571        <span class="line-circle" style="background-color: #008000;" title="GREEN"></span>
572    
573    <strong>ANACOSTIA METRO STATION</strong>
574    
575    <!-- Hotel icon if hotels are available -->
576    
577    
578    <!-- Coffee shop icon if coffee shops are available -->
579    
580        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (1)"></i>
581    
582    
583    <!-- Restaurant icon if restaurants are available -->
584    
585        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (5)"></i>
586    
587    
588    <!-- Nightlife icon if bars are available -->
589    
590    
591    <!-- Pharmacy icon if pharmacies are available -->
592    
593    
594    <!-- Supermarket icon if supermarkets are available -->
595    
596
597 <!-- Museum icon if museums are available -->
598    
599    
600    <span class="toggle-icon" id="toggle-31" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
601</div>
602            <ul class="amenities-list" id="amenities-31">
603                <!-- Amenities will be dynamically loaded here -->
604                <li class="loading">Loading amenities...</li>
605            </ul>
606        </li>
607    
608        <li class="station-item">
609          <div class="station-header" onclick="toggleAmenities('14')">
610    <!-- Display circles for each metro line -->
611    
612        
613        <span class="line-circle" style="background-color: #008000;" title="GREEN"></span>
614    
615        
616        <span class="line-circle" style="background-color: #FFFF00;" title="YELLOW"></span>
617    
618    <strong>ARCHIVES METRO STATION</strong>
619    
620    <!-- Hotel icon if hotels are available -->
621    
622    
623    <!-- Coffee shop icon if coffee shops are available -->
624    
625        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (6)"></i>
626    
627    
628    <!-- Restaurant icon if restaurants are available -->
629    
630        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (17)"></i>
631    
632    
633    <!-- Nightlife icon if bars are available -->
634    
635        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (2)"></i>
636    
637    
638    <!-- Pharmacy icon if pharmacies are available -->
639    
640    
641    <!-- Supermarket icon if supermarkets are available -->
642    
643
644 <!-- Museum icon if museums are available -->
645    
646        <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (2)"></i>
647    
648    
649    <span class="toggle-icon" id="toggle-14" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
650</div>
651            <ul class="amenities-list" id="amenities-14">
652                <!-- Amenities will be dynamically loaded here -->
653                <li class="loading">Loading amenities...</li>
654            </ul>
655        </li>
656    
657        <li class="station-item">
658          <div class="station-header" onclick="toggleAmenities('81')">
659    <!-- Display circles for each metro line -->
660    
661        
662        <span class="line-circle" style="background-color: #0000FF;" title="BLUE"></span>
663    
664    <strong>ARLINGTON CEMETERY METRO STATION</strong>
665    
666    <!-- Hotel icon if hotels are available -->
667    
668    
669    <!-- Coffee shop icon if coffee shops are available -->
670    
671    
672    <!-- Restaurant icon if restaurants are available -->
673    
674    
675    <!-- Nightlife icon if bars are available -->
676    
677    
678    <!-- Pharmacy icon if pharmacies are available -->
679    
680    
681    <!-- Supermarket icon if supermarkets are available -->
682    
683
684 <!-- Museum icon if museums are available -->
685    
686        <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (2)"></i>
687    
688    
689    <span class="toggle-icon" id="toggle-81" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
690</div>
691            <ul class="amenities-list" id="amenities-81">
692                <!-- Amenities will be dynamically loaded here -->
693                <li class="loading">Loading amenities...</li>
694            </ul>
695        </li>
696    
697        <li class="station-item">
698          <div class="station-header" onclick="toggleAmenities('87')">
699    <!-- Display circles for each metro line -->
700    
701        
702        <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span>
703    
704    <strong>ASHBURN METRO STATION</strong>
705    
706    <!-- Hotel icon if hotels are available -->
707    
708    
709    <!-- Coffee shop icon if coffee shops are available -->
710    
711        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (3)"></i>
712    
713    
714    <!-- Restaurant icon if restaurants are available -->
715    
716        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (11)"></i>
717    
718    
719    <!-- Nightlife icon if bars are available -->
720    
721    
722    <!-- Pharmacy icon if pharmacies are available -->
723    
724    
725    <!-- Supermarket icon if supermarkets are available -->
726    
727
728 <!-- Museum icon if museums are available -->
729    
730    
731    <span class="toggle-icon" id="toggle-87" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
732</div>
733            <ul class="amenities-list" id="amenities-87">
734                <!-- Amenities will be dynamically loaded here -->
735                <li class="loading">Loading amenities...</li>
736            </ul>
737        </li>
738    
739        <li class="station-item">
740          <div class="station-header" onclick="toggleAmenities('108')">
741    <!-- Display circles for each metro line -->
742    
743        
744        <span class="line-circle" style="background-color: #800080;" title="VRE"></span>
745    
746    <strong>BACKLICK ROAD VRE</strong>
747    
748    <!-- Hotel icon if hotels are available -->
749    
750    
751    <!-- Coffee shop icon if coffee shops are available -->
752    
753        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (1)"></i>
754    
755    
756    <!-- Restaurant icon if restaurants are available -->
757    
758        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (5)"></i>
759    
760    
761    <!-- Nightlife icon if bars are available -->
762    
763    
764    <!-- Pharmacy icon if pharmacies are available -->
765    
766    
767    <!-- Supermarket icon if supermarkets are available -->
768    
769
770 <!-- Museum icon if museums are available -->
771    
772    
773    <span class="toggle-icon" id="toggle-108" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
774</div>
775            <ul class="amenities-list" id="amenities-108">
776                <!-- Amenities will be dynamically loaded here -->
777                <li class="loading">Loading amenities...</li>
778            </ul>
779        </li>
780    
781        <li class="station-item">
782          <div class="station-header" onclick="toggleAmenities('77')">
783    <!-- Display circles for each metro line -->
784    
785        
786        <span class="line-circle" style="background-color: #FFA500;" title="ORANGE"></span>
787    
788        
789        <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span>
790    
791    <strong>BALLSTON METRO STATION</strong>
792    
793    <!-- Hotel icon if hotels are available -->
794    
795        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (5)"></i>
796    
797    
798    <!-- Coffee shop icon if coffee shops are available -->
799    
800        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (15)"></i>
801    
802    
803    <!-- Restaurant icon if restaurants are available -->
804    
805        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (43)"></i>
806    
807    
808    <!-- Nightlife icon if bars are available -->
809    
810        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (5)"></i>
811    
812    
813    <!-- Pharmacy icon if pharmacies are available -->
814    
815        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (2)"></i>
816    
817    
818    <!-- Supermarket icon if supermarkets are available -->
819    
820        <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i>
821    
822
823 <!-- Museum icon if museums are available -->
824    
825    
826    <span class="toggle-icon" id="toggle-77" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
827</div>
828            <ul class="amenities-list" id="amenities-77">
829                <!-- Amenities will be dynamically loaded here -->
830                <li class="loading">Loading amenities...</li>
831            </ul>
832        </li>
833    
834        <li class="station-item">
835          <div class="station-header" onclick="toggleAmenities('28')">
836    <!-- Display circles for each metro line -->
837    
838        
839        <span class="line-circle" style="background-color: #0000FF;" title="BLUE"></span>
840    
841        
842        <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span>
843    
844    <strong>BENNING ROAD METRO STATION</strong>
845    
846    <!-- Hotel icon if hotels are available -->
847    
848    
849    <!-- Coffee shop icon if coffee shops are available -->
850    
851        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (1)"></i>
852    
853    
854    <!-- Restaurant icon if restaurants are available -->
855    
856        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (4)"></i>
857    
858    
859    <!-- Nightlife icon if bars are available -->
860    
861    
862    <!-- Pharmacy icon if pharmacies are available -->
863    
864    
865    <!-- Supermarket icon if supermarkets are available -->
866    
867
868 <!-- Museum icon if museums are available -->
869    
870    
871    <span class="toggle-icon" id="toggle-28" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
872</div>
873            <ul class="amenities-list" id="amenities-28">
874                <!-- Amenities will be dynamically loaded here -->
875                <li class="loading">Loading amenities...</li>
876            </ul>
877        </li>
878    
879        <li class="station-item">
880          <div class="station-header" onclick="toggleAmenities('55')">
881    <!-- Display circles for each metro line -->
882    
883        
884        <span class="line-circle" style="background-color: #FF0000;" title="RED"></span>
885    
886    <strong>BETHESDA METRO STATION</strong>
887    
888    <!-- Hotel icon if hotels are available -->
889    
890        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (5)"></i>
891    
892    
893    <!-- Coffee shop icon if coffee shops are available -->
894    
895        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (15)"></i>
896    
897    
898    <!-- Restaurant icon if restaurants are available -->
899    
900        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (65)"></i>
901    
902    
903    <!-- Nightlife icon if bars are available -->
904    
905        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (5)"></i>
906    
907    
908    <!-- Pharmacy icon if pharmacies are available -->
909    
910        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (3)"></i>
911    
912    
913    <!-- Supermarket icon if supermarkets are available -->
914    
915        <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (3)"></i>
916    
917
918 <!-- Museum icon if museums are available -->
919    
920        <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (1)"></i>
921    
922    
923    <span class="toggle-icon" id="toggle-55" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
924</div>
925            <ul class="amenities-list" id="amenities-55">
926                <!-- Amenities will be dynamically loaded here -->
927                <li class="loading">Loading amenities...</li>
928            </ul>
929        </li>
930    
931        <li class="station-item">
932          <div class="station-header" onclick="toggleAmenities('84')">
933    <!-- Display circles for each metro line -->
934    
935        
936        <span class="line-circle" style="background-color: #0000FF;" title="BLUE"></span>
937    
938        
939        <span class="line-circle" style="background-color: #FFFF00;" title="YELLOW"></span>
940    
941    <strong>BRADDOCK ROAD METRO STATION</strong>
942    
943    <!-- Hotel icon if hotels are available -->
944    
945    
946    <!-- Coffee shop icon if coffee shops are available -->
947    
948        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (7)"></i>
949    
950    
951    <!-- Restaurant icon if restaurants are available -->
952    
953        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (25)"></i>
954    
955    
956    <!-- Nightlife icon if bars are available -->
957    
958        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (4)"></i>
959    
960    
961    <!-- Pharmacy icon if pharmacies are available -->
962    
963        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (3)"></i>
964    
965    
966    <!-- Supermarket icon if supermarkets are available -->
967    
968        <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i>
969    
970
971 <!-- Museum icon if museums are available -->
972    
973        <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (8)"></i>
974    
975    
976    <span class="toggle-icon" id="toggle-84" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
977</div>
978            <ul class="amenities-list" id="amenities-84">
979                <!-- Amenities will be dynamically loaded here -->
980                <li class="loading">Loading amenities...</li>
981            </ul>
982        </li>
983    
984        <li class="station-item">
985          <div class="station-header" onclick="toggleAmenities('43')">
986    <!-- Display circles for each metro line -->
987    
988        
989        <span class="line-circle" style="background-color: #008000;" title="GREEN"></span>
990    
991    <strong>BRANCH AVE METRO STATION</strong>
992    
993    <!-- Hotel icon if hotels are available -->
994    
995        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (3)"></i>
996    
997    
998    <!-- Coffee shop icon if coffee shops are available -->
999    
1000    
1001    <!-- Restaurant icon if restaurants are available -->
1002    
1003        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (11)"></i>
1004    
1005    
1006    <!-- Nightlife icon if bars are available -->
1007    
1008    
1009    <!-- Pharmacy icon if pharmacies are available -->
1010    
1011    
1012    <!-- Supermarket icon if supermarkets are available -->
1013    
1014
1015 <!-- Museum icon if museums are available -->
1016    
1017    
1018    <span class="toggle-icon" id="toggle-43" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
1019</div>
1020            <ul class="amenities-list" id="amenities-43">
1021                <!-- Amenities will be dynamically loaded here -->
1022                <li class="loading">Loading amenities...</li>
1023            </ul>
1024        </li>
1025    
1026        <li class="station-item">
1027          <div class="station-header" onclick="toggleAmenities('26')">
1028    <!-- Display circles for each metro line -->
1029    
1030        
1031        <span class="line-circle" style="background-color: #FF0000;" title="RED"></span>
1032    
1033    <strong>BROOKLAND-CUA METRO STATION</strong>
1034    
1035    <!-- Hotel icon if hotels are available -->
1036    
1037    
1038    <!-- Coffee shop icon if coffee shops are available -->
1039    
1040        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (2)"></i>
1041    
1042    
1043    <!-- Restaurant icon if restaurants are available -->
1044    
1045        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (21)"></i>
1046    
1047    
1048    <!-- Nightlife icon if bars are available -->
1049    
1050    
1051    <!-- Pharmacy icon if pharmacies are available -->
1052    
1053        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i>
1054    
1055    
1056    <!-- Supermarket icon if supermarkets are available -->
1057    
1058
1059 <!-- Museum icon if museums are available -->
1060    
1061        <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (1)"></i>
1062    
1063    
1064    <span class="toggle-icon" id="toggle-26" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
1065</div>
1066            <ul class="amenities-list" id="amenities-26">
1067                <!-- Amenities will be dynamically loaded here -->
1068                <li class="loading">Loading amenities...</li>
1069            </ul>
1070        </li>
1071    
1072        <li class="station-item">
1073          <div class="station-header" onclick="toggleAmenities('103')">
1074    <!-- Display circles for each metro line -->
1075    
1076        
1077        <span class="line-circle" style="background-color: #800080;" title="VRE"></span>
1078    
1079    <strong>BURKE CENTER VRE</strong>
1080    
1081    <!-- Hotel icon if hotels are available -->
1082    
1083    
1084    <!-- Coffee shop icon if coffee shops are available -->
1085    
1086    
1087    <!-- Restaurant icon if restaurants are available -->
1088    
1089        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (1)"></i>
1090    
1091    
1092    <!-- Nightlife icon if bars are available -->
1093    
1094    
1095    <!-- Pharmacy icon if pharmacies are available -->
1096    
1097        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i>
1098    
1099    
1100    <!-- Supermarket icon if supermarkets are available -->
1101    
1102
1103 <!-- Museum icon if museums are available -->
1104    
1105    
1106    <span class="toggle-icon" id="toggle-103" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
1107</div>
1108            <ul class="amenities-list" id="amenities-103">
1109                <!-- Amenities will be dynamically loaded here -->
1110                <li class="loading">Loading amenities...</li>
1111            </ul>
1112        </li>
1113    
1114        <li class="station-item">
1115          <div class="station-header" onclick="toggleAmenities('42')">
1116    <!-- Display circles for each metro line -->
1117    
1118        
1119        <span class="line-circle" style="background-color: #0000FF;" title="BLUE"></span>
1120    
1121        
1122        <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span>
1123    
1124    <strong>CAPITOL HEIGHTS METRO STATION</strong>
1125    
1126    <!-- Hotel icon if hotels are available -->
1127    
1128    
1129    <!-- Coffee shop icon if coffee shops are available -->
1130    
1131    
1132    <!-- Restaurant icon if restaurants are available -->
1133    
1134        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (4)"></i>
1135    
1136    
1137    <!-- Nightlife icon if bars are available -->
1138    
1139    
1140    <!-- Pharmacy icon if pharmacies are available -->
1141    
1142    
1143    <!-- Supermarket icon if supermarkets are available -->
1144    
1145
1146 <!-- Museum icon if museums are available -->
1147    
1148    
1149    <span class="toggle-icon" id="toggle-42" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
1150</div>
1151            <ul class="amenities-list" id="amenities-42">
1152                <!-- Amenities will be dynamically loaded here -->
1153                <li class="loading">Loading amenities...</li>
1154            </ul>
1155        </li>
1156    
1157        <li class="station-item">
1158          <div class="station-header" onclick="toggleAmenities('10')">
1159    <!-- Display circles for each metro line -->
1160    
1161        
1162        <span class="line-circle" style="background-color: #0000FF;" title="BLUE"></span>
1163    
1164        
1165        <span class="line-circle" style="background-color: #FFA500;" title="ORANGE"></span>
1166    
1167        
1168        <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span>
1169    
1170    <strong>CAPITOL SOUTH METRO STATION</strong>
1171    
1172    <!-- Hotel icon if hotels are available -->
1173    
1174        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (1)"></i>
1175    
1176    
1177    <!-- Coffee shop icon if coffee shops are available -->
1178    
1179        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (4)"></i>
1180    
1181    
1182    <!-- Restaurant icon if restaurants are available -->
1183    
1184        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (15)"></i>
1185    
1186    
1187    <!-- Nightlife icon if bars are available -->
1188    
1189        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (2)"></i>
1190    
1191    
1192    <!-- Pharmacy icon if pharmacies are available -->
1193    
1194    
1195    <!-- Supermarket icon if supermarkets are available -->
1196    
1197
1198 <!-- Museum icon if museums are available -->
1199    
1200        <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (2)"></i>
1201    
1202    
1203    <span class="toggle-icon" id="toggle-10" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
1204</div>
1205            <ul class="amenities-list" id="amenities-10">
1206                <!-- Amenities will be dynamically loaded here -->
1207                <li class="loading">Loading amenities...</li>
1208            </ul>
1209        </li>
1210    
1211        <li class="station-item">
1212          <div class="station-header" onclick="toggleAmenities('52')">
1213    <!-- Display circles for each metro line -->
1214    
1215        
1216        <span class="line-circle" style="background-color: #FFA500;" title="ORANGE"></span>
1217    
1218    <strong>CHEVERLY METRO STATION</strong>
1219    
1220    <!-- Hotel icon if hotels are available -->
1221    
1222    
1223    <!-- Coffee shop icon if coffee shops are available -->
1224    
1225    
1226    <!-- Restaurant icon if restaurants are available -->
1227    
1228        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (2)"></i>
1229    
1230    
1231    <!-- Nightlife icon if bars are available -->
1232    
1233    
1234    <!-- Pharmacy icon if pharmacies are available -->
1235    
1236    
1237    <!-- Supermarket icon if supermarkets are available -->
1238    
1239
1240 <!-- Museum icon if museums are available -->
1241    
1242    
1243    <span class="toggle-icon" id="toggle-52" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
1244</div>
1245            <ul class="amenities-list" id="amenities-52">
1246                <!-- Amenities will be dynamically loaded here -->
1247                <li class="loading">Loading amenities...</li>
1248            </ul>
1249        </li>
1250    
1251        <li class="station-item">
1252          <div class="station-header" onclick="toggleAmenities('71')">
1253    <!-- Display circles for each metro line -->
1254    
1255        
1256        <span class="line-circle" style="background-color: #FFA500;" title="ORANGE"></span>
1257    
1258        
1259        <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span>
1260    
1261    <strong>CLARENDON METRO STATION</strong>
1262    
1263    <!-- Hotel icon if hotels are available -->
1264    
1265    
1266    <!-- Coffee shop icon if coffee shops are available -->
1267    
1268        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (9)"></i>
1269    
1270    
1271    <!-- Restaurant icon if restaurants are available -->
1272    
1273        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (29)"></i>
1274    
1275    
1276    <!-- Nightlife icon if bars are available -->
1277    
1278        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (15)"></i>
1279    
1280    
1281    <!-- Pharmacy icon if pharmacies are available -->
1282    
1283        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i>
1284    
1285    
1286    <!-- Supermarket icon if supermarkets are available -->
1287    
1288        <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (2)"></i>
1289    
1290
1291 <!-- Museum icon if museums are available -->
1292    
1293    
1294    <span class="toggle-icon" id="toggle-71" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
1295</div>
1296            <ul class="amenities-list" id="amenities-71">
1297                <!-- Amenities will be dynamically loaded here -->
1298                <li class="loading">Loading amenities...</li>
1299            </ul>
1300        </li>
1301    
1302        <li class="station-item">
1303          <div class="station-header" onclick="toggleAmenities('17')">
1304    <!-- Display circles for each metro line -->
1305    
1306        
1307        <span class="line-circle" style="background-color: #FF0000;" title="RED"></span>
1308    
1309    <strong>CLEVELAND PARK METRO STATION</strong>
1310    
1311    <!-- Hotel icon if hotels are available -->
1312    
1313    
1314    <!-- Coffee shop icon if coffee shops are available -->
1315    
1316        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (6)"></i>
1317    
1318    
1319    <!-- Restaurant icon if restaurants are available -->
1320    
1321        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (18)"></i>
1322    
1323    
1324    <!-- Nightlife icon if bars are available -->
1325    
1326        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (3)"></i>
1327    
1328    
1329    <!-- Pharmacy icon if pharmacies are available -->
1330    
1331        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (2)"></i>
1332    
1333    
1334    <!-- Supermarket icon if supermarkets are available -->
1335    
1336
1337 <!-- Museum icon if museums are available -->
1338    
1339    
1340    <span class="toggle-icon" id="toggle-17" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
1341</div>
1342            <ul class="amenities-list" id="amenities-17">
1343                <!-- Amenities will be dynamically loaded here -->
1344                <li class="loading">Loading amenities...</li>
1345            </ul>
1346        </li>
1347    
1348        <li class="station-item">
1349          <div class="station-header" onclick="toggleAmenities('116')">
1350    <!-- Display circles for each metro line -->
1351    
1352        
1353        <span class="line-circle" style="background-color: #800080;" title="VRE"></span>
1354    
1355    <strong>CLIFTON VRE</strong>
1356    
1357    <!-- Hotel icon if hotels are available -->
1358    
1359    
1360    <!-- Coffee shop icon if coffee shops are available -->
1361    
1362        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (1)"></i>
1363    
1364    
1365    <!-- Restaurant icon if restaurants are available -->
1366    
1367        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (3)"></i>
1368    
1369    
1370    <!-- Nightlife icon if bars are available -->
1371    
1372        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (1)"></i>
1373    
1374    
1375    <!-- Pharmacy icon if pharmacies are available -->
1376    
1377    
1378    <!-- Supermarket icon if supermarkets are available -->
1379    
1380
1381 <!-- Museum icon if museums are available -->
1382    
1383    
1384    <span class="toggle-icon" id="toggle-116" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
1385</div>
1386            <ul class="amenities-list" id="amenities-116">
1387                <!-- Amenities will be dynamically loaded here -->
1388                <li class="loading">Loading amenities...</li>
1389            </ul>
1390        </li>
1391    
1392        <li class="station-item">
1393          <div class="station-header" onclick="toggleAmenities('125')">
1394    <!-- Display circles for each metro line -->
1395    
1396        
1397        <span class="line-circle" style="background-color: #8B4513;" title="MARC"></span>
1398    
1399    <strong>COLLEGE PARK MARC</strong>
1400    
1401    <!-- Hotel icon if hotels are available -->
1402    
1403    
1404    <!-- Coffee shop icon if coffee shops are available -->
1405    
1406    
1407    <!-- Restaurant icon if restaurants are available -->
1408    
1409        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (3)"></i>
1410    
1411    
1412    <!-- Nightlife icon if bars are available -->
1413    
1414        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (1)"></i>
1415    
1416    
1417    <!-- Pharmacy icon if pharmacies are available -->
1418    
1419    
1420    <!-- Supermarket icon if supermarkets are available -->
1421    
1422
1423 <!-- Museum icon if museums are available -->
1424    
1425    
1426    <span class="toggle-icon" id="toggle-125" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
1427</div>
1428            <ul class="amenities-list" id="amenities-125">
1429                <!-- Amenities will be dynamically loaded here -->
1430                <li class="loading">Loading amenities...</li>
1431            </ul>
1432        </li>
1433    
1434        <li class="station-item">
1435          <div class="station-header" onclick="toggleAmenities('40')">
1436    <!-- Display circles for each metro line -->
1437    
1438        
1439        <span class="line-circle" style="background-color: #008000;" title="GREEN"></span>
1440    
1441    <strong>COLLEGE PARK U- MD METRO STATION</strong>
1442    
1443    <!-- Hotel icon if hotels are available -->
1444    
1445    
1446    <!-- Coffee shop icon if coffee shops are available -->
1447    
1448    
1449    <!-- Restaurant icon if restaurants are available -->
1450    
1451    
1452    <!-- Nightlife icon if bars are available -->
1453    
1454    
1455    <!-- Pharmacy icon if pharmacies are available -->
1456    
1457    
1458    <!-- Supermarket icon if supermarkets are available -->
1459    
1460
1461 <!-- Museum icon if museums are available -->
1462    
1463        <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (1)"></i>
1464    
1465    
1466    <span class="toggle-icon" id="toggle-40" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
1467</div>
1468            <ul class="amenities-list" id="amenities-40">
1469                <!-- Amenities will be dynamically loaded here -->
1470                <li class="loading">Loading amenities...</li>
1471            </ul>
1472        </li>
1473    
1474        <li class="station-item">
1475          <div class="station-header" onclick="toggleAmenities('21')">
1476    <!-- Display circles for each metro line -->
1477    
1478        
1479        <span class="line-circle" style="background-color: #008000;" title="GREEN"></span>
1480    
1481    <strong>COLUMBIA HEIGHTS METRO STATION</strong>
1482    
1483    <!-- Hotel icon if hotels are available -->
1484    
1485    
1486    <!-- Coffee shop icon if coffee shops are available -->
1487    
1488        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (7)"></i>
1489    
1490    
1491    <!-- Restaurant icon if restaurants are available -->
1492    
1493        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (41)"></i>
1494    
1495    
1496    <!-- Nightlife icon if bars are available -->
1497    
1498        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (12)"></i>
1499    
1500    
1501    <!-- Pharmacy icon if pharmacies are available -->
1502    
1503        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i>
1504    
1505    
1506    <!-- Supermarket icon if supermarkets are available -->
1507    
1508        <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i>
1509    
1510
1511 <!-- Museum icon if museums are available -->
1512    
1513    
1514    <span class="toggle-icon" id="toggle-21" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
1515</div>
1516            <ul class="amenities-list" id="amenities-21">
1517                <!-- Amenities will be dynamically loaded here -->
1518                <li class="loading">Loading amenities...</li>
1519            </ul>
1520        </li>
1521    
1522        <li class="station-item">
1523          <div class="station-header" onclick="toggleAmenities('32')">
1524    <!-- Display circles for each metro line -->
1525    
1526        
1527        <span class="line-circle" style="background-color: #008000;" title="GREEN"></span>
1528    
1529    <strong>CONGRESS HEIGHTS METRO STATION</strong>
1530    
1531    <!-- Hotel icon if hotels are available -->
1532    
1533    
1534    <!-- Coffee shop icon if coffee shops are available -->
1535    
1536        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (1)"></i>
1537    
1538    
1539    <!-- Restaurant icon if restaurants are available -->
1540    
1541        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (3)"></i>
1542    
1543    
1544    <!-- Nightlife icon if bars are available -->
1545    
1546        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (1)"></i>
1547    
1548    
1549    <!-- Pharmacy icon if pharmacies are available -->
1550    
1551    
1552    <!-- Supermarket icon if supermarkets are available -->
1553    
1554        <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i>
1555    
1556
1557 <!-- Museum icon if museums are available -->
1558    
1559    
1560    <span class="toggle-icon" id="toggle-32" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
1561</div>
1562            <ul class="amenities-list" id="amenities-32">
1563                <!-- Amenities will be dynamically loaded here -->
1564                <li class="loading">Loading amenities...</li>
1565            </ul>
1566        </li>
1567    
1568        <li class="station-item">
1569          <div class="station-header" onclick="toggleAmenities('72')">
1570    <!-- Display circles for each metro line -->
1571    
1572        
1573        <span class="line-circle" style="background-color: #FFA500;" title="ORANGE"></span>
1574    
1575        
1576        <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span>
1577    
1578    <strong>COURTHOUSE METRO STATION</strong>
1579    
1580    <!-- Hotel icon if hotels are available -->
1581    
1582        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (4)"></i>
1583    
1584    
1585    <!-- Coffee shop icon if coffee shops are available -->
1586    
1587        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (8)"></i>
1588    
1589    
1590    <!-- Restaurant icon if restaurants are available -->
1591    
1592        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (33)"></i>
1593    
1594    
1595    <!-- Nightlife icon if bars are available -->
1596    
1597        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (4)"></i>
1598    
1599    
1600    <!-- Pharmacy icon if pharmacies are available -->
1601    
1602        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i>
1603    
1604    
1605    <!-- Supermarket icon if supermarkets are available -->
1606    
1607        <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i>
1608    
1609
1610 <!-- Museum icon if museums are available -->
1611    
1612    
1613    <span class="toggle-icon" id="toggle-72" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
1614</div>
1615            <ul class="amenities-list" id="amenities-72">
1616                <!-- Amenities will be dynamically loaded here -->
1617                <li class="loading">Loading amenities...</li>
1618            </ul>
1619        </li>
1620    
1621        <li class="station-item">
1622          <div class="station-header" onclick="toggleAmenities('74')">
1623    <!-- Display circles for each metro line -->
1624    
1625        
1626        <span class="line-circle" style="background-color: #0000FF;" title="BLUE"></span>
1627    
1628        
1629        <span class="line-circle" style="background-color: #FFFF00;" title="YELLOW"></span>
1630    
1631    <strong>CRYSTAL CITY METRO STATION</strong>
1632    
1633    <!-- Hotel icon if hotels are available -->
1634    
1635        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (6)"></i>
1636    
1637    
1638    <!-- Coffee shop icon if coffee shops are available -->
1639    
1640        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (9)"></i>
1641    
1642    
1643    <!-- Restaurant icon if restaurants are available -->
1644    
1645        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (35)"></i>
1646    
1647    
1648    <!-- Nightlife icon if bars are available -->
1649    
1650        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (12)"></i>
1651    
1652    
1653    <!-- Pharmacy icon if pharmacies are available -->
1654    
1655        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i>
1656    
1657    
1658    <!-- Supermarket icon if supermarkets are available -->
1659    
1660
1661 <!-- Museum icon if museums are available -->
1662    
1663    
1664    <span class="toggle-icon" id="toggle-74" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
1665</div>
1666            <ul class="amenities-list" id="amenities-74">
1667                <!-- Amenities will be dynamically loaded here -->
1668                <li class="loading">Loading amenities...</li>
1669            </ul>
1670        </li>
1671    
1672        <li class="station-item">
1673          <div class="station-header" onclick="toggleAmenities('29')">
1674    <!-- Display circles for each metro line -->
1675    
1676        
1677        <span class="line-circle" style="background-color: #FFA500;" title="ORANGE"></span>
1678    
1679    <strong>DEANWOOD METRO STATION</strong>
1680    
1681    <!-- Hotel icon if hotels are available -->
1682    
1683    
1684    <!-- Coffee shop icon if coffee shops are available -->
1685    
1686    
1687    <!-- Restaurant icon if restaurants are available -->
1688    
1689        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (1)"></i>
1690    
1691    
1692    <!-- Nightlife icon if bars are available -->
1693    
1694    
1695    <!-- Pharmacy icon if pharmacies are available -->
1696    
1697    
1698    <!-- Supermarket icon if supermarkets are available -->
1699    
1700
1701 <!-- Museum icon if museums are available -->
1702    
1703    
1704    <span class="toggle-icon" id="toggle-29" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
1705</div>
1706            <ul class="amenities-list" id="amenities-29">
1707                <!-- Amenities will be dynamically loaded here -->
1708                <li class="loading">Loading amenities...</li>
1709            </ul>
1710        </li>
1711    
1712        <li class="station-item">
1713          <div class="station-header" onclick="toggleAmenities('127')">
1714    <!-- Display circles for each metro line -->
1715    
1716        
1717        <span class="line-circle" style="background-color: #8B4513;" title="MARC"></span>
1718    
1719    <strong>DORSEY MARC</strong>
1720    
1721    <!-- Hotel icon if hotels are available -->
1722    
1723    
1724    <!-- Coffee shop icon if coffee shops are available -->
1725    
1726    
1727    <!-- Restaurant icon if restaurants are available -->
1728    
1729        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (4)"></i>
1730    
1731    
1732    <!-- Nightlife icon if bars are available -->
1733    
1734    
1735    <!-- Pharmacy icon if pharmacies are available -->
1736    
1737    
1738    <!-- Supermarket icon if supermarkets are available -->
1739    
1740
1741 <!-- Museum icon if museums are available -->
1742    
1743    
1744    <span class="toggle-icon" id="toggle-127" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
1745</div>
1746            <ul class="amenities-list" id="amenities-127">
1747                <!-- Amenities will be dynamically loaded here -->
1748                <li class="loading">Loading amenities...</li>
1749            </ul>
1750        </li>
1751    
1752        <li class="station-item">
1753          <div class="station-header" onclick="toggleAmenities('48')">
1754    <!-- Display circles for each metro line -->
1755    
1756        
1757        <span class="line-circle" style="background-color: #0000FF;" title="BLUE"></span>
1758    
1759        
1760        <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span>
1761    
1762    <strong>DOWNTOWN LARGO METRO STATION</strong>
1763    
1764    <!-- Hotel icon if hotels are available -->
1765    
1766        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (4)"></i>
1767    
1768    
1769    <!-- Coffee shop icon if coffee shops are available -->
1770    
1771    
1772    <!-- Restaurant icon if restaurants are available -->
1773    
1774        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (6)"></i>
1775    
1776    
1777    <!-- Nightlife icon if bars are available -->
1778    
1779    
1780    <!-- Pharmacy icon if pharmacies are available -->
1781    
1782    
1783    <!-- Supermarket icon if supermarkets are available -->
1784    
1785
1786 <!-- Museum icon if museums are available -->
1787    
1788    
1789    <span class="toggle-icon" id="toggle-48" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
1790</div>
1791            <ul class="amenities-list" id="amenities-48">
1792                <!-- Amenities will be dynamically loaded here -->
1793                <li class="loading">Loading amenities...</li>
1794            </ul>
1795        </li>
1796    
1797        <li class="station-item">
1798          <div class="station-header" onclick="toggleAmenities('67')">
1799    <!-- Display circles for each metro line -->
1800    
1801        
1802        <span class="line-circle" style="background-color: #FFA500;" title="ORANGE"></span>
1803    
1804    <strong>DUNN LORING MERRIFIELD METRO STATION</strong>
1805    
1806    <!-- Hotel icon if hotels are available -->
1807    
1808        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (1)"></i>
1809    
1810    
1811    <!-- Coffee shop icon if coffee shops are available -->
1812    
1813        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (2)"></i>
1814    
1815    
1816    <!-- Restaurant icon if restaurants are available -->
1817    
1818        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (18)"></i>
1819    
1820    
1821    <!-- Nightlife icon if bars are available -->
1822    
1823    
1824    <!-- Pharmacy icon if pharmacies are available -->
1825    
1826    
1827    <!-- Supermarket icon if supermarkets are available -->
1828    
1829        <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i>
1830    
1831
1832 <!-- Museum icon if museums are available -->
1833    
1834    
1835    <span class="toggle-icon" id="toggle-67" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
1836</div>
1837            <ul class="amenities-list" id="amenities-67">
1838                <!-- Amenities will be dynamically loaded here -->
1839                <li class="loading">Loading amenities...</li>
1840            </ul>
1841        </li>
1842    
1843        <li class="station-item">
1844          <div class="station-header" onclick="toggleAmenities('37')">
1845    <!-- Display circles for each metro line -->
1846    
1847        
1848        <span class="line-circle" style="background-color: #FF0000;" title="RED"></span>
1849    
1850    <strong>DUPONT CIRCLE METRO STATION</strong>
1851    
1852    <!-- Hotel icon if hotels are available -->
1853    
1854        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (20)"></i>
1855    
1856    
1857    <!-- Coffee shop icon if coffee shops are available -->
1858    
1859        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (15)"></i>
1860    
1861    
1862    <!-- Restaurant icon if restaurants are available -->
1863    
1864        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (56)"></i>
1865    
1866    
1867    <!-- Nightlife icon if bars are available -->
1868    
1869        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (22)"></i>
1870    
1871    
1872    <!-- Pharmacy icon if pharmacies are available -->
1873    
1874        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (5)"></i>
1875    
1876    
1877    <!-- Supermarket icon if supermarkets are available -->
1878    
1879        <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i>
1880    
1881
1882 <!-- Museum icon if museums are available -->
1883    
1884        <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (7)"></i>
1885    
1886    
1887    <span class="toggle-icon" id="toggle-37" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
1888</div>
1889            <ul class="amenities-list" id="amenities-37">
1890                <!-- Amenities will be dynamically loaded here -->
1891                <li class="loading">Loading amenities...</li>
1892            </ul>
1893        </li>
1894    
1895        <li class="station-item">
1896          <div class="station-header" onclick="toggleAmenities('79')">
1897    <!-- Display circles for each metro line -->
1898    
1899        
1900        <span class="line-circle" style="background-color: #FFA500;" title="ORANGE"></span>
1901    
1902        
1903        <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span>
1904    
1905    <strong>EAST FALLS CHURCH METRO STATION</strong>
1906    
1907    <!-- Hotel icon if hotels are available -->
1908    
1909        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (1)"></i>
1910    
1911    
1912    <!-- Coffee shop icon if coffee shops are available -->
1913    
1914        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (2)"></i>
1915    
1916    
1917    <!-- Restaurant icon if restaurants are available -->
1918    
1919        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (4)"></i>
1920    
1921    
1922    <!-- Nightlife icon if bars are available -->
1923    
1924    
1925    <!-- Pharmacy icon if pharmacies are available -->
1926    
1927    
1928    <!-- Supermarket icon if supermarkets are available -->
1929    
1930
1931 <!-- Museum icon if museums are available -->
1932    
1933    
1934    <span class="toggle-icon" id="toggle-79" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
1935</div>
1936            <ul class="amenities-list" id="amenities-79">
1937                <!-- Amenities will be dynamically loaded here -->
1938                <li class="loading">Loading amenities...</li>
1939            </ul>
1940        </li>
1941    
1942        <li class="station-item">
1943          <div class="station-header" onclick="toggleAmenities('8')">
1944    <!-- Display circles for each metro line -->
1945    
1946        
1947        <span class="line-circle" style="background-color: #0000FF;" title="BLUE"></span>
1948    
1949        
1950        <span class="line-circle" style="background-color: #FFA500;" title="ORANGE"></span>
1951    
1952        
1953        <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span>
1954    
1955    <strong>EASTERN MARKET METRO STATION</strong>
1956    
1957    <!-- Hotel icon if hotels are available -->
1958    
1959        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (1)"></i>
1960    
1961    
1962    <!-- Coffee shop icon if coffee shops are available -->
1963    
1964        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (10)"></i>
1965    
1966    
1967    <!-- Restaurant icon if restaurants are available -->
1968    
1969        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (36)"></i>
1970    
1971    
1972    <!-- Nightlife icon if bars are available -->
1973    
1974        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (12)"></i>
1975    
1976    
1977    <!-- Pharmacy icon if pharmacies are available -->
1978    
1979        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i>
1980    
1981    
1982    <!-- Supermarket icon if supermarkets are available -->
1983    
1984        <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (2)"></i>
1985    
1986
1987 <!-- Museum icon if museums are available -->
1988    
1989    
1990    <span class="toggle-icon" id="toggle-8" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
1991</div>
1992            <ul class="amenities-list" id="amenities-8">
1993                <!-- Amenities will be dynamically loaded here -->
1994                <li class="loading">Loading amenities...</li>
1995            </ul>
1996        </li>
1997    
1998        <li class="station-item">
1999          <div class="station-header" onclick="toggleAmenities('85')">
2000    <!-- Display circles for each metro line -->
2001    
2002        
2003        <span class="line-circle" style="background-color: #FFFF00;" title="YELLOW"></span>
2004    
2005    <strong>EISENHOWER AVE METRO STATION</strong>
2006    
2007    <!-- Hotel icon if hotels are available -->
2008    
2009        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (3)"></i>
2010    
2011    
2012    <!-- Coffee shop icon if coffee shops are available -->
2013    
2014        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (3)"></i>
2015    
2016    
2017    <!-- Restaurant icon if restaurants are available -->
2018    
2019        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (15)"></i>
2020    
2021    
2022    <!-- Nightlife icon if bars are available -->
2023    
2024        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (1)"></i>
2025    
2026    
2027    <!-- Pharmacy icon if pharmacies are available -->
2028    
2029        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i>
2030    
2031    
2032    <!-- Supermarket icon if supermarkets are available -->
2033    
2034        <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i>
2035    
2036
2037 <!-- Museum icon if museums are available -->
2038    
2039    
2040    <span class="toggle-icon" id="toggle-85" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
2041</div>
2042            <ul class="amenities-list" id="amenities-85">
2043                <!-- Amenities will be dynamically loaded here -->
2044                <li class="loading">Loading amenities...</li>
2045            </ul>
2046        </li>
2047    
2048        <li class="station-item">
2049          <div class="station-header" onclick="toggleAmenities('38')">
2050    <!-- Display circles for each metro line -->
2051    
2052        
2053        <span class="line-circle" style="background-color: #FF0000;" title="RED"></span>
2054    
2055    <strong>FARRAGUT NORTH METRO STATION</strong>
2056    
2057    <!-- Hotel icon if hotels are available -->
2058    
2059        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (11)"></i>
2060    
2061    
2062    <!-- Coffee shop icon if coffee shops are available -->
2063    
2064        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (11)"></i>
2065    
2066    
2067    <!-- Restaurant icon if restaurants are available -->
2068    
2069        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (29)"></i>
2070    
2071    
2072    <!-- Nightlife icon if bars are available -->
2073    
2074        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (19)"></i>
2075    
2076    
2077    <!-- Pharmacy icon if pharmacies are available -->
2078    
2079        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (2)"></i>
2080    
2081    
2082    <!-- Supermarket icon if supermarkets are available -->
2083    
2084
2085 <!-- Museum icon if museums are available -->
2086    
2087        <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (2)"></i>
2088    
2089    
2090    <span class="toggle-icon" id="toggle-38" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
2091</div>
2092            <ul class="amenities-list" id="amenities-38">
2093                <!-- Amenities will be dynamically loaded here -->
2094                <li class="loading">Loading amenities...</li>
2095            </ul>
2096        </li>
2097    
2098        <li class="station-item">
2099          <div class="station-header" onclick="toggleAmenities('16')">
2100    <!-- Display circles for each metro line -->
2101    
2102        
2103        <span class="line-circle" style="background-color: #0000FF;" title="BLUE"></span>
2104    
2105        
2106        <span class="line-circle" style="background-color: #FFA500;" title="ORANGE"></span>
2107    
2108        
2109        <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span>
2110    
2111    <strong>FARRAGUT WEST METRO STATION</strong>
2112    
2113    <!-- Hotel icon if hotels are available -->
2114    
2115        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (5)"></i>
2116    
2117    
2118    <!-- Coffee shop icon if coffee shops are available -->
2119    
2120        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (6)"></i>
2121    
2122    
2123    <!-- Restaurant icon if restaurants are available -->
2124    
2125        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (25)"></i>
2126    
2127    
2128    <!-- Nightlife icon if bars are available -->
2129    
2130        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (1)"></i>
2131    
2132    
2133    <!-- Pharmacy icon if pharmacies are available -->
2134    
2135        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i>
2136    
2137    
2138    <!-- Supermarket icon if supermarkets are available -->
2139    
2140
2141 <!-- Museum icon if museums are available -->
2142    
2143        <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (4)"></i>
2144    
2145    
2146    <span class="toggle-icon" id="toggle-16" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
2147</div>
2148            <ul class="amenities-list" id="amenities-16">
2149                <!-- Amenities will be dynamically loaded here -->
2150                <li class="loading">Loading amenities...</li>
2151            </ul>
2152        </li>
2153    
2154        <li class="station-item">
2155          <div class="station-header" onclick="toggleAmenities('34')">
2156    <!-- Display circles for each metro line -->
2157    
2158        
2159        <span class="line-circle" style="background-color: #0000FF;" title="BLUE"></span>
2160    
2161        
2162        <span class="line-circle" style="background-color: #FFA500;" title="ORANGE"></span>
2163    
2164        
2165        <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span>
2166    
2167    <strong>FEDERAL CENTER METRO STATION</strong>
2168    
2169    <!-- Hotel icon if hotels are available -->
2170    
2171        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (2)"></i>
2172    
2173    
2174    <!-- Coffee shop icon if coffee shops are available -->
2175    
2176        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (1)"></i>
2177    
2178    
2179    <!-- Restaurant icon if restaurants are available -->
2180    
2181        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (4)"></i>
2182    
2183    
2184    <!-- Nightlife icon if bars are available -->
2185    
2186    
2187    <!-- Pharmacy icon if pharmacies are available -->
2188    
2189    
2190    <!-- Supermarket icon if supermarkets are available -->
2191    
2192
2193 <!-- Museum icon if museums are available -->
2194    
2195        <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (1)"></i>
2196    
2197    
2198    <span class="toggle-icon" id="toggle-34" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
2199</div>
2200            <ul class="amenities-list" id="amenities-34">
2201                <!-- Amenities will be dynamically loaded here -->
2202                <li class="loading">Loading amenities...</li>
2203            </ul>
2204        </li>
2205    
2206        <li class="station-item">
2207          <div class="station-header" onclick="toggleAmenities('13')">
2208    <!-- Display circles for each metro line -->
2209    
2210        
2211        <span class="line-circle" style="background-color: #0000FF;" title="BLUE"></span>
2212    
2213        
2214        <span class="line-circle" style="background-color: #FFA500;" title="ORANGE"></span>
2215    
2216        
2217        <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span>
2218    
2219    <strong>FEDERAL TRIANGLE METRO STATION</strong>
2220    
2221    <!-- Hotel icon if hotels are available -->
2222    
2223        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (1)"></i>
2224    
2225    
2226    <!-- Coffee shop icon if coffee shops are available -->
2227    
2228        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (2)"></i>
2229    
2230    
2231    <!-- Restaurant icon if restaurants are available -->
2232    
2233        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (9)"></i>
2234    
2235    
2236    <!-- Nightlife icon if bars are available -->
2237    
2238        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (3)"></i>
2239    
2240    
2241    <!-- Pharmacy icon if pharmacies are available -->
2242    
2243        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i>
2244    
2245    
2246    <!-- Supermarket icon if supermarkets are available -->
2247    
2248
2249 <!-- Museum icon if museums are available -->
2250    
2251        <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (4)"></i>
2252    
2253    
2254    <span class="toggle-icon" id="toggle-13" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
2255</div>
2256            <ul class="amenities-list" id="amenities-13">
2257                <!-- Amenities will be dynamically loaded here -->
2258                <li class="loading">Loading amenities...</li>
2259            </ul>
2260        </li>
2261    
2262        <li class="station-item">
2263          <div class="station-header" onclick="toggleAmenities('39')">
2264    <!-- Display circles for each metro line -->
2265    
2266        
2267        <span class="line-circle" style="background-color: #0000FF;" title="BLUE"></span>
2268    
2269        
2270        <span class="line-circle" style="background-color: #FFA500;" title="ORANGE"></span>
2271    
2272        
2273        <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span>
2274    
2275    <strong>FOGGY BOTTOM METRO STATION</strong>
2276    
2277    <!-- Hotel icon if hotels are available -->
2278    
2279        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (19)"></i>
2280    
2281    
2282    <!-- Coffee shop icon if coffee shops are available -->
2283    
2284        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (25)"></i>
2285    
2286    
2287    <!-- Restaurant icon if restaurants are available -->
2288    
2289        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (34)"></i>
2290    
2291    
2292    <!-- Nightlife icon if bars are available -->
2293    
2294        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (5)"></i>
2295    
2296    
2297    <!-- Pharmacy icon if pharmacies are available -->
2298    
2299        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (4)"></i>
2300    
2301    
2302    <!-- Supermarket icon if supermarkets are available -->
2303    
2304        <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (2)"></i>
2305    
2306
2307 <!-- Museum icon if museums are available -->
2308    
2309        <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (1)"></i>
2310    
2311    
2312    <span class="toggle-icon" id="toggle-39" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
2313</div>
2314            <ul class="amenities-list" id="amenities-39">
2315                <!-- Amenities will be dynamically loaded here -->
2316                <li class="loading">Loading amenities...</li>
2317            </ul>
2318        </li>
2319    
2320        <li class="station-item">
2321          <div class="station-header" onclick="toggleAmenities('65')">
2322    <!-- Display circles for each metro line -->
2323    
2324        
2325        <span class="line-circle" style="background-color: #FF0000;" title="RED"></span>
2326    
2327    <strong>FOREST GLEN METRO STATION</strong>
2328    
2329    <!-- Hotel icon if hotels are available -->
2330    
2331    
2332    <!-- Coffee shop icon if coffee shops are available -->
2333    
2334        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (1)"></i>
2335    
2336    
2337    <!-- Restaurant icon if restaurants are available -->
2338    
2339        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (8)"></i>
2340    
2341    
2342    <!-- Nightlife icon if bars are available -->
2343    
2344    
2345    <!-- Pharmacy icon if pharmacies are available -->
2346    
2347        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i>
2348    
2349    
2350    <!-- Supermarket icon if supermarkets are available -->
2351    
2352        <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (2)"></i>
2353    
2354
2355 <!-- Museum icon if museums are available -->
2356    
2357        <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (2)"></i>
2358    
2359    
2360    <span class="toggle-icon" id="toggle-65" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
2361</div>
2362            <ul class="amenities-list" id="amenities-65">
2363                <!-- Amenities will be dynamically loaded here -->
2364                <li class="loading">Loading amenities...</li>
2365            </ul>
2366        </li>
2367    
2368        <li class="station-item">
2369          <div class="station-header" onclick="toggleAmenities('23')">
2370    <!-- Display circles for each metro line -->
2371    
2372        
2373        <span class="line-circle" style="background-color: #008000;" title="GREEN"></span>
2374    
2375        
2376        <span class="line-circle" style="background-color: #FF0000;" title="RED"></span>
2377    
2378    <strong>FORT TOTTEN METRO STATION</strong>
2379    
2380    <!-- Hotel icon if hotels are available -->
2381    
2382    
2383    <!-- Coffee shop icon if coffee shops are available -->
2384    
2385    
2386    <!-- Restaurant icon if restaurants are available -->
2387    
2388        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (1)"></i>
2389    
2390    
2391    <!-- Nightlife icon if bars are available -->
2392    
2393    
2394    <!-- Pharmacy icon if pharmacies are available -->
2395    
2396        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i>
2397    
2398    
2399    <!-- Supermarket icon if supermarkets are available -->
2400    
2401        <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i>
2402    
2403
2404 <!-- Museum icon if museums are available -->
2405    
2406    
2407    <span class="toggle-icon" id="toggle-23" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
2408</div>
2409            <ul class="amenities-list" id="amenities-23">
2410                <!-- Amenities will be dynamically loaded here -->
2411                <li class="loading">Loading amenities...</li>
2412            </ul>
2413        </li>
2414    
2415        <li class="station-item">
2416          <div class="station-header" onclick="toggleAmenities('107')">
2417    <!-- Display circles for each metro line -->
2418    
2419        
2420        <span class="line-circle" style="background-color: #800080;" title="VRE"></span>
2421    
2422    <strong>FRANCONIA SPRINGFIELD VRE</strong>
2423    
2424    <!-- Hotel icon if hotels are available -->
2425    
2426    
2427    <!-- Coffee shop icon if coffee shops are available -->
2428    
2429    
2430    <!-- Restaurant icon if restaurants are available -->
2431    
2432        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (4)"></i>
2433    
2434    
2435    <!-- Nightlife icon if bars are available -->
2436    
2437    
2438    <!-- Pharmacy icon if pharmacies are available -->
2439    
2440    
2441    <!-- Supermarket icon if supermarkets are available -->
2442    
2443
2444 <!-- Museum icon if museums are available -->
2445    
2446    
2447    <span class="toggle-icon" id="toggle-107" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
2448</div>
2449            <ul class="amenities-list" id="amenities-107">
2450                <!-- Amenities will be dynamically loaded here -->
2451                <li class="loading">Loading amenities...</li>
2452            </ul>
2453        </li>
2454    
2455        <li class="station-item">
2456          <div class="station-header" onclick="toggleAmenities('130')">
2457    <!-- Display circles for each metro line -->
2458    
2459        
2460        <span class="line-circle" style="background-color: #8B4513;" title="MARC"></span>
2461    
2462    <strong>FREDERICK MARC</strong>
2463    
2464    <!-- Hotel icon if hotels are available -->
2465    
2466        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (4)"></i>
2467    
2468    
2469    <!-- Coffee shop icon if coffee shops are available -->
2470    
2471        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (10)"></i>
2472    
2473    
2474    <!-- Restaurant icon if restaurants are available -->
2475    
2476        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (36)"></i>
2477    
2478    
2479    <!-- Nightlife icon if bars are available -->
2480    
2481        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (4)"></i>
2482    
2483    
2484    <!-- Pharmacy icon if pharmacies are available -->
2485    
2486    
2487    <!-- Supermarket icon if supermarkets are available -->
2488    
2489
2490 <!-- Museum icon if museums are available -->
2491    
2492    
2493    <span class="toggle-icon" id="toggle-130" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
2494</div>
2495            <ul class="amenities-list" id="amenities-130">
2496                <!-- Amenities will be dynamically loaded here -->
2497                <li class="loading">Loading amenities...</li>
2498            </ul>
2499        </li>
2500    
2501        <li class="station-item">
2502          <div class="station-header" onclick="toggleAmenities('113')">
2503    <!-- Display circles for each metro line -->
2504    
2505        
2506        <span class="line-circle" style="background-color: #800080;" title="VRE"></span>
2507    
2508    <strong>FREDERICKSBURG VRE</strong>
2509    
2510    <!-- Hotel icon if hotels are available -->
2511    
2512    
2513    <!-- Coffee shop icon if coffee shops are available -->
2514    
2515        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (11)"></i>
2516    
2517    
2518    <!-- Restaurant icon if restaurants are available -->
2519    
2520        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (33)"></i>
2521    
2522    
2523    <!-- Nightlife icon if bars are available -->
2524    
2525        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (12)"></i>
2526    
2527    
2528    <!-- Pharmacy icon if pharmacies are available -->
2529    
2530    
2531    <!-- Supermarket icon if supermarkets are available -->
2532    
2533
2534 <!-- Museum icon if museums are available -->
2535    
2536    
2537    <span class="toggle-icon" id="toggle-113" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
2538</div>
2539            <ul class="amenities-list" id="amenities-113">
2540                <!-- Amenities will be dynamically loaded here -->
2541                <li class="loading">Loading amenities...</li>
2542            </ul>
2543        </li>
2544    
2545        <li class="station-item">
2546          <div class="station-header" onclick="toggleAmenities('57')">
2547    <!-- Display circles for each metro line -->
2548    
2549        
2550        <span class="line-circle" style="background-color: #FF0000;" title="RED"></span>
2551    
2552    <strong>FRIENDSHIP HEIGHTS METRO STATION</strong>
2553    
2554    <!-- Hotel icon if hotels are available -->
2555    
2556        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (2)"></i>
2557    
2558    
2559    <!-- Coffee shop icon if coffee shops are available -->
2560    
2561        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (5)"></i>
2562    
2563    
2564    <!-- Restaurant icon if restaurants are available -->
2565    
2566        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (23)"></i>
2567    
2568    
2569    <!-- Nightlife icon if bars are available -->
2570    
2571    
2572    <!-- Pharmacy icon if pharmacies are available -->
2573    
2574    
2575    <!-- Supermarket icon if supermarkets are available -->
2576    
2577        <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (3)"></i>
2578    
2579
2580 <!-- Museum icon if museums are available -->
2581    
2582    
2583    <span class="toggle-icon" id="toggle-57" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
2584</div>
2585            <ul class="amenities-list" id="amenities-57">
2586                <!-- Amenities will be dynamically loaded here -->
2587                <li class="loading">Loading amenities...</li>
2588            </ul>
2589        </li>
2590    
2591        <li class="station-item">
2592          <div class="station-header" onclick="toggleAmenities('131')">
2593    <!-- Display circles for each metro line -->
2594    
2595        
2596        <span class="line-circle" style="background-color: #8B4513;" title="MARC"></span>
2597    
2598    <strong>GAITHERSBURG MARC</strong>
2599    
2600    <!-- Hotel icon if hotels are available -->
2601    
2602        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (1)"></i>
2603    
2604    
2605    <!-- Coffee shop icon if coffee shops are available -->
2606    
2607        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (1)"></i>
2608    
2609    
2610    <!-- Restaurant icon if restaurants are available -->
2611    
2612        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (14)"></i>
2613    
2614    
2615    <!-- Nightlife icon if bars are available -->
2616    
2617    
2618    <!-- Pharmacy icon if pharmacies are available -->
2619    
2620    
2621    <!-- Supermarket icon if supermarkets are available -->
2622    
2623
2624 <!-- Museum icon if museums are available -->
2625    
2626        <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (3)"></i>
2627    
2628    
2629    <span class="toggle-icon" id="toggle-131" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
2630</div>
2631            <ul class="amenities-list" id="amenities-131">
2632                <!-- Amenities will be dynamically loaded here -->
2633                <li class="loading">Loading amenities...</li>
2634            </ul>
2635        </li>
2636    
2637        <li class="station-item">
2638          <div class="station-header" onclick="toggleAmenities('5')">
2639    <!-- Display circles for each metro line -->
2640    
2641        
2642        <span class="line-circle" style="background-color: #FF0000;" title="RED"></span>
2643    
2644        
2645        <span class="line-circle" style="background-color: #008000;" title="GREEN"></span>
2646    
2647        
2648        <span class="line-circle" style="background-color: #FFFF00;" title="YELLOW"></span>
2649    
2650    <strong>GALLERY PLACE CHINATOWN METRO STATION</strong>
2651    
2652    <!-- Hotel icon if hotels are available -->
2653    
2654        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (7)"></i>
2655    
2656    
2657    <!-- Coffee shop icon if coffee shops are available -->
2658    
2659        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (6)"></i>
2660    
2661    
2662    <!-- Restaurant icon if restaurants are available -->
2663    
2664        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (21)"></i>
2665    
2666    
2667    <!-- Nightlife icon if bars are available -->
2668    
2669        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (11)"></i>
2670    
2671    
2672    <!-- Pharmacy icon if pharmacies are available -->
2673    
2674    
2675    <!-- Supermarket icon if supermarkets are available -->
2676    
2677
2678 <!-- Museum icon if museums are available -->
2679    
2680        <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (3)"></i>
2681    
2682    
2683    <span class="toggle-icon" id="toggle-5" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
2684</div>
2685            <ul class="amenities-list" id="amenities-5">
2686                <!-- Amenities will be dynamically loaded here -->
2687                <li class="loading">Loading amenities...</li>
2688            </ul>
2689        </li>
2690    
2691        <li class="station-item">
2692          <div class="station-header" onclick="toggleAmenities('132')">
2693    <!-- Display circles for each metro line -->
2694    
2695        
2696        <span class="line-circle" style="background-color: #8B4513;" title="MARC"></span>
2697    
2698    <strong>GARRETT PARK MARC</strong>
2699    
2700    <!-- Hotel icon if hotels are available -->
2701    
2702    
2703    <!-- Coffee shop icon if coffee shops are available -->
2704    
2705    
2706    <!-- Restaurant icon if restaurants are available -->
2707    
2708        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (1)"></i>
2709    
2710    
2711    <!-- Nightlife icon if bars are available -->
2712    
2713    
2714    <!-- Pharmacy icon if pharmacies are available -->
2715    
2716    
2717    <!-- Supermarket icon if supermarkets are available -->
2718    
2719
2720 <!-- Museum icon if museums are available -->
2721    
2722        <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (1)"></i>
2723    
2724    
2725    <span class="toggle-icon" id="toggle-132" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
2726</div>
2727            <ul class="amenities-list" id="amenities-132">
2728                <!-- Amenities will be dynamically loaded here -->
2729                <li class="loading">Loading amenities...</li>
2730            </ul>
2731        </li>
2732    
2733        <li class="station-item">
2734          <div class="station-header" onclick="toggleAmenities('22')">
2735    <!-- Display circles for each metro line -->
2736    
2737        
2738        <span class="line-circle" style="background-color: #008000;" title="GREEN"></span>
2739    
2740    <strong>GEORGIA AVE PETWORTH METRO STATION</strong>
2741    
2742    <!-- Hotel icon if hotels are available -->
2743    
2744    
2745    <!-- Coffee shop icon if coffee shops are available -->
2746    
2747        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (9)"></i>
2748    
2749    
2750    <!-- Restaurant icon if restaurants are available -->
2751    
2752        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (35)"></i>
2753    
2754    
2755    <!-- Nightlife icon if bars are available -->
2756    
2757        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (13)"></i>
2758    
2759    
2760    <!-- Pharmacy icon if pharmacies are available -->
2761    
2762        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i>
2763    
2764    
2765    <!-- Supermarket icon if supermarkets are available -->
2766    
2767        <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i>
2768    
2769
2770 <!-- Museum icon if museums are available -->
2771    
2772    
2773    <span class="toggle-icon" id="toggle-22" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
2774</div>
2775            <ul class="amenities-list" id="amenities-22">
2776                <!-- Amenities will be dynamically loaded here -->
2777                <li class="loading">Loading amenities...</li>
2778            </ul>
2779        </li>
2780    
2781        <li class="station-item">
2782          <div class="station-header" onclick="toggleAmenities('133')">
2783    <!-- Display circles for each metro line -->
2784    
2785        
2786        <span class="line-circle" style="background-color: #8B4513;" title="MARC"></span>
2787    
2788    <strong>GERMANTOWN MARC</strong>
2789    
2790    <!-- Hotel icon if hotels are available -->
2791    
2792    
2793    <!-- Coffee shop icon if coffee shops are available -->
2794    
2795        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (2)"></i>
2796    
2797    
2798    <!-- Restaurant icon if restaurants are available -->
2799    
2800        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (10)"></i>
2801    
2802    
2803    <!-- Nightlife icon if bars are available -->
2804    
2805    
2806    <!-- Pharmacy icon if pharmacies are available -->
2807    
2808        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i>
2809    
2810    
2811    <!-- Supermarket icon if supermarkets are available -->
2812    
2813
2814 <!-- Museum icon if museums are available -->
2815    
2816    
2817    <span class="toggle-icon" id="toggle-133" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
2818</div>
2819            <ul class="amenities-list" id="amenities-133">
2820                <!-- Amenities will be dynamically loaded here -->
2821                <li class="loading">Loading amenities...</li>
2822            </ul>
2823        </li>
2824    
2825        <li class="station-item">
2826          <div class="station-header" onclick="toggleAmenities('64')">
2827    <!-- Display circles for each metro line -->
2828    
2829        
2830        <span class="line-circle" style="background-color: #FF0000;" title="RED"></span>
2831    
2832    <strong>GLENMONT METRO STATION</strong>
2833    
2834    <!-- Hotel icon if hotels are available -->
2835    
2836    
2837    <!-- Coffee shop icon if coffee shops are available -->
2838    
2839        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (1)"></i>
2840    
2841    
2842    <!-- Restaurant icon if restaurants are available -->
2843    
2844        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (7)"></i>
2845    
2846    
2847    <!-- Nightlife icon if bars are available -->
2848    
2849        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (1)"></i>
2850    
2851    
2852    <!-- Pharmacy icon if pharmacies are available -->
2853    
2854        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i>
2855    
2856    
2857    <!-- Supermarket icon if supermarkets are available -->
2858    
2859
2860 <!-- Museum icon if museums are available -->
2861    
2862    
2863    <span class="toggle-icon" id="toggle-64" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
2864</div>
2865            <ul class="amenities-list" id="amenities-64">
2866                <!-- Amenities will be dynamically loaded here -->
2867                <li class="loading">Loading amenities...</li>
2868            </ul>
2869        </li>
2870    
2871        <li class="station-item">
2872          <div class="station-header" onclick="toggleAmenities('134')">
2873    <!-- Display circles for each metro line -->
2874    
2875        
2876        <span class="line-circle" style="background-color: #8B4513;" title="MARC"></span>
2877    
2878    <strong>GREENBELT MARC</strong>
2879    
2880    <!-- Hotel icon if hotels are available -->
2881    
2882    
2883    <!-- Coffee shop icon if coffee shops are available -->
2884    
2885    
2886    <!-- Restaurant icon if restaurants are available -->
2887    
2888        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (1)"></i>
2889    
2890    
2891    <!-- Nightlife icon if bars are available -->
2892    
2893    
2894    <!-- Pharmacy icon if pharmacies are available -->
2895    
2896    
2897    <!-- Supermarket icon if supermarkets are available -->
2898    
2899        <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i>
2900    
2901
2902 <!-- Museum icon if museums are available -->
2903    
2904    
2905    <span class="toggle-icon" id="toggle-134" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
2906</div>
2907            <ul class="amenities-list" id="amenities-134">
2908                <!-- Amenities will be dynamically loaded here -->
2909                <li class="loading">Loading amenities...</li>
2910            </ul>
2911        </li>
2912    
2913        <li class="station-item">
2914          <div class="station-header" onclick="toggleAmenities('95')">
2915    <!-- Display circles for each metro line -->
2916    
2917        
2918        <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span>
2919    
2920    <strong>GREENSBORO METRO STATION</strong>
2921    
2922    <!-- Hotel icon if hotels are available -->
2923    
2924        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (2)"></i>
2925    
2926    
2927    <!-- Coffee shop icon if coffee shops are available -->
2928    
2929        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (5)"></i>
2930    
2931    
2932    <!-- Restaurant icon if restaurants are available -->
2933    
2934        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (28)"></i>
2935    
2936    
2937    <!-- Nightlife icon if bars are available -->
2938    
2939        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (3)"></i>
2940    
2941    
2942    <!-- Pharmacy icon if pharmacies are available -->
2943    
2944    
2945    <!-- Supermarket icon if supermarkets are available -->
2946    
2947        <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i>
2948    
2949
2950 <!-- Museum icon if museums are available -->
2951    
2952    
2953    <span class="toggle-icon" id="toggle-95" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
2954</div>
2955            <ul class="amenities-list" id="amenities-95">
2956                <!-- Amenities will be dynamically loaded here -->
2957                <li class="loading">Loading amenities...</li>
2958            </ul>
2959        </li>
2960    
2961        <li class="station-item">
2962          <div class="station-header" onclick="toggleAmenities('59')">
2963    <!-- Display circles for each metro line -->
2964    
2965        
2966        <span class="line-circle" style="background-color: #FF0000;" title="RED"></span>
2967    
2968    <strong>GROSVENOR METRO STATION</strong>
2969    
2970    <!-- Hotel icon if hotels are available -->
2971    
2972    
2973    <!-- Coffee shop icon if coffee shops are available -->
2974    
2975    
2976    <!-- Restaurant icon if restaurants are available -->
2977    
2978    
2979    <!-- Nightlife icon if bars are available -->
2980    
2981    
2982    <!-- Pharmacy icon if pharmacies are available -->
2983    
2984    
2985    <!-- Supermarket icon if supermarkets are available -->
2986    
2987
2988 <!-- Museum icon if museums are available -->
2989    
2990        <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (1)"></i>
2991    
2992    
2993    <span class="toggle-icon" id="toggle-59" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
2994</div>
2995            <ul class="amenities-list" id="amenities-59">
2996                <!-- Amenities will be dynamically loaded here -->
2997                <li class="loading">Loading amenities...</li>
2998            </ul>
2999        </li>
3000    
3001        <li class="station-item">
3002          <div class="station-header" onclick="toggleAmenities('91')">
3003    <!-- Display circles for each metro line -->
3004    
3005        
3006        <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span>
3007    
3008    <strong>HERNDON METRO STATION</strong>
3009    
3010    <!-- Hotel icon if hotels are available -->
3011    
3012        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (1)"></i>
3013    
3014    
3015    <!-- Coffee shop icon if coffee shops are available -->
3016    
3017    
3018    <!-- Restaurant icon if restaurants are available -->
3019    
3020        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (3)"></i>
3021    
3022    
3023    <!-- Nightlife icon if bars are available -->
3024    
3025    
3026    <!-- Pharmacy icon if pharmacies are available -->
3027    
3028    
3029    <!-- Supermarket icon if supermarkets are available -->
3030    
3031
3032 <!-- Museum icon if museums are available -->
3033    
3034    
3035    <span class="toggle-icon" id="toggle-91" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
3036</div>
3037            <ul class="amenities-list" id="amenities-91">
3038                <!-- Amenities will be dynamically loaded here -->
3039                <li class="loading">Loading amenities...</li>
3040            </ul>
3041        </li>
3042    
3043        <li class="station-item">
3044          <div class="station-header" onclick="toggleAmenities('82')">
3045    <!-- Display circles for each metro line -->
3046    
3047        
3048        <span class="line-circle" style="background-color: #FFFF00;" title="YELLOW"></span>
3049    
3050    <strong>HUNTINGTON METRO STATION</strong>
3051    
3052    <!-- Hotel icon if hotels are available -->
3053    
3054    
3055    <!-- Coffee shop icon if coffee shops are available -->
3056    
3057        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (1)"></i>
3058    
3059    
3060    <!-- Restaurant icon if restaurants are available -->
3061    
3062        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (8)"></i>
3063    
3064    
3065    <!-- Nightlife icon if bars are available -->
3066    
3067    
3068    <!-- Pharmacy icon if pharmacies are available -->
3069    
3070    
3071    <!-- Supermarket icon if supermarkets are available -->
3072    
3073
3074 <!-- Museum icon if museums are available -->
3075    
3076    
3077    <span class="toggle-icon" id="toggle-82" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
3078</div>
3079            <ul class="amenities-list" id="amenities-82">
3080                <!-- Amenities will be dynamically loaded here -->
3081                <li class="loading">Loading amenities...</li>
3082            </ul>
3083        </li>
3084    
3085        <li class="station-item">
3086          <div class="station-header" onclick="toggleAmenities('50')">
3087    <!-- Display circles for each metro line -->
3088    
3089        
3090        <span class="line-circle" style="background-color: #008000;" title="GREEN"></span>
3091    
3092    <strong>HYATTSVILLE CROSSING METRO STATION</strong>
3093    
3094    <!-- Hotel icon if hotels are available -->
3095    
3096    
3097    <!-- Coffee shop icon if coffee shops are available -->
3098    
3099        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (1)"></i>
3100    
3101    
3102    <!-- Restaurant icon if restaurants are available -->
3103    
3104        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (22)"></i>
3105    
3106    
3107    <!-- Nightlife icon if bars are available -->
3108    
3109        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (2)"></i>
3110    
3111    
3112    <!-- Pharmacy icon if pharmacies are available -->
3113    
3114        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (2)"></i>
3115    
3116    
3117    <!-- Supermarket icon if supermarkets are available -->
3118    
3119        <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (2)"></i>
3120    
3121
3122 <!-- Museum icon if museums are available -->
3123    
3124    
3125    <span class="toggle-icon" id="toggle-50" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
3126</div>
3127            <ul class="amenities-list" id="amenities-50">
3128                <!-- Amenities will be dynamically loaded here -->
3129                <li class="loading">Loading amenities...</li>
3130            </ul>
3131        </li>
3132    
3133        <li class="station-item">
3134          <div class="station-header" onclick="toggleAmenities('90')">
3135    <!-- Display circles for each metro line -->
3136    
3137        
3138        <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span>
3139    
3140    <strong>INNOVATION CENTER METRO STATION</strong>
3141    
3142    <!-- Hotel icon if hotels are available -->
3143    
3144        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (4)"></i>
3145    
3146    
3147    <!-- Coffee shop icon if coffee shops are available -->
3148    
3149        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (2)"></i>
3150    
3151    
3152    <!-- Restaurant icon if restaurants are available -->
3153    
3154        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (4)"></i>
3155    
3156    
3157    <!-- Nightlife icon if bars are available -->
3158    
3159    
3160    <!-- Pharmacy icon if pharmacies are available -->
3161    
3162    
3163    <!-- Supermarket icon if supermarkets are available -->
3164    
3165
3166 <!-- Museum icon if museums are available -->
3167    
3168    
3169    <span class="toggle-icon" id="toggle-90" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
3170</div>
3171            <ul class="amenities-list" id="amenities-90">
3172                <!-- Amenities will be dynamically loaded here -->
3173                <li class="loading">Loading amenities...</li>
3174            </ul>
3175        </li>
3176    
3177        <li class="station-item">
3178          <div class="station-header" onclick="toggleAmenities('137')">
3179    <!-- Display circles for each metro line -->
3180    
3181        
3182        <span class="line-circle" style="background-color: #8B4513;" title="MARC"></span>
3183    
3184    <strong>JESSUP MARC</strong>
3185    
3186    <!-- Hotel icon if hotels are available -->
3187    
3188    
3189    <!-- Coffee shop icon if coffee shops are available -->
3190    
3191    
3192    <!-- Restaurant icon if restaurants are available -->
3193    
3194        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (1)"></i>
3195    
3196    
3197    <!-- Nightlife icon if bars are available -->
3198    
3199    
3200    <!-- Pharmacy icon if pharmacies are available -->
3201    
3202    
3203    <!-- Supermarket icon if supermarkets are available -->
3204    
3205
3206 <!-- Museum icon if museums are available -->
3207    
3208    
3209    <span class="toggle-icon" id="toggle-137" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
3210</div>
3211            <ul class="amenities-list" id="amenities-137">
3212                <!-- Amenities will be dynamically loaded here -->
3213                <li class="loading">Loading amenities...</li>
3214            </ul>
3215        </li>
3216    
3217        <li class="station-item">
3218          <div class="station-header" onclick="toggleAmenities('4')">
3219    <!-- Display circles for each metro line -->
3220    
3221        
3222        <span class="line-circle" style="background-color: #FF0000;" title="RED"></span>
3223    
3224    <strong>JUDICIARY SQUARE METRO STATION</strong>
3225    
3226    <!-- Hotel icon if hotels are available -->
3227    
3228        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (1)"></i>
3229    
3230    
3231    <!-- Coffee shop icon if coffee shops are available -->
3232    
3233        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (2)"></i>
3234    
3235    
3236    <!-- Restaurant icon if restaurants are available -->
3237    
3238        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (11)"></i>
3239    
3240    
3241    <!-- Nightlife icon if bars are available -->
3242    
3243    
3244    <!-- Pharmacy icon if pharmacies are available -->
3245    
3246    
3247    <!-- Supermarket icon if supermarkets are available -->
3248    
3249
3250 <!-- Museum icon if museums are available -->
3251    
3252        <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (1)"></i>
3253    
3254    
3255    <span class="toggle-icon" id="toggle-4" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
3256</div>
3257            <ul class="amenities-list" id="amenities-4">
3258                <!-- Amenities will be dynamically loaded here -->
3259                <li class="loading">Loading amenities...</li>
3260            </ul>
3261        </li>
3262    
3263        <li class="station-item">
3264          <div class="station-header" onclick="toggleAmenities('138')">
3265    <!-- Display circles for each metro line -->
3266    
3267        
3268        <span class="line-circle" style="background-color: #8B4513;" title="MARC"></span>
3269    
3270    <strong>KENSINGTON MARC</strong>
3271    
3272    <!-- Hotel icon if hotels are available -->
3273    
3274    
3275    <!-- Coffee shop icon if coffee shops are available -->
3276    
3277        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (9)"></i>
3278    
3279    
3280    <!-- Restaurant icon if restaurants are available -->
3281    
3282        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (15)"></i>
3283    
3284    
3285    <!-- Nightlife icon if bars are available -->
3286    
3287        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (3)"></i>
3288    
3289    
3290    <!-- Pharmacy icon if pharmacies are available -->
3291    
3292        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i>
3293    
3294    
3295    <!-- Supermarket icon if supermarkets are available -->
3296    
3297        <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i>
3298    
3299
3300 <!-- Museum icon if museums are available -->
3301    
3302        <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (1)"></i>
3303    
3304    
3305    <span class="toggle-icon" id="toggle-138" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
3306</div>
3307            <ul class="amenities-list" id="amenities-138">
3308                <!-- Amenities will be dynamically loaded here -->
3309                <li class="loading">Loading amenities...</li>
3310            </ul>
3311        </li>
3312    
3313        <li class="station-item">
3314          <div class="station-header" onclick="toggleAmenities('86')">
3315    <!-- Display circles for each metro line -->
3316    
3317        
3318        <span class="line-circle" style="background-color: #0000FF;" title="BLUE"></span>
3319    
3320        
3321        <span class="line-circle" style="background-color: #FFFF00;" title="YELLOW"></span>
3322    
3323    <strong>KING STREET METRO STATION</strong>
3324    
3325    <!-- Hotel icon if hotels are available -->
3326    
3327        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (9)"></i>
3328    
3329    
3330    <!-- Coffee shop icon if coffee shops are available -->
3331    
3332        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (8)"></i>
3333    
3334    
3335    <!-- Restaurant icon if restaurants are available -->
3336    
3337        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (19)"></i>
3338    
3339    
3340    <!-- Nightlife icon if bars are available -->
3341    
3342        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (4)"></i>
3343    
3344    
3345    <!-- Pharmacy icon if pharmacies are available -->
3346    
3347        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i>
3348    
3349    
3350    <!-- Supermarket icon if supermarkets are available -->
3351    
3352        <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i>
3353    
3354
3355 <!-- Museum icon if museums are available -->
3356    
3357        <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (4)"></i>
3358    
3359    
3360    <span class="toggle-icon" id="toggle-86" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
3361</div>
3362            <ul class="amenities-list" id="amenities-86">
3363                <!-- Amenities will be dynamically loaded here -->
3364                <li class="loading">Loading amenities...</li>
3365            </ul>
3366        </li>
3367    
3368        <li class="station-item">
3369          <div class="station-header" onclick="toggleAmenities('140')">
3370    <!-- Display circles for each metro line -->
3371    
3372        
3373        <span class="line-circle" style="background-color: #8B4513;" title="MARC"></span>
3374    
3375    <strong>LAUREL MARC</strong>
3376    
3377    <!-- Hotel icon if hotels are available -->
3378    
3379        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (1)"></i>
3380    
3381    
3382    <!-- Coffee shop icon if coffee shops are available -->
3383    
3384        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (3)"></i>
3385    
3386    
3387    <!-- Restaurant icon if restaurants are available -->
3388    
3389        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (13)"></i>
3390    
3391    
3392    <!-- Nightlife icon if bars are available -->
3393    
3394        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (1)"></i>
3395    
3396    
3397    <!-- Pharmacy icon if pharmacies are available -->
3398    
3399        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i>
3400    
3401    
3402    <!-- Supermarket icon if supermarkets are available -->
3403    
3404
3405 <!-- Museum icon if museums are available -->
3406    
3407    
3408    <span class="toggle-icon" id="toggle-140" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
3409</div>
3410            <ul class="amenities-list" id="amenities-140">
3411                <!-- Amenities will be dynamically loaded here -->
3412                <li class="loading">Loading amenities...</li>
3413            </ul>
3414        </li>
3415    
3416        <li class="station-item">
3417          <div class="station-header" onclick="toggleAmenities('139')">
3418    <!-- Display circles for each metro line -->
3419    
3420        
3421        <span class="line-circle" style="background-color: #8B4513;" title="MARC"></span>
3422    
3423    <strong>LAUREL RACETRACK MARC</strong>
3424    
3425    <!-- Hotel icon if hotels are available -->
3426    
3427    
3428    <!-- Coffee shop icon if coffee shops are available -->
3429    
3430    
3431    <!-- Restaurant icon if restaurants are available -->
3432    
3433        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (2)"></i>
3434    
3435    
3436    <!-- Nightlife icon if bars are available -->
3437    
3438    
3439    <!-- Pharmacy icon if pharmacies are available -->
3440    
3441    
3442    <!-- Supermarket icon if supermarkets are available -->
3443    
3444
3445 <!-- Museum icon if museums are available -->
3446    
3447    
3448    <span class="toggle-icon" id="toggle-139" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
3449</div>
3450            <ul class="amenities-list" id="amenities-139">
3451                <!-- Amenities will be dynamically loaded here -->
3452                <li class="loading">Loading amenities...</li>
3453            </ul>
3454        </li>
3455    
3456        <li class="station-item">
3457          <div class="station-header" onclick="toggleAmenities('36')">
3458    <!-- Display circles for each metro line -->
3459    
3460        
3461        <span class="line-circle" style="background-color: #0000FF;" title="BLUE"></span>
3462    
3463        
3464        <span class="line-circle" style="background-color: #008000;" title="GREEN"></span>
3465    
3466        
3467        <span class="line-circle" style="background-color: #FFA500;" title="ORANGE"></span>
3468    
3469        
3470        <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span>
3471    
3472        
3473        <span class="line-circle" style="background-color: #FFFF00;" title="YELLOW"></span>
3474    
3475    <strong>L&#39;ENFANT PLAZA METRO STATION</strong>
3476    
3477    <!-- Hotel icon if hotels are available -->
3478    
3479        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (4)"></i>
3480    
3481    
3482    <!-- Coffee shop icon if coffee shops are available -->
3483    
3484    
3485    <!-- Restaurant icon if restaurants are available -->
3486    
3487        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (27)"></i>
3488    
3489    
3490    <!-- Nightlife icon if bars are available -->
3491    
3492        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (5)"></i>
3493    
3494    
3495    <!-- Pharmacy icon if pharmacies are available -->
3496    
3497        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i>
3498    
3499    
3500    <!-- Supermarket icon if supermarkets are available -->
3501    
3502
3503 <!-- Museum icon if museums are available -->
3504    
3505        <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (1)"></i>
3506    
3507    
3508    <span class="toggle-icon" id="toggle-36" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
3509</div>
3510            <ul class="amenities-list" id="amenities-36">
3511                <!-- Amenities will be dynamically loaded here -->
3512                <li class="loading">Loading amenities...</li>
3513            </ul>
3514        </li>
3515    
3516        <li class="station-item">
3517          <div class="station-header" onclick="toggleAmenities('99')">
3518    <!-- Display circles for each metro line -->
3519    
3520        
3521        <span class="line-circle" style="background-color: #800080;" title="VRE"></span>
3522    
3523    <strong>L&#39;ENFANT VRE</strong>
3524    
3525    <!-- Hotel icon if hotels are available -->
3526    
3527    
3528    <!-- Coffee shop icon if coffee shops are available -->
3529    
3530        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (2)"></i>
3531    
3532    
3533    <!-- Restaurant icon if restaurants are available -->
3534    
3535    
3536    <!-- Nightlife icon if bars are available -->
3537    
3538    
3539    <!-- Pharmacy icon if pharmacies are available -->
3540    
3541    
3542    <!-- Supermarket icon if supermarkets are available -->
3543    
3544
3545 <!-- Museum icon if museums are available -->
3546    
3547        <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (2)"></i>
3548    
3549    
3550    <span class="toggle-icon" id="toggle-99" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
3551</div>
3552            <ul class="amenities-list" id="amenities-99">
3553                <!-- Amenities will be dynamically loaded here -->
3554                <li class="loading">Loading amenities...</li>
3555            </ul>
3556        </li>
3557    
3558        <li class="station-item">
3559          <div class="station-header" onclick="toggleAmenities('105')">
3560    <!-- Display circles for each metro line -->
3561    
3562        
3563        <span class="line-circle" style="background-color: #800080;" title="VRE"></span>
3564    
3565    <strong>LORTON VRE</strong>
3566    
3567    <!-- Hotel icon if hotels are available -->
3568    
3569    
3570    <!-- Coffee shop icon if coffee shops are available -->
3571    
3572        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (3)"></i>
3573    
3574    
3575    <!-- Restaurant icon if restaurants are available -->
3576    
3577        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (2)"></i>
3578    
3579    
3580    <!-- Nightlife icon if bars are available -->
3581    
3582    
3583    <!-- Pharmacy icon if pharmacies are available -->
3584    
3585    
3586    <!-- Supermarket icon if supermarkets are available -->
3587    
3588
3589 <!-- Museum icon if museums are available -->
3590    
3591    
3592    <span class="toggle-icon" id="toggle-105" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
3593</div>
3594            <ul class="amenities-list" id="amenities-105">
3595                <!-- Amenities will be dynamically loaded here -->
3596                <li class="loading">Loading amenities...</li>
3597            </ul>
3598        </li>
3599    
3600        <li class="station-item">
3601          <div class="station-header" onclick="toggleAmenities('101')">
3602    <!-- Display circles for each metro line -->
3603    
3604        
3605        <span class="line-circle" style="background-color: #800080;" title="VRE"></span>
3606    
3607    <strong>MANASSAS PARK VRE</strong>
3608    
3609    <!-- Hotel icon if hotels are available -->
3610    
3611    
3612    <!-- Coffee shop icon if coffee shops are available -->
3613    
3614        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (1)"></i>
3615    
3616    
3617    <!-- Restaurant icon if restaurants are available -->
3618    
3619        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (1)"></i>
3620    
3621    
3622    <!-- Nightlife icon if bars are available -->
3623    
3624    
3625    <!-- Pharmacy icon if pharmacies are available -->
3626    
3627    
3628    <!-- Supermarket icon if supermarkets are available -->
3629    
3630
3631 <!-- Museum icon if museums are available -->
3632    
3633    
3634    <span class="toggle-icon" id="toggle-101" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
3635</div>
3636            <ul class="amenities-list" id="amenities-101">
3637                <!-- Amenities will be dynamically loaded here -->
3638                <li class="loading">Loading amenities...</li>
3639            </ul>
3640        </li>
3641    
3642        <li class="station-item">
3643          <div class="station-header" onclick="toggleAmenities('100')">
3644    <!-- Display circles for each metro line -->
3645    
3646        
3647        <span class="line-circle" style="background-color: #800080;" title="VRE"></span>
3648    
3649    <strong>MANASSAS VRE</strong>
3650    
3651    <!-- Hotel icon if hotels are available -->
3652    
3653    
3654    <!-- Coffee shop icon if coffee shops are available -->
3655    
3656        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (6)"></i>
3657    
3658    
3659    <!-- Restaurant icon if restaurants are available -->
3660    
3661        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (20)"></i>
3662    
3663    
3664    <!-- Nightlife icon if bars are available -->
3665    
3666        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (7)"></i>
3667    
3668    
3669    <!-- Pharmacy icon if pharmacies are available -->
3670    
3671        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i>
3672    
3673    
3674    <!-- Supermarket icon if supermarkets are available -->
3675    
3676
3677 <!-- Museum icon if museums are available -->
3678    
3679    
3680    <span class="toggle-icon" id="toggle-100" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
3681</div>
3682            <ul class="amenities-list" id="amenities-100">
3683                <!-- Amenities will be dynamically loaded here -->
3684                <li class="loading">Loading amenities...</li>
3685            </ul>
3686        </li>
3687    
3688        <li class="station-item">
3689          <div class="station-header" onclick="toggleAmenities('97')">
3690    <!-- Display circles for each metro line -->
3691    
3692        
3693        <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span>
3694    
3695    <strong>MCLEAN METRO STATION</strong>
3696    
3697    <!-- Hotel icon if hotels are available -->
3698    
3699        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (3)"></i>
3700    
3701    
3702    <!-- Coffee shop icon if coffee shops are available -->
3703    
3704        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (1)"></i>
3705    
3706    
3707    <!-- Restaurant icon if restaurants are available -->
3708    
3709        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (10)"></i>
3710    
3711    
3712    <!-- Nightlife icon if bars are available -->
3713    
3714        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (2)"></i>
3715    
3716    
3717    <!-- Pharmacy icon if pharmacies are available -->
3718    
3719    
3720    <!-- Supermarket icon if supermarkets are available -->
3721    
3722        <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (2)"></i>
3723    
3724
3725 <!-- Museum icon if museums are available -->
3726    
3727    
3728    <span class="toggle-icon" id="toggle-97" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
3729</div>
3730            <ul class="amenities-list" id="amenities-97">
3731                <!-- Amenities will be dynamically loaded here -->
3732                <li class="loading">Loading amenities...</li>
3733            </ul>
3734        </li>
3735    
3736        <li class="station-item">
3737          <div class="station-header" onclick="toggleAmenities('15')">
3738    <!-- Display circles for each metro line -->
3739    
3740        
3741        <span class="line-circle" style="background-color: #0000FF;" title="BLUE"></span>
3742    
3743        
3744        <span class="line-circle" style="background-color: #FFA500;" title="ORANGE"></span>
3745    
3746        
3747        <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span>
3748    
3749    <strong>MCPHERSON SQ METRO STATION</strong>
3750    
3751    <!-- Hotel icon if hotels are available -->
3752    
3753        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (16)"></i>
3754    
3755    
3756    <!-- Coffee shop icon if coffee shops are available -->
3757    
3758        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (8)"></i>
3759    
3760    
3761    <!-- Restaurant icon if restaurants are available -->
3762    
3763        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (35)"></i>
3764    
3765    
3766    <!-- Nightlife icon if bars are available -->
3767    
3768        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (8)"></i>
3769    
3770    
3771    <!-- Pharmacy icon if pharmacies are available -->
3772    
3773        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (2)"></i>
3774    
3775    
3776    <!-- Supermarket icon if supermarkets are available -->
3777    
3778
3779 <!-- Museum icon if museums are available -->
3780    
3781    
3782    <span class="toggle-icon" id="toggle-15" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
3783</div>
3784            <ul class="amenities-list" id="amenities-15">
3785                <!-- Amenities will be dynamically loaded here -->
3786                <li class="loading">Loading amenities...</li>
3787            </ul>
3788        </li>
3789    
3790        <li class="station-item">
3791          <div class="station-header" onclick="toggleAmenities('56')">
3792    <!-- Display circles for each metro line -->
3793    
3794        
3795        <span class="line-circle" style="background-color: #FF0000;" title="RED"></span>
3796    
3797    <strong>MEDICAL CENTER METRO STATION</strong>
3798    
3799    <!-- Hotel icon if hotels are available -->
3800    
3801        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (3)"></i>
3802    
3803    
3804    <!-- Coffee shop icon if coffee shops are available -->
3805    
3806    
3807    <!-- Restaurant icon if restaurants are available -->
3808    
3809        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (2)"></i>
3810    
3811    
3812    <!-- Nightlife icon if bars are available -->
3813    
3814    
3815    <!-- Pharmacy icon if pharmacies are available -->
3816    
3817    
3818    <!-- Supermarket icon if supermarkets are available -->
3819    
3820        <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i>
3821    
3822
3823 <!-- Museum icon if museums are available -->
3824    
3825    
3826    <span class="toggle-icon" id="toggle-56" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
3827</div>
3828            <ul class="amenities-list" id="amenities-56">
3829                <!-- Amenities will be dynamically loaded here -->
3830                <li class="loading">Loading amenities...</li>
3831            </ul>
3832        </li>
3833    
3834        <li class="station-item">
3835          <div class="station-header" onclick="toggleAmenities('3')">
3836    <!-- Display circles for each metro line -->
3837    
3838        
3839        <span class="line-circle" style="background-color: #FF0000;" title="RED"></span>
3840    
3841        
3842        <span class="line-circle" style="background-color: #0000FF;" title="BLUE"></span>
3843    
3844        
3845        <span class="line-circle" style="background-color: #FFA500;" title="ORANGE"></span>
3846    
3847        
3848        <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span>
3849    
3850    <strong>METRO CENTER METRO STATION</strong>
3851    
3852    <!-- Hotel icon if hotels are available -->
3853    
3854        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (6)"></i>
3855    
3856    
3857    <!-- Coffee shop icon if coffee shops are available -->
3858    
3859        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (9)"></i>
3860    
3861    
3862    <!-- Restaurant icon if restaurants are available -->
3863    
3864        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (24)"></i>
3865    
3866    
3867    <!-- Nightlife icon if bars are available -->
3868    
3869        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (8)"></i>
3870    
3871    
3872    <!-- Pharmacy icon if pharmacies are available -->
3873    
3874        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (2)"></i>
3875    
3876    
3877    <!-- Supermarket icon if supermarkets are available -->
3878    
3879
3880 <!-- Museum icon if museums are available -->
3881    
3882        <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (1)"></i>
3883    
3884    
3885    <span class="toggle-icon" id="toggle-3" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
3886</div>
3887            <ul class="amenities-list" id="amenities-3">
3888                <!-- Amenities will be dynamically loaded here -->
3889                <li class="loading">Loading amenities...</li>
3890            </ul>
3891        </li>
3892    
3893        <li class="station-item">
3894          <div class="station-header" onclick="toggleAmenities('143')">
3895    <!-- Display circles for each metro line -->
3896    
3897        
3898        <span class="line-circle" style="background-color: #8B4513;" title="MARC"></span>
3899    
3900    <strong>METROPOLITAN GROVE MARC</strong>
3901    
3902    <!-- Hotel icon if hotels are available -->
3903    
3904    
3905    <!-- Coffee shop icon if coffee shops are available -->
3906    
3907    
3908    <!-- Restaurant icon if restaurants are available -->
3909    
3910        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (1)"></i>
3911    
3912    
3913    <!-- Nightlife icon if bars are available -->
3914    
3915        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (1)"></i>
3916    
3917    
3918    <!-- Pharmacy icon if pharmacies are available -->
3919    
3920    
3921    <!-- Supermarket icon if supermarkets are available -->
3922    
3923
3924 <!-- Museum icon if museums are available -->
3925    
3926    
3927    <span class="toggle-icon" id="toggle-143" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
3928</div>
3929            <ul class="amenities-list" id="amenities-143">
3930                <!-- Amenities will be dynamically loaded here -->
3931                <li class="loading">Loading amenities...</li>
3932            </ul>
3933        </li>
3934    
3935        <li class="station-item">
3936          <div class="station-header" onclick="toggleAmenities('30')">
3937    <!-- Display circles for each metro line -->
3938    
3939        
3940        <span class="line-circle" style="background-color: #FFA500;" title="ORANGE"></span>
3941    
3942    <strong>MINNESOTA AVE METRO STATION</strong>
3943    
3944    <!-- Hotel icon if hotels are available -->
3945    
3946    
3947    <!-- Coffee shop icon if coffee shops are available -->
3948    
3949    
3950    <!-- Restaurant icon if restaurants are available -->
3951    
3952        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (4)"></i>
3953    
3954    
3955    <!-- Nightlife icon if bars are available -->
3956    
3957        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (1)"></i>
3958    
3959    
3960    <!-- Pharmacy icon if pharmacies are available -->
3961    
3962    
3963    <!-- Supermarket icon if supermarkets are available -->
3964    
3965        <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i>
3966    
3967
3968 <!-- Museum icon if museums are available -->
3969    
3970    
3971    <span class="toggle-icon" id="toggle-30" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
3972</div>
3973            <ul class="amenities-list" id="amenities-30">
3974                <!-- Amenities will be dynamically loaded here -->
3975                <li class="loading">Loading amenities...</li>
3976            </ul>
3977        </li>
3978    
3979        <li class="station-item">
3980          <div class="station-header" onclick="toggleAmenities('144')">
3981    <!-- Display circles for each metro line -->
3982    
3983        
3984        <span class="line-circle" style="background-color: #8B4513;" title="MARC"></span>
3985    
3986    <strong>MONOCACY MARC</strong>
3987    
3988    <!-- Hotel icon if hotels are available -->
3989    
3990        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (1)"></i>
3991    
3992    
3993    <!-- Coffee shop icon if coffee shops are available -->
3994    
3995    
3996    <!-- Restaurant icon if restaurants are available -->
3997    
3998        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (5)"></i>
3999    
4000    
4001    <!-- Nightlife icon if bars are available -->
4002    
4003    
4004    <!-- Pharmacy icon if pharmacies are available -->
4005    
4006        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i>
4007    
4008    
4009    <!-- Supermarket icon if supermarkets are available -->
4010    
4011
4012 <!-- Museum icon if museums are available -->
4013    
4014    
4015    <span class="toggle-icon" id="toggle-144" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
4016</div>
4017            <ul class="amenities-list" id="amenities-144">
4018                <!-- Amenities will be dynamically loaded here -->
4019                <li class="loading">Loading amenities...</li>
4020            </ul>
4021        </li>
4022    
4023        <li class="station-item">
4024          <div class="station-header" onclick="toggleAmenities('51')">
4025    <!-- Display circles for each metro line -->
4026    
4027        
4028        <span class="line-circle" style="background-color: #0000FF;" title="BLUE"></span>
4029    
4030        
4031        <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span>
4032    
4033    <strong>MORGAN BOULEVARD METRO STATION</strong>
4034    
4035    <!-- Hotel icon if hotels are available -->
4036    
4037    
4038    <!-- Coffee shop icon if coffee shops are available -->
4039    
4040    
4041    <!-- Restaurant icon if restaurants are available -->
4042    
4043        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (1)"></i>
4044    
4045    
4046    <!-- Nightlife icon if bars are available -->
4047    
4048    
4049    <!-- Pharmacy icon if pharmacies are available -->
4050    
4051    
4052    <!-- Supermarket icon if supermarkets are available -->
4053    
4054
4055 <!-- Museum icon if museums are available -->
4056    
4057    
4058    <span class="toggle-icon" id="toggle-51" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
4059</div>
4060            <ul class="amenities-list" id="amenities-51">
4061                <!-- Amenities will be dynamically loaded here -->
4062                <li class="loading">Loading amenities...</li>
4063            </ul>
4064        </li>
4065    
4066        <li class="station-item">
4067          <div class="station-header" onclick="toggleAmenities('1')">
4068    <!-- Display circles for each metro line -->
4069    
4070        
4071        <span class="line-circle" style="background-color: #008000;" title="GREEN"></span>
4072    
4073        
4074        <span class="line-circle" style="background-color: #FFFF00;" title="YELLOW"></span>
4075    
4076    <strong>MT VERNON SQ/7TH ST-CONVENTION CENTER METRO STATION</strong>
4077    
4078    <!-- Hotel icon if hotels are available -->
4079    
4080        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (14)"></i>
4081    
4082    
4083    <!-- Coffee shop icon if coffee shops are available -->
4084    
4085        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (12)"></i>
4086    
4087    
4088    <!-- Restaurant icon if restaurants are available -->
4089    
4090        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (47)"></i>
4091    
4092    
4093    <!-- Nightlife icon if bars are available -->
4094    
4095        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (10)"></i>
4096    
4097    
4098    <!-- Pharmacy icon if pharmacies are available -->
4099    
4100        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (3)"></i>
4101    
4102    
4103    <!-- Supermarket icon if supermarkets are available -->
4104    
4105        <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i>
4106    
4107
4108 <!-- Museum icon if museums are available -->
4109    
4110        <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (2)"></i>
4111    
4112    
4113    <span class="toggle-icon" id="toggle-1" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
4114</div>
4115            <ul class="amenities-list" id="amenities-1">
4116                <!-- Amenities will be dynamically loaded here -->
4117                <li class="loading">Loading amenities...</li>
4118            </ul>
4119        </li>
4120    
4121        <li class="station-item">
4122          <div class="station-header" onclick="toggleAmenities('145')">
4123    <!-- Display circles for each metro line -->
4124    
4125        
4126        <span class="line-circle" style="background-color: #8B4513;" title="MARC"></span>
4127    
4128    <strong>MUIRKIRK MARC</strong>
4129    
4130    <!-- Hotel icon if hotels are available -->
4131    
4132        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (1)"></i>
4133    
4134    
4135    <!-- Coffee shop icon if coffee shops are available -->
4136    
4137    
4138    <!-- Restaurant icon if restaurants are available -->
4139    
4140    
4141    <!-- Nightlife icon if bars are available -->
4142    
4143    
4144    <!-- Pharmacy icon if pharmacies are available -->
4145    
4146    
4147    <!-- Supermarket icon if supermarkets are available -->
4148    
4149
4150 <!-- Museum icon if museums are available -->
4151    
4152    
4153    <span class="toggle-icon" id="toggle-145" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
4154</div>
4155            <ul class="amenities-list" id="amenities-145">
4156                <!-- Amenities will be dynamically loaded here -->
4157                <li class="loading">Loading amenities...</li>
4158            </ul>
4159        </li>
4160    
4161        <li class="station-item">
4162          <div class="station-header" onclick="toggleAmenities('9')">
4163    <!-- Display circles for each metro line -->
4164    
4165        
4166        <span class="line-circle" style="background-color: #008000;" title="GREEN"></span>
4167    
4168    <strong>NAVY YARD METRO STATION</strong>
4169    
4170    <!-- Hotel icon if hotels are available -->
4171    
4172        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (8)"></i>
4173    
4174    
4175    <!-- Coffee shop icon if coffee shops are available -->
4176    
4177        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (8)"></i>
4178    
4179    
4180    <!-- Restaurant icon if restaurants are available -->
4181    
4182        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (38)"></i>
4183    
4184    
4185    <!-- Nightlife icon if bars are available -->
4186    
4187        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (11)"></i>
4188    
4189    
4190    <!-- Pharmacy icon if pharmacies are available -->
4191    
4192        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i>
4193    
4194    
4195    <!-- Supermarket icon if supermarkets are available -->
4196    
4197        <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (2)"></i>
4198    
4199
4200 <!-- Museum icon if museums are available -->
4201    
4202        <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (1)"></i>
4203    
4204    
4205    <span class="toggle-icon" id="toggle-9" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
4206</div>
4207            <ul class="amenities-list" id="amenities-9">
4208                <!-- Amenities will be dynamically loaded here -->
4209                <li class="loading">Loading amenities...</li>
4210            </ul>
4211        </li>
4212    
4213        <li class="station-item">
4214          <div class="station-header" onclick="toggleAmenities('45')">
4215    <!-- Display circles for each metro line -->
4216    
4217        
4218        <span class="line-circle" style="background-color: #008000;" title="GREEN"></span>
4219    
4220    <strong>NAYLOR ROAD METRO STATION</strong>
4221    
4222    <!-- Hotel icon if hotels are available -->
4223    
4224    
4225    <!-- Coffee shop icon if coffee shops are available -->
4226    
4227    
4228    <!-- Restaurant icon if restaurants are available -->
4229    
4230        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (5)"></i>
4231    
4232    
4233    <!-- Nightlife icon if bars are available -->
4234    
4235    
4236    <!-- Pharmacy icon if pharmacies are available -->
4237    
4238    
4239    <!-- Supermarket icon if supermarkets are available -->
4240    
4241
4242 <!-- Museum icon if museums are available -->
4243    
4244    
4245    <span class="toggle-icon" id="toggle-45" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
4246</div>
4247            <ul class="amenities-list" id="amenities-45">
4248                <!-- Amenities will be dynamically loaded here -->
4249                <li class="loading">Loading amenities...</li>
4250            </ul>
4251        </li>
4252    
4253        <li class="station-item">
4254          <div class="station-header" onclick="toggleAmenities('146')">
4255    <!-- Display circles for each metro line -->
4256    
4257        
4258        <span class="line-circle" style="background-color: #8B4513;" title="MARC"></span>
4259    
4260    <strong>NEW CARROLLTON MARC</strong>
4261    
4262    <!-- Hotel icon if hotels are available -->
4263    
4264    
4265    <!-- Coffee shop icon if coffee shops are available -->
4266    
4267        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (2)"></i>
4268    
4269    
4270    <!-- Restaurant icon if restaurants are available -->
4271    
4272    
4273    <!-- Nightlife icon if bars are available -->
4274    
4275    
4276    <!-- Pharmacy icon if pharmacies are available -->
4277    
4278        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i>
4279    
4280    
4281    <!-- Supermarket icon if supermarkets are available -->
4282    
4283
4284 <!-- Museum icon if museums are available -->
4285    
4286    
4287    <span class="toggle-icon" id="toggle-146" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
4288</div>
4289            <ul class="amenities-list" id="amenities-146">
4290                <!-- Amenities will be dynamically loaded here -->
4291                <li class="loading">Loading amenities...</li>
4292            </ul>
4293        </li>
4294    
4295        <li class="station-item">
4296          <div class="station-header" onclick="toggleAmenities('54')">
4297    <!-- Display circles for each metro line -->
4298    
4299        
4300        <span class="line-circle" style="background-color: #FFA500;" title="ORANGE"></span>
4301    
4302    <strong>NEW CARROLLTON METRO STATION</strong>
4303    
4304    <!-- Hotel icon if hotels are available -->
4305    
4306        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (1)"></i>
4307    
4308    
4309    <!-- Coffee shop icon if coffee shops are available -->
4310    
4311    
4312    <!-- Restaurant icon if restaurants are available -->
4313    
4314        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (2)"></i>
4315    
4316    
4317    <!-- Nightlife icon if bars are available -->
4318    
4319    
4320    <!-- Pharmacy icon if pharmacies are available -->
4321    
4322    
4323    <!-- Supermarket icon if supermarkets are available -->
4324    
4325        <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i>
4326    
4327
4328 <!-- Museum icon if museums are available -->
4329    
4330    
4331    <span class="toggle-icon" id="toggle-54" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
4332</div>
4333            <ul class="amenities-list" id="amenities-54">
4334                <!-- Amenities will be dynamically loaded here -->
4335                <li class="loading">Loading amenities...</li>
4336            </ul>
4337        </li>
4338    
4339        <li class="station-item">
4340          <div class="station-header" onclick="toggleAmenities('6')">
4341    <!-- Display circles for each metro line -->
4342    
4343        
4344        <span class="line-circle" style="background-color: #FF0000;" title="RED"></span>
4345    
4346    <strong>NOMA-GALLAUDET U METRO STATION</strong>
4347    
4348    <!-- Hotel icon if hotels are available -->
4349    
4350        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (12)"></i>
4351    
4352    
4353    <!-- Coffee shop icon if coffee shops are available -->
4354    
4355        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (8)"></i>
4356    
4357    
4358    <!-- Restaurant icon if restaurants are available -->
4359    
4360        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (43)"></i>
4361    
4362    
4363    <!-- Nightlife icon if bars are available -->
4364    
4365        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (13)"></i>
4366    
4367    
4368    <!-- Pharmacy icon if pharmacies are available -->
4369    
4370        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i>
4371    
4372    
4373    <!-- Supermarket icon if supermarkets are available -->
4374    
4375        <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (2)"></i>
4376    
4377
4378 <!-- Museum icon if museums are available -->
4379    
4380    
4381    <span class="toggle-icon" id="toggle-6" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
4382</div>
4383            <ul class="amenities-list" id="amenities-6">
4384                <!-- Amenities will be dynamically loaded here -->
4385                <li class="loading">Loading amenities...</li>
4386            </ul>
4387        </li>
4388    
4389        <li class="station-item">
4390          <div class="station-header" onclick="toggleAmenities('61')">
4391    <!-- Display circles for each metro line -->
4392    
4393        
4394        <span class="line-circle" style="background-color: #FF0000;" title="RED"></span>
4395    
4396    <strong>NORTH BETHESDA METRO STATION</strong>
4397    
4398    <!-- Hotel icon if hotels are available -->
4399    
4400        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (2)"></i>
4401    
4402    
4403    <!-- Coffee shop icon if coffee shops are available -->
4404    
4405        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (4)"></i>
4406    
4407    
4408    <!-- Restaurant icon if restaurants are available -->
4409    
4410        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (45)"></i>
4411    
4412    
4413    <!-- Nightlife icon if bars are available -->
4414    
4415        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (4)"></i>
4416    
4417    
4418    <!-- Pharmacy icon if pharmacies are available -->
4419    
4420        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i>
4421    
4422    
4423    <!-- Supermarket icon if supermarkets are available -->
4424    
4425        <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (6)"></i>
4426    
4427
4428 <!-- Museum icon if museums are available -->
4429    
4430        <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (1)"></i>
4431    
4432    
4433    <span class="toggle-icon" id="toggle-61" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
4434</div>
4435            <ul class="amenities-list" id="amenities-61">
4436                <!-- Amenities will be dynamically loaded here -->
4437                <li class="loading">Loading amenities...</li>
4438            </ul>
4439        </li>
4440    
4441        <li class="station-item">
4442          <div class="station-header" onclick="toggleAmenities('147')">
4443    <!-- Display circles for each metro line -->
4444    
4445        
4446        <span class="line-circle" style="background-color: #8B4513;" title="MARC"></span>
4447    
4448    <strong>ODENTON MARC</strong>
4449    
4450    <!-- Hotel icon if hotels are available -->
4451    
4452    
4453    <!-- Coffee shop icon if coffee shops are available -->
4454    
4455        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (1)"></i>
4456    
4457    
4458    <!-- Restaurant icon if restaurants are available -->
4459    
4460        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (6)"></i>
4461    
4462    
4463    <!-- Nightlife icon if bars are available -->
4464    
4465        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (1)"></i>
4466    
4467    
4468    <!-- Pharmacy icon if pharmacies are available -->
4469    
4470        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i>
4471    
4472    
4473    <!-- Supermarket icon if supermarkets are available -->
4474    
4475
4476 <!-- Museum icon if museums are available -->
4477    
4478    
4479    <span class="toggle-icon" id="toggle-147" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
4480</div>
4481            <ul class="amenities-list" id="amenities-147">
4482                <!-- Amenities will be dynamically loaded here -->
4483                <li class="loading">Loading amenities...</li>
4484            </ul>
4485        </li>
4486    
4487        <li class="station-item">
4488          <div class="station-header" onclick="toggleAmenities('76')">
4489    <!-- Display circles for each metro line -->
4490    
4491        
4492        <span class="line-circle" style="background-color: #0000FF;" title="BLUE"></span>
4493    
4494        
4495        <span class="line-circle" style="background-color: #FFFF00;" title="YELLOW"></span>
4496    
4497    <strong>PENTAGON CITY METRO STATION</strong>
4498    
4499    <!-- Hotel icon if hotels are available -->
4500    
4501        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (2)"></i>
4502    
4503    
4504    <!-- Coffee shop icon if coffee shops are available -->
4505    
4506        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (8)"></i>
4507    
4508    
4509    <!-- Restaurant icon if restaurants are available -->
4510    
4511        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (31)"></i>
4512    
4513    
4514    <!-- Nightlife icon if bars are available -->
4515    
4516    
4517    <!-- Pharmacy icon if pharmacies are available -->
4518    
4519        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (3)"></i>
4520    
4521    
4522    <!-- Supermarket icon if supermarkets are available -->
4523    
4524        <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (3)"></i>
4525    
4526
4527 <!-- Museum icon if museums are available -->
4528    
4529        <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (2)"></i>
4530    
4531    
4532    <span class="toggle-icon" id="toggle-76" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
4533</div>
4534            <ul class="amenities-list" id="amenities-76">
4535                <!-- Amenities will be dynamically loaded here -->
4536                <li class="loading">Loading amenities...</li>
4537            </ul>
4538        </li>
4539    
4540        <li class="station-item">
4541          <div class="station-header" onclick="toggleAmenities('73')">
4542    <!-- Display circles for each metro line -->
4543    
4544        
4545        <span class="line-circle" style="background-color: #0000FF;" title="BLUE"></span>
4546    
4547        
4548        <span class="line-circle" style="background-color: #FFFF00;" title="YELLOW"></span>
4549    
4550    <strong>PENTAGON METRO STATION</strong>
4551    
4552    <!-- Hotel icon if hotels are available -->
4553    
4554    
4555    <!-- Coffee shop icon if coffee shops are available -->
4556    
4557    
4558    <!-- Restaurant icon if restaurants are available -->
4559    
4560        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (2)"></i>
4561    
4562    
4563    <!-- Nightlife icon if bars are available -->
4564    
4565    
4566    <!-- Pharmacy icon if pharmacies are available -->
4567    
4568    
4569    <!-- Supermarket icon if supermarkets are available -->
4570    
4571
4572 <!-- Museum icon if museums are available -->
4573    
4574    
4575    <span class="toggle-icon" id="toggle-73" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
4576</div>
4577            <ul class="amenities-list" id="amenities-73">
4578                <!-- Amenities will be dynamically loaded here -->
4579                <li class="loading">Loading amenities...</li>
4580            </ul>
4581        </li>
4582    
4583        <li class="station-item">
4584          <div class="station-header" onclick="toggleAmenities('11')">
4585    <!-- Display circles for each metro line -->
4586    
4587        
4588        <span class="line-circle" style="background-color: #0000FF;" title="BLUE"></span>
4589    
4590        
4591        <span class="line-circle" style="background-color: #FFA500;" title="ORANGE"></span>
4592    
4593        
4594        <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span>
4595    
4596    <strong>POTOMAC AVE METRO STATION</strong>
4597    
4598    <!-- Hotel icon if hotels are available -->
4599    
4600    
4601    <!-- Coffee shop icon if coffee shops are available -->
4602    
4603        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (2)"></i>
4604    
4605    
4606    <!-- Restaurant icon if restaurants are available -->
4607    
4608        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (13)"></i>
4609    
4610    
4611    <!-- Nightlife icon if bars are available -->
4612    
4613        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (1)"></i>
4614    
4615    
4616    <!-- Pharmacy icon if pharmacies are available -->
4617    
4618        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i>
4619    
4620    
4621    <!-- Supermarket icon if supermarkets are available -->
4622    
4623        <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i>
4624    
4625
4626 <!-- Museum icon if museums are available -->
4627    
4628    
4629    <span class="toggle-icon" id="toggle-11" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
4630</div>
4631            <ul class="amenities-list" id="amenities-11">
4632                <!-- Amenities will be dynamically loaded here -->
4633                <li class="loading">Loading amenities...</li>
4634            </ul>
4635        </li>
4636    
4637        <li class="station-item">
4638          <div class="station-header" onclick="toggleAmenities('106')">
4639    <!-- Display circles for each metro line -->
4640    
4641        
4642        <span class="line-circle" style="background-color: #800080;" title="VRE"></span>
4643    
4644    <strong>QUANTICO VRE</strong>
4645    
4646    <!-- Hotel icon if hotels are available -->
4647    
4648    
4649    <!-- Coffee shop icon if coffee shops are available -->
4650    
4651        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (2)"></i>
4652    
4653    
4654    <!-- Restaurant icon if restaurants are available -->
4655    
4656        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (7)"></i>
4657    
4658    
4659    <!-- Nightlife icon if bars are available -->
4660    
4661    
4662    <!-- Pharmacy icon if pharmacies are available -->
4663    
4664    
4665    <!-- Supermarket icon if supermarkets are available -->
4666    
4667
4668 <!-- Museum icon if museums are available -->
4669    
4670    
4671    <span class="toggle-icon" id="toggle-106" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
4672</div>
4673            <ul class="amenities-list" id="amenities-106">
4674                <!-- Amenities will be dynamically loaded here -->
4675                <li class="loading">Loading amenities...</li>
4676            </ul>
4677        </li>
4678    
4679        <li class="station-item">
4680          <div class="station-header" onclick="toggleAmenities('92')">
4681    <!-- Display circles for each metro line -->
4682    
4683        
4684        <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span>
4685    
4686    <strong>RESTON TOWN CENTER METRO STATION</strong>
4687    
4688    <!-- Hotel icon if hotels are available -->
4689    
4690        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (6)"></i>
4691    
4692    
4693    <!-- Coffee shop icon if coffee shops are available -->
4694    
4695        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (5)"></i>
4696    
4697    
4698    <!-- Restaurant icon if restaurants are available -->
4699    
4700        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (38)"></i>
4701    
4702    
4703    <!-- Nightlife icon if bars are available -->
4704    
4705        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (2)"></i>
4706    
4707    
4708    <!-- Pharmacy icon if pharmacies are available -->
4709    
4710        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i>
4711    
4712    
4713    <!-- Supermarket icon if supermarkets are available -->
4714    
4715        <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i>
4716    
4717
4718 <!-- Museum icon if museums are available -->
4719    
4720    
4721    <span class="toggle-icon" id="toggle-92" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
4722</div>
4723            <ul class="amenities-list" id="amenities-92">
4724                <!-- Amenities will be dynamically loaded here -->
4725                <li class="loading">Loading amenities...</li>
4726            </ul>
4727        </li>
4728    
4729        <li class="station-item">
4730          <div class="station-header" onclick="toggleAmenities('27')">
4731    <!-- Display circles for each metro line -->
4732    
4733        
4734        <span class="line-circle" style="background-color: #FF0000;" title="RED"></span>
4735    
4736    <strong>RHODE ISLAND AVE METRO STATION</strong>
4737    
4738    <!-- Hotel icon if hotels are available -->
4739    
4740    
4741    <!-- Coffee shop icon if coffee shops are available -->
4742    
4743        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (1)"></i>
4744    
4745    
4746    <!-- Restaurant icon if restaurants are available -->
4747    
4748        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (29)"></i>
4749    
4750    
4751    <!-- Nightlife icon if bars are available -->
4752    
4753        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (4)"></i>
4754    
4755    
4756    <!-- Pharmacy icon if pharmacies are available -->
4757    
4758        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i>
4759    
4760    
4761    <!-- Supermarket icon if supermarkets are available -->
4762    
4763        <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i>
4764    
4765
4766 <!-- Museum icon if museums are available -->
4767    
4768    
4769    <span class="toggle-icon" id="toggle-27" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
4770</div>
4771            <ul class="amenities-list" id="amenities-27">
4772                <!-- Amenities will be dynamically loaded here -->
4773                <li class="loading">Loading amenities...</li>
4774            </ul>
4775        </li>
4776    
4777        <li class="station-item">
4778          <div class="station-header" onclick="toggleAmenities('151')">
4779    <!-- Display circles for each metro line -->
4780    
4781        
4782        <span class="line-circle" style="background-color: #8B4513;" title="MARC"></span>
4783    
4784    <strong>RIVERDALE MARC</strong>
4785    
4786    <!-- Hotel icon if hotels are available -->
4787    
4788    
4789    <!-- Coffee shop icon if coffee shops are available -->
4790    
4791        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (2)"></i>
4792    
4793    
4794    <!-- Restaurant icon if restaurants are available -->
4795    
4796        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (12)"></i>
4797    
4798    
4799    <!-- Nightlife icon if bars are available -->
4800    
4801        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (1)"></i>
4802    
4803    
4804    <!-- Pharmacy icon if pharmacies are available -->
4805    
4806        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i>
4807    
4808    
4809    <!-- Supermarket icon if supermarkets are available -->
4810    
4811        <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i>
4812    
4813
4814 <!-- Museum icon if museums are available -->
4815    
4816        <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (1)"></i>
4817    
4818    
4819    <span class="toggle-icon" id="toggle-151" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
4820</div>
4821            <ul class="amenities-list" id="amenities-151">
4822                <!-- Amenities will be dynamically loaded here -->
4823                <li class="loading">Loading amenities...</li>
4824            </ul>
4825        </li>
4826    
4827        <li class="station-item">
4828          <div class="station-header" onclick="toggleAmenities('152')">
4829    <!-- Display circles for each metro line -->
4830    
4831        
4832        <span class="line-circle" style="background-color: #8B4513;" title="MARC"></span>
4833    
4834    <strong>ROCKVILLE MARC</strong>
4835    
4836    <!-- Hotel icon if hotels are available -->
4837    
4838    
4839    <!-- Coffee shop icon if coffee shops are available -->
4840    
4841        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (2)"></i>
4842    
4843    
4844    <!-- Restaurant icon if restaurants are available -->
4845    
4846    
4847    <!-- Nightlife icon if bars are available -->
4848    
4849    
4850    <!-- Pharmacy icon if pharmacies are available -->
4851    
4852    
4853    <!-- Supermarket icon if supermarkets are available -->
4854    
4855
4856 <!-- Museum icon if museums are available -->
4857    
4858    
4859    <span class="toggle-icon" id="toggle-152" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
4860</div>
4861            <ul class="amenities-list" id="amenities-152">
4862                <!-- Amenities will be dynamically loaded here -->
4863                <li class="loading">Loading amenities...</li>
4864            </ul>
4865        </li>
4866    
4867        <li class="station-item">
4868          <div class="station-header" onclick="toggleAmenities('58')">
4869    <!-- Display circles for each metro line -->
4870    
4871        
4872        <span class="line-circle" style="background-color: #FF0000;" title="RED"></span>
4873    
4874    <strong>ROCKVILLE METRO STATION</strong>
4875    
4876    <!-- Hotel icon if hotels are available -->
4877    
4878        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (1)"></i>
4879    
4880    
4881    <!-- Coffee shop icon if coffee shops are available -->
4882    
4883        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (5)"></i>
4884    
4885    
4886    <!-- Restaurant icon if restaurants are available -->
4887    
4888        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (37)"></i>
4889    
4890    
4891    <!-- Nightlife icon if bars are available -->
4892    
4893        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (3)"></i>
4894    
4895    
4896    <!-- Pharmacy icon if pharmacies are available -->
4897    
4898        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (2)"></i>
4899    
4900    
4901    <!-- Supermarket icon if supermarkets are available -->
4902    
4903
4904 <!-- Museum icon if museums are available -->
4905    
4906        <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (5)"></i>
4907    
4908    
4909    <span class="toggle-icon" id="toggle-58" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
4910</div>
4911            <ul class="amenities-list" id="amenities-58">
4912                <!-- Amenities will be dynamically loaded here -->
4913                <li class="loading">Loading amenities...</li>
4914            </ul>
4915        </li>
4916    
4917        <li class="station-item">
4918          <div class="station-header" onclick="toggleAmenities('80')">
4919    <!-- Display circles for each metro line -->
4920    
4921        
4922        <span class="line-circle" style="background-color: #0000FF;" title="BLUE"></span>
4923    
4924        
4925        <span class="line-circle" style="background-color: #FFA500;" title="ORANGE"></span>
4926    
4927        
4928        <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span>
4929    
4930    <strong>ROSSLYN METRO STATION</strong>
4931    
4932    <!-- Hotel icon if hotels are available -->
4933    
4934        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (6)"></i>
4935    
4936    
4937    <!-- Coffee shop icon if coffee shops are available -->
4938    
4939        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (5)"></i>
4940    
4941    
4942    <!-- Restaurant icon if restaurants are available -->
4943    
4944        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (35)"></i>
4945    
4946    
4947    <!-- Nightlife icon if bars are available -->
4948    
4949        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (4)"></i>
4950    
4951    
4952    <!-- Pharmacy icon if pharmacies are available -->
4953    
4954        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (2)"></i>
4955    
4956    
4957    <!-- Supermarket icon if supermarkets are available -->
4958    
4959        <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i>
4960    
4961
4962 <!-- Museum icon if museums are available -->
4963    
4964    
4965    <span class="toggle-icon" id="toggle-80" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
4966</div>
4967            <ul class="amenities-list" id="amenities-80">
4968                <!-- Amenities will be dynamically loaded here -->
4969                <li class="loading">Loading amenities...</li>
4970            </ul>
4971        </li>
4972    
4973        <li class="station-item">
4974          <div class="station-header" onclick="toggleAmenities('153')">
4975    <!-- Display circles for each metro line -->
4976    
4977        
4978        <span class="line-circle" style="background-color: #8B4513;" title="MARC"></span>
4979    
4980    <strong>SAVAGE MARC</strong>
4981    
4982    <!-- Hotel icon if hotels are available -->
4983    
4984    
4985    <!-- Coffee shop icon if coffee shops are available -->
4986    
4987        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (2)"></i>
4988    
4989    
4990    <!-- Restaurant icon if restaurants are available -->
4991    
4992        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (2)"></i>
4993    
4994    
4995    <!-- Nightlife icon if bars are available -->
4996    
4997    
4998    <!-- Pharmacy icon if pharmacies are available -->
4999    
5000    
5001    <!-- Supermarket icon if supermarkets are available -->
5002    
5003
5004 <!-- Museum icon if museums are available -->
5005    
5006    
5007    <span class="toggle-icon" id="toggle-153" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
5008</div>
5009            <ul class="amenities-list" id="amenities-153">
5010                <!-- Amenities will be dynamically loaded here -->
5011                <li class="loading">Loading amenities...</li>
5012            </ul>
5013        </li>
5014    
5015        <li class="station-item">
5016          <div class="station-header" onclick="toggleAmenities('154')">
5017    <!-- Display circles for each metro line -->
5018    
5019        
5020        <span class="line-circle" style="background-color: #8B4513;" title="MARC"></span>
5021    
5022    <strong>SEABROOK MARC</strong>
5023    
5024    <!-- Hotel icon if hotels are available -->
5025    
5026    
5027    <!-- Coffee shop icon if coffee shops are available -->
5028    
5029        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (1)"></i>
5030    
5031    
5032    <!-- Restaurant icon if restaurants are available -->
5033    
5034        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (5)"></i>
5035    
5036    
5037    <!-- Nightlife icon if bars are available -->
5038    
5039    
5040    <!-- Pharmacy icon if pharmacies are available -->
5041    
5042    
5043    <!-- Supermarket icon if supermarkets are available -->
5044    
5045
5046 <!-- Museum icon if museums are available -->
5047    
5048    
5049    <span class="toggle-icon" id="toggle-154" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
5050</div>
5051            <ul class="amenities-list" id="amenities-154">
5052                <!-- Amenities will be dynamically loaded here -->
5053                <li class="loading">Loading amenities...</li>
5054            </ul>
5055        </li>
5056    
5057        <li class="station-item">
5058          <div class="station-header" onclick="toggleAmenities('62')">
5059    <!-- Display circles for each metro line -->
5060    
5061        
5062        <span class="line-circle" style="background-color: #FF0000;" title="RED"></span>
5063    
5064    <strong>SHADY GROVE METRO STATION</strong>
5065    
5066    <!-- Hotel icon if hotels are available -->
5067    
5068    
5069    <!-- Coffee shop icon if coffee shops are available -->
5070    
5071    
5072    <!-- Restaurant icon if restaurants are available -->
5073    
5074        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (4)"></i>
5075    
5076    
5077    <!-- Nightlife icon if bars are available -->
5078    
5079    
5080    <!-- Pharmacy icon if pharmacies are available -->
5081    
5082        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i>
5083    
5084    
5085    <!-- Supermarket icon if supermarkets are available -->
5086    
5087
5088 <!-- Museum icon if museums are available -->
5089    
5090    
5091    <span class="toggle-icon" id="toggle-62" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
5092</div>
5093            <ul class="amenities-list" id="amenities-62">
5094                <!-- Amenities will be dynamically loaded here -->
5095                <li class="loading">Loading amenities...</li>
5096            </ul>
5097        </li>
5098    
5099        <li class="station-item">
5100          <div class="station-header" onclick="toggleAmenities('2')">
5101    <!-- Display circles for each metro line -->
5102    
5103        
5104        <span class="line-circle" style="background-color: #008000;" title="GREEN"></span>
5105    
5106    <strong>SHAW METRO STATION</strong>
5107    
5108    <!-- Hotel icon if hotels are available -->
5109    
5110        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (1)"></i>
5111    
5112    
5113    <!-- Coffee shop icon if coffee shops are available -->
5114    
5115        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (4)"></i>
5116    
5117    
5118    <!-- Restaurant icon if restaurants are available -->
5119    
5120        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (35)"></i>
5121    
5122    
5123    <!-- Nightlife icon if bars are available -->
5124    
5125        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (21)"></i>
5126    
5127    
5128    <!-- Pharmacy icon if pharmacies are available -->
5129    
5130        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i>
5131    
5132    
5133    <!-- Supermarket icon if supermarkets are available -->
5134    
5135        <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i>
5136    
5137
5138 <!-- Museum icon if museums are available -->
5139    
5140    
5141    <span class="toggle-icon" id="toggle-2" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
5142</div>
5143            <ul class="amenities-list" id="amenities-2">
5144                <!-- Amenities will be dynamically loaded here -->
5145                <li class="loading">Loading amenities...</li>
5146            </ul>
5147        </li>
5148    
5149        <li class="station-item">
5150          <div class="station-header" onclick="toggleAmenities('66')">
5151    <!-- Display circles for each metro line -->
5152    
5153        
5154        <span class="line-circle" style="background-color: #FF0000;" title="RED"></span>
5155    
5156    <strong>SILVER SPRING METRO STATION</strong>
5157    
5158    <!-- Hotel icon if hotels are available -->
5159    
5160        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (5)"></i>
5161    
5162    
5163    <!-- Coffee shop icon if coffee shops are available -->
5164    
5165        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (18)"></i>
5166    
5167    
5168    <!-- Restaurant icon if restaurants are available -->
5169    
5170        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (45)"></i>
5171    
5172    
5173    <!-- Nightlife icon if bars are available -->
5174    
5175        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (9)"></i>
5176    
5177    
5178    <!-- Pharmacy icon if pharmacies are available -->
5179    
5180        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (2)"></i>
5181    
5182    
5183    <!-- Supermarket icon if supermarkets are available -->
5184    
5185        <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (4)"></i>
5186    
5187
5188 <!-- Museum icon if museums are available -->
5189    
5190    
5191    <span class="toggle-icon" id="toggle-66" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
5192</div>
5193            <ul class="amenities-list" id="amenities-66">
5194                <!-- Amenities will be dynamically loaded here -->
5195                <li class="loading">Loading amenities...</li>
5196            </ul>
5197        </li>
5198    
5199        <li class="station-item">
5200          <div class="station-header" onclick="toggleAmenities('35')">
5201    <!-- Display circles for each metro line -->
5202    
5203        
5204        <span class="line-circle" style="background-color: #0000FF;" title="BLUE"></span>
5205    
5206        
5207        <span class="line-circle" style="background-color: #FFA500;" title="ORANGE"></span>
5208    
5209        
5210        <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span>
5211    
5212    <strong>SMITHSONIAN METRO STATION</strong>
5213    
5214    <!-- Hotel icon if hotels are available -->
5215    
5216        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (1)"></i>
5217    
5218    
5219    <!-- Coffee shop icon if coffee shops are available -->
5220    
5221        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (2)"></i>
5222    
5223    
5224    <!-- Restaurant icon if restaurants are available -->
5225    
5226        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (14)"></i>
5227    
5228    
5229    <!-- Nightlife icon if bars are available -->
5230    
5231    
5232    <!-- Pharmacy icon if pharmacies are available -->
5233    
5234    
5235    <!-- Supermarket icon if supermarkets are available -->
5236    
5237
5238 <!-- Museum icon if museums are available -->
5239    
5240        <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (7)"></i>
5241    
5242    
5243    <span class="toggle-icon" id="toggle-35" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
5244</div>
5245            <ul class="amenities-list" id="amenities-35">
5246                <!-- Amenities will be dynamically loaded here -->
5247                <li class="loading">Loading amenities...</li>
5248            </ul>
5249        </li>
5250    
5251        <li class="station-item">
5252          <div class="station-header" onclick="toggleAmenities('94')">
5253    <!-- Display circles for each metro line -->
5254    
5255        
5256        <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span>
5257    
5258    <strong>SPRING HILL METRO STATION</strong>
5259    
5260    <!-- Hotel icon if hotels are available -->
5261    
5262        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (4)"></i>
5263    
5264    
5265    <!-- Coffee shop icon if coffee shops are available -->
5266    
5267        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (4)"></i>
5268    
5269    
5270    <!-- Restaurant icon if restaurants are available -->
5271    
5272        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (21)"></i>
5273    
5274    
5275    <!-- Nightlife icon if bars are available -->
5276    
5277        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (2)"></i>
5278    
5279    
5280    <!-- Pharmacy icon if pharmacies are available -->
5281    
5282        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i>
5283    
5284    
5285    <!-- Supermarket icon if supermarkets are available -->
5286    
5287
5288 <!-- Museum icon if museums are available -->
5289    
5290    
5291    <span class="toggle-icon" id="toggle-94" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
5292</div>
5293            <ul class="amenities-list" id="amenities-94">
5294                <!-- Amenities will be dynamically loaded here -->
5295                <li class="loading">Loading amenities...</li>
5296            </ul>
5297        </li>
5298    
5299        <li class="station-item">
5300          <div class="station-header" onclick="toggleAmenities('12')">
5301    <!-- Display circles for each metro line -->
5302    
5303        
5304        <span class="line-circle" style="background-color: #0000FF;" title="BLUE"></span>
5305    
5306        
5307        <span class="line-circle" style="background-color: #FFA500;" title="ORANGE"></span>
5308    
5309        
5310        <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span>
5311    
5312    <strong>STADIUM ARMORY METRO STATION</strong>
5313    
5314    <!-- Hotel icon if hotels are available -->
5315    
5316    
5317    <!-- Coffee shop icon if coffee shops are available -->
5318    
5319        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (1)"></i>
5320    
5321    
5322    <!-- Restaurant icon if restaurants are available -->
5323    
5324        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (2)"></i>
5325    
5326    
5327    <!-- Nightlife icon if bars are available -->
5328    
5329        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (1)"></i>
5330    
5331    
5332    <!-- Pharmacy icon if pharmacies are available -->
5333    
5334    
5335    <!-- Supermarket icon if supermarkets are available -->
5336    
5337
5338 <!-- Museum icon if museums are available -->
5339    
5340    
5341    <span class="toggle-icon" id="toggle-12" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
5342</div>
5343            <ul class="amenities-list" id="amenities-12">
5344                <!-- Amenities will be dynamically loaded here -->
5345                <li class="loading">Loading amenities...</li>
5346            </ul>
5347        </li>
5348    
5349        <li class="station-item">
5350          <div class="station-header" onclick="toggleAmenities('44')">
5351    <!-- Display circles for each metro line -->
5352    
5353        
5354        <span class="line-circle" style="background-color: #008000;" title="GREEN"></span>
5355    
5356    <strong>SUITLAND METRO STATION</strong>
5357    
5358    <!-- Hotel icon if hotels are available -->
5359    
5360    
5361    <!-- Coffee shop icon if coffee shops are available -->
5362    
5363    
5364    <!-- Restaurant icon if restaurants are available -->
5365    
5366        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (1)"></i>
5367    
5368    
5369    <!-- Nightlife icon if bars are available -->
5370    
5371    
5372    <!-- Pharmacy icon if pharmacies are available -->
5373    
5374    
5375    <!-- Supermarket icon if supermarkets are available -->
5376    
5377
5378 <!-- Museum icon if museums are available -->
5379    
5380    
5381    <span class="toggle-icon" id="toggle-44" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
5382</div>
5383            <ul class="amenities-list" id="amenities-44">
5384                <!-- Amenities will be dynamically loaded here -->
5385                <li class="loading">Loading amenities...</li>
5386            </ul>
5387        </li>
5388    
5389        <li class="station-item">
5390          <div class="station-header" onclick="toggleAmenities('24')">
5391    <!-- Display circles for each metro line -->
5392    
5393        
5394        <span class="line-circle" style="background-color: #FF0000;" title="RED"></span>
5395    
5396    <strong>TAKOMA METRO STATION</strong>
5397    
5398    <!-- Hotel icon if hotels are available -->
5399    
5400        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (1)"></i>
5401    
5402    
5403    <!-- Coffee shop icon if coffee shops are available -->
5404    
5405        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (7)"></i>
5406    
5407    
5408    <!-- Restaurant icon if restaurants are available -->
5409    
5410        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (14)"></i>
5411    
5412    
5413    <!-- Nightlife icon if bars are available -->
5414    
5415        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (2)"></i>
5416    
5417    
5418    <!-- Pharmacy icon if pharmacies are available -->
5419    
5420        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i>
5421    
5422    
5423    <!-- Supermarket icon if supermarkets are available -->
5424    
5425
5426 <!-- Museum icon if museums are available -->
5427    
5428    
5429    <span class="toggle-icon" id="toggle-24" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
5430</div>
5431            <ul class="amenities-list" id="amenities-24">
5432                <!-- Amenities will be dynamically loaded here -->
5433                <li class="loading">Loading amenities...</li>
5434            </ul>
5435        </li>
5436    
5437        <li class="station-item">
5438          <div class="station-header" onclick="toggleAmenities('25')">
5439    <!-- Display circles for each metro line -->
5440    
5441        
5442        <span class="line-circle" style="background-color: #FF0000;" title="RED"></span>
5443    
5444    <strong>TENLEYTOWN METRO STATION</strong>
5445    
5446    <!-- Hotel icon if hotels are available -->
5447    
5448    
5449    <!-- Coffee shop icon if coffee shops are available -->
5450    
5451        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (3)"></i>
5452    
5453    
5454    <!-- Restaurant icon if restaurants are available -->
5455    
5456        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (22)"></i>
5457    
5458    
5459    <!-- Nightlife icon if bars are available -->
5460    
5461    
5462    <!-- Pharmacy icon if pharmacies are available -->
5463    
5464        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (2)"></i>
5465    
5466    
5467    <!-- Supermarket icon if supermarkets are available -->
5468    
5469        <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i>
5470    
5471
5472 <!-- Museum icon if museums are available -->
5473    
5474    
5475    <span class="toggle-icon" id="toggle-25" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
5476</div>
5477            <ul class="amenities-list" id="amenities-25">
5478                <!-- Amenities will be dynamically loaded here -->
5479                <li class="loading">Loading amenities...</li>
5480            </ul>
5481        </li>
5482    
5483        <li class="station-item">
5484          <div class="station-header" onclick="toggleAmenities('60')">
5485    <!-- Display circles for each metro line -->
5486    
5487        
5488        <span class="line-circle" style="background-color: #FF0000;" title="RED"></span>
5489    
5490    <strong>TWINBROOK METRO STATION</strong>
5491    
5492    <!-- Hotel icon if hotels are available -->
5493    
5494        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (2)"></i>
5495    
5496    
5497    <!-- Coffee shop icon if coffee shops are available -->
5498    
5499        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (6)"></i>
5500    
5501    
5502    <!-- Restaurant icon if restaurants are available -->
5503    
5504        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (33)"></i>
5505    
5506    
5507    <!-- Nightlife icon if bars are available -->
5508    
5509        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (1)"></i>
5510    
5511    
5512    <!-- Pharmacy icon if pharmacies are available -->
5513    
5514        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (2)"></i>
5515    
5516    
5517    <!-- Supermarket icon if supermarkets are available -->
5518    
5519        <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (2)"></i>
5520    
5521
5522 <!-- Museum icon if museums are available -->
5523    
5524    
5525    <span class="toggle-icon" id="toggle-60" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
5526</div>
5527            <ul class="amenities-list" id="amenities-60">
5528                <!-- Amenities will be dynamically loaded here -->
5529                <li class="loading">Loading amenities...</li>
5530            </ul>
5531        </li>
5532    
5533        <li class="station-item">
5534          <div class="station-header" onclick="toggleAmenities('96')">
5535    <!-- Display circles for each metro line -->
5536    
5537        
5538        <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span>
5539    
5540    <strong>TYSONS METRO STATION</strong>
5541    
5542    <!-- Hotel icon if hotels are available -->
5543    
5544        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (7)"></i>
5545    
5546    
5547    <!-- Coffee shop icon if coffee shops are available -->
5548    
5549        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (16)"></i>
5550    
5551    
5552    <!-- Restaurant icon if restaurants are available -->
5553    
5554        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (33)"></i>
5555    
5556    
5557    <!-- Nightlife icon if bars are available -->
5558    
5559        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (2)"></i>
5560    
5561    
5562    <!-- Pharmacy icon if pharmacies are available -->
5563    
5564        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i>
5565    
5566    
5567    <!-- Supermarket icon if supermarkets are available -->
5568    
5569
5570 <!-- Museum icon if museums are available -->
5571    
5572    
5573    <span class="toggle-icon" id="toggle-96" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
5574</div>
5575            <ul class="amenities-list" id="amenities-96">
5576                <!-- Amenities will be dynamically loaded here -->
5577                <li class="loading">Loading amenities...</li>
5578            </ul>
5579        </li>
5580    
5581        <li class="station-item">
5582          <div class="station-header" onclick="toggleAmenities('20')">
5583    <!-- Display circles for each metro line -->
5584    
5585        
5586        <span class="line-circle" style="background-color: #008000;" title="GREEN"></span>
5587    
5588    <strong>U STREET METRO STATION</strong>
5589    
5590    <!-- Hotel icon if hotels are available -->
5591    
5592        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (1)"></i>
5593    
5594    
5595    <!-- Coffee shop icon if coffee shops are available -->
5596    
5597        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (5)"></i>
5598    
5599    
5600    <!-- Restaurant icon if restaurants are available -->
5601    
5602        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (38)"></i>
5603    
5604    
5605    <!-- Nightlife icon if bars are available -->
5606    
5607        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (31)"></i>
5608    
5609    
5610    <!-- Pharmacy icon if pharmacies are available -->
5611    
5612        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (3)"></i>
5613    
5614    
5615    <!-- Supermarket icon if supermarkets are available -->
5616    
5617        <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (2)"></i>
5618    
5619
5620 <!-- Museum icon if museums are available -->
5621    
5622        <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (1)"></i>
5623    
5624    
5625    <span class="toggle-icon" id="toggle-20" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
5626</div>
5627            <ul class="amenities-list" id="amenities-20">
5628                <!-- Amenities will be dynamically loaded here -->
5629                <li class="loading">Loading amenities...</li>
5630            </ul>
5631        </li>
5632    
5633        <li class="station-item">
5634          <div class="station-header" onclick="toggleAmenities('157')">
5635    <!-- Display circles for each metro line -->
5636    
5637        
5638        <span class="line-circle" style="background-color: #8B4513;" title="MARC"></span>
5639    
5640    <strong>UNION STATION MARC</strong>
5641    
5642    <!-- Hotel icon if hotels are available -->
5643    
5644    
5645    <!-- Coffee shop icon if coffee shops are available -->
5646    
5647    
5648    <!-- Restaurant icon if restaurants are available -->
5649    
5650    
5651    <!-- Nightlife icon if bars are available -->
5652    
5653    
5654    <!-- Pharmacy icon if pharmacies are available -->
5655    
5656    
5657    <!-- Supermarket icon if supermarkets are available -->
5658    
5659        <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i>
5660    
5661
5662 <!-- Museum icon if museums are available -->
5663    
5664        <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (1)"></i>
5665    
5666    
5667    <span class="toggle-icon" id="toggle-157" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
5668</div>
5669            <ul class="amenities-list" id="amenities-157">
5670                <!-- Amenities will be dynamically loaded here -->
5671                <li class="loading">Loading amenities...</li>
5672            </ul>
5673        </li>
5674    
5675        <li class="station-item">
5676          <div class="station-header" onclick="toggleAmenities('7')">
5677    <!-- Display circles for each metro line -->
5678    
5679        
5680        <span class="line-circle" style="background-color: #FF0000;" title="RED"></span>
5681    
5682    <strong>UNION STATION METRO STATION</strong>
5683    
5684    <!-- Hotel icon if hotels are available -->
5685    
5686        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (6)"></i>
5687    
5688    
5689    <!-- Coffee shop icon if coffee shops are available -->
5690    
5691        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (6)"></i>
5692    
5693    
5694    <!-- Restaurant icon if restaurants are available -->
5695    
5696        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (29)"></i>
5697    
5698    
5699    <!-- Nightlife icon if bars are available -->
5700    
5701        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (5)"></i>
5702    
5703    
5704    <!-- Pharmacy icon if pharmacies are available -->
5705    
5706    
5707    <!-- Supermarket icon if supermarkets are available -->
5708    
5709
5710 <!-- Museum icon if museums are available -->
5711    
5712    
5713    <span class="toggle-icon" id="toggle-7" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
5714</div>
5715            <ul class="amenities-list" id="amenities-7">
5716                <!-- Amenities will be dynamically loaded here -->
5717                <li class="loading">Loading amenities...</li>
5718            </ul>
5719        </li>
5720    
5721        <li class="station-item">
5722          <div class="station-header" onclick="toggleAmenities('98')">
5723    <!-- Display circles for each metro line -->
5724    
5725        
5726        <span class="line-circle" style="background-color: #800080;" title="VRE"></span>
5727    
5728    <strong>UNION STATION VRE</strong>
5729    
5730    <!-- Hotel icon if hotels are available -->
5731    
5732    
5733    <!-- Coffee shop icon if coffee shops are available -->
5734    
5735        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (2)"></i>
5736    
5737    
5738    <!-- Restaurant icon if restaurants are available -->
5739    
5740    
5741    <!-- Nightlife icon if bars are available -->
5742    
5743    
5744    <!-- Pharmacy icon if pharmacies are available -->
5745    
5746        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i>
5747    
5748    
5749    <!-- Supermarket icon if supermarkets are available -->
5750    
5751        <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i>
5752    
5753
5754 <!-- Museum icon if museums are available -->
5755    
5756        <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (1)"></i>
5757    
5758    
5759    <span class="toggle-icon" id="toggle-98" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
5760</div>
5761            <ul class="amenities-list" id="amenities-98">
5762                <!-- Amenities will be dynamically loaded here -->
5763                <li class="loading">Loading amenities...</li>
5764            </ul>
5765        </li>
5766    
5767        <li class="station-item">
5768          <div class="station-header" onclick="toggleAmenities('83')">
5769    <!-- Display circles for each metro line -->
5770    
5771        
5772        <span class="line-circle" style="background-color: #0000FF;" title="BLUE"></span>
5773    
5774    <strong>VAN DORN METRO STATION</strong>
5775    
5776    <!-- Hotel icon if hotels are available -->
5777    
5778    
5779    <!-- Coffee shop icon if coffee shops are available -->
5780    
5781        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (2)"></i>
5782    
5783    
5784    <!-- Restaurant icon if restaurants are available -->
5785    
5786        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (14)"></i>
5787    
5788    
5789    <!-- Nightlife icon if bars are available -->
5790    
5791    
5792    <!-- Pharmacy icon if pharmacies are available -->
5793    
5794    
5795    <!-- Supermarket icon if supermarkets are available -->
5796    
5797
5798 <!-- Museum icon if museums are available -->
5799    
5800    
5801    <span class="toggle-icon" id="toggle-83" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
5802</div>
5803            <ul class="amenities-list" id="amenities-83">
5804                <!-- Amenities will be dynamically loaded here -->
5805                <li class="loading">Loading amenities...</li>
5806            </ul>
5807        </li>
5808    
5809        <li class="station-item">
5810          <div class="station-header" onclick="toggleAmenities('18')">
5811    <!-- Display circles for each metro line -->
5812    
5813        
5814        <span class="line-circle" style="background-color: #FF0000;" title="RED"></span>
5815    
5816    <strong>VAN NESS-UDC METRO STATION</strong>
5817    
5818    <!-- Hotel icon if hotels are available -->
5819    
5820        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (1)"></i>
5821    
5822    
5823    <!-- Coffee shop icon if coffee shops are available -->
5824    
5825        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (1)"></i>
5826    
5827    
5828    <!-- Restaurant icon if restaurants are available -->
5829    
5830        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (10)"></i>
5831    
5832    
5833    <!-- Nightlife icon if bars are available -->
5834    
5835    
5836    <!-- Pharmacy icon if pharmacies are available -->
5837    
5838        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i>
5839    
5840    
5841    <!-- Supermarket icon if supermarkets are available -->
5842    
5843        <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i>
5844    
5845
5846 <!-- Museum icon if museums are available -->
5847    
5848        <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (1)"></i>
5849    
5850    
5851    <span class="toggle-icon" id="toggle-18" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
5852</div>
5853            <ul class="amenities-list" id="amenities-18">
5854                <!-- Amenities will be dynamically loaded here -->
5855                <li class="loading">Loading amenities...</li>
5856            </ul>
5857        </li>
5858    
5859        <li class="station-item">
5860          <div class="station-header" onclick="toggleAmenities('78')">
5861    <!-- Display circles for each metro line -->
5862    
5863        
5864        <span class="line-circle" style="background-color: #FFA500;" title="ORANGE"></span>
5865    
5866        
5867        <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span>
5868    
5869    <strong>VIRGINIA SQUARE METRO STATION</strong>
5870    
5871    <!-- Hotel icon if hotels are available -->
5872    
5873        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (1)"></i>
5874    
5875    
5876    <!-- Coffee shop icon if coffee shops are available -->
5877    
5878        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (3)"></i>
5879    
5880    
5881    <!-- Restaurant icon if restaurants are available -->
5882    
5883        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (22)"></i>
5884    
5885    
5886    <!-- Nightlife icon if bars are available -->
5887    
5888        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (1)"></i>
5889    
5890    
5891    <!-- Pharmacy icon if pharmacies are available -->
5892    
5893        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i>
5894    
5895    
5896    <!-- Supermarket icon if supermarkets are available -->
5897    
5898        <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i>
5899    
5900
5901 <!-- Museum icon if museums are available -->
5902    
5903        <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (1)"></i>
5904    
5905    
5906    <span class="toggle-icon" id="toggle-78" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
5907</div>
5908            <ul class="amenities-list" id="amenities-78">
5909                <!-- Amenities will be dynamically loaded here -->
5910                <li class="loading">Loading amenities...</li>
5911            </ul>
5912        </li>
5913    
5914        <li class="station-item">
5915          <div class="station-header" onclick="toggleAmenities('89')">
5916    <!-- Display circles for each metro line -->
5917    
5918        
5919        <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span>
5920    
5921    <strong>WASHINGTON DULLES INTERNATIONAL AIRPORT METRO STATION</strong>
5922    
5923    <!-- Hotel icon if hotels are available -->
5924    
5925        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (1)"></i>
5926    
5927    
5928    <!-- Coffee shop icon if coffee shops are available -->
5929    
5930    
5931    <!-- Restaurant icon if restaurants are available -->
5932    
5933    
5934    <!-- Nightlife icon if bars are available -->
5935    
5936    
5937    <!-- Pharmacy icon if pharmacies are available -->
5938    
5939    
5940    <!-- Supermarket icon if supermarkets are available -->
5941    
5942
5943 <!-- Museum icon if museums are available -->
5944    
5945    
5946    <span class="toggle-icon" id="toggle-89" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
5947</div>
5948            <ul class="amenities-list" id="amenities-89">
5949                <!-- Amenities will be dynamically loaded here -->
5950                <li class="loading">Loading amenities...</li>
5951            </ul>
5952        </li>
5953    
5954        <li class="station-item">
5955          <div class="station-header" onclick="toggleAmenities('33')">
5956    <!-- Display circles for each metro line -->
5957    
5958        
5959        <span class="line-circle" style="background-color: #008000;" title="GREEN"></span>
5960    
5961    <strong>WATERFRONT METRO STATION</strong>
5962    
5963    <!-- Hotel icon if hotels are available -->
5964    
5965        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (3)"></i>
5966    
5967    
5968    <!-- Coffee shop icon if coffee shops are available -->
5969    
5970        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (6)"></i>
5971    
5972    
5973    <!-- Restaurant icon if restaurants are available -->
5974    
5975        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (26)"></i>
5976    
5977    
5978    <!-- Nightlife icon if bars are available -->
5979    
5980        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (6)"></i>
5981    
5982    
5983    <!-- Pharmacy icon if pharmacies are available -->
5984    
5985        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i>
5986    
5987    
5988    <!-- Supermarket icon if supermarkets are available -->
5989    
5990        <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i>
5991    
5992
5993 <!-- Museum icon if museums are available -->
5994    
5995    
5996    <span class="toggle-icon" id="toggle-33" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
5997</div>
5998            <ul class="amenities-list" id="amenities-33">
5999                <!-- Amenities will be dynamically loaded here -->
6000                <li class="loading">Loading amenities...</li>
6001            </ul>
6002        </li>
6003    
6004        <li class="station-item">
6005          <div class="station-header" onclick="toggleAmenities('69')">
6006    <!-- Display circles for each metro line -->
6007    
6008        
6009        <span class="line-circle" style="background-color: #FFA500;" title="ORANGE"></span>
6010    
6011    <strong>WEST FALLS CHURCH METRO STATION</strong>
6012    
6013    <!-- Hotel icon if hotels are available -->
6014    
6015        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (1)"></i>
6016    
6017    
6018    <!-- Coffee shop icon if coffee shops are available -->
6019    
6020    
6021    <!-- Restaurant icon if restaurants are available -->
6022    
6023        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (10)"></i>
6024    
6025    
6026    <!-- Nightlife icon if bars are available -->
6027    
6028    
6029    <!-- Pharmacy icon if pharmacies are available -->
6030    
6031        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i>
6032    
6033    
6034    <!-- Supermarket icon if supermarkets are available -->
6035    
6036        <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i>
6037    
6038
6039 <!-- Museum icon if museums are available -->
6040    
6041    
6042    <span class="toggle-icon" id="toggle-69" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
6043</div>
6044            <ul class="amenities-list" id="amenities-69">
6045                <!-- Amenities will be dynamically loaded here -->
6046                <li class="loading">Loading amenities...</li>
6047            </ul>
6048        </li>
6049    
6050        <li class="station-item">
6051          <div class="station-header" onclick="toggleAmenities('49')">
6052    <!-- Display circles for each metro line -->
6053    
6054        
6055        <span class="line-circle" style="background-color: #008000;" title="GREEN"></span>
6056    
6057    <strong>WEST HYATTSVILLE METRO STATION</strong>
6058    
6059    <!-- Hotel icon if hotels are available -->
6060    
6061    
6062    <!-- Coffee shop icon if coffee shops are available -->
6063    
6064        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (1)"></i>
6065    
6066    
6067    <!-- Restaurant icon if restaurants are available -->
6068    
6069        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (9)"></i>
6070    
6071    
6072    <!-- Nightlife icon if bars are available -->
6073    
6074    
6075    <!-- Pharmacy icon if pharmacies are available -->
6076    
6077        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i>
6078    
6079    
6080    <!-- Supermarket icon if supermarkets are available -->
6081    
6082        <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i>
6083    
6084
6085 <!-- Museum icon if museums are available -->
6086    
6087    
6088    <span class="toggle-icon" id="toggle-49" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
6089</div>
6090            <ul class="amenities-list" id="amenities-49">
6091                <!-- Amenities will be dynamically loaded here -->
6092                <li class="loading">Loading amenities...</li>
6093            </ul>
6094        </li>
6095    
6096        <li class="station-item">
6097          <div class="station-header" onclick="toggleAmenities('63')">
6098    <!-- Display circles for each metro line -->
6099    
6100        
6101        <span class="line-circle" style="background-color: #FF0000;" title="RED"></span>
6102    
6103    <strong>WHEATON METRO STATION</strong>
6104    
6105    <!-- Hotel icon if hotels are available -->
6106    
6107    
6108    <!-- Coffee shop icon if coffee shops are available -->
6109    
6110        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (5)"></i>
6111    
6112    
6113    <!-- Restaurant icon if restaurants are available -->
6114    
6115        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (40)"></i>
6116    
6117    
6118    <!-- Nightlife icon if bars are available -->
6119    
6120        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (3)"></i>
6121    
6122    
6123    <!-- Pharmacy icon if pharmacies are available -->
6124    
6125        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (2)"></i>
6126    
6127    
6128    <!-- Supermarket icon if supermarkets are available -->
6129    
6130        <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (2)"></i>
6131    
6132
6133 <!-- Museum icon if museums are available -->
6134    
6135    
6136    <span class="toggle-icon" id="toggle-63" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
6137</div>
6138            <ul class="amenities-list" id="amenities-63">
6139                <!-- Amenities will be dynamically loaded here -->
6140                <li class="loading">Loading amenities...</li>
6141            </ul>
6142        </li>
6143    
6144        <li class="station-item">
6145          <div class="station-header" onclick="toggleAmenities('93')">
6146    <!-- Display circles for each metro line -->
6147    
6148        
6149        <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span>
6150    
6151    <strong>WIEHLE-RESTON EAST METRO STATION</strong>
6152    
6153    <!-- Hotel icon if hotels are available -->
6154    
6155    
6156    <!-- Coffee shop icon if coffee shops are available -->
6157    
6158        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (2)"></i>
6159    
6160    
6161    <!-- Restaurant icon if restaurants are available -->
6162    
6163        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (9)"></i>
6164    
6165    
6166    <!-- Nightlife icon if bars are available -->
6167    
6168    
6169    <!-- Pharmacy icon if pharmacies are available -->
6170    
6171        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i>
6172    
6173    
6174    <!-- Supermarket icon if supermarkets are available -->
6175    
6176
6177 <!-- Museum icon if museums are available -->
6178    
6179    
6180    <span class="toggle-icon" id="toggle-93" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
6181</div>
6182            <ul class="amenities-list" id="amenities-93">
6183                <!-- Amenities will be dynamically loaded here -->
6184                <li class="loading">Loading amenities...</li>
6185            </ul>
6186        </li>
6187    
6188        <li class="station-item">
6189          <div class="station-header" onclick="toggleAmenities('110')">
6190    <!-- Display circles for each metro line -->
6191    
6192        
6193        <span class="line-circle" style="background-color: #800080;" title="VRE"></span>
6194    
6195    <strong>WOODBRIDGE VRE</strong>
6196    
6197    <!-- Hotel icon if hotels are available -->
6198    
6199    
6200    <!-- Coffee shop icon if coffee shops are available -->
6201    
6202        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (1)"></i>
6203    
6204    
6205    <!-- Restaurant icon if restaurants are available -->
6206    
6207        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (17)"></i>
6208    
6209    
6210    <!-- Nightlife icon if bars are available -->
6211    
6212        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (1)"></i>
6213    
6214    
6215    <!-- Pharmacy icon if pharmacies are available -->
6216    
6217        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i>
6218    
6219    
6220    <!-- Supermarket icon if supermarkets are available -->
6221    
6222        <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (2)"></i>
6223    
6224
6225 <!-- Museum icon if museums are available -->
6226    
6227    
6228    <span class="toggle-icon" id="toggle-110" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
6229</div>
6230            <ul class="amenities-list" id="amenities-110">
6231                <!-- Amenities will be dynamically loaded here -->
6232                <li class="loading">Loading amenities...</li>
6233            </ul>
6234        </li>
6235    
6236        <li class="station-item">
6237          <div class="station-header" onclick="toggleAmenities('19')">
6238    <!-- Display circles for each metro line -->
6239    
6240        
6241        <span class="line-circle" style="background-color: #FF0000;" title="RED"></span>
6242    
6243    <strong>WOODLEY PARK-ZOO METRO STATION</strong>
6244    
6245    <!-- Hotel icon if hotels are available -->
6246    
6247        <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (2)"></i>
6248    
6249    
6250    <!-- Coffee shop icon if coffee shops are available -->
6251    
6252        <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (4)"></i>
6253    
6254    
6255    <!-- Restaurant icon if restaurants are available -->
6256    
6257        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (26)"></i>
6258    
6259    
6260    <!-- Nightlife icon if bars are available -->
6261    
6262        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (2)"></i>
6263    
6264    
6265    <!-- Pharmacy icon if pharmacies are available -->
6266    
6267        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i>
6268    
6269    
6270    <!-- Supermarket icon if supermarkets are available -->
6271    
6272
6273 <!-- Museum icon if museums are available -->
6274    
6275        <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (2)"></i>
6276    
6277    
6278    <span class="toggle-icon" id="toggle-19" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
6279</div>
6280            <ul class="amenities-list" id="amenities-19">
6281                <!-- Amenities will be dynamically loaded here -->
6282                <li class="loading">Loading amenities...</li>
6283            </ul>
6284        </li>
6285    
6286        <li class="station-item">
6287          <div class="station-header" onclick="toggleAmenities('160')">
6288    <!-- Display circles for each metro line -->
6289    
6290        
6291        <span class="line-circle" style="background-color: #FFFF00;" title="YELLOW"></span>
6292    
6293        
6294        <span class="line-circle" style="background-color: #0000FF;" title="BLUE"></span>
6295    
6296    <strong>POTOMAC YARD METRO STATION</strong>
6297    
6298    <!-- Hotel icon if hotels are available -->
6299    
6300    
6301    <!-- Coffee shop icon if coffee shops are available -->
6302    
6303    
6304    <!-- Restaurant icon if restaurants are available -->
6305    
6306        <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (2)"></i>
6307    
6308    
6309    <!-- Nightlife icon if bars are available -->
6310    
6311        <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (1)"></i>
6312    
6313    
6314    <!-- Pharmacy icon if pharmacies are available -->
6315    
6316        <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i>
6317    
6318    
6319    <!-- Supermarket icon if supermarkets are available -->
6320    
6321        <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (2)"></i>
6322    
6323
6324 <!-- Museum icon if museums are available -->
6325    
6326    
6327    <span class="toggle-icon" id="toggle-160" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span>
6328</div>
6329            <ul class="amenities-list" id="amenities-160">
6330                <!-- Amenities will be dynamically loaded here -->
6331                <li class="loading">Loading amenities...</li>
6332            </ul>
6333        </li>
6334    
6335</ul>
6336
6337  <!-- Compact Footer HTML Structure with Flask Paths -->
6338<footer class="about-footer">
6339    <div class="footer-content">
6340        <!-- All buttons in one row -->
6341        <div class="footer-buttons">
6342            <a href="https://apps.apple.com/us/app/metromatch/id6738965637" 
6343               class="footer-button" 
6344               aria-label="Download MetroMatch on the App Store"
6345               target="_blank" 
6346               rel="noopener noreferrer">
6347                <img src="/static/images/App.svg" alt="Download on the App Store">
6348            </a>
6349            <a href="https://play.google.com/store/apps/details?id=com.transitdiscoveries.dmvtour&hl=en_US" 
6350               class="footer-button" 
6351               aria-label="Get MetroMatch on Google Play"
6352               target="_blank" 
6353               rel="noopener noreferrer">
6354                <img src="/static/images/Google.png" alt="Get it on Google Play">
6355            </a>
6356            <a href="https://www.expedia.com/" 
6357               class="footer-button" 
6358               aria-label="Book with Expedia"
6359               target="_blank" 
6360               rel="noopener noreferrer">
6361                <img src="/static/images/expedia-icon.png" alt="Expedia">
6362            </a>
6363            <a href="https://www.booking.com/" 
6364               class="footer-button" 
6365               aria-label="Book with Booking.com"
6366               target="_blank" 
6367               rel="noopener noreferrer">
6368                <img src="/static/images/booking-icon.png" alt="Booking.com">
6369            </a>
6370            <a href="https://www.tripadvisor.com/" 
6371               class="footer-button" 
6372               aria-label="Explore on TripAdvisor"
6373               target="_blank" 
6374               rel="noopener noreferrer">
6375                <img src="/static/images/trip-icon.png" alt="TripAdvisor">
6376            </a>
6377            <a href="https://dcbyfoot.com/" 
6378               class="footer-button" 
6379               aria-label="DC by Foot Walking Tours"
6380               target="_blank" 
6381               rel="noopener noreferrer">
6382                <img src="/static/images/dcbyfoot.png" alt="DC by Foot">
6383            </a>
6384        </div>
6385        
6386        <!-- Copyright on next row -->
6387        <div class="footer-info">
6388            <p>&copy; 2025 Schneider Analytics LLC. All rights reserved.</p>
6389        </div>
6390    </div>
6391</footer>
6392
6393    <!-- JavaScript to Handle Search, Fetching Amenities, and Filtering Transit Routes -->
6394    
6394<script>
6395        // Debounce function to limit the rate of function execution
6396        function debounce(func, delay) {
6397            let debounceTimer;
6398            return function() {
6399                const context = this;
6400                const args = arguments;
6401                clearTimeout(debounceTimer);
6402                debounceTimer = setTimeout(() => func.apply(context, args), delay);
6403            }
6404        }
6405
6406        /**
6407         * Retrieves search parameters from localStorage.
6408         * @returns {Object} - An object containing stationQuery and lineQuery.
6409         */
6410        function getSearchParams() {
6411            const stationQuery = localStorage.getItem('stationQuery') || '';
6412            const lineQuery = localStorage.getItem('lineQuery') || '';
6413            console.log('Search Parameters:', { stationQuery, lineQuery }); // Debugging log
6414            return { stationQuery, lineQuery: lineQuery.toUpperCase() }; // Convert lineQuery to uppercase
6415        }
6416
6417        /**
6418         * Stores search parameters in localStorage.
6419         * @param {string} stationQuery - The station name query.
6420         * @param {string} lineQuery - The transit line query.
6421         */
6422        function setSearchParams(stationQuery, lineQuery) {
6423            console.log('Setting Search Params:', { stationQuery, lineQuery }); // Debugging log
6424            localStorage.setItem('stationQuery', stationQuery);
6425            localStorage.setItem('lineQuery', lineQuery);
6426        }
6427
6428        /**
6429         * Clears search parameters from localStorage.
6430         */
6431        function clearSearchParams() {
6432            console.log('Clearing search parameters.'); // Debugging log
6433            localStorage.removeItem('stationQuery');
6434            localStorage.removeItem('lineQuery');
6435        }
6436
6437        /**
6438         * Initializes search inputs based on localStorage values.
6439         */
6440        function initializeSearchInputs() {
6441            const { stationQuery, lineQuery } = getSearchParams();
6442            document.getElementById('station-search').value = stationQuery;
6443            document.getElementById('line-search').value = lineQuery.toLowerCase(); // Display line query in lowercase in UI
6444        }
6445
6446        /**
6447         * Handles changes in search inputs.
6448         */
6449        function handleSearchChange() {
6450            const stationQuery = document.getElementById('station-search').value.trim();
6451            const lineQuery = document.getElementById('line-search').value;
6452
6453            console.log('Search changed. Station Query:', stationQuery, 'Line Query:', lineQuery); // Debugging log
6454
6455            setSearchParams(stationQuery, lineQuery);
6456
6457            // Dispatch a custom event to notify other scripts/pages
6458            window.dispatchEvent(new Event('searchUpdated'));
6459        }
6460
6461        /**
6462         * Handles the clear search button click.
6463         */
6464        function handleClearSearch() {
6465            console.log('Clear search clicked.'); // Debugging log
6466            document.getElementById('station-search').value = '';
6467            document.getElementById('line-search').value = '';
6468            clearSearchParams();
6469
6470            // Dispatch a custom event to notify other scripts/pages
6471            window.dispatchEvent(new Event('searchUpdated'));
6472        }
6473
6474        // Event Listeners for Search Inputs
6475        document.getElementById('station-search').addEventListener('input', debounce(handleSearchChange, 300));
6476        document.getElementById('line-search').addEventListener('change', handleSearchChange);
6477        document.getElementById('clear-search').addEventListener('click', handleClearSearch);
6478
6479        // Listen for storage events to synchronize search across pages
6480        window.addEventListener('storage', (event) => {
6481            if (event.key === 'stationQuery' || event.key === 'lineQuery') {
6482                initializeSearchInputs();
6483                console.log('Storage event triggered.'); // Debugging log
6484                // Dispatch a custom event to notify other scripts/pages
6485                window.dispatchEvent(new Event('searchUpdated'));
6486            }
6487        });
6488
6489        // Initialize search inputs on page load
6490        window.addEventListener('load', () => {
6491            initializeSearchInputs();
6492            filterStations();
6493        });
6494
6495        /**
6496         * Filters the station list based on search parameters.
6497         */
6498        function filterStations() {
6499            const { stationQuery, lineQuery } = getSearchParams();
6500
6501            console.log('Filtering stations. Line Query:', lineQuery); // Debugging log
6502
6503            const stationItems = document.querySelectorAll('.station-item');
6504
6505            stationItems.forEach(item => {
6506                const stationHeader = item.querySelector('.station-header');
6507                const stationName = stationHeader.querySelector('strong').innerText.toLowerCase();
6508                const stationLines = Array.from(stationHeader.querySelectorAll('.line-circle')).map(span => span.title.toUpperCase());
6509
6510                const matchesStation = stationName.includes(stationQuery.toLowerCase());
6511                const matchesLine = lineQuery === '' || stationLines.includes(lineQuery);
6512
6513                console.log('Checking station:', stationName, 'Matches:', matchesStation, matchesLine); // Debugging log
6514
6515                if (matchesStation && matchesLine) {
6516                    item.style.display = 'block';
6517                    item.classList.add('match');
6518                } else {
6519                    item.style.display = 'none';
6520                    item.classList.remove('match');
6521                }
6522            });
6523
6524            // If amenities are open for hidden stations, hide them
6525            stationItems.forEach(item => {
6526                if (item.style.display === 'none') {
6527                    const amenitiesList = item.querySelector('.amenities-list');
6528                    if (amenitiesList) {
6529                        amenitiesList.style.display = 'none';
6530                    }
6531                }
6532            });
6533        }
6534
6535        // Listen for custom 'searchUpdated' event to filter stations
6536        window.addEventListener('searchUpdated', () => {
6537            console.log('searchUpdated event triggered.'); // Debugging log
6538            filterStations();
6539        });
6540
6541        /**
6542         * Toggles the display of a category within a station's amenities.
6543         * @param {string} stationId - The unique ID of the station.
6544         * @param {string} category - The category to toggle.
6545         */
6546        function toggleCategory(stationId, category) {
6547            const categoryContent = document.getElementById(`${category}-content-${stationId}`);
6548            const categoryHeader = document.getElementById(`${category}-header-${stationId}`);
6549            
6550            if (categoryContent && categoryHeader) {
6551                const isVisible = categoryContent.style.display === 'block';
6552                categoryContent.style.display = isVisible ? 'none' : 'block';
6553                
6554                // Toggle the expanded class for icon rotation
6555                if (isVisible) {
6556                    categoryHeader.classList.remove('expanded');
6557                } else {
6558                    categoryHeader.classList.add('expanded');
6559                }
6560            }
6561        }
6562
6563        /**
6564         * Sorts an array of amenities alphabetically by name.
6565         * @param {Array} amenities - Array of amenity objects.
6566         * @param {string} nameField - The field name to sort by.
6567         * @returns {Array} - Sorted array.
6568         */
6569        function sortAmenities(amenities, nameField) {
6570            return amenities.sort((a, b) => {
6571                const nameA = a[nameField] ? a[nameField].toLowerCase() : '';
6572                const nameB = b[nameField] ? b[nameField].toLowerCase() : '';
6573                return nameA.localeCompare(nameB);
6574            });
6575        }
6576
6577        /**
6578         * Creates HTML for a category section.
6579         * @param {string} stationId - The unique ID of the station.
6580         * @param {string} categoryId - The category identifier.
6581         * @param {string} categoryName - The display name of the category.
6582         * @param {string} icon - FontAwesome icon class.
6583         * @param {Array} items - Array of items for this category.
6584         * @param {Function} itemRenderer - Function to render individual items.
6585         * @returns {string} - HTML string for the category.
6586         */
6587        function createCategoryHTML(stationId, categoryId, categoryName, icon, items, itemRenderer) {
6588            if (items.length === 0) {
6589                return ''; // Don't show empty categories
6590            }
6591
6592            const categoryHeaderId = `${categoryId}-header-${stationId}`;
6593            const categoryContentId = `${categoryId}-content-${stationId}`;
6594            
6595            let html = `
6596                <li>
6597                    <div class="category-header" id="${categoryHeaderId}" onclick="toggleCategory('${stationId}', '${categoryId}')">
6598                        <span>
6599                            <i class="${icon}" style="color: black; margin-right: 8px;"></i>
6600                            ${categoryName}
6601                            <span class="category-count">${items.length}</span>
6602                        </span>
6603                        <span class="toggle-icon">▶</span>
6604                    </div>
6605                    <div class="category-content" id="${categoryContentId}">
6606                        <ul>
6607            `;
6608            
6609            items.forEach(item => {
6610                html += itemRenderer(item);
6611            });
6612            
6613            html += `
6614                        </ul>
6615                    </div>
6616                </li>
6617            `;
6618            
6619            return html;
6620        }
6621
6622        /**
6623         * Safely fetch data from an API endpoint with better error handling.
6624         * @param {string} url - The API endpoint URL.
6625         * @returns {Promise<Array>} - Returns array of data or empty array on error.
6626         */
6627        async function safeFetch(url) {
6628            try {
6629                console.log(`Fetching from: ${url}`);
6630                const response = await fetch(url);
6631                
6632                if (!response.ok) {
6633                    console.warn(`API responded with status ${response.status} for ${url}`);
6634                    return [];
6635                }
6636                
6637                const data = await response.json();
6638                console.log(`Successfully fetched ${data.length} items from ${url}`);
6639                return Array.isArray(data) ? data : [];
6640            } catch (error) {
6641                console.error(`Error fetching from ${url}:`, error);
6642                return [];
6643            }
6644        }
6645
6646      /**
6647 * Toggles the display of amenities for a given station.
6648 * @param {string} stationId - The unique ID of the station.
6649 */
6650async function toggleAmenities(stationId) {
6651    const amenitiesList = document.getElementById('amenities-' + stationId);
6652    if (amenitiesList.style.display === 'none' || amenitiesList.style.display === '') {
6653        amenitiesList.style.display = 'block';
6654        const toggleIcon = document.getElementById('toggle-' + stationId);
6655        if (toggleIcon) {
6656            toggleIcon.textContent = '-';
6657        }
6658        // Check if amenities are already loaded to prevent redundant fetches
6659        if (!amenitiesList.dataset.loaded) {
6660            try {
6661                // Display loading message
6662                amenitiesList.innerHTML = '<li class="loading">Loading amenities...</li>';
6663
6664                console.log('Fetching amenities for station:', stationId);
6665
6666                // Fetch all amenities using the safer method
6667                const [hotels, coffeeShops, bars, pharmacies, restaurants, supermarkets, museums] = await Promise.all([
6668                    safeFetch(`/api/stations/${stationId}/hotels`),
6669                    safeFetch(`/api/stations/${stationId}/coffee`),
6670                    safeFetch(`/api/stations/${stationId}/bars`),
6671                    safeFetch(`/api/stations/${stationId}/pharmacies`),
6672                    safeFetch(`/api/stations/${stationId}/restaurants`),
6673                    safeFetch(`/api/stations/${stationId}/supermarkets`),
6674		    safeFetch(`/api/stations/${stationId}/museums`) 
6675                ]);
6676
6677                console.log('Fetched data counts:', {
6678                    hotels: hotels.length,
6679                    coffeeShops: coffeeShops.length,
6680                    bars: bars.length,
6681                    pharmacies: pharmacies.length,
6682                    restaurants: restaurants.length,
6683                    supermarkets: supermarkets.length,
6684 		    museums: museums.length
6685                });
6686
6687                // Sort all amenities alphabetically
6688                const sortedHotels = sortAmenities(hotels, 'hotel_name');
6689                const sortedCoffeeShops = sortAmenities(coffeeShops, 'coffee_name');
6690                const sortedBars = sortAmenities(bars, 'bar_name');
6691                const sortedPharmacies = sortAmenities(pharmacies, 'pharmacy_name');
6692                const sortedRestaurants = sortAmenities(restaurants, 'restaurant_name');
6693                const sortedSupermarkets = sortAmenities(supermarkets, 'supermarket_name');
6694		const sortedMuseums = sortAmenities(museums, 'museum_name');
6695
6696                // Combine breakfast restaurants and coffee shops into one "Breakfast" category
6697                const breakfastRestaurants = sortedRestaurants.filter(r => 
6698                    r.restaurant_cuisine_type && 
6699                    (r.restaurant_cuisine_type.toLowerCase().includes('breakfast') || 
6700                     r.restaurant_cuisine_type.toLowerCase().includes('brunch') ||
6701                     r.restaurant_cuisine_type.toLowerCase().includes('cafe') ||
6702                     r.restaurant_cuisine_type.toLowerCase().includes('bakery'))
6703                );
6704                
6705                // Combine coffee shops with breakfast restaurants for a unified "Breakfast" category
6706                const allBreakfastItems = [
6707                    ...breakfastRestaurants.map(r => ({
6708                        name: r.restaurant_name,
6709                        website: r.restaurant_website,
6710                        distance: r.restaurant_distance_miles,
6711                        type: 'restaurant',
6712                        cuisine: r.restaurant_cuisine_type,
6713                        price: r.restaurant_price
6714                    })),
6715                    ...sortedCoffeeShops.map(c => ({
6716                        name: c.coffee_name,
6717                        website: c.coffee_website,
6718                        distance: c.coffee_distance_miles,
6719                        type: 'coffee'
6720                    }))
6721                ].sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()));
6722                
6723                const lunchDinnerRestaurants = sortedRestaurants.filter(r => 
6724                    !breakfastRestaurants.includes(r)
6725                );
6726
6727                // Clear the amenities list
6728                amenitiesList.innerHTML = '';
6729
6730                // Create HTML for each category
6731                let categoriesHTML = '';
6732
6733                // Hotels
6734                categoriesHTML += createCategoryHTML(
6735                    stationId, 'hotels', 'Hotels', 'fas fa-bed', sortedHotels,
6736                    hotel => `
6737                        <li>
6738                            <i class="fas fa-bed" style="color: black;"></i>
6739                            <a href="${hotel.hotel_website}" target="_blank">${hotel.hotel_name}</a>
6740                            - ${hotel.hotel_distance_miles} miles
6741                        </li>
6742                    `
6743                );
6744
6745                // Unified Breakfast category (includes both breakfast restaurants and coffee shops)
6746                categoriesHTML += createCategoryHTML(
6747                    stationId, 'breakfast', 'Breakfast', 'fas fa-coffee', allBreakfastItems,
6748                    item => {
6749                        if (item.type === 'restaurant') {
6750                            return `
6751                                <li>
6752                                    <i class="fas fa-utensils" style="color: black;"></i>
6753                                    <a href="${item.website}" target="_blank">${item.name}</a>
6754                                    - ${item.distance} miles
6755                                    <br>
6756                                    <span style="margin-left: 24px;">Cuisine: ${item.cuisine}</span>
6757                                    <br>
6758                                    <span style="margin-left: 24px;">Price: ${item.price}</span>
6759                                </li>
6760                            `;
6761                        } else {
6762                            return `
6763                                <li>
6764                                    <i class="fas fa-coffee" style="color: black;"></i>
6765                                    <a href="${item.website}" target="_blank">${item.name}</a>
6766                                    - ${item.distance} miles
6767                                </li>
6768                            `;
6769                        }
6770                    }
6771                );
6772
6773                // Lunch/Dinner
6774                categoriesHTML += createCategoryHTML(
6775                    stationId, 'lunch-dinner', 'Lunch/Dinner', 'fas fa-utensils', lunchDinnerRestaurants,
6776                    restaurant => `
6777                        <li>
6778                            <i class="fas fa-utensils" style="color: black;"></i>
6779                            <a href="${restaurant.restaurant_website}" target="_blank">${restaurant.restaurant_name}</a>
6780                            - ${restaurant.restaurant_distance_miles} miles
6781                            <br>
6782                            <span style="margin-left: 24px;">Cuisine: ${restaurant.restaurant_cuisine_type}</span>
6783                            <br>
6784                            <span style="margin-left: 24px;">Price: ${restaurant.restaurant_price}</span>
6785                        </li>
6786                    `
6787                );
6788
6789                // Nightlife (Bars)
6790                categoriesHTML += createCategoryHTML(
6791                    stationId, 'nightlife', 'Nightlife', 'fas fa-cocktail', sortedBars,
6792                    bar => `
6793                        <li>
6794                            <i class="fas fa-cocktail" style="color: black;"></i>
6795                            <a href="${bar.bar_website}" target="_blank">${bar.bar_name}</a>
6796                            - ${bar.bar_distance_miles} miles
6797                        </li>
6798                    `
6799                );
6800
6801                // Pharmacies
6802                categoriesHTML += createCategoryHTML(
6803                    stationId, 'pharmacies', 'Pharmacies', 'fas fa-pills', sortedPharmacies,
6804                    pharmacy => `
6805                        <li>
6806                            <i class="fas fa-pills" style="color: black;"></i>
6807                            <a href="${pharmacy.pharmacy_website}" target="_blank">${pharmacy.pharmacy_name}</a>
6808                            - ${pharmacy.pharmacy_distance_miles} miles
6809                        </li>
6810                    `
6811                );
6812
6813                // Supermarkets 
6814                categoriesHTML += createCategoryHTML(
6815                    stationId, 'supermarkets', 'Supermarkets', 'fas fa-shopping-cart', sortedSupermarkets,
6816                    supermarket => `
6817                        <li>
6818                            <i class="fas fa-shopping-cart" style="color: black;"></i>
6819                            <a href="${supermarket.supermarket_website}" target="_blank">${supermarket.supermarket_name}</a>
6820                            - ${supermarket.supermarket_distance_miles} miles
6821                        </li>
6822                    `
6823                );
6824
6825// Museums
6826categoriesHTML += createCategoryHTML(
6827    stationId, 'museums', 'Museums', 'fas fa-university', sortedMuseums,
6828    museum => `
6829        <li>
6830            <i class="fas fa-university" style="color: black;"></i>
6831            <a href="${museum.museum_website}" target="_blank">${museum.museum_name}</a>
6832            - ${museum.museum_distance_miles} miles
6833        </li>
6834    `
6835);
6836
6837                // If no amenities found at all
6838                if (categoriesHTML === '') {
6839                    amenitiesList.innerHTML = '<li>No amenities found nearby.</li>';
6840                } else {
6841                    amenitiesList.innerHTML = categoriesHTML;
6842                }
6843
6844                // Mark as loaded to prevent future fetches
6845                amenitiesList.dataset.loaded = 'true';
6846                
6847                console.log('Successfully loaded amenities for station:', stationId);
6848                
6849            } catch (error) {
6850                console.error('Error in toggleAmenities:', error);
6851                amenitiesList.innerHTML = '<li class="error">Error loading amenities. Please try again later.</li>';
6852            }
6853        }
6854    } else {
6855        amenitiesList.style.display = 'none';
6856        const toggleIcon = document.getElementById('toggle-' + stationId);
6857        if (toggleIcon) {
6858            toggleIcon.textContent = '+';
6859        }
6860    }
6861}
6862    </script>
6862
6863
6864    <!-- JavaScript to Toggle the Mobile Menu -->
6865    
6865<script>
6866       function toggleMenu() {
6867        const menu = document.getElementById("mobileMenu");
6868        menu.classList.toggle("mobile-menu-active");
6869      }
6870    </script>
6870
6871
6872</body>
6873</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.