File size: 4,732 Bytes
0eb5f56 2b6f74b 0eb5f56 2b6f74b 0eb5f56 2b6f74b 0eb5f56 0ef192c 0eb5f56 2b6f74b 0eb5f56 2b6f74b 0eb5f56 2b6f74b 0eb5f56 2b6f74b 0eb5f56 2b6f74b 0eb5f56 2b6f74b 0eb5f56 2b6f74b 0eb5f56 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 |
<!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");
// Reset UI
errorEl.classList.add("hidden");
errorEl.textContent = "";
screenshotEl.classList.add("hidden");
loadingEl.style.display = "flex";
try {
// Create form data
const formData = new FormData();
formData.append("url", url);
// Send request
const response = await fetch("/take-screenshot", {
method: "POST",
body: formData,
});
const data = await response.json();
if (response.ok && data.success) {
// Show screenshot
screenshotImageEl.src = data.screenshot_url;
screenshotEl.classList.remove("hidden");
} else {
// Show error
errorEl.textContent =
data.error ||
"An error occurred while capturing the screenshot.";
errorEl.classList.remove("hidden");
}
} catch (error) {
// Show error
errorEl.textContent =
"An error occurred while connecting to the server.";
errorEl.classList.remove("hidden");
console.error(error);
} finally {
// Hide loading
loadingEl.style.display = "none";
}
});
</script>
</body>
</html>
|