feat(14): initial static styling of showdown

14-rock-paper-scissors/src/input.css

@@ -2,6 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-/* div, section, span { */
+/* div, section, span, p { */
 /*     outline: 1px solid red; */
 /* } */

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

@@ -563,6 +563,10 @@ video {
   margin-right: 0.75rem;
 }
 
+.mt-14 {
+  margin-top: 3.5rem;
+}
+
 .block {
   display: block;
 }
@@ -571,6 +575,10 @@ video {
   display: flex;
 }
 
+.grid {
+  display: grid;
+}
+
 .h-10 {
   height: 2.5rem;
 }
@@ -615,6 +623,10 @@ video {
   width: 8rem;
 }
 
+.w-\[100px\] {
+  width: 100px;
+}
+
 .w-\[375px\] {
   width: 375px;
 }
@@ -640,11 +652,25 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.-translate-x-\[var\(--translation\)\] {
+  --tw-translate-x: calc(var(--translation) * -1);
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .-translate-y-1\/2 {
   --tw-translate-y: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.-translate-y-\[var\(--translation\)\] {
+  --tw-translate-y: calc(var(--translation) * -1);
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
 .flex-row {
   flex-direction: row;
 }
@@ -695,11 +721,21 @@ video {
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
 
+.bg-radial-gradient-top {
+  --tw-bg-opacity: 1;
+  background-color: hsl(214 47% 23% / var(--tw-bg-opacity));
+}
+
 .bg-white {
   --tw-bg-opacity: 1;
   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));
 }
@@ -750,9 +786,9 @@ video {
   background-repeat: no-repeat;
 }
 
-.py-10 {
+.py-12 {
-  padding-top: 2.5rem;
+  padding-top: 3rem;
-  padding-bottom: 2.5rem;
+  padding-bottom: 3rem;
 }
 
 .py-2 {
@@ -760,19 +796,22 @@ video {
   padding-bottom: 0.5rem;
 }
 
-.py-12 {
-  padding-top: 3rem;
-  padding-bottom: 3rem;
-}
-
 .pl-4 {
   padding-left: 1rem;
 }
 
+.pt-10 {
+  padding-top: 2.5rem;
+}
+
 .pt-8 {
   padding-top: 2rem;
 }
 
+.text-center {
+  text-align: center;
+}
+
 .text-2xl {
   font-size: 1.5rem;
   line-height: 2rem;
@@ -828,7 +867,7 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-/* div, section, span { */
+/* div, section, span, p { */
 
 /*     outline: 1px solid red; */
 

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

@@ -62,13 +62,15 @@
       >
         <div
           id="paper"
-          class="absolute top-[var(--top-offset)] left-[var(--left-offset)] w-[var(--diameter)] h-[var(--diameter)] bg-gradient-to-b rounded-full -translate-x-1/2 -translate-y-1/2 from-[var(--bg-bright)] to-[var(--bg-dark)]"
+          class="top-[var(--top-offset)] left-[var(--left-offset)] w-[var(--diameter)] h-[var(--diameter)] bg-gradient-to-b rounded-full -translate-x-[var(--translation)] -translate-y-[var(--translation)] from-[var(--bg-bright)] to-[var(--bg-dark)]"
           style="
             --diameter: 8rem;
             --bg-dark: hsl(230, 89%, 62%);
             --bg-bright: hsl(230, 89%, 65%);
             --top-offset: 6rem;
             --left-offset: 6rem;
+            --translation: 50%;
+            position: absolute;
           "
         >
           <div
@@ -82,13 +84,15 @@
 
         <div
           id="scissors"
-          class="absolute top-[var(--top-offset)] left-[var(--left-offset)] w-[var(--diameter)] h-[var(--diameter)] bg-gradient-to-b rounded-full -translate-x-1/2 -translate-y-1/2 from-[var(--bg-bright)] to-[var(--bg-dark)]"
+          class="top-[var(--top-offset)] left-[var(--left-offset)] w-[var(--diameter)] h-[var(--diameter)] bg-gradient-to-b rounded-full -translate-x-[var(--translation)] -translate-y-[var(--translation)] from-[var(--bg-bright)] to-[var(--bg-dark)]"
           style="
             --diameter: 8rem;
             --bg-dark: hsl(39, 89%, 49%);
             --bg-bright: hsl(40, 84%, 53%);
             --top-offset: 6rem;
             --left-offset: 17rem;
+            --translation: 50%;
+            position: absolute;
           "
         >
           <div
@@ -102,13 +106,15 @@
 
         <div
           id="rock"
-          class="absolute top-[var(--top-offset)] left-[var(--left-offset)] w-[var(--diameter)] h-[var(--diameter)] bg-gradient-to-b rounded-full -translate-x-1/2 -translate-y-1/2 from-[var(--bg-bright)] to-[var(--bg-dark)]"
+          class="top-[var(--top-offset)] left-[var(--left-offset)] w-[var(--diameter)] h-[var(--diameter)] bg-gradient-to-b rounded-full -translate-x-[var(--translation)] -translate-y-[var(--translation)] from-[var(--bg-bright)] to-[var(--bg-dark)]"
           style="
             --diameter: 8rem;
             --bg-dark: hsl(349, 71%, 52%);
             --bg-bright: hsl(349, 70%, 56%);
             --top-offset: 15rem;
             --left-offset: 11.5rem;
+            --translation: 50%;
+            position: absolute;
           "
         >
           <div

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

@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="en">
+  <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
+      href="../public/output.css"
+      th:href="'public/output.css'"
+      rel="stylesheet"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="../public/images/favicon-32x32.png"
+      th:href="'public/images/favicon-32x32.png'"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@600;700&display=swap"
+      rel="stylesheet"
+    />
+    <title>Frontend Mentor | Rock, Paper, Scissors</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>
+    <main
+      class="flex flex-col justify-between items-center pt-8 w-screen h-screen bg-gradient-to-b from-radial-gradient-top to-radial-gradient-bottom"
+    >
+      <section
+        id="heading"
+        class="flex flex-row items-center w-10/12 rounded-md border-[3px] border-header-outline h-[100px]"
+      >
+        <h1
+          class="pl-4 text-xl font-bold leading-none text-white uppercase grow"
+        >
+          <span class="block">rock</span> <span class="block">paper</span>
+          <span class="block">scissors</span>
+        </h1>
+        <h2
+          class="flex flex-col justify-around items-center py-2 mr-3 bg-white rounded-md w-[80px] h-[70px] text-score-text rouned-md"
+        >
+          <span class="text-xs uppercase">Score</span
+          ><span class="text-4xl font-extrabold">12</span>
+        </h2>
+      </section>
+
+      <section id="showdown" class="grid grid-cols-2 w-[375px] h-[375px]">
+        <div id="players-choice"
+             class="flex relative flex-col items-center pt-10"
+        >
+          <!-- This will be imported fragment -->
+          <div
+            id="rock"
+            class="top-[var(--top-offset)] left-[var(--left-offset)] w-[var(--diameter)] h-[var(--diameter)] bg-gradient-to-b rounded-full -translate-x-[var(--translation)] -translate-y-[var(--translation)] from-[var(--bg-bright)] to-[var(--bg-dark)]"
+            style="
+              --diameter: 8rem;
+              --bg-dark: hsl(349, 71%, 52%);
+              --bg-bright: hsl(349, 70%, 56%);
+              --top-offset: 0rem;
+              --left-offset: 0rem;
+              --translation: 0%;
+              position: relative;
+            "
+          >
+            <div
+              class="absolute top-1/2 left-1/2 w-3/4 h-3/4 bg-gradient-to-b from-gray-300 to-gray-100 rounded-full -translate-x-1/2 -translate-y-1/2"
+            ></div>
+            <img
+              src="../public/images/icon-rock.svg"
+              class="absolute top-1/2 left-1/2 w-1/3 -translate-x-1/2 -translate-y-1/2"
+            />
+          </div>
+          <p class="absolute top-1/2 tracking-widest text-center text-white uppercase text-md">You picked</p>
+        </div>
+
+        <div id="house-choice"
+             class="flex relative flex-col items-center"
+        >
+          <!-- This will be imported fragment -->
+          <div
+            class="mt-14 rounded-full bg-radial-gradient-top h-[100px] w-[100px]"
+          >
+          </div>
+          <p class="absolute top-1/2 tracking-widest text-center text-white uppercase text-md">The house picked</p>
+        </div>
+
+      </section>
+
+      <div class="py-12">
+        <button
+          class="w-32 h-10 text-base text-2xl tracking-widest text-white uppercase rounded-lg border border-white"
+        >
+          Rules
+        </button>
+      </div>
+    </main>
+    <footer class="fixed inset-x-0 bottom-0 attribution">
+      Challenge by
+      <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
+        >Frontend Mentor</a
+      >. Coded by <a href="#">Your Name Here</a>.
+    </footer>
+  </body>
+</html>