Smart City Operations Section
Preview
Edit
Download
Run
Download Options
HTML File
Download as .html file
CSS File
Download as .css file
JavaScript File
Download as .js file
Combined HTML
All code in one HTML file
Project ZIP
All files in a ZIP archive
Cancel
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Smart City Operations Center</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@7.2.96/css/materialdesignicons.min.css"> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0/dist/chartjs-adapter-moment.min.js"></script> </head> <body> <div class="dashboard-header"> <div class="container"> <div class="row align-items-center"> <div class="col-md-6"> <h1><i class="mdi mdi-city"></i> Smart City Operations Center</h1> <p class="mb-0">Real-time urban infrastructure monitoring & predictive analytics</p> </div> <div class="col-md-6 text-md-end"> <div class="d-flex justify-content-md-end align-items-center"> <div class="me-3"> <span class="status-indicator status-operational"></span> <span class="text-white">Operational</span> </div> <div class="me-3"> <span class="status-indicator status-warning"></span> <span class="text-white">Warning</span> </div> <div> <span class="status-indicator status-critical"></span> <span class="text-white">Critical</span> </div> <div class="ms-3 ps-3 border-start"> <span id="current-time" class="text-white"></span> </div> </div> </div> </div> </div> </div> <div class="container py-4"> <!-- Alert Banner --> <div class="row mb-4"> <div class="col-12"> <div class="card alert-card"> <div class="card-body py-2"> <div class="d-flex align-items-center"> <i class="mdi mdi-alert-circle-outline me-3" style="font-size: 2rem; color: var(--danger);"></i> <div class="flex-grow-1"> <h5 class="mb-0">Critical Alert: Water Pressure Drop Detected in District 7</h5> <p class="mb-0">Possible pipe rupture predicted with 87% confidence. Recommended action: Dispatch inspection team.</p> </div> <button class="btn btn-sm btn-outline-danger">Acknowledge</button> </div> </div> </div> </div> </div> <!-- KPI Row --> <div class="row mb-4"> <div class="col-md-3 col-sm-6"> <div class="card"> <div class="card-body text-center"> <div class="kpi-value" id="infra-health">96%</div> <div class="kpi-label">Infrastructure Health</div> <div class="mt-2"> <span class="badge bg-success">+2% from last week</span> </div> </div> </div> </div> <div class="col-md-3 col-sm-6"> <div class="card"> <div class="card-body text-center"> <div class="kpi-value" id="energy-savings">$24.8k</div> <div class="kpi-label">Monthly Energy Savings</div> <div class="mt-2"> <span class="badge bg-success">Optimized</span> </div> </div> </div> </div> <div class="col-md-3 col-sm-6"> <div class="card"> <div class="card-body text-center"> <div class="kpi-value" id="active-incidents">7</div> <div class="kpi-label">Active Incidents</div> <div class="mt-2"> <span class="badge bg-warning text-dark">3 require attention</span> </div> </div> </div> </div> <div class="col-md-3 col-sm-6"> <div class="card"> <div class="card-body text-center"> <div class="kpi-value" id="response-time">18m</div> <div class="kpi-label">Avg. Response Time</div> <div class="mt-2"> <span class="badge bg-success">-4m from target</span> </div> </div> </div> </div> </div> <!-- Main Content --> <div class="row"> <!-- Left Column --> <div class="col-lg-8"> <!-- Traffic and Infrastructure Map --> <div class="card mb-4"> <div class="card-header d-flex justify-content-between align-items-center"> <span><i class="mdi mdi-map-marker-multiple me-2"></i> City Infrastructure & Traffic Flow</span> <div> <select class="form-select form-select-sm" id="map-layer-select"> <option value="traffic">Traffic Flow</option> <option value="water">Water Network</option> <option value="power">Power Grid</option> <option value="waste">Waste Management</option> </select> </div> </div> <div class="card-body"> <div class="map-container"> <!-- This would be replaced with a real map implementation like Leaflet or Google Maps --> <img src="https://maps.googleapis.com/maps/api/staticmap?center=city&zoom=13&size=800x400&maptype=roadmap&key=YOUR_API_KEY" alt="City Map" style="width: 100%; height: 100%; object-fit: cover;"> <div class="map-overlay"> <h6>Traffic Conditions</h6> <div class="traffic-legend"> <div class="traffic-level"> <div class="traffic-dot bg-success"></div> <small>Flowing</small> </div> <div class="traffic-level"> <div class="traffic-dot bg-warning"></div> <small>Slow</small> </div> <div class="traffic-level"> <div class="traffic-dot bg-danger"></div> <small>Congested</small> </div> <div class="traffic-level"> <div class="traffic-dot bg-secondary"></div> <small>Closed</small> </div> </div> </div> </div> </div> </div> <!-- Predictive Maintenance --> <div class="card mb-4"> <div class="card-header"> <i class="mdi mdi-chart-line me-2"></i> Predictive Maintenance Forecast </div> <div class="card-body"> <div class="row"> <div class="col-md-8"> <canvas id="maintenanceChart" height="200"></canvas> </div> <div class="col-md-4"> <h5>Top Maintenance Priorities</h5> <ul class="list-group"> <li class="list-group-item d-flex justify-content-between align-items-center"> Traffic Signal #4721 <span class="badge bg-danger rounded-pill">87%</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Water Pump Station D7 <span class="badge bg-warning rounded-pill">72%</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Street Light Cluster 12B <span class="badge bg-warning rounded-pill">65%</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Waste Compactor #33 <span class="badge bg-primary rounded-pill">58%</span> </li> </ul> </div> </div> </div> </div> </div> <!-- Right Column --> <div class="col-lg-4"> <!-- Incident Feed --> <div class="card mb-4"> <div class="card-header d-flex justify-content-between align-items-center"> <span><i class="mdi mdi-alert-circle-outline me-2"></i> Active Incidents</span> <button class="btn btn-sm btn-outline-primary">View All</button> </div> <div class="card-body p-0"> <div class="incident-list"> <div class="incident-item incident-critical"> <div class="d-flex justify-content-between"> <strong>Water Main Break</strong> <small class="text-danger">Critical</small> </div> <small class="text-muted">District 7 • 15 min ago</small> <p class="mb-0 mt-1">Pressure drop detected. Possible rupture at Elm St.</p> </div> <div class="incident-item incident-warning"> <div class="d-flex justify-content-between"> <strong>Traffic Signal Failure</strong> <small class="text-warning">Warning</small> </div> <small class="text-muted">Main St & 5th Ave • 32 min ago</small> <p class="mb-0 mt-1">Signal timing erratic. Causing congestion.</p> </div> <div class="incident-item incident-info"> <div class="d-flex justify-content-between"> <strong>Waste Bin Overflow</strong> <small class="text-info">Monitor</small> </div> <small class="text-muted">Central Park • 1 hr ago</small> <p class="mb-0 mt-1">Bin at 80% capacity. Collection scheduled.</p> </div> <div class="incident-item incident-warning"> <div class="d-flex justify-content-between"> <strong>Street Light Outage</strong> <small class="text-warning">Warning</small> </div> <small class="text-muted">Oak Blvd • 1 hr 15 min ago</small> <p class="mb-0 mt-1">Cluster of 5 lights non-functional.</p> </div> </div> </div> </div> <!-- Sensor Grid --> <div class="card mb-4"> <div class="card-header"> <i class="mdi mdi-chip me-2"></i> Key Sensor Readings </div> <div class="card-body"> <div class="sensor-grid"> <div class="sensor-item"> <div class="sensor-value text-primary">72°F</div> <div class="sensor-label">Air Temp</div> </div> <div class="sensor-item"> <div class="sensor-value text-success">45%</div> <div class="sensor-label">Humidity</div> </div> <div class="sensor-item"> <div class="sensor-value text-info">1024</div> <div class="sensor-label">Air Quality</div> </div> <div class="sensor-item"> <div class="sensor-value text-warning">3.2m</div> <div class="sensor-label">Water Level</div> </div> <div class="sensor-item"> <div class="sensor-value text-danger">87psi</div> <div class="sensor-label">Water Pressure</div> </div> <div class="sensor-item"> <div class="sensor-value text-primary">65dB</div> <div class="sensor-label">Noise Level</div> </div> </div> </div> </div> <!-- Energy Optimization --> <div class="card"> <div class="card-header"> <i class="mdi mdi-lightbulb-on-outline me-2"></i> Energy Optimization </div> <div class="card-body"> <canvas id="energyChart" height="200"></canvas> <div class="mt-3"> <h6>Recommended Actions</h6> <ul class="list-group list-group-flush"> <li class="list-group-item d-flex justify-content-between align-items-center"> Dim street lights in District 3 <span class="badge bg-success">Save $1,200/mo</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Adjust HVAC in City Hall <span class="badge bg-success">Save $850/mo</span> </li> </ul> </div> </div> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
CSS
:root { --primary-dark: #1a237e; --primary: #303f9f; --primary-light: #7986cb; --accent: #00bcd4; --danger: #f44336; --warning: #ff9800; --success: #4caf50; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f5f5f5; color: #333; } .dashboard-header { background-color: var(--primary-dark); color: white; padding: 15px 0; box-shadow: 0 2px 10px rgba(0,0,0,0.2); } .card { border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); margin-bottom: 20px; border: none; transition: transform 0.2s; } .card:hover { transform: translateY(-5px); } .card-header { background-color: var(--primary); color: white; border-radius: 8px 8px 0 0 !important; font-weight: 600; } .alert-card { border-left: 4px solid var(--danger); } .warning-card { border-left: 4px solid var(--warning); } .status-indicator { width: 15px; height: 15px; border-radius: 50%; display: inline-block; margin-right: 5px; } .status-operational { background-color: var(--success); } .status-warning { background-color: var(--warning); } .status-critical { background-color: var(--danger); } .kpi-value { font-size: 2.5rem; font-weight: 700; color: var(--primary); } .kpi-label { font-size: 1rem; color: #666; } .map-container { height: 100%; min-height: 300px; background-color: #e9ecef; border-radius: 8px; position: relative; overflow: hidden; } .map-overlay { position: absolute; bottom: 20px; left: 20px; background: rgba(255,255,255,0.9); padding: 10px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); z-index: 1000; } .traffic-legend { display: flex; justify-content: space-between; margin-top: 10px; } .traffic-level { display: flex; flex-direction: column; align-items: center; } .traffic-dot { width: 15px; height: 15px; border-radius: 50%; margin-bottom: 5px; } .incident-list { max-height: 300px; overflow-y: auto; } .incident-item { padding: 10px; border-bottom: 1px solid #eee; transition: background-color 0.2s; } .incident-item:hover { background-color: #f9f9f9; } .incident-critical { border-left: 3px solid var(--danger); } .incident-warning { border-left: 3px solid var(--warning); } .incident-info { border-left: 3px solid var(--accent); } .sensor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; } .sensor-item { padding: 10px; text-align: center; background-color: #f8f9fa; border-radius: 5px; transition: all 0.2s; } .sensor-item:hover { background-color: #e9ecef; transform: scale(1.05); } .sensor-value { font-weight: bold; font-size: 1.2rem; } .sensor-label { font-size: 0.8rem; color: #666; } @media (max-width: 768px) { .kpi-value { font-size: 2rem; } .sensor-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); } }
JavaScript
// Update current time function updateTime() { const now = new Date(); document.getElementById('current-time').textContent = now.toLocaleTimeString() + ' • ' + now.toLocaleDateString(); } setInterval(updateTime, 1000); updateTime(); // Simulate real-time data updates function simulateDataChanges() { // Randomly update KPI values slightly for demo purposes const kpis = ['infra-health', 'energy-savings', 'active-incidents', 'response-time']; kpis.forEach(kpi => { const element = document.getElementById(kpi); const currentValue = parseFloat(element.textContent.replace(/[^0-9.]/g, '')); let newValue; if (kpi === 'infra-health') { newValue = Math.min(100, Math.max(90, currentValue + (Math.random() * 2 - 1))); element.textContent = Math.round(newValue) + '%'; } else if (kpi === 'energy-savings') { newValue = currentValue + (Math.random() * 200 - 100); element.textContent = '$' + Math.round(newValue / 100) * 100 + 'k'; } else if (kpi === 'active-incidents') { newValue = Math.max(3, Math.min(10, currentValue + (Math.random() > 0.8 ? 1 : (Math.random() > 0.8 ? -1 : 0)))); element.textContent = newValue; } else if (kpi === 'response-time') { newValue = Math.max(10, Math.min(25, currentValue + (Math.random() > 0.8 ? 1 : (Math.random() > 0.8 ? -1 : 0)))); element.textContent = newValue + 'm'; } }); } setInterval(simulateDataChanges, 5000); // Initialize charts document.addEventListener('DOMContentLoaded', function() { // Maintenance Forecast Chart const maintenanceCtx = document.getElementById('maintenanceChart').getContext('2d'); const maintenanceChart = new Chart(maintenanceCtx, { type: 'line', data: { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], datasets: [ { label: 'Predicted Failures', data: [12, 15, 11, 18, 16, 20, 22, 25, 23, 20, 18, 15], borderColor: '#f44336', backgroundColor: 'rgba(244, 67, 54, 0.1)', tension: 0.3, fill: true }, { label: 'Prevented Failures', data: [2, 4, 5, 6, 8, 10, 12, 14, 12, 10, 8, 6], borderColor: '#4caf50', backgroundColor: 'rgba(76, 175, 80, 0.1)', tension: 0.3, fill: true } ] }, options: { responsive: true, plugins: { legend: { position: 'top', }, tooltip: { mode: 'index', intersect: false, } }, scales: { y: { beginAtZero: true, title: { display: true, text: 'Number of Incidents' } } } } }); // Energy Optimization Chart const energyCtx = document.getElementById('energyChart').getContext('2d'); const energyChart = new Chart(energyCtx, { type: 'bar', data: { labels: ['Street Lights', 'Traffic Signals', 'Public Buildings', 'Water Pumps', 'Waste Systems'], datasets: [ { label: 'Current Usage', data: [12000, 4500, 18000, 7500, 3800], backgroundColor: 'rgba(0, 188, 212, 0.7)', }, { label: 'Potential Savings', data: [2500, 800, 3200, 1200, 600], backgroundColor: 'rgba(76, 175, 80, 0.7)', } ] }, options: { responsive: true, plugins: { legend: { position: 'top', }, tooltip: { mode: 'index', intersect: false, callbacks: { label: function(context) { return context.dataset.label + ': $' + context.raw.toLocaleString() + '/mo'; } } } }, scales: { y: { beginAtZero: true, title: { display: true, text: 'Monthly Cost ($)' }, ticks: { callback: function(value) { return '$' + value.toLocaleString(); } } } } } }); // Simulate map layer changes document.getElementById('map-layer-select').addEventListener('change', function(e) { // In a real implementation, this would change the map visualization console.log('Map layer changed to:', e.target.value); }); });
Output Preview
Desktop
Mobile
Fullscreen