Spaces:
Running
Running
File size: 5,709 Bytes
c40323b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 | <!DOCTYPE html>
<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> |