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.

app.js

@@ -0,0 +1,638 @@
+;(function () {
+  'use strict'
+
+  function $(id) {
+    return document.getElementById(id)
+  }
+
+  var canvas = null
+  var wrap = null
+  var ctx = null
+  var W = 0
+  var H = 0
+  var camCX = 0
+  var camCY = 0
+  var SCALE = 0
+  var zoomLevel = 1.0
+
+  var boatStart = { x: 0.0, y: 1.0 }
+  var boatEnd = { x: 0.0, y: 0.15 }
+  var dragging = null
+  var camHeading = 0
+  var boatT = 0
+  var boatDir = 1
+  var lastTime = null
+
+  var prevVisible = null
+  var detectedStreak = 0
+  var blindStreak = 0
+  var lastDetectedStreak = 0
+  var lastBlindStreak = 0
+  var prevDetectedStreak = 0
+  var prevBlindStreak = 0
+
+  var lastPinchDist = null
+  var rafId = 0
+  var running = false
+  var camDir = -1
+
+  function resetStreaks() {
+    detectedStreak = 0
+    blindStreak = 0
+    lastDetectedStreak = 0
+    lastBlindStreak = 0
+    prevDetectedStreak = 0
+    prevBlindStreak = 0
+    prevVisible = null
+  }
+
+  function resize() {
+    if (!wrap || !canvas) return
+    W = wrap.clientWidth
+    H = wrap.clientHeight
+    canvas.width = W
+    canvas.height = H
+    camCX = W / 2
+    camCY = H * 0.88
+    SCALE = Math.min(W, H) * 0.42 * zoomLevel
+  }
+
+  function updateZoomLabel() {
+    var el = $('zoom-label')
+    if (el) el.textContent = Math.round(zoomLevel * 100) + '%'
+  }
+
+  function applyZoom(delta) {
+    var factor = delta > 0 ? 1.12 : 1 / 1.12
+    zoomLevel = Math.max(0.3, Math.min(8, zoomLevel * factor))
+    SCALE = Math.min(W, H) * 0.42 * zoomLevel
+    updateZoomLabel()
+  }
+
+  function getParams() {
+    return {
+      fov: +$('input-fov').value,
+      frontSpeed: +$('input-front-speed').value,
+      backSpeed: +$('input-back-speed').value,
+      frontArc: +$('input-front-arc').value,
+      boatSpeed: +$('input-boat-speed').value,
+    }
+  }
+
+  function worldToCanvas(wx, wy) {
+    return { x: camCX + wx * SCALE, y: camCY - wy * SCALE }
+  }
+
+  function canvasToWorld(cx, cy) {
+    return { x: (cx - camCX) / SCALE, y: (camCY - cy) / SCALE }
+  }
+
+  function isFront(heading, arc) {
+    var h = ((heading % 360) + 360) % 360
+    if (h > 180) h -= 360
+    return Math.abs(h) <= arc / 2
+  }
+
+  function scanTime(p) {
+    return p.frontArc / p.frontSpeed + (360 - p.frontArc) / p.backSpeed
+  }
+
+  function setDir(d) {
+    camDir = d
+    var cw = $('dir-cw')
+    var ccw = $('dir-ccw')
+    if (cw) cw.classList.toggle('active', d === 1)
+    if (ccw) ccw.classList.toggle('active', d === -1)
+  }
+
+  function boatAngle(bx, by) {
+    return (Math.atan2(bx, by) * 180) / Math.PI
+  }
+
+  function isBoatVisible(bx, by, heading, fovVal) {
+    var rel = (((boatAngle(bx, by) - heading + 540) % 360) - 180)
+    return Math.abs(rel) <= fovVal / 2 && by > -0.05
+  }
+
+  function drawDirIndicator(d) {
+    if (!ctx) return
+    var cx = 30,
+      cy = 30,
+      r = 14
+    ctx.beginPath()
+    ctx.arc(cx, cy, r, 0, Math.PI * 2)
+    ctx.strokeStyle = 'rgba(74,158,255,0.2)'
+    ctx.lineWidth = 1
+    ctx.stroke()
+    var start = -Math.PI / 2
+    var end = start + (d > 0 ? 1.2 : -1.2)
+    ctx.beginPath()
+    ctx.arc(cx, cy, r - 3, start, end, d < 0)
+    ctx.strokeStyle = 'rgba(74,158,255,0.7)'
+    ctx.lineWidth = 2
+    ctx.stroke()
+    var tx = cx + Math.cos(end) * (r - 3)
+    var ty = cy + Math.sin(end) * (r - 3)
+    ctx.beginPath()
+    ctx.arc(tx, ty, 2, 0, Math.PI * 2)
+    ctx.fillStyle = 'rgba(74,158,255,0.7)'
+    ctx.fill()
+    ctx.fillStyle = 'rgba(74,158,255,0.55)'
+    ctx.font = "7px 'Courier New', monospace"
+    ctx.textAlign = 'center'
+    ctx.fillText(d > 0 ? 'CW' : 'CCW', cx, cy + 3)
+  }
+
+  function draw(p, bx, by, inFov) {
+    if (!ctx) return
+    ctx.clearRect(0, 0, W, H)
+
+    ctx.fillStyle = '#060d16'
+    ctx.fillRect(0, 0, W, H)
+    ctx.fillStyle = '#06100a'
+    ctx.fillRect(0, camCY, W, H - camCY)
+
+    ctx.beginPath()
+    ctx.moveTo(0, camCY)
+    ctx.lineTo(W, camCY)
+    ctx.strokeStyle = 'rgba(74,158,255,0.3)'
+    ctx.lineWidth = 1
+    ctx.setLineDash([6, 4])
+    ctx.stroke()
+    ctx.setLineDash([])
+
+    var niceIntervals = [0.01, 0.025, 0.05, 0.1, 0.25, 0.5, 1.0, 2.0, 5.0]
+    var targetMinPx = 100
+    var targetMaxPx = 240
+    var ringInterval = niceIntervals[0]
+    for (var i = 0; i < niceIntervals.length; i++) {
+      var iv = niceIntervals[i]
+      var px = iv * SCALE
+      if (px >= targetMinPx && px <= targetMaxPx) {
+        ringInterval = iv
+        break
+      }
+      if (px < targetMinPx) ringInterval = iv
+    }
+    var maxDist = Math.sqrt(Math.pow(Math.max(camCX, W - camCX), 2) + Math.pow(camCY, 2))
+    var maxRingCount = Math.ceil(maxDist / (ringInterval * SCALE)) + 1
+    function fmtDist(d) {
+      return d < 1 ? Math.round(d * 1000) + 'm' : d.toFixed(d < 10 ? 2 : 1).replace(/\.0+$/, '') + 'km'
+    }
+
+    for (var ri = 1; ri <= maxRingCount; ri++) {
+      var r = ri * ringInterval * SCALE
+      ctx.beginPath()
+      ctx.arc(camCX, camCY, r, 0, Math.PI * 2)
+      ctx.strokeStyle = 'rgba(74,158,255,0.10)'
+      ctx.lineWidth = 0.5
+      ctx.stroke()
+      ctx.beginPath()
+      ctx.moveTo(camCX - 5, camCY - r)
+      ctx.lineTo(camCX + 5, camCY - r)
+      ctx.strokeStyle = 'rgba(74,158,255,0.5)'
+      ctx.lineWidth = 1
+      ctx.stroke()
+      ctx.fillStyle = 'rgba(74,158,255,0.55)'
+      ctx.font = "10px 'Courier New', monospace"
+      ctx.textAlign = 'left'
+      ctx.fillText(fmtDist(ri * ringInterval), camCX + 8, camCY - r + 4)
+    }
+
+    var compassR = Math.min(camCX * 0.88, camCY * 0.92)
+    var canvasBase = -Math.PI / 2
+    for (var deg = 0; deg < 360; deg += 10) {
+      var a = canvasBase + (deg * Math.PI) / 180
+      var isMajor = deg % 30 === 0
+      var r0 = compassR
+      var r1 = compassR + (isMajor ? 8 : 4)
+      ctx.beginPath()
+      ctx.moveTo(camCX + Math.cos(a) * r0, camCY + Math.sin(a) * r0)
+      ctx.lineTo(camCX + Math.cos(a) * r1, camCY + Math.sin(a) * r1)
+      ctx.strokeStyle = isMajor ? 'rgba(74,158,255,0.5)' : 'rgba(74,158,255,0.2)'
+      ctx.lineWidth = isMajor ? 1 : 0.5
+      ctx.stroke()
+      if (isMajor) {
+        var lx = camCX + Math.cos(a) * (r1 + 10)
+        var ly = camCY + Math.sin(a) * (r1 + 10)
+        ctx.fillStyle = 'rgba(74,158,255,0.4)'
+        ctx.font = "8px 'Courier New', monospace"
+        ctx.textAlign = 'center'
+        ctx.textBaseline = 'middle'
+        ctx.fillText(deg + '°', lx, ly)
+        ctx.textBaseline = 'alphabetic'
+      }
+    }
+
+    ctx.beginPath()
+    ctx.moveTo(camCX, camCY)
+    ctx.lineTo(camCX, 0)
+    ctx.strokeStyle = 'rgba(74,158,255,0.12)'
+    ctx.lineWidth = 0.5
+    ctx.setLineDash([4, 4])
+    ctx.stroke()
+    ctx.setLineDash([])
+
+    var frontHalf = p.frontArc / 2
+    var frontA1 = canvasBase - (frontHalf * Math.PI) / 180
+    var frontA2 = canvasBase + (frontHalf * Math.PI) / 180
+    var INF = Math.max(W, H) * 3
+    ctx.save()
+    ctx.beginPath()
+    ctx.moveTo(camCX, camCY)
+    ctx.lineTo(camCX + Math.cos(frontA1) * INF, camCY + Math.sin(frontA1) * INF)
+    ctx.arc(camCX, camCY, INF, frontA1, frontA2)
+    ctx.closePath()
+    ctx.fillStyle = 'rgba(74,158,255,0.03)'
+    ctx.fill()
+    ctx.beginPath()
+    ctx.moveTo(camCX, camCY)
+    ctx.lineTo(camCX + Math.cos(frontA2) * INF, camCY + Math.sin(frontA2) * INF)
+    ctx.arc(camCX, camCY, INF, frontA2, frontA1 + Math.PI * 2)
+    ctx.closePath()
+    ctx.fillStyle = 'rgba(255,74,74,0.03)'
+    ctx.fill()
+    ctx.restore()
+
+    for (var ai = 0; ai < 2; ai++) {
+      var aedge = ai === 0 ? frontA1 : frontA2
+      ctx.beginPath()
+      ctx.moveTo(camCX, camCY)
+      ctx.lineTo(camCX + Math.cos(aedge) * INF, camCY + Math.sin(aedge) * INF)
+      ctx.strokeStyle = 'rgba(74,158,255,0.3)'
+      ctx.lineWidth = 1
+      ctx.setLineDash([5, 5])
+      ctx.stroke()
+      ctx.setLineDash([])
+    }
+
+    var labelR = 80
+    ctx.font = "8px 'Courier New', monospace"
+    ctx.textAlign = 'center'
+    ctx.fillStyle = 'rgba(74,158,255,0.45)'
+    ctx.fillText('FRONT ' + p.frontArc + '°', camCX, camCY - labelR)
+    ctx.fillStyle = 'rgba(255,74,74,0.35)'
+    if (camCY + 18 < H - 2) ctx.fillText('BACK ' + (360 - p.frontArc) + '°', camCX, camCY + 18)
+    ctx.fillStyle = 'rgba(74,158,255,0.4)'
+    ctx.fillText('±' + frontHalf.toFixed(0) + '°', camCX + Math.cos(frontA1) * labelR, camCY + Math.sin(frontA1) * labelR)
+    ctx.fillText('±' + frontHalf.toFixed(0) + '°', camCX + Math.cos(frontA2) * labelR, camCY + Math.sin(frontA2) * labelR)
+
+    var camRad = (camHeading * Math.PI) / 180
+    var fovRad = (p.fov * Math.PI) / 180
+    var coneLen = Math.max(W, H) * 2
+    ctx.beginPath()
+    ctx.moveTo(camCX, camCY)
+    ctx.arc(camCX, camCY, coneLen, canvasBase + camRad - fovRad / 2, canvasBase + camRad + fovRad / 2)
+    ctx.closePath()
+    ctx.fillStyle = 'rgba(74,158,255,0.07)'
+    ctx.fill()
+    ctx.beginPath()
+    ctx.moveTo(camCX, camCY)
+    ctx.arc(camCX, camCY, coneLen, canvasBase + camRad - fovRad / 2, canvasBase + camRad + fovRad / 2)
+    ctx.closePath()
+    ctx.strokeStyle = 'rgba(74,158,255,0.6)'
+    ctx.lineWidth = 1
+    ctx.stroke()
+
+    ctx.beginPath()
+    ctx.moveTo(camCX, camCY)
+    ctx.lineTo(camCX + Math.cos(canvasBase + camRad) * 32, camCY + Math.sin(canvasBase + camRad) * 32)
+    ctx.strokeStyle = 'rgba(74,158,255,0.9)'
+    ctx.lineWidth = 1.5
+    ctx.stroke()
+
+    var bC = worldToCanvas(bx, by)
+    var bsC = worldToCanvas(boatStart.x, boatStart.y)
+    var beC = worldToCanvas(boatEnd.x, boatEnd.y)
+    ctx.beginPath()
+    ctx.moveTo(bsC.x, bsC.y)
+    ctx.lineTo(beC.x, beC.y)
+    ctx.strokeStyle = 'rgba(255,74,74,0.25)'
+    ctx.lineWidth = 1
+    ctx.setLineDash([4, 3])
+    ctx.stroke()
+    ctx.setLineDash([])
+
+    ctx.beginPath()
+    ctx.moveTo(camCX, camCY)
+    ctx.lineTo(bC.x, bC.y)
+    ctx.strokeStyle = 'rgba(255,74,74,0.12)'
+    ctx.lineWidth = 0.5
+    ctx.stroke()
+
+    if (inFov) {
+      ctx.beginPath()
+      ctx.arc(bC.x, bC.y, 14, 0, Math.PI * 2)
+      ctx.fillStyle = 'rgba(0,229,160,0.12)'
+      ctx.fill()
+    }
+
+    ctx.beginPath()
+    ctx.arc(bC.x, bC.y, 5, 0, Math.PI * 2)
+    ctx.fillStyle = inFov ? '#00e5a0' : '#ff4a4a'
+    ctx.fill()
+    ctx.strokeStyle = inFov ? 'rgba(0,229,160,0.5)' : 'rgba(255,74,74,0.4)'
+    ctx.lineWidth = 1.5
+    ctx.stroke()
+
+    ctx.font = "9px 'Courier New', monospace"
+    ctx.textAlign = 'left'
+    ctx.fillStyle = inFov ? 'rgba(0,229,160,0.7)' : 'rgba(255,100,100,0.6)'
+    ctx.fillText('TGT', bC.x + 8, bC.y - 4)
+
+    ctx.beginPath()
+    ctx.arc(bsC.x, bsC.y, 4, 0, Math.PI * 2)
+    ctx.fillStyle = '#ff4a4a'
+    ctx.fill()
+    ctx.beginPath()
+    ctx.arc(beC.x, beC.y, 4, 0, Math.PI * 2)
+    ctx.fillStyle = '#ff9944'
+    ctx.fill()
+    ctx.font = "8px 'Courier New', monospace"
+    ctx.fillStyle = 'rgba(255,74,74,0.5)'
+    ctx.textAlign = 'center'
+    ctx.fillText('S', bsC.x, bsC.y + 14)
+    ctx.fillStyle = 'rgba(255,153,68,0.5)'
+    ctx.fillText('E', beC.x, beC.y + 14)
+
+    var cr = 8
+    ctx.beginPath()
+    ctx.arc(camCX, camCY, cr, 0, Math.PI * 2)
+    ctx.fillStyle = '#4a9eff'
+    ctx.fill()
+    ctx.strokeStyle = 'rgba(74,158,255,0.5)'
+    ctx.lineWidth = 1.5
+    ctx.stroke()
+    var corners = [
+      [-14, -14],
+      [14, -14],
+      [14, 14],
+      [-14, 14],
+    ]
+    for (var ci = 0; ci < corners.length; ci++) {
+      var dx = corners[ci][0],
+        dy = corners[ci][1]
+      ctx.beginPath()
+      ctx.moveTo(camCX + dx * 0.4, camCY + dy * 0.4)
+      ctx.lineTo(camCX + dx, camCY + dy)
+      ctx.strokeStyle = 'rgba(74,158,255,0.5)'
+      ctx.lineWidth = 1
+      ctx.stroke()
+    }
+
+    drawDirIndicator(camDir)
+
+    var dist = Math.sqrt(bx * bx + by * by)
+    var h360 = ((camHeading % 360) + 360) % 360
+    var st = scanTime(p)
+
+    function setText(id, text) {
+      var el = $(id)
+      if (el) el.textContent = text
+    }
+
+    setText('st-scan', st.toFixed(1) + 's')
+    setText('st-angle', h360.toFixed(1) + '°')
+    setText('st-dist', (dist * 1000).toFixed(0) + 'm')
+    setText('hdr-scan', st.toFixed(1) + 's')
+    setText('hdr-angle', h360.toFixed(1) + '°')
+
+    var travelEl = $('st-travel')
+    var blindEl = $('st-blind')
+    var travelPrevEl = $('st-travel-prev')
+    var blindPrevEl = $('st-blind-prev')
+    var riskEl = $('st-risk')
+    var riskBarEl = $('st-risk-bar')
+    if (travelEl) {
+      travelEl.textContent = (inFov ? detectedStreak : lastDetectedStreak).toFixed(1) + 'm'
+      travelEl.style.opacity = inFov ? '1' : '0.5'
+    }
+    if (blindEl) {
+      blindEl.textContent = (!inFov ? blindStreak : lastBlindStreak).toFixed(1) + 'm'
+      blindEl.style.opacity = !inFov ? '1' : '0.5'
+    }
+    if (travelPrevEl)
+      travelPrevEl.textContent =
+        prevDetectedStreak > 0 ? 'prev: ' + prevDetectedStreak.toFixed(1) + 'm' : 'prev: —'
+    if (blindPrevEl)
+      blindPrevEl.textContent =
+        prevBlindStreak > 0 ? 'prev: ' + prevBlindStreak.toFixed(1) + 'm' : 'prev: —'
+    var total = prevDetectedStreak + prevBlindStreak
+    if (riskEl && riskBarEl) {
+      if (total > 0) {
+        var risk = (prevBlindStreak / total) * 100
+        riskEl.textContent = risk.toFixed(0) + '%'
+        riskEl.style.color = risk > 66 ? '#ff4a4a' : risk > 33 ? '#ffcc44' : '#00e5a0'
+        riskBarEl.style.width = risk + '%'
+        riskBarEl.style.background = risk > 66 ? '#ff4a4a' : risk > 33 ? '#ffcc44' : '#00e5a0'
+      } else {
+        riskEl.textContent = '—'
+        riskBarEl.style.width = '0%'
+      }
+    }
+    var visEl = $('st-vis')
+    if (visEl) {
+      visEl.textContent = inFov ? 'YES' : 'NO'
+      visEl.className = 'val ' + (inFov ? 'active' : 'inactive')
+    }
+  }
+
+  function animate(ts) {
+    if (!running || !ctx) return
+    if (lastTime === null) lastTime = ts
+    var dt = Math.min((ts - lastTime) / 1000, 0.1)
+    lastTime = ts
+
+    var p = getParams()
+
+    var boatKmS = p.boatSpeed * 0.000514
+    var pathLen = Math.hypot(boatEnd.x - boatStart.x, boatEnd.y - boatStart.y)
+    if (pathLen > 0.001) {
+      var dtT = (boatKmS * dt) / pathLen
+      boatT += boatDir * dtT
+      if (boatT >= 1) {
+        boatT = 1
+        boatDir = -1
+      }
+      if (boatT <= 0) {
+        boatT = 0
+        boatDir = 1
+      }
+    }
+
+    var front = isFront(camHeading, p.frontArc)
+    var speed = front ? p.frontSpeed : p.backSpeed
+    camHeading += camDir * speed * dt
+    if (camHeading >= 180) camHeading -= 360
+    if (camHeading < -180) camHeading += 360
+
+    var bx = boatStart.x + (boatEnd.x - boatStart.x) * boatT
+    var by = boatStart.y + (boatEnd.y - boatStart.y) * boatT
+    var visible = isBoatVisible(bx, by, camHeading, p.fov)
+
+    var distThisFrame = p.boatSpeed * 0.514 * dt
+    if (prevVisible !== null && visible !== prevVisible) {
+      if (visible) {
+        prevBlindStreak = blindStreak
+        lastBlindStreak = blindStreak
+        blindStreak = 0
+      } else {
+        prevDetectedStreak = detectedStreak
+        lastDetectedStreak = detectedStreak
+        detectedStreak = 0
+      }
+    }
+    if (visible) detectedStreak += distThisFrame
+    else blindStreak += distThisFrame
+    prevVisible = visible
+
+    draw(p, bx, by, visible)
+    if (running) rafId = requestAnimationFrame(animate)
+  }
+
+  function getCanvasXY(e) {
+    if (!canvas) return { x: 0, y: 0 }
+    var rect = canvas.getBoundingClientRect()
+    var sx = W / rect.width
+    var sy = H / rect.height
+    var src = 'touches' in e && e.touches.length ? e.touches[0] : e
+    return { x: (src.clientX - rect.left) * sx, y: (src.clientY - rect.top) * sy }
+  }
+
+  function onResize() {
+    resize()
+  }
+
+  function onMouseDown(e) {
+    if (!canvas) return
+    var pt = getCanvasXY(e)
+    var bsC = worldToCanvas(boatStart.x, boatStart.y)
+    var beC = worldToCanvas(boatEnd.x, boatEnd.y)
+    if (Math.hypot(pt.x - bsC.x, pt.y - bsC.y) < 14) dragging = 'start'
+    else if (Math.hypot(pt.x - beC.x, pt.y - beC.y) < 14) dragging = 'end'
+  }
+
+  function onMouseMove(e) {
+    if (!dragging) return
+    var pt = getCanvasXY(e)
+    var w = canvasToWorld(pt.x, pt.y)
+    w.y = Math.max(0.05, Math.min(1.3, w.y))
+    w.x = Math.max(-1.4, Math.min(1.4, w.x))
+    if (dragging === 'start') boatStart = w
+    else boatEnd = w
+  }
+
+  function onMouseUp() {
+    dragging = null
+  }
+
+  function onTouchStart(e) {
+    if (e.touches.length === 2) {
+      lastPinchDist = Math.hypot(
+        e.touches[0].clientX - e.touches[1].clientX,
+        e.touches[0].clientY - e.touches[1].clientY,
+      )
+      dragging = null
+      return
+    }
+    if (e.touches.length !== 1) return
+    e.preventDefault()
+    var pt = getCanvasXY(e)
+    var bsC = worldToCanvas(boatStart.x, boatStart.y)
+    var beC = worldToCanvas(boatEnd.x, boatEnd.y)
+    if (Math.hypot(pt.x - bsC.x, pt.y - bsC.y) < 18) dragging = 'start'
+    else if (Math.hypot(pt.x - beC.x, pt.y - beC.y) < 18) dragging = 'end'
+  }
+
+  function onTouchMove(e) {
+    if (e.touches.length === 2 && lastPinchDist !== null) {
+      e.preventDefault()
+      var dist = Math.hypot(
+        e.touches[0].clientX - e.touches[1].clientX,
+        e.touches[0].clientY - e.touches[1].clientY,
+      )
+      var delta = dist - lastPinchDist
+      applyZoom(delta)
+      lastPinchDist = dist
+      return
+    }
+    if (!dragging) return
+    e.preventDefault()
+    var pt = getCanvasXY(e)
+    var w = canvasToWorld(pt.x, pt.y)
+    w.y = Math.max(0.05, Math.min(1.3, w.y))
+    w.x = Math.max(-1.4, Math.min(1.4, w.x))
+    if (dragging === 'start') boatStart = w
+    else boatEnd = w
+  }
+
+  function onTouchEnd(e) {
+    dragging = null
+    if (e.touches.length < 2) lastPinchDist = null
+  }
+
+  function onWheel(e) {
+    e.preventDefault()
+    applyZoom(-e.deltaY)
+  }
+
+  function bindRange(id, valSpanId) {
+    var input = $(id)
+    var span = valSpanId ? $(valSpanId) : null
+    function sync() {
+      if (span) span.textContent = input.value
+    }
+    input.addEventListener('input', function () {
+      sync()
+      resetStreaks()
+    })
+    sync()
+  }
+
+  function init() {
+    canvas = $('c')
+    wrap = $('canvas-wrap')
+    if (!canvas || !wrap) return
+    ctx = canvas.getContext('2d')
+    if (!ctx) return
+
+    running = true
+    resize()
+    updateZoomLabel()
+    setDir(-1)
+    window.addEventListener('resize', onResize)
+
+    canvas.addEventListener('mousedown', onMouseDown)
+    canvas.addEventListener('mousemove', onMouseMove)
+    canvas.addEventListener('mouseup', onMouseUp)
+    canvas.addEventListener('touchstart', onTouchStart, { passive: false })
+    canvas.addEventListener('touchmove', onTouchMove, { passive: false })
+    canvas.addEventListener('touchend', onTouchEnd)
+    canvas.addEventListener('touchcancel', onTouchEnd)
+    canvas.addEventListener('wheel', onWheel, { passive: false })
+
+    $('zoom-out').addEventListener('click', function () {
+      applyZoom(-1)
+    })
+    $('zoom-in').addEventListener('click', function () {
+      applyZoom(1)
+    })
+    $('dir-cw').addEventListener('click', function () {
+      setDir(1)
+    })
+    $('dir-ccw').addEventListener('click', function () {
+      setDir(-1)
+    })
+
+    bindRange('input-fov', 'val-fov')
+    bindRange('input-front-speed', 'val-front-speed')
+    bindRange('input-back-speed', 'val-back-speed')
+    bindRange('input-front-arc', 'val-front-arc')
+    bindRange('input-boat-speed', 'val-boat-speed')
+
+    rafId = requestAnimationFrame(animate)
+  }
+
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init)
+  else init()
+})()

