(UI): Simple under construction page implemented.

This is a temporary measure, until the favorites and shopping list pages
are implemented.
This commit is contained in:
Hayden Hargreaves 2025-07-11 18:20:15 -07:00
parent 5540daf6b6
commit 737f56d3a0
5 changed files with 32 additions and 149 deletions

View File

@ -3,5 +3,13 @@ package templates
import "github.com/haydenhargreaves/Potion/internal/templates/components"
templ FavoritesPage() {
@components.Navbar("favorites")
@components.Navbar("favorites")
<div class="w-full h-screen flex justify-center">
<div class="mx-2 md:mx-0 w-full md:w-1/2 md:pt-14 h-full border-l border-r border-gray-300 bg-white">
<div class="flex flex-col items-center justify-center h-full gap-y-2">
<h1 class="text-4xl text-gray-800 font-semibold">Page Under Construction </h1>
<p class="text-gray-700">Sit tight, this page is coming soon!</p>
</div>
</div>
</div>
}

View File

@ -35,6 +35,10 @@ func FavoritesPage() templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"w-full h-screen flex justify-center\"><div class=\"mx-2 md:mx-0 w-full md:w-1/2 md:pt-14 h-full border-l border-r border-gray-300 bg-white\"><div class=\"flex flex-col items-center justify-center h-full gap-y-2\"><h1 class=\"text-4xl text-gray-800 font-semibold\">Page Under Construction </h1><p class=\"text-gray-700\">Sit tight, this page is coming soon!</p></div></div></div>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
return nil
})
}

View File

@ -3,6 +3,14 @@ package templates
import "github.com/haydenhargreaves/Potion/internal/templates/components"
templ ListPage() {
@components.Navbar("list")
@components.Navbar("list")
<div class="w-full h-screen flex justify-center">
<div class="mx-2 md:mx-0 w-full md:w-1/2 md:pt-14 h-full border-l border-r border-gray-300 bg-white">
<div class="flex flex-col items-center justify-center h-full gap-y-2">
<h1 class="text-4xl text-gray-800 font-semibold">Page Under Construction </h1>
<p class="text-gray-700">Sit tight, this page is coming soon!</p>
</div>
</div>
</div>
}

View File

@ -35,6 +35,10 @@ func ListPage() templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"w-full h-screen flex justify-center\"><div class=\"mx-2 md:mx-0 w-full md:w-1/2 md:pt-14 h-full border-l border-r border-gray-300 bg-white\"><div class=\"flex flex-col items-center justify-center h-full gap-y-2\"><h1 class=\"text-4xl text-gray-800 font-semibold\">Page Under Construction </h1><p class=\"text-gray-700\">Sit tight, this page is coming soon!</p></div></div></div>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
return nil
})
}

View File

