Refactor error handling in HTMLLoader, enhance error templates, and add new entry and setup templates

public/html_loader.php

@@ -36,11 +36,11 @@ class HTMLLoader {
         foreach ($page["css_files"] as $file) {
             // Check if File exists
             if (!is_file(TEMPLATE_PATH . $page["dir_name"] . "/" . $file)) {
-                $this->showError('CSS File <span class="code">' . $file . '</span> for Template <span class="code">error</span> in <span class="code">' . __FILE__ . "</span>");
+                $this->showError('CSS File <span class="code">' . $file . '</span> for Template <span class="code">error</span> in <span class="code">' . __FILE__ . "</span> not found.");
             }
 
             // Add CSS Files to HTML
-            $css .= '<link rel="stylessheet" type="text/css" href="http://' . APP_DOMAIN . "/templates/" . $page["dir_name"] . "/" . $file . '">';
+            $css .= '<link rel="stylesheet" type="text/css" href="http://' . APP_DOMAIN . "/templates/" . $page["dir_name"] . "/" . $file . '">';
         }
 
         $html = str_replace("%css%", $css, $html);
@@ -61,10 +61,12 @@ class HTMLLoader {
         $html = file_get_contents(TEMPLATE_PATH . $page["dir_name"] . "/" . $page["html_file"]);
 
         // Get CSS
+        $css = "";
+        
         foreach ($page["css_files"] as $file) {
             // Check if File exists
             if (!is_file(TEMPLATE_PATH . $page["dir_name"] . "/" . $file)) {
-                $this->showError('CSS File <span class="code">' . $file . '</span> for Template <span class="code">' . $this->template . '</span> in <span class="code">' . __FILE__ . "</span>");
+                $this->showError('CSS File <span class="code">' . $file . '</span> for Template <span class="code">' . $this->template . '</span> in <span class="code">' . __FILE__ . "</span> not found.");
             }
 
             // Add CSS Files to HTML
@@ -72,5 +74,7 @@ class HTMLLoader {
         }
 
         $html = str_replace("%css%", $css, $html);
+
+        die($html);
     }
 }

public/templates/entrys_frontend/entrys.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
+  <script type="importmap">
+    {
+      "imports": {
+        "@material/web/": "https://esm.run/@material/web/"
+      }
+    }
+  </script>
+  <script type="module">
+    import '@material/web/all.js';
+    import {styles as typescaleStyles} from '@material/web/typography/md-typescale-styles.js';
+
+    document.adoptedStyleSheets.push(typescaleStyles.styleSheet);
+  </script>
+
+  <style>
+    body {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+    }
+  </style>
+</head>
+<body>
+    <div class="content">
+        <h1 class="md-typescale-display-medium">Hello!</h1>
+        <p>Welcome to your Guestbook! Enter here your prefered username and password.</p>
+        <md-filled-text-field label="Username" type="text"></md-filled-text-field><br><br>
+        <md-filled-text-field label="Password" type="password"></md-filled-text-field><br><br>
+        <md-filled-text-field label="Repeat Password" type="password"></md-filled-text-field><br><br>
+        <md-filled-button disabled>Save</md-filled-button>
+    </div>
+</body>
+</html>

public/templates/error/error.css

@@ -1,3 +1,18 @@
 .icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
     font-size: 100pt;
+}
+
+.text {
+    text-align: center;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+}
+
+.code {
+    font-family: monospace;
+    background-color: rgb(226, 225, 225);
+    padding: 1px;
+    border-radius: 5px;
 }

public/templates/error/error.html

@@ -11,6 +11,10 @@
         <div class="icon">
             ⚠️
         </div>
+        <div class="text">
+            <h2>Error</h2>
+            <p>%error%</p>
+        </div>
     </div>
 </body>
 </html>