Added user config for nojs links and dark mode, minor styling updates
Ben Busby
parent
a00ccb1da8
commit
5bfc4d9a74
|
|
@ -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('<br><hr><br>', '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'):
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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();
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="/static/css/main.css">
|
||||
</head>
|
||||
<body>
|
||||
<body id="main" style="display: none; background-color: {{ bg }}">
|
||||
<div class="search-container">
|
||||
<img class="logo" src="/static/img/logo.png">
|
||||
<div class="search-fields">
|
||||
|
|
@ -15,12 +15,26 @@
|
|||
<button type="submit" id="search-submit">Search</button>
|
||||
</div>
|
||||
<br/>
|
||||
<button id="config-collapsible" class="collapsible">Configuration</button>
|
||||
<div class="content">
|
||||
<div class="config-fields">
|
||||
<div class="config-div">
|
||||
<label for="config-near">Near: </label>
|
||||
<input type="text" name="config-near" id="config-near" placeholder="City Name">
|
||||
</div>
|
||||
<div class="config-div">
|
||||
<label for="config-nojs">Show NoJS Links: </label>
|
||||
<input type="checkbox" name="config-nojs" id="config-nojs">
|
||||
</div>
|
||||
<div class="config-div">
|
||||
<label for="config-dark">Dark Mode: </label>
|
||||
<input type="checkbox" name="config-dark" id="config-dark">
|
||||
</div>
|
||||
<div class="config-div">
|
||||
<button type="submit" id="config-submit">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue