Spaces:

simoncck
/

headless_browser

No application file

App Files Files Community

simoncck commited on Jun 17, 2025

Commit

d44d184

verified ·

1 Parent(s): 905cff9

Update browser_automation_ui.html

Browse files

Files changed (1) hide show

browser_automation_ui.html +22 -7

browser_automation_ui.html CHANGED Viewed

@@ -41,6 +41,7 @@
     .api-section { background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px; overflow:hidden; margin-bottom:40px; }
     .api-header { display:flex; align-items:center; gap:10px; padding:18px 24px; background:linear-gradient(135deg,#4f46e5,#7c3aed); color:#fff; }
     .api-header i { font-size:20px; }
     .api-body { padding:24px; }
     .form-group { margin-bottom:20px; }
     label { display:block; margin-bottom:6px; font-weight:500; }
@@ -50,9 +51,16 @@
     .btn { display:inline-flex; align-items:center; gap:6px; padding:12px 24px; border:none; border-radius:8px; font-weight:500; cursor:pointer; transition:.25s; }
     .btn-primary { background:linear-gradient(135deg,#4f46e5,#7c3aed); color:#fff; box-shadow:0 4px 12px rgba(79,70,229,.3); }
     .btn-primary:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(79,70,229,.4); }
     .response-area { margin-top:20px; background:#1e293b; color:#e2e8f0; font-family:'Source Code Pro',monospace; padding:16px; border-radius:8px; white-space:pre-wrap; max-height:350px; overflow-y:auto; border:1px solid #334155; }
     .selector-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
     .selector-chip { background:#e0e7ff; color:#3730a3; padding:4px 8px; border-radius:6px; cursor:pointer; font-size:.8rem; }
   </style>
 </head>
 <body>
@@ -99,12 +107,12 @@
             <button class="btn btn-primary" onclick="takeScreenshot()"><i class="lucide lucide-camera"></i>Capture</button>
             <a id="downloadBtn"
                class="btn btn-secondary"
-               style="display:block;margin-left:8px;"
                download="screenshot.png">
                <i class="lucide lucide-download"></i>Download
             </a>
-            <div id="shotPreview" style="margin-top:16px;"></div>
-            <div class="response-area" id="shotResp"></div>
           </div>
         </section>
@@ -233,10 +241,17 @@ All endpoints return { ok: true/false, data, error }
     async function takeScreenshot () {
       const out = await api('/browser/screenshot');
       alert("Your message here");
       // Separate the big base64 string so we don’t dump it in the response box
       const { b64, ...meta } = out;
       document.getElementById('shotResp').textContent = JSON.stringify(meta, null, 2);
       if (b64) {
         const dataUrl = `data:image/png;base64,${b64}`;
@@ -244,12 +259,12 @@ All endpoints return { ok: true/false, data, error }
         // Show thumbnail
         document.getElementById('shotPreview').innerHTML =
           `<img src="${dataUrl}" style="max-width:100%;border:1px solid #e2e8f0;border-radius:8px;">`;
         // Wire up & reveal the download button
-        const dl = document.getElementById('downloadBtn');
-        dl.href = dataUrl;
-        //alert(dataUrl);
-        dl.style.display = 'inline-flex';
       }
     }

     .api-section { background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px; overflow:hidden; margin-bottom:40px; }
     .api-header { display:flex; align-items:center; gap:10px; padding:18px 24px; background:linear-gradient(135deg,#4f46e5,#7c3aed); color:#fff; }
     .api-header i { font-size:20px; }
+    .api-header h3 {margin: 0;font-size: 18px;font-weight: 600;}
     .api-body { padding:24px; }
     .form-group { margin-bottom:20px; }
     label { display:block; margin-bottom:6px; font-weight:500; }
     .btn { display:inline-flex; align-items:center; gap:6px; padding:12px 24px; border:none; border-radius:8px; font-weight:500; cursor:pointer; transition:.25s; }
     .btn-primary { background:linear-gradient(135deg,#4f46e5,#7c3aed); color:#fff; box-shadow:0 4px 12px rgba(79,70,229,.3); }
     .btn-primary:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(79,70,229,.4); }
+    .btn-secondary {background: #6c757d;color: white;margin-left: 8px;}
+    .btn-secondary:hover {background: #545b62;transform: translateY(-1px);}
+    .btn i {width: 16px;height: 16px;}
+    #shotPreview {margin-top: 16px;min-height: 40px;border: 2px dashed #dee2e6;border-radius: 6px;display: flex;align-items: center;justify-content: center;color: #6c757d;font-style: italic;}
     .response-area { margin-top:20px; background:#1e293b; color:#e2e8f0; font-family:'Source Code Pro',monospace; padding:16px; border-radius:8px; white-space:pre-wrap; max-height:350px; overflow-y:auto; border:1px solid #334155; }
     .selector-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
     .selector-chip { background:#e0e7ff; color:#3730a3; padding:4px 8px; border-radius:6px; cursor:pointer; font-size:.8rem; }
+    /* Simulate Lucide icons with simple shapes */
+    .lucide-camera::before {content: "📷";font-size: 16px;}
+    .lucide-download::before {content: "⬇️";font-size: 14px;}
   </style>
 </head>
 <body>
             <button class="btn btn-primary" onclick="takeScreenshot()"><i class="lucide lucide-camera"></i>Capture</button>
             <a id="downloadBtn"
                class="btn btn-secondary"
+               style="display:none;margin-left:8px;"
                download="screenshot.png">
                <i class="lucide lucide-download"></i>Download
             </a>
+            <div id="shotPreview" style="margin-top:16px;">Screenshot preview will appear here</div>
+            <div class="response-area" id="shotResp">Response messages will appear here</div>
           </div>
         </section>
     async function takeScreenshot () {
       const out = await api('/browser/screenshot');
       alert("Your message here");
+      const preview = document.getElementById('shotPreview');
+      const downloadBtn = document.getElementById('downloadBtn');
+      const response = document.getElementById('shotResp');
       // Separate the big base64 string so we don’t dump it in the response box
       const { b64, ...meta } = out;
       document.getElementById('shotResp').textContent = JSON.stringify(meta, null, 2);
+      const dl = document.getElementById('downloadBtn');
+      dl.style.display = 'inline-flex';
       if (b64) {
         const dataUrl = `data:image/png;base64,${b64}`;
         // Show thumbnail
         document.getElementById('shotPreview').innerHTML =
           `<img src="${dataUrl}" style="max-width:100%;border:1px solid #e2e8f0;border-radius:8px;">`;
+         //'<div style="padding: 20px; background: #e9ecef; border-radius: 4px; text-align: center;">📸 Screenshot captured!</div>';
         // Wire up & reveal the download button
+        //const dl = document.getElementById('downloadBtn');
+        //dl.href = dataUrl;
+        //dl.style.display = 'inline-flex';
       }
     }