diff options
| -rw-r--r-- | README.md | 28 | ||||
| -rw-r--r-- | css/style.css | 81 | ||||
| -rw-r--r-- | index.html | 15 | ||||
| -rw-r--r-- | js/script.js | 75 | ||||
| -rw-r--r-- | urlsExample | 9 |
5 files changed, 208 insertions, 0 deletions
diff --git a/README.md b/README.md new file mode 100644 index 0000000..b04c32c --- /dev/null +++ b/README.md @@ -0,0 +1,28 @@ +# Taamas' Mainpage +A locally hosted webpage to use as a browser home page. + +## Description +This is a simple, minimalist mainpage. It consists of a title, a background and some buttons for search fields in selected webpages. When a button is clicked, the corresponding search box appears and the others are hidden. + +## Configuration +For the mainpage to work, the home page of the browser must be set to the path of `index.html`, for example `file:///home/username/.mainpage/index.html`. + +The background image to be loaded must be named `bg.jpg` and be located in a folder named `img` which has to be in the same folder as `index.html`. This can be customized editing the `background-image: url(../img/bg.jpg);` line in `css/style.css`. + +To change the title, edit the `<h1>Taamas' mainpage</h1>` line in `index.html`. + +The search fields loaded are determined by a file in the root of the page directory named `urls`. The syntax of given urls is as follows: +``` +'[mnemonic]': '[url]' #[name] +``` ++ `mnemonic` is the text on the button. ++ `url` is the search url and has to contain `{}`, which will be subtituted by search terms. ++ `name` can be used as a reminder of the target web name and will appear as the search box background. + +In my case, this file is generated by a command executed by vim when I save the configuration file of qutebrowser, where my preferred search engines are stored: +```bash +autocmd BufWritePost ~/.config/qutebrowser/config.py !cat .config/qutebrowser/config.py | grep -e \'.*\':\ \'.*{}.*\' | grep -v DEFAULT | sed 's/,//' | sed 's/^\ *//' > ~/.mainpage/urls +``` + +The repo includes a file named `urlsExample`. This file can be edited to configure the prefered search fields. Remember to rename it to `urls` afterwards or create a new `urls` file. The `urlsExample` serves just as a guide for syntax and is not used by the page in any way, so it can be removed safely. + diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..ee33744 --- /dev/null +++ b/css/style.css @@ -0,0 +1,81 @@ +body { + background-color: darkblue; + background-image: url(../img/bg.jpg); + background-attachment: fixed; + background-position: center center; + background-size: cover; +} + +header { + float: left; + padding: 2% 0% 0% 6%; +} + +h1 { + color: white; + font-family: serif; + font-size: 2.3em; + font-weight: bold; + font-variant: small-caps; + text-shadow: 1px 1px darkblue; + background-color: rgba(60,0,120,0.6); + border-radius: 20px; + padding: 5px 20px 8px; +} + +.searches { + text-align: center; + float: right; + padding: 8% 10% 0% 0%; +} + +.psb { + background-color: rgba(60,0,120,0.8); + border-radius: 10px; + width: 120%; + height: 150%; + padding-top: 6px; + padding-bottom: 6px; +} + +.psb * + * { + margin-left: 8px; +} +.searches input[type=button] { + text-decoration: none; + font-family: serif; + font-size: 1em; + color: white; + background: none; + border: none; + background-color: rgba(0,100,120,0.8); + border-radius: 10px; + text-shadow: 1px 1px darkblue; + padding: 4px 16px; +} + +input[type=button]:focus { + background-color: rgba(0,190,220,0.8); +} + +.searches input[type=text] { + padding: 2px 5px ; + font-family: serif; + font-size: 0.8em; + text-align: center; + caret-color: rgba(0,0,0,0.2); + border-radius: 5px; + border: none; + background-color: rgba(140,220,255,1); + width: 10px; + transition: ease-in-out, width .1s ease-in-out; +} + +input[type=text]:focus { + border: none; + width: 100px; +} + +*:focus { + outline: none; +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..ce95d2a --- /dev/null +++ b/index.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <link rel="stylesheet" type="text/css" href="css/style.css"> + <script src="js/script.js"></script> + <title>Taamas' Mainpage</title> +</head> +<body onload="createSearchQMs('urls');"> + <header> + <h1>Taamas' mainpage</h1> + </header> + <section id="qms" class="searches"/> +</body> +</html> diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..523d26b --- /dev/null +++ b/js/script.js @@ -0,0 +1,75 @@ +var codes = new Array(); +var urls = new Array(); +var hints = new Array(); + +function createSearchQMs(file) { + let rawFile = new XMLHttpRequest(); + rawFile.open("GET", file, false); + rawFile.onreadystatechange = function () + { + if(rawFile.readyState === 4) + { + if(rawFile.status === 200 || rawFile.status == 0) + { + let allText = rawFile.responseText; + myFunc(allText); + } + } + } + rawFile.send(null); +} + +function myFunc(text) { + let lines = text.split('\n'); + for (let i=0; i < lines.length - 1; i++) { // -1 to avoid extra undefined line + let parts = lines[i].split('\''); + codes[i] = parts[1]; + urls[i] = parts[3]; + hints[i] = parts[4].split('#')[1]; + let qms = document.getElementById("qms"); + let newP = document.createElement("p"); + newP.id = "p" + i; + let newInput = document.createElement("input"); + newInput.id = "code" + i; + newInput.type = "button"; + newInput.value = codes[i]; + newInput.onclick = function() {createInput(i)}; + newP.appendChild(newInput); + qms.appendChild(newP); + } +} + +function createInput(id) { + // Delete all search boxes + let sbs = document.getElementsByClassName("sb"); + for (let i = 0; i < sbs.length; i++) { + sbs[i].parentNode.removeChild(sbs[i]); + } + // Clean big blue p bg + let psbs = document.getElementsByClassName("psb"); + for (let i = 0; i < psbs.length; i++) { + psbs[i].classList.remove("psb"); + } + // Create corresponding search box + let par = document.getElementById("p"+id); + par.className = "psb"; + let sb = document.createElement("input"); + sb.id = "sb" + id; + sb.className = "sb"; + sb.type = "text"; + sb.placeholder = hints[id]; + sb.onkeydown = function() { + if (event.keyCode === 13) { + search(id); + } + }; + par.appendChild(sb); + // Focus the search box + document.getElementById("sb"+id).focus(); +} + +function search(id) { + let sb = document.getElementById("sb"+id); + url = urls[id].replace("{}", sb.value); + window.location.assign(url); +} diff --git a/urlsExample b/urlsExample new file mode 100644 index 0000000..6daab34 --- /dev/null +++ b/urlsExample @@ -0,0 +1,9 @@ +'ddg': 'https://duckduckgo.com/?q={}' #duckduckgo +'w': 'https://en.wikipedia.org/?search={}' #wikipedia +'we': 'https://es.wikipedia.org/?search={}' #wikipedia(ES) +'aw': 'https://wiki.archlinux.org/?search={}' #archWiki +'y': 'https://www.youtube.com/results?search_query={}' #youtube +'tw': 'https://twitter.com/{}' #twitter +'gh': 'https://www.github.com/search?q={}' #github +'ep': 'https://emojipedia.org/search/?q={}' #emojipedia +'gi': 'https://game-icons.net/search.html?q={}' #game-icons |