template fix and test

tools/tailwind.config.js

@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["../web/**/*.{html,js,mustache}"],
+  content: ["../web/**/*.{html,js}"],
   theme: {
     extend: {},
   },

web/css/output.css

@@ -534,6 +534,40 @@ video {
   --tw-backdrop-sepia:  ;
 }
 
+.container {
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .container {
+    max-width: 640px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 768px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .container {
+    max-width: 1024px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1280px;
+  }
+}
+
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+
 .sr-only {
   position: absolute;
   width: 1px;
@@ -647,6 +681,30 @@ video {
   margin-top: 1.5rem;
 }
 
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
+.mb-3 {
+  margin-bottom: 0.75rem;
+}
+
+.ml-2 {
+  margin-left: 0.5rem;
+}
+
+.ml-auto {
+  margin-left: auto;
+}
+
+.mr-1 {
+  margin-right: 0.25rem;
+}
+
+.mr-3 {
+  margin-right: 0.75rem;
+}
+
 .block {
   display: block;
 }
@@ -695,6 +753,10 @@ video {
   height: 2rem;
 }
 
+.h-full {
+  height: 100%;
+}
+
 .w-12 {
   width: 3rem;
 }
@@ -749,6 +811,10 @@ video {
   flex-direction: column;
 }
 
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
 .items-start {
   align-items: flex-start;
 }
@@ -798,6 +864,11 @@ video {
   border-color: rgb(107 114 128 / 0.1);
 }
 
+.divide-gray-300 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-divide-opacity));
+}
+
 .overflow-hidden {
   overflow: hidden;
 }
@@ -806,6 +877,10 @@ video {
   overflow-y: auto;
 }
 
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -830,8 +905,16 @@ video {
   border-width: 1px;
 }
 