@ -240,9 +240,6 @@
.static {
position: static;
}
.top-1 {
top: calc(var(--spacing) * 1);
}
.top-1\/2 {
top: calc(1/2 * 100%);
}
@ -252,9 +249,6 @@
.left-0 {
left: calc(var(--spacing) * 0);
}
.left-1 {
left: calc(var(--spacing) * 1);
}
.left-1\/2 {
left: calc(1/2 * 100%);
}
@ -291,18 +285,6 @@
.-mt-1 {
margin-top: calc(var(--spacing) * -1);
}
.-mt-2 {
margin-top: calc(var(--spacing) * -2);
}
.-mt-3 {
margin-top: calc(var(--spacing) * -3);
}
.-mt-4 {
margin-top: calc(var(--spacing) * -4);
}
.-mt-8 {
margin-top: calc(var(--spacing) * -8);
}
.mt-2 {
margin-top: calc(var(--spacing) * 2);
}
@ -380,14 +362,6 @@
width: calc(var(--spacing) * 10);
height: calc(var(--spacing) * 10);
}
.size-12 {
width: calc(var(--spacing) * 12);
height: calc(var(--spacing) * 12);
}
.size-16 {
width: calc(var(--spacing) * 16);
height: calc(var(--spacing) * 16);
}
.size-32 {
width: calc(var(--spacing) * 32);
height: calc(var(--spacing) * 32);
@ -418,15 +392,6 @@
.h-20 {
height: calc(var(--spacing) * 20);
}
.h-24 {
height: calc(var(--spacing) * 24);
}
.h-32 {
height: calc(var(--spacing) * 32);
}
.h-48 {
height: calc(var(--spacing) * 48);
}
.h-96 {
height: calc(var(--spacing) * 96);
}
@ -445,27 +410,12 @@
.min-h-screen {
min-height: 100vh;
}
.w-1 {
width: calc(var(--spacing) * 1);
}
.w-1\/2 {
width: calc(1/2 * 100%);
}
.w-1\/3 {
width: calc(1/3 * 100%);
}
.w-1\/4 {
width: calc(1/4 * 100%);
}
.w-2 {
width: calc(var(--spacing) * 2);
}
.w-2\/3 {
width: calc(2/3 * 100%);
}
.w-3 {
width: calc(var(--spacing) * 3);
}
.w-3\/4 {
width: calc(3/4 * 100%);
}
@ -478,9 +428,6 @@
.w-5 {
width: calc(var(--spacing) * 5);
}
.w-9 {
width: calc(var(--spacing) * 9);
}
.w-9\/10 {
width: calc(9/10 * 100%);
}
@ -499,30 +446,16 @@
.max-w-2xl {
max-width: var(--container-2xl);
}
.flex-shrink {
flex-shrink: 1;
}
.flex-shrink-0 {
flex-shrink: 0;
}
.flex-grow {
flex-grow: 1;
}
.border-collapse {
border-collapse: collapse;
}
.-translate-x-1 {
--tw-translate-x: calc(var(--spacing) * -1);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.-translate-x-1\/2 {
--tw-translate-x: calc(calc(1/2 * 100%) * -1);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.-translate-y-1 {
--tw-translate-y: calc(var(--spacing) * -1);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.-translate-y-1\/2 {
--tw-translate-y: calc(calc(1/2 * 100%) * -1);
translate: var(--tw-translate-x) var(--tw-translate-y);
@ -535,36 +468,9 @@
--tw-scale-y: 50%;
scale: var(--tw-scale-x) var(--tw-scale-y);
}
.scale-y-150 {
--tw-scale-y: 150%;
scale: var(--tw-scale-x) var(--tw-scale-y);
}
.rotate-12 {
rotate: 12deg;
}
.rotate-45 {
rotate: 45deg;
}
.skew-x-3 {
--tw-skew-x: skewX(3deg);
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
}
.skew-y-3 {
--tw-skew-y: skewY(3deg);
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
}
.transform {
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
}
.animate-bounce {
animation: var(--animate-bounce);
}
.cursor-pointer {
cursor: pointer;
}
.resize {
resize: both;
}
.resize-none {
resize: none;
}
@ -604,9 +510,6 @@
.gap-1 {
gap: calc(var(--spacing) * 1);
}
.gap-4 {
gap: calc(var(--spacing) * 4);
}
.gap-8 {
gap: calc(var(--spacing) * 8);
}
@ -628,6 +531,9 @@
.gap-y-1 {
row-gap: calc(var(--spacing) * 1);
}
.gap-y-2 {
row-gap: calc(var(--spacing) * 2);
}
.gap-y-3 {
row-gap: calc(var(--spacing) * 3);
}
@ -840,9 +746,6 @@
.text-center {
text-align: center;
}
.font-mono {
font-family: var(--font-mono);
}
.font-sans {
font-family: var(--font-sans);
}
@ -854,18 +757,14 @@
font-size: var(--text-3xl);
line-height: var(--tw-leading, var(--text-3xl--line-height));
}
.text-5xl {
font-size: var(--text-5xl);
line-height: var(--tw-leading, var(--text-5xl--line-height));
.text-4xl {
font-size: var(--text-4xl);
line-height: var(--tw-leading, var(--text-4xl--line-height));
}
.text-6xl {
font-size: var(--text-6xl);
line-height: var(--tw-leading, var(--text-6xl--line-height));
}
.text-8xl {
font-size: var(--text-8xl);
line-height: var(--tw-leading, var(--text-8xl--line-height));
}
.text-base {
font-size: var(--text-base);
line-height: var(--tw-leading, var(--text-base--line-height));
@ -932,9 +831,6 @@
.text-blue-700 {
color: var(--color-blue-700);
}
.text-blue-800 {
color: var(--color-blue-800);
}
.text-gray-300 {
color: var(--color-gray-300);
}
@ -1024,10 +920,6 @@
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.duration-100 {
--tw-duration: 100ms;
transition-duration: 100ms;
}
.duration-150 {
--tw-duration: 150ms;
transition-duration: 150ms;
@ -1040,14 +932,6 @@
--tw-duration: 300ms;
transition-duration: 300ms;
}
.duration-500 {
--tw-duration: 500ms;
transition-duration: 500ms;
}
.duration-1000 {
--tw-duration: 1000ms;
transition-duration: 1000ms;
}
.ease-in-out {
--tw-ease: var(--ease-in-out);
transition-timing-function: var(--ease-in-out);
@ -1524,26 +1408,6 @@
inherits: false;
initial-value: 1;
}
@property --tw-rotate-x {
syntax: "*";
inherits: false;
}
@property --tw-rotate-y {
syntax: "*";
inherits: false;
}
@property --tw-rotate-z {
syntax: "*";
inherits: false;
}
@property --tw-skew-x {
syntax: "*";
inherits: false;
}
@property --tw-skew-y {
syntax: "*";
inherits: false;
}
@property --tw-border-style {
syntax: "*";
inherits: false;
@ -1753,11 +1617,6 @@
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-scale-z: 1;
--tw-rotate-x: initial;
--tw-rotate-y: initial;
--tw-rotate-z: initial;
--tw-skew-x: initial;
--tw-skew-y: initial;
--tw-border-style: solid;
--tw-gradient-position: initial;
--tw-gradient-from: #0000;