Spaces:
Sleeping
Sleeping
| <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> | |