just using php as template engine
All checks were successful
Build and push / Pulling repo on server (push) Successful in 2s

This commit is contained in:
Chris 2023-10-21 20:47:11 +02:00
parent 700f657038
commit 646ecfe95e
11 changed files with 222 additions and 201 deletions

View File

@ -6,6 +6,7 @@
"devsense.phptools-vscode",
"bmewburn.vscode-intelephense-client",
"github.copilot",
"github.copilot-chat"
"github.copilot-chat",
"bradlc.vscode-tailwindcss"
]
}

View File

@ -2,8 +2,8 @@
## Techstack
- [HTMX](https://htmx.org/)
- [Tailwind](https://tailwindcss.com/)
- [HTMX](https://htmx.org/docs/)
- [Tailwind](https://tailwindcss.com/docs/utility-first)
## Start Dev

View File

@ -634,6 +634,10 @@ video {
z-index: 50;
}
.z-0 {
z-index: 0;
}
.-m-1 {
margin: -0.25rem;
}
@ -665,6 +669,11 @@ video {
margin-right: auto;
}
.-mx-4 {
margin-left: -1rem;
margin-right: -1rem;
}
.mb-2 {
margin-bottom: 0.5rem;
}
@ -681,28 +690,28 @@ video {
margin-top: 1.5rem;
}
.mb-1 {
margin-bottom: 0.25rem;
.-mb-10 {
margin-bottom: -2.5rem;
}
.mb-3 {
margin-bottom: 0.75rem;
.-mt-4 {
margin-top: -1rem;
}
.mb-20 {
margin-bottom: 5rem;
}
.mb-4 {
margin-bottom: 1rem;
}
.ml-2 {
margin-left: 0.5rem;
}
.ml-auto {
margin-left: auto;
}
.mr-1 {
margin-right: 0.25rem;
}
.mr-3 {
margin-right: 0.75rem;
.mt-3 {
margin-top: 0.75rem;
}
.block {
@ -753,10 +762,6 @@ video {
height: 2rem;
}
.h-full {
height: 100%;
}
.w-12 {
width: 3rem;
}
@ -789,10 +794,18 @@ video {
max-width: 24rem;
}
.flex-shrink-0 {
flex-shrink: 0;
}
.shrink-0 {
flex-shrink: 0;
}
.flex-grow {
flex-grow: 1;
}
.-translate-x-1\/2 {
--tw-translate-x: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@ -854,21 +867,27 @@ video {
margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
--tw-divide-y-reverse: 0;
border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-gray-500\/10 > :not([hidden]) ~ :not([hidden]) {
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));
}
.divide-gray-500\/10 > :not([hidden]) ~ :not([hidden]) {
border-color: rgb(107 114 128 / 0.1);
}
.overflow-hidden {
overflow: hidden;
}
@ -905,30 +924,18 @@ video {
border-width: 1px;
}
.border-2 {
border-width: 2px;
}
.border-r-2 {
border-right-width: 2px;
}
.border-b {
border-bottom-width: 1px;
}
.border-gray-300 {
--tw-border-opacity: 1;
border-color: rgb(209 213 219 / var(--tw-border-opacity));
}
.border-gray-200 {
--tw-border-opacity: 1;
border-color: rgb(229 231 235 / var(--tw-border-opacity));
}
.border-opacity-60 {
--tw-border-opacity: 0.6;
.border-gray-300 {
--tw-border-opacity: 1;
border-color: rgb(209 213 219 / var(--tw-border-opacity));
}
.bg-gray-50 {
@ -936,24 +943,34 @@ video {
background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.bg-indigo-200 {
--tw-bg-opacity: 1;
background-color: rgb(199 210 254 / var(--tw-bg-opacity));
}
.bg-indigo-600 {
--tw-bg-opacity: 1;
background-color: rgb(79 70 229 / var(--tw-bg-opacity));
}
.bg-red-200 {
--tw-bg-opacity: 1;
background-color: rgb(254 202 202 / var(--tw-bg-opacity));
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.bg-indigo-200 {
.bg-indigo-100 {
--tw-bg-opacity: 1;
background-color: rgb(199 210 254 / var(--tw-bg-opacity));
background-color: rgb(224 231 255 / var(--tw-bg-opacity));
}
.bg-red-200 {
.bg-sky-500 {
--tw-bg-opacity: 1;
background-color: rgb(254 202 202 / var(--tw-bg-opacity));
background-color: rgb(14 165 233 / var(--tw-bg-opacity));
}
.bg-gradient-to-tr {
@ -970,16 +987,6 @@ 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;
}
@ -1004,6 +1011,14 @@ video {
padding: 1rem;
}
.p-5 {
padding: 1.25rem;
}
.p-3 {
padding: 0.75rem;
}
.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
@ -1014,6 +1029,11 @@ video {
padding-right: 0.875rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem;
@ -1039,6 +1059,11 @@ video {
padding-bottom: 0.625rem;
}
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.py-6 {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
@ -1049,22 +1074,17 @@ video {
padding-bottom: 2rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
.py-24 {
padding-top: 6rem;
padding-bottom: 6rem;
}
.pt-14 {
padding-top: 3.5rem;
}
.pr-3 {
padding-right: 0.75rem;
.pl-6 {
padding-left: 1.5rem;
}
.text-center {
@ -1101,6 +1121,11 @@ video {
line-height: 1rem;
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.font-bold {
font-weight: 700;
}
@ -1133,10 +1158,6 @@ video {
line-height: 1.25;
}
.leading-none {
line-height: 1;
}
.leading-relaxed {
line-height: 1.625;
}
@ -1145,10 +1166,6 @@ video {
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));
@ -1179,6 +1196,11 @@ video {
color: rgb(79 70 229 / var(--tw-text-opacity));
}
.text-red-400 {
--tw-text-opacity: 1;
color: rgb(248 113 113 / var(--tw-text-opacity));
}
.text-slate-500 {
--tw-text-opacity: 1;
color: rgb(100 116 139 / var(--tw-text-opacity));
@ -1189,21 +1211,11 @@ 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;
}
@ -1267,6 +1279,11 @@ video {
background-color: rgb(99 102 241 / var(--tw-bg-opacity));
}
.hover\:bg-sky-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(3 105 161 / var(--tw-bg-opacity));
}
.hover\:underline:hover {
text-decoration-line: underline;
}
@ -1376,10 +1393,18 @@ video {
left: calc(50% - 30rem);
}
.sm\:-m-4 {
margin: -1rem;
}
.sm\:mb-8 {
margin-bottom: 2rem;
}
.sm\:block {
display: block;
}
.sm\:flex {
display: flex;
}
@ -1414,6 +1439,11 @@ video {
line-height: 1.25rem;
}
.sm\:text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
}
.sm\:ring-1 {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@ -1430,18 +1460,6 @@ 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%;
}
@ -1452,6 +1470,12 @@ video {
margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.md\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0px * var(--tw-space-y-reverse));
}
.md\:text-2xl {
font-size: 1.5rem;
line-height: 2rem;
@ -1459,14 +1483,6 @@ video {
}
@media (min-width: 1024px) {
.lg\:mb-0 {
margin-bottom: 0px;
}
.lg\:ml-auto {
margin-left: auto;
}
.lg\:flex {
display: flex;
}
@ -1475,10 +1491,6 @@ video {
display: none;
}
.lg\:h-48 {
height: 12rem;
}
.lg\:flex-1 {
flex: 1 1 0%;
}

View File

@ -110,6 +110,7 @@ class Page
//render template by running include
ob_start();
extract($this->variables);
include($templatefile);
$pagecontent = ob_get_contents();
ob_end_clean();

View File

@ -1,15 +0,0 @@
<?php
class Auth extends Page {
function login()
{
return print_r($_REQUEST, true);
}
function maySeeThisPage()
{
return true;
}
}

View File

@ -0,0 +1,9 @@
<?php
class Features extends Page {
function index() {
$this->set('template', 'features.html');
}
}

View File

@ -0,0 +1,62 @@
<section class="text-gray-600 body-font">
<div class="container px-5 py-24 mx-auto">
<h1 class="sm:text-3xl text-2xl font-medium title-font text-center text-gray-900 mb-20">Raw Denim Heirloom Man Braid
<br class="hidden sm:block">Selfies Wayfarers
</h1>
<div class="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4 md:space-y-0 space-y-6">
<div class="p-4 md:w-1/3 flex">
<div class="w-12 h-12 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-4 flex-shrink-0">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-6 h-6" viewBox="0 0 24 24">
<path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
</svg>
</div>
<div class="flex-grow pl-6">
<h2 class="text-gray-900 text-lg title-font font-medium mb-2">Shooting Stars</h2>
<p class="leading-relaxed text-base">Blue bottle crucifix vinyl post-ironic four dollar toast vegan taxidermy. Gastropub indxgo juice poutine, ramps microdosing banh mi pug VHS try-hard ugh iceland kickstarter tumblr live-edge tilde.</p>
<a class="mt-3 text-indigo-500 inline-flex items-center">Learn More
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24">
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</a>
</div>
</div>
<div class="p-4 md:w-1/3 flex">
<div class="w-12 h-12 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-4 flex-shrink-0">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-6 h-6" viewBox="0 0 24 24">
<circle cx="6" cy="6" r="3"></circle>
<circle cx="6" cy="18" r="3"></circle>
<path d="M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12"></path>
</svg>
</div>
<div class="flex-grow pl-6">
<h2 class="text-gray-900 text-lg title-font font-medium mb-2">The Catalyzer</h2>
<p class="leading-relaxed text-base">Blue bottle crucifix vinyl post-ironic four dollar toast vegan taxidermy. Gastropub indxgo juice poutine, ramps microdosing banh mi pug VHS try-hard ugh iceland kickstarter tumblr live-edge tilde.</p>
<a class="mt-3 text-indigo-500 inline-flex items-center">Learn More
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24">
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</a>
</div>
</div>
<div class="p-4 md:w-1/3 flex">
<div class="w-12 h-12 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-4 flex-shrink-0">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-6 h-6" viewBox="0 0 24 24">
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
</div>
<div class="flex-grow pl-6">
<h2 class="text-gray-900 text-lg title-font font-medium mb-2">Neptune</h2>
<p class="leading-relaxed text-base">Blue bottle crucifix vinyl post-ironic four dollar toast vegan taxidermy. Gastropub indxgo juice poutine, ramps microdosing banh mi pug VHS try-hard ugh iceland kickstarter tumblr live-edge tilde.</p>
<a class="mt-3 text-indigo-500 inline-flex items-center">Learn More
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24">
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
</section>

View File

@ -0,0 +1,17 @@
<?php
class Login extends Page {
function index()
{
$this->set('hello','world');
$this->set('template', 'login.html');
//return print_r($_REQUEST, true);
}
function maySeeThisPage()
{
return true;
}
}

View File

@ -5,7 +5,7 @@
Sign in to your account
</h1>
<div id="response" class="text-gray-900 dark:text-white">
yes
<?= $hello ?>
</div>
<form class="space-y-4 md:space-y-6" hx-post="/auth/login" hx-target="#response">
<div>
@ -27,7 +27,7 @@
</div>
<a href="#" class="text-sm font-medium text-primary-600 hover:underline dark:text-primary-500 dark:text-gray-400">Forgot password?</a>
</div>
<button type="submit" class="dark:text-gray-400 w-full dark:border-primary-600 text-black bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
<button type="submit" class="bg-sky-500 hover:bg-sky-700 p-2 rounded">
Sign in
</button>
<p class="text-sm font-light text-gray-500 dark:text-gray-400">

View File

@ -1 +0,0 @@
soo many features prolly

View File

@ -9,9 +9,10 @@
<script src="/js/htmx.min.js"></script>
</head>
<body></body>
<body>
<div class="bg-white">
<header class="absolute inset-x-0 top-0 z-50">
<header class="inset-x-0 top-0 z-50">
<nav class="flex items-center justify-between p-6 lg:px-8" aria-label="Global">
<div class="flex lg:flex-1">
<a href="#" hx-get="/home" hx-push-url="/home" hx-target="#main" class="-m-1.5 p-1.5">
@ -20,93 +21,27 @@
</a>
</div>
<div class="flex lg:hidden">
<button type="button"
class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700">
<button type="button" class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700">
<span class="sr-only">Open main menu</span>
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</button>
</div>
<div class="hidden lg:flex lg:gap-x-12">
<a href="#" hx-get="/templates/product.html" hx-push-url="/product" hx-target="#main" class="text-sm font-semibold leading-6 text-gray-900">Product</a>
<a href="#" hx-get="/templates/features.html" hx-push-url="/features" hx-target="#main" class="text-sm font-semibold leading-6 text-gray-900">Features</a>
<a href="#" hx-get="/features" hx-push-url="/features" hx-target="#main" class="text-sm font-semibold leading-6 text-gray-900">Features</a>
</div>
<div class="hidden lg:flex lg:flex-1 lg:justify-end">
<a href="#" hx-get="/templates/login.html" hx-target="#main" hx-push-url="/login" class="text-sm font-semibold leading-6 text-gray-900">Log in <span
aria-hidden="true">&rarr;</span></a>
<a href="#" hx-get="/templates/login.html" hx-target="#main" hx-push-url="/login" class="text-sm font-semibold leading-6 text-gray-900">Log in <span aria-hidden="true">&rarr;</span></a>
</div>
</nav>
<!-- Mobile menu, show/hide based on menu open state. -->
<div class="lg:hidden" role="dialog" aria-modal="true">
<!-- Background backdrop, show/hide based on slide-over state. -->
<div class="fixed inset-0 z-50"></div>
<div
class="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
<div class="flex items-center justify-between">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Dogstats</span>
<img class="h-8 w-auto"
src="/imgs/dogstats-50.png" alt="">
</a>
<button type="button" class="-m-2.5 rounded-md p-2.5 text-gray-700">
<span class="sr-only">Close menu</span>
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div class="mt-6 flow-root">
<div class="-my-6 divide-y divide-gray-500/10">
<div class="space-y-2 py-6">
<a href="#"
class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Product</a>
<a href="#"
class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Features</a>
</div>
<div class="py-6">
<a href="#"
class="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Log
in</a>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="relative isolate px-6 pt-14 lg:px-8">
<div class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
aria-hidden="true">
<div class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)">
</div>
</div>
<div id="main" hx-get="/" hx-trigger="load" class="mx-auto max-w-2xl">
<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>
<div id="main" hx-get="/" hx-trigger="load">
</div>
</div>
</body>
</html>