From 646ecfe95efc44b288f8218eb858969e8ca153d0 Mon Sep 17 00:00:00 2001 From: Chris Date: Sat, 21 Oct 2023 20:47:11 +0200 Subject: [PATCH] just using php as template engine --- .vscode/extensions.json | 3 +- README.md | 4 +- web/css/output.css | 218 ++++++++++++---------- web/inc/classes/Page.class.php | 1 + web/pages/auth/controller.php | 15 -- web/pages/features/controller.php | 9 + web/pages/features/features.html | 62 ++++++ web/pages/login/controller.php | 17 ++ web/{templates => pages/login}/login.html | 4 +- web/templates/features.html | 1 - web/templates/mainpage.html | 89 ++------- 11 files changed, 222 insertions(+), 201 deletions(-) delete mode 100644 web/pages/auth/controller.php create mode 100644 web/pages/features/controller.php create mode 100644 web/pages/features/features.html create mode 100644 web/pages/login/controller.php rename web/{templates => pages/login}/login.html (89%) delete mode 100644 web/templates/features.html diff --git a/.vscode/extensions.json b/.vscode/extensions.json index c04c8d0..2ab874c 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -6,6 +6,7 @@ "devsense.phptools-vscode", "bmewburn.vscode-intelephense-client", "github.copilot", - "github.copilot-chat" + "github.copilot-chat", + "bradlc.vscode-tailwindcss" ] } \ No newline at end of file diff --git a/README.md b/README.md index 59eff3b..dd9801c 100644 --- a/README.md +++ b/README.md @@ -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 diff --git a/web/css/output.css b/web/css/output.css index 233a46c..4162ab9 100644 --- a/web/css/output.css +++ b/web/css/output.css @@ -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%; } diff --git a/web/inc/classes/Page.class.php b/web/inc/classes/Page.class.php index b8f66db..2307823 100644 --- a/web/inc/classes/Page.class.php +++ b/web/inc/classes/Page.class.php @@ -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(); diff --git a/web/pages/auth/controller.php b/web/pages/auth/controller.php deleted file mode 100644 index 31fa9f5..0000000 --- a/web/pages/auth/controller.php +++ /dev/null @@ -1,15 +0,0 @@ -set('template', 'features.html'); + } + +} \ No newline at end of file diff --git a/web/pages/features/features.html b/web/pages/features/features.html new file mode 100644 index 0000000..df491ed --- /dev/null +++ b/web/pages/features/features.html @@ -0,0 +1,62 @@ + +
+
+

Raw Denim Heirloom Man Braid + Selfies Wayfarers +

+
+
+
+ + + +
+
+

Shooting Stars

+

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.

+ Learn More + + + + +
+
+
+
+ + + + + +
+
+

The Catalyzer

+

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.

+ Learn More + + + + +
+
+
+
+ + + + +
+
+

Neptune

+

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.

+ Learn More + + + + +
+
+
+
+
+ \ No newline at end of file diff --git a/web/pages/login/controller.php b/web/pages/login/controller.php new file mode 100644 index 0000000..d5ad8d1 --- /dev/null +++ b/web/pages/login/controller.php @@ -0,0 +1,17 @@ +set('hello','world'); + $this->set('template', 'login.html'); + //return print_r($_REQUEST, true); + } + + function maySeeThisPage() + { + return true; + } + +} \ No newline at end of file diff --git a/web/templates/login.html b/web/pages/login/login.html similarity index 89% rename from web/templates/login.html rename to web/pages/login/login.html index 4379a33..0a8fafc 100644 --- a/web/templates/login.html +++ b/web/pages/login/login.html @@ -5,7 +5,7 @@ Sign in to your account
- yes +
@@ -27,7 +27,7 @@
Forgot password? -

diff --git a/web/templates/features.html b/web/templates/features.html deleted file mode 100644 index c8a3bf8..0000000 --- a/web/templates/features.html +++ /dev/null @@ -1 +0,0 @@ -soo many features prolly \ No newline at end of file diff --git a/web/templates/mainpage.html b/web/templates/mainpage.html index a83e6f9..a75a899 100644 --- a/web/templates/mainpage.html +++ b/web/templates/mainpage.html @@ -9,9 +9,10 @@ - +

-
+ +
- -
-
- -
- -
-

Dogstats - der Agilityhelfer

-

Anim aute id magna aliqua ad ad non deserunt sunt. - Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.

-
- Get - started - Learn more -
-
-
+
+
+ + \ No newline at end of file