feat(14): adding initial rules modal overlay

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

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

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

@@ -603,6 +603,10 @@ video {
   height: 0px;
 }
 
+.h-1\/4 {
+  height: 25%;
+}
+
 .h-10 {
   height: 2.5rem;
 }
@@ -615,6 +619,10 @@ video {
   height: 75%;
 }
 
+.h-32 {
+  height: 8rem;
+}
+
 .h-\[100px\] {
   height: 100px;
 }
@@ -892,6 +900,11 @@ video {
   line-height: 2rem;
 }
 
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
 .text-4xl {
   font-size: 2.25rem;
   line-height: 2.5rem;
@@ -933,6 +946,10 @@ video {
   line-height: 1;
 }
 
+.tracking-wide {
+  letter-spacing: 0.025em;
+}
+
 .tracking-widest {
   letter-spacing: 0.1em;
 }
@@ -960,7 +977,7 @@ video {
   opacity: 0.05;
 }
 
-/* div, section, span, p { */
+/* div, section, span, p, h1, button { */
 
 /*     outline: 1px solid red; */
 

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

@@ -175,12 +175,47 @@
         </div>
       </section>
 
+      <!-- This is rules overlay modal window -->
+      <dialog
+        id="rules-dialog"
+        class="w-screen h-screen"
+      >
+        <div
+        class="flex flex-col justify-between w-full h-full"
+        >
+          <h1
+            class="grid place-content-center h-1/4 text-3xl font-bold tracking-wide uppercase"
+          >Rules</h1>
+          <div class="grid place-content-center grow">
+            <img src="../public/images/image-rules.svg" alt="Rules of the game: rock beats scissors, scissors beat paper, paper beats rock." />
+          </div>
+          <button
+            id="close-dialog-button"
+            class="grid place-content-center h-32"
+          >
+            <img src="../public/images/icon-close.svg" alt="Close rules display" />
+          </button>
+        </div>
+      </dialog>
+
       <div class="py-12">
         <button
+          id="rules-button"
           class="w-32 h-10 text-base text-2xl tracking-widest text-white uppercase rounded-lg border border-white"
         >
           Rules
         </button>
+        <script type="text/javascript">
+         const dialog = document.getElementById("rules-dialog");
+         const openButton = document.getElementById("rules-button");
+         const closeButton = document.getElementById("close-dialog-button");
+         openButton.addEventListener("click", function() {
+           dialog.showModal();
+         });
+         closeButton.addEventListener("click", function() {
+           dialog.close();
+         });
+        </script>
       </div>
     </main>
     <footer class="fixed inset-x-0 bottom-0 attribution">