openwrt-docker/web/index.html

<!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="Cache-Control" content="no-cache" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="icon" href="img/favicon.svg" type="image/x-icon">

        <style>
            div {
                text-align:center;
            }
            
            html, body, iframe { height: 99%; }

            iframe {
                display:inline-block;
                border: solid;
            }
            .grid-container {
                display: grid;
                grid-template-columns: 20% 79%;
                grid-template-rows: 10% 89%;
                gap: 10px;
                height: 100%
            }

            .grid-container > div {
                text-align: center;
            }

            .item3 {
                grid-row: 1 / span 2;
                grid-column: 2;
            }

            .button {
                background-color: #008CBA; /* Green */
                border: none;
                color: white;
                padding: 16px 32px;
                text-align: center;
                text-decoration: none;
                display: inline-block;
                font-size: 16px;
                margin: 4px 2px;
                transition-duration: 0.4s;
                cursor: pointer;
            }

            .button:hover {
                background-color: #005a79;
                color: white;
            }

            .tooltip {
                position: relative;
                display: inline-block;
            }

            .tooltip .tooltiptext {
                visibility: hidden;
                width: 300px;
                background-color: black;
                color: #fff;
                text-align: center;
                border-radius: 6px;
                padding: 5px 0;
                position: absolute;
                z-index: 1;
                top: 60px;
                left: 25%;
                margin-left: -60px;
            }

            .tooltip .tooltiptext::after {
                content: "";
                position: absolute;
                bottom: 100%;
                left: 50%;
                margin-left: -5px;
                border-width: 5px;
                border-style: solid;
                border-color: transparent transparent black transparent;
            }

            .tooltip:hover .tooltiptext {
                visibility: visible;
            }

            ul {
                text-align: left;
            }

        </style>  
    </head>

    <body>  
        <div class="grid-container">
            <div  class="item1 tooltip">
                <script language="JavaScript">
                    document.write('<a target="_blank" rel="noopener noreferrer" href="https://' + window.location.hostname + ':9000" class="button" >Open OpenWrt LuCI web interface</a> ' );
                </script>
                <span class="tooltiptext">
                    Access via HTTPS to OpenWrt LuCI web interface
                    <br><br>
                    Requirements
                    <ul>
                        <li>LAN="veth"</li>
                        <li>FORWARD_LUCI="true"</li>
                        <li>Default OpenWrt DHCP LAN settings</li>
                        <li>Configured "veth-openwrt0" Ethernet interface in host system</li>
                    </ul>
                    Internally a reverse proxy is forwarding the web interface from "host-ip:9000" to "172.31.1.1:80"
                </span>
            </div>
            <div class="item2">
                <iframe src=---SED_REPLACEMENT_TAG--- width="95%"></iframe>
            </div>
            <div class="item3">
                <iframe src="novnc/" width="100%"></iframe>
            </div>
        </div>
    </body>
</html>