Spaces:

abeea
/

Screenshot

Running

App Files Files Community

abeea commited on Jan 20

Commit

52faf17

verified ·

1 Parent(s): 41ab1b6

Update index.html

Browse files

Files changed (1) hide show

index.html +53 -147

index.html CHANGED Viewed

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
 <meta charset="UTF-8">
-<title>Bulk Screenshot Tool (Logs + ZIP)</title>
 <style>
 body {
@@ -10,20 +10,11 @@ body {
   max-width: 1100px;
   margin: 20px auto;
   padding: 20px;
-  background: #f5f7fa;
 }
-h1 { text-align: center; }
-textarea {
   width: 100%;
-  height: 120px;
-  padding: 10px;
-  margin-top: 10px;
-  resize: vertical;
-}
-input, button {
   padding: 10px;
   margin-top: 10px;
 }
@@ -32,11 +23,6 @@ button {
   cursor: pointer;
 }
-#status {
-  margin-top: 15px;
-  font-weight: bold;
-}
 #screenshots {
   margin-top: 25px;
   display: grid;
@@ -64,180 +50,100 @@ button {
 #logs {
   margin-top: 20px;
-  background: #0f172a;
   color: #e5e7eb;
   padding: 10px;
-  height: 200px;
   overflow-y: auto;
   font-family: monospace;
   font-size: 12px;
   border-radius: 6px;
 }
-#downloadZip {
-  display: none;
-  margin-top: 15px;
-  background: #2563eb;
-  color: #fff;
-  border: none;
-  border-radius: 4px;
-}
 </style>
 </head>
 <body>
-<h1>Bulk Screenshot Tool</h1>
-<h3>1️⃣ Paste URL(s)</h3>
-<textarea id="urlInput" placeholder="https://example.com&#10;https://example.com/login&#10;https://example.com/admin"></textarea>
-<h3>OR</h3>
-<h3>2️⃣ Upload .txt File</h3>
 <input type="file" id="fileInput" accept=".txt">
-<br>
-<button id="startBtn">▶ Start Capture</button>
-<button id="downloadZip">⬇ Download ZIP</button>
-<div id="status"></div>
-<h3>🖼 Screenshots</h3>
 <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"; // 🔴 replace
-let screenshotData = [];
-function log(message) {
-  const logs = document.getElementById("logs");
-  logs.innerHTML += `[${new Date().toLocaleTimeString()}] ${message}<br>`;
-  logs.scrollTop = logs.scrollHeight;
 }
-document.getElementById("startBtn").addEventListener("click", async () => {
-  const textarea = document.getElementById("urlInput").value;
-  const fileInput = document.getElementById("fileInput");
-  const status = document.getElementById("status");
-  const container = document.getElementById("screenshots");
-  container.innerHTML = "";
-  screenshotData = [];
-  document.getElementById("downloadZip").style.display = "none";
   document.getElementById("logs").innerHTML = "";
   let urls = [];
-  if (textarea.trim()) {
-    log("Reading URLs from textarea");
-    urls = textarea.split(/\r?\n/).map(u => u.trim()).filter(Boolean);
-  } else if (fileInput.files.length) {
-    log("Reading URLs from file");
-    const text = await fileInput.files[0].text();
     urls = text.split(/\r?\n/).map(u => u.trim()).filter(Boolean);
   } else {
-    alert("Paste URLs or upload a .txt file");
     return;
   }
-  log(`Total URLs detected: ${urls.length}`);
-  status.textContent = `Sending ${urls.length} URLs to ScreenshotOne...`;
-  const payload = {
-    access_key: ACCESS_KEY,
-    execute: true,
-    optimize: false,
-    options: {
-      viewport_width: 1280,
-      viewport_height: 1024,
-      full_page: true,
-      block_ads: true,
-      block_cookie_banners: true
-    },
-    requests: urls.map(url => ({ url }))
-  };
-  try {
-    log("Sending bulk request...");
-    const res = await fetch("https://api.screenshotone.com/bulk", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(payload)
-    });
-    log(`HTTP Status: ${res.status}`);
-    const data = await res.json();
-    if (!data.responses) throw new Error("Invalid API response");
-    data.responses.forEach((item, i) => {
-      screenshotData.push({ url: urls[i], image: item.url });
-      const card = document.createElement("div");
-      card.className = "card";
-      const img = document.createElement("img");
-      img.src = item.url;
-      img.loading = "lazy";
-      const label = document.createElement("div");
-      label.className = "url";
-      label.textContent = urls[i];
-      card.appendChild(img);
-      card.appendChild(label);
-      container.appendChild(card);
-      log(`Screenshot ready: ${urls[i]}`);
-    });
-    status.textContent = "Screenshots captured successfully ✔";
-    document.getElementById("downloadZip").style.display = "inline-block";
-    log("All screenshots processed");
-  } catch (err) {
-    console.error(err);
-    status.textContent = "❌ Error occurred";
-    log("ERROR: " + err.message);
-  }
-});
-document.getElementById("downloadZip").addEventListener("click", async () => {
-  const zip = new JSZip();
-  const status = document.getElementById("status");
-  status.textContent = "Creating ZIP...";
-  log("Starting ZIP generation");
-  for (const item of screenshotData) {
-    log(`Downloading image: ${item.url}`);
-    const res = await fetch(item.image);
-    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();
-  status.textContent = "ZIP downloaded ✔";
-  log("ZIP download completed");
-});
 </script>
 </body>

 <html lang="en">
 <head>
 <meta charset="UTF-8">
+<title>Static Screenshot Tool (HF Compatible)</title>
 <style>
 body {
   max-width: 1100px;
   margin: 20px auto;
   padding: 20px;
+  background: #f4f6f8;
 }
+textarea, input, button {
   width: 100%;
   padding: 10px;
   margin-top: 10px;
 }
   cursor: pointer;
 }
 #screenshots {
   margin-top: 25px;
   display: grid;
 #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>
 <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 = "YOUR_SCREENSHOTONE_API_KEY"; // exposed but required in static
+let screenshots = [];
+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 = "";
+  screenshots = [];
   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;
+    const label = document.createElement("div");
+    label.className = "url";
+    label.textContent = url;
+    card.appendChild(img);
+    card.appendChild(label);
+    document.getElementById("screenshots").appendChild(card);
+    log("Loaded: " + url);
+  });
+}
 </script>
 </body>