efim
/
Learning-HTMX
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: static mobile main page template

This commit is contained in:
efim 2023-09-23 08:28:56 +00:00
parent 4b2c6e4f62
commit 73804a0ed4
2 changed files with 167 additions and 352 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

374
16-countries-page-from-api/src/main/resources/public/output.css
View File

@ -522,34 +522,20 @@ video {
--tw-backdrop-sepia: ;
}
.absolute {
position: absolute;
.my-8 {
margin-top: 2rem;
margin-bottom: 2rem;
}
.relative {
position: relative;
}
.z-\[1000\] {
z-index: 1000;
}
.float-left {
float: left;
}
.m-0 {
margin: 0px;
.my-4 {
margin-top: 1rem;
margin-bottom: 1rem;
}
.mr-2 {
margin-right: 0.5rem;
}
.ml-2 {
margin-left: 0.5rem;
}
.mt-1 {
margin-top: 0.25rem;
}
@ -566,99 +552,50 @@ video {
display: grid;
}
.hidden {
display: none;
}
.h-10 {
height: 2.5rem;
}
.h-20 {
height: 5rem;
}
.h-32 {
height: 8rem;
}
.h-12 {
height: 3rem;
}
.h-36 {
height: 9rem;
}
.h-14 {
height: 3.5rem;
}
.h-5 {
height: 1.25rem;
}
.h-8 {
height: 2rem;
}
.h-16 {
height: 4rem;
}
.h-44 {
height: 11rem;
.h-20 {
height: 5rem;
}
.h-48 {
height: 12rem;
}
.h-60 {
height: 15rem;
.h-\[375px\] {
height: 375px;
}
.h-52 {
height: 13rem;
}
.w-10 {
width: 2.5rem;
.h-\[350px\] {
height: 350px;
}
.w-16 {
width: 4rem;
}
.w-2 {
width: 0.5rem;
.w-64 {
width: 16rem;
}
.w-5 {
width: 1.25rem;
.w-\[275px\] {
width: 275px;
}
.w-full {
width: 100%;
}
.w-64 {
width: 16rem;
}
.min-w-max {
min-width: -moz-max-content;
min-width: max-content;
}
.flex-grow {
flex-grow: 1;
}
.list-none {
list-style-type: none;
}
.appearance-none {
-webkit-appearance: none;
-moz-appearance: none;
@ -689,16 +626,30 @@ video {
justify-content: space-around;
}
.overflow-hidden {
overflow: hidden;
.gap-8 {
gap: 2rem;
}
.whitespace-nowrap {
white-space: nowrap;
.gap-10 {
gap: 2.5rem;
}
.rounded {
border-radius: 0.25rem;
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.rounded-lg {
@ -709,24 +660,15 @@ video {
border-radius: 0.375rem;
}
.rounded-t-lg {
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
}
.border {
border-width: 1px;
}
.border-none {
border-style: none;
}
.border-gray-300 {
--tw-border-opacity: 1;
border-color: rgb(209 213 219 / var(--tw-border-opacity));
}
.bg-cyan-300 {
--tw-bg-opacity: 1;
background-color: rgb(103 232 249 / var(--tw-bg-opacity));
}
.bg-very-light-gray {
--tw-bg-opacity: 1;
background-color: hsl(0 0% 98% / var(--tw-bg-opacity));
@ -737,20 +679,8 @@ video {
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.bg-transparent {
background-color: transparent;
}
.bg-clip-padding {
background-clip: padding-box;
}
.p-6 {
padding: 1.5rem;
}
.p-4 {
padding: 1rem;
.p-8 {
padding: 2rem;
}
.px-4 {
@ -758,87 +688,29 @@ video {
padding-right: 1rem;
}
.px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
.pb-8 {
padding-bottom: 2rem;
}
.pb-2 {
padding-bottom: 0.5rem;
}
.pt-2 {
padding-top: 0.5rem;
}
.pt-2\.5 {
padding-top: 0.625rem;
}
.text-left {
text-align: left;
}
.text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
.text-base {
font-size: 1rem;
line-height: 1.5rem;
}
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.text-xs {
font-size: 0.75rem;
line-height: 1rem;
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.font-bold {
font-weight: 700;
}
.font-medium {
font-weight: 500;
}
.font-normal {
font-weight: 400;
}
.uppercase {
text-transform: uppercase;
}
.leading-normal {
line-height: 1.5;
}
.text-neutral-700 {
--tw-text-opacity: 1;
color: rgb(64 64 64 / var(--tw-text-opacity));
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.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);
@ -857,34 +729,12 @@ video {
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_4px_9px_-4px_\#3b71ca\] {
--tw-shadow: 0 4px 9px -4px #3b71ca;
--tw-shadow-colored: 0 4px 9px -4px 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-sm {
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.transition {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.duration-150 {
transition-duration: 150ms;
}
.ease-in-out {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
html {
font-size: 14px;
}
@ -925,125 +775,7 @@ html {
font-style: normal;
}
.hover\:bg-neutral-100:hover {
--tw-bg-opacity: 1;
background-color: rgb(245 245 245 / var(--tw-bg-opacity));
}
.hover\:shadow-\[0_8px_9px_-4px_rgba\(59\2c 113\2c 202\2c 0\.3\)\2c 0_4px_18px_0_rgba\(59\2c 113\2c 202\2c 0\.2\)\]:hover {
--tw-shadow: 0 8px 9px -4px rgba(59,113,202,0.3),0 4px 18px 0 rgba(59,113,202,0.2);
--tw-shadow-colored: 0 8px 9px -4px var(--tw-shadow-color), 0 4px 18px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.focus\:border-indigo-500:focus {
--tw-border-opacity: 1;
border-color: rgb(99 102 241 / var(--tw-border-opacity));
}
.focus\:shadow-\[0_8px_9px_-4px_rgba\(59\2c 113\2c 202\2c 0\.3\)\2c 0_4px_18px_0_rgba\(59\2c 113\2c 202\2c 0\.2\)\]:focus {
--tw-shadow: 0 8px 9px -4px rgba(59,113,202,0.3),0 4px 18px 0 rgba(59,113,202,0.2);
--tw-shadow-colored: 0 8px 9px -4px var(--tw-shadow-color), 0 4px 18px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.focus\:outline-none:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.focus\:ring-0:focus {
--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(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring:focus {
--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(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-indigo-200:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(199 210 254 / var(--tw-ring-opacity));
}
.active\:text-neutral-800:active {
--tw-text-opacity: 1;
color: rgb(38 38 38 / var(--tw-text-opacity));
}
.active\:no-underline:active {
text-decoration-line: none;
}
.active\:shadow-\[0_8px_9px_-4px_rgba\(59\2c 113\2c 202\2c 0\.3\)\2c 0_4px_18px_0_rgba\(59\2c 113\2c 202\2c 0\.2\)\]:active {
--tw-shadow: 0 8px 9px -4px rgba(59,113,202,0.3),0 4px 18px 0 rgba(59,113,202,0.2);
--tw-shadow-colored: 0 8px 9px -4px var(--tw-shadow-color), 0 4px 18px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.disabled\:pointer-events-none:disabled {
pointer-events: none;
}
.disabled\:bg-transparent:disabled {
background-color: transparent;
}
.disabled\:text-neutral-400:disabled {
--tw-text-opacity: 1;
color: rgb(163 163 163 / var(--tw-text-opacity));
}
@media (prefers-reduced-motion: reduce) {
.motion-reduce\:transition-none {
transition-property: none;
}
}
@media (prefers-color-scheme: dark) {
.dark\:bg-neutral-700 {
--tw-bg-opacity: 1;
background-color: rgb(64 64 64 / var(--tw-bg-opacity));
}
.dark\:text-neutral-200 {
--tw-text-opacity: 1;
color: rgb(229 229 229 / var(--tw-text-opacity));
}
.dark\:shadow-\[0_4px_9px_-4px_rgba\(59\2c 113\2c 202\2c 0\.5\)\] {
--tw-shadow: 0 4px 9px -4px rgba(59,113,202,0.5);
--tw-shadow-colored: 0 4px 9px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.dark\:hover\:bg-neutral-600:hover {
--tw-bg-opacity: 1;
background-color: rgb(82 82 82 / var(--tw-bg-opacity));
}
.dark\:hover\:shadow-\[0_8px_9px_-4px_rgba\(59\2c 113\2c 202\2c 0\.2\)\2c 0_4px_18px_0_rgba\(59\2c 113\2c 202\2c 0\.1\)\]:hover {
--tw-shadow: 0 8px 9px -4px rgba(59,113,202,0.2),0 4px 18px 0 rgba(59,113,202,0.1);
--tw-shadow-colored: 0 8px 9px -4px var(--tw-shadow-color), 0 4px 18px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.dark\:focus\:shadow-\[0_8px_9px_-4px_rgba\(59\2c 113\2c 202\2c 0\.2\)\2c 0_4px_18px_0_rgba\(59\2c 113\2c 202\2c 0\.1\)\]:focus {
--tw-shadow: 0 8px 9px -4px rgba(59,113,202,0.2),0 4px 18px 0 rgba(59,113,202,0.1);
--tw-shadow-colored: 0 8px 9px -4px var(--tw-shadow-color), 0 4px 18px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.dark\:active\:shadow-\[0_8px_9px_-4px_rgba\(59\2c 113\2c 202\2c 0\.2\)\2c 0_4px_18px_0_rgba\(59\2c 113\2c 202\2c 0\.1\)\]:active {
--tw-shadow: 0 8px 9px -4px rgba(59,113,202,0.2),0 4px 18px 0 rgba(59,113,202,0.1);
--tw-shadow-colored: 0 8px 9px -4px var(--tw-shadow-color), 0 4px 18px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
}
.\[\&\[data-te-dropdown-show\]\]\:block[data-te-dropdown-show] {
display: block;
}

145
16-countries-page-from-api/src/main/resources/templates/index.html
View File

@ -19,39 +19,122 @@
your experience.
</p>
<![endif]-->
<main>
<header
class="bg-white h-20 flex flex-row justify-between items-center px-4 shadow-md"
<header
class="bg-white h-20 flex flex-row justify-between items-center px-4 shadow-md"
>
<h1 class="font-bold">Where in the world?</h1>
<p>Dark Mode</p>
</header>
<nav class="flex flex-col px-6 my-4 justify-around h-48">
<form method="post" id="search-country" action="">
<div class="flex flex-row bg-white shadow-md h-14 rounded-lg">
<p class="w-16 grid place-content-center">IC</p>
<input
class="appearance-none flex-grow focus:outline-none mr-2"
type="text"
name="country-name"
placeholder="Search for a country..."
/>
</div>
</form>
<form>
<select
class="block w-62 mt-1 h-12 w-64 bg-white shadow-md rounded-md shadow-sm focus:outline-none"
>
<option value="" selected disabled>Filter by Region</option>
<option value="Africa">Africa</option>
<option value="Americas">Americas</option>
<option value="Asia">Asia</option>
<option value="Europe">Europe</option>
<option value="Oceania">Oceania</option>
</select>
</form>
</nav>
<main class="flex flex-col items-center gap-10 pb-8">
<article
id="germany"
class="bg-white h-[350px] w-[275px] border flex flex-col rounded-lg shadow-lg"
>
<h1 class="font-bold">Where in the world?</h1>
<p>Dark Mode</p>
</header>
<nav class="flex flex-col px-4 justify-around h-48">
<form method="post" id="search-country" action="">
<div class="flex flex-row bg-white shadow-md h-14 rounded-lg">
<p class="w-16 grid place-content-center">IC</p>
<input
class="appearance-none flex-grow focus:outline-none mr-2"
type="text"
name="country-name"
placeholder="Search for a country..."
/>
</div>
</form>
<form>
<select
class="block w-full mt-1 h-12 w-64 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none"
>
<option value="" selected disabled>Filter by Region</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
</form>
</nav>
<article>
<h1 class="text-3xl">Hello!</h1>
<img
src="https://flagcdn.com/de.svg"
alt="flag of Germany"
class="rounded-t-lg"
/>
<section class="p-8 space-y-3">
<h2 class="text-2xl font-bold">Germany</h2>
<dl class="space-y-1">
<div class="flex">
<dt class="font-bold mr-2">Population:</dt>
<dd>81,771,900</dd>
</div>
<div class="flex">
<dt class="font-bold mr-2">Region:</dt>
<dd>Europe</dd>
</div>
<div class="flex">
<dt class="font-bold mr-2">Capital:</dt>
<dd>Berlin</dd>
</div>
</dl>
</section>
</article>
<article
id="usa"
class="bg-white h-[350px] w-[275px] border flex flex-col rounded-lg shadow-lg"
>
<img
src="https://flagcdn.com/us.svg"
alt="flag of the USA"
class="rounded-t-lg"
/>
<section class="p-8 space-y-3">
<h2 class="text-2xl font-bold">United States of America</h2>
<dl class="space-y-1">
<div class="flex">
<dt class="font-bold mr-2">Population:</dt>
<dd>329,484,123</dd>
</div>
<div class="flex">
<dt class="font-bold mr-2">Region:</dt>
<dd>Americas</dd>
</div>
<div class="flex">
<dt class="font-bold mr-2">Capital:</dt>
<dd>Washington, D.C.</dd>
</div>
</dl>
</section>
</article>
<article
id="Brazil"
class="bg-white h-[350px] w-[275px] border flex flex-col rounded-lg shadow-lg"
>
<img
src="https://flagcdn.com/br.svg"
alt="flag of Germany"
class="rounded-t-lg"
/>
<section class="p-8 space-y-3">
<h2 class="text-2xl font-bold">Brazil</h2>
<dl class="space-y-1">
<div class="flex">
<dt class="font-bold mr-2">Population:</dt>
<dd>212,559,409</dd>
</div>
<div class="flex">
<dt class="font-bold mr-2">Region:</dt>
<dd>Americas</dd>
</div>
<div class="flex">
<dt class="font-bold mr-2">Capital:</dt>
<dd>Brasília</dd>
</div>
</dl>
</section>
</article>
</main>
</body>
</html>