diff --git a/app/filter.py b/app/filter.py index e93c91b..8f457f3 100644 --- a/app/filter.py +++ b/app/filter.py @@ -3,6 +3,7 @@ from app.utils.results import * from bs4 import BeautifulSoup from bs4.element import ResultSet, Tag from cryptography.fernet import Fernet +from flask import render_template import re import urllib.parse as urlparse from urllib.parse import parse_qs @@ -152,8 +153,7 @@ class Filter: if src.startswith(LOGO_URL): # Re-brand with Whoogle logo - element['src'] = 'static/img/logo.png' - element['style'] = 'height:40px;width:162px' + element.replace_with(BeautifulSoup(render_template('logo.html'))) return elif src.startswith(GOOG_IMG) or GOOG_STATIC in src: element['src'] = BLANK_B64 diff --git a/app/routes.py b/app/routes.py index 4fae8eb..3ae805e 100644 --- a/app/routes.py +++ b/app/routes.py @@ -126,6 +126,9 @@ def index(): return render_template('index.html', languages=app.config['LANGUAGES'], countries=app.config['COUNTRIES'], + logo=render_template( + 'logo.html', + config=g.user_config), config=g.user_config, tor_available=int(os.environ.get('TOR_AVAILABLE')), version_number=app.config['VERSION_NUMBER']) @@ -224,6 +227,7 @@ def search(): search_header=(render_template( 'header.html', config=g.user_config, + logo=render_template('logo.html'), query=urlparse.unquote(query), search_type=search_util.search_type, mobile=g.user_request.mobile) diff --git a/app/static/css/dark-theme.css b/app/static/css/dark-theme.css index 8fc9455..720f27a 100644 --- a/app/static/css/dark-theme.css +++ b/app/static/css/dark-theme.css @@ -1,9 +1,9 @@ html { - background: var(--whoogle-dark-background) !important; + background: var(--whoogle-dark-page-bg) !important; } body { - background: var(--whoogle-dark-background) !important; + background: var(--whoogle-dark-page-bg) !important; } div { @@ -23,7 +23,7 @@ li { } textarea { - background: var(--whoogle-dark-background) !important; + background: var(--whoogle-dark-page-bg) !important; color: var(--whoogle-dark-text) !important; } @@ -44,17 +44,17 @@ div span { } input { - background-color: var(--whoogle-dark-background) !important; + background-color: var(--whoogle-dark-page-bg) !important; color: var(--whoogle-dark-text) !important; } select { - background: var(--whoogle-dark-background) !important; + background: var(--whoogle-dark-page-bg) !important; color: var(--whoogle-dark-text) !important; } .search-container { - background-color: var(--whoogle-dark-background) !important; + background-color: var(--whoogle-dark-page-bg) !important; } .ZINbbc { @@ -66,7 +66,7 @@ select { } #search-bar { - border: 2px solid var(--whoogle-dark-accent) !important; + border: 2px solid var(--whoogle-dark-element-bg) !important; color: var(--whoogle-dark-text) !important; } @@ -75,9 +75,9 @@ select { } #search-submit { - border: 1px solid var(--whoogle-dark-accent) !important; - background: var(--whoogle-dark-accent) !important; - color: var(--whoogle-dark-background) !important; + border: 1px solid var(--whoogle-dark-element-bg) !important; + background: var(--whoogle-dark-element-bg) !important; + color: var(--whoogle-dark-contrast-text) !important; } .info-text { @@ -86,20 +86,20 @@ select { } .collapsible { - color: var(--whoogle-dark-accent) !important; + color: var(--whoogle-dark-element-bg) !important; } .collapsible:after { - color: var(--whoogle-dark-accent) !important; + color: var(--whoogle-dark-element-bg) !important; } .active { - background-color: var(--whoogle-dark-accent) !important; + background-color: var(--whoogle-dark-element-bg) !important; color: var(--whoogle-dark-contrast-text) !important; } .content { - background-color: var(--whoogle-dark-accent) !important; + background-color: var(--whoogle-dark-element-bg) !important; color: var(--whoogle-contrast-text) !important; } @@ -108,7 +108,7 @@ select { } #gh-link { - color: var(--whoogle-dark-accent); + color: var(--whoogle-dark-element-bg); } .autocomplete-items { @@ -126,6 +126,6 @@ select { } .autocomplete-active { - background-color: var(--whoogle-dark-accent) !important; - color: var(--whoogle-dark-background) !important; + background-color: var(--whoogle-dark-element-bg) !important; + color: var(--whoogle-dark-contrast-text) !important; } diff --git a/app/static/css/light-theme.css b/app/static/css/light-theme.css index a878c5e..b4da052 100644 --- a/app/static/css/light-theme.css +++ b/app/static/css/light-theme.css @@ -1,9 +1,9 @@ html { - background: var(--whoogle-background) !important; + background: var(--whoogle-page-bg) !important; } body { - background: var(--whoogle-background) !important; + background: var(--whoogle-page-bg) !important; } div { @@ -23,12 +23,12 @@ li { } textarea { - background: var(--whoogle-background) !important; + background: var(--whoogle-page-bg) !important; color: var(--whoogle-text) !important; } select { - background: var(--whoogle-background) !important; + background: var(--whoogle-page-bg) !important; color: var(--whoogle-text) !important; } @@ -57,27 +57,27 @@ div span { } input { - background-color: var(--whoogle-background) !important; + background-color: var(--whoogle-page-bg) !important; color: var(--whoogle-text) !important; } #search-bar { color: var(--whoogle-text) !important; - background-color: var(--whoogle-background); + background-color: var(--whoogle-page-bg); } .home-search { - border: 3px solid var(--whoogle-accent) !important; + border: 3px solid var(--whoogle-element-bg) !important; } .search-container { - background-color: var(--whoogle-background) !important; + background-color: var(--whoogle-page-bg) !important; } #search-submit { - border: 1px solid var(--whoogle-accent) !important; - background: var(--whoogle-accent) !important; - color: var(--whoogle-background) !important; + border: 1px solid var(--whoogle-element-bg) !important; + background: var(--whoogle-element-bg) !important; + color: var(--whoogle-contrast-text) !important; } .info-text { @@ -86,20 +86,20 @@ input { } .collapsible { - color: var(--whoogle-accent) !important; + color: var(--whoogle-element-bg) !important; } .collapsible:after { - color: var(--whoogle-accent) !important; + color: var(--whoogle-element-bg) !important; } .active { - background-color: var(--whoogle-accent) !important; + background-color: var(--whoogle-element-bg) !important; color: var(--whoogle-contrast-text) !important; } .content { - background-color: var(--whoogle-accent) !important; + background-color: var(--whoogle-element-bg) !important; color: var(--whoogle-contrast-text) !important; } @@ -108,7 +108,7 @@ input { } #gh-link { - color: var(--whoogle-accent); + color: var(--whoogle-element-bg); } .autocomplete-items { @@ -125,6 +125,6 @@ input { } .autocomplete-active { - background-color: var(--whoogle-accent) !important; - color: var(--whoogle-background) !important; + background-color: var(--whoogle-element-bg) !important; + color: var(--whoogle-contrast-text) !important; } diff --git a/app/static/css/logo.css b/app/static/css/logo.css new file mode 100644 index 0000000..6aebfa4 --- /dev/null +++ b/app/static/css/logo.css @@ -0,0 +1,17 @@ +.cls-1 { + fill: transparent; +} + +svg { + height: inherit; +} + +a { + height: inherit; +} + +@media (max-width: 1000px) { + svg { + margin-top: .7em; + } +} diff --git a/app/static/css/main.css b/app/static/css/main.css index 937812a..0a1e9cd 100644 --- a/app/static/css/main.css +++ b/app/static/css/main.css @@ -9,6 +9,10 @@ body { padding-bottom: 10px; } +.logo-container { + max-height: 500px; +} + .search-container { background: transparent !important; width: 80%; diff --git a/app/static/css/variables.css b/app/static/css/variables.css index efb6d3a..76f94ac 100644 --- a/app/static/css/variables.css +++ b/app/static/css/variables.css @@ -1,23 +1,25 @@ /* Colors */ :root { /* LIGHT THEME COLORS */ - --whoogle-background: #fff; - --whoogle-accent: #685e79; - --whoogle-text: #000; - --whoogle-contrast-text: #fff; + --whoogle-logo: #685e79; + --whoogle-page-bg: #ffffff; + --whoogle-element-bg: #685e79; + --whoogle-text: #000000; + --whoogle-contrast-text: #ffffff; --whoogle-secondary-text: #70757a; - --whoogle-result-bg: #fff; + --whoogle-result-bg: #ffffff; --whoogle-result-title: #1967d2; --whoogle-result-url: #0d652d; --whoogle-result-visited: #4b11a8; /* DARK THEME COLORS */ - --whoogle-dark-background: #222; - --whoogle-dark-accent: #685e79; - --whoogle-dark-text: #fff; - --whoogle-dark-contrast-text: #000; - --whoogle-dark-secondary-text: #bbb; - --whoogle-dark-result-bg: #000; + --whoogle-dark-logo: #685e79; + --whoogle-dark-page-bg: #222222; + --whoogle-dark-element-bg: #685e79; + --whoogle-dark-text: #ffffff; + --whoogle-dark-contrast-text: #000000; + --whoogle-dark-secondary-text: #bbbbbb; + --whoogle-dark-result-bg: #000000; --whoogle-dark-result-title: #1967d2; --whoogle-dark-result-url: #4b11a8; --whoogle-dark-result-visited: #bbbbff; diff --git a/app/static/js/controller.js b/app/static/js/controller.js index 8399220..9dc88a2 100644 --- a/app/static/js/controller.js +++ b/app/static/js/controller.js @@ -76,6 +76,9 @@ document.addEventListener("DOMContentLoaded", function() { setupSearchLayout(); setupConfigLayout(); + document.getElementById("config-load").addEventListener("click", loadConfig); + document.getElementById("config-save").addEventListener("click", saveConfig); + // Focusing on the search input field requires a delay for elements to finish // loading (seemingly only on FF) setTimeout(function() { document.getElementById("search-bar").focus(); }, 250); diff --git a/app/templates/header.html b/app/templates/header.html index cd07589..5973274 100644 --- a/app/templates/header.html +++ b/app/templates/header.html @@ -4,15 +4,17 @@