diff --git a/css/main.css b/css/main.css index ebf0717..c38c201 100644 --- a/css/main.css +++ b/css/main.css @@ -96,3 +96,23 @@ body { color: #7986CB; } .main #other-content .foxxy h4, .main #other-content .foxxy a:hover { color: #A1887F; } + +.settings-modal { + display: none; + position: fixed; + z-index: 1; + width: 100%; + height: 100%; + overflow: auto; + background: #fff; } + .settings-modal .modal-content { + border: 1px solid red; } + .settings-modal .close { + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; } + .settings-modal .close:hover, .settings-modal .close:focus { + color: black; + text-decoration: none; + cursor: pointer; } diff --git a/index.html b/index.html index ad5edfa..45be030 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,12 @@ +
+
+ × +

Testing

+
+

Good Morning!

@@ -22,6 +28,7 @@
+ \ No newline at end of file diff --git a/js/main.js b/js/main.js index e5fa33d..352b7fb 100644 --- a/js/main.js +++ b/js/main.js @@ -68,7 +68,14 @@ function initSearchBar(jsonData) { if (event.key != 'Enter') return // Open google with the search results. - query = document.getElementById(searchBarId).value.replace(/\ /g, "+") + query = document.getElementById(searchBarId).value + if (query == "--setting") { + showSettings() + document.getElementById(searchBarId).value = "" + return + } + + query = query.replace(/\ /g, "+") document.location = searchUrl + query }) } diff --git a/js/settings.js b/js/settings.js new file mode 100644 index 0000000..2e25e93 --- /dev/null +++ b/js/settings.js @@ -0,0 +1,18 @@ +/** + * File to handle editing the settings from the menu itself. + * + * A modal will be shown where the user can edit settings + * and finally when submitted, the settings will be written to + * the config.json and this config is read each time the page + * loads. + */ + +modalId = "settings" +closeBtn = "close" + +function showSettings() { + modalEl = document.getElementById(modalId) + closeBtn = document.getElementsByClassName(closeBtn)[0] + modalEl.style.display = "block" + closeBtn.onclick = () => {modalEl.style.display = "none"} +} \ No newline at end of file diff --git a/scss/main.scss b/scss/main.scss index 649e283..bf985af 100644 --- a/scss/main.scss +++ b/scss/main.scss @@ -176,4 +176,31 @@ body { } } } +} + +.settings-modal { + display: none; + position: fixed; + z-index: 1; + width: 100%; + height: 100%; + overflow: auto; + background: $foreground; + + .modal-content { + border: 1px solid red; + } + + .close { + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; + + &:hover, &:focus { + color: black; + text-decoration: none; + cursor: pointer; + } + } } \ No newline at end of file