feat: index page for desktop
This commit is contained in:
efim
parent
aca8599d6e
commit
ae33d7e72a
|
|
@ -522,9 +522,9 @@ video {
|
||||||
--tw-backdrop-sepia: ;
|
--tw-backdrop-sepia: ;
|
||||||
}
|
}
|
||||||
|
|
||||||
.my-8 {
|
.mx-5 {
|
||||||
margin-top: 2rem;
|
margin-left: 1.25rem;
|
||||||
margin-bottom: 2rem;
|
margin-right: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.my-4 {
|
.my-4 {
|
||||||
|
|
@ -532,19 +532,8 @@ video {
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx-4 {
|
.-mb-4 {
|
||||||
margin-left: 1rem;
|
margin-bottom: -1rem;
|
||||||
margin-right: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mx-5 {
|
|
||||||
margin-left: 1.25rem;
|
|
||||||
margin-right: 1.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mx-2 {
|
|
||||||
margin-left: 0.5rem;
|
|
||||||
margin-right: 0.5rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.mr-2 {
|
.mr-2 {
|
||||||
|
|
@ -555,10 +544,6 @@ video {
|
||||||
margin-top: 0.25rem;
|
margin-top: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.-mb-4 {
|
|
||||||
margin-bottom: -1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.block {
|
.block {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
@ -583,56 +568,37 @@ video {
|
||||||
height: 5rem;
|
height: 5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-48 {
|
|
||||||
height: 12rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h-\[375px\] {
|
|
||||||
height: 375px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h-\[350px\] {
|
|
||||||
height: 350px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h-32 {
|
.h-32 {
|
||||||
height: 8rem;
|
height: 8rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-28 {
|
.h-48 {
|
||||||
height: 7rem;
|
height: 12rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-36 {
|
.h-5 {
|
||||||
height: 9rem;
|
height: 1.25rem;
|
||||||
}
|
|
||||||
|
|
||||||
.h-52 {
|
|
||||||
height: 13rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h-56 {
|
|
||||||
height: 14rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-60 {
|
.h-60 {
|
||||||
height: 15rem;
|
height: 15rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-10 {
|
|
||||||
height: 2.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h-8 {
|
|
||||||
height: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h-9 {
|
.h-9 {
|
||||||
height: 2.25rem;
|
height: 2.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-5 {
|
.h-\[350px\] {
|
||||||
height: 1.25rem;
|
height: 350px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h-max {
|
||||||
|
height: -moz-max-content;
|
||||||
|
height: max-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h-full {
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.max-h-60 {
|
.max-h-60 {
|
||||||
|
|
@ -643,20 +609,8 @@ video {
|
||||||
width: 4rem;
|
width: 4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w-64 {
|
.w-28 {
|
||||||
width: 16rem;
|
width: 7rem;
|
||||||
}
|
|
||||||
|
|
||||||
.w-\[275px\] {
|
|
||||||
width: 275px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.w-full {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.w-20 {
|
|
||||||
width: 5rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.w-4 {
|
.w-4 {
|
||||||
|
|
@ -667,34 +621,51 @@ video {
|
||||||
width: 1.5rem;
|
width: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w-9 {
|
.w-64 {
|
||||||
width: 2.25rem;
|
width: 16rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w-10 {
|
.w-\[275px\] {
|
||||||
width: 2.5rem;
|
width: 275px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w-8 {
|
.w-screen {
|
||||||
width: 2rem;
|
width: 100vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w-36 {
|
.w-max {
|
||||||
width: 9rem;
|
width: -moz-max-content;
|
||||||
|
width: max-content;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w-32 {
|
.max-w-screen-sm {
|
||||||
width: 8rem;
|
max-width: 640px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w-28 {
|
.max-w-screen-md {
|
||||||
width: 7rem;
|
max-width: 768px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.max-w-screen-lg {
|
||||||
|
max-width: 1024px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.max-w-screen-xl {
|
||||||
|
max-width: 1280px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-1 {
|
||||||
|
flex: 1 1 0%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex-grow {
|
.flex-grow {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.grow {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
.appearance-none {
|
.appearance-none {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
|
|
@ -721,6 +692,10 @@ video {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.justify-center {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
.justify-between {
|
.justify-between {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
@ -729,10 +704,6 @@ video {
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gap-8 {
|
|
||||||
gap: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gap-10 {
|
.gap-10 {
|
||||||
gap: 2.5rem;
|
gap: 2.5rem;
|
||||||
}
|
}
|
||||||
|
|
@ -741,51 +712,30 @@ video {
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gap-y-8 {
|
|
||||||
row-gap: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gap-y-9 {
|
|
||||||
row-gap: 2.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gap-y-10 {
|
|
||||||
row-gap: 2.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gap-x-2 {
|
.gap-x-2 {
|
||||||
-moz-column-gap: 0.5rem;
|
-moz-column-gap: 0.5rem;
|
||||||
column-gap: 0.5rem;
|
column-gap: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gap-y-2 {
|
|
||||||
row-gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gap-y-6 {
|
|
||||||
row-gap: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gap-x-6 {
|
|
||||||
-moz-column-gap: 1.5rem;
|
|
||||||
column-gap: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gap-x-3 {
|
.gap-x-3 {
|
||||||
-moz-column-gap: 0.75rem;
|
-moz-column-gap: 0.75rem;
|
||||||
column-gap: 0.75rem;
|
column-gap: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.gap-y-10 {
|
||||||
|
row-gap: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
|
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
|
||||||
--tw-space-y-reverse: 0;
|
--tw-space-y-reverse: 0;
|
||||||
margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
|
margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
|
||||||
margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
|
margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
|
||||||
}
|
}
|
||||||
|
|
||||||
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
|
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
|
||||||
--tw-space-y-reverse: 0;
|
--tw-space-y-reverse: 0;
|
||||||
margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
|
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
|
||||||
margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
|
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
|
||||||
}
|
}
|
||||||
|
|
||||||
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
|
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
|
||||||
|
|
@ -794,10 +744,8 @@ video {
|
||||||
margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
|
margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
|
||||||
}
|
}
|
||||||
|
|
||||||
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
|
.rounded {
|
||||||
--tw-space-y-reverse: 0;
|
border-radius: 0.25rem;
|
||||||
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
|
|
||||||
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.rounded-lg {
|
.rounded-lg {
|
||||||
|
|
@ -808,10 +756,6 @@ video {
|
||||||
border-radius: 0.375rem;
|
border-radius: 0.375rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rounded {
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rounded-t-lg {
|
.rounded-t-lg {
|
||||||
border-top-left-radius: 0.5rem;
|
border-top-left-radius: 0.5rem;
|
||||||
border-top-right-radius: 0.5rem;
|
border-top-right-radius: 0.5rem;
|
||||||
|
|
@ -831,16 +775,6 @@ video {
|
||||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-blue-400 {
|
|
||||||
--tw-bg-opacity: 1;
|
|
||||||
background-color: rgb(96 165 250 / var(--tw-bg-opacity));
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-red-300 {
|
|
||||||
--tw-bg-opacity: 1;
|
|
||||||
background-color: rgb(252 165 165 / var(--tw-bg-opacity));
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-8 {
|
.p-8 {
|
||||||
padding: 2rem;
|
padding: 2rem;
|
||||||
}
|
}
|
||||||
|
|
@ -850,9 +784,9 @@ video {
|
||||||
padding-right: 1rem;
|
padding-right: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.px-8 {
|
.px-5 {
|
||||||
padding-left: 2rem;
|
padding-left: 1.25rem;
|
||||||
padding-right: 2rem;
|
padding-right: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.px-6 {
|
.px-6 {
|
||||||
|
|
@ -860,29 +794,28 @@ video {
|
||||||
padding-right: 1.5rem;
|
padding-right: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.px-7 {
|
||||||
|
padding-left: 1.75rem;
|
||||||
|
padding-right: 1.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.px-8 {
|
||||||
|
padding-left: 2rem;
|
||||||
|
padding-right: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
.py-10 {
|
.py-10 {
|
||||||
padding-top: 2.5rem;
|
padding-top: 2.5rem;
|
||||||
padding-bottom: 2.5rem;
|
padding-bottom: 2.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.py-3 {
|
|
||||||
padding-top: 0.75rem;
|
|
||||||
padding-bottom: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.py-2 {
|
.py-2 {
|
||||||
padding-top: 0.5rem;
|
padding-top: 0.5rem;
|
||||||
padding-bottom: 0.5rem;
|
padding-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.px-5 {
|
.pb-10 {
|
||||||
padding-left: 1.25rem;
|
padding-bottom: 2.5rem;
|
||||||
padding-right: 1.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.px-7 {
|
|
||||||
padding-left: 1.75rem;
|
|
||||||
padding-right: 1.75rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.pb-8 {
|
.pb-8 {
|
||||||
|
|
@ -893,10 +826,6 @@ video {
|
||||||
padding-top: 0.5rem;
|
padding-top: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pb-10 {
|
|
||||||
padding-bottom: 2.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-center {
|
.text-center {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
@ -906,11 +835,6 @@ video {
|
||||||
line-height: 2rem;
|
line-height: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-3xl {
|
|
||||||
font-size: 1.875rem;
|
|
||||||
line-height: 2.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-lg {
|
.text-lg {
|
||||||
font-size: 1.125rem;
|
font-size: 1.125rem;
|
||||||
line-height: 1.75rem;
|
line-height: 1.75rem;
|
||||||
|
|
@ -920,12 +844,6 @@ video {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shadow {
|
|
||||||
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
||||||
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
|
|
||||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.shadow-lg {
|
.shadow-lg {
|
||||||
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||||
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
|
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
|
||||||
|
|
@ -944,47 +862,11 @@ video {
|
||||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
.shadow-xl {
|
|
||||||
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
|
||||||
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
|
|
||||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.drop-shadow-xl {
|
|
||||||
--tw-drop-shadow: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
|
|
||||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.drop-shadow-\[0_0_15px_rgba\(0\2c 0\2c 0\2c 0\.25\)\] {
|
|
||||||
--tw-drop-shadow: drop-shadow(0 0 15px rgba(0,0,0,0.25));
|
|
||||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.drop-shadow-\[0_0_25px_rgba\(0\2c 0\2c 0\2c 0\.25\)\] {
|
|
||||||
--tw-drop-shadow: drop-shadow(0 0 25px rgba(0,0,0,0.25));
|
|
||||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.drop-shadow {
|
.drop-shadow {
|
||||||
--tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
|
--tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
|
||||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
.drop-shadow-\[0_0_15px_rgba\(0\2c 0\2c 0\2c 0\.75\)\] {
|
|
||||||
--tw-drop-shadow: drop-shadow(0 0 15px rgba(0,0,0,0.75));
|
|
||||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.drop-shadow-\[0_0_5px_rgba\(0\2c 0\2c 0\2c 0\.75\)\] {
|
|
||||||
--tw-drop-shadow: drop-shadow(0 0 5px rgba(0,0,0,0.75));
|
|
||||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.drop-shadow-\[0_0_3px_rgba\(0\2c 0\2c 0\2c 0\.75\)\] {
|
|
||||||
--tw-drop-shadow: drop-shadow(0 0 3px rgba(0,0,0,0.75));
|
|
||||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.drop-shadow-\[0_0_3px_rgba\(0\2c 0\2c 0\2c 0\.5\)\] {
|
.drop-shadow-\[0_0_3px_rgba\(0\2c 0\2c 0\2c 0\.5\)\] {
|
||||||
--tw-drop-shadow: drop-shadow(0 0 3px rgba(0,0,0,0.5));
|
--tw-drop-shadow: drop-shadow(0 0 3px rgba(0,0,0,0.5));
|
||||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||||
|
|
@ -1034,3 +916,115 @@ html {
|
||||||
outline: 2px solid transparent;
|
outline: 2px solid transparent;
|
||||||
outline-offset: 2px;
|
outline-offset: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.md\:grid {
|
||||||
|
display: grid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md\:h-32 {
|
||||||
|
height: 8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md\:w-96 {
|
||||||
|
width: 24rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md\:w-60 {
|
||||||
|
width: 15rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md\:w-1\/4 {
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md\:w-1\/3 {
|
||||||
|
width: 33.333333%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md\:w-1\/2 {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md\:w-full {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md\:w-10\/12 {
|
||||||
|
width: 83.333333%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md\:grid-flow-col {
|
||||||
|
grid-auto-flow: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md\:grid-cols-2 {
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
|
.md\:grid-cols-\[auto-fill\] {
|
||||||
|
grid-template-columns: auto-fill;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md\:grid-cols-\[repeat\(autofill\2c _250px\)\] {
|
||||||
|
grid-template-columns: repeat(autofill, 250px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.md\:grid-cols-\[repeat\(auto-fill\2c _250px\)\] {
|
||||||
|
grid-template-columns: repeat(auto-fill, 250px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.md\:grid-cols-\[repeat\(auto-fill\2c _275px\)\] {
|
||||||
|
grid-template-columns: repeat(auto-fill, 275px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.md\:flex-row {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md\:place-content-center {
|
||||||
|
place-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md\:items-center {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md\:justify-between {
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md\:justify-around {
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md\:px-10 {
|
||||||
|
padding-left: 2.5rem;
|
||||||
|
padding-right: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md\:px-12 {
|
||||||
|
padding-left: 3rem;
|
||||||
|
padding-right: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md\:px-20 {
|
||||||
|
padding-left: 5rem;
|
||||||
|
padding-right: 5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md\:px-24 {
|
||||||
|
padding-left: 6rem;
|
||||||
|
padding-right: 6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md\:text-xl {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
line-height: 1.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md\:text-2xl {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
line-height: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -21,9 +21,12 @@
|
||||||
</p>
|
</p>
|
||||||
<![endif]-->
|
<![endif]-->
|
||||||
<header
|
<header
|
||||||
class="bg-white h-20 flex flex-row justify-between items-center px-4 shadow-md"
|
class="w-screen bg-white h-20 flex flex-row shadow-md place-content-center"
|
||||||
>
|
>
|
||||||
<h1 class="font-bold">Where in the world?</h1>
|
<div
|
||||||
|
class="flex-1 max-w-screen-xl h-20 flex flex-row justify-between items-center px-4"
|
||||||
|
>
|
||||||
|
<h1 class="grow font-bold md:text-2xl">Where in the world?</h1>
|
||||||
<div class="flex flex-row gap-x-2">
|
<div class="flex flex-row gap-x-2">
|
||||||
<img
|
<img
|
||||||
src="../public/icons/half-moon-shape-svgrepo-com.svg"
|
src="../public/icons/half-moon-shape-svgrepo-com.svg"
|
||||||
|
|
@ -32,8 +35,11 @@
|
||||||
/>
|
/>
|
||||||
<p>Dark Mode</p>
|
<p>Dark Mode</p>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<nav class="flex flex-col px-6 my-4 justify-around h-48">
|
<nav
|
||||||
|
class="flex flex-col md:flex-row px-6 my-4 justify-around h-48 md:h-32 md:items-center"
|
||||||
|
>
|
||||||
<form
|
<form
|
||||||
method="get"
|
method="get"
|
||||||
id="search-country"
|
id="search-country"
|
||||||
|
|
@ -41,8 +47,9 @@
|
||||||
hx-get="/country"
|
hx-get="/country"
|
||||||
hx-target="body"
|
hx-target="body"
|
||||||
hx-push-url="true"
|
hx-push-url="true"
|
||||||
|
class="md:w-1/4"
|
||||||
>
|
>
|
||||||
<div class="flex flex-row bg-white shadow-md h-14 rounded-lg">
|
<div class="flex flex-row bg-white shadow-md h-14 rounded-lg md:w-full">
|
||||||
<!-- <p class="w-16 grid place-content-center">IC</p> -->
|
<!-- <p class="w-16 grid place-content-center">IC</p> -->
|
||||||
<img
|
<img
|
||||||
src="../public/icons/search-svgrepo-com.svg"
|
src="../public/icons/search-svgrepo-com.svg"
|
||||||
|
|
@ -70,7 +77,7 @@
|
||||||
<form>
|
<form>
|
||||||
<select
|
<select
|
||||||
name="region"
|
name="region"
|
||||||
class="block w-62 mt-1 h-12 w-64 bg-white shadow-md rounded-md shadow-sm focus:outline-none px-7"
|
class="block w-62 mt-1 h-12 w-64 bg-white shadow-lg rounded-md shadow-sm focus:outline-none px-7"
|
||||||
hx-get="/"
|
hx-get="/"
|
||||||
hx-target="#countries-main-list"
|
hx-target="#countries-main-list"
|
||||||
hx-select="#countries-main-list"
|
hx-select="#countries-main-list"
|
||||||
|
|
@ -101,11 +108,11 @@
|
||||||
</form>
|
</form>
|
||||||
</nav>
|
</nav>
|
||||||
<main
|
<main
|
||||||
class="flex flex-col items-center gap-10 pb-8"
|
class="flex flex-col items-center gap-10 pb-8 md:grid md:grid-cols-[repeat(auto-fill,_275px)] md:px-20 md:justify-around"
|
||||||
id="countries-main-list"
|
id="countries-main-list"
|
||||||
th:fragment="countries-main (countriesList)"
|
|
||||||
>
|
>
|
||||||
<article
|
<article
|
||||||
|
th:fragment="cards-of-countries (countriesList)"
|
||||||
th:each="country : ${countriesList}"
|
th:each="country : ${countriesList}"
|
||||||
id="germany"
|
id="germany"
|
||||||
th:id="${country.alpha3Code}"
|
th:id="${country.alpha3Code}"
|
||||||
|
|
@ -145,12 +152,12 @@
|
||||||
</a>
|
</a>
|
||||||
</article>
|
</article>
|
||||||
<div
|
<div
|
||||||
|
th:fragment="infiniteScrollAnchor (nextPage, selectedRegion)"
|
||||||
th:if="${nextPage != -1}"
|
th:if="${nextPage != -1}"
|
||||||
id="next-page-anchor"
|
id="next-page-anchor"
|
||||||
hx-trigger="revealed"
|
hx-trigger="revealed"
|
||||||
th:hx-get="@{~/(region=${selectedRegion},page=${nextPage})}"
|
th:hx-get="@{~/countries-cards(region=${selectedRegion},page=${nextPage})}"
|
||||||
hx-swap="outerHTML"
|
hx-swap="outerHTML"
|
||||||
hx-select="#countries-main-list"
|
|
||||||
></div>
|
></div>
|
||||||
|
|
||||||
<article
|
<article
|
||||||
|
|
|
||||||
|
|
@ -30,7 +30,7 @@ case class Routes(countries: List[Country])(implicit
|
||||||
}
|
}
|
||||||
val engine: TemplateEngine = buildTemplateEngine()
|
val engine: TemplateEngine = buildTemplateEngine()
|
||||||
|
|
||||||
private val pageSize = 10
|
private val pageSize = 12
|
||||||
|
|
||||||
@cask.get("/")
|
@cask.get("/")
|
||||||
def indexPage(region: Option[String] = None, page: Int = 0) = {
|
def indexPage(region: Option[String] = None, page: Int = 0) = {
|
||||||
|
|
@ -62,6 +62,38 @@ case class Routes(countries: List[Country])(implicit
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* this method returns directly set of cards
|
||||||
|
* and new anchor for loading next page of cards
|
||||||
|
*
|
||||||
|
* intended to be called from "next-page-anchor" with htmx
|
||||||
|
*/
|
||||||
|
@cask.get("/countries-cards")
|
||||||
|
def getPageOfCountriesCards(region: Option[String] = None, page: Int = 0) = {
|
||||||
|
val context = new Context()
|
||||||
|
|
||||||
|
val selectedCountries = region match {
|
||||||
|
case None => countries
|
||||||
|
case Some("") => countries
|
||||||
|
case Some(selectedRegion) => countries.filter(_.region == selectedRegion)
|
||||||
|
}
|
||||||
|
|
||||||
|
val startIndex = page * pageSize
|
||||||
|
val countriesPage =
|
||||||
|
selectedCountries.slice(startIndex, startIndex + pageSize)
|
||||||
|
// if current page is not full - there will be no next page
|
||||||
|
val nextPage = if (countriesPage.length == pageSize) page + 1 else -1
|
||||||
|
context.setVariable("countriesList", countriesPage.asJava)
|
||||||
|
context.setVariable("selectedRegion", region.getOrElse(""))
|
||||||
|
context.setVariable("nextPage", nextPage)
|
||||||
|
|
||||||
|
val cards = engine.process("index", Set("cards-of-countries", "infiniteScrollAnchor").asJava, context)
|
||||||
|
Response(
|
||||||
|
cards,
|
||||||
|
headers = Seq("Content-Type" -> "text/html; charset=utf-8")
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
@cask.get("/country")
|
@cask.get("/country")
|
||||||
def getCountryPage(countryName: String) = {
|
def getCountryPage(countryName: String) = {
|
||||||
val context = new Context()
|
val context = new Context()
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue