242 lines
9.2 KiB
HTML
242 lines
9.2 KiB
HTML
<!DOCTYPE html>
|
|
<html class="no-js" lang="">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<!-- displays site properly based on user's device -->
|
|
|
|
<link
|
|
rel="icon"
|
|
type="image/png"
|
|
sizes="32x32"
|
|
href="./assets/images/favicon-32x32.png"
|
|
/>
|
|
<link href="../public/out.css" rel="stylesheet" />
|
|
|
|
<title>Frontend Mentor | Multi-step form</title>
|
|
|
|
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
|
|
<style>
|
|
.attribution {
|
|
font-size: 11px;
|
|
text-align: center;
|
|
}
|
|
.attribution a {
|
|
color: hsl(228, 45%, 44%);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!--[if lt IE 8]>
|
|
<p class="browserupgrade">
|
|
You are using an <strong>outdated</strong> browser. Please
|
|
<a href="http://browsehappy.com/">upgrade your browser</a> to improve
|
|
your experience.
|
|
</p>
|
|
<![endif]-->
|
|
|
|
<main class="grid place-content-center h-screen">
|
|
<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/4"
|
|
hx-swap="outerHTML"
|
|
action="/submit-step/3/4"
|
|
method="post"
|
|
th:fragment="formFragment(formData)"
|
|
>
|
|
<summary
|
|
class="w-full h-44 bg-no-repeat md:row-span-2 bg-sidebar-mobile marker:text-white md:bg-sidebar-desktop md:h-[568px] md:w-[274px]"
|
|
id="sidebar"
|
|
th:replace="~{step1::stepsSummary (${formData})}"
|
|
>
|
|
<ol
|
|
class="grid grid-cols-[repeat(4,_auto)] gap-x-5 content-center items-center place-content-center h-24 md:flex-col md:h-full md:grid-rows-[repeat(4,_auto)] md:grid-cols-1 md:content-start md:p-10 md:gap-y-7 text-white text-sm uppercase"
|
|
>
|
|
<li class="items-center md:grid md:gap-x-4 md:grid-cols-[auto_1fr]">
|
|
<div
|
|
class="grid place-content-center w-8 h-8 text-white rounded-full border border-white"
|
|
>
|
|
1
|
|
</div>
|
|
<p class="hidden md:flex md:flex-col">
|
|
<span class="text-light-gray">Step 1</span
|
|
><span class="font-bold">Your info</span>
|
|
</p>
|
|
</li>
|
|
<li class="items-center md:grid md:gap-x-4 md:grid-cols-[auto_1fr]">
|
|
<div
|
|
class="grid place-content-center w-8 h-8 text-white rounded-full border border-white"
|
|
>
|
|
2
|
|
</div>
|
|
<p class="hidden md:flex md:flex-col">
|
|
<span class="text-light-gray">Step 2</span
|
|
><span class="font-bold">Select plan</span>
|
|
</p>
|
|
</li>
|
|
<li class="items-center md:grid md:gap-x-4 md:grid-cols-[auto_1fr]">
|
|
<div
|
|
class="grid place-content-center w-8 h-8 text-white rounded-full border border-white"
|
|
>
|
|
3
|
|
</div>
|
|
<p class="hidden md:flex md:flex-col">
|
|
<span class="text-light-gray">Step 3</span
|
|
><span class="font-bold">Add-ons</span>
|
|
</p>
|
|
</li>
|
|
<li class="items-center md:grid md:gap-x-4 md:grid-cols-[auto_1fr]">
|
|
<div
|
|
class="grid place-content-center w-8 h-8 text-white rounded-full border border-white"
|
|
>
|
|
4
|
|
</div>
|
|
<p class="hidden md:flex md:flex-col">
|
|
<span class="text-light-gray">Step 4</span
|
|
><span class="font-bold">summary</span>
|
|
</p>
|
|
</li>
|
|
</ol>
|
|
</summary>
|
|
<section
|
|
id="multipage-form-container"
|
|
class="flex flex-col py-8 px-6 -mt-20 w-11/12 bg-white rounded-xl md:px-24 md:mt-0 md:w-full drop-shadow-xl md:drop-shadow-none"
|
|
>
|
|
<!-- Step 3 start -->
|
|
<h1 class="text-2xl font-bold md:text-4xl text-marine-blue">
|
|
Pick add-ons
|
|
</h1>
|
|
<p class="py-3 md:pb-10 text-cool-gray">
|
|
Add-ons help enhance your gaming experience.
|
|
</p>
|
|
<div class="flex flex-col gap-y-3 w-full text-sm md:text-base">
|
|
<label
|
|
th:each="addon: ${formData.availableAddons}"
|
|
for="multiplayer-games"
|
|
th:for="${addon}"
|
|
class="relative pl-5 h-16 md:w-full md:h-20"
|
|
>
|
|
<input
|
|
id="multiplayer-games"
|
|
th:id="${addon}"
|
|
type="checkbox"
|
|
value="OnlineService"
|
|
th:value="${addon}"
|
|
name="addon-services"
|
|
class="absolute z-40 my-5 w-6 h-6 text-white rounded-lg border md:my-7 accent-purplish-blue border-light-gray peer"
|
|
th:checked="${formData.userAnswers.step3.containsAddon(addon)}"
|
|
/>
|
|
<div
|
|
class="absolute inset-y-0 inset-x-0 z-20 rounded-lg border border-cool-gray peer-checked:border-purplish-blue peer-checked:bg-magnolia/75 hover:bg-magnolia/[.1] hover:border-purplish-blue"
|
|
>
|
|
<div
|
|
class="grid place-content-center ml-16 h-full grid-cols-[1fr_70px]"
|
|
>
|
|
<h1 th:text="${addon.name}"
|
|
class="font-bold text-marine-blue"
|
|
>Online Service</h1>
|
|
<p th:text="${addon.description}"
|
|
class="text-xs text-cool-gray"
|
|
>
|
|
Access to multiplayer games
|
|
</p>
|
|
<p
|
|
class="col-start-2 row-span-2 row-start-1 self-center text-purplish-blue"
|
|
th:text="|+$${formData.addonCost(addon)}/${formData.periodCostLabel}|"
|
|
>
|
|
+$1/mo
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
<label
|
|
for="larger-storage"
|
|
class="relative pl-6 h-20 md:w-full"
|
|
th:remove="all"
|
|
>
|
|
<input
|
|
id="larger-storage"
|
|
type="checkbox"
|
|
name="addon-services"
|
|
value="LargerStorage"
|
|
class="my-7 w-6 h-6 peer"
|
|
th:checked="${formData.userAnswers.step3.containsAddon('LargerStorage')}"
|
|
/>
|
|
<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]"
|
|
>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
<label
|
|
for="custom-profile"
|
|
class="relative pl-6 h-20 md:w-full"
|
|
th:remove="all"
|
|
>
|
|
<input
|
|
id="custom-profile"
|
|
type="checkbox"
|
|
name="addon-services"
|
|
value="CustomProfile"
|
|
class="my-7 w-6 h-6 peer"
|
|
th:checked="${formData.userAnswers.step3.containsAddon('CustomProfile')}"
|
|
/>
|
|
<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]"
|
|
>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Step 3 end -->
|
|
</section>
|
|
<div class="md:hidden grow"></div>
|
|
<section
|
|
id="footer-controls"
|
|
class="flex flex-row items-center py-4 w-full bg-white md:items-end md:h-full"
|
|
>
|
|
<a
|
|
hx-post="/submit-step/3/2"
|
|
hx-swap="outerHTML"
|
|
hx-target="#form-step"
|
|
href="step2.html"
|
|
class="ml-6 text-sm font-semibold md:pb-3 md:ml-24 md:text-base text-cool-gray"
|
|
>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
|
|
>
|
|
</section>
|
|
</form>
|
|
</main>
|
|
</body>
|
|
</html>
|