first commit

2025-02-06 15:15:51 +00:00
commit 826d9573d8
8 changed files with 279 additions and 0 deletions
--- a/app/docs/index.html
+++ b/app/docs/index.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Screenshot API Tester</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="container">
+        <h1>📸 Screenshot API Tester</h1>
+        
+        <label>URL:</label>
+        <input type="text" id="url" value="https://example.com">
+
+        <label>Width:</label>
+        <input type="number" id="width" value="1280">
+
+        <label>Height:</label>
+        <input type="number" id="height" value="720">
+
+        <label>Device:</label>
+        <select id="device">
+            <option value="desktop">Desktop</option>
+            <option value="mobile">Mobile</option>
+            <option value="tablet">Tablet</option>
+        </select>
+
+        <button onclick="startScreenshot()">Take Screenshot</button>
+
+        <h3>Real-Time Updates:</h3>
+        <div id="log"></div>
+
+        <h3>Screenshot:</h3>
+        <img id="screenshot" src="" style="display:none; max-width: 100%;">
+        <a id="download" style="display:none;" download>Download Screenshot</a>
+    </div>
+
+    <script>
+        let socket = new WebSocket("ws://yourserver.com/ws");
+
+        socket.onmessage = function(event) {
+            let log = document.getElementById("log");
+            let message = JSON.parse(event.data);
+            
+            if (message.screenshot_url) {
+                let img = document.getElementById("screenshot");
+                img.src = message.screenshot_url;
+                img.style.display = "block";
+
+                let download = document.getElementById("download");
+                download.href = message.screenshot_url;
+                download.style.display = "block";
+            } else {
+                log.innerHTML += `<p>${event.data}</p>`;
+            }
+        };
+
+        function startScreenshot() {
+            let params = {
+                url: document.getElementById("url").value,
+                width: parseInt(document.getElementById("width").value),
+                height: parseInt(document.getElementById("height").value),
+                full_height: false,
+                format: "png",
+                click_selectors: [],
+                delay: 1000,
+                device: document.getElementById("device").value
+            };
+
+            socket.send(JSON.stringify(params));
+        }
+    </script>
+</body>
+</html>
--- a/app/docs/style.css
+++ b/app/docs/style.css
@@ -0,0 +1,44 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f4f4f4;
+    margin: 0;
+    padding: 0;
+}
+
+.container {
+    width: 80%;
+    max-width: 600px;
+    margin: 20px auto;
+    background: white;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+}
+
+h1, h3 {
+    color: #333;
+}
+
+label {
+    display: block;
+    margin-top: 10px;
+}
+
+input, select {
+    width: 100%;
+    padding: 8px;
+    margin-top: 5px;
+}
+
+button {
+    margin-top: 15px;
+    padding: 10px;
+    background-color: #0073e6;
+    color: white;
+    border: none;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: #005bb5;
+}