From 672688fa5bc0b39182b0290e538bfcde25ea968d Mon Sep 17 00:00:00 2001
From: Gabani yash <127788321+Yashgabani845@users.noreply.github.com>
Date: Mon, 11 Nov 2024 18:11:25 +0530
Subject: [PATCH] Confirmation model added (#4045)

---
 index.html    |  8 ++++----
 js/toolbar.js | 30 ++++++++++++++++++++++++++++++
 2 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 220a2ecf07..e84b041745 100644
--- a/index.html
+++ b/index.html
@@ -874,10 +874,10 @@
                     <li><a id="ar"></a></li>
                     <li><a id="he"></a></li>
                 </ul>
-
-                <ul id="newdropdown" class="dropdown-content">
-                    <li><a id="new-project"></a></li>
-                </ul>
+                <div id="modal-container" style="display: none;z-index: 999;">
+                    <ul id="newdropdown" class="dropdown-content" style="padding: 24px;">
+                    </ul>
+                </div>
  
            <script>  
                 var elem = document.documentElement;
diff --git a/js/toolbar.js b/js/toolbar.js
index bd8c1a5dc1..97bcefea70 100644
--- a/js/toolbar.js
+++ b/js/toolbar.js
@@ -967,3 +967,33 @@ class Toolbar {
         }
     };
 }
+function renderNewProjectConfirmation() {
+    const modalContainer = document.getElementById("modal-container");
+    const newDropdown = document.getElementById("newdropdown");
+    newDropdown.innerHTML = '';
+    const title = document.createElement("div");
+    title.innerHTML = `<h2 style="color: #0066FF; font-size: 24px; text-align: left; margin: 0;">${_("New Project")}</h2>`;
+    newDropdown.appendChild(title);
+    const confirmationMessage = document.createElement("div");
+    confirmationMessage.innerHTML = `<div id="confirmation-message" style="color: #666666; font-size: 16px; margin-bottom: 24px; text-align: left;">${_("Are you sure you want to create a new project?")}</div>`;
+    newDropdown.appendChild(confirmationMessage);
+    const confirmationButtonLi = document.createElement("li");
+    confirmationButtonLi.style.textAlign = "center";
+    confirmationButtonLi.style.width = "fit-content";
+    const confirmationButton = document.createElement("a");
+    confirmationButton.id = "new-project";
+    confirmationButton.style.display = "inline-block";
+    confirmationButton.style.backgroundColor = "#2196F3";
+    confirmationButton.style.color = "white";
+    confirmationButton.style.textDecoration = "none";
+    confirmationButton.style.borderRadius = "4px";
+    confirmationButton.style.fontWeight = "bold";
+    confirmationButton.innerHTML = _("Confirm");
+    confirmationButtonLi.appendChild(confirmationButton);
+    newDropdown.appendChild(confirmationButtonLi);
+    modalContainer.style.display = "flex";
+    confirmationButton.onclick = () => {
+        modalContainer.style.display = "none";
+    };
+}
+renderNewProjectConfirmation();