Confirmation model added (#4045)

Author: Yashgabani845

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;

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();