From 2e0b9c97af457da5c6afda611d48e59047d4cdb8 Mon Sep 17 00:00:00 2001
From: JJ <nicetry@noemail.com>
Date: Mon, 31 Mar 2025 21:08:41 +0100
Subject: Basic AI functionality

---
 static/images/bars.svg  |  2 +-
 static/scripts/index.js | 57 +++++++++++++++++++++++++++++++++++++++++--------
 static/style/style.css  |  8 +++++++
 3 files changed, 57 insertions(+), 10 deletions(-)

(limited to 'static')

diff --git a/static/images/bars.svg b/static/images/bars.svg
index 64dd5a8..8ce0f06 100644
--- a/static/images/bars.svg
+++ b/static/images/bars.svg
@@ -1,4 +1,4 @@
-<svg width="16" height="16" viewBox="0 0 135 140" xmlns="http://www.w3.org/2000/svg" fill="#fff">
+<svg width="16" height="16" viewBox="0 0 135 140" xmlns="http://www.w3.org/2000/svg" fill="#1d1f27">
     <rect y="10" width="15" height="120" rx="6">
         <animate attributeName="height"
              begin="0.5s" dur="1s"
diff --git a/static/scripts/index.js b/static/scripts/index.js
index 65c3c12..b1b006d 100644
--- a/static/scripts/index.js
+++ b/static/scripts/index.js
@@ -1,11 +1,50 @@
-const modal = document.querySelector("dialog");
-const showModalBtn = document.querySelector("#show-modal");
-const closeModalBtn = document.querySelector("#close-modal");
+// const modal = document.querySelector("dialog");
+const showModalBtns = document.querySelectorAll(".show-modal");
+const closeModalBtns = document.querySelectorAll(".close-modal");
+const clipboard = document.querySelector("#copy-ingredients");
 
-showModalBtn.addEventListener("click", () => {
-  modal.showModal();
-});
+if(clipboard) {
+  clipboard.addEventListener("click", () => {
+
+    // Copy data to clipboard
+    const ingredientsContent = document.querySelector("#ingredients").textContent.trim();
+    const contentArr = ingredientsContent.split("\n");
+    const ingredientsString = contentArr.map((el) => {
+       if(el.trim() == "") return;
+       else return el.trim();
+    }).join("\n")
+    navigator.clipboard.writeText(ingredientsString);
+
+    // Show success message momentarily
+    clipboard.parentElement.insertAdjacentHTML("afterend", "<span id='copied-message'> ingredients copied!</span>");
+  
+    setTimeout(() => {
+       document.querySelector("#copied-message").remove(); 
+    }, 2000)
+  })
+}
+
+
+// Open and close modals on /account page
+if(showModalBtns){
+  showModalBtns.forEach((btn) => {
+    btn.addEventListener("click", () => {
+
+      // Open dialog box
+      btn.nextElementSibling.showModal();
+
+    })
+  })
+}
+
+if(closeModalBtns){
+  closeModalBtns.forEach((btn) => {
+    btn.addEventListener("click", () => {
+
+      // Open dialog box
+      btn.parentNode.close();
+
+    })
+  })
+}
 
-closeModalBtn.addEventListener("click", () => {
-  modal.close();
-});
diff --git a/static/style/style.css b/static/style/style.css
index 748e8dd..9f92d77 100644
--- a/static/style/style.css
+++ b/static/style/style.css
@@ -16,6 +16,14 @@
   color: var(--success);
 }
 
+.cursor {
+  cursor: pointer;
+}
+
+.inline-block {
+  display: inline-block;
+}
+
 body,
 html {
   min-height: 100%;
-- 
cgit v1.2.3