diff options
| author | Paul Oliver <contact@pauloliver.dev> | 2025-12-11 14:10:10 +0000 |
|---|---|---|
| committer | Paul Oliver <contact@pauloliver.dev> | 2025-12-11 14:10:10 +0000 |
| commit | 76435516f5784124f3aa8cd540f9e7ab0047882d (patch) | |
| tree | 1c2e36a5f73ce0e181de27a9e47562b32f77c45d | |
| parent | 8dae3b25dd6b73730c4420581697ba13deb97207 (diff) | |
Improves web interface (WIP)
| -rw-r--r-- | hsm-web/Html/index.html | 22 |
1 files changed, 15 insertions, 7 deletions
diff --git a/hsm-web/Html/index.html b/hsm-web/Html/index.html index 030e8e5..814f6e7 100644 --- a/hsm-web/Html/index.html +++ b/hsm-web/Html/index.html @@ -5,16 +5,15 @@ <meta charset="utf-8"/> </head> <body> - <h2>HsMouse Monitor</h2> - <img id="my_img"></img> + <img id="cam_view" /> </body> <script> - function updateImg() { + updateImg = () => { fetch("cam.png") .then(response => response.blob()) .then(function(myBlob){ - URL.revokeObjectURL(my_img.src) - my_img.src = URL.createObjectURL(myBlob) + URL.revokeObjectURL(cam_view.src) + cam_view.src = URL.createObjectURL(myBlob) updateImg() }) } @@ -25,10 +24,19 @@ background-color: #002b36; color: #586e75; font-family: monospace; + height: 100%; + margin: 0; + position: relative; } - img { + #cam_view { + left: 50%; + margin: auto; + max-height: calc(100% - 20px); + max-width: calc(100% - 20px); outline: 2px solid #586e75; - width: 100%; + position: absolute; + top: 10px; + transform: translate(-50%, 0); } </style> </html> |