Git-Import
authorMalte Bublitz <malte@rolltreppe3.de>
Sun, 8 May 2022 03:50:18 +0000 (05:50 +0200)
committerMalte Bublitz <malte@rolltreppe3.de>
Sun, 8 May 2022 03:50:18 +0000 (05:50 +0200)
15 files changed:
config.inc.php [new file with mode: 0644]
favicon.png [new file with mode: 0644]
index.php [new file with mode: 0644]
main.js [new file with mode: 0644]
mini/greeting.js [new file with mode: 0644]
mini/index.html [new file with mode: 0644]
mini/style.css [new file with mode: 0644]
old/config.inc.php [new file with mode: 0644]
old/index.php [new file with mode: 0644]
old/main.js [new file with mode: 0644]
old/style.css [new file with mode: 0644]
old/template.inc.php [new file with mode: 0644]
style.css [new file with mode: 0644]
template.inc.php [new file with mode: 0644]
tty/index.php [new file with mode: 0644]

diff --git a/config.inc.php b/config.inc.php
new file mode 100644 (file)
index 0000000..8ad490b
--- /dev/null
@@ -0,0 +1,28 @@
+<?php
+
+$Links = Array();
+$Links[] = Array(
+       Array("facebook",         "https://facebook.com"                       ),
+       Array("twitter",          "https://twitter.com"                        ),
+       Array("archforum",        "https://forum.archlinux.de/"                ),
+       Array("reddit",           "https://reddit.com/"                        ),
+       Array("youtube",          "https://youtube.com/"              ),
+);
+$Links[] = Array(
+//     Array("WhatsApp",         "https://web.whatsapp.com/"                  ),
+       Array("wiki",             "https://wiki.rt3x.de/"                      ),
+       Array("app",              "https://app.malte70.de/"                    ),
+       Array("github",           "https://github.com/"                        ),
+    Array("diskstation",      "https://gallifrey.malte70.de:5001/"         ),
+    Array("stackshare",       "https://stackshare.io/"                     ),
+);
+$Links[] = Array(
+       Array("netdata",          "https://app.netdata.cloud"                  ),
+       Array("cockpit",          "https://deepthought.rolltreppe3.de/"        ),
+       Array("servercow",        "https://cp.servercow.de"                    ),
+       Array("mailcow",          "https://hosted.mailcow.de"                  ),
+       //Array("dovoba",         "https://www.dovoba.de/services_cloud/portal"),
+       Array("mdn",              "https://developer.mozilla.org/de/"          ),
+);
+
+?>
diff --git a/favicon.png b/favicon.png
new file mode 100644 (file)
index 0000000..252f056
Binary files /dev/null and b/favicon.png differ
diff --git a/index.php b/index.php
new file mode 100644 (file)
index 0000000..07a23c7
--- /dev/null
+++ b/index.php
@@ -0,0 +1,62 @@
+<?php
+/**
+ * startseite.malte70.de/index.php
+ */
+
+require_once("config.inc.php");
+
+$host = explode(".", gethostname())[0];
+
+if (strlen($_SERVER["HTTP_ACCEPT_LANGUAGE"]) >= 2) {
+    $lang = substr($_SERVER["HTTP_ACCEPT_LANGUAGE"], 0, 2);
+} else {
+    $lang = "en";
+}
+
+$Data = Array(
+       "Meta"    => Array(
+               "Lang"       => "en",
+               "Charset"    => "UTF-8",
+               //"Title"      => "Homepage @ ".$host,
+               "Title"      => "Homepage",
+               "Author"     => "malte70@".$host,
+               "Stylesheet" => "style.css",
+               //"Icon"       => "https://xyz.malte70.de/img/icons_tango/go-home-512.png",
+               "Icon"       => "favicon.png",
+       ),
+       "Links"   => NULL,
+       "Notepad" => true,
+       "WhoAmI"  => "john_doe@pc",
+       "JS"      => true,
+    "Search"  => "Google", // Google/searX
+       "Footer"  => Array(
+               "CopyrightYear" => date("Y"),
+               "AuthorName"    => "malte70",
+               "AuthorURL"     => "https://malte70.de/"
+       )
+);
+
+$Data["Links"] = Array();
+foreach ($Links as $Links_Row) {
+       $L_row = Array();
+       foreach ($Links_Row as $L_Link) {
+           $L_row[] = Array(
+                       "Title" => $L_Link[0],
+                       "URL"   => $L_Link[1]
+               );
+       }
+       $Data["Links"][] = $L_row;
+}
+
+/**
+ * Modify $Data if Accept-Language is German
+ */
+if ($lang == "de") {
+    $Data["Meta"]["Lang"]  = "de";
+    $Data["Meta"]["Title"] = "Startseite";
+}
+
+
+require_once("template.inc.php");
+
+?>
diff --git a/main.js b/main.js
new file mode 100644 (file)
index 0000000..e7aced2
--- /dev/null
+++ b/main.js
@@ -0,0 +1,139 @@
+window.whoami = {
+    init: function() {
+        console.log("whoami.init()");
+        if (!this.section) {
+            this.section = document.getElementById("whoami")
+        }
+        
+        this.whoami_user   = localStorage.getItem("whoami_user");
+        this.whoami_host   = localStorage.getItem("whoami_host");
+        this.whoami_format = localStorage.getItem("whoami_format");
+        
+        if (!this.whoami_user) {
+            console.log("Asking for username");
+            this.whoami_user = prompt("Your user name", "malte70");
+            if (this.whoami_user === null)
+                this.whoami_user = "malte70";
+        }
+        if (!this.whoami_host) {
+            console.log("Asking for hostname");
+            this.whoami_host = prompt("Hostname", "localhost");
+            if (this.whoami_host === null)
+                this.whoami_host = "pc";
+        }
+        if (!this.whoami_format) {
+            console.log("Asking for format");
+            this.whoami_format = prompt("Format (unix|windows)", "unix");
+            if (this.whoami_format === null)
+                this.whoami_format = "windows";
+        }
+        
+        /*var urlParams = new URLSearchParams(window.location.search);
+        if (!urlParams.has('user')) {
+            this.whoami_user = null;
+        } else {
+            this.whoami_user = urlParams.get('user');
+            this.whoami_host = "PLUTO";
+        }*/
+       
+    },
+    deinit: function() {
+        localStorage.removeItem("whoami_user");
+        localStorage.removeItem("whoami_host");
+        localStorage.removeItem("whoami_format");
+    },
+    settings: function() {
+        console.log("whoami.settings()");
+        this.whoami_user   = prompt("Your user name",        localStorage.getItem("whoami_user"));
+       this.whoami_host   = prompt("Hostname",              localStorage.getItem("whoami_host"));
+       this.whoami_format = prompt("Format (unix|windows)", localStorage.getItem("whoami_format"));
+        
+        if (this.whoami_user === null)
+            this.whoami_user = "malte70";
+        if (this.whoami_host === null) {
+            if (localStorage.getItem("whoami_host") !== null) {
+                this.whoami_host = localStorage.getItem("whoami_host");
+            } else {
+                this.whoami_host = "pc";
+            }
+        }
+        if (this.whoami_format === null)
+            this.whoami_format = "windows";
+        
+       console.table(
+           [
+               ["whoami_user",   this.whoami_user],
+               ["whoami_host",   this.whoami_host],
+               ["whoami_format", this.whoami_format],
+           ]
+       );
+       
+       this.update();
+    },
+    update: function() {
+        // Update localstorage
+        localStorage.setItem("whoami_user", this.whoami_user);
+        localStorage.setItem("whoami_host", this.whoami_host);
+        localStorage.setItem("whoami_format", this.whoami_format);
+        
+        if (this.whoami_format.toLowerCase() == "windows") {
+            if (this.whoami_user == "root" || this.whoami_user == "admin")
+                this.whoami_user = "Administrator";
+                
+                       if (this.whoami_host == this.whoami_host.toLowerCase() && this.whoami_host != "localhost")
+                               this.whoami_host = this.whoami_host.toUpperCase()
+                               
+                       // strip domain from fqdn
+                       this.whoami_host = this.whoami_host.substr(
+                               0,
+                               this.whoami_host.indexOf(".")
+                       );
+                       user_login = '<span class="red">\\\\</span>'
+                               + this.whoami_host
+                               + '<span class="red">\\</span>'
+                               + this.whoami_user;
+                       
+               } else {
+                       user_login = this.whoami_user
+                               + '<span class="red">@</span>'
+                               + this.whoami_host;
+                       
+               }
+               
+               this.section.innerHTML = '<p>'+user_login+'</p>';
+       },
+};
+window.notepad = function(selector, storageKey) {
+    //console.log("window.notepad(\""+selector+"\", \""+storageKey+"\")")
+
+    elem = document.querySelector(selector);
+       if (localStorage.getItem(storageKey) !== null) {
+        console.log("window.notepad(): Loading from LocalStorage")
+               elem.innerHTML = localStorage.getItem("notepad");
+    }
+    elem.addEventListener("focusout", function() {
+        console.log("window.notepad(): Focus lost. Storing on LocalStorage");
+        localStorage.setItem(storageKey, document.querySelector(selector).innerHTML);
+    });
+    //document.querySelector(selector).onclick = function() {
+    //    localStorage.setItem(storageKey, document.querySelector(selector).innerHTML);
+    //};
+};
+window.onload = function() {
+    window.whoami.init();
+    window.whoami.update();
+    
+    document.querySelector(
+        "button#settings"
+    ).onclick = function() {
+        window.whoami.settings();
+        //window.whoami.update();
+    };
+    
+    window.notepad("#notepadContent", "notepad");
+
+    /**
+    * Hide footer
+    */
+    //document.getElementsByTagName("footer")[0].remove()
+};
diff --git a/mini/greeting.js b/mini/greeting.js
new file mode 100644 (file)
index 0000000..93fb2ce
--- /dev/null
@@ -0,0 +1,73 @@
+var greeting = {
+    config: {
+        storageKey: "greeting",
+        greetingSelector: "header h1"
+    },
+    // current greeting
+    text: "",
+    
+    /**
+     * Initialize greeting.js
+     */
+    init: function(greetingSelector = null, storageKey = null){
+        if (greetingSelector !== null) {
+            greeting.config.greetingSelector = greetingSelector;
+        }
+        if (storageKey !== null) {
+            greeting.config.storageKey = storageKey;
+        }
+        
+        // Read storage
+        greeting.readStorage();
+        
+        // Update/set greeting element's content
+        greeting.update();
+    },
+    
+    /**
+     * Get the HTMLElement matching config.greetingSelector
+     */
+    getElem: function() {
+        return document.querySelector(greeting.config.greetingSelector);
+    },
+    
+    /**
+     * Set greeting.text to the value in localStorage.
+     * If the storage entry did not exist, default to getElem()'s
+     * innerText
+     */
+    readStorage: function(){
+        greeting.text = localStorage.getItem(greeting.config.storageKey);
+        if (greeting.text == null) {
+            // No greeting stored until now
+            greeting.text = greeting.getElem().innerText;
+            if (greeting.text.length < 1) {
+                greeting.text = "hello";
+            }
+        }
+    },
+    
+    /**
+     * Set a new greeting
+     */
+    set: function(newGreeting){
+        if (newGreeting.length < 1)
+            return false;
+        
+        greeting.text = newGreeting;
+        //localStorage.setItem(greeting.config.storageKey, greeting.text);
+        greeting.update();
+    },
+    
+    /**
+     * Update the greeting HTML element by setting it
+     * to greeting.text, and store it in localStorage
+     */
+    update: function(){
+        greeting.getElem().innerText = greeting.text;
+        localStorage.setItem(
+            greeting.config.storageKey,
+            greeting.text
+        );
+    },
+};
diff --git a/mini/index.html b/mini/index.html
new file mode 100644 (file)
index 0000000..3c720aa
--- /dev/null
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="de">
+       <head>
+               <meta charset="UTF-8">
+               <meta name="viewport" content="width=device-width, initial-scale=1.0">
+               <meta http-equiv="X-UA-Compatible" content="IE=edge">
+               
+               <title>Startseite</title>
+               
+               <link rel="stylesheet" type="text/css" href="../../normalize.css">
+               <link rel="stylesheet" type="text/css" href="style.css">
+        <link rel="icon" type="image/png" sizes="512x512" href="https://dev.malte70.de/tango-icons/img/go-home-512.png">
+       </head>
+       <body id="top">
+               <header>
+                       <h1>hello world</h1>
+               </header>
+               <main>
+                       <section id="search">
+                               <form action="https://google.com/search" method="GET">
+                                       <input type="hidden" name="hl" value="de">
+                                       <!--<input type="text" name="q" placeholder="Google-Suche">-->
+                                       <input type="search" name="q" placeholder="Google-Suche">
+                                       <button type="submit">Suchen</button>
+                               </form>
+                       </section>
+               </main>
+               
+        <script type="text/javascript" src="greeting.js"></script>
+               <script type="text/javascript">
+                       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.init(
+                    "header h1",
+                    "greeting"
+                );
+                console.info("You can set a new greeting via JavaScript:\n\tgreeting.set(\"Foo bar\")");
+                
+                /*
+                 * Set focus to search <input>
+                 */
+                document.querySelector("input[type=search]").focus();
+                       };
+               </script>
+       </body>
+</html>
diff --git a/mini/style.css b/mini/style.css
new file mode 100644 (file)
index 0000000..5ff6c8d
--- /dev/null
@@ -0,0 +1,154 @@
+@charset "UTF-8";
+
+/**
+ * Startseite für malte70@pluto
+ * 
+ *    <http://pluto/~malte70/home/>
+ * 
+ * Farbpalette:
+ *    Vintage Modern <http://www.colourlovers.com/palette/110225/Vintage_Modern>
+ *    Hintergrund:
+ *      Verner Panton // #F2C45A // rgb(242,196,90)
+ *    Highlight:
+ *      Eames // #8C2318 // rgb(140,35,24)
+ *    Text:
+ *      Knoll // #5E8C6A // rgb(94,140,106)
+ * 
+ * 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');
+
+/**
+ * @url https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
+ */
+:root {
+  --color-background: #eee;
+  --color-foreground: #888;
+  --color-highlight: #ff8000;
+}
+
+body {
+       background: var(--color-background);
+       color: var(--color-foreground);
+       font: 18px 'Source Sans Pro', sans-serif;
+}
+
+/* =============== Page Header =============== */
+header {
+       margin-top: 3.5em;
+       text-align: center;
+}
+header h1 {
+       font-size: 3em;
+       font-weight: 200;
+       color: var(--color-highlight);
+}
+
+/* =============== Main Area :: Search Widget =============== */
+main {
+       margin-top: 3.25em;
+       text-align: center;
+}
+main #search {
+       width: 25em;
+       margin: 0.5em auto;
+       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: 6px 5px;
+       width: 70%;
+       /*font: 16px "Source Sans Pro",sans-serif;*/
+       font: 0.8em "Inconsolata-g";
+/*
+}
+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: rgb(136,166,94);*/
+       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: 16px "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);
+}
+
+/* =============== Main Area :: Link Section =============== */
+main #links {
+       display: none;
+}
+main #links ul {
+       list-style: none;
+       padding: 0;
+}
+main #links ul li {
+       display: inline-block;
+       padding: 0;
+       margin: 0;
+}
+main #links a:link, main #links a:visited {
+       width: 7em;
+       display: inline-block;
+       padding: 1.2em;
+       font-size: 1.2em;
+       text-decoration: none;
+       color: #2ecc71;
+       border: .17em solid #2ecc71;
+       margin: .6em;
+       margin-bottom: 0;
+}
+main #links a:hover, main #links a:active {
+       color: #ecf0f1;
+       background: #2ecc71;
+}
+
+/* =============== Footer =============== */
+footer {
+       position: absolute;
+       bottom: .3em;
+       right: .3em;
+       left: 0;
+       width: 100%;
+       text-align: right;
+       font: .7em Consolas, 'Inconsolata-g', monospace;
+}
+footer a:link, footer a:visited {
+       color: #111111;
+}
+footer a:hover, footer a:active {
+       color: #2ecc71;
+}
diff --git a/old/config.inc.php b/old/config.inc.php
new file mode 100644 (file)
index 0000000..36c3808
--- /dev/null
@@ -0,0 +1,29 @@
+<?php
+
+$Links = Array();
+$Links[] = Array(
+//     Array("Facebook",         "https://facebook.com"           ),
+//     Array("Twitter",          "https://twitter.com"            ),
+//     Array("bbs.archlinux.de", "https://bbs.archlinux.de/"      ),
+       Array("fb",               "https://facebook.com"           ),
+       Array("twitter",          "https://twitter.com"            ),
+       Array("archforum",        "https://forum.archlinux.de/"    ),
+//     Array("netflix",          "https://www.netflix.com/"       ),
+       Array("reddit",           "https://reddit.com/"            ),
+       Array("hn",               "https://.news.ycombinatorcom/"  ),
+);
+$Links[] = Array(
+//     Array("WhatsApp",         "https://web.whatsapp.com/"      ),
+//     Array("spandau",          "https://spandau.rolltreppe3.de/"),
+//     Array("wiki",             "https://wiki.ancistrus.de/"     ),
+       Array("wiki",             "https://wiki.malte70.de/"       ),
+       Array("app",              "https://app.malte70.de/"        ),
+//     Array("codiad",           "https://app.malte70.de/codiad/" ),
+       Array("f",                "https://f.malte70.de/"          ),
+       Array("mail",             "https://mail.rolltreppe3.de"    ),
+       Array("gh",               "https://github.com/"            ),
+//     Array("github",           "https://github.com/"            ),
+    Array("diskstation",      "https://synologynas.tardis.malte70.de:5001/"),
+);
+
+?>
diff --git a/old/index.php b/old/index.php
new file mode 100644 (file)
index 0000000..5168736
--- /dev/null
@@ -0,0 +1,58 @@
+<?php
+/**
+ * startseite.malte70.de/index.php
+ */
+
+require_once("config.inc.php");
+
+$host = explode(".", gethostname())[0];
+
+if (strlen($_SERVER["HTTP_ACCEPT_LANGUAGE"]) >= 2) {
+    $lang = substr($_SERVER["HTTP_ACCEPT_LANGUAGE"], 0, 2);
+} else {
+    $lang = "en";
+}
+
+$Data = Array(
+       "Meta" => Array(
+               "Lang"       => "en",
+               "Charset"    => "UTF-8",
+               //"Title"      => "Homepage @ ".$host,
+               "Title"      => "Homepage",
+               "Author"     => "malte70@".$host,
+               "Stylesheet" => "style.css",
+               //"Icon"       => "https://xyz.malte70.de/img/icons_tango/go-home-512.png",
+               "Icon"       => "favicon.png",
+       ),
+       "Links" => NULL,
+       "Footer" => Array(
+               "CopyrightYear" => date("Y"),
+               "AuthorName"    => "malte70",
+               "AuthorURL"     => "https://malte70.de/"
+       )
+);
+
+$Data["Links"] = Array();
+foreach ($Links as $Links_Row) {
+       $L_row = Array();
+       foreach ($Links_Row as $L_Link) {
+           $L_row[] = Array(
+                       "Title" => $L_Link[0],
+                       "URL"   => $L_Link[1]
+               );
+       }
+       $Data["Links"][] = $L_row;
+}
+
+/**
+ * Modify $Data if Accept-Language is German
+ */
+if ($lang == "de") {
+    $Data["Meta"]["Lang"]  = "de";
+    $Data["Meta"]["Title"] = "Startseite";
+}
+
+
+require_once("template.inc.php");
+
+?>
diff --git a/old/main.js b/old/main.js
new file mode 100644 (file)
index 0000000..0043c65
--- /dev/null
@@ -0,0 +1,103 @@
+window.whoami = {
+    init: function() {
+        console.log("whoami.init()");
+        if (!this.section) {
+            this.section = document.getElementById("whoami")
+        }
+        
+        this.whoami_user   = localStorage.getItem("whoami_user");
+        this.whoami_host   = localStorage.getItem("whoami_host");
+        this.whoami_format = localStorage.getItem("whoami_format");
+        
+        if (!this.whoami_user) {
+            console.log("Asking for username");
+            this.whoami_user = prompt("Your user name", "malte70");
+        }
+        if (!this.whoami_host) {
+            console.log("Asking for hostname");
+            this.whoami_host = prompt("Hostname", "localhost");
+        }
+        if (!this.whoami_format) {
+            console.log("Asking for format");
+            this.whoami_format = prompt("Format (unix|windows)", "unix");
+        }
+        
+        /*var urlParams = new URLSearchParams(window.location.search);
+        if (!urlParams.has('user')) {
+            this.whoami_user = null;
+        } else {
+            this.whoami_user = urlParams.get('user');
+            this.whoami_host = "PLUTO";
+        }*/
+       
+    },
+    deinit: function() {
+        localStorage.removeItem("whoami_user");
+        localStorage.removeItem("whoami_host");
+        localStorage.removeItem("whoami_format");
+    },
+    settings: function() {
+        console.log("whoami.settings()");
+        this.whoami_user   = prompt("Your user name", localStorage.getItem("whoami_user"));
+       this.whoami_host   = prompt("Hostname", localStorage.getItem("whoami_host"));
+       this.whoami_format = prompt("Format (unix|windows)", localStorage.getItem("whoami_format"));
+               
+       console.table(
+           [
+               ["whoami_user",   this.whoami_user],
+               ["whoami_host",   this.whoami_host],
+               ["whoami_format", this.whoami_format],
+           ]
+       );
+       
+       this.update();
+    },
+    update: function() {
+        // Update localstorage
+        localStorage.setItem("whoami_user", this.whoami_user);
+        localStorage.setItem("whoami_host", this.whoami_host);
+        localStorage.setItem("whoami_format", this.whoami_format);
+        
+        if (this.whoami_format.toLowerCase() == "windows") {
+            if (this.whoami_user == "root" || this.whoami_user == "admin")
+                this.whoami_user = "Administrator";
+                
+                       if (this.whoami_host == this.whoami_host.toLowerCase() && this.whoami_host != "localhost")
+                               this.whoami_host = this.whoami_host.toUpperCase()
+                               
+                       // strip domain from fqdn
+                       this.whoami_host = this.whoami_host.substr(
+                               0,
+                               this.whoami_host.indexOf(".")
+                       );
+                       user_login = '<span class="red">\\\\</span>'
+                               + this.whoami_host
+                               + '<span class="red">\\</span>'
+                               + this.whoami_user;
+                       
+               } else {
+                       user_login = this.whoami_user
+                               + '<span class="red">@</span>'
+                               + this.whoami_host;
+                       
+               }
+               
+               this.section.innerHTML = '<p>'+user_login+'</p>';
+       },
+};
+window.onload = function() {
+    window.whoami.init();
+    window.whoami.update();
+    
+    document.querySelector(
+        "button#settings"
+    ).onclick = function() {
+        window.whoami.settings();
+        //window.whoami.update();
+    };
+    
+    /**
+    * Hide footer
+    */
+    //document.getElementsByTagName("footer")[0].remove()
+};
diff --git a/old/style.css b/old/style.css
new file mode 100644 (file)
index 0000000..13f40a3
--- /dev/null
@@ -0,0 +1,93 @@
+@charset "UTF-8";
+
+body {
+       background: #eee;
+       font: 26px "Source Code Pro", monospace;
+}
+main {
+       width: 30em;
+       margin: 3em auto 1em;
+       color: #444;
+       
+       /* ALT: zentriert
+       text-align: center;
+       position: absolute;
+       top: 0;
+       bottom: 0;
+       left: 0;
+       right: 0;
+       width: 600px;
+       height: 350px;
+       margin: 100px auto;*/
+}
+a:link, a:visited {
+       color: #888;
+       text-decoration: none;
+}
+a:hover, a:active {
+       color: #444;
+}
+.red {
+       color: #ff8000;
+}
+
+/**
+ * WhoAmI / User name
+ */
+#whoami p {
+       text-align: center;
+       margin-bottom: 1.5em;
+       /*font-size: 1.3em;*/
+}
+
+/**
+ * Google Search
+ */
+#google-search p * {
+       display:      inline-block;
+}
+#google-search input[type=text] {
+       font:         1em "Source Code Pro", monospace;
+       display:      inline-block;
+       padding:      6px;
+       background:   #eee;
+       color:        #888;
+       border:        0;
+       border-bottom: 2px solid #888;
+}
+/*#google-search input[type=text]:active {
+       color: #ff8000;
+}*/
+#google-search input[type=text]:focus {
+    outline: 0;
+    /*border-bottom-color: #ff8000;*/
+}
+#google-search input[type=text]:hover {
+    border-bottom-color: #ff8000;
+}
+
+/**
+ * Footer
+ */
+footer {
+       position: absolute;
+       right: 0;
+       bottom: 0;
+       margin: 7px;
+       padding: 0;
+       text-align: right;
+}
+footer p {
+       margin: 0;
+       padding: 0;
+       font-size: 0.6em;
+       color: #444;
+}
+footer p a:link, footer p a:visited {
+       color: #444;
+       text-decoration: underline;
+}
+footer p a:hover, footer p a:active {
+       color: #888;
+}
+
diff --git a/old/template.inc.php b/old/template.inc.php
new file mode 100644 (file)
index 0000000..5d9f57e
--- /dev/null
@@ -0,0 +1,90 @@
+<?php
+
+/**
+ * Correct Content-Type header for HTML5 including
+ * the charset
+ */
+header("Content-Type: text/html; charset=".$Data["Meta"]["Charset"]);
+
+/**
+ * The placeholder of the search input gets chosen from
+ * this array using `array_rand()`
+ */
+$search_placeholders = Array(
+    "something",
+    "the answer",
+    "42",
+    "foo bar",
+    "awesome stuff"
+);
+$i = array_rand($search_placeholders);
+$placeholder = $search_placeholders[$i];
+unset($i);
+
+?><!DOCTYPE html>
+<html lang="<?=$Data["Meta"]["Lang"]?>">
+       <head>
+               <meta charset="<?=$Data["Meta"]["Charset"]?>">
+               <meta name="viewport" content="width=device-width, initial-scale=1.0">
+               <meta http-equiv="X-UA-Compatible" content="IE=edge">
+               
+               <title><?=$Data["Meta"]["Title"]?></title>
+               
+               <meta name="author" content="<?=$Data["Meta"]["Author"]?>">
+               <link rel="stylesheet" type="text/css" href="<?=$Data["Meta"]["Stylesheet"]?>">
+               <link rel="icon" type="image/png" href="<?=$Data["Meta"]["Icon"]?>" sizes="64x64">
+               <!--[if IE]><script>document.charset="<?=$Data["Meta"]["Charset"]?>";</script><![endif]-->
+       </head>
+       <body id="top">
+               <main>
+                       <section id="whoami"></section>
+                       
+                       <section id="google-search">
+                               <form action="https://www.google.com/search" method="GET">
+                                       <input type="hidden" name="hl" content="de">
+                                       <p>
+                                               <!--<span class="red">//</span>-->
+                                               <span class="red">find</span>
+                                               <input type="text" name="q" autocomplete="off" autofocus placeholder="<?=$placeholder?>">
+                                       </p>
+                               </form>
+                       </section>
+                       
+                       <section id="links">
+                               <p>
+<?php
+foreach ($Data["Links"] as $LinkRow) {
+       print "\t\t\t\t<p>\n";
+       $link_num = count($LinkRow);
+       $in       = "\t\t\t\t\t";
+       
+       $link = $LinkRow[0];
+       print $in . '<span class="red">//</span>'."\n";
+       print $in . '<a href="'.$link["URL"].'">'.$link["Title"]."</a>\n";
+       for ($i = 1; $i < $link_num; $i++) {
+               $link = $LinkRow[$i];
+               print $in . '<span class="red">/</span>'."\n";
+               print $in . '<a href="'.$link["URL"].'">'.$link["Title"]."</a>\n";
+       }
+       print "\t\t\t\t</p>\n";
+}
+?>
+                       </section>
+               </main>
+               <footer>
+                   <p>
+                       <button type="button" id="settings">Settings&hellip;</button>
+                   </p>
+                       <p>
+                               &copy; <?=$Data["Footer"]["CopyrightYear"]?> <a href="<?=$Data["Footer"]["AuthorURL"]?>" rel="me nofollow"><?=$Data["Footer"]["AuthorName"]?></a>
+                       </p>
+               </footer>
+               
+               <!--<script src="main.js"></script>-->
+               <script>
+                   <?php
+                   require("main.js");
+                   ?>
+               </script>
+       </body>
+</html>
diff --git a/style.css b/style.css
new file mode 100644 (file)
index 0000000..96f3602
--- /dev/null
+++ b/style.css
@@ -0,0 +1,164 @@
+@charset "UTF-8";
+/**
+ * startseite.malte70.de
+ * 
+ * Farben
+ *    #eee     Hellgrau
+ *    #888     Grau
+ *    #444     Dunkelgrau
+ *    #ff8000  Orange
+ */
+
+body {
+       background: #eee;
+       font: 26px "Source Code Pro", monospace;
+}
+main {
+       /*width: 30em;*/
+       width: 40em;
+       margin: 3em auto 1em;
+       color: #444;
+       
+       /* ALT: zentriert
+       text-align: center;
+       position: absolute;
+       top: 0;
+       bottom: 0;
+       left: 0;
+       right: 0;
+       width: 600px;
+       height: 350px;
+       margin: 100px auto;*/
+}
+a:link, a:visited {
+       color: #888;
+       text-decoration: none;
+}
+a:hover, a:active {
+       color: #444;
+}
+.red {
+       color: #ff8000;
+}
+
+/**
+ * WhoAmI / User name
+ */
+#whoami p {
+       text-align: center;
+       margin-bottom: 1.5em;
+       /*font-size: 1.3em;*/
+}
+
+/**
+ * Google Search
+ */
+#google-search p * {
+       display:      inline-block;
+}
+#google-search input[type=text] {
+       font:         1em "Source Code Pro", monospace;
+       display:      inline-block;
+       padding:      6px;
+       background:   #eee;
+       color:        #888;
+       border:        0;
+       border-bottom: 2px solid #888;
+}
+/*#google-search input[type=text]:active {
+       color: #ff8000;
+}*/
+#google-search input[type=text]:focus {
+    outline: 0;
+    /*border-bottom-color: #ff8000;*/
+}
+#google-search input[type=text]:hover {
+    border-bottom-color: #ff8000;
+}
+
+/**
+ * Notepad
+ */
+#notepad p {
+       margin: 0;
+       color: #888;
+}
+#notepadContent {
+       border-left: 2px solid #888;
+       font: 1em "Source Code Pro", monospace;
+       padding: .3em .8em;
+       color: #888;
+       margin: .5em 0;
+}
+#notepadContent:focus {
+       outline: 0;
+       border-left-color: #444;
+       color: #444;
+}
+#notepadContent:hover {
+       border-left-color: #ff8000;
+}
+
+/**
+ * Footer
+ */
+footer {
+       position: absolute;
+       right: 0;
+       bottom: 0;
+       margin: 7px;
+       padding: 0;
+       text-align: right;
+}
+footer p {
+       margin: 0;
+       padding: .1em;
+       font-size: 0.6em;
+       color: #444;
+}
+footer p a:link, footer p a:visited {
+       color: #444;
+       text-decoration: underline;
+}
+footer p a:hover, footer p a:active {
+       color: #888;
+}
+
+
+/**
+ * Dark theme variant
+ */
+@media (prefers-color-scheme: dark) {
+       body {
+               background: #444;
+       }
+       main {
+               color: #eee;
+       }
+       a:hover, a:active {
+               background: #444;
+               color: #eee;
+       }
+       #google-search input[type=text] {
+               color: #eee;
+               background: #444;
+               border-bottom: 1px solid #ff8000;
+       }
+       footer p a:link, footer p a:visited {
+               color: #888;
+       }
+       footer p a:hover, footer p a:active {
+               color: #eee;
+       }
+       button#settings {
+               background:    #888;
+               color:         #eee;
+               border-color:  #eee;
+               padding:       .2em.4em;
+               border-radius: 8%;
+       }
+       #notepadContent:focus {
+               color: #eee;
+               border-left-color: #eee;
+       }
+}
diff --git a/template.inc.php b/template.inc.php
new file mode 100644 (file)
index 0000000..96c5d1a
--- /dev/null
@@ -0,0 +1,134 @@
+<?php
+
+/**
+ * Correct Content-Type header for HTML5 including
+ * the charset
+ */
+header("Content-Type: text/html; charset=".$Data["Meta"]["Charset"]);
+
+/**
+ * The placeholder of the search input gets chosen from
+ * this array using `array_rand()`
+ */
+$search_placeholders = Array(
+    "something",
+    "the answer",
+    "42",
+    "foo bar",
+    "awesome stuff"
+);
+$i = array_rand($search_placeholders);
+$placeholder = $search_placeholders[$i];
+unset($i);
+
+?><!DOCTYPE html>
+<html lang="<?=$Data["Meta"]["Lang"]?>">
+       <head>
+               <meta charset="<?=$Data["Meta"]["Charset"]?>">
+               <meta name="viewport" content="width=device-width, initial-scale=1.0">
+               <meta http-equiv="X-UA-Compatible" content="IE=edge">
+               
+               <title><?=$Data["Meta"]["Title"]?></title>
+               
+               <meta name="author" content="<?=$Data["Meta"]["Author"]?>">
+               <link rel="stylesheet" type="text/css" href="<?=$Data["Meta"]["Stylesheet"]?>">
+               <link rel="icon" type="image/png" href="<?=$Data["Meta"]["Icon"]?>" sizes="64x64">
+               <!--[if IE]><script>document.charset="<?=$Data["Meta"]["Charset"]?>";</script><![endif]-->
+       </head>
+       <body id="top">
+               <main>
+<?php if (!$Data["JS"]): ?>
+                       <p>&nbsp;</p>
+                       
+<?php endif; ?>
+                       <section id="whoami"><?=$Data["WhoAmI"]?></section>
+                       
+<?php if (!$Data["JS"]): ?>
+                       <p>&nbsp;</p>
+                       
+<?php endif; ?>
+<?php if ($Data["Search"]=="Google"): ?>
+                       <section id="google-search">
+                               <form action="https://www.google.com/search" method="GET">
+                                       <input type="hidden" name="hl" content="de">
+                                       <p>
+                                               <!--<span class="red">//</span>-->
+                                               <span class="red">find</span>
+                                               <input type="text" name="q" autocomplete="off" autofocus placeholder="<?=$placeholder?>">
+                                       </p>
+                               </form>
+                       </section>
+
+<?php else: ?>
+                       <section id="google-search">
+                <form action="https://searx.rt3x.de/searx/search" method="GET">
+                                       <p>
+                                               <!--<span class="red">//</span>-->
+                                               <span class="red">find</span>
+                                               <input type="text" name="q" autocomplete="off" autofocus placeholder="<?=$placeholder?>">
+                                       </p>
+                                       <input type="hidden" name="category_general" content="on">
+                                       <input type="hidden" name="time_range" content="">
+                                       <input type="hidden" name="language" content="de-DE">
+                               </form>
+                       </section>
+
+<?php endif; ?>
+<?php if (!$Data["JS"]): ?>
+                       <p>&nbsp;</p>
+                       
+<?php endif; ?>
+                       <section id="links">
+                               <p>
+<?php
+foreach ($Data["Links"] as $LinkRow) {
+       print "\t\t\t\t<p>\n";
+       $link_num = count($LinkRow);
+       $in       = "\t\t\t\t\t";
+       
+       $link = $LinkRow[0];
+       print $in . '<span class="red">//</span>'."\n";
+       print $in . '<a href="'.$link["URL"].'">'.$link["Title"]."</a>\n";
+       for ($i = 1; $i < $link_num; $i++) {
+               $link = $LinkRow[$i];
+               print $in . '<span class="red">/</span>'."\n";
+               print $in . '<a href="'.$link["URL"].'">'.$link["Title"]."</a>\n";
+       }
+       print "\t\t\t\t</p>\n";
+}
+?>
+                       </section>
+<?php if ($Data["Notepad"]): ?>
+                       <section id="notepad">
+                               <p>
+                                       <span class="red">cat</span> &lt;&lt;EOF
+                               </p>
+                               <article id="notepadContent" contenteditable="true" spellcheck="false" aria-autocomplete="none" autocomplete="off" autocorrect="off" autocapitalize="off">
+                                       My Notes
+                               </article>
+                               <p>
+                                       <span class="red">EOF</span>
+                               </p>
+                       </section>
+<?php endif; ?>
+               </main>
+<?php if ($Data["JS"]): ?>
+               <footer>
+                   <p>
+                       <button type="button" id="settings">Settings&hellip;</button>
+                   </p>
+                       <p>
+                               &copy; <?=$Data["Footer"]["CopyrightYear"]?> <a href="<?=$Data["Footer"]["AuthorURL"]?>" rel="me nofollow"><?=$Data["Footer"]["AuthorName"]?></a>
+                               &middot; <a href="https://ftp.malte70.de/pub/malte70-startseite.tar.gz" download>Download (.tar.gz)</a>
+                       </p>
+               </footer>
+               
+               <!--<script src="main.js"></script>-->
+               <script>
+                   <?php
+                   require("main.js");
+                   ?>
+               </script>
+<?php endif; ?>
+       </body>
+</html>
diff --git a/tty/index.php b/tty/index.php
new file mode 100644 (file)
index 0000000..55388d0
--- /dev/null
@@ -0,0 +1,65 @@
+<?php
+/**
+ * startseite.malte70.de/index.php
+ */
+
+require_once("../config.inc.php");
+
+$host = explode(".", gethostname())[0];
+$user = Array(
+       "name" => "malte70",
+       "host" => !empty($_GET["host"]) ? $_GET["host"] : "localhost",
+);
+
+if (strlen($_SERVER["HTTP_ACCEPT_LANGUAGE"]) >= 2) {
+    $lang = substr($_SERVER["HTTP_ACCEPT_LANGUAGE"], 0, 2);
+} else {
+    $lang = "en";
+}
+
+$Data = Array(
+       "Meta"    => Array(
+               "Lang"       => "en",
+               "Charset"    => "UTF-8",
+               //"Title"      => "Homepage @ ".$host,
+               "Title"      => "Homepage",
+               "Author"     => "malte70@".$host,
+               "Stylesheet" => "../style.css",
+               //"Icon"       => "https://xyz.malte70.de/img/icons_tango/go-home-512.png",
+               "Icon"       => "../favicon.png",
+       ),
+       "Links"   => NULL,
+       "Notepad" => false,
+       "WhoAmI"  => $user["name"]."@".$user["host"],
+       "JS"      => false,
+       "Footer"  => Array(
+               "CopyrightYear" => date("Y"),
+               "AuthorName"    => "malte70",
+               "AuthorURL"     => "https://malte70.de/"
+       )
+);
+
+$Data["Links"] = Array();
+foreach ($Links as $Links_Row) {
+       $L_row = Array();
+       foreach ($Links_Row as $L_Link) {
+           $L_row[] = Array(
+                       "Title" => $L_Link[0],
+                       "URL"   => $L_Link[1]
+               );
+       }
+       $Data["Links"][] = $L_row;
+}
+
+/**
+ * Modify $Data if Accept-Language is German
+ */
+if ($lang == "de") {
+    $Data["Meta"]["Lang"]  = "de";
+    $Data["Meta"]["Title"] = "Startseite";
+}
+
+
+require_once("../template.inc.php");
+
+?>