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 - Energy Simulation</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); | |
| } | |
| /* Energy Simulation specific styles */ | |
| .energy-simulation-container { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| padding: 1rem; | |
| } | |
| .simulation-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; | |
| } | |
| .simulation-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; | |
| } | |
| .simulation-header h2 { | |
| margin: 0; | |
| font-size: 1.5rem; | |
| } | |
| .simulation-time { | |
| font-size: 1rem; | |
| opacity: 0.8; | |
| } | |
| .simulation-body { | |
| padding: 2rem; | |
| } | |
| .simulation-controls { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 1rem; | |
| margin-bottom: 2rem; | |
| justify-content: center; | |
| } | |
| .control-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; | |
| } | |
| .control-group h3 { | |
| margin-top: 0; | |
| margin-bottom: 1rem; | |
| font-size: 1.1rem; | |
| color: var(--accent-color-1); | |
| } | |
| .control-item { | |
| margin-bottom: 1rem; | |
| } | |
| .control-item label { | |
| display: block; | |
| margin-bottom: 0.5rem; | |
| font-size: 0.9rem; | |
| opacity: 0.8; | |
| } | |
| .control-item input[type="range"] { | |
| width: 100%; | |
| background: rgba(255, 255, 255, 0.1); | |
| height: 6px; | |
| border-radius: 3px; | |
| -webkit-appearance: none; | |
| } | |
| .control-item input[type="range"]::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 50%; | |
| background: var(--accent-color-1); | |
| cursor: pointer; | |
| } | |
| .control-item .value-display { | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 0.8rem; | |
| margin-top: 0.5rem; | |
| } | |
| .control-item select { | |
| width: 100%; | |
| padding: 0.5rem; | |
| background: rgba(255, 255, 255, 0.1); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| border-radius: 4px; | |
| color: white; | |
| } | |
| .simulation-visualization { | |
| background: rgba(0, 0, 0, 0.3); | |
| border-radius: 12px; | |
| padding: 2rem; | |
| position: relative; | |
| height: 400px; | |
| overflow: hidden; | |
| } | |
| .energy-flow-diagram { | |
| position: relative; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .energy-node { | |
| position: absolute; | |
| width: 80px; | |
| height: 80px; | |
| border-radius: 50%; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| text-align: center; | |
| font-size: 0.8rem; | |
| background: rgba(255, 255, 255, 0.1); | |
| border: 2px solid rgba(255, 255, 255, 0.2); | |
| transition: all 0.3s ease; | |
| } | |
| .energy-node:hover { | |
| transform: scale(1.1); | |
| z-index: 10; | |
| } | |
| .energy-node .icon { | |
| font-size: 1.5rem; | |
| margin-bottom: 0.3rem; | |
| } | |
| .energy-node .label { | |
| font-weight: bold; | |
| } | |
| .energy-node .value { | |
| font-size: 0.7rem; | |
| opacity: 0.8; | |
| } | |
| .solar-node { | |
| top: 20px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| background: rgba(255, 193, 7, 0.2); | |
| border-color: #FFC107; | |
| } | |
| .solar-node .icon { | |
| color: #FFC107; | |
| } | |
| .battery-node { | |
| top: 50%; | |
| left: 20%; | |
| transform: translateY(-50%); | |
| background: rgba(0, 224, 255, 0.2); | |
| border-color: var(--accent-color-1); | |
| } | |
| .battery-node .icon { | |
| color: var(--accent-color-1); | |
| } | |
| .grid-node { | |
| top: 50%; | |
| right: 20%; | |
| transform: translateY(-50%); | |
| background: rgba(156, 39, 176, 0.2); | |
| border-color: #9C27B0; | |
| } | |
| .grid-node .icon { | |
| color: #9C27B0; | |
| } | |
| .charging-node { | |
| bottom: 20px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| background: rgba(76, 175, 80, 0.2); | |
| border-color: #4CAF50; | |
| } | |
| .charging-node .icon { | |
| color: #4CAF50; | |
| } | |
| .energy-flow { | |
| position: absolute; | |
| background: linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1)); | |
| height: 3px; | |
| transform-origin: left center; | |
| animation: flowPulse 2s infinite; | |
| } | |
| @keyframes flowPulse { | |
| 0% { | |
| opacity: 0.3; | |
| } | |
| 50% { | |
| opacity: 1; | |
| } | |
| 100% { | |
| opacity: 0.3; | |
| } | |
| } | |
| .solar-to-battery { | |
| top: 70px; | |
| left: 50%; | |
| width: 150px; | |
| transform: rotate(135deg); | |
| background: linear-gradient(90deg, rgba(255, 193, 7, 0.5), rgba(0, 224, 255, 0.5)); | |
| } | |
| .solar-to-charging { | |
| top: 100px; | |
| left: 50%; | |
| height: 200px; | |
| width: 3px; | |
| transform: none; | |
| background: linear-gradient(180deg, rgba(255, 193, 7, 0.5), rgba(76, 175, 80, 0.5)); | |
| } | |
| .battery-to-charging { | |
| bottom: 150px; | |
| left: 25%; | |
| width: 150px; | |
| transform: rotate(45deg); | |
| background: linear-gradient(90deg, rgba(0, 224, 255, 0.5), rgba(76, 175, 80, 0.5)); | |
| } | |
| .grid-to-charging { | |
| bottom: 150px; | |
| right: 25%; | |
| width: 150px; | |
| transform: rotate(-45deg); | |
| background: linear-gradient(90deg, rgba(156, 39, 176, 0.5), rgba(76, 175, 80, 0.5)); | |
| } | |
| .grid-to-battery { | |
| top: 50%; | |
| left: 30%; | |
| width: 40%; | |
| background: linear-gradient(90deg, rgba(0, 224, 255, 0.5), rgba(156, 39, 176, 0.5)); | |
| } | |
| .flow-particle { | |
| position: absolute; | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: white; | |
| animation: flowMove 3s linear infinite; | |
| } | |
| @keyframes flowMove { | |
| 0% { | |
| left: 0; | |
| opacity: 0; | |
| } | |
| 10% { | |
| opacity: 1; | |
| } | |
| 90% { | |
| opacity: 1; | |
| } | |
| 100% { | |
| left: calc(100% - 8px); | |
| opacity: 0; | |
| } | |
| } | |
| .simulation-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-change { | |
| font-size: 0.8rem; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .stat-change.positive { | |
| color: #4CAF50; | |
| } | |
| .stat-change.negative { | |
| color: #F44336; | |
| } | |
| .stat-change i { | |
| margin-right: 0.3rem; | |
| } | |
| .simulation-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); | |
| } | |
| .simulation-actions { | |
| display: flex; | |
| gap: 1rem; | |
| } | |
| .simulation-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; | |
| } | |
| .simulation-actions button:hover { | |
| background: rgba(0, 224, 255, 0.1); | |
| } | |
| .simulation-actions button.primary { | |
| background: linear-gradient(90deg, var(--accent-color-1), var(--accent-color-2)); | |
| color: #000; | |
| border: none; | |
| } | |
| .simulation-actions button.primary:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); | |
| } | |
| .simulation-status { | |
| 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>ENERGY SIMULATION</h1> | |
| <p>Visualize how our integrated solar and battery systems optimize energy flow, reduce emissions, and create a sustainable charging ecosystem.</p> | |
| </div> | |
| <div class="component-content"> | |
| <div class="energy-simulation-container"> | |
| <div class="simulation-interface"> | |
| <div class="simulation-header"> | |
| <h2>The Link Energy Simulation</h2> | |
| <div class="simulation-time"> | |
| <span id="sim-time">12:30 PM</span> | <span id="sim-date">June 15, 2025</span> | |
| </div> | |
| </div> | |
| <div class="simulation-body"> | |
| <div class="simulation-controls"> | |
| <div class="control-group"> | |
| <h3>Environmental Factors</h3> | |
| <div class="control-item"> | |
| <label for="solar-intensity">Solar Intensity</label> | |
| <input type="range" id="solar-intensity" min="0" max="100" value="75"> | |
| <div class="value-display"> | |
| <span>Low</span> | |
| <span id="solar-value">75%</span> | |
| <span>High</span> | |
| </div> | |
| </div> | |
| <div class="control-item"> | |
| <label for="time-of-day">Time of Day</label> | |
| <select id="time-of-day"> | |
| <option value="morning">Morning (8 AM)</option> | |
| <option value="noon" selected>Noon (12 PM)</option> | |
| <option value="afternoon">Afternoon (4 PM)</option> | |
| <option value="evening">Evening (8 PM)</option> | |
| <option value="night">Night (12 AM)</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="control-group"> | |
| <h3>Charging Demand</h3> | |
| <div class="control-item"> | |
| <label for="station-usage">Station Usage</label> | |
| <input type="range" id="station-usage" min="0" max="100" value="60"> | |
| <div class="value-display"> | |
| <span>Low</span> | |
| <span id="usage-value">60%</span> | |
| <span>High</span> | |
| </div> | |
| </div> | |
| <div class="control-item"> | |
| <label for="charging-speed">Charging Speed</label> | |
| <select id="charging-speed"> | |
| <option value="slow">Level 2 (19.2 kW)</option> | |
| <option value="medium" selected>DC Fast (150 kW)</option> | |
| <option value="fast">Ultra Fast (350 kW)</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="control-group"> | |
| <h3>Storage Settings</h3> | |
| <div class="control-item"> | |
| <label for="battery-capacity">Battery Capacity</label> | |
| <input type="range" id="battery-capacity" min="0" max="100" value="80"> | |
| <div class="value-display"> | |
| <span>0%</span> | |
| <span id="battery-value">80%</span> | |
| <span>100%</span> | |
| </div> | |
| </div> | |
| <div class="control-item"> | |
| <label for="grid-reliance">Grid Reliance</label> | |
| <input type="range" id="grid-reliance" min="0" max="100" value="25"> | |
| <div class="value-display"> | |
| <span>Low</span> | |
| <span id="grid-value">25%</span> | |
| <span>High</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="simulation-visualization"> | |
| <div class="energy-flow-diagram"> | |
| <div class="energy-node solar-node"> | |
| <div class="icon"><i class="fas fa-solar-panel"></i></div> | |
| <div class="label">Solar Array</div> | |
| <div class="value">75 kW</div> | |
| </div> | |
| <div class="energy-node battery-node"> | |
| <div class="icon"><i class="fas fa-battery-three-quarters"></i></div> | |
| <div class="label">Battery</div> | |
| <div class="value">80% | 240 kWh</div> | |
| </div> | |
| <div class="energy-node grid-node"> | |
| <div class="icon"><i class="fas fa-plug"></i></div> | |
| <div class="label">Grid</div> | |
| <div class="value">25 kW</div> | |
| </div> | |
| <div class="energy-node charging-node"> | |
| <div class="icon"><i class="fas fa-charging-station"></i></div> | |
| <div class="label">Charging</div> | |
| <div class="value">90 kW</div> | |
| </div> | |
| <div class="energy-flow solar-to-battery"> | |
| <div class="flow-particle" style="animation-delay: 0s;"></div> | |
| <div class="flow-particle" style="animation-delay: 1s;"></div> | |
| <div class="flow-particle" style="animation-delay: 2s;"></div> | |
| </div> | |
| <div class="energy-flow solar-to-charging"> | |
| <div class="flow-particle" style="animation-delay: 0.5s;"></div> | |
| <div class="flow-particle" style="animation-delay: 1.5s;"></div> | |
| <div class="flow-particle" style="animation-delay: 2.5s;"></div> | |
| </div> | |
| <div class="energy-flow battery-to-charging"> | |
| <div class="flow-particle" style="animation-delay: 0.2s;"></div> | |
| <div class="flow-particle" style="animation-delay: 1.2s;"></div> | |
| <div class="flow-particle" style="animation-delay: 2.2s;"></div> | |
| </div> | |
| <div class="energy-flow grid-to-charging"> | |
| <div class="flow-particle" style="animation-delay: 0.7s;"></div> | |
| <div class="flow-particle" style="animation-delay: 1.7s;"></div> | |
| <div class="flow-particle" style="animation-delay: 2.7s;"></div> | |
| </div> | |
| <div class="energy-flow grid-to-battery"> | |
| <div class="flow-particle" style="animation-delay: 0.3s;"></div> | |
| <div class="flow-particle" style="animation-delay: 1.3s;"></div> | |
| <div class="flow-particle" style="animation-delay: 2.3s;"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="simulation-stats"> | |
| <div class="stat-card"> | |
| <h4>Renewable Usage</h4> | |
| <div class="stat-value">75%</div> | |
| <div class="stat-change positive"> | |
| <i class="fas fa-arrow-up"></i> 12% from grid-only | |
| </div> | |
| </div> | |
| <div class="stat-card"> | |
| <h4>CO₂ Reduction</h4> | |
| <div class="stat-value">68 kg</div> | |
| <div class="stat-change positive"> | |
| <i class="fas fa-arrow-up"></i> 85% from ICE vehicles | |
| </div> | |
| </div> | |
| <div class="stat-card"> | |
| <h4>Operating Cost</h4> | |
| <div class="stat-value">$0.12/kWh</div> | |
| <div class="stat-change negative"> | |
| <i class="fas fa-arrow-down"></i> 40% from grid-only | |
| </div> | |
| </div> | |
| <div class="stat-card"> | |
| <h4>Grid Demand</h4> | |
| <div class="stat-value">25 kW</div> | |
| <div class="stat-change negative"> | |
| <i class="fas fa-arrow-down"></i> 75% from no solar | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="simulation-footer"> | |
| <div class="simulation-actions"> | |
| <button id="reset-btn">Reset Simulation</button> | |
| <button id="optimize-btn" class="primary">Optimize Energy Flow</button> | |
| </div> | |
| <div class="simulation-status"> | |
| System Status: Optimal | Last Updated: <span id="update-time">Just now</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="component-features"> | |
| <h2>Key Features</h2> | |
| <ul class="features-list"> | |
| <li>Real-time visualization of energy flows between solar, battery, grid, and charging stations</li> | |
| <li>Interactive controls to simulate different environmental conditions and usage scenarios</li> | |
| <li>Automatic optimization algorithms to maximize renewable energy usage</li> | |
| <li>Detailed statistics on CO₂ reduction, cost savings, and grid impact</li> | |
| <li>Time-of-day simulation to model energy management across 24-hour cycles</li> | |
| <li>Battery storage management with intelligent charge/discharge algorithms</li> | |
| <li>Grid interaction modeling with peak shaving and demand response capabilities</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>'; | |
| }); | |
| // Energy simulation interactivity | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Initialize sliders | |
| const solarSlider = document.getElementById('solar-intensity'); | |
| const usageSlider = document.getElementById('station-usage'); | |
| const batterySlider = document.getElementById('battery-capacity'); | |
| const gridSlider = document.getElementById('grid-reliance'); | |
| const solarValue = document.getElementById('solar-value'); | |
| const usageValue = document.getElementById('usage-value'); | |
| const batteryValue = document.getElementById('battery-value'); | |
| const gridValue = document.getElementById('grid-value'); | |
| // Update values on slider change | |
| solarSlider.addEventListener('input', function() { | |
| solarValue.textContent = this.value + '%'; | |
| updateSimulation(); | |
| }); | |
| usageSlider.addEventListener('input', function() { | |
| usageValue.textContent = this.value + '%'; | |
| updateSimulation(); | |
| }); | |
| batterySlider.addEventListener('input', function() { | |
| batteryValue.textContent = this.value + '%'; | |
| updateSimulation(); | |
| }); | |
| gridSlider.addEventListener('input', function() { | |
| gridValue.textContent = this.value + '%'; | |
| updateSimulation(); | |
| }); | |
| // Time of day and charging speed selectors | |
| document.getElementById('time-of-day').addEventListener('change', updateSimulation); | |
| document.getElementById('charging-speed').addEventListener('change', updateSimulation); | |
| // Button actions | |
| document.getElementById('reset-btn').addEventListener('click', resetSimulation); | |
| document.getElementById('optimize-btn').addEventListener('click', optimizeSimulation); | |
| // Update simulation based on current settings | |
| function updateSimulation() { | |
| const solarIntensity = parseInt(solarSlider.value); | |
| const stationUsage = parseInt(usageSlider.value); | |
| const batteryCapacity = parseInt(batterySlider.value); | |
| const gridReliance = parseInt(gridSlider.value); | |
| const timeOfDay = document.getElementById('time-of-day').value; | |
| const chargingSpeed = document.getElementById('charging-speed').value; | |
| // Update node values | |
| document.querySelector('.solar-node .value').textContent = Math.round(solarIntensity * 1.2) + ' kW'; | |
| document.querySelector('.battery-node .value').textContent = batteryCapacity + '% | ' + Math.round(batteryCapacity * 3) + ' kWh'; | |
| document.querySelector('.grid-node .value').textContent = Math.round(gridReliance * 1.2) + ' kW'; | |
| let chargingDemand = 0; | |
| if (chargingSpeed === 'slow') chargingDemand = stationUsage * 0.2; | |
| else if (chargingSpeed === 'medium') chargingDemand = stationUsage * 0.6; | |
| else chargingDemand = stationUsage * 1.5; | |
| document.querySelector('.charging-node .value').textContent = Math.round(chargingDemand) + ' kW'; | |
| // Update stats | |
| const renewablePercentage = Math.round(solarIntensity * (100 - gridReliance) / 100); | |
| document.querySelector('.stat-card:nth-child(1) .stat-value').textContent = renewablePercentage + '%'; | |
| const co2Reduction = Math.round(renewablePercentage * 0.9); | |
| document.querySelector('.stat-card:nth-child(2) .stat-value').textContent = co2Reduction + ' kg'; | |
| const operatingCost = (0.2 - (renewablePercentage * 0.001)).toFixed(2); | |
| document.querySelector('.stat-card:nth-child(3) .stat-value').textContent = '$' + operatingCost + '/kWh'; | |
| document.querySelector('.stat-card:nth-child(4) .stat-value').textContent = Math.round(gridReliance * 1.2) + ' kW'; | |
| // Update time display based on selection | |
| let timeDisplay = ''; | |
| switch(timeOfDay) { | |
| case 'morning': timeDisplay = '8:00 AM'; break; | |
| case 'noon': timeDisplay = '12:00 PM'; break; | |
| case 'afternoon': timeDisplay = '4:00 PM'; break; | |
| case 'evening': timeDisplay = '8:00 PM'; break; | |
| case 'night': timeDisplay = '12:00 AM'; break; | |
| } | |
| document.getElementById('sim-time').textContent = timeDisplay; | |
| // Update flow animation speeds based on energy levels | |
| const flows = document.querySelectorAll('.energy-flow'); | |
| flows.forEach(flow => { | |
| const particles = flow.querySelectorAll('.flow-particle'); | |
| particles.forEach(particle => { | |
| let speed = '3s'; | |
| if (flow.classList.contains('solar-to-battery')) { | |
| speed = (4 - (solarIntensity / 33)) + 's'; | |
| } else if (flow.classList.contains('solar-to-charging')) { | |
| speed = (4 - (solarIntensity / 33)) + 's'; | |
| } else if (flow.classList.contains('battery-to-charging')) { | |
| speed = (4 - (batteryCapacity / 33)) + 's'; | |
| } else if (flow.classList.contains('grid-to-charging')) { | |
| speed = (4 - (gridReliance / 33)) + 's'; | |
| } else if (flow.classList.contains('grid-to-battery')) { | |
| speed = (4 - (gridReliance / 33)) + 's'; | |
| } | |
| particle.style.animationDuration = speed; | |
| }); | |
| }); | |
| // Update last updated time | |
| document.getElementById('update-time').textContent = 'Just now'; | |
| } | |
| // Reset simulation to default values | |
| function resetSimulation() { | |
| solarSlider.value = 75; | |
| usageSlider.value = 60; | |
| batterySlider.value = 80; | |
| gridSlider.value = 25; | |
| solarValue.textContent = '75%'; | |
| usageValue.textContent = '60%'; | |
| batteryValue.textContent = '80%'; | |
| gridValue.textContent = '25%'; | |
| document.getElementById('time-of-day').value = 'noon'; | |
| document.getElementById('charging-speed').value = 'medium'; | |
| updateSimulation(); | |
| } | |
| // Optimize energy flow based on current conditions | |
| function optimizeSimulation() { | |
| const timeOfDay = document.getElementById('time-of-day').value; | |
| const stationUsage = parseInt(usageSlider.value); | |
| // Optimization logic based on time of day | |
| if (timeOfDay === 'morning' || timeOfDay === 'noon') { | |
| // Maximize solar usage during daylight hours | |
| solarSlider.value = 90; | |
| solarValue.textContent = '90%'; | |
| gridSlider.value = 10; | |
| gridValue.textContent = '10%'; | |
| } else if (timeOfDay === 'afternoon') { | |
| // Balance solar and battery in afternoon | |
| solarSlider.value = 70; | |
| solarValue.textContent = '70%'; | |
| batterySlider.value = 90; | |
| batteryValue.textContent = '90%'; | |
| gridSlider.value = 15; | |
| gridValue.textContent = '15%'; | |
| } else { | |
| // Rely on battery at night with minimal grid | |
| batterySlider.value = 95; | |
| batteryValue.textContent = '95%'; | |
| solarSlider.value = 0; | |
| solarValue.textContent = '0%'; | |
| gridSlider.value = 30; | |
| gridValue.textContent = '30%'; | |
| } | |
| // Adjust based on station usage | |
| if (stationUsage > 80) { | |
| // High demand needs more grid support | |
| gridSlider.value = parseInt(gridSlider.value) + 15; | |
| gridValue.textContent = gridSlider.value + '%'; | |
| } | |
| updateSimulation(); | |
| // Show optimization message | |
| document.querySelector('.simulation-status').textContent = 'System Status: Optimized | Last Updated: Just now'; | |
| } | |
| // Initialize simulation | |
| updateSimulation(); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |