change how the form work

static/css/card.css

@@ -43,3 +43,21 @@
   font-size: 0.8rem; 
   margin: 5px 0; 
 }
+
+dialog{
+  border:none;
+  border-radius: 8px;
+  padding: 20px;
+  width: 300px;
+  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
+}
+
+dialog::backdrop {
+  background: rgba(0,0,0,0.5);
+}
+
+form  {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}

static/js/main.js

@@ -0,0 +1,12 @@
+// open log button
+const modal = document.getElementById("#formModal");
+const openbtn = document.getElementById("#openForm");
+const closebtn = document.getElementsByClassName("#closeForm");
+
+openbtn.addEventListener("click", function() {
+    modal.showModal();
+});
+
+closebtn.addEventListener("click", function() {
+    modal.close();
+}) ;