Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Static Screenshot Tool (ZIP Download)</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| max-width: 1100px; | |
| margin: 20px auto; | |
| padding: 20px; | |
| background: #f4f6f8; | |
| } | |
| textarea, input, button { | |
| width: 100%; | |
| padding: 10px; | |
| margin-top: 10px; | |
| } | |
| button { | |
| cursor: pointer; | |
| } | |
| #downloadZip { | |
| display: none; | |
| background: #2563eb; | |
| color: #fff; | |
| border: none; | |
| border-radius: 4px; | |
| margin-top: 15px; | |
| } | |
| #screenshots { | |
| margin-top: 25px; | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); | |
| gap: 15px; | |
| } | |
| .card { | |
| background: #fff; | |
| padding: 10px; | |
| border-radius: 6px; | |
| box-shadow: 0 2px 6px rgba(0,0,0,.1); | |
| } | |
| .card img { | |
| width: 100%; | |
| border-radius: 4px; | |
| } | |
| .url { | |
| font-size: 12px; | |
| word-break: break-all; | |
| margin-top: 5px; | |
| } | |
| #logs { | |
| margin-top: 20px; | |
| background: #111827; | |
| color: #e5e7eb; | |
| padding: 10px; | |
| height: 180px; | |
| overflow-y: auto; | |
| font-family: monospace; | |
| font-size: 12px; | |
| border-radius: 6px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Static Screenshot Tool</h1> | |
| <textarea id="urlInput" placeholder="Paste URLs (one per line)"></textarea> | |
| <input type="file" id="fileInput" accept=".txt"> | |
| <button onclick="start()">Capture Screenshots</button> | |
| <button id="downloadZip" onclick="downloadZip()">⬇ Download ZIP</button> | |
| <div id="screenshots"></div> | |
| <h3>Logs</h3> | |
| <div id="logs"></div> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script> | |
| <script> | |
| const ACCESS_KEY = "BiY4yQ0EnzeZ5A"; | |
| let screenshots = []; | |
| let loadedCount = 0; | |
| function log(msg) { | |
| const l = document.getElementById("logs"); | |
| l.innerHTML += `[${new Date().toLocaleTimeString()}] ${msg}<br>`; | |
| l.scrollTop = l.scrollHeight; | |
| } | |
| async function start() { | |
| document.getElementById("screenshots").innerHTML = ""; | |
| document.getElementById("logs").innerHTML = ""; | |
| document.getElementById("downloadZip").style.display = "none"; | |
| screenshots = []; | |
| loadedCount = 0; | |
| let urls = []; | |
| const text = document.getElementById("urlInput").value.trim(); | |
| const file = document.getElementById("fileInput").files[0]; | |
| if (text) { | |
| urls = text.split(/\r?\n/).map(u => u.trim()).filter(Boolean); | |
| log("Using textarea URLs"); | |
| } else if (file) { | |
| const content = await file.text(); | |
| urls = content.split(/\r?\n/).map(u => u.trim()).filter(Boolean); | |
| log("Using file URLs"); | |
| } else { | |
| alert("Add URLs first"); | |
| return; | |
| } | |
| log(`Total URLs: ${urls.length}`); | |
| urls.forEach(url => { | |
| const imgUrl = | |
| "https://api.screenshotone.com/take" + | |
| "?access_key=" + ACCESS_KEY + | |
| "&url=" + encodeURIComponent(url) + | |
| "&viewport_width=1280" + | |
| "&viewport_height=1024" + | |
| "&full_page=true" + | |
| "&block_ads=true" + | |
| "&block_cookie_banners=true"; | |
| screenshots.push({ url, imgUrl }); | |
| const card = document.createElement("div"); | |
| card.className = "card"; | |
| const img = document.createElement("img"); | |
| img.src = imgUrl; | |
| img.onload = () => { | |
| loadedCount++; | |
| log(`Screenshot loaded (${loadedCount}/${urls.length})`); | |
| if (loadedCount === urls.length) { | |
| log("All screenshots loaded ✔"); | |
| document.getElementById("downloadZip").style.display = "block"; | |
| } | |
| }; | |
| img.onerror = () => { | |
| loadedCount++; | |
| log(`Failed to load: ${url}`); | |
| }; | |
| const label = document.createElement("div"); | |
| label.className = "url"; | |
| label.textContent = url; | |
| card.appendChild(img); | |
| card.appendChild(label); | |
| document.getElementById("screenshots").appendChild(card); | |
| }); | |
| } | |
| async function downloadZip() { | |
| log("Creating ZIP file..."); | |
| const zip = new JSZip(); | |
| for (const item of screenshots) { | |
| log("Fetching image: " + item.url); | |
| const res = await fetch(item.imgUrl); | |
| const blob = await res.blob(); | |
| const filename = item.url | |
| .replace(/^https?:\/\//, "") | |
| .replace(/[\/:?<>|"]/g, "_") + ".png"; | |
| zip.file(filename, blob); | |
| } | |
| const zipBlob = await zip.generateAsync({ type: "blob" }); | |
| const link = document.createElement("a"); | |
| link.href = URL.createObjectURL(zipBlob); | |
| link.download = "screenshots.zip"; | |
| link.click(); | |
| log("ZIP downloaded ✔"); | |
| } | |
| </script> | |
| </body> | |
| </html> |