| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>QEMU Virtual Machine</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| html, body { | |
| width: 100%; | |
| height: 100%; | |
| overflow: hidden; | |
| background: #000; | |
| } | |
| .container { | |
| width: 100%; | |
| height: 100%; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .display { | |
| flex: 1; | |
| border: 1px solid #333; | |
| background: #111; | |
| position: relative; | |
| } | |
| #vncDisplay { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| } | |
| .controls { | |
| height: 40px; | |
| background: #1a1a1a; | |
| border-bottom: 1px solid #333; | |
| display: flex; | |
| align-items: center; | |
| padding: 0 10px; | |
| gap: 10px; | |
| } | |
| button { | |
| background: #333; | |
| border: 1px solid #444; | |
| color: #fff; | |
| padding: 5px 15px; | |
| border-radius: 3px; | |
| cursor: pointer; | |
| } | |
| button:hover { | |
| background: #444; | |
| } | |
| select { | |
| background: #333; | |
| border: 1px solid #444; | |
| color: #fff; | |
| padding: 5px; | |
| border-radius: 3px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="controls"> | |
| <button id="bootBtn">Boot</button> | |
| <button id="shutdownBtn">Shutdown</button> | |
| <select id="resolution"> | |
| <option value="1920,1080">1920x1080</option> | |
| <option value="1280,720">1280x720</option> | |
| <option value="800,600">800x600</option> | |
| </select> | |
| <button id="fullscreenBtn">Fullscreen</button> | |
| </div> | |
| <div class="display"> | |
| <div id="vncDisplay"></div> | |
| </div> | |
| </div> | |
| <script src="/static/js/noVNC.js"></script> | |
| <script src="/static/js/vm_control.js"></script> | |
| </body> | |
| </html> | |