From 93121c1029cbd0ebe0ce763a6f51c39e16e05b36 Mon Sep 17 00:00:00 2001
From: Emil Gulamov <125820963+mearashadowfax@users.noreply.github.com>
Date: Sat, 20 Apr 2024 14:21:18 +0400
Subject: [PATCH 1/2] Add table display for specifications

Restructured the display of product specifications into a table format, providing users with two choices: a list of items or a table.
---
 src/content/config.ts              |   6 +
 src/content/products/a765.md       |  19 +-
 src/pages/products/[...slug].astro | 336 ++++++++++++++++-------------
 3 files changed, 205 insertions(+), 156 deletions(-)

diff --git a/src/content/config.ts b/src/content/config.ts
index f095b80..dbb14b8 100644
--- a/src/content/config.ts
+++ b/src/content/config.ts
@@ -46,6 +46,12 @@ const productsCollection = defineCollection({
         subTitle: z.string(),
       })
     ).optional(),
+    tableData: z.array(
+      z.object({
+        feature: z.array(z.string()),
+        description: z.array(z.array(z.string())),
+      })
+    ).optional(),
     blueprints: z.object({
       first: image().optional(),
       second: image().optional(),
diff --git a/src/content/products/a765.md b/src/content/products/a765.md
index 59e6745..3255c59 100644
--- a/src/content/products/a765.md
+++ b/src/content/products/a765.md
@@ -1,6 +1,6 @@
 ---
 title: "SF-AB A765"
-description: "Assorted Screw Set" 
+description: " " 
 main:
   id: 2
   content: |
@@ -40,15 +40,14 @@ specificationsLeft:
     subTitle: "Each set includes a sufficient quantity of screws to handle a wide range of projects and tasks."
   - title: "Sizes"
     subTitle: "Available in various sizes to suit different project requirements, ensuring compatibility and versatility."
-specificationsRight:
-  - title: "Thread Design"
-    subTitle: "Precision-engineered threads ensure a tight and secure fit, providing reliable fastening for your projects."
-  - title: "Durability"
-    subTitle: "Designed to withstand the rigors of everyday use, delivering long-lasting performance and reliability."
-  - title: "Quality Assurance"
-    subTitle: "Manufactured to meet or exceed industry standards, guaranteeing consistent quality and performance."
-  - title: "Applications"
-    subTitle: "Suitable for a wide range of applications, including woodworking, metalworking, construction, and more."
+tableData:
+  - feature: ["Specification", "Value"]
+    description:
+      - ["Length (mm)", "Various"]
+      - ["Weight (g)", "N/A"]
+      - ["Material", "Stainless Steel"]
+      - ["Finish", "Assorted"]
+      - ["Package Contents", "Various screws in a set"]
 blueprints:
   first: "@/images/blueprint-1.avif"
   second: "@/images/blueprint-2.avif"
diff --git a/src/pages/products/[...slug].astro b/src/pages/products/[...slug].astro
index 0e180cc..dea0251 100644
--- a/src/pages/products/[...slug].astro
+++ b/src/pages/products/[...slug].astro
@@ -27,9 +27,7 @@ const { product } = Astro.props;
 const pageTitle: string = `${product.data.title} | ${SITE.title}`;
 ---
 
-<MainLayout
-  title={pageTitle}
->
+<MainLayout title={pageTitle}>
   <div id="overlay" class="fixed inset-0 bg-neutral-200 dark:bg-neutral-800">
   </div>
 
@@ -148,183 +146,229 @@ const pageTitle: string = `${product.data.title} | ${SITE.title}`;
                 ))
               }
             </div>
