Team Ai
Apppublic

lattmamb/deepvision_builderOS

sourceHugging Facemitupdated 2y agoView on Hugging Face
1likes
deployment-map.html834 linesDownload Raw Back to root
1<!DOCTYPE html>2<html lang="en">3<head>4    <meta charset="UTF-8">5    <meta name="viewport" content="width=device-width, initial-scale=1.0">6    <title>Unity Fleet - Deployment Map</title>7    <link rel="stylesheet" href="../styles.css">8    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">9    <link rel="preconnect" href="https://fonts.googleapis.com">10    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>11    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">12    <style>13        /* MVP Component specific styles */14        .component-container {15            max-width: 1200px;16            margin: 0 auto;17            padding: 2rem;18        }19        20        .component-header {21            text-align: center;22            margin-bottom: 3rem;23        }24        25        .component-header h1 {26            font-size: 2.5rem;27            margin-bottom: 1rem;28            background: linear-gradient(90deg, var(--accent-color-1), var(--accent-color-2));29            -webkit-background-clip: text;30            background-clip: text;31            -webkit-text-fill-color: transparent;32        }33        34        .component-header p {35            font-size: 1.2rem;36            max-width: 800px;37            margin: 0 auto;38            opacity: 0.8;39        }40        41        .component-content {42            background: var(--glass-bg);43            border: 1px solid var(--glass-border);44            border-radius: 16px;45            padding: 2rem;46            margin-bottom: 3rem;47            backdrop-filter: blur(10px);48        }49        50        .back-to-home {51            display: inline-block;52            margin-top: 2rem;53            padding: 0.8rem 1.5rem;54            background: transparent;55            border: 1px solid var(--accent-color-1);56            color: var(--accent-color-1);57            border-radius: 4px;58            font-family: var(--font-primary);59            font-weight: 500;60            text-transform: uppercase;61            letter-spacing: 1px;62            transition: all var(--transition-medium);63        }64        65        .back-to-home:hover {66            background: rgba(0, 224, 255, 0.1);67            transform: translateY(-3px);68        }69        70        /* Deployment Map specific styles */71        .deployment-map-container {72            display: flex;73            flex-direction: column;74            align-items: center;75            padding: 1rem;76        }77 78        .map-interface {79            width: 100%;80            max-width: 900px;81            background-color: #0B0B0F;82            border-radius: 16px;83            overflow: hidden;84            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);85            border: 1px solid rgba(0, 224, 255, 0.3);86            margin-bottom: 2rem;87        }88 89        .map-header {90            background: linear-gradient(90deg, rgba(0, 224, 255, 0.2), rgba(53, 242, 219, 0.2));91            padding: 1.5rem;92            display: flex;93            justify-content: space-between;94            align-items: center;95        }96 97        .map-header h2 {98            margin: 0;99            font-size: 1.5rem;100        }101 102        .map-controls {103            display: flex;104            gap: 1rem;105        }106 107        .map-control-btn {108            padding: 0.5rem 1rem;109            background: rgba(255, 255, 255, 0.1);110            border: 1px solid rgba(255, 255, 255, 0.2);111            border-radius: 4px;112            color: white;113            cursor: pointer;114            transition: all 0.3s ease;115        }116 117        .map-control-btn:hover {118            background: rgba(0, 224, 255, 0.2);119            border-color: var(--accent-color-1);120        }121 122        .map-control-btn.active {123            background: rgba(0, 224, 255, 0.3);124            border-color: var(--accent-color-1);125            color: var(--accent-color-1);126        }127 128        .map-body {129            padding: 2rem;130        }131 132        .map-filters {133            display: flex;134            flex-wrap: wrap;135            gap: 1rem;136            margin-bottom: 2rem;137        }138 139        .filter-group {140            background: rgba(255, 255, 255, 0.05);141            border-radius: 12px;142            padding: 1rem;143            border: 1px solid rgba(255, 255, 255, 0.1);144            min-width: 200px;145            flex: 1;146        }147 148        .filter-group h3 {149            margin-top: 0;150            margin-bottom: 1rem;151            font-size: 1.1rem;152            color: var(--accent-color-1);153        }154 155        .filter-options {156            display: flex;157            flex-wrap: wrap;158            gap: 0.5rem;159        }160 161        .filter-option {162            padding: 0.5rem 1rem;163            background: rgba(255, 255, 255, 0.05);164            border: 1px solid rgba(255, 255, 255, 0.1);165            border-radius: 20px;166            font-size: 0.8rem;167            cursor: pointer;168            transition: all 0.3s ease;169        }170 171        .filter-option:hover {172            background: rgba(0, 224, 255, 0.1);173            border-color: var(--accent-color-1);174        }175 176        .filter-option.active {177            background: rgba(0, 224, 255, 0.2);178            border-color: var(--accent-color-1);179            color: var(--accent-color-1);180        }181 182        .map-visualization {183            background: rgba(0, 0, 0, 0.3);184            border-radius: 12px;185            padding: 1rem;186            position: relative;187            height: 500px;188            overflow: hidden;189        }190 191        .illinois-map {192            position: relative;193            width: 100%;194            height: 100%;195            background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMDAgNTAwIj48cGF0aCBkPSJNNzUsMTAwIEwxMDAsMzAgTDIwMCw1MCBMMjUwLDEwMCBMMjcwLDIwMCBMMjUwLDMwMCBMMjAwLDQwMCBMMTUwLDQ1MCBMMTAwLDQwMCBMNTAsMzAwIEw1MCwyMDAgTDc1LDEwMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2JhKDAsIDIyNCwgMjU1LCAwLjMpIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=');196            background-size: contain;197            background-position: center;198            background-repeat: no-repeat;199        }200 201        .map-location {202            position: absolute;203            width: 20px;204            height: 20px;205            border-radius: 50%;206            background: var(--accent-color-1);207            transform: translate(-50%, -50%);208            cursor: pointer;209            transition: all 0.3s ease;210            box-shadow: 0 0 10px rgba(0, 224, 255, 0.5);211        }212 213        .map-location:hover {214            transform: translate(-50%, -50%) scale(1.3);215            z-index: 10;216        }217 218        .map-location::after {219            content: '';220            position: absolute;221            top: 50%;222            left: 50%;223            width: 30px;224            height: 30px;225            border-radius: 50%;226            background: rgba(0, 224, 255, 0.3);227            transform: translate(-50%, -50%);228            animation: pulse 2s infinite;229        }230 231        @keyframes pulse {232            0% {233                transform: translate(-50%, -50%) scale(0.5);234                opacity: 1;235            }236            100% {237                transform: translate(-50%, -50%) scale(2);238                opacity: 0;239            }240        }241 242        .map-location.phase-1 {243            background: #4CAF50;244        }245 246        .map-location.phase-1::after {247            background: rgba(76, 175, 80, 0.3);248        }249 250        .map-location.phase-2 {251            background: #FFC107;252        }253 254        .map-location.phase-2::after {255            background: rgba(255, 193, 7, 0.3);256        }257 258        .map-location.phase-3 {259            background: #9C27B0;260        }261 262        .map-location.phase-3::after {263            background: rgba(156, 39, 176, 0.3);264        }265 266        .location-tooltip {267            position: absolute;268            background: rgba(0, 0, 0, 0.8);269            border: 1px solid var(--accent-color-1);270            border-radius: 8px;271            padding: 1rem;272            width: 200px;273            pointer-events: none;274            opacity: 0;275            transition: opacity 0.3s ease;276            z-index: 20;277        }278 279        .location-tooltip h4 {280            margin-top: 0;281            margin-bottom: 0.5rem;282            font-size: 1rem;283            color: var(--accent-color-1);284        }285 286        .location-tooltip p {287            margin: 0.3rem 0;288            font-size: 0.8rem;289        }290 291        .map-legend {292            display: flex;293            justify-content: center;294            gap: 2rem;295            margin-top: 1rem;296        }297 298        .legend-item {299            display: flex;300            align-items: center;301            font-size: 0.9rem;302        }303 304        .legend-color {305            width: 16px;306            height: 16px;307            border-radius: 50%;308            margin-right: 0.5rem;309        }310 311        .legend-color.phase-1 {312            background: #4CAF50;313        }314 315        .legend-color.phase-2 {316            background: #FFC107;317        }318 319        .legend-color.phase-3 {320            background: #9C27B0;321        }322 323        .map-overlay {324            position: absolute;325            top: 0;326            left: 0;327            width: 100%;328            height: 100%;329            background-size: contain;330            background-position: center;331            background-repeat: no-repeat;332            opacity: 0;333            transition: opacity 0.5s ease;334            pointer-events: none;335        }336 337        .map-overlay.demographics {338            background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMDAgNTAwIj48cGF0aCBkPSJNNzUsMTAwIEwxMDAsMzAgTDIwMCw1MCBMMjUwLDEwMCBMMjcwLDIwMCBMMjUwLDMwMCBMMjAwLDQwMCBMMTUwLDQ1MCBMMTAwLDQwMCBMNTAsMzAwIEw1MCwyMDAgTDc1LDEwMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2JhKDAsIDIyNCwgMjU1LCAwLjMpIiBzdHJva2Utd2lkdGg9IjIiLz48Y2lyY2xlIGN4PSIxMDAiIGN5PSIxMDAiIHI9IjMwIiBmaWxsPSJyZ2JhKDc2LCAxNzUsIDgwLCAwLjMpIi8+PGNpcmNsZSBjeD0iMjAwIiBjeT0iMTUwIiByPSI1MCIgZmlsbD0icmdiYSg3NiwgMTc1LCA4MCwgMC41KSIvPjxjaXJjbGUgY3g9IjE1MCIgY3k9IjI1MCIgcj0iNzAiIGZpbGw9InJnYmEoNzYsIDE3NSwgODAsIDAuNykiLz48Y2lyY2xlIGN4PSIxMDAiIGN5PSIzNTAiIHI9IjQwIiBmaWxsPSJyZ2JhKDc2LCAxNzUsIDgwLCAwLjQpIi8+PC9zdmc+');339        }340 341        .map-overlay.ev-adoption {342            background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMDAgNTAwIj48cGF0aCBkPSJNNzUsMTAwIEwxMDAsMzAgTDIwMCw1MCBMMjUwLDEwMCBMMjcwLDIwMCBMMjUwLDMwMCBMMjAwLDQwMCBMMTUwLDQ1MCBMMTAwLDQwMCBMNTAsMzAwIEw1MCwyMDAgTDc1LDEwMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2JhKDAsIDIyNCwgMjU1LCAwLjMpIiBzdHJva2Utd2lkdGg9IjIiLz48cGF0aCBkPSJNMTAwLDEwMCBMMjAwLDE1MCBMMTUwLDI1MCBMMTAwLDM1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2JhKDI1NSwgMTkzLCA3LCAwLjcpIiBzdHJva2Utd2lkdGg9IjIwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1kYXNoYXJyYXk9IjUsMTAiLz48L3N2Zz4=');343        }344 345        .map-stats {346            display: grid;347            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));348            gap: 1rem;349            margin-top: 2rem;350        }351 352        .stat-card {353            background: rgba(255, 255, 255, 0.05);354            border-radius: 12px;355            padding: 1rem;356            border: 1px solid rgba(255, 255, 255, 0.1);357        }358 359        .stat-card h4 {360            margin-top: 0;361            margin-bottom: 0.5rem;362            font-size: 1rem;363            color: var(--accent-color-1);364        }365 366        .stat-value {367            font-size: 1.5rem;368            font-weight: bold;369            margin-bottom: 0.5rem;370        }371 372        .stat-description {373            font-size: 0.8rem;374            opacity: 0.8;375        }376 377        .map-footer {378            background: rgba(0, 0, 0, 0.3);379            padding: 1rem;380            display: flex;381            justify-content: space-between;382            align-items: center;383            border-top: 1px solid rgba(255, 255, 255, 0.1);384        }385 386        .map-actions {387            display: flex;388            gap: 1rem;389        }390 391        .map-actions button {392            padding: 0.5rem 1rem;393            border-radius: 4px;394            background: transparent;395            border: 1px solid var(--accent-color-1);396            color: var(--accent-color-1);397            cursor: pointer;398            transition: all 0.3s ease;399        }400 401        .map-actions button:hover {402            background: rgba(0, 224, 255, 0.1);403        }404 405        .map-actions button.primary {406            background: linear-gradient(90deg, var(--accent-color-1), var(--accent-color-2));407            color: #000;408            border: none;409        }410 411        .map-actions button.primary:hover {412            transform: translateY(-3px);413            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);414        }415 416        .map-info {417            font-size: 0.9rem;418            opacity: 0.7;419        }420    </style>421</head>422<body>423    <div class="noise-overlay"></div>424    425    <header>426        <nav>427            <div class="logo">UNITY FLEET</div>428            <div class="nav-links">429                <a href="../index.html#what-is-the-link">What is The Link</a>430                <a href="../index.html#subscription-tiers">Subscription Tiers</a>431                <a href="../index.html#impact-equity">Impact & Equity</a>432                <a href="../index.html#tokenization">ChainLink Tokenization</a>433                <a href="../index.html#rural-plan">Rural Revitalization</a>434                <a href="../index.html#mvp-showcase">MVP Showcase</a>435            </div>436            <div class="mobile-nav-toggle">437                <i class="fas fa-bars"></i>438            </div>439        </nav>440    </header>441    442    <main class="component-container">443        <div class="component-header">444            <h1>DEPLOYMENT MAP</h1>445            <p>Explore our phased deployment plan across Illinois with demographic data overlays and EV adoption projections.</p>446        </div>447        448        <div class="component-content">449            <div class="deployment-map-container">450                <div class="map-interface">451                    <div class="map-header">452                        <h2>The Link Deployment Plan</h2>453                        <div class="map-controls">454                            <button class="map-control-btn active" data-overlay="none">Base Map</button>455                            <button class="map-control-btn" data-overlay="demographics">Demographics</button>456                            <button class="map-control-btn" data-overlay="ev-adoption">EV Adoption</button>457                        </div>458                    </div>459                    460                    <div class="map-body">461                        <div class="map-filters">462                            <div class="filter-group">463                                <h3>Deployment Phase</h3>464                                <div class="filter-options">465                                    <div class="filter-option active" data-phase="all">All Phases</div>466                                    <div class="filter-option" data-phase="1">Phase 1 (2025-2026)</div>467                                    <div class="filter-option" data-phase="2">Phase 2 (2026-2027)</div>468                                    <div class="filter-option" data-phase="3">Phase 3 (2027-2028)</div>469                                </div>470                            </div>471                            472                            <div class="filter-group">473                                <h3>Hub Type</h3>474                                <div class="filter-options">475                                    <div class="filter-option active" data-type="all">All Types</div>476                                    <div class="filter-option" data-type="urban">Urban Hubs</div>477                                    <div class="filter-option" data-type="suburban">Suburban Hubs</div>478                                    <div class="filter-option" data-type="rural">Rural Hubs</div>479                                    <div class="filter-option" data-type="highway">Highway Corridors</div>480                                </div>481                            </div>482                        </div>483                        484                        <div class="map-visualization">485                            <div class="illinois-map">486                                <!-- Chicago -->487                                <div class="map-location phase-1" style="top: 15%; left: 75%;" data-name="Chicago Downtown" data-phase="1" data-type="urban">488                                </div>489                                490                                <!-- Springfield -->491                                <div class="map-location phase-1" style="top: 50%; left: 45%;" data-name="Springfield Central" data-phase="1" data-type="urban">492                                </div>493                                494                                <!-- Champaign-Urbana -->495                                <div class="map-location phase-1" style="top: 40%; left: 70%;" data-name="Champaign-Urbana" data-phase="1" data-type="urban">496                                </div>497                                498                                <!-- Bloomington-Normal -->499                                <div class="map-location phase-1" style="top: 35%; left: 55%;" data-name="Bloomington-Normal" data-phase="1" data-type="urban">500                                </div>501                                502                                <!-- Peoria -->503                                <div class="map-location phase-1" style="top: 30%; left: 40%;" data-name="Peoria" data-phase="1" data-type="urban">504                                </div>505                                506                                <!-- Rockford -->507                                <div class="map-location phase-2" style="top: 10%; left: 35%;" data-name="Rockford" data-phase="2" data-type="urban">508                                </div>509                                510                                <!-- Naperville -->511                                <div class="map-location phase-2" style="top: 20%; left: 65%;" data-name="Naperville" data-phase="2" data-type="suburban">512                                </div>513                                514                                <!-- Joliet -->515                                <div class="map-location phase-2" style="top: 25%; left: 60%;" data-name="Joliet" data-phase="2" data-type="suburban">516                                </div>517                                518                                <!-- Decatur -->519                                <div class="map-location phase-2" style="top: 55%; left: 55%;" data-name="Decatur" data-phase="2" data-type="urban">520                                </div>521                                522                                <!-- Quincy -->523                                <div class="map-location phase-2" style="top: 45%; left: 15%;" data-name="Quincy" data-phase="2" data-type="rural">524                                </div>525                                526                                <!-- Carbondale -->527                                <div class="map-location phase-3" style="top: 80%; left: 40%;" data-name="Carbondale" data-phase="3" data-type="rural">528                                </div>529                                530                                <!-- Effingham -->531                                <div class="map-location phase-3" style="top: 65%; left: 60%;" data-name="Effingham" data-phase="3" data-type="highway">532                                </div>533                                534                                <!-- Galesburg -->535                                <div class="map-location phase-3" style="top: 25%; left: 25%;" data-name="Galesburg" data-phase="3" data-type="rural">536                                </div>537                                538                                <!-- Mt. Vernon -->539                                <div class="map-location phase-3" style="top: 70%; left: 50%;" data-name="Mt. Vernon" data-phase="3" data-type="highway">540                                </div>541                                542                                <!-- I-55 Corridor -->543                                <div class="map-location phase-2" style="top: 40%; left: 50%;" data-name="I-55 Corridor Hub" data-phase="2" data-type="highway">544                                </div>545                                546                                <div class="location-tooltip"></div>547                                548                                <div class="map-overlay demographics"></div>549                                <div class="map-overlay ev-adoption"></div>550                            </div>551                            552                            <div class="map-legend">553                                <div class="legend-item">554                                    <div class="legend-color phase-1"></div>555                                    <span>Phase 1 (2025-2026)</span>556                                </div>557                                <div class="legend-item">558                                    <div class="legend-color phase-2"></div>559                                    <span>Phase 2 (2026-2027)</span>560                                </div>561                                <div class="legend-item">562                                    <div class="legend-color phase-3"></div>563                                    <span>Phase 3 (2027-2028)</span>564                                </div>565                            </div>566                        </div>567                        568                        <div class="map-stats">569                            <div class="stat-card">570                                <h4>Total Planned Hubs</h4>571                                <div class="stat-value">15</div>572                                <div class="stat-description">Across urban, suburban, and rural areas</div>573                            </div>574                            575                            <div class="stat-card">576                                <h4>Population Coverage</h4>577                                <div class="stat-value">85%</div>578                                <div class="stat-description">Of Illinois residents within 30 miles of a hub</div>579                            </div>580                            581                            <div class="stat-card">582                                <h4>Total Charging Ports</h4>583                                <div class="stat-value">120</div>584                                <div class="stat-description">Including 80 DC fast chargers and 40 Level 2</div>585                            </div>586                            587                            <div class="stat-card">588                                <h4>Projected Annual Usage</h4>589                                <div class="stat-value">1.2M</div>590                                <div class="stat-description">Charging sessions per year at full deployment</div>591                            </div>592                        </div>593                    </div>594                    595                    <div class="map-footer">596                        <div class="map-actions">597                            <button id="reset-btn">Reset Filters</button>598                            <button id="download-btn" class="primary">Download Deployment Plan</button>599                        </div>600                        <div class="map-info">601                            Last Updated: June 1, 2025 | Data Source: Unity Fleet Planning Division602                        </div>603                    </div>604                </div>605            </div>606        </div>607        608        <div class="component-features">609            <h2>Key Features</h2>610            <ul class="features-list">611                <li>Interactive map of Illinois showing all planned charging hub locations</li>612                <li>Color-coded visualization of the three-phase deployment timeline</li>613                <li>Demographic data overlay showing population density and income distribution</li>614                <li>EV adoption projection layer highlighting areas of expected growth</li>615                <li>Filtering options by deployment phase and hub type</li>616                <li>Detailed information for each location including specifications and timeline</li>617                <li>Coverage statistics showing population access and charging capacity</li>618            </ul>619        </div>620        621        <a href="../index.html#mvp-showcase" class="back-to-home">622            <i class="fas fa-arrow-left"></i> Back to MVP Showcase623        </a>624    </main>625    626    <footer>627        <div class="container">628            <div class="footer-content">629                <div class="footer-logo">630                    <div class="logo">UNITY FLEET</div>631                    <p>Revolutionizing electric vehicle infrastructure across Illinois</p>632                </div>633                634                <div class="footer-links">635                    <div class="link-column">636                        <h4>Navigation</h4>637                        <a href="../index.html#what-is-the-link">What is The Link</a>638                        <a href="../index.html#subscription-tiers">Subscription Tiers</a>639                        <a href="../index.html#impact-equity">Impact & Equity</a>640                        <a href="../index.html#tokenization">ChainLink Tokenization</a>641                        <a href="../index.html#rural-plan">Rural Revitalization</a>642                        <a href="../index.html#mvp-showcase">MVP Showcase</a>643                    </div>644                    645                    <div class="link-column">646                        <h4>Contact</h4>647                        <a href="mailto:info@unityfleet.com">info@unityfleet.com</a>648                        <a href="tel:+12175551234">+1 (217) 555-1234</a>649                        <p>2457 E Eldorado St<br>Decatur, IL 62521</p>650                    </div>651                    652                    <div class="link-column">653                        <h4>Legal</h4>654                        <a href="#">Privacy Policy</a>655                        <a href="#">Terms of Service</a>656                        <a href="#">Accessibility</a>657                    </div>658                </div>659                660                <div class="footer-social">661                    <a href="#" class="social-icon"><i class="fab fa-twitter"></i></a>662                    <a href="#" class="social-icon"><i class="fab fa-linkedin"></i></a>663                    <a href="#" class="social-icon"><i class="fab fa-facebook"></i></a>664                    <a href="#" class="social-icon"><i class="fab fa-instagram"></i></a>665                </div>666            </div>667            668            <div class="footer-bottom">669                <p>&copy; 2025 Unity Fleet LLC. All rights reserved.</p>670            </div>671        </div>672    </footer>673    674    <script>675        // Mobile navigation toggle676        document.querySelector('.mobile-nav-toggle').addEventListener('click', function() {677            document.querySelector('.nav-links').classList.toggle('active');678            this.innerHTML = document.querySelector('.nav-links').classList.contains('active') 679                ? '<i class="fas fa-times"></i>' 680                : '<i class="fas fa-bars"></i>';681        });682        683        // Deployment map interactivity684        document.addEventListener('DOMContentLoaded', function() {685            const mapLocations = document.querySelectorAll('.map-location');686            const tooltip = document.querySelector('.location-tooltip');687            const overlayButtons = document.querySelectorAll('.map-control-btn');688            const overlays = document.querySelectorAll('.map-overlay');689            const phaseFilters = document.querySelectorAll('.filter-option[data-phase]');690            const typeFilters = document.querySelectorAll('.filter-option[data-type]');691            const resetButton = document.getElementById('reset-btn');692            693            // Location hover effects694            mapLocations.forEach(location => {695                location.addEventListener('mouseenter', function(e) {696                    const name = this.getAttribute('data-name');697                    const phase = this.getAttribute('data-phase');698                    const type = this.getAttribute('data-type');699                    700                    let phaseText = '';701                    if (phase === '1') phaseText = 'Phase 1 (2025-2026)';702                    else if (phase === '2') phaseText = 'Phase 2 (2026-2027)';703                    else if (phase === '3') phaseText = 'Phase 3 (2027-2028)';704                    705                    let typeText = '';706                    if (type === 'urban') typeText = 'Urban Hub';707                    else if (type === 'suburban') typeText = 'Suburban Hub';708                    else if (type === 'rural') typeText = 'Rural Hub';709                    else if (type === 'highway') typeText = 'Highway Corridor Hub';710                    711                    tooltip.innerHTML = `712                        <h4>${name}</h4>713                        <p>${phaseText}</p>714                        <p>${typeText}</p>715                        <p>8 Charging Stations</p>716                    `;717                    718                    const rect = this.getBoundingClientRect();719                    const mapRect = document.querySelector('.map-visualization').getBoundingClientRect();720                    721                    tooltip.style.left = (e.clientX - mapRect.left + 20) + 'px';722                    tooltip.style.top = (e.clientY - mapRect.top - 20) + 'px';723                    tooltip.style.opacity = '1';724                });725                726                location.addEventListener('mousemove', function(e) {727                    const mapRect = document.querySelector('.map-visualization').getBoundingClientRect();728                    tooltip.style.left = (e.clientX - mapRect.left + 20) + 'px';729                    tooltip.style.top = (e.clientY - mapRect.top - 20) + 'px';730                });731                732                location.addEventListener('mouseleave', function() {733                    tooltip.style.opacity = '0';734                });735            });736            737            // Map overlay controls738            overlayButtons.forEach(button => {739                button.addEventListener('click', function() {740                    // Remove active class from all buttons741                    overlayButtons.forEach(btn => btn.classList.remove('active'));742                    743                    // Add active class to clicked button744                    this.classList.add('active');745                    746                    // Hide all overlays747                    overlays.forEach(overlay => overlay.style.opacity = '0');748                    749                    // Show selected overlay750                    const overlayType = this.getAttribute('data-overlay');751                    if (overlayType !== 'none') {752                        document.querySelector(`.map-overlay.${overlayType}`).style.opacity = '0.7';753                    }754                });755            });756            757            // Phase filters758            phaseFilters.forEach(filter => {759                filter.addEventListener('click', function() {760                    // Remove active class from all phase filters761                    phaseFilters.forEach(f => f.classList.remove('active'));762                    763                    // Add active class to clicked filter764                    this.classList.add('active');765                    766                    // Filter locations767                    filterLocations();768                });769            });770            771            // Type filters772            typeFilters.forEach(filter => {773                filter.addEventListener('click', function() {774                    // Remove active class from all type filters775                    typeFilters.forEach(f => f.classList.remove('active'));776                    777                    // Add active class to clicked filter778                    this.classList.add('active');779                    780                    // Filter locations781                    filterLocations();782                });783            });784            785            // Reset filters786            resetButton.addEventListener('click', function() {787                // Reset phase filters788                phaseFilters.forEach(f => f.classList.remove('active'));789                document.querySelector('.filter-option[data-phase="all"]').classList.add('active');790                791                // Reset type filters792                typeFilters.forEach(f => f.classList.remove('active'));793                document.querySelector('.filter-option[data-type="all"]').classList.add('active');794                795                // Show all locations796                mapLocations.forEach(location => {797                    location.style.display = 'block';798                });799                800                // Reset overlays801                overlayButtons.forEach(btn => btn.classList.remove('active'));802                document.querySelector('.map-control-btn[data-overlay="none"]').classList.add('active');803                overlays.forEach(overlay => overlay.style.opacity = '0');804            });805            806            // Filter locations based on selected filters807            function filterLocations() {808                const selectedPhase = document.querySelector('.filter-option[data-phase].active').getAttribute('data-phase');809                const selectedType = document.querySelector('.filter-option[data-type].active').getAttribute('data-type');810                811                mapLocations.forEach(location => {812                    const locationPhase = location.getAttribute('data-phase');813                    const locationType = location.getAttribute('data-type');814                    815                    const phaseMatch = selectedPhase === 'all' || locationPhase === selectedPhase;816                    const typeMatch = selectedType === 'all' || locationType === selectedType;817                    818                    if (phaseMatch && typeMatch) {819                        location.style.display = 'block';820                    } else {821                        location.style.display = 'none';822                    }823                });824            }825            826            // Download button action827            document.getElementById('download-btn').addEventListener('click', function() {828                alert('Deployment plan PDF would download here in the production version.');829            });830        });831    </script>832</body>833</html>834