Created the repo.

author: InigoGutierrez <inigogf.95@gmail.com> 2019-01-04 02:35:22 +0100
committer: InigoGutierrez <inigogf.95@gmail.com> 2019-01-04 02:35:22 +0100
commit: 991054675e7a1b2f1525e606a489560b64bdbdc5 (patch)
tree: 6e7994603373426dcf1efcdd841a5f44ce3a0b72
download: mainpage-991054675e7a1b2f1525e606a489560b64bdbdc5.tar.gz
mainpage-991054675e7a1b2f1525e606a489560b64bdbdc5.zip
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
author	InigoGutierrez <inigogf.95@gmail.com>	2019-01-04 02:35:22 +0100
committer	InigoGutierrez <inigogf.95@gmail.com>	2019-01-04 02:35:22 +0100
commit	991054675e7a1b2f1525e606a489560b64bdbdc5 (patch)
tree	6e7994603373426dcf1efcdd841a5f44ce3a0b72
download	mainpage-991054675e7a1b2f1525e606a489560b64bdbdc5.tar.gz mainpage-991054675e7a1b2f1525e606a489560b64bdbdc5.zip