wagesj45/vibeguard
wagesj45/vibeguard
Watch
1
0
Fork
You've already forked vibeguard
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add cross-browser popup status handling

Browse source
This commit is contained in:
Jordan Wages 2026-08-24 23:32:27 -05:00
commit 7e17470356
38 changed files with 1242 additions and 199 deletions
Download patch file Download diff file Expand all files Collapse all files

75
public/options.html
View file

@ -1,7 +1,70 @@
<!doctype html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>VibeGuard settings</title></head><body><main><h1>VibeGuard settings</h1><form id="settings">
<label for="threshold">Toxicity threshold: <output id="threshold-value">80%</output></label><input id="threshold" type="range" min="0" max="1" step=".01">
<label for="filter-mode">Filtering mode</label><select id="filter-mode"><option value="collapse">Collapse with Show button</option><option value="hide">Hide completely</option></select>
<label><input id="show-score" type="checkbox"> Show toxicity score</label>
<fieldset><legend>Supported sites</legend><label><input id="site-reddit" type="checkbox"> Reddit</label><label><input id="site-twitter" type="checkbox"> X/Twitter</label><label><input id="site-facebook" type="checkbox"> Facebook</label></fieldset>
<button type="submit">Save settings</button> <span id="status" role="status"></span></form></main><script type="module" src="/options.js"></script></body></html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>VibeGuard settings</title>
<link rel="stylesheet" href="/bulma.css">
</head>
<body>
<section class="section">
<main class="container vibeguard-options">
<div class="box">
<figure class="has-text-centered mb-4">
<img src="/icons/logo64.png" alt="VibeGuard" class="vibeguard-logo">
</figure>
<h1 class="title">VibeGuard settings</h1>
<p class="subtitle">Configure local toxicity filtering for supported sites.</p>
<form id="settings">
<div class="field">
<label class="label" for="threshold">Toxicity threshold: <output id="threshold-value">80%</output></label>
<div class="control">
<input class="slider is-fullwidth" id="threshold" type="range" min="0" max="1" step=".01">
</div>
</div>
<div class="field">
<label class="label" for="filter-mode">Filtering mode</label>
<div class="control">
<div class="select is-fullwidth">
<select id="filter-mode">
<option value="collapse">Collapse with Show button</option>
<option value="hide">Hide completely</option>
</select>
</div>
</div>
</div>
<div class="field">
<label class="checkbox"><input id="show-score" type="checkbox"> Show toxicity score</label>
</div>
<fieldset class="field">
<legend class="label">Site definitions</legend>
<div class="content">
<p>VibeGuard includes <code>mastodon</code> for the official Mastodon web interface. Add a custom definition with the same ID to override it, or add its ID to <code>disabledDefinitionIds</code> to disable it.</p>
</div>
<div class="field">
<label class="label" for="definitions">Custom definitions (JSON)</label>
<div class="control">
<textarea class="textarea vibeguard-json" id="definitions" rows="18" spellcheck="false"></textarea>
</div>
</div>
<div class="buttons">
<button class="button" type="button" id="import-definitions">Import JSON</button>
<button class="button" type="button" id="export-definitions">Export JSON</button>
<input id="definition-file" type="file" accept="application/json" hidden>
</div>
</fieldset>
<div class="is-flex is-align-items-center is-flex-wrap-wrap mt-5">
<button class="button is-primary" type="submit">Save settings</button>
<span class="vibeguard-status ml-3" id="status" role="status"></span>
</div>
</form>
</div>
</main>
</section>
<script type="module" src="/options.js"></script>
</body>
</html>