feat(14): final static main stylig

14-rock-paper-scissors/src/main/resources/public/output.css

@@ -567,6 +567,10 @@ video {
   margin-top: 3.5rem;
 }
 
+.mt-6 {
+  margin-top: 1.5rem;
+}
+
 .block {
   display: block;
 }
@@ -583,6 +587,10 @@ video {
   height: 2.5rem;
 }
 
+.h-12 {
+  height: 3rem;
+}
+
 .h-3\/4 {
   height: 75%;
 }
@@ -639,6 +647,10 @@ video {
   width: var(--diameter);
 }
 
+.w-full {
+  width: 100%;
+}
+
 .w-screen {
   width: 100vw;
 }
@@ -703,6 +715,10 @@ video {
   border-radius: 0.375rem;
 }
 
+.rounded-xl {
+  border-radius: 0.75rem;
+}
+
 .border {
   border-width: 1px;
 }
@@ -731,11 +747,6 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.bg-radial-gradient-bottom {
-  --tw-bg-opacity: 1;
-  background-color: hsl(237 49% 15% / var(--tw-bg-opacity));
-}
-
 .bg-gradient-to-b {
   background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
 }
@@ -822,6 +833,11 @@ video {
   line-height: 2.5rem;
 }
 
+.text-6xl {
+  font-size: 3.75rem;
+  line-height: 1;
+}
+
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -853,10 +869,19 @@ video {
   line-height: 1;
 }
 
+.tracking-wide {
+  letter-spacing: 0.025em;
+}
+
 .tracking-widest {
   letter-spacing: 0.1em;
 }
 
+.text-radial-gradient-bottom {
+  --tw-text-opacity: 1;
+  color: hsl(237 49% 15% / var(--tw-text-opacity));
+}
+
 .text-score-text {
   --tw-text-opacity: 1;
   color: hsl(229 64% 46% / var(--tw-text-opacity));

14-rock-paper-scissors/src/main/resources/templates/showdown.html

@@ -95,6 +95,18 @@
           </div>
           <p class="absolute top-1/2 tracking-widest text-center text-white uppercase text-md">The house picked</p>
         </div>
+      </section>
+
+      <section
+        id="message"
+        class="text-white"
+      >
+        <p
+          class="text-6xl tracking-wide uppercase"
+        >You lose</p>
+        <button
+          class="mt-6 w-full h-12 tracking-widest uppercase bg-white rounded-xl text-radial-gradient-bottom"
+        >Play again</button>
 
       </section>