-.border-l-4 {
+.border-2 {
-  border-left-width: 4px;
+  border-width: 2px;
+}
+
+.border-r-2 {
+  border-right-width: 2px;
+}
+
+.border-b {
+  border-bottom-width: 1px;
 }
 
 .border-gray-300 {
@@ -839,9 +922,13 @@ video {
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
-.border-red-500 {
+.border-gray-200 {
   --tw-border-opacity: 1;
-  border-color: rgb(239 68 68 / var(--tw-border-opacity));
+  border-color: rgb(229 231 235 / var(--tw-border-opacity));
+}
+
+.border-opacity-60 {
+  --tw-border-opacity: 0.6;
 }
 
 .bg-gray-50 {
@@ -854,16 +941,21 @@ video {
   background-color: rgb(79 70 229 / var(--tw-bg-opacity));
 }
 
-.bg-red-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
-}
-
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.bg-indigo-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(199 210 254 / var(--tw-bg-opacity));
+}
+
+.bg-red-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
+}
+
 .bg-gradient-to-tr {
   background-image: linear-gradient(to top right, var(--tw-gradient-stops));
 }
@@ -878,6 +970,16 @@ video {
   --tw-gradient-to: #9089fc var(--tw-gradient-to-position);
 }
 
+.object-cover {
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+.object-center {
+  -o-object-position: center;
+     object-position: center;
+}
+
 .p-1 {
   padding: 0.25rem;
 }
@@ -894,14 +996,14 @@ video {
   padding: 0.625rem;
 }
 
-.p-4 {
-  padding: 1rem;
-}
-
 .p-6 {
   padding: 1.5rem;
 }
 
+.p-4 {
+  padding: 1rem;
+}
+
 .px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -947,10 +1049,24 @@ video {
   padding-bottom: 2rem;
 }
 
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
 .pt-14 {
   padding-top: 3.5rem;
 }
 
+.pr-3 {
+  padding-right: 0.75rem;
+}
+
 .text-center {
   text-align: center;
 }
@@ -980,6 +1096,11 @@ video {
   line-height: 1.75rem;
 }
 
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
 .font-bold {
   font-weight: 700;
 }
@@ -1012,10 +1133,22 @@ video {
   line-height: 1.25;
 }
 
+.leading-none {
+  line-height: 1;
+}
+
+.leading-relaxed {
+  line-height: 1.625;
+}
+
 .tracking-tight {
   letter-spacing: -0.025em;
 }
 
+.tracking-widest {
+  letter-spacing: 0.1em;
+}
+
 .text-black {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity));
@@ -1046,11 +1179,6 @@ video {
   color: rgb(79 70 229 / var(--tw-text-opacity));
 }
 
-.text-red-700 {
-  --tw-text-opacity: 1;
-  color: rgb(185 28 28 / var(--tw-text-opacity));
-}
-
 .text-slate-500 {
   --tw-text-opacity: 1;
   color: rgb(100 116 139 / var(--tw-text-opacity));
@@ -1061,6 +1189,21 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.text-gray-400 {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
+.text-indigo-500 {
+  --tw-text-opacity: 1;
+  color: rgb(99 102 241 / var(--tw-text-opacity));
+}
+
+.text-red-400 {
+  --tw-text-opacity: 1;
+  color: rgb(248 113 113 / var(--tw-text-opacity));
+}
+
 .opacity-30 {
   opacity: 0.3;
 }
@@ -1287,6 +1430,22 @@ video {
     margin-top: 0px;
   }
 
+  .md\:mb-2 {
+    margin-bottom: 0.5rem;
+  }
+
+  .md\:ml-0 {
+    margin-left: 0px;
+  }
+
+  .md\:h-36 {
+    height: 9rem;
+  }
+
+  .md\:w-1\/3 {
+    width: 33.333333%;
+  }
+
   .md\:space-y-6 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-y-reverse: 0;
     margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1300,6 +1459,14 @@ video {
 }
 
 @media (min-width: 1024px) {
+  .lg\:mb-0 {
+    margin-bottom: 0px;
+  }
+
+  .lg\:ml-auto {
+    margin-left: auto;
+  }
+
   .lg\:flex {
     display: flex;
   }
@@ -1308,6 +1475,10 @@ video {
     display: none;
   }
 
+  .lg\:h-48 {
+    height: 12rem;
+  }
+
   .lg\:flex-1 {
     flex: 1 1 0%;
   }

web/inc/classes/Page.class.php

@@ -94,7 +94,7 @@ class Page
     function renderPagecontent()
     {
         $controller_dir = ROOT . DS . 'pages' . DS . $this->_controller . DS;
-        $partials = [];
+        /*$partials = [];
         if(is_dir($controller_dir.'partials'))
             $partials[] = new Mustache_Loader_FilesystemLoader($controller_dir.'partials');
         $partials[] = new Mustache_Loader_FilesystemLoader(ROOT.DS.DS.'templates'.DS.'partials');
@@ -102,18 +102,20 @@ class Page
             'entity_flags' => ENT_QUOTES,
             'partials_loader' => new Mustache_Loader_CascadingLoader($partials)
         ));
-
         $this->variables['translate'] = function($value) { return translate($value); };
-
+        $m = $this->addHelpers($m);*/
-        $m = $this->addHelpers($m);
 
         if($this->variables['template'] && file_exists(ROOT . DS . 'pages' . DS . $this->_controller . DS . $this->variables['template']))
-            $template = file_get_contents(ROOT . DS . 'pages' . DS . $this->_controller . DS . $this->variables['template']);
+            $templatefile = ROOT . DS . 'pages' . DS . $this->_controller . DS . $this->variables['template'];
-        else
-            $template = file_get_contents(ROOT . DS . 'views' . DS . 'defaultcontainer.mustache');
-
         
-        $pagecontent = $m->render($template, $this->variables);
+        //render template by running include
+        ob_start();
+        include($templatefile);
+        $pagecontent = ob_get_contents();
+        ob_end_clean();
+
+
+        //$pagecontent = $m->render($template, $this->variables);
 
         return $pagecontent;
     }

web/pages/home/controller.php

@@ -11,7 +11,7 @@ class Home extends Page
 
     function index()
     {
-        $this->set('template', "home.mustache");
+        $this->set('template', "home.html");
         return $this->renderPagecontent();
     }
 

web/pages/home/home.html

@@ -0,0 +1,84 @@
+<div class="hidden sm:mb-8 sm:flex sm:justify-center">
+    <div
+        class="relative rounded-full px-3 py-1 text-sm leading-6 text-gray-600 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
+        Announcing our next round of funding. <a href="#" class="font-semibold text-indigo-600"><span
+                class="absolute inset-0" aria-hidden="true"></span>Read more <span
+                aria-hidden="true">&rarr;</span></a>
+    </div>
+</div>
+<div class="text-center">
+    <h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">Dogstats - der Agilityhelfer</h1>
+    <p class="mt-6 text-lg leading-8 text-gray-600">Anim aute id magna aliqua ad ad non deserunt sunt.
+        Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.</p>
+    <div class="mt-10 flex items-center justify-center gap-x-6">
+        <a href="#"
+            class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Get
+            started</a>
+        <a href="#" class="text-sm font-semibold leading-6 text-gray-900">Learn more <span
+                aria-hidden="true">→</span></a>
+    </div>
+</div>
+
+<div class="container flex justify-center mx-auto">
+    <div class="flex flex-col">
+        <div class="w-full">
+            <div class="border-b border-gray-200 shadow">
+                <table class="divide-y divide-gray-300 ">
+                    <thead class="bg-gray-50">
+                        <tr>
+                            <th class="px-6 py-2 text-xs text-gray-500">
+                                ID
+                            </th>
+                            <th class="px-6 py-2 text-xs text-gray-500">
+                                Name
+                            </th>
+                            <th class="px-6 py-2 text-xs text-gray-500">
+                                Email
+                            </th>
+                            <th class="px-6 py-2 text-xs text-gray-500">
+                                Created_at
+                            </th>
+                            <th class="px-6 py-2 text-xs text-gray-500">
+                                Edit
+                            </th>
+                            <th class="px-6 py-2 text-xs text-gray-500">
+                                Delete
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody class="bg-white divide-y divide-gray-300">
+                        <?php foreach ([
+                        ['id' => 1, 'name' => 'Max', 'email' => 'test@test.ts'],
+                        ['id' => 2, 'name' => 'Roxie', 'email' => 'loxie@test.ts'],
+                        ] as $user) : ?>
+
+                            <tr class="whitespace-nowrap">
+                                <td class="px-6 py-4 text-sm text-gray-500">
+                                    <?= $user['id'] ?>
+                                </td>
+                                <td class="px-6 py-4">
+                                    <div class="text-sm text-gray-900">
+                                        <?= $user['name'] ?>
+                                    </div>
+                                </td>
+                                <td class="px-6 py-4">
+                                    <div class="text-sm text-gray-500"><?= $user['email'] ?></div>
+                                </td>
+                                <td class="px-6 py-4 text-sm text-gray-500">
+                                    2021-1-12
+                                </td>
+                                <td class="px-6 py-4">
+                                    <a href="#" class="px-4 py-1 text-sm text-indigo-600 bg-indigo-200 rounded-full">Edit</a>
+                                </td>
+                                <td class="px-6 py-4">
+                                    <a href="#" class="px-4 py-1 text-sm text-red-400 bg-red-200 rounded-full">Delete</a>
+                                </td>
+                            </tr>
+
+                        <?php endforeach; ?>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</div>

web/pages/home/home.mustache

@@ -1,20 +0,0 @@
-<div class="hidden sm:mb-8 sm:flex sm:justify-center">
-    <div
-        class="relative rounded-full px-3 py-1 text-sm leading-6 text-gray-600 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
-        Announcing our next round of funding. <a href="#" class="font-semibold text-indigo-600"><span
-                class="absolute inset-0" aria-hidden="true"></span>Read more <span
-                aria-hidden="true">&rarr;</span></a>
-    </div>
-</div>
-<div class="text-center">
-    <h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">Dogstats - der Agilityhelfer</h1>
-    <p class="mt-6 text-lg leading-8 text-gray-600">Anim aute id magna aliqua ad ad non deserunt sunt.
-        Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.</p>
-    <div class="mt-10 flex items-center justify-center gap-x-6">
-        <a href="#"
-            class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Get
-            started</a>
-        <a href="#" class="text-sm font-semibold leading-6 text-gray-900">Learn more <span
-                aria-hidden="true">→</span></a>
-    </div>
-</div>