Update templates/customer_details.html

templates/customer_details.html

@@ -7,8 +7,9 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
     <style>
        body {
-        background-color: #FDF4E3;
-    }
+            background-color: #FDF4E3;
+        }
+
         .back-to-menu {
             display: block;
             margin: 30px auto 10px auto;
@@ -25,33 +26,39 @@
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
             transition: background-color 0.3s ease;
         }
+
         .back-to-menu:hover {
             background-color: #e64a19;
             text-decoration: none;
         }
+
         .editable {
             background-color: #f0f8ff; /* Light blue when edited */
         }
+
         .input-group {
             position: relative;
         }
+
         .btn-change {
             position: absolute;
             right: 10px;
             top: 50%;
             transform: translateY(-50%);
             background-color: #ffffff;
-            color: #0FAA39; /* Green text color */
-            border: none; /* No border */
+            color: #0FAA39;
+            border: none;
             border-radius: 5px;
             padding: 5px 10px;
             cursor: pointer;
             font-size: 0.9rem;
         }
+
         .btn-change:hover {
             background-color: #ffffff;
             color: #0FAA39;
         }
+
         .copy-btn {
             position: absolute;
             right: 10px;
@@ -63,6 +70,7 @@
             font-size: 1.2rem;
             cursor: pointer;
         }
+
         .update-btn {
             background-color: #0FAA39;
             color: white;
@@ -72,9 +80,11 @@
             font-size: 1rem;
             cursor: pointer;
         }
+
         .update-btn:hover {
             background-color: #0f8e29;
         }
+
         .edit-btn {
             background-color: #0FAA39;
             color: white;
@@ -83,13 +93,40 @@
             padding: 10px 20px;
             font-size: 1rem;
             cursor: pointer;
+            width: 100%;
         }
+
         .edit-btn:hover {
             background-color: #0f8e29;
         }
-           /* Change text color to #ff5722 */
-        h1, .form-label {
-        color: #ff5722;
+
+        /* Flexbox for equally spaced buttons */
+        .button-container {
+            display: flex;
+            justify-content: space-between;
+            margin-top: 20px;
+        }
+
+        /* Ensure both buttons have equal height and width */
+        .edit-btn, .update-btn {
+            flex: 1;
+            margin: 0 5px;
+            padding: 10px 20px;
+            font-size: 1rem;
+            cursor: pointer;
+            border-radius: 5px;
+            height: 50px; /* Equal height for both buttons */
+        }
+
+        /* Change font size for User Profile heading */
+        h1 {
+            font-size: 2rem;  /* Set font size to 2rem (32px) */
+            color:#6c757d; /* Set color for heading */
+        }
+
+        /* Gray color for fields and labels */
+        h1, .form-label, .form-control {
+            color: #6c757d; /* Set text color to gray */
         }
     </style>
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
@@ -124,7 +161,6 @@
         }
 
         function editProfileFields() {
-            // Making only editable fields editable (Excluding referralCode and rewardPoints)
             document.getElementById('customerName').removeAttribute('readonly');
             document.getElementById('email').removeAttribute('readonly');
             document.getElementById('phone').removeAttribute('readonly');
@@ -190,8 +226,10 @@
                         <input type="text" id="rewardPoints" name="rewardPoints" class="form-control" value="{{ customer['reward_points'] }}" readonly>
                     </div>
 
-                    <button type="button" class="edit-btn" onclick="editProfileFields()">Edit Profile</button>
-                    <button type="submit" class="update-btn">Update Profile</button>
+                    <div class="button-container">
+                        <button type="button" class="edit-btn" onclick="editProfileFields()">Edit Profile</button>
+                        <button type="submit" class="update-btn">Update Profile</button>
+                    </div>
                 </form>
             </div>
         </div>