HotLunches/ui/index.html

<!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>