lattmamb/deepvision_builderOS
1
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>© 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 