Add button to open LuCI

web/index.html

@@ -11,20 +11,112 @@
                 text-align:center;
             }
             
-            html, body, div, iframe { height: 99%; }
+            html, body, iframe { height: 99%; }
 
             iframe {
                 display:inline-block;
-                margin: 5px auto;
                 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>
-        <iframe src="script-server/" width="27%"></iframe>
-        <iframe src="novnc/" width="70%"></iframe>
+        <div class="grid-container">
+            <div  class="item1 tooltip">
+                <script language="JavaScript">
+                    document.write('<a href="' + window.location.protocol + '//' + window.location.hostname + ':9000' + '" class="button" >Open OpenWrt LuCI web interface</a> ' );
+                </script>
+                <span class="tooltiptext">
+                    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> 
+                </span>
+            </div>
+            <div class="item2">
+                <iframe src="script-server/" width="95%"></iframe>
+            </div>
+            <div class="item3">
+                <iframe src="novnc/" width="100%"></iframe>
+            </div>
         </div>
     </body>
 </html>