Spaces:
Running
Running
Implement Coastal Surveillance Simulator with HTML, CSS, and JavaScript. Added interactive canvas for simulation, control panel for camera and boat settings, and responsive design for better usability.
c40323b | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Coastal Surveillance Simulator</title> | |
| <link rel="stylesheet" href="styles.css" /> | |
| </head> | |
| <body> | |
| <div id="app"> | |
| <div class="coastal-surveillance-sim"> | |
| <div id="header"> | |
| <span class="blink" aria-hidden="true"></span> | |
| <h1>Coastal Surveillance Sim</h1> | |
| <span class="sub">// PTZ camera model</span> | |
| <div class="spacer"></div> | |
| <div class="hstat">SCAN <span id="hdr-scan">—</span></div> | |
| <div class="hstat" style="margin-left: 12px">HEADING <span id="hdr-angle">—</span></div> | |
| </div> | |
| <div id="canvas-wrap"> | |
| <canvas id="c" width="800" height="600"></canvas> | |
| <div class="zoom-bar"> | |
| <button type="button" class="zoom-btn" id="zoom-out" aria-label="Zoom out">−</button> | |
| <span id="zoom-label" class="zoom-label">100%</span> | |
| <button type="button" class="zoom-btn" id="zoom-in" aria-label="Zoom in">+</button> | |
| </div> | |
| </div> | |
| <div id="panel"> | |
| <div class="section"> | |
| <div class="section-title">Status</div> | |
| <div class="stats-grid"> | |
| <div class="stat"> | |
| <div class="lbl">Scan time</div> | |
| <div id="st-scan" class="val">—</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="lbl">Cam heading</div> | |
| <div id="st-angle" class="val">—</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="lbl">Boat dist.</div> | |
| <div id="st-dist" class="val">—</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="lbl">Detected</div> | |
| <div id="st-vis" class="val">—</div> | |
| </div> | |
| </div> | |
| <div class="stats-extra"> | |
| <div class="stat"> | |
| <div class="lbl">Detected dist.</div> | |
| <div id="st-travel" class="val st-sm">—</div> | |
| <div id="st-travel-prev" class="stat-sub">prev: —</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="lbl">Blind dist.</div> | |
| <div id="st-blind" class="val st-sm">—</div> | |
| <div id="st-blind-prev" class="stat-sub">prev: —</div> | |
| </div> | |
| <div class="stat stat-risk"> | |
| <div class="lbl">Blind risk</div> | |
| <div class="risk-row"> | |
| <div id="st-risk" class="val st-risk-val">—</div> | |
| <div class="risk-track"> | |
| <div id="st-risk-bar" class="risk-fill"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="section"> | |
| <div class="section-title">Camera</div> | |
| <div class="section-body"> | |
| <div class="ctrl"> | |
| <label for="input-fov">FOV <span id="val-fov">18</span>°</label> | |
| <input id="input-fov" type="range" min="5" max="90" step="1" value="18" /> | |
| </div> | |
| <div class="ctrl"> | |
| <label for="input-front-speed">Front speed <span id="val-front-speed">6</span>°/s</label> | |
| <input id="input-front-speed" type="range" min="1" max="30" step="1" value="6" /> | |
| </div> | |
| <div class="ctrl"> | |
| <label for="input-back-speed">Back speed <span id="val-back-speed">60</span>°/s</label> | |
| <input id="input-back-speed" type="range" min="5" max="180" step="5" value="60" /> | |
| </div> | |
| <div class="ctrl"> | |
| <label for="input-front-arc">Front arc <span id="val-front-arc">180</span>°</label> | |
| <input id="input-front-arc" type="range" min="10" max="350" step="5" value="180" /> | |
| </div> | |
| <div class="ctrl"> | |
| <label>Rotation</label> | |
| <div class="dir-toggle"> | |
| <button type="button" class="dir-btn" id="dir-cw">↻ CW</button> | |
| <button type="button" class="dir-btn" id="dir-ccw">↺ CCW</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="section"> | |
| <div class="section-title">Boat</div> | |
| <div class="section-body"> | |
| <div class="ctrl"> | |
| <label for="input-boat-speed">Speed <span id="val-boat-speed">20</span> kt</label> | |
| <input id="input-boat-speed" type="range" min="1" max="60" step="1" value="20" /> | |
| </div> | |
| <div class="hint"> | |
| Drag <span class="hint-s">S</span> or <span class="hint-e">E</span> anchors on canvas to reposition | |
| trajectory. | |
| </div> | |
| </div> | |
| </div> | |
| <div class="section"> | |
| <div class="section-title">Legend</div> | |
| <div class="section-body"> | |
| <div class="legend"> | |
| <div class="leg-item"> | |
| <span class="leg-dot leg-dot--cam"></span> Camera & FOV | |
| </div> | |
| <div class="leg-item"> | |
| <span class="leg-dot leg-dot--boat"></span> Boat (undetected) | |
| </div> | |
| <div class="leg-item"> | |
| <span class="leg-dot leg-dot--det"></span> Boat (detected) | |
| </div> | |
| <div class="leg-item"><span class="leg-line leg-line--rings"></span> Range rings</div> | |
| <div class="leg-item"> | |
| <span class="leg-line leg-line--arc"></span> Front arc boundary | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="app.js" defer></script> | |
| </body> | |
| </html> |