70 lines
2.9 KiB
HTML
70 lines
2.9 KiB
HTML
<!doctype 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>
|