LIVE SCAN: AIRSPACE

<div id="pt-radar-block" class="radar-container-base">
    <div class="radar-header">
        <span class="radar-title">
            <span class="radar-blink-dot">●</span> LIVE AIRSPACE: PLYMOUTH COUNTY, MA
        </span>
        <button onclick="toggleRadar()" id="radarBtn" class="radar-toggle-btn">
            [ ] MAXIMIZE
        </button>
    </div>

    <div id="radar-viewport">
        <iframe id="radar-iframe" src="https://globe.adsbexchange.com/?lat=41.9583&amp;lon=-70.6678&amp;zoom=10&amp;hideSidebar&amp;hideButtons=false&amp;show_controls=1" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;" allowfullscreen="">
        </iframe>
    </div>
    
    <div class="radar-footer">
        DATA SOURCE: ADSB-EXCHANGE | [ESC] TO EXIT FULLSCREEN
    </div>

    <style>
        @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } }
        
        .radar-container-base {
            width: 100%;
            position: relative;
            background: #000; 
            border: 1px solid #333; 
            font-family: monospace; 
            overflow: hidden;
            transition: all 0.3s ease;
            z-index: 10;
            margin: 20px 0;
            box-sizing: border-box;
        }

        .radar-header {
            background: #0a0a0a; 
            color: #00ff00; 
            padding: 10px 15px; 
            font-size: 13px; 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            border-bottom: 1px solid #222;
        }

        .radar-blink-dot { color: #ff0000; animation: blink 1.5s infinite; }

        .radar-toggle-btn {
            background: #222; 
            color: #00ff00; 
            border: 1px solid #444; 
            padding: 4px 8px; 
            cursor: pointer; 
            font-family: monospace; 
            font-size: 10px;
        }

        #radar-viewport {
            position: relative; 
            padding-bottom: 56.25%; 
            height: 0; 
            overflow: hidden; 
            background: #000;
        }

        .radar-footer {
            padding: 6px; 
            background: #0a0a0a; 
            color: #444; 
            font-size: 9px; 
            text-align: center; 
            border-top: 1px solid #111;
        }

        .maximized-mode {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            margin: 0 !important;
            z-index: 9999 !important;
        }
        
        .maximized-mode #radar-viewport {
            padding-bottom: 0 !important;
            height: calc(100vh - 65px) !important;
        }
    </style>

    <script>
        function toggleRadar() {
            const block = document.getElementById('pt-radar-block');
            const btn = document.getElementById('radarBtn');
            
            if (block.classList.contains('maximized-mode')) {
                block.classList.remove('maximized-mode');
                btn.innerHTML = '[ ] MAXIMIZE';
                document.body.style.overflow = 'auto'; 
            } else {
                block.classList.add('maximized-mode');
                btn.innerHTML = '[X] MINIMIZE';
                document.body.style.overflow = 'hidden'; 
            }
        }

        window.addEventListener('keydown', function(event) {
            if (event.key === 'Escape' && document.getElementById('pt-radar-block').classList.contains('maximized-mode')) {
                toggleRadar();
            }
        });
    </script>
</div>