aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--README.md28
-rw-r--r--css/style.css81
-rw-r--r--index.html15
-rw-r--r--js/script.js75
-rw-r--r--urlsExample9
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