<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PF STRIPS BY DOMINIK</title>
    <link rel="stylesheet" href="strip.css">
    <link rel="icon" type="image/png" href="/charts/flugzeug-modus.png">
<body>
    <div class="topbar"></div>
    <div class="name">PF STRIPS</div>

    <div class="airport">
        <span class="code" id="icao-code">N/A</span>  <!-- ICAO-Code -->
        <span class="title">Airport</span>
        <span class="code" id="iata-code">N/A</span>  <!-- IATA-Code -->
    </div>

    <div class="dropdown">
        <select id="airport-select">
            <option ></option>
            <option value="MDPC">Punta Cana [MDPC]</option>
            <option value="GCLP">Gran Canaria [GCLP]</option>
            <option value="EGKK">London Gatwick [EGKK]</option>
            <option value="MDAB">Arroyo Barril [MDAB]</option>
            <option value="MDST">Cibao [MDST]</option>
            <option value="EFKT">Kittila [EFKT]</option>
            <option value="LYTV">Tivat [LYTV]</option>
            <option value="LEMH">Menorca[LEMH]</option>
            <option value="EGHI">Southampton [EGHI]</option>
        </select>

    </div>
    <div class="freq">
        <span class="code" id="pos-code">N/A</span>
        <span class="title">Station</span>
        <span class="code" id="freq-code">N/A</span>
    </div>

    
    <div class="dropdown2">
        <select id="airport-select2">
            <option ></option>
            <option value="APP">APP</option>
            <option value="TWR">TWR</option>
            <option value="GND">GND</option>  
            <option value="DEL">DEL</option>      
        </select>
    </div>


    <div class="sqk">
        <button class="squawk">
            <span class="text">SQUAWK GENERATOR</span>
            <!-- Wolken -->
            <div class="cloud cloud1"></div>
            <div class="cloud cloud2"></div>
            <div class="cloud cloud3"></div>
            <div class="cloud cloud4"></div>
            <div class="cloud cloud5"></div>
            <div class="cloud cloud6"></div>
            <div class="cloud cloud7"></div>
            <div class="cloud cloud8"></div>
            <div class="cloud cloud9"></div>
        </button>
    </div>


    <div class="tooltip-container">
        <span class="tooltip">CLICK ME</span>
        <span class="text">
          <div class="borde-back">
            <div class="icon">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="23"
                height="23"
                class="bi bi-discord"
                viewBox="0 0 16 16"
              >
                <path
                  d="M13.545 2.907a13.227 13.227 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.19 12.19 0 0 0-3.658 0 8.258 8.258 0 0 0-.412-.833.051.051 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.041.041 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032c.001.014.01.028.021.037a13.276 13.276 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019c.308-.42.582-.863.818-1.329a.05.05 0 0 0-.01-.059.051.051 0 0 0-.018-.011 8.875 8.875 0 0 1-1.248-.595.05.05 0 0 1-.02-.066.051.051 0 0 1 .015-.019c.084-.063.168-.129.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.052.052 0 0 1 .053.007c.08.066.164.132.248.195a.051.051 0 0 1-.004.085 8.254 8.254 0 0 1-1.249.594.05.05 0 0 0-.03.03.052.052 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.235 13.235 0 0 0 4.001-2.02.049.049 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.034.034 0 0 0-.02-.019Zm-8.198 7.307c-.789 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612Zm5.316 0c-.788 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612Z"
                ></path>
              </svg>
            </div>
          </div>
        </span>
      </div>

    <div id="popup" class="popup">
        <div class="popup-content">
            <h2>Squawk Generator</h2>
            <p>Click the button below to generate a random IFR squawk code.</p>
            <div id="squawk-code" class="squawk-display">3672</div>
            <div class="popup-buttons">
                <button id="generate-btn">Generate Squawk</button>
                <button id="copy-btn">Copy To Clipboard</button>
            </div>
            <button class="close-popup-btn" id="close-popup-btn">Close</button>
        </div>
    </div>


    <div class="wip">WIP | WORK IN PROGRESS |</div>
    
    <div id="notification" class="notification">
        Squawk Code copied to clipboard!
    </div>

  

    <div class="charts">
        <img src="/PFSTRIP 1.0/charts/MDPCGROUND.png" alt="Background" class="centered-image" id="zoomImage" onclick="openZoom();">
    </div>
    
    <div id="zoomPopup" class="zoom-popup" onclick="closeZoom();">
        <div class="zoom-content">
            <img src="/PFSTRIP 1.0/charts/MDPCGROUND.png" alt="Zoomed" class="zoomed-image" id="zoomedImage">
        </div>
    </div>

    <div class="chartheader">GROUND CHARTS</div>

    <div class="stripcontainer">
        <div class="header-row">
            <div class="del">DELIVERY</div>
            <div class="gnd">GROUND</div>
            <div class="twr">TOWER</div>
            <div class="app">APPROACH</div>
        </div>
        <div class="strip-rows">
            <div class="strip-zone" id="delivery-zone">
                <!-- Hier erscheinen die neuen Strips -->
            </div>
            <div class="strip-zone" id="ground-zone"></div>
            <div class="strip-zone" id="tower-zone"></div>
            <div class="strip-zone" id="approach-zone"></div>
        </div>
        <button id="addStripBtn">Create Strip</button>
        <button id="deleteStripBtn">Delete Latest Strip</button>

    </div>


      

    

    <script src="script.js"></script>
</body>
</html>
