Spaces:
Running
Running
| /* Energy Simulation Styles */ | |
| .energy-simulation { | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| background-color: #0B0B0F; | |
| color: #ffffff; | |
| min-height: 100vh; | |
| position: relative; | |
| } | |
| /* Loading Screen */ | |
| .energy-simulation.loading { | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| } | |
| .loading-logo { | |
| width: 150px; | |
| height: 150px; | |
| margin-bottom: 20px; | |
| position: relative; | |
| } | |
| .loading-logo img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: contain; | |
| } | |
| .loading-pulse { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| border-radius: 50%; | |
| border: 2px solid #00E0FF; | |
| animation: pulse 1.5s infinite ease-in-out; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| transform: scale(0.95); | |
| opacity: 1; | |
| } | |
| 70% { | |
| transform: scale(1.2); | |
| opacity: 0; | |
| } | |
| 100% { | |
| transform: scale(0.95); | |
| opacity: 0; | |
| } | |
| } | |
| /* Header */ | |
| .simulation-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 20px; | |
| background-color: rgba(20, 20, 30, 0.8); | |
| backdrop-filter: blur(10px); | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| flex-wrap: wrap; | |
| } | |
| .simulation-title { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .simulation-title h1 { | |
| margin: 0; | |
| font-size: 28px; | |
| font-weight: 700; | |
| background: linear-gradient(90deg, #00E0FF, #35F2DB); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| letter-spacing: 1px; | |
| } | |
| .simulation-subtitle { | |
| font-size: 14px; | |
| opacity: 0.7; | |
| } | |
| .simulation-controls { | |
| display: flex; | |
| align-items: center; | |
| gap: 20px; | |
| flex-wrap: wrap; | |
| } | |
| .time-display { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| background-color: rgba(255, 255, 255, 0.05); | |
| padding: 8px 12px; | |
| border-radius: 8px; | |
| border: 1px solid rgba(0, 224, 255, 0.2); | |
| } | |
| .time-label { | |
| font-size: 14px; | |
| opacity: 0.7; | |
| } | |
| .time-value { | |
| font-size: 16px; | |
| font-weight: 600; | |
| color: #00E0FF; | |
| } | |
| .control-buttons { | |
| display: flex; | |
| gap: 10px; | |
| } | |
| .control-button { | |
| background-color: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(0, 224, 255, 0.2); | |
| border-radius: 8px; | |
| padding: 8px 12px; | |
| color: white; | |
| font-size: 14px; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .control-button:hover { | |
| background-color: rgba(0, 224, 255, 0.1); | |
| } | |
| .control-button.active { | |
| background-color: rgba(0, 224, 255, 0.2); | |
| border-color: #00E0FF; | |
| color: #00E0FF; | |
| } | |
| .speed-control { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .speed-label { | |
| font-size: 14px; | |
| opacity: 0.7; | |
| } | |
| .speed-buttons { | |
| display: flex; | |
| gap: 2px; | |
| } | |
| .speed-button { | |
| background-color: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 4px; | |
| padding: 4px 8px; | |
| color: white; | |
| font-size: 12px; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .speed-button:hover { | |
| background-color: rgba(0, 224, 255, 0.1); | |
| } | |
| .speed-button.active { | |
| background-color: rgba(0, 224, 255, 0.2); | |
| border-color: #00E0FF; | |
| color: #00E0FF; | |
| } | |
| /* Navigation */ | |
| .simulation-navigation { | |
| display: flex; | |
| gap: 2px; | |
| background-color: rgba(20, 20, 30, 0.5); | |
| padding: 0 20px; | |
| overflow-x: auto; | |
| scrollbar-width: none; | |
| } | |
| .simulation-navigation::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .nav-button { | |
| padding: 16px 20px; | |
| background: transparent; | |
| border: none; | |
| color: white; | |
| font-size: 16px; | |
| cursor: pointer; | |
| position: relative; | |
| white-space: nowrap; | |
| } | |
| .nav-button.active { | |
| color: #00E0FF; | |
| } | |
| .nav-button.active::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| height: 3px; | |
| background: linear-gradient(90deg, #00E0FF, #35F2DB); | |
| border-radius: 3px 3px 0 0; | |
| } | |
| /* Main Content */ | |
| .simulation-content { | |
| padding: 20px; | |
| min-height: calc(100vh - 200px); | |
| } | |
| /* Overview Tab */ | |
| .overview-tab { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 30px; | |
| } | |
| .energy-summary { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 20px; | |
| } | |
| .summary-card { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 16px; | |
| padding: 20px; | |
| border: 1px solid rgba(0, 224, 255, 0.1); | |
| } | |
| .summary-card h3 { | |
| margin-top: 0; | |
| margin-bottom: 16px; | |
| font-size: 18px; | |
| font-weight: 600; | |
| } | |
| .balance-metrics { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); | |
| gap: 16px; | |
| } | |
| .metric { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| } | |
| .metric-label { | |
| font-size: 14px; | |
| opacity: 0.7; | |
| } | |
| .metric-value { | |
| font-size: 18px; | |
| font-weight: 600; | |
| } | |
| .metric-value.positive { | |
| color: #35F2DB; | |
| } | |
| .metric-value.negative { | |
| color: #FF5555; | |
| } | |
| /* Energy Flow Diagram */ | |
| .energy-flow-diagram { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 16px; | |
| padding: 30px; | |
| border: 1px solid rgba(0, 224, 255, 0.1); | |
| display: flex; | |
| flex-direction: column; | |
| gap: 30px; | |
| position: relative; | |
| } | |
| .energy-sources { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 20px; | |
| } | |
| .energy-source { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| text-align: center; | |
| padding: 15px; | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 12px; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .energy-source.solar { | |
| border-color: rgba(255, 215, 0, 0.3); | |
| } | |
| .energy-source.grid { | |
| border-color: rgba(255, 85, 85, 0.3); | |
| } | |
| .source-icon { | |
| font-size: 24px; | |
| margin-bottom: 10px; | |
| } | |
| .source-label { | |
| font-size: 14px; | |
| opacity: 0.7; | |
| margin-bottom: 5px; | |
| } | |
| .source-value { | |
| font-size: 18px; | |
| font-weight: 600; | |
| } | |
| .energy-flows { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 20px; | |
| position: relative; | |
| height: 40px; | |
| } | |
| .flow { | |
| height: 10px; | |
| background: linear-gradient(90deg, #00E0FF, #35F2DB); | |
| border-radius: 5px; | |
| position: relative; | |
| animation: flowPulse 2s infinite; | |
| } | |
| @keyframes flowPulse { | |
| 0% { | |
| opacity: 0.7; | |
| } | |
| 50% { | |
| opacity: 1; | |
| } | |
| 100% { | |
| opacity: 0.7; | |
| } | |
| } | |
| .solar-flow { | |
| background: linear-gradient(90deg, #FFD700, #FFA500); | |
| } | |
| .grid-flow { | |
| background: linear-gradient(90deg, #FF5555, #FF8888); | |
| } | |
| .battery-flow { | |
| background: linear-gradient(90deg, #00E0FF, #35F2DB); | |
| } | |
| .energy-storage { | |
| align-self: center; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| text-align: center; | |
| padding: 20px; | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 12px; | |
| border: 1px solid rgba(0, 224, 255, 0.3); | |
| width: 200px; | |
| } | |
| .storage-icon { | |
| font-size: 24px; | |
| margin-bottom: 10px; | |
| } | |
| .storage-label { | |
| font-size: 14px; | |
| opacity: 0.7; | |
| margin-bottom: 5px; | |
| } | |
| .storage-value { | |
| font-size: 24px; | |
| font-weight: 600; | |
| color: #00E0FF; | |
| margin-bottom: 5px; | |
| } | |
| .storage-capacity { | |
| font-size: 12px; | |
| opacity: 0.7; | |
| } | |
| .energy-demand { | |
| align-self: center; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| text-align: center; | |
| padding: 20px; | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 12px; | |
| border: 1px solid rgba(53, 242, 219, 0.3); | |
| width: 200px; | |
| } | |
| .demand-icon { | |
| font-size: 24px; | |
| margin-bottom: 10px; | |
| } | |
| .demand-label { | |
| font-size: 14px; | |
| opacity: 0.7; | |
| margin-bottom: 5px; | |
| } | |
| .demand-value { | |
| font-size: 24px; | |
| font-weight: 600; | |
| color: #35F2DB; | |
| margin-bottom: 5px; | |
| } | |
| .demand-details { | |
| font-size: 12px; | |
| opacity: 0.7; | |
| } | |
| /* Optimization Summary */ | |
| .optimization-summary { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 16px; | |
| padding: 20px; | |
| border: 1px solid rgba(0, 224, 255, 0.1); | |
| } | |
| .optimization-summary h3 { | |
| margin-top: 0; | |
| margin-bottom: 16px; | |
| font-size: 18px; | |
| font-weight: 600; | |
| } | |
| .optimization-metrics { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 20px; | |
| } | |
| .metric-bar-container { | |
| height: 8px; | |
| background-color: rgba(255, 255, 255, 0.1); | |
| border-radius: 4px; | |
| overflow: hidden; | |
| margin-top: 8px; | |
| } | |
| .metric-bar { | |
| height: 100%; | |
| border-radius: 4px; | |
| transition: width 0.5s ease; | |
| } | |
| /* Gauge Component */ | |
| .gauge-container { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| margin-bottom: 10px; | |
| } | |
| .gauge { | |
| width: 150px; | |
| height: 150px; | |
| position: relative; | |
| } | |
| .gauge-body { | |
| width: 100%; | |
| height: 100%; | |
| border-radius: 50%; | |
| position: relative; | |
| overflow: hidden; | |
| background-color: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .gauge-fill { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| transform-origin: center bottom; | |
| transition: transform 1s ease; | |
| } | |
| .gauge-cover { | |
| position: absolute; | |
| top: 15%; | |
| left: 15%; | |
| width: 70%; | |
| height: 70%; | |
| background-color: #0B0B0F; | |
| border-radius: 50%; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .gauge-value { | |
| font-size: 24px; | |
| font-weight: 600; | |
| } | |
| .gauge-label { | |
| font-size: 12px; | |
| opacity: 0.7; | |
| } | |
| .gauge-max { | |
| font-size: 12px; | |
| opacity: 0.7; | |
| margin-top: 5px; | |
| } | |
| /* Bar Chart Component */ | |
| .bar-chart { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .bar-container { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .bar-label { | |
| width: 60px; | |
| font-size: 12px; | |
| text-align: right; | |
| } | |
| .bar-wrapper { | |
| flex: 1; | |
| height: 20px; | |
| background-color: rgba(255, 255, 255, 0.05); | |
| border-radius: 4px; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .bar { | |
| height: 100%; | |
| transition: width 0.5s ease; | |
| } | |
| .bar-value { | |
| position: absolute; | |
| right: 8px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| font-size: 12px; | |
| font-weight: 600; | |
| } | |
| /* Solar Tab */ | |
| .solar-tab { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 30px; | |
| } | |
| .solar-metrics { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 20px; | |
| } | |
| .metric-card { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 16px; | |
| padding: 20px; | |
| border: 1px solid rgba(0, 224, 255, 0.1); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .metric-card h3 { | |
| margin: 10px 0 0 0; | |
| font-size: 18px; | |
| font-weight: 600; | |
| text-align: center; | |
| } | |
| .daily-production { | |
| width: 100%; | |
| } | |
| .daily-production h3 { | |
| margin-top: 0; | |
| margin-bottom: 16px; | |
| font-size: 18px; | |
| font-weight: 600; | |
| text-align: left; | |
| } | |
| .solar-details { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 20px; | |
| } | |
| .detail-card { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 16px; | |
| padding: 20px; | |
| border: 1px solid rgba(0, 224, 255, 0.1); | |
| } | |
| .detail-card h3 { | |
| margin-top: 0; | |
| margin-bottom: 16px; | |
| font-size: 18px; | |
| font-weight: 600; | |
| } | |
| .detail-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); | |
| gap: 16px; | |
| } | |
| .detail-item { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| } | |
| .detail-label { | |
| font-size: 14px; | |
| opacity: 0.7; | |
| } | |
| .detail-value { | |
| font-size: 16px; | |
| font-weight: 600; | |
| } | |
| .weather-forecast { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 10px; | |
| } | |
| .weather-item { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| text-align: center; | |
| padding: 10px; | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 8px; | |
| } | |
| .weather-icon { | |
| font-size: 24px; | |
| margin-bottom: 5px; | |
| } | |
| .weather-day { | |
| font-size: 12px; | |
| opacity: 0.7; | |
| margin-bottom: 5px; | |
| } | |
| .weather-impact { | |
| font-size: 14px; | |
| font-weight: 600; | |
| } | |
| .weather-impact.positive { | |
| color: #35F2DB; | |
| } | |
| .weather-impact.neutral { | |
| color: #FFC107; | |
| } | |
| .weather-impact.negative { | |
| color: #FF5555; | |
| } | |
| /* Battery Tab */ | |
| .battery-tab { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 30px; | |
| } | |
| .battery-metrics { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 20px; | |
| } | |
| .battery-status { | |
| width: 100%; | |
| } | |
| .battery-status h3 { | |
| margin-top: 0; | |
| margin-bottom: 16px; | |
| font-size: 18px; | |
| font-weight: 600; | |
| } | |
| .status-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); | |
| gap: 16px; | |
| } | |
| .status-item { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| } | |
| .status-label { | |
| font-size: 14px; | |
| opacity: 0.7; | |
| } | |
| .status-value { | |
| font-size: 16px; | |
| font-weight: 600; | |
| } | |
| .status-value.positive { | |
| color: #35F2DB; | |
| } | |
| .status-value.negative { | |
| color: #FF5555; | |
| } | |
| .status-value.status-active { | |
| color: #35F2DB; | |
| } | |
| .status-value.status-stable { | |
| color: #35F2DB; | |
| } | |
| .battery-history { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 16px; | |
| padding: 20px; | |
| border: 1px solid rgba(0, 224, 255, 0.1); | |
| } | |
| .battery-history h3 { | |
| margin-top: 0; | |
| margin-bottom: 16px; | |
| font-size: 18px; | |
| font-weight: 600; | |
| } | |
| .battery-controls { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 16px; | |
| padding: 20px; | |
| border: 1px solid rgba(0, 224, 255, 0.1); | |
| } | |
| .battery-controls h3 { | |
| margin-top: 0; | |
| margin-bottom: 16px; | |
| font-size: 18px; | |
| font-weight: 600; | |
| } | |
| .control-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 20px; | |
| } | |
| .control-item { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .control-label { | |
| font-size: 14px; | |
| opacity: 0.7; | |
| } | |
| .control-slider-container { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .control-slider { | |
| flex: 1; | |
| height: 4px; | |
| -webkit-appearance: none; | |
| appearance: none; | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 2px; | |
| outline: none; | |
| } | |
| .control-slider::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 50%; | |
| background: #00E0FF; | |
| cursor: pointer; | |
| } | |
| .control-slider::-moz-range-thumb { | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 50%; | |
| background: #00E0FF; | |
| cursor: pointer; | |
| } | |
| .slider-value { | |
| font-size: 14px; | |
| font-weight: 600; | |
| min-width: 50px; | |
| } | |
| .control-buttons { | |
| display: flex; | |
| gap: 5px; | |
| } | |
| .mode-button { | |
| flex: 1; | |
| background-color: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 4px; | |
| padding: 6px 10px; | |
| color: white; | |
| font-size: 12px; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .mode-button:hover { | |
| background-color: rgba(0, 224, 255, 0.1); | |
| } | |
| .mode-button.active { | |
| background-color: rgba(0, 224, 255, 0.2); | |
| border-color: #00E0FF; | |
| color: #00E0FF; | |
| } | |
| /* Toggle Switch */ | |
| .toggle-switch { | |
| position: relative; | |
| display: inline-block; | |
| width: 50px; | |
| height: 24px; | |
| } | |
| .toggle-input { | |
| opacity: 0; | |
| width: 0; | |
| height: 0; | |
| } | |
| .toggle-label { | |
| position: absolute; | |
| cursor: pointer; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background-color: rgba(255, 255, 255, 0.1); | |
| transition: .4s; | |
| border-radius: 24px; | |
| } | |
| .toggle-label:before { | |
| position: absolute; | |
| content: ""; | |
| height: 16px; | |
| width: 16px; | |
| left: 4px; | |
| bottom: 4px; | |
| background-color: white; | |
| transition: .4s; | |
| border-radius: 50%; | |
| } | |
| .toggle-input:checked + .toggle-label { | |
| background-color: rgba(0, 224, 255, 0.5); | |
| } | |
| .toggle-input:checked + .toggle-label:before { | |
| transform: translateX(26px); | |
| background-color: #00E0FF; | |
| } | |
| /* Grid Tab */ | |
| .grid-tab { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 30px; | |
| } | |
| .grid-metrics { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 20px; | |
| } | |
| .grid-status { | |
| width: 100%; | |
| } | |
| .grid-status h3 { | |
| margin-top: 0; | |
| margin-bottom: 16px; | |
| font-size: 18px; | |
| font-weight: 600; | |
| } | |
| .grid-history { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 16px; | |
| padding: 20px; | |
| border: 1px solid rgba(0, 224, 255, 0.1); | |
| } | |
| .grid-history h3 { | |
| margin-top: 0; | |
| margin-bottom: 16px; | |
| font-size: 18px; | |
| font-weight: 600; | |
| } | |
| .grid-controls { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 16px; | |
| padding: 20px; | |
| border: 1px solid rgba(0, 224, 255, 0.1); | |
| } | |
| .grid-controls h3 { | |
| margin-top: 0; | |
| margin-bottom: 16px; | |
| font-size: 18px; | |
| font-weight: 600; | |
| } | |
| /* Demand Tab */ | |
| .demand-tab { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 30px; | |
| } | |
| .demand-metrics { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 20px; | |
| } | |
| .charger-status { | |
| width: 100%; | |
| } | |
| .charger-status h3 { | |
| margin-top: 0; | |
| margin-bottom: 16px; | |
| font-size: 18px; | |
| font-weight: 600; | |
| } | |
| .charger-types { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 16px; | |
| padding: 20px; | |
| border: 1px solid rgba(0, 224, 255, 0.1); | |
| } | |
| .charger-types h3 { | |
| margin-top: 0; | |
| margin-bottom: 16px; | |
| font-size: 18px; | |
| font-weight: 600; | |
| } | |
| .charger-type-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 20px; | |
| } | |
| .charger-type-card { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 12px; | |
| padding: 15px; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .type-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 10px; | |
| } | |
| .type-header h4 { | |
| margin: 0; | |
| font-size: 16px; | |
| font-weight: 600; | |
| } | |
| .type-power { | |
| font-size: 14px; | |
| opacity: 0.7; | |
| } | |
| .type-count { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| margin-bottom: 15px; | |
| } | |
| .count-value { | |
| font-size: 24px; | |
| font-weight: 600; | |
| color: #35F2DB; | |
| } | |
| .count-label { | |
| font-size: 12px; | |
| opacity: 0.7; | |
| } | |
| .type-usage, .type-power-share { | |
| margin-bottom: 10px; | |
| } | |
| .usage-bar-container, .power-bar-container { | |
| height: 8px; | |
| background-color: rgba(255, 255, 255, 0.1); | |
| border-radius: 4px; | |
| overflow: hidden; | |
| margin-bottom: 5px; | |
| } | |
| .usage-bar, .power-bar { | |
| height: 100%; | |
| border-radius: 4px; | |
| transition: width 0.5s ease; | |
| } | |
| .usage-label, .power-label { | |
| font-size: 12px; | |
| opacity: 0.7; | |
| } | |
| .demand-forecast { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 16px; | |
| padding: 20px; | |
| border: 1px solid rgba(0, 224, 255, 0.1); | |
| } | |
| .demand-forecast h3 { | |
| margin-top: 0; | |
| margin-bottom: 16px; | |
| font-size: 18px; | |
| font-weight: 600; | |
| } | |
| /* Optimization Tab */ | |
| .optimization-tab { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 30px; | |
| } | |
| .optimization-modes { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 16px; | |
| padding: 20px; | |
| border: 1px solid rgba(0, 224, 255, 0.1); | |
| } | |
| .optimization-modes h3 { | |
| margin-top: 0; | |
| margin-bottom: 16px; | |
| font-size: 18px; | |
| font-weight: 600; | |
| } | |
| .mode-cards { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); | |
| gap: 20px; | |
| } | |
| .mode-card { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 12px; | |
| padding: 20px; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .mode-card:hover { | |
| transform: translateY(-5px); | |
| background: rgba(255, 255, 255, 0.08); | |
| } | |
| .mode-card.active { | |
| border-color: #00E0FF; | |
| background: rgba(0, 224, 255, 0.1); | |
| } | |
| .mode-icon { | |
| font-size: 24px; | |
| margin-bottom: 10px; | |
| } | |
| .mode-card h4 { | |
| margin: 0 0 10px 0; | |
| font-size: 16px; | |
| font-weight: 600; | |
| } | |
| .mode-card p { | |
| font-size: 14px; | |
| opacity: 0.7; | |
| margin-bottom: 15px; | |
| } | |
| .mode-benefits { | |
| padding-left: 20px; | |
| margin: 0; | |
| } | |
| .mode-benefits li { | |
| font-size: 12px; | |
| margin-bottom: 5px; | |
| } | |
| .optimization-results { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 16px; | |
| padding: 20px; | |
| border: 1px solid rgba(0, 224, 255, 0.1); | |
| } | |
| .optimization-results h3 { | |
| margin-top: 0; | |
| margin-bottom: 16px; | |
| font-size: 18px; | |
| font-weight: 600; | |
| } | |
| .results-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 20px; | |
| } | |
| .result-card { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 12px; | |
| padding: 15px; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .result-card h4 { | |
| margin: 0 0 15px 0; | |
| font-size: 16px; | |
| font-weight: 600; | |
| } | |
| .result-comparison { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .comparison-item { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .comparison-label { | |
| font-size: 14px; | |
| opacity: 0.7; | |
| } | |
| .comparison-value { | |
| font-size: 14px; | |
| font-weight: 600; | |
| } | |
| .comparison-value.optimized { | |
| color: #00E0FF; | |
| } | |
| .comparison-value.savings { | |
| color: #35F2DB; | |
| } | |
| .optimization-actions { | |
| display: flex; | |
| justify-content: center; | |
| gap: 15px; | |
| flex-wrap: wrap; | |
| } | |
| .action-button { | |
| background-color: rgba(0, 224, 255, 0.1); | |
| border: 1px solid rgba(0, 224, 255, 0.3); | |
| border-radius: 8px; | |
| padding: 10px 20px; | |
| color: white; | |
| font-size: 14px; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .action-button:hover { | |
| background-color: rgba(0, 224, 255, 0.2); | |
| transform: translateY(-2px); | |
| } | |
| .action-button.apply { | |
| background-color: rgba(0, 224, 255, 0.2); | |
| border-color: #00E0FF; | |
| color: #00E0FF; | |
| } | |
| /* Footer */ | |
| .simulation-footer { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 20px; | |
| background-color: rgba(20, 20, 30, 0.8); | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| margin-top: 30px; | |
| } | |
| .footer-info { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 5px; | |
| } | |
| .footer-info span { | |
| font-size: 12px; | |
| opacity: 0.7; | |
| } | |
| .footer-actions { | |
| display: flex; | |
| gap: 10px; | |
| } | |
| .footer-button { | |
| background-color: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(0, 224, 255, 0.2); | |
| border-radius: 6px; | |
| padding: 8px 12px; | |
| color: white; | |
| font-size: 12px; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .footer-button:hover { | |
| background-color: rgba(0, 224, 255, 0.1); | |
| } | |
| /* Responsive Adjustments */ | |
| @media (max-width: 768px) { | |
| .simulation-header { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| gap: 15px; | |
| } | |
| .simulation-controls { | |
| width: 100%; | |
| justify-content: space-between; | |
| } | |
| .time-display { | |
| width: 100%; | |
| } | |
| .control-buttons, .speed-control { | |
| width: 100%; | |
| justify-content: space-between; | |
| } | |
| .mode-cards, .results-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .solar-metrics, .battery-metrics, .grid-metrics, .demand-metrics { | |
| grid-template-columns: 1fr; | |
| } | |
| .weather-forecast { | |
| flex-wrap: wrap; | |
| } | |
| .weather-item { | |
| min-width: 80px; | |
| } | |
| .simulation-footer { | |
| flex-direction: column; | |
| gap: 15px; | |
| } | |
| .footer-actions { | |
| width: 100%; | |
| justify-content: space-between; | |
| } | |
| } | |