Clean up a few interface things, for humans

2024-10-06 15:40:12 -07:00
parent 02667774f3
commit e23cacfcbe
3 changed files with 23 additions and 40 deletions
--- a/interface/index.html
+++ b/interface/index.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Into The Breach as a Service</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            padding: 20px;
+        }
+        #screenshot {
+            margin-top: 20px;
+            cursor: pointer;
+        }
+        .message {
+            margin-top: 20px;
+            color: green;
+        }
+    </style>
+    <script>
+        function takeScreenshot() {
+            fetch('/screenshot')
+                .then(response => response.blob())
+                .then(imageBlob => {
+                    const imageUrl = URL.createObjectURL(imageBlob);
+                    const screenshotImage = document.getElementById('screenshot');
+                    screenshotImage.src = imageUrl;
+                    screenshotImage.style.display = 'block';
+                })
+                .catch(error => {
+                    console.error('Error taking screenshot:', error);
+                });
+        }
+
+        function handleClick(event) {
+            const x = event.pageX - this.offsetLeft;
+            const y = event.pageY - this.offsetTop;
+
+            fetch(`/click/${x}/${y}`)
+                .then(response => response.text())
+                .then(message => {
+                    document.getElementById('click-message').innerText = message;
+                })
+                .then(() => {
+                  takeScreenshot();
+                })
+                .catch(error => {
+                    console.error('Error triggering click:', error);
+                });
+        }
+
+        function init() {
+          const clickableImage = document.getElementById('screenshot');
+          clickableImage.addEventListener('click', handleClick);
+          takeScreenshot();
+        }
+    </script>
+</head>
+<body onload="init()">
+    <button onclick="takeScreenshot()">Refresh Screenshot</button>
+    <div id="screenshot-div">
+        <p><strong>Click on the Image to Trigger Click at X, Y:</strong></p>
+        <img id="screenshot" width='1280px' height='720px' style="display:none;" />
+    </div>
+
+    <div class="message" id="click-message"></div>
+</body>
+</html>
+