Version 2 improvements with UI and functionality
This commit is contained in:
Andy Dixon
+125
-9
@@ -9,17 +9,101 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="container-fluid p-3">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h4 class="mb-0">GreasyBoii</h4>
|
||||
<button class="btn btn-primary btn-sm" id="addRuleBtn">+ Add Rule</button>
|
||||
<div class="brand-row d-flex justify-content-between align-items-center mb-2">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<img src="icon48.png" alt="" class="brand-icon">
|
||||
<div>
|
||||
<h4 class="mb-0 brand-title">GreasyBoii</h4>
|
||||
<div class="brand-tagline">🐒 grease-monkey grade page tweaks</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-check form-switch mb-0 power-switch" title="Master enable/disable (Ctrl+Shift+G)">
|
||||
<input class="form-check-input" type="checkbox" id="masterToggle" checked>
|
||||
<label class="form-check-label small" for="masterToggle" id="masterToggleLabel">On</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="rulesList" class="rules-list mb-3">
|
||||
<!-- Rules will be dynamically inserted here -->
|
||||
<div class="hazard-strip mb-3"></div>
|
||||
|
||||
<div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
|
||||
<ul class="nav nav-tabs" id="mainTabs" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link active" id="rulesTabBtn" data-bs-toggle="tab" data-bs-target="#rulesPane" type="button" role="tab">Rules</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="toolsTabBtn" data-bs-toggle="tab" data-bs-target="#toolsPane" type="button" role="tab">Tools</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="d-flex gap-2">
|
||||
<button class="btn btn-sm btn-outline-light" id="darkModeBtn" title="Add a dark-mode rule for this site">🌓</button>
|
||||
<button class="btn btn-sm btn-outline-light" id="exportRulesBtn" title="Export rules to JSON">⬇ Export</button>
|
||||
<button class="btn btn-sm btn-outline-light" id="importRulesBtn" title="Import rules from JSON">⬆ Import</button>
|
||||
<input type="file" id="importFileInput" accept="application/json" hidden>
|
||||
<button class="btn btn-primary btn-sm" id="addRuleBtn">+ Add Rule</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="emptyState" class="text-center text-muted py-4" style="display: none;">
|
||||
<p>No rules yet. Click "Add Rule" to get started.</p>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane fade show active" id="rulesPane" role="tabpanel">
|
||||
<div id="rulesList" class="rules-list mb-3">
|
||||
<!-- Rules will be dynamically inserted here -->
|
||||
</div>
|
||||
|
||||
<div id="emptyState" class="text-center text-muted py-4" style="display: none;">
|
||||
<p>No rules yet. Click "Add Rule" to get started.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-pane fade" id="toolsPane" role="tabpanel">
|
||||
<div class="tool-card mb-3">
|
||||
<h6>📥 Bulk Media Downloader</h6>
|
||||
<div class="d-flex gap-2 mb-2">
|
||||
<select class="form-select form-select-sm" id="mediaType" style="max-width: 150px;">
|
||||
<option value="images">Images</option>
|
||||
<option value="pdfs">PDFs</option>
|
||||
<option value="videos">Videos</option>
|
||||
<option value="custom">Custom extensions</option>
|
||||
</select>
|
||||
<input type="text" class="form-control form-control-sm" id="mediaExtensions" placeholder="jpg,png,zip" style="display: none;">
|
||||
<button class="btn btn-sm btn-outline-light" id="scanMediaBtn">Scan Page</button>
|
||||
</div>
|
||||
<div id="mediaResults" class="tool-results small text-muted">No scan yet.</div>
|
||||
<button class="btn btn-sm btn-primary mt-2" id="downloadMediaBtn" disabled>Download All (0)</button>
|
||||
</div>
|
||||
|
||||
<div class="tool-card mb-3">
|
||||
<h6>🔗 Link Harvester</h6>
|
||||
<div class="d-flex gap-2 mb-2">
|
||||
<input type="text" class="form-control form-control-sm" id="linkContainerSelector" placeholder="Container selector (blank = whole page)">
|
||||
<button class="btn btn-sm btn-outline-light" id="harvestLinksBtn">Extract</button>
|
||||
</div>
|
||||
<div id="linkResults" class="tool-results small text-muted">No links extracted yet.</div>
|
||||
<div class="d-flex gap-2 mt-2">
|
||||
<button class="btn btn-sm btn-primary" id="openLinksBtn" disabled>Open Selected in Tabs</button>
|
||||
<button class="btn btn-sm btn-outline-light" id="exportLinksBtn" disabled>Export .txt</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tool-card mb-3">
|
||||
<h6>🧮 Page Data Scraper</h6>
|
||||
<div class="d-flex gap-2 mb-2">
|
||||
<input type="text" class="form-control form-control-sm" id="scrapeSelector" placeholder="CSS selector, e.g. .price">
|
||||
<select class="form-select form-select-sm" id="scrapeAttribute" style="max-width: 120px;">
|
||||
<option value="text">Text</option>
|
||||
<option value="href">href</option>
|
||||
<option value="src">src</option>
|
||||
<option value="custom">Attribute…</option>
|
||||
</select>
|
||||
</div>
|
||||
<input type="text" class="form-control form-control-sm mb-2" id="scrapeCustomAttr" placeholder="attribute name" style="display: none;">
|
||||
<button class="btn btn-sm btn-outline-light" id="scrapeBtn">Scrape</button>
|
||||
<div id="scrapeResults" class="tool-results small text-muted mt-2">No data scraped yet.</div>
|
||||
<div class="d-flex gap-2 mt-2">
|
||||
<button class="btn btn-sm btn-primary" id="exportCsvBtn" disabled>Export CSV</button>
|
||||
<button class="btn btn-sm btn-outline-light" id="exportJsonBtn" disabled>Export JSON</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -55,8 +139,11 @@
|
||||
|
||||
<div class="mb-3" id="elementSelectorGroup" style="display: none;">
|
||||
<label for="elementSelector" class="form-label">Element Selector</label>
|
||||
<input type="text" class="form-control" id="elementSelector" placeholder="e.g., #my-element or .my-class">
|
||||
<small class="form-text text-muted">Enter a CSS selector</small>
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" id="elementSelector" placeholder="e.g., #my-element or .my-class">
|
||||
<button class="btn btn-outline-secondary" type="button" id="pickElementBtn" title="Pick element on the page">🎯 Pick</button>
|
||||
</div>
|
||||
<small class="form-text text-muted">Enter a CSS selector, or click Pick and select it on the page</small>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
@@ -69,6 +156,35 @@
|
||||
<textarea class="form-control font-monospace" id="css" rows="6" placeholder="body { background-color: #000; }"></textarea>
|
||||
</div>
|
||||
|
||||
<details class="mb-3" id="advancedSection">
|
||||
<summary class="form-label">🔧 Advanced (auto-click, text replace, SPA re-apply)</summary>
|
||||
<div class="border rounded p-2 mt-2">
|
||||
<div class="mb-2">
|
||||
<label for="autoClickSelector" class="form-label small">Auto-Click Selector</label>
|
||||
<input type="text" class="form-control form-control-sm" id="autoClickSelector" placeholder="e.g., .cookie-banner .accept">
|
||||
</div>
|
||||
<div class="d-flex gap-2 mb-3">
|
||||
<div class="flex-fill">
|
||||
<label for="autoClickInterval" class="form-label small">Repeat every (sec, 0 = once)</label>
|
||||
<input type="number" min="0" class="form-control form-control-sm" id="autoClickInterval" value="0">
|
||||
</div>
|
||||
<div class="flex-fill">
|
||||
<label for="autoClickMax" class="form-label small">Max clicks (0 = unlimited)</label>
|
||||
<input type="number" min="0" class="form-control form-control-sm" id="autoClickMax" value="0">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label class="form-label small">Text Replacements</label>
|
||||
<div id="textReplacementsList" class="mb-2"></div>
|
||||
<button type="button" class="btn btn-sm btn-outline-light mb-3" id="addReplacementBtn">+ Add Replacement</button>
|
||||
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="reapplyOnDomChanges">
|
||||
<label class="form-check-label" for="reapplyOnDomChanges">Re-check on page changes (for SPAs)</label>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="ruleEnabled" checked>
|
||||
<label class="form-check-label" for="ruleEnabled">
|
||||
|
||||
Reference in New Issue
Block a user