From 2f0ac6ff7396745bf2a273c45b85a302da8db1f7 Mon Sep 17 00:00:00 2001
From: Malte Bublitz <malte@rolltreppe3.de>
Date: Mon, 3 Oct 2022 05:34:29 +0200
Subject: [PATCH] Einstellungs-Dialog

---
 css/dialog.css   | 111 +++++++++++++++++++++++++++++
 index.php        |  12 +++-
 js/greeting.js   |   2 -
 js/main.js       | 140 +++++-------------------------------
 js/new-tab.js    |   2 +
 js/notepad.js    |  27 +++++++
 js/settings.js   |  30 ++++++++
 js/whoami.js     | 182 +++++++++++++++++++++++++++++++++++++++++++++++
 template.inc.php |  71 +++++++++++++++---
 tty/index.php    |   4 +-
 10 files changed, 443 insertions(+), 138 deletions(-)
 create mode 100644 css/dialog.css
 create mode 100644 js/notepad.js
 create mode 100644 js/settings.js
 create mode 100644 js/whoami.js

diff --git a/css/dialog.css b/css/dialog.css
new file mode 100644
index 0000000..b5b2f13
--- /dev/null
+++ b/css/dialog.css
@@ -0,0 +1,111 @@
+/**
+ * dialog.css
+ */
+
+
+/* <dialog> for GnuPG key details
+   https://github.com/GoogleChrome/dialog-polyfill */
+dialog {
+	border:               .1em solid #ff8000;
+	padding:              1em;
+	background:           /*#2e3436*/  #444;
+	color:                #eee;
+	
+	position:             fixed;
+	top:                  50%;
+	transform:            translate(0, -50%);
+	
+	width:                18em;
+	max-width:            100%;
+	
+	height:               12em;
+	max-height:           100%;
+	
+	position:             fixed;
+	
+	z-index:              100;
+	
+	left:                 50%;
+	top:                  50%;
+	
+	/* Use this for centering if unknown width/height */
+	transform:            translate(-50%, -50%);
+	
+	/* If known, negative margins are probably better (less chance of blurry text). */
+	/* margin: -200px 0 0 -200px; */
+	
+	box-shadow:           0 0 60px 10px rgba(0, 0, 0, 0.9);
+}
+
+dialog h3 {
+	margin:               0 0 1.5em;
+}
+
+dialog button.close {
+	position:             absolute;
+	top:                  .3em;
+	right:                .3em;
+	font-size:            3em;
+	font-family:          "Source Sans Pro", sans-serif;
+	font-weight:          300;
+	border:               0;
+	background:           none;
+	cursor:               pointer;
+	color:                #d3d7cf;
+	line-height:          .75em;
+}
+
+dialog button.close:focus {
+	outline:              0;
+}
+
+dialog::backdrop { /* native */
+	background-color:     rgba(0, 0, 0, 0.9);
+}
+dialog + .backdrop { /* polyfill */
+	background-color:     rgba(0, 0, 0, 0.6);
+}
+
+
+
+/********************************************************************
+ *                                                                  *
+ *                          fade-in effekt                          *
+ *                                                                  *
+ ********************************************************************/
+
+@keyframes appear {
+	0% {
+		display: none;
+		opacity: 0;
+	}
+	1% {
+		display: block;
+		opacity: 0;
+		transform: scale(0);
+	}
+	100% {
+		opacity: 1;
+		transform: scale(1);
+	}
+}
+
+dialog {
+	/* Fade on */
+	visibility:           visible;
+	opacity:              1
+	/*transition:         opacity 0.5s linear;*/
+	animation:            appear .5s ease-in-out;
+}
+
+dialog:not([open]) {
+	visibility:           hidden;
+	opacity:              0;
+	transition:           transform .3s ease-in-out, opacity .3s ease-in-out;
+}
+
+
+
+#settings_form div {
+	margin: 0 0 .6em;
+}
\ No newline at end of file
diff --git a/index.php b/index.php
index 03ee351..815cb46 100644
--- a/index.php
+++ b/index.php
@@ -20,14 +20,21 @@ $Data = Array(
 		//"Title"      => "Homepage @ ".$host,
 		"Title"      => "Homepage",
 		"Author"     => "malte70@".$host,
-		"Stylesheet" => "css/style.css",
+		//"Stylesheet" => "css/style.css",
+		"Stylesheets" => Array("css/style.css", "css/dialog.css"),
 		//"Icon"       => "https://xyz.malte70.de/img/icons_tango/go-home-512.png",
 		"Icon"       => "img/favicon.png",
 	),
 	"Links"   => NULL,
 	"Notepad" => true,
 	"WhoAmI"  => "john_doe@pc",
