|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8" /> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|
<title>Browser Screenshot Tool</title> |
|
<link |
|
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" |
|
rel="stylesheet" |
|
/> |
|
<style> |
|
.loading { |
|
display: none; |
|
} |
|
.screenshot-container { |
|
max-width: 100%; |
|
overflow-x: auto; |
|
} |
|
.screenshot-image { |
|
max-width: 100%; |
|
} |
|
</style> |
|
</head> |
|
<body class="bg-gray-100 min-h-screen"> |
|
<div class="container mx-auto px-4 py-8"> |
|
<h1 class="text-3xl font-bold text-center mb-8"> |
|
Browser Screenshot Tool |
|
</h1> |
|
|
|
<div class="bg-white p-6 rounded-lg shadow-md"> |
|
<form id="screenshot-form" class="mb-4"> |
|
<div class="mb-4"> |
|
<label for="url" class="block text-gray-700 font-medium mb-2" |
|
>URL to capture</label |
|
> |
|
<input |
|
type="url" |
|
id="url" |
|
name="url" |
|
value="https://google.com" |
|
class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" |
|
required |
|
/> |
|
</div> |
|
<button |
|
type="submit" |
|
class="w-full bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg" |
|
> |
|
Take Screenshot |
|
</button> |
|
</form> |
|
|
|
<div id="loading" class="loading flex justify-center items-center py-8"> |
|
<svg |
|
class="animate-spin -ml-1 mr-3 h-8 w-8 text-blue-500" |
|
xmlns="http://www.w3.org/2000/svg" |
|
fill="none" |
|
viewBox="0 0 24 24" |
|
> |
|
<circle |
|
class="opacity-25" |
|
cx="12" |
|
cy="12" |
|
r="10" |
|
stroke="currentColor" |
|
stroke-width="4" |
|
></circle> |
|
<path |
|
class="opacity-75" |
|
fill="currentColor" |
|
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" |
|
></path> |
|
</svg> |
|
<span class="text-lg text-gray-700">Taking screenshot...</span> |
|
</div> |
|
|
|
<div |
|
id="error" |
|
class="hidden bg-red-100 text-red-700 p-4 rounded-lg mt-4" |
|
></div> |
|
|
|
<div id="screenshot" class="hidden mt-6"> |
|
<h2 class="text-xl font-semibold mb-4">Result:</h2> |
|
<div class="screenshot-container border rounded-lg p-2"> |
|
<img |
|
id="screenshot-image" |
|
class="screenshot-image mx-auto" |
|
src="" |
|
alt="Screenshot" |
|
/> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<script> |
|
document |
|
.getElementById("screenshot-form") |
|
.addEventListener("submit", async function (e) { |
|
e.preventDefault(); |
|
|
|
const url = document.getElementById("url").value; |
|
const loadingEl = document.getElementById("loading"); |
|
const errorEl = document.getElementById("error"); |
|
const screenshotEl = document.getElementById("screenshot"); |
|
const screenshotImageEl = document.getElementById("screenshot-image"); |
|
|
|
|
|
errorEl.classList.add("hidden"); |
|
errorEl.textContent = ""; |
|
screenshotEl.classList.add("hidden"); |
|
loadingEl.style.display = "flex"; |
|
|
|
try { |
|
|
|
const formData = new FormData(); |
|
formData.append("url", url); |
|
|
|
|
|
const response = await fetch("/take-screenshot", { |
|
method: "POST", |
|
body: formData, |
|
}); |
|
|
|
const data = await response.json(); |
|
|
|
if (response.ok && data.success) { |
|
|
|
screenshotImageEl.src = data.screenshot_url; |
|
screenshotEl.classList.remove("hidden"); |
|
} else { |
|
|
|
errorEl.textContent = |
|
data.error || |
|
"An error occurred while capturing the screenshot."; |
|
errorEl.classList.remove("hidden"); |
|
} |
|
} catch (error) { |
|
|
|
errorEl.textContent = |
|
"An error occurred while connecting to the server."; |
|
errorEl.classList.remove("hidden"); |
|
console.error(error); |
|
} finally { |
|
|
|
loadingEl.style.display = "none"; |
|
} |
|
}); |
|
</script> |
|
</body> |
|
</html> |
|
|
