76 lines
2.4 KiB
HTML
76 lines
2.4 KiB
HTML
<!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>
|