Merge branch 'main' into cards-align

Anishkagupta04 · Jul 26, 2024 · 9e96338 · 9e96338
2 parents 80ea535 + 0f0831b
commit 9e96338
Show file tree

Hide file tree

Showing 32 changed files with 925 additions and 553 deletions.
diff --git a/Css-Files/Rateus.css b/Css-Files/Rateus.css
@@ -0,0 +1,266 @@
+/* Reset styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  /* Viewport meta tag for responsive design */
+  /* Ensure this meta tag is in your HTML <head> section */
+  /* <meta name="viewport" content="width=device-width, initial-scale=1.0"> */
+
+  /* General styles */
+  .feedback-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+    padding: 20px;
+    box-sizing: border-box;
+  }
+
+  .popup {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+  }
+
+  .popup-content {
+    background-color: #113435;
+    padding: 20px;
+    border-radius: 10px;
+    text-align: center;
+    max-width: 100%;
+    width: 80%;
+    box-sizing: border-box;
+  }
+
+  .popup-content a {
+    text-decoration: none;
+    color: white;
+  }
+
+  .popup-close {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    color: #01494b;
+    font-size: 24px;
+    cursor: pointer;
+  }
+
+  .popup h2 {
+    color: white;
+    font-size: 24px;
+  }
+
+  .popup p {
+    margin: 16px 0;
+    color: #ececec;
+  }
+
+  .popup img {
+    margin-top: 20px;
+  }
+
+  .popup-button {
+    background-color: #005253;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 16px;
+  }
+
+  .popup-button:hover {
+    background-color: #206b6c;
+    color: white;
+  }
+
+  /* Feedback form styles */
+  .feedback-form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+    animation: slideInFromBottom 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
+    transition: opacity 0.3s ease-in-out;
+    background-color: #3fbcc051;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(6, 130, 130, 0.1);
+    max-width: 100%;
+    width: 80%;
+    box-sizing: border-box;
+    opacity: 0;
+  }
+
+  .feedback-form h2 {
+    font-size: 28px;
+    margin-bottom: 15px;
+    text-align: center;
+    font-weight: 1000 !important;
+  }
+
+  .feedback-form p {
+    color: #d7d4d4;
+    font-size: 16px;
+    margin-bottom: 20px;
+    text-align: center;
+  }
+
+  .feedback-form .rating-container {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 2px;
+  }
+
+  .rating-container button {
+    font-size: 24px;
+    border: none;
+    background: none;
+    cursor: pointer;
+    color: grey;
+    transition: transform 0.3s ease, color 0.3s ease;
+  }
+
+  .rating-container button.filled {
+    color: yellow;
+    transform: scale(1.2);
+  }
+
+  .rating-container button:hover,
+  .rating-container button:hover ~ button {
+    transform: scale(1.1);
+  }
+
+  .feedback-form .rate-us {
+    text-align: center !important;
+    display: block;
+    margin-top: 0px;
+    width: 100%;
+    color: rgb(251, 250, 250);
+    margin-bottom: 10px;
+  }
+
+  .feedback-form button {
+    background: none;
+    border: none;
+    font-size: 25px;
+    cursor: pointer;
+    z-index: 1;
+    padding: 12px;
+    transition: transform 0.2s ease;
+  }
+
+  .feedback-form form {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .feedback-form label {
+    width: 100%;
+    text-align: left;
+    font-size: 14px;
+    margin-top: 9px;
+    font-weight: 600;
+    color: #fff;
+  }
+
+  .feedback-form input,
+  .feedback-form textarea {
+    margin-top: 10px;
+    padding: 12px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    font-size: 16px;
+    margin-bottom: 15px;
+    width: 100%;
+    box-sizing: border-box;
+    transition: all 0.3s ease;
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
+  }
+
+  .feedback-form input:focus,
+  .feedback-form textarea:focus {
+    outline: none;
+    border-color: #29888a;
+    box-shadow: 0 0 5px rgba(41, 136, 138, 0.5);
+  }
+
+  .feedback-form textarea {
+    resize: vertical;
+    min-height: 100px;
+    max-height: 300px;
+  }
+
+  .feedback-form button[type="submit"] {
+    background-color: hwb(181 16% 46%);
+    color: white;
+    border: none;
+    padding: 12px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 16px;
+    transition: background-color 0.3s ease, transform 0.2s ease;
+  }
+
+  .feedback-form button[type="submit"]:hover {
+    background-color: #1c5f5e;
+    transform: translateY(-2px);
+  }
+
+  .feedback-form button[type="submit"]:active {
+    transform: translateY(0);
+    background-color: #1c5f5e;
+  }
+
+  .feedback-form .form-group {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    margin-bottom: 15px;
+  }
+
+  /* Keyframes for animation */
+  @keyframes slideInFromBottom {
+    0% {
+      transform: translateY(50px);
+      opacity: 0;
+    }
+    60% {
+      transform: translateY(-10px);
+      opacity: 0.8;
+    }
+    80% {
+      transform: translateY(5px);
+      opacity: 0.9;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  /* Responsive adjustments for mobile screens */
+  @media (max-width: 768px) {
+    .feedback-form {
+      width: 100%;
+      padding: 15px;
+    }
+
+    .popup-content {
+      width: 100%;
+      padding: 15px;
+    }
+  }
+
diff --git a/Css-Files/bloodstyle.css b/Css-Files/bloodstyle.css
@@ -29,6 +29,7 @@ margin-top: -18px;
   color: #fff;
 }
  #topbar1 {
+  margin-top: 50px;
     height: 50px;
     font-size: 14px;
     transition: all 0.5s;
@@ -258,8 +259,8 @@ padding-top: 3rem;
 }
 @media (max-width: 992px){
     #topbar1 {
-        background: #022a2d;
-        height: 100px;
+        /* background: #022a2d;
+        height: 100px; */
         font-size: 14px;
         transition: all 0.5s;
         z-index: 996;

diff --git a/Css-Files/doctor.css b/Css-Files/doctor.css
@@ -68,9 +68,15 @@ header {
 
 .dates {
     display: flex;
+    flex-wrap: wrap; /* allow wrapping to next line */
+    font-size: 0.8em; /* reduce font size */
     gap: 10px;
 }
-
+@media (min-width: 700px) {
+    .dates {
+      flex-wrap: nowrap; /* don't wrap to next line */
+    }
+  }
 .date1, .date2, .date3, .date4, .date5, .date6, .date7, .date8, .date9, .date10, .date11, .date12 {
     background-color: #fff;
     padding: 10px;