From 568ff3c1eecd588268f9ec354b9def7fb15975ba Mon Sep 17 00:00:00 2001
From: efim <efim.nefedov@nordigy.ru>
Date: Tue, 11 Jul 2023 17:52:43 +0000
Subject: [PATCH] feat(15): initial step 4 styling

---
 .../src/main/resources/public/out.css         |  30 +++++
 .../src/main/resources/templates/step4.html   | 116 ++++++++++++++++--
 2 files changed, 134 insertions(+), 12 deletions(-)

diff --git a/15-multi-step-form/src/main/resources/public/out.css b/15-multi-step-form/src/main/resources/public/out.css
index cd81f7b..443f873 100644
--- a/15-multi-step-form/src/main/resources/public/out.css
+++ b/15-multi-step-form/src/main/resources/public/out.css
@@ -794,6 +794,16 @@ video {
        column-gap: 1.25rem;
 }
 
+.gap-y-4 {
+  row-gap: 1rem;
+}
+
+.divide-y > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-y-reverse: 0;
+  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
+}
+
 .self-center {
   align-self: center;
 }
@@ -862,6 +872,26 @@ video {
   background-color: rgb(234 179 8 / var(--tw-bg-opacity));
 }
 
+.bg-cool-gray {
+  --tw-bg-opacity: 1;
+  background-color: hsl(231 11% 63% / var(--tw-bg-opacity));
+}
+
+.bg-light-blue {
+  --tw-bg-opacity: 1;
+  background-color: hsl(206 94% 87% / var(--tw-bg-opacity));
+}
+
+.bg-pastel-blue {
+  --tw-bg-opacity: 1;
+  background-color: hsl(228 100% 84% / var(--tw-bg-opacity));
+}
+
+.bg-purplish-blue {
+  --tw-bg-opacity: 1;
+  background-color: hsl(243 100% 62% / var(--tw-bg-opacity));
+}
+
 .bg-sidebar-mobile {
   background-image: url("images/bg-sidebar-mobile.svg");
 }
diff --git a/15-multi-step-form/src/main/resources/templates/step4.html b/15-multi-step-form/src/main/resources/templates/step4.html
index 8003ab5..a6e0236 100644
--- a/15-multi-step-form/src/main/resources/templates/step4.html
+++ b/15-multi-step-form/src/main/resources/templates/step4.html
@@ -35,20 +35,112 @@
       </p>
     <![endif]-->
 
-    <main class="bg-green-200">
-  <!-- Step 4 start -->
+    <main class="grid place-content-center h-screen">
+      <article
+        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"
+      >
+        <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"
+        >
+          <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">Finishing up</h1>
+          <p class="py-3 text-cool-gray">Double-check everything looks OK before confirming.</p>
+          <div
+            class="flex flex-col w-full text-sm rounded-lg divide-y md:text-base bg-magnolia"
+            id="selection-overview"
+          >
+            <div id="selected-plan">
+              Arcade (Monthly) Change $90/y
+            </div>
+            <div id="selected-addons"
+                 class="flex flex-col"
+            >
+              <div>
+                Online service +$10/yr
+              </div>
+              <div>
+                Larger storage +$20/yr
+              </div>
+            </div>
+          </div>
 
-  Finishing up
-  Double-check everything looks OK before confirming.
+          <p>Total (per year) $120</p>
 
-  <!-- Dynamically add subscription and add-on selections here -->
-
-  Total (per month/year)
-
-  Go Back
-  Confirm
-
-  <!-- Step 4 end -->
+          <!-- 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
+            href="step3.html"
+            class="ml-6 text-sm font-semibold md:pb-3 md:ml-20 md:text-base text-cool-gray"
+            >Go Back</a
+          >
+          <div class="grow"></div>
+          <a
+            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-purplish-blue"
+            >Confirm</a
+          >
+        </section>
+      </article>
     </main>
   </body>
 </html>