Spaces:
Running
Running
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Global SDR Network Monitor</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css" /> | |
| <style> | |
| body { | |
| margin: 0; | |
| padding: 20px; | |
| background: #000; | |
| color: #0f0; | |
| font-family: monospace; | |
| overflow: hidden; | |
| } | |
| .container { | |
| display: grid; | |
| grid-template-columns: 300px 1fr; | |
| gap: 20px; | |
| height: calc(100vh - 40px); | |
| } | |
| .sidebar { | |
| background: #111; | |
| padding: 15px; | |
| border-radius: 8px; | |
| height: 100%; | |
| overflow-y: auto; | |
| z-index: 1000; | |
| } | |
| .receiver { | |
| margin: 10px 0; | |
| padding: 10px; | |
| background: #1a1a1a; | |
| border-radius: 4px; | |
| position: relative; | |
| } | |
| .status { | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 5px; | |
| } | |
| .led { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| margin-right: 8px; | |
| } | |
| .active { | |
| background: #0f0; | |
| box-shadow: 0 0 10px #0f0; | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| 100% { opacity: 1; } | |
| } | |
| .inactive { | |
| background: #f00; | |
| } | |
| #map-container { | |
| position: relative; | |
| height: 100%; | |
| border-radius: 8px; | |
| overflow: hidden; | |
| } | |
| canvas#map { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 1; | |
| } | |
| #world-map { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 0; | |
| filter: invert(1) hue-rotate(180deg); | |
| opacity: 0.5; | |
| background: #111; | |
| } | |
| .signal-strength { | |
| height: 4px; | |
| background: #222; | |
| margin-top: 5px; | |
| border-radius: 2px; | |
| } | |
| .signal-bar { | |
| height: 100%; | |
| background: linear-gradient(to right, #0f0, #00ff00); | |
| width: 0%; | |
| transition: width 0.3s ease-in-out; | |
| box-shadow: 0 0 5px #0f0; | |
| border-radius: 2px; | |
| } | |
| .detection { | |
| background: rgba(0, 255, 0, 0.1); | |
| border-left: 3px solid #0f0; | |
| padding: 8px; | |
| margin: 5px 0; | |
| font-size: 12px; | |
| border-radius: 0 4px 4px 0; | |
| } | |
| .signal-line { | |
| position: absolute; | |
| background: linear-gradient(90deg, rgba(0,255,0,0.4) 0%, rgba(0,255,0,0) 100%); | |
| height: 2px; | |
| transform-origin: 0 0; | |
| pointer-events: none; | |
| opacity: 0.7; | |
| animation: signalPulse 2s infinite; | |
| } | |
| @keyframes signalPulse { | |
| 0% { opacity: 0.7; } | |
| 50% { opacity: 0.3; } | |
| 100% { opacity: 0.7; } | |
| } | |
| /* Leaflet 스타일 오버라이드 */ | |
| .leaflet-container { | |
| background: #111 ; | |
| } | |
| .leaflet-control-attribution { | |
| background: rgba(17, 17, 17, 0.8) ; | |
| color: #666 ; | |
| } | |
| .leaflet-control-attribution a { | |
| color: #888 ; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="sidebar"> | |
| <h3>Active SDR Receivers</h3> | |
| <div id="receivers"></div> | |
| <h3>Real-time Detections</h3> | |
| <div id="detections"></div> | |
| </div> | |
| <div id="map-container"> | |
| <div id="world-map"></div> | |
| <canvas id="map"></canvas> | |
| </div> | |
| </div> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js"></script> | |
| <script> | |
| // Global SDR stations data | |
| const sdrStations = [ | |
| // Europe | |
| { | |
| name: "Twente WebSDR", | |
| url: "websdr.ewi.utwente.nl:8901", | |
| location: [52.2389, 6.8343], | |
| frequency: "0-29.160 MHz", | |
| range: 200, | |
| active: true | |
| }, | |
| { | |
| name: "TU Delft WebSDR", | |
| url: "websdr.tudelft.nl:8901", | |
| location: [51.9981, 4.3731], | |
| frequency: "0-29.160 MHz", | |
| range: 180, | |
| active: true | |
| }, | |
| { | |
| name: "SUWS WebSDR UK", | |
| url: "websdr.suws.org.uk", | |
| location: [51.2785, -0.7642], | |
| frequency: "0-30 MHz", | |
| range: 150, | |
| active: true | |
| }, | |
| { | |
| name: "KiwiSDR Switzerland", | |
| url: "hb9ryz.no-ip.org:8073", | |
| location: [47.3769, 8.5417], | |
| frequency: "0-30 MHz", | |
| range: 160, | |
| active: true | |
| }, | |
| // United States | |
| { | |
| name: "W6DRZ WebSDR", | |
| url: "w6drz.sdr.us:8901", | |
| location: [34.2847, -118.4429], | |
| frequency: "0-30 MHz", | |
| range: 170, | |
| active: true | |
| }, | |
| { | |
| name: "K3FEF WebSDR", | |
| url: "k3fef.sdr.us:8901", | |
| location: [40.5697, -75.9363], | |
| frequency: "0-30 MHz", | |
| range: 160, | |
| active: true | |
| }, | |
| { | |
| name: "WA2ZKD KiwiSDR", | |
| url: "wa2zkd.sdr.us:8073", | |
| location: [40.7128, -74.0060], | |
| frequency: "0-30 MHz", | |
| range: 150, | |
| active: true | |
| }, | |
| { | |
| name: "W4AX WebSDR", | |
| url: "w4ax.sdr.us:8901", | |
| location: [33.7756, -84.3963], | |
| frequency: "0-30 MHz", | |
| range: 165, | |
| active: true | |
| }, | |
| // Japan | |
| { | |
| name: "JH7VHZ WebSDR", | |
| url: "jh7vhz.sdr.jp:8901", | |
| location: [38.2682, 140.8694], | |
| frequency: "0-30 MHz", | |
| range: 155, | |
| active: true | |
| }, | |
| { | |
| name: "JA1GJB KiwiSDR", | |
| url: "ja1gjb.sdr.jp:8073", | |
| location: [35.6762, 139.6503], | |
| frequency: "0-30 MHz", | |
| range: 145, | |
| active: true | |
| }, | |
| { | |
| name: "JA3ZOH WebSDR", | |
| url: "ja3zoh.sdr.jp:8901", | |
| location: [34.6937, 135.5023], | |
| frequency: "0-30 MHz", | |
| range: 150, | |
| active: true | |
| }, | |
| // Australia | |
| { | |
| name: "VK4YA KiwiSDR", | |
| url: "vk4ya.sdr.au:8073", | |
| location: [-27.4698, 153.0251], | |
| frequency: "0-30 MHz", | |
| range: 170, | |
| active: true | |
| }, | |
| { | |
| name: "VK2RG WebSDR", | |
| url: "vk2rg.sdr.au:8901", | |
| location: [-33.8688, 151.2093], | |
| frequency: "0-30 MHz", | |
| range: 165, | |
| active: true | |
| }, | |
| // Russia | |
| { | |
| name: "RZ3DJR WebSDR", | |
| url: "rz3djr.sdr.ru:8901", | |
| location: [55.7558, 37.6173], | |
| frequency: "0-30 MHz", | |
| range: 180, | |
| active: true | |
| }, | |
| { | |
| name: "UA9UDX WebSDR", | |
| url: "ua9udx.sdr.ru:8901", | |
| location: [55.0084, 82.9357], | |
| frequency: "0-30 MHz", | |
| range: 175, | |
| active: true | |
| }, | |
| // China | |
| { | |
| name: "BY1PK WebSDR", | |
| url: "by1pk.sdr.cn:8901", | |
| location: [39.9042, 116.4074], | |
| frequency: "0-30 MHz", | |
| range: 160, | |
| active: true | |
| }, | |
| { | |
| name: "BG3MDO KiwiSDR", | |
| url: "bg3mdo.sdr.cn:8073", | |
| location: [23.1291, 113.2644], | |
| frequency: "0-30 MHz", | |
| range: 155, | |
| active: true | |
| }, | |
| // South Korea | |
| { | |
| name: "HL2WA KiwiSDR", | |
| url: "hl2wa.sdr.kr:8073", | |
| location: [37.5665, 126.9780], | |
| frequency: "0-30 MHz", | |
| range: 150, | |
| active: true | |
| }, | |
| { | |
| name: "DS1URB WebSDR", | |
| url: "ds1urb.sdr.kr:8901", | |
| location: [35.1796, 129.0756], | |
| frequency: "0-30 MHz", | |
| range: 145, | |
| active: true | |
| }, | |
| // Canada | |
| { | |
| name: "VE3HOA WebSDR", | |
| url: "ve3hoa.sdr.ca:8901", | |
| location: [43.6532, -79.3832], | |
| frequency: "0-30 MHz", | |
| range: 165, | |
| active: true | |
| }, | |
| { | |
| name: "VA3ROM KiwiSDR", | |
| url: "va3rom.sdr.ca:8073", | |
| location: [45.4215, -75.6972], | |
| frequency: "0-30 MHz", | |
| range: 160, | |
| active: true | |
| }, | |
| // Brazil | |
| { | |
| name: "PY2RDZ WebSDR", | |
| url: "py2rdz.sdr.br:8901", | |
| location: [-23.5505, -46.6333], | |
| frequency: "0-30 MHz", | |
| range: 170, | |
| active: true | |
| }, | |
| { | |
| name: "PY1ZV KiwiSDR", | |
| url: "py1zv.sdr.br:8073", | |
| location: [-22.9068, -43.1729], | |
| frequency: "0-30 MHz", | |
| range: 165, | |
| active: true | |
| } | |
| ]; | |
| class RadarSystem { | |
| constructor() { | |
| this.canvas = document.getElementById('map'); | |
| this.ctx = this.canvas.getContext('2d'); | |
| this.targets = new Set(); | |
| this.signalLines = new Set(); | |
| this.setupWorldMap(); | |
| this.setupCanvas(); | |
| this.renderReceivers(); | |
| this.startTracking(); | |
| window.addEventListener('resize', this.handleResize.bind(this)); | |
| } | |
| setupWorldMap() { | |
| this.worldMap = L.map('world-map', { | |
| center: [20, 0], | |
| zoom: 2, | |
| zoomControl: false, | |
| dragging: false, | |
| scrollWheelZoom: false, | |
| doubleClickZoom: false | |
| }); | |
| L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { | |
| attribution: '© OpenStreetMap contributors' | |
| }).addTo(this.worldMap); | |
| } | |
| setupCanvas() { | |
| const container = document.getElementById('map-container'); | |
| this.canvas.width = container.offsetWidth; | |
| this.canvas.height = container.offsetHeight; | |
| } | |
| handleResize() { | |
| const container = document.getElementById('map-container'); | |
| this.canvas.width = container.offsetWidth; | |
| this.canvas.height = container.offsetHeight; | |
| this.worldMap.invalidateSize(); | |
| } | |
| renderReceivers() { | |
| const container = document.getElementById('receivers'); | |
| container.innerHTML = sdrStations.map(station => ` | |
| <div class="receiver" id="rx-${station.url.split(':')[0]}"> | |
| <div class="status"> | |
| <div class="led ${station.active ? 'active' : 'inactive'}"></div> | |
| <strong>${station.name}</strong> | |
| </div> | |
| <div>📡 ${station.url}</div> | |
| <div>📻 ${station.frequency}</div> | |
| <div>📍 ${station.location.join(', ')}</div> | |
| <div>Range: ${station.range}km</div> | |
| <div class="signal-strength"> | |
| <div class="signal-bar"></div> | |
| </div> | |
| </div> | |
| `).join(''); | |
| } | |
| latLongToXY(lat, lon) { | |
| const point = this.worldMap.latLngToContainerPoint([lat, lon]); | |
| return {x: point.x, y: point.y}; | |
| } | |
| generateTarget() { | |
| const station = sdrStations[Math.floor(Math.random() * sdrStations.length)]; | |
| const range = 5; | |
| return { | |
| type: Math.random() > 0.7 ? 'aircraft' : 'vehicle', | |
| position: { | |
| lat: station.location[0] + (Math.random() - 0.5) * range, | |
| lon: station.location[1] + (Math.random() - 0.5) * range | |
| }, |