Spaces:
Running
Running
Update index.html
Browse files- index.html +58 -5
index.html
CHANGED
|
@@ -2,7 +2,7 @@
|
|
| 2 |
<html lang="en">
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
-
<title>Static Screenshot Tool (
|
| 6 |
|
| 7 |
<style>
|
| 8 |
body {
|
|
@@ -23,6 +23,15 @@ button {
|
|
| 23 |
cursor: pointer;
|
| 24 |
}
|
| 25 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 26 |
#screenshots {
|
| 27 |
margin-top: 25px;
|
| 28 |
display: grid;
|
|
@@ -67,10 +76,10 @@ button {
|
|
| 67 |
<h1>Static Screenshot Tool</h1>
|
| 68 |
|
| 69 |
<textarea id="urlInput" placeholder="Paste URLs (one per line)"></textarea>
|
| 70 |
-
|
| 71 |
<input type="file" id="fileInput" accept=".txt">
|
| 72 |
|
| 73 |
<button onclick="start()">Capture Screenshots</button>
|
|
|
|
| 74 |
|
| 75 |
<div id="screenshots"></div>
|
| 76 |
|
|
@@ -80,9 +89,10 @@ button {
|
|
| 80 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
|
| 81 |
|
| 82 |
<script>
|
| 83 |
-
const ACCESS_KEY = "BiY4yQ0EnzeZ5A";
|
| 84 |
|
| 85 |
let screenshots = [];
|
|
|
|
| 86 |
|
| 87 |
function log(msg) {
|
| 88 |
const l = document.getElementById("logs");
|
|
@@ -93,7 +103,10 @@ function log(msg) {
|
|
| 93 |
async function start() {
|
| 94 |
document.getElementById("screenshots").innerHTML = "";
|
| 95 |
document.getElementById("logs").innerHTML = "";
|
|
|
|
|
|
|
| 96 |
screenshots = [];
|
|
|
|
| 97 |
|
| 98 |
let urls = [];
|
| 99 |
|
|
@@ -133,6 +146,21 @@ async function start() {
|
|
| 133 |
const img = document.createElement("img");
|
| 134 |
img.src = imgUrl;
|
| 135 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 136 |
const label = document.createElement("div");
|
| 137 |
label.className = "url";
|
| 138 |
label.textContent = url;
|
|
@@ -140,10 +168,35 @@ async function start() {
|
|
| 140 |
card.appendChild(img);
|
| 141 |
card.appendChild(label);
|
| 142 |
document.getElementById("screenshots").appendChild(card);
|
| 143 |
-
|
| 144 |
-
log("Loaded: " + url);
|
| 145 |
});
|
| 146 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 147 |
</script>
|
| 148 |
|
| 149 |
</body>
|
|
|
|
| 2 |
<html lang="en">
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
+
<title>Static Screenshot Tool (ZIP Download)</title>
|
| 6 |
|
| 7 |
<style>
|
| 8 |
body {
|
|
|
|
| 23 |
cursor: pointer;
|
| 24 |
}
|
| 25 |
|
| 26 |
+
#downloadZip {
|
| 27 |
+
display: none;
|
| 28 |
+
background: #2563eb;
|
| 29 |
+
color: #fff;
|
| 30 |
+
border: none;
|
| 31 |
+
border-radius: 4px;
|
| 32 |
+
margin-top: 15px;
|
| 33 |
+
}
|
| 34 |
+
|
| 35 |
#screenshots {
|
| 36 |
margin-top: 25px;
|
| 37 |
display: grid;
|
|
|
|
| 76 |
<h1>Static Screenshot Tool</h1>
|
| 77 |
|
| 78 |
<textarea id="urlInput" placeholder="Paste URLs (one per line)"></textarea>
|
|
|
|
| 79 |
<input type="file" id="fileInput" accept=".txt">
|
| 80 |
|
| 81 |
<button onclick="start()">Capture Screenshots</button>
|
| 82 |
+
<button id="downloadZip" onclick="downloadZip()">⬇ Download ZIP</button>
|
| 83 |
|
| 84 |
<div id="screenshots"></div>
|
| 85 |
|
|
|
|
| 89 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
|
| 90 |
|
| 91 |
<script>
|
| 92 |
+
const ACCESS_KEY = "BiY4yQ0EnzeZ5A";
|
| 93 |
|
| 94 |
let screenshots = [];
|
| 95 |
+
let loadedCount = 0;
|
| 96 |
|
| 97 |
function log(msg) {
|
| 98 |
const l = document.getElementById("logs");
|
|
|
|
| 103 |
async function start() {
|
| 104 |
document.getElementById("screenshots").innerHTML = "";
|
| 105 |
document.getElementById("logs").innerHTML = "";
|
| 106 |
+
document.getElementById("downloadZip").style.display = "none";
|
| 107 |
+
|
| 108 |
screenshots = [];
|
| 109 |
+
loadedCount = 0;
|
| 110 |
|
| 111 |
let urls = [];
|
| 112 |
|
|
|
|
| 146 |
const img = document.createElement("img");
|
| 147 |
img.src = imgUrl;
|
| 148 |
|
| 149 |
+
img.onload = () => {
|
| 150 |
+
loadedCount++;
|
| 151 |
+
log(`Screenshot loaded (${loadedCount}/${urls.length})`);
|
| 152 |
+
|
| 153 |
+
if (loadedCount === urls.length) {
|
| 154 |
+
log("All screenshots loaded ✔");
|
| 155 |
+
document.getElementById("downloadZip").style.display = "block";
|
| 156 |
+
}
|
| 157 |
+
};
|
| 158 |
+
|
| 159 |
+
img.onerror = () => {
|
| 160 |
+
loadedCount++;
|
| 161 |
+
log(`Failed to load: ${url}`);
|
| 162 |
+
};
|
| 163 |
+
|
| 164 |
const label = document.createElement("div");
|
| 165 |
label.className = "url";
|
| 166 |
label.textContent = url;
|
|
|
|
| 168 |
card.appendChild(img);
|
| 169 |
card.appendChild(label);
|
| 170 |
document.getElementById("screenshots").appendChild(card);
|
|
|
|
|
|
|
| 171 |
});
|
| 172 |
}
|
| 173 |
+
|
| 174 |
+
async function downloadZip() {
|
| 175 |
+
log("Creating ZIP file...");
|
| 176 |
+
const zip = new JSZip();
|
| 177 |
+
|
| 178 |
+
for (const item of screenshots) {
|
| 179 |
+
log("Fetching image: " + item.url);
|
| 180 |
+
|
| 181 |
+
const res = await fetch(item.imgUrl);
|
| 182 |
+
const blob = await res.blob();
|
| 183 |
+
|
| 184 |
+
const filename = item.url
|
| 185 |
+
.replace(/^https?:\/\//, "")
|
| 186 |
+
.replace(/[\/:?<>|"]/g, "_") + ".png";
|
| 187 |
+
|
| 188 |
+
zip.file(filename, blob);
|
| 189 |
+
}
|
| 190 |
+
|
| 191 |
+
const zipBlob = await zip.generateAsync({ type: "blob" });
|
| 192 |
+
const link = document.createElement("a");
|
| 193 |
+
|
| 194 |
+
link.href = URL.createObjectURL(zipBlob);
|
| 195 |
+
link.download = "screenshots.zip";
|
| 196 |
+
link.click();
|
| 197 |
+
|
| 198 |
+
log("ZIP downloaded ✔");
|
| 199 |
+
}
|
| 200 |
</script>
|
| 201 |
|
| 202 |
</body>
|