Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Unity Fleet - Deployment Map</title> | |
| <link rel="stylesheet" href="../styles.css"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <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"> | |
| <style> | |
| /* MVP Component specific styles */ | |
| .component-container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 2rem; | |
| } | |
| .component-header { | |
| text-align: center; | |
| margin-bottom: 3rem; | |
| } | |
| .component-header h1 { | |
| font-size: 2.5rem; | |
| margin-bottom: 1rem; | |
| background: linear-gradient(90deg, var(--accent-color-1), var(--accent-color-2)); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .component-header p { | |
| font-size: 1.2rem; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| opacity: 0.8; | |
| } | |
| .component-content { | |
| background: var(--glass-bg); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 16px; | |
| padding: 2rem; | |
| margin-bottom: 3rem; | |
| backdrop-filter: blur(10px); | |
| } | |
| .back-to-home { | |
| display: inline-block; | |
| margin-top: 2rem; | |
| padding: 0.8rem 1.5rem; | |
| background: transparent; | |
| border: 1px solid var(--accent-color-1); | |
| color: var(--accent-color-1); | |
| border-radius: 4px; | |
| font-family: var(--font-primary); | |
| font-weight: 500; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| transition: all var(--transition-medium); | |
| } | |
| .back-to-home:hover { | |
| background: rgba(0, 224, 255, 0.1); | |
| transform: translateY(-3px); | |
| } | |
| /* Deployment Map specific styles */ | |
| .deployment-map-container { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| padding: 1rem; | |
| } | |
| .map-interface { | |
| width: 100%; | |
| max-width: 900px; | |
| background-color: #0B0B0F; | |
| border-radius: 16px; | |
| overflow: hidden; | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); | |
| border: 1px solid rgba(0, 224, 255, 0.3); | |
| margin-bottom: 2rem; | |
| } | |
| .map-header { | |
| background: linear-gradient(90deg, rgba(0, 224, 255, 0.2), rgba(53, 242, 219, 0.2)); | |
| padding: 1.5rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .map-header h2 { | |
| margin: 0; | |
| font-size: 1.5rem; | |
| } | |
| .map-controls { | |
| display: flex; | |
| gap: 1rem; | |
| } | |
| .map-control-btn { | |
| padding: 0.5rem 1rem; | |
| background: rgba(255, 255, 255, 0.1); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| border-radius: 4px; | |
| color: white; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .map-control-btn:hover { | |
| background: rgba(0, 224, 255, 0.2); | |
| border-color: var(--accent-color-1); | |
| } | |
| .map-control-btn.active { | |
| background: rgba(0, 224, 255, 0.3); | |
| border-color: var(--accent-color-1); | |
| color: var(--accent-color-1); | |
| } | |
| .map-body { | |
| padding: 2rem; | |
| } | |
| .map-filters { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 1rem; | |
| margin-bottom: 2rem; | |
| } | |
| .filter-group { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 12px; | |
| padding: 1rem; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| min-width: 200px; | |
| flex: 1; | |
| } | |
| .filter-group h3 { | |
| margin-top: 0; | |
| margin-bottom: 1rem; | |
| font-size: 1.1rem; | |
| color: var(--accent-color-1); | |
| } | |
| .filter-options { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.5rem; | |
| } | |
| .filter-option { | |
| padding: 0.5rem 1rem; | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 20px; | |
| font-size: 0.8rem; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .filter-option:hover { | |
| background: rgba(0, 224, 255, 0.1); | |
| border-color: var(--accent-color-1); | |
| } | |
| .filter-option.active { | |
| background: rgba(0, 224, 255, 0.2); | |
| border-color: var(--accent-color-1); | |
| color: var(--accent-color-1); | |
| } | |
| .map-visualization { | |
| background: rgba(0, 0, 0, 0.3); | |
| border-radius: 12px; | |
| padding: 1rem; | |
| position: relative; | |
| height: 500px; | |
| overflow: hidden; | |
| } | |
| .illinois-map { | |
| position: relative; | |
| width: 100%; | |
| height: 100%; | |
| background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMDAgNTAwIj48cGF0aCBkPSJNNzUsMTAwIEwxMDAsMzAgTDIwMCw1MCBMMjUwLDEwMCBMMjcwLDIwMCBMMjUwLDMwMCBMMjAwLDQwMCBMMTUwLDQ1MCBMMTAwLDQwMCBMNTAsMzAwIEw1MCwyMDAgTDc1LDEwMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2JhKDAsIDIyNCwgMjU1LCAwLjMpIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4='); | |
| background-size: contain; | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| } | |
| .map-location { | |
| position: absolute; | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| background: var(--accent-color-1); | |
| transform: translate(-50%, -50%); | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 0 10px rgba(0, 224, 255, 0.5); | |
| } | |
| .map-location:hover { | |
| transform: translate(-50%, -50%) scale(1.3); | |
| z-index: 10; | |
| } | |
| .map-location::after { | |
| content: ''; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| width: 30px; | |
| height: 30px; | |
| border-radius: 50%; | |
| background: rgba(0, 224, 255, 0.3); | |
| transform: translate(-50%, -50%); | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| transform: translate(-50%, -50%) scale(0.5); | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: translate(-50%, -50%) scale(2); | |
| opacity: 0; | |
| } | |
| } | |
| .map-location.phase-1 { | |
| background: #4CAF50; | |
| } | |
| .map-location.phase-1::after { | |
| background: rgba(76, 175, 80, 0.3); | |
| } | |
| .map-location.phase-2 { | |
| background: #FFC107; | |
| } | |
| .map-location.phase-2::after { | |
| background: rgba(255, 193, 7, 0.3); | |
| } | |
| .map-location.phase-3 { | |
| background: #9C27B0; | |
| } | |
| .map-location.phase-3::after { | |
| background: rgba(156, 39, 176, 0.3); | |
| } | |
| .location-tooltip { | |
| position: absolute; | |
| background: rgba(0, 0, 0, 0.8); | |
| border: 1px solid var(--accent-color-1); | |
| border-radius: 8px; | |
| padding: 1rem; | |
| width: 200px; | |
| pointer-events: none; | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| z-index: 20; | |
| } | |
| .location-tooltip h4 { | |
| margin-top: 0; | |
| margin-bottom: 0.5rem; | |
| font-size: 1rem; | |
| color: var(--accent-color-1); | |
| } | |
| .location-tooltip p { | |
| margin: 0.3rem 0; | |
| font-size: 0.8rem; | |
| } | |
| .map-legend { | |
| display: flex; | |
| justify-content: center; | |
| gap: 2rem; | |
| margin-top: 1rem; | |
| } | |
| .legend-item { | |
| display: flex; | |
| align-items: center; | |
| font-size: 0.9rem; | |
| } | |
| .legend-color { | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 50%; | |
| margin-right: 0.5rem; | |
| } | |
| .legend-color.phase-1 { | |
| background: #4CAF50; | |
| } | |
| .legend-color.phase-2 { | |
| background: #FFC107; | |
| } | |
| .legend-color.phase-3 { | |
| background: #9C27B0; | |
| } | |
| .map-overlay { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-size: contain; | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| opacity: 0; | |
| transition: opacity 0.5s ease; | |
| pointer-events: none; | |
| } | |
| .map-overlay.demographics { | |
| background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMDAgNTAwIj48cGF0aCBkPSJNNzUsMTAwIEwxMDAsMzAgTDIwMCw1MCBMMjUwLDEwMCBMMjcwLDIwMCBMMjUwLDMwMCBMMjAwLDQwMCBMMTUwLDQ1MCBMMTAwLDQwMCBMNTAsMzAwIEw1MCwyMDAgTDc1LDEwMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2JhKDAsIDIyNCwgMjU1LCAwLjMpIiBzdHJva2Utd2lkdGg9IjIiLz48Y2lyY2xlIGN4PSIxMDAiIGN5PSIxMDAiIHI9IjMwIiBmaWxsPSJyZ2JhKDc2LCAxNzUsIDgwLCAwLjMpIi8+PGNpcmNsZSBjeD0iMjAwIiBjeT0iMTUwIiByPSI1MCIgZmlsbD0icmdiYSg3NiwgMTc1LCA4MCwgMC41KSIvPjxjaXJjbGUgY3g9IjE1MCIgY3k9IjI1MCIgcj0iNzAiIGZpbGw9InJnYmEoNzYsIDE3NSwgODAsIDAuNykiLz48Y2lyY2xlIGN4PSIxMDAiIGN5PSIzNTAiIHI9IjQwIiBmaWxsPSJyZ2JhKDc2LCAxNzUsIDgwLCAwLjQpIi8+PC9zdmc+'); | |
| } | |
| .map-overlay.ev-adoption { | |
| background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMDAgNTAwIj48cGF0aCBkPSJNNzUsMTAwIEwxMDAsMzAgTDIwMCw1MCBMMjUwLDEwMCBMMjcwLDIwMCBMMjUwLDMwMCBMMjAwLDQwMCBMMTUwLDQ1MCBMMTAwLDQwMCBMNTAsMzAwIEw1MCwyMDAgTDc1LDEwMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2JhKDAsIDIyNCwgMjU1LCAwLjMpIiBzdHJva2Utd2lkdGg9IjIiLz48cGF0aCBkPSJNMTAwLDEwMCBMMjAwLDE1MCBMMTUwLDI1MCBMMTAwLDM1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2JhKDI1NSwgMTkzLCA3LCAwLjcpIiBzdHJva2Utd2lkdGg9IjIwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1kYXNoYXJyYXk9IjUsMTAiLz48L3N2Zz4='); | |
| } | |
| .map-stats { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 1rem; | |
| margin-top: 2rem; | |
| } | |
| .stat-card { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 12px; | |
| padding: 1rem; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .stat-card h4 { | |
| margin-top: 0; | |
| margin-bottom: 0.5rem; | |
| font-size: 1rem; | |
| color: var(--accent-color-1); | |
| } | |
| .stat-value { | |
| font-size: 1.5rem; | |
| font-weight: bold; | |
| margin-bottom: 0.5rem; | |
| } | |
| .stat-description { | |
| font-size: 0.8rem; | |
| opacity: 0.8; | |
| } | |
| .map-footer { | |
| background: rgba(0, 0, 0, 0.3); | |
| padding: 1rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .map-actions { | |
| display: flex; | |
| gap: 1rem; | |
| } | |
| .map-actions button { | |
| padding: 0.5rem 1rem; | |
| border-radius: 4px; | |
| background: transparent; | |
| border: 1px solid var(--accent-color-1); | |
| color: var(--accent-color-1); | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .map-actions button:hover { | |
| background: rgba(0, 224, 255, 0.1); | |
| } | |
| .map-actions button.primary { | |
| background: linear-gradient(90deg, var(--accent-color-1), var(--accent-color-2)); | |
| color: #000; | |
| border: none; | |
| } | |
| .map-actions button.primary:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); | |
| } | |
| .map-info { | |
| font-size: 0.9rem; | |
| opacity: 0.7; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="noise-overlay"></div> | |
| <header> | |
| <nav> | |
| <div class="logo">UNITY FLEET</div> | |
| <div class="nav-links"> | |
| <a href="../index.html#what-is-the-link">What is The Link</a> | |
| <a href="../index.html#subscription-tiers">Subscription Tiers</a> | |
| <a href="../index.html#impact-equity">Impact & Equity</a> | |
| <a href="../index.html#tokenization">ChainLink Tokenization</a> | |
| <a href="../index.html#rural-plan">Rural Revitalization</a> | |
| <a href="../index.html#mvp-showcase">MVP Showcase</a> | |
| </div> | |
| <div class="mobile-nav-toggle"> | |
| <i class="fas fa-bars"></i> | |
| </div> | |
| </nav> | |
| </header> | |
| <main class="component-container"> | |
| <div class="component-header"> | |
| <h1>DEPLOYMENT MAP</h1> | |
| <p>Explore our phased deployment plan across Illinois with demographic data overlays and EV adoption projections.</p> | |
| </div> | |
| <div class="component-content"> | |
| <div class="deployment-map-container"> | |
| <div class="map-interface"> | |
| <div class="map-header"> | |
| <h2>The Link Deployment Plan</h2> | |
| <div class="map-controls"> | |
| <button class="map-control-btn active" data-overlay="none">Base Map</button> | |
| <button class="map-control-btn" data-overlay="demographics">Demographics</button> | |
| <button class="map-control-btn" data-overlay="ev-adoption">EV Adoption</button> | |
| </div> | |
| </div> | |
| <div class="map-body"> | |
| <div class="map-filters"> | |
| <div class="filter-group"> | |
| <h3>Deployment Phase</h3> | |
| <div class="filter-options"> | |
| <div class="filter-option active" data-phase="all">All Phases</div> | |
| <div class="filter-option" data-phase="1">Phase 1 (2025-2026)</div> | |
| <div class="filter-option" data-phase="2">Phase 2 (2026-2027)</div> | |
| <div class="filter-option" data-phase="3">Phase 3 (2027-2028)</div> | |
| </div> | |
| </div> | |
| <div class="filter-group"> | |
| <h3>Hub Type</h3> | |
| <div class="filter-options"> | |
| <div class="filter-option active" data-type="all">All Types</div> | |
| <div class="filter-option" data-type="urban">Urban Hubs</div> | |
| <div class="filter-option" data-type="suburban">Suburban Hubs</div> | |
| <div class="filter-option" data-type="rural">Rural Hubs</div> | |
| <div class="filter-option" data-type="highway">Highway Corridors</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="map-visualization"> | |
| <div class="illinois-map"> | |
| <!-- Chicago --> | |
| <div class="map-location phase-1" style="top: 15%; left: 75%;" data-name="Chicago Downtown" data-phase="1" data-type="urban"> | |
| </div> | |
| <!-- Springfield --> | |
| <div class="map-location phase-1" style="top: 50%; left: 45%;" data-name="Springfield Central" data-phase="1" data-type="urban"> | |
| </div> | |
| <!-- Champaign-Urbana --> | |
| <div class="map-location phase-1" style="top: 40%; left: 70%;" data-name="Champaign-Urbana" data-phase="1" data-type="urban"> | |
| </div> | |
| <!-- Bloomington-Normal --> | |
| <div class="map-location phase-1" style="top: 35%; left: 55%;" data-name="Bloomington-Normal" data-phase="1" data-type="urban"> | |
| </div> | |
| <!-- Peoria --> | |
| <div class="map-location phase-1" style="top: 30%; left: 40%;" data-name="Peoria" data-phase="1" data-type="urban"> | |
| </div> | |
| <!-- Rockford --> | |
| <div class="map-location phase-2" style="top: 10%; left: 35%;" data-name="Rockford" data-phase="2" data-type="urban"> | |
| </div> | |
| <!-- Naperville --> | |
| <div class="map-location phase-2" style="top: 20%; left: 65%;" data-name="Naperville" data-phase="2" data-type="suburban"> | |
| </div> | |
| <!-- Joliet --> | |
| <div class="map-location phase-2" style="top: 25%; left: 60%;" data-name="Joliet" data-phase="2" data-type="suburban"> | |
| </div> | |
| <!-- Decatur --> | |
| <div class="map-location phase-2" style="top: 55%; left: 55%;" data-name="Decatur" data-phase="2" data-type="urban"> | |
| </div> | |
| <!-- Quincy --> | |
| <div class="map-location phase-2" style="top: 45%; left: 15%;" data-name="Quincy" data-phase="2" data-type="rural"> | |
| </div> | |
| <!-- Carbondale --> | |
| <div class="map-location phase-3" style="top: 80%; left: 40%;" data-name="Carbondale" data-phase="3" data-type="rural"> | |
| </div> | |
| <!-- Effingham --> | |
| <div class="map-location phase-3" style="top: 65%; left: 60%;" data-name="Effingham" data-phase="3" data-type="highway"> | |
| </div> | |
| <!-- Galesburg --> | |
| <div class="map-location phase-3" style="top: 25%; left: 25%;" data-name="Galesburg" data-phase="3" data-type="rural"> | |
| </div> | |
| <!-- Mt. Vernon --> | |
| <div class="map-location phase-3" style="top: 70%; left: 50%;" data-name="Mt. Vernon" data-phase="3" data-type="highway"> | |
| </div> | |
| <!-- I-55 Corridor --> | |
| <div class="map-location phase-2" style="top: 40%; left: 50%;" data-name="I-55 Corridor Hub" data-phase="2" data-type="highway"> | |
| </div> | |
| <div class="location-tooltip"></div> | |
| <div class="map-overlay demographics"></div> | |
| <div class="map-overlay ev-adoption"></div> | |
| </div> | |
| <div class="map-legend"> | |
| <div class="legend-item"> | |
| <div class="legend-color phase-1"></div> | |
| <span>Phase 1 (2025-2026)</span> | |
| </div> | |
| <div class="legend-item"> | |
| <div class="legend-color phase-2"></div> | |
| <span>Phase 2 (2026-2027)</span> | |
| </div> | |
| <div class="legend-item"> | |
| <div class="legend-color phase-3"></div> | |
| <span>Phase 3 (2027-2028)</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="map-stats"> | |
| <div class="stat-card"> | |
| <h4>Total Planned Hubs</h4> | |
| <div class="stat-value">15</div> | |
| <div class="stat-description">Across urban, suburban, and rural areas</div> | |
| </div> | |
| <div class="stat-card"> | |
| <h4>Population Coverage</h4> | |
| <div class="stat-value">85%</div> | |
| <div class="stat-description">Of Illinois residents within 30 miles of a hub</div> | |
| </div> | |
| <div class="stat-card"> | |
| <h4>Total Charging Ports</h4> | |
| <div class="stat-value">120</div> | |
| <div class="stat-description">Including 80 DC fast chargers and 40 Level 2</div> | |
| </div> | |
| <div class="stat-card"> | |
| <h4>Projected Annual Usage</h4> | |
| <div class="stat-value">1.2M</div> | |
| <div class="stat-description">Charging sessions per year at full deployment</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="map-footer"> | |
| <div class="map-actions"> | |
| <button id="reset-btn">Reset Filters</button> | |
| <button id="download-btn" class="primary">Download Deployment Plan</button> | |
| </div> | |
| <div class="map-info"> | |
| Last Updated: June 1, 2025 | Data Source: Unity Fleet Planning Division | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="component-features"> | |
| <h2>Key Features</h2> | |
| <ul class="features-list"> | |
| <li>Interactive map of Illinois showing all planned charging hub locations</li> | |
| <li>Color-coded visualization of the three-phase deployment timeline</li> | |
| <li>Demographic data overlay showing population density and income distribution</li> | |
| <li>EV adoption projection layer highlighting areas of expected growth</li> | |
| <li>Filtering options by deployment phase and hub type</li> | |
| <li>Detailed information for each location including specifications and timeline</li> | |
| <li>Coverage statistics showing population access and charging capacity</li> | |
| </ul> | |
| </div> | |
| <a href="../index.html#mvp-showcase" class="back-to-home"> | |
| <i class="fas fa-arrow-left"></i> Back to MVP Showcase | |
| </a> | |
| </main> | |
| <footer> | |
| <div class="container"> | |
| <div class="footer-content"> | |
| <div class="footer-logo"> | |
| <div class="logo">UNITY FLEET</div> | |
| <p>Revolutionizing electric vehicle infrastructure across Illinois</p> | |
| </div> | |
| <div class="footer-links"> | |
| <div class="link-column"> | |
| <h4>Navigation</h4> | |
| <a href="../index.html#what-is-the-link">What is The Link</a> | |
| <a href="../index.html#subscription-tiers">Subscription Tiers</a> | |
| <a href="../index.html#impact-equity">Impact & Equity</a> | |
| <a href="../index.html#tokenization">ChainLink Tokenization</a> | |
| <a href="../index.html#rural-plan">Rural Revitalization</a> | |
| <a href="../index.html#mvp-showcase">MVP Showcase</a> | |
| </div> | |
| <div class="link-column"> | |
| <h4>Contact</h4> | |
| <a href="mailto:info@unityfleet.com">info@unityfleet.com</a> | |
| <a href="tel:+12175551234">+1 (217) 555-1234</a> | |
| <p>2457 E Eldorado St<br>Decatur, IL 62521</p> | |
| </div> | |
| <div class="link-column"> | |
| <h4>Legal</h4> | |
| <a href="#">Privacy Policy</a> | |
| <a href="#">Terms of Service</a> | |
| <a href="#">Accessibility</a> | |
| </div> | |
| </div> | |
| <div class="footer-social"> | |
| <a href="#" class="social-icon"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="social-icon"><i class="fab fa-linkedin"></i></a> | |
| <a href="#" class="social-icon"><i class="fab fa-facebook"></i></a> | |
| <a href="#" class="social-icon"><i class="fab fa-instagram"></i></a> | |
| </div> | |
| </div> | |
| <div class="footer-bottom"> | |
| <p>© 2025 Unity Fleet LLC. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile navigation toggle | |
| document.querySelector('.mobile-nav-toggle').addEventListener('click', function() { | |
| document.querySelector('.nav-links').classList.toggle('active'); | |
| this.innerHTML = document.querySelector('.nav-links').classList.contains('active') | |
| ? '<i class="fas fa-times"></i>' | |
| : '<i class="fas fa-bars"></i>'; | |
| }); | |
| // Deployment map interactivity | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const mapLocations = document.querySelectorAll('.map-location'); | |
| const tooltip = document.querySelector('.location-tooltip'); | |
| const overlayButtons = document.querySelectorAll('.map-control-btn'); | |
| const overlays = document.querySelectorAll('.map-overlay'); | |
| const phaseFilters = document.querySelectorAll('.filter-option[data-phase]'); | |
| const typeFilters = document.querySelectorAll('.filter-option[data-type]'); | |
| const resetButton = document.getElementById('reset-btn'); | |
| // Location hover effects | |
| mapLocations.forEach(location => { | |
| location.addEventListener('mouseenter', function(e) { | |
| const name = this.getAttribute('data-name'); | |
| const phase = this.getAttribute('data-phase'); | |
| const type = this.getAttribute('data-type'); | |
| let phaseText = ''; | |
| if (phase === '1') phaseText = 'Phase 1 (2025-2026)'; | |
| else if (phase === '2') phaseText = 'Phase 2 (2026-2027)'; | |
| else if (phase === '3') phaseText = 'Phase 3 (2027-2028)'; | |
| let typeText = ''; | |
| if (type === 'urban') typeText = 'Urban Hub'; | |
| else if (type === 'suburban') typeText = 'Suburban Hub'; | |
| else if (type === 'rural') typeText = 'Rural Hub'; | |
| else if (type === 'highway') typeText = 'Highway Corridor Hub'; | |
| tooltip.innerHTML = ` | |
| <h4>${name}</h4> | |
| <p>${phaseText}</p> | |
| <p>${typeText}</p> | |
| <p>8 Charging Stations</p> | |
| `; | |
| const rect = this.getBoundingClientRect(); | |
| const mapRect = document.querySelector('.map-visualization').getBoundingClientRect(); | |
| tooltip.style.left = (e.clientX - mapRect.left + 20) + 'px'; | |
| tooltip.style.top = (e.clientY - mapRect.top - 20) + 'px'; | |
| tooltip.style.opacity = '1'; | |
| }); | |
| location.addEventListener('mousemove', function(e) { | |
| const mapRect = document.querySelector('.map-visualization').getBoundingClientRect(); | |
| tooltip.style.left = (e.clientX - mapRect.left + 20) + 'px'; | |
| tooltip.style.top = (e.clientY - mapRect.top - 20) + 'px'; | |
| }); | |
| location.addEventListener('mouseleave', function() { | |
| tooltip.style.opacity = '0'; | |
| }); | |
| }); | |
| // Map overlay controls | |
| overlayButtons.forEach(button => { | |
| button.addEventListener('click', function() { | |
| // Remove active class from all buttons | |
| overlayButtons.forEach(btn => btn.classList.remove('active')); | |
| // Add active class to clicked button | |
| this.classList.add('active'); | |
| // Hide all overlays | |
| overlays.forEach(overlay => overlay.style.opacity = '0'); | |
| // Show selected overlay | |
| const overlayType = this.getAttribute('data-overlay'); | |
| if (overlayType !== 'none') { | |
| document.querySelector(`.map-overlay.${overlayType}`).style.opacity = '0.7'; | |
| } | |
| }); | |
| }); | |
| // Phase filters | |
| phaseFilters.forEach(filter => { | |
| filter.addEventListener('click', function() { | |
| // Remove active class from all phase filters | |
| phaseFilters.forEach(f => f.classList.remove('active')); | |
| // Add active class to clicked filter | |
| this.classList.add('active'); | |
| // Filter locations | |
| filterLocations(); | |
| }); | |
| }); | |
| // Type filters | |
| typeFilters.forEach(filter => { | |
| filter.addEventListener('click', function() { | |
| // Remove active class from all type filters | |
| typeFilters.forEach(f => f.classList.remove('active')); | |
| // Add active class to clicked filter | |
| this.classList.add('active'); | |
| // Filter locations | |
| filterLocations(); | |
| }); | |
| }); | |
| // Reset filters | |
| resetButton.addEventListener('click', function() { | |
| // Reset phase filters | |
| phaseFilters.forEach(f => f.classList.remove('active')); | |
| document.querySelector('.filter-option[data-phase="all"]').classList.add('active'); | |
| // Reset type filters | |
| typeFilters.forEach(f => f.classList.remove('active')); | |
| document.querySelector('.filter-option[data-type="all"]').classList.add('active'); | |
| // Show all locations | |
| mapLocations.forEach(location => { | |
| location.style.display = 'block'; | |
| }); | |
| // Reset overlays | |
| overlayButtons.forEach(btn => btn.classList.remove('active')); | |
| document.querySelector('.map-control-btn[data-overlay="none"]').classList.add('active'); | |
| overlays.forEach(overlay => overlay.style.opacity = '0'); | |
| }); | |
| // Filter locations based on selected filters | |
| function filterLocations() { | |
| const selectedPhase = document.querySelector('.filter-option[data-phase].active').getAttribute('data-phase'); | |
| const selectedType = document.querySelector('.filter-option[data-type].active').getAttribute('data-type'); | |
| mapLocations.forEach(location => { | |
| const locationPhase = location.getAttribute('data-phase'); | |
| const locationType = location.getAttribute('data-type'); | |
| const phaseMatch = selectedPhase === 'all' || locationPhase === selectedPhase; | |
| const typeMatch = selectedType === 'all' || locationType === selectedType; | |
| if (phaseMatch && typeMatch) { | |
| location.style.display = 'block'; | |
| } else { | |
| location.style.display = 'none'; | |
| } | |
| }); | |
| } | |
| // Download button action | |
| document.getElementById('download-btn').addEventListener('click', function() { | |
| alert('Deployment plan PDF would download here in the production version.'); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |