safer-indie-wiki-buddy/settings.html

636 lines
19 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="UTF-8" />
<link rel="icon" href="images/logo.png" />
<title>Indie Wiki Buddy settings</title>
<style>
/* ELEMENTS */
body {
max-width: 700px;
margin: 0 auto;
padding: 20px;
background-color: #2b2a33;
font-family: Helvetica, Sans-Serif;
font-size: .9rem;
}
a {
text-decoration-style: dotted;
text-decoration-thickness: 1px;
color: #005799;
}
a:visited {
color: #005799;
}
hr {
height: 1px;
border: none;
color: #005799;
background-color: #005799;
margin: 1rem 0 .5rem 0;
}
h1 {
font-size: 1.3rem;
padding: .5rem 0;
margin: 0;
}
h2 {
font-size: 1.2rem;
text-align: center;
padding: .8rem;
margin: 0;
}
fieldset {
background-color: #f5fbff;
border: 1px solid #ccc;
border-radius: 5px;
padding: 3px 0 8px 0;
margin: 0;
2023-11-02 09:05:01 +00:00
margin-bottom: .5em;
}
fieldset+fieldset {
2023-11-02 09:05:01 +00:00
margin-top: 1rem;
}
fieldset>div {
margin: .4rem .5rem;
}
fieldset>span {
margin: .8rem 0 .4rem;
display: block;
}
legend {
font-weight: 600;
}
/* CONTAINERS AND LAYOUT */
.container {
background: #fff;
}
.two-col {
display: flex;
flex-wrap: wrap;
gap: 1em;
padding-bottom: .5rem;
}
.two-col>div {
flex: 1;
}
@media (max-width: 600px) {
.two-col>div {
flex: 100%;
}
}
/* HEADER */
#header {
line-height: 1.5rem;
padding: .5rem 1rem;
box-sizing: border-box;
background-color: #005799;
color: #fff;
width: 100%;
}
#header .settingToggle label {
background-color: #fff;
border-radius: 20px;
height: fit-content;
width: fit-content;
}
#version {
float: right;
font-size: 1.2rem;
margin: .5rem 0;
}
#links {
background-color: #e5f4ff;
padding: .5rem 1rem;
}
#firstInstallInfo {
display: none;
text-align: center;
}
/* CONTENT */
#content {
background-color: #fff;
box-sizing: border-box;
padding: 1rem .75rem;
}
/* FOOTER */
#footer {
padding-bottom: 1.5rem;
text-align: center;
line-height: 1.6rem;
box-sizing: border-box;
}
#footer a {
padding: 5px 0px;
color: #005799;
}
/* NOTIFICATIONS */
#notificationBannerContainer {
background-color: #f8f3d6;
font-size: .9em;
line-height: 1.3em;
}
#notificationBannerContainer span {
padding: .5rem 1rem;
display: none;
}
#notificationBannerContainer span ~ span[style] {
border-top: 1px solid #005799;
}
/* SETTINGS SECTION */
.options {
box-sizing: border-box;
padding-bottom: .5rem;
user-select: none;
width: 100%;
}
.settingToggle {
cursor: pointer;
width: fit-content;
}
.settingToggle input,
.settingToggle label {
cursor: pointer;
}
.settingToggle img {
vertical-align: middle;
}
#searchFilteringSettings>div {
display: inline-block;
}
#breezewikiHost {
display: none;
padding: 0 0 0 1rem;
}
#breezewikiHost label {
cursor: default;
}
#legend {
text-align: center;
}
#legend div {
display: inline-flex;
align-items: center;
gap: 5px;
}
#langSelectContainer {
2023-11-02 09:05:01 +00:00
margin: 1em 0;
text-align: center;
}
.toggles {
font-size: 0.8rem;
white-space: nowrap;
position: relative;
}
.toggles img {
line-height: 1.2rem;
}
.toggles a img {
padding-right: .5rem;
}
.toggles span {
flex-grow: 1;
overflow: hidden;
text-overflow: ellipsis;
}
.toggles label {
display: flex;
align-items: center;
}
.toggles input {
cursor: pointer;
margin: 0;
}
.toggles>div {
line-height: 2rem;
display: flex;
flex-direction: row;
padding: 0 .5rem;
}
.toggles .inputsContainer {
display: flex;
float: right;
width: 150px;
justify-content: space-between;
}
.togglesHeader {
border-bottom: 1px solid #ccc;
background-color: #f5fbff;
}
.togglesHeader span {
text-align: right;
font-style: italic;
margin-right: 1em;
}
.togglesHeader img {
cursor: pointer;
}
.togglesHeader .inputsContainer img {
width: auto;
max-width: 17px;
height: auto;
max-height: 18px;
vertical-align: middle;
}
.togglesHeader .inputsContainer>div:nth-child(4),
.toggles>div>div>label:nth-child(4) {
padding-left: 5px;
border-left: 1px solid #ccc;
}
#toggles>div:hover {
background-color: #e8f0fe;
}
#togglesKeys {
position: sticky;
top: 0;
z-index: 999;
}
#togglesKeys button {
all: unset;
height: 18px;
display: block;
}
#togglesKeys button:focus {
outline: revert;
}
#togglesKeys .inputsContainer>div {
position: relative;
}
#togglesDefaults input[type=radio] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
#togglesDefaults input+label {
width: 100%;
height: 100%;
background-image: url('images/star-off.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-size: 18px;
}
#togglesDefaults input:checked+label {
background-image: url('images/star-on.png');
}
#togglesDefaults label {
cursor: pointer;
}
#togglesKeys .inputsContainer button:hover::after,
#togglesDefaults .inputsContainer label:hover::after {
content: attr(data-title);
padding: 5px;
width: fit-content;
border: 1px solid #000;
position: absolute;
color: #fff;
background: #000;
z-index: 999999;
transform: translateX(calc(-100% - 24px));
top: 30px;
}
#togglesColumnLabels>div>div {
display: flex;
width: 150px;
}
#togglesColumnLabels>div>div>div {
flex: 1 1 0;
font-weight: 600;
font-size: .9em;
white-space: break-spaces;
line-height: initial;
text-align: center;
}
.inputsContainer>label,
.inputsContainer>div {
width: 20px;
justify-content: center;
text-align: center;
}
.inputsContainer label:nth-child(1) input,
.inputsContainer label:nth-child(4) input {
accent-color: #bc3c3c;
}
/* CONTROL CLASSES */
.visuallyHidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.text-sm {
font-size: .85em;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<span id="version"></span>
<h1>Indie Wiki Buddy</h1>
</div>
<div id="links">
<a href="guide.html">Guide</a>
&nbsp;&nbsp;&nbsp;
<a href="https://getindie.wiki" target="_blank">Website</a>
&nbsp;&nbsp;&nbsp;
<a href="https://getindie.wiki/changelog/" target="_blank">Changelog</a>
&nbsp;&nbsp;&nbsp;
<a href="https://getindie.wiki/#submit" target="_blank">Submit&nbsp;a&nbsp;Wiki</a>
&nbsp;&nbsp;&nbsp;
<a href="https://github.com/KevinPayravi/indie-wiki-buddy" target="_blank">Source&nbsp;Code</a>
</div>
<div id="notificationBannerContainer">
<span id="notificationBannerChromeBug">
Chromium users: Due to a <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=1271154"
target="_blank">browser bug</a>,
this extension may stop working after an update. If this happens, try turning the extension off
and on via your browser's extension settings (chrome://extensions/).
<a id="chromeBugHideLink" href="#">Hide this message</a>
</span>
<span id="notificationBannerOpera">
Opera users: By default, Opera will block extensions from running on search engines.
Search engine access can be enabled per-extension by going to "about:extensions"
and selecting the "Allow access to search page results" option under Indie Wiki Buddy.
<a id="operaPermsHideLink" href="#">Hide this message</a>
</span>
<span id="notificationBannerReview">
Enjoying Indie Wiki Buddy? Please leave a review!
<br />
<a id="reviewReminderChromeLink" target="_blank"
href="https://chrome.google.com/webstore/detail/indie-wiki-buddy/fkagelmloambgokoeokbpihmgpkbgbfm">Chrome</a>
&nbsp;&nbsp;|&nbsp;&nbsp;
<a id="reviewReminderFirefoxLink" target="_blank"
href="https://addons.mozilla.org/en-US/firefox/addon/indie-wiki-buddy/">Firefox</a>
&nbsp;&nbsp;|&nbsp;&nbsp;
<a id="reviewReminderHideLink" href="#">Hide this message</a>
<br /><br />
Having issues or ideas for improvement? Please <a target="_blank" href="https://getindie.wiki/#contact">contact
me</a>!
</span>
</div>
<div id="content">
<div id="firstInstallInfo">
Thanks for installing Indie Wiki Buddy! Let's get you set up.
<br /><br />
Use the links above to see the full guide, submit new wikis, or contact the developer.
<br /><br />
In the settings below, you can toggle features on and off.
This includes the option to enable <a href="https://breezewiki.com/" target="_blank">BreezeWiki</a>,
an alternative frontend that renders Fandom wikis without ads or bloat.
<br /><br />
Below that, you can configure what happens when you visit each Fandom and Fextralife wiki that has an
independent alternative, as well as what happens to their results in search engines.
For visiting wikis, you can choose to be
<img src="images/toggle-alert.png" width="12" alt="" /> alerted (default)
or
<img src="images/toggle-redirect.png" width="12" alt="" />
automatically redirected.
On search engines, you can choose to
<img src="images/toggle-replace.png" width="12" alt="" /> replace (default)
or
<img src="images/toggle-hide.png" width="12" alt="" /> hide
search results.
<br /><br />
You can access these settings in the future via the extension's icon
<img src="./images/logo-32.png" width="15" alt="icon of an arrow pointing to the right" />
at the top right of your browser. If you don't see the icon,
it may be in the extension dropdown, which can be opened via the jigsaw icon
<img src="./images/jigsaw.png" width="15" alt="" /> (also at the top right of your browser).
<hr />
</div>
<form name="options" class="options">
<fieldset id="generalSettings">
<legend><span aria-hidden="true">⚙️</span> General settings</legend>
<div class="settingToggle">
<label>
<input id="powerCheckbox" type="checkbox" />
<span id="powerIcon" aria-hidden="true"></span>
<span id="powerText"></span>
</label>
</div>
<div class="settingToggle">
<label>
<input id="notificationsCheckbox" type="checkbox" />
<span id="notificationsIcon" aria-hidden="true"></span>
<span id="notificationsText">Desktop notifications for
redirections</span>
</label>
</div>
</fieldset>
<fieldset id="breezewikiSettings">
<legend>
<span aria-hidden="true"></span> BreezeWiki settings (<a href="https://breezewiki.com/"
target="_blank">learn&nbsp;more</a>)
</legend>
<div class="settingToggle">
<label>
<input id="breezewikiCheckbox" type="checkbox" />
<span id="breezewikiText">Use BreezeWiki alternative frontend on Fandom</span>
</label>
</div>
<div id="breezewikiHost" class="settingToggle">
<label for="breezewikiHostSelect">BreezeWiki host:&nbsp;</label>
<select name="breezewikiHost" id="breezewikiHostSelect"></select>
</div>
</fieldset>
<h2>Individual wiki settings</h2>
<fieldset id="legend">
<legend>
Legend
</legend>
<span class="text-sm">When visiting a Fandom or Fextralife wiki that has an independent alternative, Indie
Wiki Buddy can:</span>
<div>
<img src="images/toggle-disabled.png" width="18" height="18" alt="" /> Do nothing
</div>
<div>
<img src="images/toggle-alert.png" width="18" height="18" alt="" /> Display a banner
linking to indie wiki
</div>
<div>
<img src="images/toggle-redirect.png" width="18" height="18" alt="" /> Redirect to
indie wiki
</div>
<br />
<span class="text-sm">When using search engines, Indie Wiki Buddy can:</span>
<div>
<img src="images/toggle-disabled.png" width="18" height="18" alt="" /> Do nothing
</div>
<div>
<img src="images/toggle-replace.png" width="18" height="18" alt="" /> Replace non-indie results with links
to indie wikis
</div>
<div>
<img src="images/toggle-hide.png" width="18" height="18" alt="" /> Hide non-indie results when an
indie wiki is avialable
</div>
</fieldset>
<div id="langSelectContainer">
Filter wikis by language:&nbsp;
<select name="lang" id="langSelect">
<option value="ALL" selected>All languages</option>
<option value="DE">Deutsch (DE)</option>
<option value="EN">English (EN)</option>
<option value="ES">Español (ES)</option>
<option value="FR">Français (FR)</option>
<option value="IT">Italiano (IT)</option>
<option value="PL">Polski (PL)</option>
<option value="TOK">Toki Pona (TOK)</option>
</select>
</div>
<div id="togglesColumnLabels" class="toggles">
<div>
<span></span>
<div>
<div>Wiki experience</div>
<div>Search experience</div>
</div>
</div>
</div>
<div id="togglesKeys" class="toggles togglesHeader">
<div>
<span>Click icon to set all wikis in column:</span>
<div class="inputsContainer">
<div>
<button id="setAllDisabled" type="button" data-title="Do nothing when visiting non-indie wiki">
<img src="images/toggle-disabled.png" width="18" alt="" />
</button>
</div>
<div>
<button id="setAllAlert" type="button" data-title="Show banner when indie wiki is available">
<img src="images/toggle-alert.png" width="18" alt="" />
</button>
</div>
<div>
<button id="setAllRedirect" type="button" data-title="Automatically redirect to indie wiki">
<img src="images/toggle-redirect.png" width="18" alt="Automatically redirect to indie wiki" />
</button>
</div>
<div>
<button id="setAllSearchEngineDisabled" type="button" data-title="Do nothing on search engines">
<img src="images/toggle-disabled.png" width="18" alt="" />
</button>
</div>
<div>
<button id="setAllSearchEngineReplace" type="button" data-title="Replace non-indie search results">
<img src="images/toggle-replace.png" width="18" alt="" />
</button>
</div>
<div>
<button id="setAllSearchEngineHide" type="button" data-title="Hide non-indie wiki from search results">
<img src="images/toggle-hide.png" width="18" alt="" />
</button>
</div>
</div>
</div>
</div>
<div id="togglesDefaults" class="toggles togglesHeader">
<div>
<span>Default for new wikis in future updates:</span>
<div class="inputsContainer">
<div>
<input id="defaultWikiActionDisabledRadio" type="radio" name="defaultWikiAction" value="disabled"
title="Do nothing" />
<label data-title="Do nothing when visiting non-indie wiki"
for="defaultWikiActionDisabledRadio"></label>
</div>
<div>
<input id="defaultWikiActionAlertRadio" type="radio" name="defaultWikiAction" value="alert"
title="Display a banner linking to indie wiki" />
<label data-title="Show banner when indie wiki is available" for="defaultWikiActionAlertRadio"></label>
</div>
<div>
<input id="defaultWikiActionRedirectRadio" type="radio" name="defaultWikiAction" value="redirect"
title="Redirect to indie wiki" />
<label data-title="Automatically redirect to indie wiki" for="defaultWikiActionRedirectRadio"></label>
</div>
<div>
<input id="defaultSearchActionDisabledRadio" type="radio" name="defaultSearchAction" value="disabled"
title="Do nothing" />
<label data-title="Do nothing on search engines" for="defaultSearchActionDisabledRadio"></label>
</div>
<div>
<input id="defaultSearchActionReplaceRadio" type="radio" name="defaultSearchAction" value="replace"
title="Replace non-indie results" />
<label data-title="Replace non-indie search results" for="defaultSearchActionReplaceRadio"></label>
</div>
<div>
<input id="defaultSearchActionHideRadio" type="radio" name="defaultSearchAction" value="hide"
title="Hide non-indie results" />
<label data-title="Hide non-indie wiki from search results" for="defaultSearchActionHideRadio"></label>
</div>
</div>
</div>
</div>
<div id="toggles" class="toggles"></div>
</form>
<hr />
<div id="footer">
<h2>Fun Stats</h2>
Alerted to indie wikis <span id="countAlerts"></span> times
<br />
Automatically redirected to indie wikis <span id="countRedirects"></span> times
<br />
Automatically redirected to BreezeWiki <span id="countBreezeWiki"></span> times
<br />
<span id="countSearchFilters"></span> search engine results filtered
</div>
</div>
</div>
</body>
<script type="text/javascript" src="settings.js"></script>
</html>