-            <div class="mt-6 max-w-md space-y-6 md:ml-auto md:mt-0">
-              {
-                product.data.specificationsRight?.map((spec) => (
-                  <div>
-                    <h3 class="block font-bold text-neutral-800 dark:text-neutral-200">
-                      {spec.title}
-                    </h3>
-                    <p class="text-neutral-600 dark:text-neutral-400">
-                      {spec.subTitle}
-                    </p>
+
+            {
+              product.data.specificationsRight ? (
+                <div class="mt-6 max-w-md space-y-6 md:ml-auto md:mt-0">
+                  {product.data.specificationsRight?.map((spec) => (
+                    <div>
+                      <h3 class="block font-bold text-neutral-800 dark:text-neutral-200">
+                        {spec.title}
+                      </h3>
+                      <p class="text-neutral-600 dark:text-neutral-400">
+                        {spec.subTitle}
+                      </p>
+                    </div>
+                  ))}
+                </div>
+              ) : product.data.tableData ? (
+                <div class="mt-6 space-y-6 md:ml-auto md:mt-0">
+                  <div class="flex flex-col">
+                    <div class="-m-1.5 overflow-x-auto">
+                      <div class="inline-block min-w-full p-1.5 align-middle">
+                        <div class="overflow-hidden">
+                          <table class="min-w-full divide-y divide-neutral-300 dark:divide-neutral-700">
+                            <thead>
+                              <tr>
+                                {product.data.tableData?.[0].feature?.map(
+                                  (header) => (
+                                    <th
+                                      scope="col"
+                                      class="px-6 py-3 text-start text-xs font-medium uppercase text-neutral-500 dark:text-neutral-500"
+                                    >
+                                      {header}
+                                    </th>
+                                  )
+                                )}
+                              </tr>
+                            </thead>
+                            <tbody class="divide-y divide-neutral-300 dark:divide-neutral-700">
+                              {product.data.tableData?.map((row) =>
+                                // Wrap each row's content in a separate <tr> element
+                                row.description.map((rowData) => (
+                                  <tr>
+                                    {/* Iterate through each cell value in the row's description array */}
+                                    {rowData.map((cellValue) => (
+                                      // Render each cell value in its own <td> element
+                                      <td class="whitespace-nowrap px-6 py-4 text-sm font-medium text-neutral-600 dark:text-neutral-400">
+                                        {cellValue}
+                                      </td>
+                                    ))}
+                                  </tr>
+                                ))
+                              )}
+                            </tbody>
+                          </table>
+                        </div>
+                      </div>
+                    </div>
                   </div>
-                ))
-              }
-            </div>
+                </div>
+              ) : null
+            }
           </div>
         </div>
       </div>
     </div>
   </div>
+</MainLayout>
 
-  <div id="tabs-with-card-3" class="hidden" role="tabpanel">
-    <div class="mx-auto mb-20 flex w-full md:mb-28 2xl:w-4/5">
-      <div
-        class="relative left-12 top-12 z-10 overflow-hidden rounded-xl shadow-lg md:left-12 md:top-16 md:-ml-12 lg:ml-0"
-      >
-        {
-          product.data.blueprints.first && (
-            <Image
-              src={product.data.blueprints.first}
-              class="h-full w-full object-cover object-center"
-              alt="Blueprint Illustration"
-              format={"avif"}
-            />
-          )
-        }
-      </div>
+<div id="tabs-with-card-3" class="hidden" role="tabpanel">
+  <div class="mx-auto mb-20 flex w-full md:mb-28 2xl:w-4/5">
+    <div
+      class="relative left-12 top-12 z-10 overflow-hidden rounded-xl shadow-lg md:left-12 md:top-16 md:-ml-12 lg:ml-0"
+    >
+      {
+        product.data.blueprints.first && (
+          <Image
+            src={product.data.blueprints.first}
+            class="h-full w-full object-cover object-center"
+            alt="Blueprint Illustration"
+            format={"avif"}
+          />
+        )
+      }
+    </div>
 
-      <div class="relative right-12 overflow-hidden rounded-xl shadow-xl">
-        {
-          product.data.blueprints.second && (
-            <Image
-              src={product.data.blueprints.second}
-              class="h-full w-full object-cover object-center"
-              alt="Blueprint Illustration"
-              format={"avif"}
-            />
-          )
-        }
-      </div>
+    <div class="relative right-12 overflow-hidden rounded-xl shadow-xl">
+      {
+        product.data.blueprints.second && (
+          <Image
+            src={product.data.blueprints.second}
+            class="h-full w-full object-cover object-center"
+            alt="Blueprint Illustration"
+            format={"avif"}
+          />
+        )
+      }
     </div>
   </div>
+</div>
 
