Merge branch 'main' into enhancement/scrollbar

mdtausifiqbal · Oct 17, 2023 · 2dfc840 · 2dfc840
2 parents f6786be + 7f8f82e
commit 2dfc840
Show file tree

Hide file tree

Showing 3 changed files with 229 additions and 0 deletions.
diff --git a/css/style.css b/css/style.css
@@ -592,6 +592,7 @@ a button {
 }
 
 .dateBox {
+
     padding: 5px 10px;
     border-radius: 50px;
     border: 0;
@@ -631,4 +632,97 @@ a button {
 
 .navProgressbar {
     display: flex;
+
+
+  padding: 5px 10px;
+  border-radius: 50px;
+  border: 0;
+  background-color: white;
+  box-shadow: rgb(0 0 0 / 5%) 0 0 8px;
+  letter-spacing: 1.5px;
+  font-size: 15px;
+  width: min-content;
+  margin-bottom: 10px;
+  margin-left: 5px;
+
+ }
+ .HealthTag {
+  padding: 5px 10px;
+  border-radius: 50px;
+  border: 0;
+
+  box-shadow: rgb(0 0 0 / 5%) 0 0 8px;
+  font-size: 15px;
+  width: min-content;
+  margin-bottom: 10px;
+  margin-left: 5px;
+
+ }
+
+ .hrPopup { 
+
+  border-radius: 25px;
+  border: none;
+  width: 100%;
+  margin: 0;
+  border-top: 3px solid #FFDBAA;
+  border-bottom: 4px solid #FFDBAA;
+} 
+
+.pPopup{
+  margin-top: 10px;
+  text-align: left;
+}
+
+.navProgressbar{
+  display: flex;
+
+}
+
+.confirmationModal{
+  display: flex;
+  display: none;
+  background-color: rgba(0, 0, 0, 0.4);
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 9999;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.confirmationModal > div {
+
+  background-color: white;
+  border-radius: 10px;
+  padding: 20px;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
+  position: relative;
+  top: -50px;
+  z-index: 10000;
+  max-width: 500px;
+  max-height: 80%;
+  overflow: auto;
+}
+
+.modalButtons{
+  display:flex;
+  justify-content: end;
+}
+
+.modalButtons button{
+  margin-left: 10px;
+  background-color: #b40c57;
+  border: none;
+  color: white;
+  padding: 10px 20px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  border-radius: 5px;
+
 }
diff --git a/index.html b/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html>
+
     <head>
         <meta charset="UTF-8" />
         <link rel="Shortcut Icon" type="image/ico" href="images/favicon.svg" />
@@ -76,6 +77,79 @@
                     Add Your Record
                 </button>
             </form>
+
+
+
+<head>
+  <meta charset="UTF-8">
+  <link rel="Shortcut Icon" type="image/ico" href="images/favicon.svg">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+
+  <title>MedStats</title>
+
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
+    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+  <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
+
+  <link rel="stylesheet" href="./css/style.css"> <!-- Your custom CSS file -->
+
+  <link rel="stylesheet" href="./css/verticalScroll.css">
+
+  <link rel="stylesheet" href="./css/scrollTop.css">
+
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link
+    href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap"
+    rel="stylesheet">
+
+</head>
+
+<body>
+
+  <!-- NavBar -->
+  <nav id="navbar" class="navbar navbar-expand-lg navbar-dark fixed-top">
+    <a class="navbar-brand mb-1 nav-heading" href="/index.html" style="font-size: 28px;">
+      <!-- <img src="./medicalLogo.png" /> -->
+      <i class="fa fa-stethoscope" style="font-size:30px;color:white"></i>
+      <img src="./images/logo-color.jpeg" alt="" width="130px">
+    </a>
+    <ul>
+      <li>Home</li>
+      <li>About</li>
+
+      <li><a href="contactUs.html">Contact Us</a></li>
+      <li><a href="login.html" style="color: white; text-decoration: none;">Login</a></li>
+    </ul>
+  </nav>
+  <!-- Section for Adding Health Records -->
+  <div class="container pt-5 mt-5 my-3">
+    <br>
+    <p class="text-center" id="subHead1"><b>Personal Health Journal</b></p>
+    <hr>
+
+    <!-- Modify your form to include unique IDs for input fields -->
+    <form id="MedicalForm">
+      <div class="form-group row">
+        <label for="PatientNameInput" class="col-sm-2 col-form-label">Patient Name:</label>
+        <div class="col-sm-10 position-relative">
+          <input type="text" class="form-control" id="PatientNameInput" placeholder="Patient Name">
+        </div>
+      </div>
+      <div class="form-group row">
+        <label for="SymptomsInput" class="col-sm-2 col-form-label">Symptoms :</label>
+        <div class="col-sm-10 position-relative">
+          <input type="text" class="form-control" id="SymptomsInput" placeholder="Symptoms">
+        </div>
+      </div>
+      <div class="form-group row">
+        <label for="MedicationsInput" class="col-sm-2 col-form-label">Medications:</label>
+        <div class="col-sm-10">
+          <input type="text" class="form-control" id="MedicationsInput" placeholder="Medications">
+
         </div>
 
         <!-- Section for Progress Bar -->
@@ -201,13 +275,36 @@ <h2 style="color: white; font-size: large">Check your progress</h2>
     <!-- Repeat the above code for each recorded note -->
   </div>
 
+
         <footer>
             <p class="text-center1">
                 Made by Kiran Amin Panjwani <br />
                 This Project is participating in Hacktoberfest. Copyright © <span id="current-year"></span>. <br /><br />
             </p>
         </footer>
 
+  <!-- Confirmation Modal -->
+
+  <div id="confirmationModal" class="confirmationModal">
+    <div class="modal-content">
+      <p>Are you sure you want to delete this record?</p>
+      <div class="modalButtons">
+
+        <button id="confirmDelete">Delete</button>
+        <button id="cancelDelete">Cancel</button>
+      </div>
+    </div>
+  </div>
+
+  <footer>
+    <p class="text-center1">
+      Made by Kiran Amin Panjwani <br>
+      This Project is participating in Hacktoberfest. Copyright © <span id="current-year"></span>
+      </br></br>
+    </p>
+  </footer>
+
+
   <!-- Scroll to top button start -->
   <button onclick="scrollToTop()" id="backToTopBtn" title="Go to top">
     <i class="icon-chevron-up" id="icon-up"></i>

diff --git a/js/script.js b/js/script.js
@@ -81,6 +81,7 @@ document.addEventListener("DOMContentLoaded", function () {
             <h4 class="record-status">Status: Poor</h4>
         </div>
     `;
+
         }
         // Append the new record to the record container
         document.querySelector(".record-container").appendChild(recordElement);
@@ -169,5 +170,42 @@ document.addEventListener("DOMContentLoaded", function () {
         document.getElementById("PatientNameInput").value = "";
         document.getElementById("SymptomsInput").value = "";
         document.getElementById("MedicationsInput").value = "";
+
+    }
+    // Append the new record to the record container
+    document.querySelector(".record-container").appendChild(recordElement);
+
+    const closeButton = recordElement.querySelector("#close");
+    const confirmModal = document.getElementById('confirmationModal');
+
+    // Function to open confirm modal
+    function openConfirmModal(){
+      return new Promise((resolve, reject) => {
+        document.getElementById('confirmDelete').addEventListener('click', function(){         
+          confirmModal.style.display= 'none';
+          resolve(true);
+        });
+        document.getElementById('cancelDelete').addEventListener('click', function(){
+          confirmModal.style.display= 'none';
+          resolve(false);
+        });
+      });
+    }
+    closeButton.addEventListener("click", async function () {
+
+      confirmModal.style.display= 'flex';
+      const result = await openConfirmModal();
+      console.log(result)
+      if(result){
+        const recordId = recordElement.getAttribute("data-record-id");
+        // Find the record element with the matching identifier and remove it
+        const recordToDelete = document.querySelector(`[data-record-id="${recordId}"]`);
+        if (recordToDelete) {
+          document.querySelector(".record-container").removeChild(recordToDelete);
+        }
+      }
+
+
+
     });
 });