index.html

@@ -1,19 +1,145 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!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 &amp; 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>

style.css

@@ -1,28 +1,391 @@
+html,
+body,
+#app {
+  height: 100%;
+  margin: 0;
+}
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+  overflow: hidden;
+}
+
+.coastal-surveillance-sim {
+  --bg0: #080e14;
+  --bg1: #0c1520;
+  --bg2: #111d2c;
+  --bg3: #162030;
+  --accent: #4a9eff;
+  --accent-dim: rgba(74, 158, 255, 0.18);
+  --accent-glow: rgba(74, 158, 255, 0.08);
+  --text: #c8daf0;
+  --text-muted: #4a6a8a;
+  --text-dim: #2a4a6a;
+  --border: rgba(74, 158, 255, 0.15);
+  --border-bright: rgba(74, 158, 255, 0.35);
+  --danger: #ff4a4a;
+  --success: #00e5a0;
+  --warn: #ffcc44;
+  --font: 'Courier New', monospace;
+
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 100%;
+  height: 100%;
+  background: var(--bg0);
+  color: var(--text);
+  font-family: var(--font);
+  font-size: 13px;
+  overflow: hidden;
+  display: grid;
+  grid-template-columns: 1fr 252px;
+  grid-template-rows: 38px 1fr;
+}
+
+.coastal-surveillance-sim *,
+.coastal-surveillance-sim *::before,
+.coastal-surveillance-sim *::after {
+  box-sizing: border-box;
+}
+
+#header {
+  grid-column: 1 / -1;
+  padding: 0 16px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg1);
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+#header h1 {
+  font-size: 11px;
+  font-weight: normal;
+  letter-spacing: 0.18em;
+  color: var(--accent);
+  text-transform: uppercase;
+}
+#header .sub {
+  font-size: 10px;
+  color: var(--text-muted);
+  letter-spacing: 0.08em;
+}
+#header .spacer {
+  flex: 1;
+}
+#header .hstat {
+  font-size: 10px;
+  letter-spacing: 0.1em;
+  color: var(--text-muted);
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+#header .hstat span {
+  color: var(--accent);
+}
+.blink {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--success);
+  animation: blink 1.4s ease-in-out infinite;
+}
+@keyframes blink {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.15;
+  }
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+#canvas-wrap {
+  position: relative;
+  background: var(--bg0);
+  overflow: hidden;
+}
+#canvas-wrap canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.zoom-bar {
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  z-index: 10;
+}
+.zoom-label {
+  font-family: var(--font);
+  font-size: 10px;
+  color: var(--accent);
+  min-width: 34px;
+  text-align: center;
+  letter-spacing: 0.08em;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+#panel {
+  background: var(--bg1);
+  border-left: 1px solid var(--border);
+  padding: 10px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.section {
+  border: 1px solid var(--border);
+  background: var(--bg2);
+}
+.section-title {
+  font-size: 9px;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: var(--accent);
+  padding: 5px 8px;
+  background: rgba(74, 158, 255, 0.05);
+  border-bottom: 1px solid var(--border);
+}
+.section-body {
+  padding: 8px;
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1px;
+  background: var(--border);
+}
+.stat {
+  background: var(--bg2);
+  padding: 6px 8px;
+}
+.stat .lbl {
+  font-size: 8px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  margin-bottom: 2px;
+}
+.stat .val {
+  font-size: 15px;
+  color: var(--text);
+  letter-spacing: 0.02em;
+}
+.stat .val.active {
+  color: var(--success);
+}
+.stat .val.inactive {
+  color: var(--danger);
+}
+
+.stats-extra {
+  margin-top: 1px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1px;
+  background: var(--border);
+}
+.stats-extra .stat-risk {
+  grid-column: 1 / -1;
+  border-top: 1px solid rgba(255, 74, 74, 0.2);
+}
+.st-sm {
+  font-size: 13px;
+}
+.stat-sub {
+  font-size: 9px;
+  color: var(--text-muted);
+  opacity: 0.5;
+  margin-top: 2px;
+  letter-spacing: 0.06em;
+}
+.risk-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 3px;
+}
+.st-risk-val {
+  font-size: 14px;
+  min-width: 38px;
+}
+.risk-track {
+  flex: 1;
+  height: 3px;
+  background: rgba(255, 255, 255, 0.06);
+  overflow: hidden;
+}
+.risk-fill {
+  height: 100%;
+  width: 0%;
+  background: #ff4a4a;
+  transition: width 0.4s;
+}
+
+.ctrl {
+  margin-bottom: 8px;
+}
+.ctrl:last-child {
+  margin-bottom: 0;
+}
+.ctrl label {
+  display: flex;
+  justify-content: space-between;
+  font-size: 10px;
+  color: var(--text-muted);
+  margin-bottom: 3px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+.ctrl label span {
+  color: var(--text);
+  font-size: 11px;
+}
+
+input[type='range'] {
+  width: 100%;
+  -webkit-appearance: none;
+  height: 2px;
+  background: rgba(74, 158, 255, 0.15);
+  outline: none;
+  cursor: pointer;
+}
+input[type='range']::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 10px;
+  height: 10px;
+  background: var(--accent);
+  cursor: pointer;
+  border-radius: 50%;
+  box-shadow: 0 0 4px rgba(74, 158, 255, 0.6);
+}
+input[type='range']::-moz-range-thumb {
+  width: 10px;
+  height: 10px;
+  background: var(--accent);
+  cursor: pointer;
+  border-radius: 50%;
+  border: none;
+}
+
+.dir-toggle {
+  display: flex;
+  gap: 4px;
+  margin-top: 4px;
+}
+.dir-btn {
+  flex: 1;
+  padding: 5px 4px;
+  background: var(--bg3);
+  border: 1px solid var(--border);
+  color: var(--text-muted);
+  font-family: var(--font);
+  font-size: 10px;
+  letter-spacing: 0.1em;
+  cursor: pointer;
+  text-align: center;
+  text-transform: uppercase;
+  transition: all 0.12s;
+}
+.dir-btn:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+.dir-btn.active {
+  background: var(--accent-dim);
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+.hint {
+  font-size: 9px;
+  color: var(--text-muted);
+  letter-spacing: 0.04em;
+  line-height: 1.7;
+  opacity: 0.7;
+}
+.hint-s {
+  color: #ff6b6b;
+}
+.hint-e {
+  color: #ff9944;
+}
+
+.legend {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.leg-item {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  font-size: 10px;
+  color: var(--text-muted);
+}
+.leg-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.leg-dot--cam {
+  background: #4a9eff;
+}
+.leg-dot--boat {
+  background: #ff4a4a;
+}
+.leg-dot--det {
+  background: #00e5a0;
+}
+.leg-line {
+  width: 14px;
+  height: 1px;
+  flex-shrink: 0;
+}
+.leg-line--rings {
+  background: rgba(74, 158, 255, 0.4);
+}
+.leg-line--arc {
+  background: rgba(74, 158, 255, 0.25);
+  border-top: 1px dashed rgba(74, 158, 255, 0.4);
+  height: 0;
+  padding-top: 1px;
+}
+
+.zoom-btn {
+  width: 26px;
+  height: 26px;
+  background: rgba(8, 14, 20, 0.9);
+  border: 1px solid var(--border-bright);
+  color: var(--text);
+  font-family: var(--font);
+  font-size: 15px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: border-color 0.12s;
+}
+.zoom-btn:hover {
+  border-color: var(--accent);
+  color: var(--accent);
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+@media (max-width: 700px) {
+  .coastal-surveillance-sim {
+    grid-template-columns: 1fr;
+    grid-template-rows: 38px 55vw 1fr;
+  }
+  #panel {
+    border-left: none;
+    border-top: 1px solid var(--border);
+  }
 }