<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>@URL@</title>
    <style>
        body, html { margin: 0; padding: 0; height: 100%; width: 100%; overflow: hidden; background: #2c3e50; font-family: sans-serif; }
        #rbi-frame { border: none; width: 100vw; height: 100vh; display: none; }
        #launcher { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; color: white; }
        .box { background: white; padding: 2rem; border-radius: 8px; color: #333; text-align: center; box-shadow: 0 4px 15px rgba(0,0,0,0.5); width: 400px; }
        input { width: 90%; padding: 12px; margin: 10px 0; border: 1px solid #ccc; border-radius: 4px; font-size: 16px; }
        button { padding: 12px 24px; background: #3498db; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; width: 100%; }
        button:hover { background: #2980b9; }
        #timer-msg { margin-top: 15px; font-size: 14px; font-weight: bold; color: #e67e22; min-height: 1.2em; }
    </style>
    <base href="https://rbi.safesquid.network/">

    <script>

    /**
     * 1# Modifies urlInput to the requested URL on load.
     * 2# Starts a 20-second countdown if a URL is present.
     */
    window.onload = function() {
        const params = new URLSearchParams(window.location.search);
        const urlFromQuery = '@URL@';
        const inputField = document.getElementById('urlInput');

        if (urlFromQuery) {
            // Populate the input with the requested URL
            inputField.value = decodeURIComponent(urlFromQuery);
            launch();
        } 
    };


    /**
     * Validates and triggers the isolation session.
     */
    function launch() {
        const targetUrl = document.getElementById('urlInput').value.trim();
        
        // 3# If input is empty, wait for user to fill it
        if (!targetUrl) {
            abortTimer();
            document.getElementById('timer-msg').innerText = "Error: Please enter a URL first.";
            document.getElementById('timer-msg').style.color = "#c0392b";
            return;
        }

        // Capture screen dimensions
        const width = screen.width;
        const height = screen.height;

        // Trigger the Apache /launch endpoint which maps to launch.cgi
        const launchUrl = `/launch?url=${encodeURIComponent(targetUrl)}&w=${width}&h=${height}`;

        // Switch UI from Launcher to Iframe
        document.getElementById('launcher').style.display = 'none';
        const frame = document.getElementById('rbi-frame');
        frame.style.display = 'block';

        // The iframe loads the CGI script
        frame.src = launchUrl;
         
    }

    function resizeIframe()
    {
        // For soe reason the XPRA does not fill up the entire iframe, even though it detects the window dimensions.
        // This deliberately delayed flicker of screen size fixes the problem
        const frame = document.getElementById('rbi-frame');
        setTimeout(function () {frame.style.height = "99vh"}, 10000); 
        setTimeout(function () {frame.style.height = "100vh"}, 12000); 
        
    }

    </script>
</head>
<body>

<div id="launcher">
    <div class="box">
        <h2>Secure Browser Session</h2>
        <p>Confirm or edit the destination URL:</p>
        
        <input type="text" id="urlInput" placeholder="https://www.google.com" 
                onkeydown="if(event.key==='Enter') launch()">
                
        <button onclick="launch()">Launch RBI Now</button>
    </div>
</div>

<iframe id="rbi-frame" name="rbi-frame" onload="resizeIframe()" ></iframe>

</body>
</html>