-  <script is:inline src="/scripts/vendor/gsap/gsap.min.js"></script>
-  <script>
-    window.addEventListener("load", () => {
-      if (window.gsap) {
-        const gsap = window.gsap;
-        gsap.set("#fadeText", {
-          autoAlpha: 0,
-          y: 50,
-          willChange: "transform, opacity",
-        });
-        gsap.set("#fadeInUp", {
-          autoAlpha: 0,
-          y: 50,
-          willChange: "transform, opacity",
-        });
-        gsap.set("#fadeInMoveRight", {
-          autoAlpha: 0,
-          x: 300,
-          willChange: "transform, opacity",
-        });
+<script is:inline src="/scripts/vendor/gsap/gsap.min.js"></script>
+<script>
+  window.addEventListener("load", () => {
+    if (window.gsap) {
+      const gsap = window.gsap;
+      gsap.set("#fadeText", {
+        autoAlpha: 0,
+        y: 50,
+        willChange: "transform, opacity",
+      });
+      gsap.set("#fadeInUp", {
+        autoAlpha: 0,
+        y: 50,
+        willChange: "transform, opacity",
+      });
+      gsap.set("#fadeInMoveRight", {
+        autoAlpha: 0,
+        x: 300,
+        willChange: "transform, opacity",
+      });
 
-        let timeline = gsap.timeline({ defaults: { overwrite: "auto" } });
+      let timeline = gsap.timeline({ defaults: { overwrite: "auto" } });
 
-        timeline.to("#fadeText", {
-          duration: 1.5,
-          autoAlpha: 1,
-          y: 0,
-          delay: 1,
-          ease: "power2.out",
-        });
+      timeline.to("#fadeText", {
+        duration: 1.5,
+        autoAlpha: 1,
+        y: 0,
+        delay: 1,
+        ease: "power2.out",
+      });
 
-        timeline.to(
-          "#fadeInUp",
-          { duration: 1.5, autoAlpha: 1, y: 0, ease: "power2.out" },
-          "-=1.2",
-        );
+      timeline.to(
+        "#fadeInUp",
+        { duration: 1.5, autoAlpha: 1, y: 0, ease: "power2.out" },
+        "-=1.2"
+      );
 
-        timeline.to(
-          "#fadeInMoveRight",
-          { duration: 1.5, autoAlpha: 1, x: 0, ease: "power2.inOut" },
-          "-=1.4",
-        );
+      timeline.to(
+        "#fadeInMoveRight",
+        { duration: 1.5, autoAlpha: 1, x: 0, ease: "power2.inOut" },
+        "-=1.4"
+      );
 
-        timeline.to("#overlay", { duration: 1, autoAlpha: 0, delay: 0.2 });
-      }
-    });
-  </script>
-  <script>
-    document.addEventListener("DOMContentLoaded", function () {
-      function setButtonInactive(btn: any, activeButton: any) {
-        if (btn !== activeButton) {
-          btn.classList.remove(
-            "active",
-            "bg-neutral-100",
-            "hover:border-transparent",
-            "dark:bg-white/[.05]",
-          );
-
-          const tabId = btn.getAttribute("data-target");
-          if (tabId) {
-            const contentElement = document.querySelector(tabId);
-            if (contentElement) {
-              contentElement.classList.add("hidden");
-            }
-          }
-
-          changeHeadingStyle(
-            btn,
-            ["text-neutral-800", "dark:text-neutral-200"],
-            ["text-orange-400", "dark:text-orange-300"],
-          );
-        }
-      }
-
-      function activateButton(button: any) {
-        button.classList.add(
+      timeline.to("#overlay", { duration: 1, autoAlpha: 0, delay: 0.2 });
+    }
+  });
+</script>
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    function setButtonInactive(btn: any, activeButton: any) {
+      if (btn !== activeButton) {
+        btn.classList.remove(
           "active",
           "bg-neutral-100",
-          ",hover:border-transparent",
-          "dark:bg-white/[.05]",
+          "hover:border-transparent",
+          "dark:bg-white/[.05]"
         );
 
-        const tabId = button.getAttribute("data-target");
+        const tabId = btn.getAttribute("data-target");
         if (tabId) {
-          const contentElementToShow = document.querySelector(tabId);
-          if (contentElementToShow) {
-            contentElementToShow.classList.remove("hidden");
+          const contentElement = document.querySelector(tabId);
+          if (contentElement) {
+            contentElement.classList.add("hidden");
           }
         }
 
         changeHeadingStyle(
-          button,
-          ["text-orange-400", "dark:text-orange-300"],
+          btn,
           ["text-neutral-800", "dark:text-neutral-200"],
+          ["text-orange-400", "dark:text-orange-300"]
         );
       }
+    }
 
-      function changeHeadingStyle(
-        button: any,
-        addClasses: any,
-        removeClasses: any,
-      ) {
-        let heading = button.querySelector("span");
-        if (heading) {
-          heading.classList.remove(...removeClasses);
-          heading.classList.add(...addClasses);
+    function activateButton(button: any) {
+      button.classList.add(
+        "active",
+        "bg-neutral-100",
+        ",hover:border-transparent",
+        "dark:bg-white/[.05]"
+      );
+
+      const tabId = button.getAttribute("data-target");
+      if (tabId) {
+        const contentElementToShow = document.querySelector(tabId);
+        if (contentElementToShow) {
+          contentElementToShow.classList.remove("hidden");
         }
       }
 
-      const tabButtons = document.querySelectorAll("[data-target]");
+      changeHeadingStyle(
+        button,
+        ["text-orange-400", "dark:text-orange-300"],
+        ["text-neutral-800", "dark:text-neutral-200"]
+      );
+    }
 
-      if (tabButtons.length > 0) {
-        changeHeadingStyle(
-          tabButtons[0],
-          ["text-orange-400", "dark:text-orange-300"],
-          [],
-        );
+    function changeHeadingStyle(
+      button: any,
+      addClasses: any,
+      removeClasses: any
+    ) {
+      let heading = button.querySelector("span");
+      if (heading) {
+        heading.classList.remove(...removeClasses);
+        heading.classList.add(...addClasses);
       }
+    }
 
-      tabButtons.forEach((button) => {
-        button.addEventListener("click", () => {
-          tabButtons.forEach((btn) => setButtonInactive(btn, button));
-          activateButton(button);
-        });
+    const tabButtons = document.querySelectorAll("[data-target]");
+
+    if (tabButtons.length > 0) {
+      changeHeadingStyle(
+        tabButtons[0],
+        ["text-orange-400", "dark:text-orange-300"],
+        []
+      );
+    }
+
+    tabButtons.forEach((button) => {
+      button.addEventListener("click", () => {
+        tabButtons.forEach((btn) => setButtonInactive(btn, button));
+        activateButton(button);
       });
     });
-  </script>
-</MainLayout>
+  });
+</script>

From d2ecb964c2bd51938e347c01bc8c0b3048e84cf5 Mon Sep 17 00:00:00 2001
From: Emil Gulamov <125820963+mearashadowfax@users.noreply.github.com>
Date: Sat, 20 Apr 2024 14:34:26 +0400
Subject: [PATCH 2/2] Refactor product page

---
 src/pages/products/[...slug].astro | 274 ++++++++++++++---------------
 1 file changed, 137 insertions(+), 137 deletions(-)

diff --git a/src/pages/products/[...slug].astro b/src/pages/products/[...slug].astro
index dea0251..b3a40a9 100644
--- a/src/pages/products/[...slug].astro
+++ b/src/pages/products/[...slug].astro
@@ -27,7 +27,9 @@ const { product } = Astro.props;
 const pageTitle: string = `${product.data.title} | ${SITE.title}`;
 ---
 
-<MainLayout title={pageTitle}>
+<MainLayout
+  title={pageTitle}
+>
   <div id="overlay" class="fixed inset-0 bg-neutral-200 dark:bg-neutral-800">
   </div>
 
@@ -146,7 +148,6 @@ const pageTitle: string = `${product.data.title} | ${SITE.title}`;
                 ))
               }
             </div>
-
             {
               product.data.specificationsRight ? (
                 <div class="mt-6 max-w-md space-y-6 md:ml-auto md:mt-0">
@@ -211,164 +212,163 @@ const pageTitle: string = `${product.data.title} | ${SITE.title}`;
       </div>
     </div>
   </div>
-</MainLayout>
 
-<div id="tabs-with-card-3" class="hidden" role="tabpanel">
-  <div class="mx-auto mb-20 flex w-full md:mb-28 2xl:w-4/5">
-    <div
-      class="relative left-12 top-12 z-10 overflow-hidden rounded-xl shadow-lg md:left-12 md:top-16 md:-ml-12 lg:ml-0"
-    >
-      {
-        product.data.blueprints.first && (
-          <Image
-            src={product.data.blueprints.first}
-            class="h-full w-full object-cover object-center"
-            alt="Blueprint Illustration"
-            format={"avif"}
-          />
-        )
-      }
-    </div>
+  <div id="tabs-with-card-3" class="hidden" role="tabpanel">
+    <div class="mx-auto mb-20 flex w-full md:mb-28 2xl:w-4/5">
+      <div
+        class="relative left-12 top-12 z-10 overflow-hidden rounded-xl shadow-lg md:left-12 md:top-16 md:-ml-12 lg:ml-0"
+      >
+        {
+          product.data.blueprints.first && (
+            <Image
+              src={product.data.blueprints.first}
+              class="h-full w-full object-cover object-center"
+              alt="Blueprint Illustration"
+              format={"avif"}
+            />
+          )
+        }
+      </div>
 
-    <div class="relative right-12 overflow-hidden rounded-xl shadow-xl">
-      {
-        product.data.blueprints.second && (
-          <Image
-            src={product.data.blueprints.second}
-            class="h-full w-full object-cover object-center"
-            alt="Blueprint Illustration"
-            format={"avif"}
-          />
-        )
-      }
+      <div class="relative right-12 overflow-hidden rounded-xl shadow-xl">
+        {
+          product.data.blueprints.second && (
+            <Image
+              src={product.data.blueprints.second}
+              class="h-full w-full object-cover object-center"
+              alt="Blueprint Illustration"
+              format={"avif"}
+            />
+          )
+        }
+      </div>
     </div>
   </div>
-</div>
+</MainLayout>
+  <script is:inline src="/scripts/vendor/gsap/gsap.min.js"></script>
+  <script>
+    window.addEventListener("load", () => {
+      if (window.gsap) {
+        const gsap = window.gsap;
+        gsap.set("#fadeText", {
+          autoAlpha: 0,
+          y: 50,
+          willChange: "transform, opacity",
+        });
+        gsap.set("#fadeInUp", {
+          autoAlpha: 0,
+          y: 50,
+          willChange: "transform, opacity",
+        });
+        gsap.set("#fadeInMoveRight", {
+          autoAlpha: 0,
+          x: 300,
+          willChange: "transform, opacity",
+        });
 
-<script is:inline src="/scripts/vendor/gsap/gsap.min.js"></script>
-<script>
-  window.addEventListener("load", () => {
-    if (window.gsap) {
-      const gsap = window.gsap;
-      gsap.set("#fadeText", {
-        autoAlpha: 0,
-        y: 50,
-        willChange: "transform, opacity",
-      });
-      gsap.set("#fadeInUp", {
-        autoAlpha: 0,
-        y: 50,
-        willChange: "transform, opacity",
-      });
-      gsap.set("#fadeInMoveRight", {
-        autoAlpha: 0,
-        x: 300,
-        willChange: "transform, opacity",
-      });
+        let timeline = gsap.timeline({ defaults: { overwrite: "auto" } });
 
-      let timeline = gsap.timeline({ defaults: { overwrite: "auto" } });
+        timeline.to("#fadeText", {
+          duration: 1.5,
+          autoAlpha: 1,
+          y: 0,
+          delay: 1,
+          ease: "power2.out",
+        });
 
-      timeline.to("#fadeText", {
-        duration: 1.5,
-        autoAlpha: 1,
-        y: 0,
-        delay: 1,
-        ease: "power2.out",
-      });
-
-      timeline.to(
-        "#fadeInUp",
-        { duration: 1.5, autoAlpha: 1, y: 0, ease: "power2.out" },
-        "-=1.2"
-      );
-
-      timeline.to(
-        "#fadeInMoveRight",
-        { duration: 1.5, autoAlpha: 1, x: 0, ease: "power2.inOut" },
-        "-=1.4"
-      );
-
-      timeline.to("#overlay", { duration: 1, autoAlpha: 0, delay: 0.2 });
-    }
-  });
-</script>
-<script>
-  document.addEventListener("DOMContentLoaded", function () {
-    function setButtonInactive(btn: any, activeButton: any) {
-      if (btn !== activeButton) {
-        btn.classList.remove(
-          "active",
-          "bg-neutral-100",
-          "hover:border-transparent",
-          "dark:bg-white/[.05]"
+        timeline.to(
+          "#fadeInUp",
+          { duration: 1.5, autoAlpha: 1, y: 0, ease: "power2.out" },
+          "-=1.2",
         );
 
-        const tabId = btn.getAttribute("data-target");
+        timeline.to(
+          "#fadeInMoveRight",
+          { duration: 1.5, autoAlpha: 1, x: 0, ease: "power2.inOut" },
+          "-=1.4",
+        );
+
+        timeline.to("#overlay", { duration: 1, autoAlpha: 0, delay: 0.2 });
+      }
+    });
+  </script>
+  <script>
+    document.addEventListener("DOMContentLoaded", function () {
+      function setButtonInactive(btn: any, activeButton: any) {
+        if (btn !== activeButton) {
+          btn.classList.remove(
+            "active",
+            "bg-neutral-100",
+            "hover:border-transparent",
+            "dark:bg-white/[.05]",
+          );
+
+          const tabId = btn.getAttribute("data-target");
+          if (tabId) {
+            const contentElement = document.querySelector(tabId);
+            if (contentElement) {
+              contentElement.classList.add("hidden");
+            }
+          }
+
+          changeHeadingStyle(
+            btn,
+            ["text-neutral-800", "dark:text-neutral-200"],
+            ["text-orange-400", "dark:text-orange-300"],
+          );
+        }
+      }
+
+      function activateButton(button: any) {
+        button.classList.add(
+          "active",
+          "bg-neutral-100",
+          ",hover:border-transparent",
+          "dark:bg-white/[.05]",
+        );
+
+        const tabId = button.getAttribute("data-target");
         if (tabId) {
-          const contentElement = document.querySelector(tabId);
-          if (contentElement) {
-            contentElement.classList.add("hidden");
+          const contentElementToShow = document.querySelector(tabId);
+          if (contentElementToShow) {
+            contentElementToShow.classList.remove("hidden");
           }
         }
 
         changeHeadingStyle(
-          btn,
+          button,
+          ["text-orange-400", "dark:text-orange-300"],
           ["text-neutral-800", "dark:text-neutral-200"],
-          ["text-orange-400", "dark:text-orange-300"]
         );
       }
-    }
 
-    function activateButton(button: any) {
-      button.classList.add(
-        "active",
-        "bg-neutral-100",
-        ",hover:border-transparent",
-        "dark:bg-white/[.05]"
-      );
-
-      const tabId = button.getAttribute("data-target");
-      if (tabId) {
-        const contentElementToShow = document.querySelector(tabId);
-        if (contentElementToShow) {
-          contentElementToShow.classList.remove("hidden");
+      function changeHeadingStyle(
+        button: any,
+        addClasses: any,
+        removeClasses: any,
+      ) {
+        let heading = button.querySelector("span");
+        if (heading) {
+          heading.classList.remove(...removeClasses);
+          heading.classList.add(...addClasses);
         }
       }
 
-      changeHeadingStyle(
-        button,
-        ["text-orange-400", "dark:text-orange-300"],
-        ["text-neutral-800", "dark:text-neutral-200"]
-      );
-    }
+      const tabButtons = document.querySelectorAll("[data-target]");
 
-    function changeHeadingStyle(
-      button: any,
-      addClasses: any,
-      removeClasses: any
-    ) {
-      let heading = button.querySelector("span");
-      if (heading) {
-        heading.classList.remove(...removeClasses);
-        heading.classList.add(...addClasses);
+      if (tabButtons.length > 0) {
+        changeHeadingStyle(
+          tabButtons[0],
+          ["text-orange-400", "dark:text-orange-300"],
+          [],
+        );
       }
-    }
 
-    const tabButtons = document.querySelectorAll("[data-target]");
-
-    if (tabButtons.length > 0) {
-      changeHeadingStyle(
-        tabButtons[0],
-        ["text-orange-400", "dark:text-orange-300"],
-        []
-      );
-    }
-
-    tabButtons.forEach((button) => {
-      button.addEventListener("click", () => {
-        tabButtons.forEach((btn) => setButtonInactive(btn, button));
-        activateButton(button);
+      tabButtons.forEach((button) => {
+        button.addEventListener("click", () => {
+          tabButtons.forEach((btn) => setButtonInactive(btn, button));
+          activateButton(button);
+        });
       });
     });
-  });
-</script>
+  </script>
\ No newline at end of file