kouhais-mirrors
/
safer-indie-wiki-buddy
mirror of https://github.com/KevinPayravi/indie-wiki-buddy.git
1
0
Fork 0
Code
safer-indie-wiki-buddy/settings.html

500 lines
16 KiB
HTML
Raw Blame 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: 600px;
margin: 0 auto;
padding: 20px;
background-color: #2b2a33;
font-family: Helvetica, Sans-Serif;
font-size: .9em;
}
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: 1em 0 .5em 0;
}
h1 {
font-size: 1.3rem;
padding: .5em 0;
margin: 0;
}
h2 {
font-size: 1.2rem;
text-align: center;
padding: .8em;
margin: 0;
}
label {
display: inline-block;
height: 1em;
}
.container {
background: #fff;
}
/* HEADER */
#header {
line-height: 1.5em;
padding: .5em 1em;
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: .5em 0;
}
#links {
background-color: #e5f4ff;
padding: .5em 1em;
}
#firstInstallInfo {
display: none;
text-align: center;
}
/* CONTENT */
#content {
background-color: #fff;
box-sizing: border-box;
padding: 1em .75em;
}
/* FOOTER */
#footer {
padding-bottom: 1.5em;
text-align: center;
line-height: 1.6em;
box-sizing: border-box;
}
#footer a {
padding: 5px 0px;
color: #3174f1;
}
/* NOTIFICATIONS */
#notificationBanner {
display: none;
background-color: #f8f3d6;
font-size: .9em;
line-height: 1.3em;
padding: 1em;
}
#notificationBanner span {
display: none;
}
#notificationBanner span[style*="display: block"] + span[style*="display: block"]{
padding-top: .75em;
margin-top: .75em;
border-top: 1px solid #000;
}
/* GLOBAL SETTINGS SECTION */
.options {
margin: 0 auto;
box-sizing: border-box;
padding-bottom: .5em;
user-select: none;
width: fit-content;
}
.options .settingToggleContainer {
padding-bottom: 1em;
}
.options .settingToggleContainer:last-child {
padding-bottom: 0;
}
/* GLOBAL SETTING TOGGLES */
#power input {
height: 0;
width: 0;
margin: 0;
border: none;
appearance: none;
}
#power img {
margin-left: -8px;
}
.settingToggle {
cursor: pointer;
width: fit-content;
display: inline-block;
}
.settingToggle + div {
display: inline-block;
}
.settingToggle input,
.settingToggle label {
cursor: pointer;
}
.settingToggle img {
width: 30px;
vertical-align: middle;
}
#breezewikiHost {
display: none;
padding-left: 3em;
padding-top: .8em;
}
#breezewikiHost label {
cursor: default;
}
/* WIKI CONTROLS */
#wikiControls {
margin: 0 auto;
width: fit-content;
text-align: center;
padding-bottom: .5em;
}
#wikiControls button {
background: #ffffff;
border: 1px solid #333333;
color: #333333;
border-radius: 5px;
padding: 3px 5px;
margin: 3px 5px;
}
#wikiControls button:hover {
cursor: pointer;
background: #3174f1;
border: 1px solid#3174f1;
color: #ffffff;
}
#wikiControls button:hover img {
filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(100%) contrast(100%);
}
#langSelectContainer {
margin-bottom: 10px;
}
#toggles {
font-size: 0.8rem;
white-space: nowrap;
position: relative;
padding: 0 1em;
}
#toggles > div:hover {
background-color: #e8f0fe;
}
#toggles input {
cursor: pointer;
}
#toggles > div {
line-height: 2em;
display: flex;
flex-direction: row;
width: 100%;
}
#toggles .inputsContainer {
float: right;
}
#toggles img {
width: 1.2em;
height: 1.2em;
vertical-align: middle;
}
#toggles a:first-child {
line-height: 1.2em;
padding-right: .5em;
}
#toggles span {
flex-grow: 1;
overflow: hidden;
text-overflow: ellipsis;
}
#togglesKey {
padding-right: 15px;
text-align: right;
}
#togglesKey > div {
display: inline-block;
width: 17px;
}
#togglesKey>div:last-child, #toggles>div>div>label:last-of-type {
margin-left: .5em;
}
/* 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;
}
</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="notificationBanner">
<span id="notificationBannerBug">
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 restarting your browser,
turning the extension off and on via your browser's extension settings (chrome://extensions/),
and/or reinstalling the extension.
</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 "global settings" section below, you can toggle features on and off.
By default, search engine filtering and notifications when you are redirected are turned on.
You can also turn on <a href="https://breezewiki.com/" target="_blank">BreezeWiki</a>, which will render 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.
This includes whether you want 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.
You can also toggle whether you want to
<img src="images/toggle-search-filter.png" width="12" alt="" />
filter the non-indie wikis from search engines (on by default).
<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>
<h2>Global settings</h2>
<div class="options">
<div class="settingToggleContainer">
<div id="power" class="settingToggle">
<label>
<input id="powerCheckbox" type="checkbox" />
<img id="powerImage" src="" alt="" />
<span id="powerText"></span>
</label>
</div>
</div>
<div class="settingToggleContainer">
<div id="searchFilteringReplace" class="settingToggle">
<label for="searchFilteringReplaceRadio">
<input id="searchFilteringReplaceRadio" type="radio" name="searchSetting" value="replace" />
<span id="searchFilteringReplaceText">🔎 In search engines, disable non-indie wikis & add link to indie counterparts</span>
</label>
</div>
<div id="searchFilteringHide" class="settingToggle">
<label for="searchFilteringHideRadio">
<input id="searchFilteringHideRadio" type="radio" name="searchSetting" value="hide" />
<span id="searchFilteringHideText">🔎 In search engines, hide non-indie wikis that have indie counterparts</span>
</label>
</div>
<div id="searchFilteringNothing" class="settingToggle">
<label for="searchFilteringNothingRadio">
<input id="searchFilteringNothingRadio" type="radio" name="searchSetting" value="nothing" />
<span id="searchFilteringNothingText">🔎 Do nothing on search engines</span>
</label>
</div>
</div>
<div class="settingToggleContainer">
<div id="notifications" class="settingToggle">
<label>
<input id="notificationsCheckbox" type="checkbox" />
<span id="notificationsText">🔔 Desktop notifications when redirected to an indie wiki or BreezeWiki</span>
</label>
</div>
</div>
<div class="settingToggleContainer">
<div id="breezewiki" class="settingToggle">
<label>
<input id="breezewikiCheckbox" type="checkbox" />
<span id="breezewikiText">🌬️ Use BreezeWiki on Fandom</span>
</label>
</div>
<div>
&nbsp;&nbsp;(<a href="https://breezewiki.com/" target="_blank"
>learn more</a
>)
</div>
<div class="settingToggleContainer">
<div id="breezewikiHost" class="settingToggle">
<label for="breezewikiHostSelect">BreezeWiki Host:&nbsp;</label>
<select name="breezewikiHost" id="breezewikiHostSelect"></select>
</div>
</div>
</div>
</div>
<hr />
<div id="wikiControls">
<h2>Individual wiki settings</h2>
<div id="langSelectContainer">
Viewing wikis in:&nbsp;
<select name="lang" id="langSelect">
<option value="DE">Deutsch</option>
<option value="EN" selected>English</option>
<option value="ES">Español</option>
<option value="FR">Français</option>
<option value="IT">Italiano</option>
<option value="PL">Polski</option>
<option value="TOK">Toki Pona</option>
</select>
</div>
Controls to change settings for all non-indie wikis:
<br />
<button id="setAllDisabled">
<img src="images/toggle-disabled.png" width="10" alt="" /> Disable all
</button>
<button id="setAllRedirect">
<img src="images/toggle-redirect.png" width="10" alt="" /> Set all to
redirect to indie wikis
</button>
<button id="setAllAlert">
<img src="images/toggle-alert.png" width="10" alt="" /> Set all to
notify of indie wikis
</button>
<br />
<button id="setAllSearchFilter">
<img src="images/toggle-search-filter.png" width="10" alt="" /> Filter
all from search engines
</button>
<button id="setNoneSearchFilter">
<img src="images/toggle-search-filter.png" width="10" alt="" /> Filter
none from search engines
</button>
</div>
<div id="togglesKey">
<div>
<img
src="images/toggle-disabled.png"
width="15"
alt="Disable"
title="Disable"
/>
</div>
<div>
<img
src="images/toggle-redirect.png"
width="15"
alt="Automatically redirect to indie wiki"
title="Automatically redirect to indie wiki"
/>
</div>
<div>
<img
src="images/toggle-alert.png"
width="15"
alt="Show a banner on wikis where an indie alternative is available"
title="Show a banner on wikis where an indie alternative is available"
/>
</div>
<div>
<img
src="images/toggle-search-filter.png"
width="15"
alt="Filter non-indie wikis from Google, Bing, DuckDuckGo, & other search engines"
title="Filter non-indie wikis from Google, Bing, DuckDuckGo, & other search engines"
/>
</div>
</div>
<div id="toggles"></div>
<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>
View Git Blame Copy Permalink