diff --git a/app/routes.py b/app/routes.py
index 136d6c9..03fa69f 100644
--- a/app/routes.py
+++ b/app/routes.py
@@ -49,7 +49,8 @@ def send_request(curl_url, ua):
@app.route('/', methods=['GET'])
def index():
- return render_template('index.html')
+ bg = '#000' if 'dark' in user_config and user_config['dark'] else '#fff'
+ return render_template('index.html', bg=bg)
@app.route('/search', methods=['GET'])
@@ -92,9 +93,12 @@ def search():
get_body = send_request(SEARCH_URL + full_query, get_ua(user_agent))
# Aesthetic only re-skinning
+ dark_mode = 'dark' in user_config and user_config['dark']
get_body = get_body.replace('>G<', '>Sh<')
pattern = re.compile('4285f4|ea4335|fbcc05|34a853|fbbc05', re.IGNORECASE)
get_body = pattern.sub('685e79', get_body)
+ if dark_mode:
+ get_body = get_body.replace('fff', '000').replace('202124', 'ddd').replace('1967D2', '3b85ea')
soup = BeautifulSoup(get_body, 'html.parser')
@@ -141,6 +145,12 @@ def search():
a.append(BeautifulSoup('
', 'html.parser'))
a.append(nojs_link)
+ # Set up dark mode if active
+ if dark_mode:
+ soup.find('html')['style'] = 'scrollbar-color: #333 #111;'
+ for input_element in soup.findAll('input'):
+ input_element['style'] = 'color:#fff;'
+
# Ensure no extra scripts passed through
try:
for script in soup('script'):
diff --git a/app/static/css/main.css b/app/static/css/main.css
index f3472bd..eeb1fc3 100644
--- a/app/static/css/main.css
+++ b/app/static/css/main.css
@@ -1,7 +1,6 @@
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body {
- background: #fff;
font-family: 'Open Sans', sans-serif;
}
@@ -32,12 +31,12 @@ body {
border: 3px solid #685e79;
padding: 5px;
height: 40px;
- border-radius: 10px;
outline: none;
font-size: 24px;
color: #685e79;
border-radius: 10px 10px 0 0;
max-width: 600px;
+ background: rgba(0,0,0,0);
}
#search-bar:focus{
@@ -51,7 +50,6 @@ body {
background: #685e79;
text-align: center;
color: #fff;
- border-radius: 10px;
cursor: pointer;
font-size: 20px;
align-content: center;
@@ -61,3 +59,51 @@ body {
max-width: 600px;
}
+.config-div {
+ padding: 5px;
+}
+
+.collapsible {
+ background-color: rgba(0,0,0,0);
+ color: #685e79;
+ cursor: pointer;
+ padding: 18px;
+ width: 100%;
+ border: none;
+ text-align: left;
+ outline: none;
+ font-size: 15px;
+ border-radius: 10px 10px 0 0;
+}
+
+.active {
+ background-color: #685e79;
+ color: white;
+}
+
+.collapsible:after {
+ content: '\002B';
+ color: #685e79;
+ font-weight: bold;
+ float: right;
+ margin-left: 5px;
+}
+
+.active:after {
+ content: "\2212";
+ color: white;
+}
+
+.content {
+ padding: 0 18px;
+ max-height: 0;
+ overflow: hidden;
+ transition: max-height 0.2s ease-out;
+ background-color: #685e79;
+ color: white;
+ border-radius: 0 0 10px 10px;
+}
+
+.open {
+ padding-bottom: 20px;
+}
\ No newline at end of file
diff --git a/app/static/js/controller.js b/app/static/js/controller.js
index 758fbc0..aa51e6e 100644
--- a/app/static/js/controller.js
+++ b/app/static/js/controller.js
@@ -1,4 +1,7 @@
document.addEventListener("DOMContentLoaded", function() {
+ setTimeout(function() {
+ document.getElementById("main").style.display = "block";
+ }, 100);
// Setup search field
const searchBar = document.getElementById("search-bar");
@@ -20,33 +23,68 @@ document.addEventListener("DOMContentLoaded", function() {
};
// Setup shoogle config
+ const collapsible = document.getElementById("config-collapsible");
+ collapsible.addEventListener("click", function() {
+ this.classList.toggle("active");
+ let content = this.nextElementSibling;
+ if (content.style.maxHeight) {
+ content.style.maxHeight = null;
+ } else {
+ content.style.maxHeight = content.scrollHeight + "px";
+ }
+
+ content.classList.toggle("open");
+ });
+
const saveConfig = document.getElementById("config-submit");
const nearConfig = document.getElementById("config-near");
+ const noJSConfig = document.getElementById("config-nojs");
+ const darkConfig = document.getElementById("config-dark");
// Request existing config info
- var xhr = new XMLHttpRequest();
- xhr.open("GET", "/static/config.json");
- xhr.onload = function() {
- if (xhr.readyState === 4 && xhr.status !== 200) {
+ let xhrGET = new XMLHttpRequest();
+ xhrGET.open("GET", "/static/config.json");
+ xhrGET.onload = function() {
+ if (xhrGET.readyState === 4 && xhrGET.status !== 200) {
alert("Error loading Shoogle config");
return;
}
// Allow for updating/saving config values
- let configSettings = JSON.parse(xhr.responseText);
+ let configSettings = JSON.parse(xhrGET.responseText);
- nearConfig.value = configSettings["near"];
+ nearConfig.value = configSettings["near"] ? configSettings["near"] : "";
nearConfig.addEventListener("keyup", function(event) {
configSettings["near"] = nearConfig.value;
});
+ noJSConfig.checked = !!configSettings["nojs"];
+ noJSConfig.addEventListener("change", function() {
+ configSettings["nojs"] = noJSConfig.checked ? 1 : 0;
+ });
+
+ darkConfig.checked = !!configSettings["dark"];
+ darkConfig.addEventListener("change", function() {
+ configSettings["dark"] = darkConfig.checked ? 1 : 0;
+ });
+
saveConfig.onclick = function() {
- var xhr = new XMLHttpRequest();
- xhr.open("POST", "/config");
- xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
- xhr.send(JSON.stringify(configSettings));
+ let xhrPOST = new XMLHttpRequest();
+ xhrPOST.open("POST", "/config");
+ xhrPOST.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
+ xhrPOST.send(JSON.stringify(configSettings));
+ xhrPOST.onload = function() {
+ if (xhrGET.readyState === 4 && xhrPOST.status !== 200) {
+ alert("Failure to save config file");
+ return;
+ }
+
+ if (confirm("Configuration saved. Reload now?")) {
+ window.location.reload();
+ }
+ }
}
};
- xhr.send();
+ xhrGET.send();
});
diff --git a/app/templates/index.html b/app/templates/index.html
index 695a4c4..e195fc5 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -7,7 +7,7 @@
-
+
@@ -15,10 +15,24 @@
-
-
-
-
+
+