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

feat(15): steps submit form and set next

Browse Source
This commit is contained in:
efim
2023-07-14 20:17:15 +00:00
parent 65bfe3077f
commit febc77032b
6 changed files with 168 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
15-multi-step-form/src/main/resources/templates/step3.html
View File

@@ -39,6 +39,10 @@
<form
class="flex flex-col items-center w-screen h-screen md:grid md:items-start md:p-5 md:bg-white md:rounded-2xl md:grid-cols-[auto_1fr] md:w-desktop-form md:h-desktop-form md:drop-shadow-2xl"
id="form-step"
hx-post="/submit-step/3"
hx-swap="outerHTML"
action="/submit-step/3"
method="post"
th:fragment="formFragment(formData)"
>
<summary
@@ -105,9 +109,7 @@
<p class="py-3 text-cool-gray">
Add-ons help enhance your gaming experience.
</p>
<div
class="flex flex-col w-full text-sm md:text-base"
>
<div class="flex flex-col w-full text-sm md:text-base">
<label for="multiplayer-games" class="relative pl-6 h-20 md:w-full">
<input
id="multiplayer-games"
@@ -118,10 +120,14 @@
<div
class="absolute inset-y-0 inset-x-0 rounded-lg border border-cool-gray peer-checked:border-purplish-blue peer-checked:bg-magnolia/50"
>
<div class="grid place-content-center ml-20 h-full grid-cols-[1fr_100px]">
<div
class="grid place-content-center ml-20 h-full grid-cols-[1fr_100px]"
>
<h1>Online Service</h1>
<p>Access to multiplayer games</p>
<p class="col-start-2 row-span-2 row-start-1 self-center">+$1/mo</p>
<p class="col-start-2 row-span-2 row-start-1 self-center">
+$1/mo
</p>
</div>
</div>
</label>
@@ -136,10 +142,14 @@
<div
class="absolute inset-y-0 inset-x-0 rounded-lg border border-cool-gray peer-checked:border-purplish-blue peer-checked:bg-magnolia/50"
>
<div class="grid place-content-center ml-20 h-full grid-cols-[1fr_100px]">
<div
class="grid place-content-center ml-20 h-full grid-cols-[1fr_100px]"
>
<h1>Larger storage</h1>
<p>Extra 1TB of cloud save</p>
<p class="col-start-2 row-span-2 row-start-1 self-center">+$2/mo</p>
<p class="col-start-2 row-span-2 row-start-1 self-center">
+$2/mo
</p>
</div>
</div>
</label>
@@ -154,10 +164,14 @@
<div
class="absolute inset-y-0 inset-x-0 rounded-lg border border-cool-gray peer-checked:border-purplish-blue peer-checked:bg-magnolia/50"
>
<div class="grid place-content-center ml-20 h-full grid-cols-[1fr_100px]">
<div
class="grid place-content-center ml-20 h-full grid-cols-[1fr_100px]"
>
<h1>Customizable Profile</h1>
<p>Custom theme on your profile</p>
<p class="col-start-2 row-span-2 row-start-1 self-center">+$2/mo</p>
<p class="col-start-2 row-span-2 row-start-1 self-center">
+$2/mo
</p>
</div>
</div>
</label>
@@ -176,7 +190,14 @@
>Go Back</a
>
<div class="grow"></div>
<input
type="submit"
href="step4.html"
class="grid place-content-center mr-3 w-24 h-10 text-sm font-semibold text-white rounded md:mr-24 md:w-32 md:h-12 md:text-base md:rounded-lg bg-marine-blue"
value="Next Step"
/>
<a
th:remove="all"
href="step4.html"
class="grid place-content-center mr-3 w-24 h-10 text-sm font-semibold text-white rounded md:mr-24 md:w-32 md:h-12 md:text-base md:rounded-lg bg-marine-blue"
>Next Step</a