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

feat(12): moving order summary into template file

This commit is contained in:
efim 2023-06-28 12:16:52 +00:00
parent 1d7647bcdf
commit 520dd6de9c
2 changed files with 38 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
12-order-summary-component-thymeleaf/src/main/resources/templates/index.html
View File

@ -37,44 +37,8 @@
></div>
<!-- main container -->
<div class="bg-pale-blue w-screen h-screen grid place-content-center">
<div
class="bg-white rounded-xl drop-shadow-2xl flex flex-col items-center w-[320px] h-[565px] md:w-[450px] md:h-[700px]"
>
<img
src="public/images/illustration-hero.svg"
class="rounded-t-xl w-full"
/>
<h1 class="text-xl font-extrabold my-7 md:text-3xl md:mt-10">Order Summary</h1>
<p class="text-center text-desaturated-blue px-8 mb-5 md:px-12">
You can now listen to millions of songs, audiobooks, and podcasts on
any device anywhere you like!
</p>
<div
class="bg-very-pale-blue rounded-xl p-4 w-[calc(100%-3rem)] flex flex-row md:w-[calc(100%-6rem)] md:h-24 md:items-center md:p-6"
>
<img src="public/images/icon-music.svg"
class="md:w-12 md:h-12"
/>
<div class="flex flex-col grow pl-3 md:pl-6 justify-center">
<p class="font-bold text-sm text-dark-blue md:text-base">Annual Plan</p>
<p class="text-desaturated-blue text-sm md:text-base">$59.99/year</p>
</div>
<button class="underline text-xs text-bright-blue font-bold hover:no-underline hover:text-warm-blue">
Change
</button>
</div>
<button
class="bg-bright-blue rounded-xl drop-shadow-2xl text-white font-bold py-3 my-6 w-[calc(100%-3rem)] md:w-[calc(100%-6rem)] md:my-8 hover:bg-warm-blue"
>
Proceed to Payment
</button>
<button class="text-desaturated-blue font-bold hover:text-dark-blue">Cancel Order</button>
</div>
<div th:replace="order-summary" />
</div>
<div class="attribution fixed bottom-0 inset-x-0">
Challenge by
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank"

37
12-order-summary-component-thymeleaf/src/main/resources/templates/order-summary.html Normal file
View File

@ -0,0 +1,37 @@
<div
class="bg-white rounded-xl drop-shadow-2xl flex flex-col items-center w-[320px] h-[565px] md:w-[450px] md:h-[700px]"
>
<img src="public/images/illustration-hero.svg" class="rounded-t-xl w-full" />
<h1 class="text-xl font-extrabold my-7 md:text-3xl md:mt-10">
Order Summary
</h1>
<p class="text-center text-desaturated-blue px-8 mb-5 md:px-12">
You can now listen to millions of songs, audiobooks, and podcasts on any
device anywhere you like!
</p>
<div
class="bg-very-pale-blue rounded-xl p-4 w-[calc(100%-3rem)] flex flex-row md:w-[calc(100%-6rem)] md:h-24 md:items-center md:p-6"
>
<img src="public/images/icon-music.svg" class="md:w-12 md:h-12" />
<div class="flex flex-col grow pl-3 md:pl-6 justify-center">
<p class="font-bold text-sm text-dark-blue md:text-base">Annual Plan</p>
<p class="text-desaturated-blue text-sm md:text-base">$59.99/year</p>
</div>
<button
class="underline text-xs text-bright-blue font-bold hover:no-underline hover:text-warm-blue"
>
Change
</button>
</div>
<button
class="bg-bright-blue rounded-xl drop-shadow-2xl text-white font-bold py-3 my-6 w-[calc(100%-3rem)] md:w-[calc(100%-6rem)] md:my-8 hover:bg-warm-blue"
>
Proceed to Payment
</button>
<button class="text-desaturated-blue font-bold hover:text-dark-blue">
Cancel Order
</button>
</div>