34935-vm/index.php
2025-10-17 01:31:35 +00:00

163 lines
7.9 KiB
PHP

<?php require_once 'config.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Worldsphere - Healthcare Risk Management</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="assets/cesium/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<link rel="stylesheet" href="assets/css/dashboard.css?v=<?php echo time(); ?>">
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
</head>
<body>
<div id="app-container">
<aside id="sidebar" class="sidebar-hidden">
<header id="app-header">
<a href="#" id="home-link"><h1>Menu</h1></a>
</header>
<nav id="app-nav">
<div class="control-group">
<h3>Layers</h3>
<label><input type="checkbox" id="weatherLayerCheckbox" checked> Weather</label>
<label><input type="checkbox" id="wildfireLayerCheckbox" checked> Wildfires</label>
<label><input type="checkbox" id="spcLayerCheckbox" checked> SPC Outlook</label>
<label><input type="checkbox" id="weatherAlertsLayerCheckbox" checked> Weather Alerts</label>
<label><input type="checkbox" id="hurricaneLayerCheckbox" checked> Hurricanes</label>
<label><input type="checkbox" id="windLayerCheckbox" checked> Wind</label>
</div>
<div class="control-group">
<h3>Wind Animation</h3>
<label>Altitude: <span id="windAltitudeLabel">10000 m</span></label>
<input type="range" id="windAltitudeSlider" min="0" max="15000" step="500" value="10000">
<label>Particle Density:</label>
<input type="range" id="particleDensitySlider" min="0.1" max="1.0" step="0.1" value="0.5">
<button id="playPauseWind">Pause</button>
</div>
</nav>
</aside>
<main id="main-content">
<div id="top-bar">
<button id="hamburger-menu">
<span></span>
<span></span>
<span></span>
</button>
<nav class="top-nav">
<a href="#" id="dashboard-nav-link" class="nav-item">Dashboard</a>
<a href="#" id="analytics-nav-link" class="nav-item">Analytics</a>
<a href="#" id="reports-nav-link" class="nav-item">Reports</a>
<a href="#" id="settings-nav-link" class="nav-item">Settings</a>
</nav>
</div>
<div id="split-container">
<div id="left-panel">
<div id="dashboard-content" class="hidden">
<h2>Facilities Dashboard</h2>
<table class="table">
<thead>
<tr>
<th>Facility Name</th>
<th>City</th>
<th>State</th>
<th>Risk Score</th>
</tr>
</thead>
<tbody>
<!-- Facility data will be loaded here -->
</tbody>
</table>
</div>
<div id="analytics-content" class="hidden">
<h2>Analytics</h2>
<p>This feature is under development. Detailed analytics and visualizations will be available here soon.</p>
<canvas id="facilitiesByStateChart"></canvas>
</div>
<div id="reports-content" class="hidden">
<h2>Reports</h2>
<p>Generate and download reports for your facilities.</p>
<button id="download-report-btn">Download Facility Risk Report (CSV)</button>
</div>
<div id="settings-content" class="hidden">
<h2>Settings</h2>
<p>Configure your application settings.</p>
<form id="settings-form">
<div class="form-group">
<label for="setting1">Example Setting 1</label>
<input type="text" id="setting1" name="setting1" value="Example Value">
</div>
<div class="form-group">
<label for="setting2">Example Setting 2</label>
<select id="setting2" name="setting2">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<button type="submit">Save Settings</button>
</form>
</div>
<div id="summary-content" class="hidden">
<h2>Summary</h2>
<p>This feature is under development. A summary of key information will be available here soon.</p>
</div>
<div id="help-content" class="hidden">
<h2>Help</h2>
<p>This feature is under development. Help and documentation will be available here soon.</p>
</div>
</div>
<div id="right-panel">
<div id="cesiumContainer"></div>
</div>
</div>
<nav class="bottom-nav">
<a href="#" id="summary-nav-link" class="nav-item">Summary</a>
<a href="#" id="show-alerts-btn" class="nav-item">Alerts</a>
<a href="#" id="help-nav-link" class="nav-item">Help</a>
<a href="#" class="nav-item">&copy; 2025 Worldsphere</a>
</nav>
</main>
</div>
<!-- Modals -->
<div id="alertsModal" class="modal">
<div class="modal-content">
<span class="close-button">&times;</span>
<h2>Active Weather Alerts</h2>
<div id="alerts-list-container">
<p>Loading alerts...</p>
</div>
</div>
</div>
<div id="crossSectionModal" class="modal">
<div class="modal-content">
<span class="close-button">&times;</span>
<div id="riskScoreContainer">
<h3>Location Risk Assessment</h3>
<div id="riskScoreSummary">
<strong>Overall Risk Score:</strong> <span id="riskScoreValue">Calculating...</span>
</div>
<div id="riskFactors">
<p><strong>Wildfire Risk:</strong> <span id="wildfireRisk">Calculating...</span></p>
<p><strong>Hurricane Risk (Live):</strong> <span id="hurricaneRisk">Calculating...</span></p>
<p><strong>Hurricane Risk (Historical):</strong> <span id="historicalHurricaneRisk">Calculating...</span></p>
</div>
</div>
<hr>
<h2>Atmospheric Cross-Section</h2>
<div id="loadingIndicator" style="display: none;">Loading data...</div>
<canvas id="crossSectionChart"></canvas>
</div>
</div>
<script src="assets/cesium/Build/Cesium/Cesium.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="assets/js/wind.js?v=<?php echo time(); ?>"></script>
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
</body>
</html>