First Commit

ui/index.html

@@ -0,0 +1,172 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
+      integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script
+      src="https://code.jquery.com/jquery-3.7.1.slim.min.js"
+      integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8="
+      crossorigin="anonymous"
+    ></script>
+  </head>
+  <body>
+    <!-- item 1 -->
+
+    <script>
+      function toggleAccordionContent(element, forAll = false) {
+        const drawer = element.closest(".drawer");
+        drawer.toggleClass("drawer-active");
+
+        if (drawer.hasClass("drawer-active" || forAll)) {
+          drawer.attr("aria-expanded", "true");
+          drawer.addClass("drawer-active");
+          element
+            .closest(".drawer")
+            .find(".drawer-content")
+            .attr("aria-hidden", "false");
+        } else {
+          drawer.attr("aria-expanded", "false");
+          element
+            .closest(".drawer")
+            .find(".drawer-content")
+            .attr("aria-hidden", "true");
+        }
+      }
+    </script>
+
+    <script>
+      $(document).ready(function () {
+        var content = [
+          { status: "unavailable", label: "Unavailable", active: false },
+          { status: "available", label: "Active", active: false },
+        ];
+
+        content.forEach((item) => {
+          const newItem = $(".drawer").clone();
+          newItem
+            .addClass(`drawer-${item.status}`)
+            .find(".drawer-status")
+            .text(item.label)
+            .end();
+          if (item.active) {
+            toggleAccordionContent(newItem);
+          }
+          $(".drawersd-demo").append(newItem);
+        });
+
+        // Remove first clone Element
+        $(".drawersd-demo").children().first().remove();
+      });
+    </script>
+    <script>
+      $(document).ready(function () {
+        $(".drawer").each(function (index, element) {
+          $(element)
+            .find(".drawer-toogle")
+            .click(function () {
+              toggleAccordionContent($(this));
+              $(this).find(".icon").toggleClass("rotate-180");
+            });
+        });
+      });
+    </script>
+
+    <div class="container m-auto">
+      <div
+        class="w-full flex-col justify-start items-start gap-[15px] inline-flex p-2"
+      >
+        <div class="drawersd-demo gap-[15px] w-full flex flex-col"></div>
+
+        <div class="group drawer w-full">
+          <div
+            class="w-full px-4 py-3 group group-[.drawer-unavailable]:bg-orange-50 group-[.drawer-available]:bg-sky-100 rounded-[10px] shadow border transition-all duration-700"
+          >
+            <div
+              class="drawer-header w-full justify-between items-center inline-flex"
+            >
+              <div class="w-1/2 justify-start items-center gap-2 flex">
+                <div
+                  class="w-2.5 h-2.5 group-[.drawer-unavailable]:bg-red-200 group-[.drawer-available]:bg-emerald-400 rounded-full"
+                ></div>
+                <div class="text-black text-xs font-normal font-['Inter']">
+                  Pizza Monday
+                </div>
+                <div
+                  class="drawer-status px-2 py-1 group-[.drawer-unavailable]:bg-red-200/50 group-[.drawer-available]:bg-emerald-200/80 rounded-lg justify-start items-center gap-2 flex text-[10px] font-normal font-['Inter']"
+                >
+                  null
+                </div>
+              </div>
+              <div class="w-1/2 justify-end items-center gap-3 flex">
+                <div
+                  class="text-right text-black text-xs font-normal font-['Inter']"
+                >
+                  Monday July 1st, 2024
+                </div>
+                <button
+                  class="transition duration-500 group drawer-toogle w-7 h-7 relative bg-white hover:bg-sky-100 hover:border-sky-700 rounded-lg border border-gray-400 items-center justify-center flex cursor-pointer"
+                >
+                  <i
+                    class="transition icon fa-solid fa-chevron-down fa-2xs group-hover:text-sky-700"
+                  ></i>
+                  <p class="sr-only">Toogle</p>
+                </button>
+              </div>
+            </div>
+            <div
+              class="transition group drawer-content w-full h-0 invisible group-[.drawer-active]:h-auto group-[.drawer-active]:visible duration-700 group-[.drawer-active]:p-2 transition ease-out duration-100"
+            >
+              Content here
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- item 1 -->
+
+      <script>
+        $(document).ready(function () {
+          // Expend ALL TOOGLE
+          $(".drawer-all-toogle").click(function () {
+            $(".drawer").each(function (index, element) {
+              toggleAccordionContent($(element), true);
+            });
+            $(".icon").toggleClass("rotate-180");
+          });
+        });
+      </script>
+      <div class="w-full flex-col items-center gap-[15px] inline-flex p-2">
+        <button
+          class="drawer-all-toogle flex gap-x-2 items-center justify-center content-center border border-sky-500 px-3 py-1 rounded-lg shadow hover:shadow-md bg-white text-sky-600 text-sm font-['Inter'] hover:text-white hover:bg-sky-300 transition duration-300"
+        >
+          <span>Expand All</span>
+          <i
+            class="icon fa-solid fa-chevron-down fa-2xs group-hover:text-sky-700"
+          ></i>
+        </button>
+      </div>
+    </div>
+  </body>
+  <script
+    src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/js/solid.min.js"
+    integrity="sha512-L2znesU64H/rvdnaD4WBaRAmEcGvhBsVLXygPkhpgpUwcgjymD4amy68shdgZgLiIvyvV/vHRXAM4mTV8xqp+Q=="
+    crossorigin="anonymous"
+    referrerpolicy="no-referrer"
+  ></script>
+</html>