nakidai
/
whoogle-search
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
whoogle-search/app/templates/index.html

240 lines
14 KiB
HTML
Raw Normal View History

Allow theme to mirror user system settings Introduces a new config element and environment variable (WHOOGLE_CONFIG_THEME) for setting the theme of the app. Rather than just having either light or dark, this allows a user to have their instance use their current system light/dark preference to determine the theme to use. As a result, the dark mode setting (and WHOOGLE_CONFIG_DARK) have been deprecated, but will still work as expected until a system theme has been chosen.
2021-06-28 17:26:51 +03:00
<html style="background: #000;">
Reformat view templates
2021-10-27 21:30:55 +03:00
<head>
<link rel="apple-touch-icon" sizes="57x57" href="static/img/favicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="static/img/favicon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="static/img/favicon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="static/img/favicon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="static/img/favicon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="static/img/favicon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="static/img/favicon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="static/img/favicon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="static/img/favicon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="static/img/favicon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="static/img/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="static/img/favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="static/img/favicon/favicon-16x16.png">
<link rel="manifest" href="static/img/favicon/manifest.json">
<meta name="referrer" content="no-referrer">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="static/img/favicon/ms-icon-144x144.png">
<script type="text/javascript" src="{{ cb_url('autocomplete.js') }}"></script>
<script type="text/javascript" src="{{ cb_url('controller.js') }}"></script>
<link rel="search" href="opensearch.xml" type="application/opensearchdescription+xml" title="Whoogle Search">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Import logo stylesheet before applying custom css This fixes #551, and allows custom css to be applied to the Whoogle logo.
2021-11-24 22:38:56 +03:00
<link rel="stylesheet" href="{{ cb_url('logo.css') }}">
Reformat view templates
2021-10-27 21:30:55 +03:00
{% if config.theme %}
{% if config.theme == 'system' %}
Use cache busting for css/js files On app init, short hashes are generated from file checksums to use for cache busting. These hashes are added into the full file name and used to symlink to the actual file contents. These symlinks are loaded in the jinja templates for each page, and can tell the browser to load a new file if the hash changes. This is only in place for css and js files, but can be extended in the future for other file types if needed.
2021-07-01 02:00:01 +03:00
<style>
@import "{{ cb_url('light-theme.css') }}" screen;
@import "{{ cb_url('dark-theme.css') }}" screen and (prefers-color-scheme: dark);
</style>
Allow theme to mirror user system settings Introduces a new config element and environment variable (WHOOGLE_CONFIG_THEME) for setting the theme of the app. Rather than just having either light or dark, this allows a user to have their instance use their current system light/dark preference to determine the theme to use. As a result, the dark mode setting (and WHOOGLE_CONFIG_DARK) have been deprecated, but will still work as expected until a system theme has been chosen.
2021-06-28 17:26:51 +03:00
{% else %}
Reformat view templates
2021-10-27 21:30:55 +03:00
<link rel="stylesheet" href="{{ cb_url(config.theme + '-theme.css') }}"/>
Allow theme to mirror user system settings Introduces a new config element and environment variable (WHOOGLE_CONFIG_THEME) for setting the theme of the app. Rather than just having either light or dark, this allows a user to have their instance use their current system light/dark preference to determine the theme to use. As a result, the dark mode setting (and WHOOGLE_CONFIG_DARK) have been deprecated, but will still work as expected until a system theme has been chosen.
2021-06-28 17:26:51 +03:00
{% endif %}
Reformat view templates
2021-10-27 21:30:55 +03:00
{% else %}
<link rel="stylesheet" href="{{ cb_url(('dark' if config.dark else 'light') + '-theme.css') }}"/>
{% endif %}
<link rel="stylesheet" href="{{ cb_url('main.css') }}">
<noscript>
<style>
#main {
display: inherit !important;
}
.content {
Set max height for config menu The config menu has gotten out of control recently, but rather than reducing functionality, I'm just going to set a max height for the div and allow scrolling within the menu. Ultimately though this indicates that the app is getting a bit too complicated (imo). Striking a balance between customization and minimalism is less of a priority for me nowadays though, hence why I'm willing to let it slide for now. At some point, maybe when there are more contributors, it could be nice to refactor this in some way so that it isn't overwhelming to new users who are looking to customize their instance (that's just me speculating btw, I haven't actually heard from anyone who thinks there are too many options in that menu).
2021-11-02 01:55:33 +03:00
max-height: 400px;
Reformat view templates
2021-10-27 21:30:55 +03:00
padding: 18px;
border-radius: 10px;
Set max height for config menu The config menu has gotten out of control recently, but rather than reducing functionality, I'm just going to set a max height for the div and allow scrolling within the menu. Ultimately though this indicates that the app is getting a bit too complicated (imo). Striking a balance between customization and minimalism is less of a priority for me nowadays though, hence why I'm willing to let it slide for now. At some point, maybe when there are more contributors, it could be nice to refactor this in some way so that it isn't overwhelming to new users who are looking to customize their instance (that's just me speculating btw, I haven't actually heard from anyone who thinks there are too many options in that menu).
2021-11-02 01:55:33 +03:00
overflow-y: scroll;
Reformat view templates
2021-10-27 21:30:55 +03:00
}
.collapsible {
display: none;
}
</style>
</noscript>
<style>{{ config.style }}</style>
<title>Whoogle Search</title>
</head>
<body id="main">
<div class="search-container">
<div class="logo-container">
{{ logo|safe }}
</div>
<form id="search-form" action="search" method="{{ 'get' if config.get_only else 'post' }}">
<div class="search-fields">
<div class="autocomplete">
<input
type="text"
name="q"
id="search-bar"
class="home-search"
autofocus="autofocus"
autocapitalize="none"
spellcheck="false"
autocorrect="off"
autocomplete="off"
dir="auto">
</div>
<input type="submit" id="search-submit" value="{{ translation['search'] }}">
</div>
</form>
{% if not config_disabled %}
<br/>
<button id="config-collapsible" class="collapsible">{{ translation['config'] }}</button>
<div class="content">
<div class="config-fields">
<form id="config-form" action="config" method="post">
Pin config buttons to bottom of config menu Previously the load/save/apply buttons in the config menu were hidden below all available config options and required the user to scroll to the bottom to save changes. This made for bad ux, since for new users, it isn't immediately apparent that selecting a new dropdown value, for instance, doesn't instantly save the new setting. The new layout should make it more clear that hitting "Apply" is required to save config changes.
2021-11-23 22:27:59 +03:00
<div class="config-options">
<div class="config-div config-div-ctry">
<label for="config-ctry">{{ translation['config-country'] }}: </label>
<select name="ctry" id="config-ctry">
{% for ctry in countries %}
<option value="{{ ctry.value }}"
{% if ctry.value in config.ctry %}
selected
{% endif %}>
{{ ctry.name }}
</option>
{% endfor %}
</select>
</div>
<div class="config-div config-div-lang">
<label for="config-lang-interface">{{ translation['config-lang'] }}: </label>
<select name="lang_interface" id="config-lang-interface">
{% for lang in languages %}
<option value="{{ lang.value }}"
{% if lang.value in config.lang_interface %}
selected
{% endif %}>
{{ lang.name }}
</option>
{% endfor %}
</select>
</div>
<div class="config-div config-div-search-lang">
<label for="config-lang-search">{{ translation['config-lang-search'] }}: </label>
<select name="lang_search" id="config-lang-search">
{% for lang in languages %}
<option value="{{ lang.value }}"
{% if lang.value in config.lang_search %}
selected
{% endif %}>
{{ lang.name }}
</option>
{% endfor %}
</select>
</div>
<div class="config-div config-div-near">
<label for="config-near">{{ translation['config-near'] }}: </label>
<input type="text" name="near" id="config-near"
placeholder="{{ translation['config-near-help'] }}" value="{{ config.near }}">
</div>
<div class="config-div config-div-block">
<label for="config-block">{{ translation['config-block'] }}: </label>
<input type="text" name="block" id="config-block"
placeholder="{{ translation['config-block-help'] }}" value="{{ config.block }}">
</div>
<div class="config-div config-div-block">
<label for="config-block-title">{{ translation['config-block-title'] }}: </label>
<input type="text" name="block_title" id="config-block"
placeholder="{{ translation['config-block-title-help'] }}"
value="{{ config.block_title }}">
</div>
<div class="config-div config-div-block">
<label for="config-block-url">{{ translation['config-block-url'] }}: </label>
<input type="text" name="block_url" id="config-block"
placeholder="{{ translation['config-block-url-help'] }}" value="{{ config.block_url }}">
</div>
<div class="config-div config-div-nojs">
<label for="config-nojs">{{ translation['config-nojs'] }}: </label>
<input type="checkbox" name="nojs" id="config-nojs" {{ 'checked' if config.nojs else '' }}>
</div>
<div class="config-div config-div-theme">
<label for="config-theme">{{ translation['config-theme'] }}: </label>
<select name="theme" id="config-theme">
{% for theme in themes %}
<option value="{{ theme }}"
{% if theme in config.theme %}
selected
{% endif %}>
{{ translation[theme].capitalize() }}
</option>
{% endfor %}
</select>
</div>
<!-- DEPRECATED -->
<!--<div class="config-div config-div-dark">-->
<!--<label for="config-dark">{{ translation['config-dark'] }}: </label>-->
<!--<input type="checkbox" name="dark" id="config-dark" {{ 'checked' if config.dark else '' }}>-->
<!--</div>-->
<div class="config-div config-div-safe">
<label for="config-safe">{{ translation['config-safe'] }}: </label>
<input type="checkbox" name="safe" id="config-safe" {{ 'checked' if config.safe else '' }}>
</div>
<div class="config-div config-div-alts">
<label class="tooltip" for="config-alts">{{ translation['config-alts'] }}: </label>
<input type="checkbox" name="alts" id="config-alts" {{ 'checked' if config.alts else '' }}>
<div><span class="info-text"> — {{ translation['config-alts-help'] }}</span></div>
</div>
<div class="config-div config-div-new-tab">
<label for="config-new-tab">{{ translation['config-new-tab'] }}: </label>
<input type="checkbox" name="new_tab"
id="config-new-tab" {{ 'checked' if config.new_tab else '' }}>
</div>
<div class="config-div config-div-view-image">
<label for="config-view-image">{{ translation['config-images'] }}: </label>
<input type="checkbox" name="view_image"
id="config-view-image" {{ 'checked' if config.view_image else '' }}>
<div><span class="info-text"> — {{ translation['config-images-help'] }}</span></div>
</div>
<div class="config-div config-div-tor">
<label for="config-tor">{{ translation['config-tor'] }}: {{ '' if tor_available else 'Unavailable' }}</label>
<input type="checkbox" name="tor"
id="config-tor" {{ '' if tor_available else 'hidden' }} {{ 'checked' if config.tor else '' }}>
</div>
<div class="config-div config-div-get-only">
<label for="config-get-only">{{ translation['config-get-only'] }}: </label>
<input type="checkbox" name="get_only"
id="config-get-only" {{ 'checked' if config.get_only else '' }}>
</div>
<div class="config-div config-div-get-only">
<label for="config-accept-language">Set Accept-Language: </label>
<input type="checkbox" name="accept_language"
id="config-accept-language" {{ 'checked' if config.accept_language else '' }}>
</div>
<div class="config-div config-div-root-url">
<label for="config-url">{{ translation['config-url'] }}: </label>
<input type="text" name="url" id="config-url" value="{{ config.url }}">
</div>
<div class="config-div config-div-custom-css">
<a id="css-link"
href="https://github.com/benbusby/whoogle-search/wiki/User-Contributed-CSS-Themes">
{{ translation['config-css'] }}:
</a>
<textarea
name="style"
id="config-style"
autocapitalize="off"
autocomplete="off"
spellcheck="false"
autocorrect="off"
value="">
{{ config.style.replace('\t', '') }}
</textarea>
</div>
</div>
<div class="config-div config-buttons">
Reformat view templates
2021-10-27 21:30:55 +03:00
<input type="submit" id="config-load" value="{{ translation['load'] }}">&nbsp;
<input type="submit" id="config-submit" value="{{ translation['apply'] }}">&nbsp;
<input type="submit" id="config-save" value="{{ translation['save-as'] }}">
</div>
</form>
</div>
</div>
{% endif %}
</div>
Add "update available" indicator to footer (#517) This checks the latest released version of Whoogle against the current app version, and shows an "update available" message if the current version num < latest release num. Closes #305
2021-11-02 19:35:40 +03:00
{% include 'footer.html' %}
Reformat view templates
2021-10-27 21:30:55 +03:00
</body>
Fixed bug in nojs config setting, updated pages to use new favicon and proper headers
2020-04-07 23:12:16 +03:00
</html>