From 43c172a644192a7653973559ef83db7fdf6f1a21 Mon Sep 17 00:00:00 2001 From: Malte Bublitz Date: Sun, 2 Oct 2022 22:08:26 +0200 Subject: [PATCH] Neuer-Tab-Seite --- js/new-tab.js | 37 ++++++++++++++ new-tab/index.php | 40 +++++++++++++++ new-tab/style.css | 123 ++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 200 insertions(+) create mode 100644 js/new-tab.js create mode 100644 new-tab/index.php create mode 100644 new-tab/style.css diff --git a/js/new-tab.js b/js/new-tab.js new file mode 100644 index 0000000..d33d765 --- /dev/null +++ b/js/new-tab.js @@ -0,0 +1,37 @@ +window.onload = function() { + var _useragent = navigator.userAgent; + var _lang = navigator.language.replace("-", "_"); + var _info = "\n == Debug Info ==\n\n" + + "User Agent:\n\t" + _useragent + "\n" + + "Language:\n\t" + _lang + "\n"; + + //console.log("User Agent: "+_useragent); + //console.log("Language: "+_lang); + console.debug(_info); + + /** + * Greeting + */ + greeting.init( + "header h1", + "greeting", + ); + console.info("You can set a new greeting via JavaScript:\n\tgreeting.set(\"Foo bar\")"); + greeting.hide(); + + /* + * Set focus to search + */ + document.querySelector("input[type=search]").focus(); + + /** + * Redirect if an URL was entered in the search form + */ + document.querySelector("#search form").addEventListener('submit', (event) => { + if (document.querySelector("input[type=search]").value.startsWith("http://") || document.querySelector("input[type=search]").value.startsWith("https://")) { + console.info('location.href = document.querySelector("input[type=search]").value;') + location.href = document.querySelector("input[type=search]").value; + event.preventDefault(); + } + }); +}; \ No newline at end of file diff --git a/new-tab/index.php b/new-tab/index.php new file mode 100644 index 0000000..ebbf9dd --- /dev/null +++ b/new-tab/index.php @@ -0,0 +1,40 @@ + + + + + + + + Neuer Tab + + + + + + +

hello world

+ +

+ + +"); +require("../js/new-tab.js"); +print("\t\t"); +?> + + diff --git a/new-tab/style.css b/new-tab/style.css new file mode 100644 index 0000000..6a8a3ff --- /dev/null +++ b/new-tab/style.css @@ -0,0 +1,123 @@ +@charset "UTF-8"; + +/** + * New Tab page + * + * + * + * Farbpalette: + * Mountain Living // + * Hintergrund: + * Flat Bone // #EDEBE6 // rgb(237,235,230) + * Highlight: + * Rigor Mortis // #403B33 // rgb(64,59,51) + * Text: + * waitress // #A40114 // rgb(164,1,20) + * Highlight (secondary): + * G 445 // #94C7B6 // rgb(148,199,182) + * + * EDIT 2021-05-22: + * Es werden die Farben von tiny[1] verwendet, da sie + * nicht so unangenehm grell sind. + * + * [1]: https://dev.malte70.de/webdesigns/Startseiten/tiny/ + */ + +@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,400;1,400&display=swap'); + +@import url('https://xyz.malte70.de/css/normalize.min.css'); + +/** + * @url https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties + */ +:root { + --color-background: #EDEBE6; + --color-foreground: #403B33; + --color-highlight: #A40114; + --color-highlight-secodary: #94C7B6; + --font-body: 'Source Sans Pro', sans-serif; + --font-input: 'Inconsolata-g', 'Inconsolata', monospace; +} + +*, *:before, *:after { + box-sizing: border-box; +} + +*:focus { + outline: none; +} + +body { + background: var(--color-background); + color: var(--color-foreground); + font: 20px var(--font-body); +} + +/* =============== Page Header =============== */ +header { + margin-top: 3.5em; + text-align: center; +} +header h1 { + font-size: 4em; + font-weight: 200; + color: var(--color-highlight); +} + +/* =============== Main Area :: Search Widget =============== */ +main { + margin-top: 3.25em; + text-align: center; +} +main #search { + width: 40em; + margin: 20em auto 2em; + padding: 0; +} +main #search input[type=text], +main #search input[type=search] { + display: inline-block; + border: 1px solid var(--color-highlight); + /*border-right: 0;*/ + background: var(--color-background); + margin: 0; + /*margin-right: -5px;*/ + padding: 0.6em; + width: 100%; + /*font: 16px "Source Sans Pro",sans-serif;*/ + font: 1em var(--font-input); + +} +main #search input[type=text]::placeholder, +main #search input[type=text]::-moz-placeholder, +main #search input[type=search]::placeholder, +main #search input[type=search]::-moz-placeholder { + color: var(--color-highlight); + font-style: italic; + text-align: center; +} + +main #search input[type=text]:active, +main #search input[type=text]:focus, +main #search input[type=search]:active, +main #search input[type=search]:focus { + border-color: var(--color-highlight); + font-style: normal; +} +main #search button[type=submit] { + display: inline-block; + border: 1px solid var(--color-highlight); + background: var(--color-highlight); + color: var(--color-background); + margin: .5em 0; + padding: 5px; + width: 27%; + font: 1em "Source Sans Pro",sans-serif; + display: none; +} +main #search button[type=submit]:hover, +main #search button[type=submit]:active { + cursor: pointer; + background: none; + color: var(--color-foreground); +} -- 2.30.2