-	"JS"      => true,
+	"JS"      => Array(
+		//"js/greeting.js", // 
+		"js/whoami.js",  // WhoAmI greeting (headline)
+		"js/notepad.js", // local notes
+		//"js/settings.js",
+		"js/main.js"     // onLoad logic
+	),
     "Search"  => "Google", // Google/searX
 	"Footer"  => Array(
 		"CopyrightYear" => date("Y"),
@@ -59,4 +66,3 @@ if ($lang == "de") {
 
 require_once("template.inc.php");
 
-?>
diff --git a/js/greeting.js b/js/greeting.js
index cb6beb8..1d5af49 100644
--- a/js/greeting.js
+++ b/js/greeting.js
@@ -1,5 +1,3 @@
-"use strict";
-
 var greeting = {
 	/**
 	 * Configuration
diff --git a/js/main.js b/js/main.js
index 88b483d..5ad0a46 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,132 +1,21 @@
-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+"\")")
+/**
+ * Main JavaScript logic
+ */
 
-    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();
+// (() => {
+
+
+window.onload = () => {
+    whoami.init();
+    whoami.update();
+	//whoami.settings2();
     
     document.querySelector(
         "button#settings"
     ).onclick = function() {
-        window.whoami.settings();
+        //window.whoami.settings();
         //window.whoami.update();
+		whoami.settings2();
     };
     
     window.notepad("#notepadContent", "notepad");
@@ -135,4 +24,9 @@ window.onload = function() {
     * Hide footer
     */
     //document.getElementsByTagName("footer")[0].remove()
+
+
+
 };
+
+// })();
diff --git a/js/new-tab.js b/js/new-tab.js
index 59b1b6c..4085108 100644
--- a/js/new-tab.js
+++ b/js/new-tab.js
@@ -1,3 +1,5 @@
+"use strict";
+
 window.onload = function() {
 	var _useragent = navigator.userAgent;
 	var _lang      = navigator.language.replace("-", "_");
diff --git a/js/notepad.js b/js/notepad.js
new file mode 100644
index 0000000..f0a2131
--- /dev/null
+++ b/js/notepad.js
@@ -0,0 +1,27 @@
+/**
+ * Creates a notepad from an contenteditable element.
+ * 
+ * Sets the element's content from localStorage, and writes
+ * updated content everytime a "focusout" event is raised back
+ * to localStorage.
+ * 
+ * @param {string} selector string Selector for the <textarea>
+ * @param {string} storageKey string local Storage key
+ */
+window.notepad = function(selector, storageKey) {
+    //console.log("window.notepad(\""+selector+"\", \""+storageKey+"\")")
+
+    let elem = document.querySelector(selector);
+
+	if (localStorage.getItem(storageKey) !== null) {
+        console.debug("window.notepad(): Loading from LocalStorage")
+		elem.innerHTML = localStorage.getItem("notepad");
+		
+    }
+
+    elem.addEventListener("focusout", function() {
+        console.debug("window.notepad(): Focus lost. Storing on LocalStorage");
+        localStorage.setItem(storageKey, document.querySelector(selector).innerHTML);
+		
+    });
+};
diff --git a/js/settings.js b/js/settings.js
new file mode 100644
index 0000000..d55d583
--- /dev/null
+++ b/js/settings.js
@@ -0,0 +1,30 @@
+const settingsDialog = document.getElementById("settings_dialog");
+
+/**
+ * Configure dialog-polyfill
+ * 
+ * @see https://github.com/GoogleChrome/dialog-polyfill
+ */
+console.info("Configuring dialog-polyfill");
+
+dialogPolyfill.registerDialog(settingsDialog);
+
+settingsDialog.addEventListener('click', function (event) {
+	// Close dialog if user clicks outside the dialog
+	
+	var rect       = settingsDialog.getBoundingClientRect();
+	var isInDialog = (
+		rect.top <= event.clientY
+		&& event.clientY <= rect.top + rect.height
+		&& rect.left <= event.clientX
+		&& event.clientX <= rect.left + rect.width
+	);
+	if (!isInDialog) {
+		settingsDialog.close();
+	}
+});
+
+console.info("Showing settingsDialog");
+settingsDialog.showModal(); // Show dialog on page load for debugging
+
+console.debug('input[name="whoami_format"]:checked = ' + document.querySelector('input[name="whoami_format"]:checked').value);
diff --git a/js/whoami.js b/js/whoami.js
new file mode 100644
index 0000000..10b3920
--- /dev/null
+++ b/js/whoami.js
@@ -0,0 +1,182 @@
+/**
+ * Who am I?
+ */
+
+//"_use strict";
+
+var whoami = {
+	section:                 null,
+	whoami_user:             null,
+	whoami_host:             null,
+	whoami_format:           null,
+	settings_user:           document.getElementById("whoami_user"),
+	settings_host:           document.getElementById("whoami_host"),
+	settings_format_unix:    document.getElementById("whoami_format_unix"),
+	settings_format_windows: document.getElementById("whoami_format_windows"),
+	
+    init: function() {
+        console.debug("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.info("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.info("Asking for hostname");
+            this.whoami_host = prompt("Hostname (FQDN)", "<?=$hostname?>");
+			this.whoami_host_full = this.whoami_host;
+            if (this.whoami_host === null)
+                this.whoami_host = "pc";
+        }
+        if (!this.whoami_format) {
+            console.info("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";
+        }*/
+		this.settings2Init();
+    },
+    deinit: function() {
+        localStorage.removeItem("whoami_user");
+        localStorage.removeItem("whoami_host");
+        localStorage.removeItem("whoami_format");
+    },
+    settings: function() {
+        console.debug("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";
+		
+		this.update();
+    },
+	settings2Init: function() {
+		const settingsDialog                 = document.getElementById("settings_dialog");
+
+		dialogPolyfill.registerDialog(settingsDialog);
+		
+		settingsDialog.addEventListener('click', (event) => {
+			// Close dialog if user clicks outside the dialog
+			
+			var rect       = settingsDialog.getBoundingClientRect();
+			var isInDialog = (
+				rect.top <= event.clientY
+				&& event.clientY <= rect.top + rect.height
+				&& rect.left <= event.clientX
+				&& event.clientX <= rect.left + rect.width
+			);
+			if (!isInDialog) {
+				settingsDialog.close();
+			}
+		});
+
+		whoami.settings_user.addEventListener('change', (event) => {
+			// User name change
+
+			console.debug(`#settings_whoami_user :: on change event (value="${event.target.value}")`);
+			whoami.whoami_user = event.target.value;
+			localStorage.setItem("whoami_user", event.target.value);
+			//whoami.update();
+		});
+		whoami.settings_host.addEventListener('change', (event) => {
+			// host name change
+
+			console.debug(`#settings_whoami_host :: on change event (value="${event.target.value}")`);
+			whoami.whoami_host = event.target.value;
+			//localStorage.setItem("whoami_host", event.target.value);
+			whoami.update();
+		});
+		let whoami_format_on_change = (event) => {
+			let new_format = document.querySelector('input[name="whoami_format"]:checked').value;
+			console.debug(`#settings_whoami_format :: on change event (value="${new_format}")`);
+			whoami.whoami_format = new_format;
+			whoami.whoami_host = localStorage.getItem("whoami_host");
+			whoami.update();
+		}
+		whoami.settings_format_unix.addEventListener('change', (event) => {
+			whoami_format_on_change(event);
+			//whoami.whoami_format = event.target.value;
+		});
+		whoami.settings_format_windows.addEventListener('change', whoami_format_on_change);
+
+	},
+	settings2: () => {
+		const settings_dialog = document.getElementById("settings_dialog");
+		
+		// Set form values from current configuration
+		whoami.settings_user.value             = localStorage.getItem("whoami_user");
+		whoami.settings_host.value             = localStorage.getItem("whoami_host");
+		whoami.settings_format_unix.checked    = localStorage.getItem("whoami_format") == "unix";
+		whoami.settings_format_windows.checked = localStorage.getItem("whoami_format") == "windows";
+		
+		// Show dialog
+		console.info("Showing settingsDialog");
+		settings_dialog.showModal(); 
+	},
+    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);
+
+		console.debug(`whoami.update() :: this.whoami_user = ${this.whoami_user}`);
+		console.debug(`whoami.update() :: this.whoami_user = ${this.whoami_host}`);
+		console.debug(`whoami.update() :: this.whoami_user = ${this.whoami_format}`);
+        
+		let user_login = "";
+		
+        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>';
+	},
+};
diff --git a/template.inc.php b/template.inc.php
index c303e27..05f59d4 100644
--- a/template.inc.php
+++ b/template.inc.php
@@ -1,4 +1,9 @@
 <?php
+/**
+ * Template for startseite.malte70.de
+ * 
+ * Used by index.php and tty/index.php.
+ */
 
 /**
  * Correct Content-Type header for HTML5 including
@@ -34,12 +39,45 @@ unset($i);
 		<title><?=$Data["Meta"]["Title"]?></title>
 		
 		<meta name="author" content="<?=$Data["Meta"]["Author"]?>">
-		<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap">
-		<link rel="stylesheet" type="text/css" href="<?=$Data["Meta"]["Stylesheet"]?>">
+		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.4.9/dialog-polyfill.min.css">
+<?php foreach ($Data["Meta"]["Stylesheets"] as $css): ?>
+		<link rel="stylesheet" type="text/css" href="<?=$css?>">
+<?php endforeach; ?>
 		<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">
+<?php if ($Data["JS"]): ?>
+		<dialog id="settings_dialog">
+			<form method="dialog">
+				<button type="submit" class="close">×</button>
+			</form>
+
+			<h3>Settings</h3>
+			<form id="settings_form">
+				<div>
+					<label for="whoami_user">Username</label>
+					<input type="text" id="whoami_user">
+				</div>
+
+				<div>
+					<label for="whoami_host">Hostname</label>
+					<input type="text" id="whoami_host">
+				</div>
+
+				<div>
+					<input type="radio" id="whoami_format_unix" name="whoami_format" value="unix" checked>
+					<label for="whoami_format_unix">Unix-Format</label>
+				</div>
+
+				<div>
+					<input type="radio" id="whoami_format_windows" name="whoami_format" value="windows">
+					<label for="whoami_format_windows">Windows-Format</label>
+				</div>
+			</form>
+		</dialog>
+		
+<?php endif; ?>
 		<main>
 <?php if (!$Data["JS"]): ?>
 			<p>&nbsp;</p>
@@ -116,22 +154,39 @@ foreach ($Data["Links"] as $LinkRow) {
 			</section>
 <?php endif; ?>
 		</main>
-<?php if ($Data["JS"]): ?>
+<?php if (is_array($Data["JS"])): ?>
 		<footer>
+<?php /*
+			<p>
+				<!--<a id="settings_dialog_show" href="javascript:settingsDialog.showModal();">Settings</a>-->
+				<a id="settings_dialog_show" href="javascript:whoami.settings2();">Settings v2</a>
 			<p>
+*/ ?>
+		    <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>
+				&middot; <a href="https://gitea.rt3x.de/rolltreppe3/startseite.malte70.de/archive/main.tar.gz" download>Download Git main (.tar.gz)</a>
 			</p>
 		</footer>
 		
-		<!--<script src="js/main.js"></script>-->
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.5.6/dialog-polyfill.min.js" integrity="sha512-qUIG93zKzcLBVD5RGRbx2PBmbVRu+tJIl+EPLTus0z8I1AMru9sQYdlf6cBacSzYmZVncB9rcc8rYBnazqgrxA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 		<script>
-			<?php
-			require("js/main.js");
-			?>
+			//"use_ strict";
+<?php
+/**
+ * Include JavaScript files using PHP for faster page loading
+ */
+$hostname = "localhost.localdomain";
+if ($_SERVER["HTTP_HOST"] == "localhost")
+	$hostname = gethostname();
+
+foreach ($Data["JS"] as $js) {
+	require($js);
+}
+
+?>
 		</script>
 <?php endif; ?>
 	</body>
diff --git a/tty/index.php b/tty/index.php
index ad84897..99a6ce0 100644
--- a/tty/index.php
+++ b/tty/index.php
@@ -1,6 +1,6 @@
 <?php
 /**
- * startseite.malte70.de/index.php
+ * startseite.malte70.de/tty/index.php
  */
 
 require_once("../config.inc.php");
@@ -24,7 +24,7 @@ $Data = Array(
 		//"Title"      => "Homepage @ ".$host,
 		"Title"      => "Homepage",
 		"Author"     => "malte70@".$host,
-		"Stylesheet" => "../style.css",
+		"Stylesheets" => Array("../css/style.css"),
 		//"Icon"       => "https://xyz.malte70.de/img/icons_tango/go-home-512.png",
 		"Icon"       => "../favicon.png",
 	),
-- 
2.30.2