BiryaniHubflaskhema

Runtime error

App Files Files Community

lokeshloki143 commited on Apr 24

Commit

e89d19d

verified ·

1 Parent(s): aa19fd3

Update templates/customer_details.html

Browse files

Files changed (1) hide show

templates/customer_details.html +252 -247

templates/customer_details.html CHANGED Viewed

@@ -1,261 +1,266 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>User Profile</title>
-    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
-    <style>
-        body {
-            background-color: #FDF4E3;
         }
-        .back-to-menu {
-            display: block;
-            margin: 30px auto 10px auto;
-            padding: 10px 20px;
-            background-color: #ff5722;
-            color: #ffffff;
-            border: none;
-            border-radius: 25px;
-            font-size: 1rem;
-            font-weight: bold;
-            text-align: center;
-            text-decoration: none;
-            width: 100%;
-            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;
-            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;
-            top: 50%;
-            transform: translateY(-50%);
-            background: none;
-            border: none;
-            color: #007bff;
-            font-size: 1.2rem;
-            cursor: pointer;
-        }
-        .update-btn {
-            background-color: #0FAA39;
-            color: white;
-            border: none;
-            border-radius: 5px;
-            padding: 10px 20px;
-            font-size: 1rem;
-            cursor: pointer;
-            width: 20%;
-            font-weight: bold; /* Making the button text bold */
-        }
-        .update-btn:hover {
-            background-color: #0f8e29;
-        }
-        .edit-btn {
-            background-color: #0FAA39;
-            color: white;
-            border: none;
-            border-radius: 5px;
-            padding: 10px 20px;
-            font-size: 1rem;
-            cursor: pointer;
-            width: 20%;
-            font-weight: bold; /* Making the button text bold */
-        }
-        .edit-btn:hover {
-            background-color: #0f8e29;
-        }
-/* Button container adjustments */
-.button-container {
-    display: flex;
-    justify-content: space-between;
-    gap: 10px; /* Add space between buttons */
-}
-        /* 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 text color inside input fields to gray */
-        input[type="text"], input[type="email"], input[type="number"], .form-control {
-            color: #808080; /* Change text color to gray */
-        }
-        /* Change color for the headings like Name, Email, Phone, Referral Code, Reward Points */
-        .form-label {
-            color: #1C1C1C; /* Change heading text color */
-        }
-        h1 {
-            color: #1C1C1C; /* Change User Profile heading color */
-            font-size: 24px; /* Change font size of 'User Profile' */
-        }
-    </style>
-    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
-    <script>
-        function enableEditField(fieldId) {
-            var field = document.getElementById(fieldId);
-            field.removeAttribute("readonly");
-            field.classList.add("editable");
-            field.focus();
-        }
-        function updateProfile(event) {
-            event.preventDefault();
-            var formData = $('#profileForm').serialize();
-            $.ajax({
-                type: "POST",
-                url: "/user/update_profile",
-                data: formData,
-                success: function(response) {
-                    if (response.status === "success") {
-                        alert(response.message);
-                        location.reload();
-                    } else {
-                        alert(response.message);
-                    }
-                },
-                error: function() {
-                    alert("An error occurred while updating the profile.");
-                }
-            });
-        }
-        function editProfileFields() {
-            document.getElementById('customerName').removeAttribute('readonly');
-            document.getElementById('email').removeAttribute('readonly');
-            document.getElementById('phone').removeAttribute('readonly');
-            document.getElementById('customerName').classList.add('editable');
-            document.getElementById('email').classList.add('editable');
-            document.getElementById('phone').classList.add('editable');
-        }
-        function copyReferralCode() {
-            var referralCode = document.getElementById('referralCode');
-            referralCode.select();
-            document.execCommand('copy');
-            alert('Referral Code Copied!');
-        }
-    </script>
 </head>
-<body>
-    <div class="container mt-4">
-        <h1>User Profile</h1>
-        {% with messages = get_flashed_messages(with_categories=true) %}
-            {% if messages %}
-                <div class="alert alert-{{ messages[0][0] }}">
-                    {{ messages[0][1] }}
-                </div>
-            {% endif %}
-        {% endwith %}
-        <div class="card">
-            <div class="card-body">
-                <form id="profileForm" method="POST" onsubmit="updateProfile(event)">
-                    <div class="mb-3">
-                        <label for="customerName" class="form-label"><strong>Name:</strong></label>
-                        <div class="input-group">
-                            <input type="text" id="customerName" name="customerName" class="form-control" value="{{ customer['name'] }}" readonly>
-                        </div>
-                    </div>
-                    <div class="mb-3">
-                        <label for="email" class="form-label"><strong>Email:</strong></label>
-                        <div class="input-group">
-                            <input type="email" id="email" name="email" class="form-control" value="{{ customer['email'] }}" readonly>
-                        </div>
-                    </div>
-                    <div class="mb-3">
-                        <label for="phone" class="form-label"><strong>Phone:</strong></label>
-                        <div class="input-group">
-                            <input type="text" id="phone" name="phone" class="form-control" value="{{ customer['phone'] }}" readonly>
-                        </div>
-                    </div>
-                    <div class="mb-3">
-                        <label for="referralCode" class="form-label"><strong>Referral Code:</strong></label>
-                        <div class="input-group">
-                            <input type="text" id="referralCode" name="referralCode" class="form-control" value="{{ customer['referral_code'] }}" readonly>
-                            <button type="button" class="copy-btn" onclick="copyReferralCode()">📋</button>
-                        </div>
-                    </div>
-                    <div class="mb-3">
-                        <label for="rewardPoints" class="form-label"><strong>Reward Points:</strong></label>
-                        <input type="text" id="rewardPoints" name="rewardPoints" class="form-control" value="{{ customer['reward_points'] }}" readonly>
-                    </div>
-                    <!-- Flex container for Edit and Update buttons -->
-                    <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>
-        <a href="/menu" class="back-to-menu">Back to Menu</a>
-    </div>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>User Profile</title>
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
+  <style>
+    body {
+      background-color: #FDF4E3;
+      margin: 0;
+      padding: 0;
+      position: relative;
+      min-height: 100vh;
+    }
+    /* Top orange bar */
+    .top-bar {
+      background-color: #FF6F3C;
+      width: 100%;
+      padding: 10px 15px;
+      display: flex;
+      align-items: center;
+      box-sizing: border-box;
+    }
+    .back-link {
+      display: flex;
+      align-items: center;
+      text-decoration: none;
+    }
+    .back-arrow {
+      font-size: 1.8rem;
+      color: #000; /* Dark black */
+      font-weight: bold;
+    }
+    .back-label {
+      margin-left: 10px;
+      color: white;
+      font-weight: bold;
+      font-size: 1rem;
+    }
+    h1 {
+      color: #1C1C1C;
+      font-size: 1.2rem;
+      margin: 30px 0 15px; /* Default margin for larger screens */
+      text-align: center;
+    }
+    /* For mobile view */
+    @media (max-width: 576px) {
+      h1 {
+        margin-top: 2px; /* Reduced top margin for mobile */
+      }
+    }
+    .form-control {
+      border: 1px solid #333;
+      color: #808080;
+      background-color: #F9F9F9;
+    }
+    #referralCode, #rewardPoints {
+      color: #000 !important;
+    }
+    .form-label {
+      color: #000 !important;
+      font-size: 0.8rem;
+    }
+    input.form-control[readonly], textarea.form-control[readonly] {
+      color: #808080;
+      background-color: #F9F9F9 !important;
+    }
+    input.form-control.editable, textarea.form-control.editable {
+      background-color: #FFF8E1 !important;
+      color: #000 !important;
+    }
+    .input-group {
+      position: relative;
+    }
+    .pen-icon {
+      position: absolute;
+      right: 5px;
+      top: 50%;
+      transform: translateY(-50%);
+      cursor: pointer;
+      font-size: 1.2rem;
+      color: black;
+    }
+    .pen-icon.editing {
+      color: #333;
+    }
+    .button-container {
+      display: flex;
+      flex-direction: column;
+      margin-top: 10px;
+    }
+    /* Updated label button style */
+    .orange-label {
+      background-color: #ffffff;
+      color: white;
+      padding: 8px 16px;
+      border-radius: 5px;
+      font-weight: bold;
+      text-align: center;
+      margin-top: 20px;
+      width: 100%; /* Ensure the label is full width */
+      position: absolute;
+      bottom: 0;
+    }
+    .update-btn {
+      background-color: #0FAA39; /* Green button */
+      color: white;
+      border: none;
+      border-radius: 5px;
+      padding: 5px 12px;
+      font-size: 0.8rem;
+      font-weight: bold;
+      width: 60%; /* Full width inside orange label */
+    }
+    .update-btn:hover {
+      background-color: #0f8e29;
+    }
+    @media (max-width: 576px) {
+      .container {
+        padding: 10px;
+      }
+      .update-btn {
+        width: 100%;
+      }
+      .form-label {
+        font-size: 0.75rem;
+      }
+      .form-control {
+        font-size: 0.8rem;
+      }
+    }
+  </style>
+  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+  <script>
+    function toggleEditableField(fieldId, penIcon) {
+      var input = document.getElementById(fieldId);
+      var icon = document.getElementById(penIcon);
+      if (input.hasAttribute('readonly')) {
+        input.removeAttribute('readonly');
+        input.classList.add('editable');
+        icon.classList.add('editing');
+      } else {
+        input.setAttribute('readonly', true);
+        input.classList.remove('editable');
+        icon.classList.remove('editing');
+      }
+    }
+    function updateProfile(event) {
+      event.preventDefault();
+      var formData = $('#profileForm').serialize();
+      $.ajax({
+        type: "POST",
+        url: "/update_profile",  // Update this URL with your back-end processing URL
+        data: formData,
+        success: function(response) {
+          if (response.status === "success") {
+            alert(response.message);
+            location.reload();
+          } else {
+            alert(response.message);
+          }
+        },
+        error: function() {
+          alert("An error occurred while updating the profile.");
         }
+      });
+    }
+    function copyReferralCode() {
+      var referralInput = document.getElementById("referralCode");
+      referralInput.select();
+      referralInput.setSelectionRange(0, 99999);
+      document.execCommand("copy");
+      alert("Referral code copied: " + referralInput.value);
+    }
+  </script>
 </head>
+<body>
+  <!-- Top Orange Label Bar -->
+  <div class="top-bar">
+    <a href="/menu" class="back-link">
+      <span class="back-arrow">&#10216;</span>
+      <span class="back-label">Back to Menu</span>
+    </a>
+  </div>
+  <!-- Main Container -->
+  <div class="container mt-4">
+    <h1>User Profile</h1>
+    {% with messages = get_flashed_messages(with_categories=true) %}
+    {% if messages %}
+    <div class="alert alert-{{ messages[0][0] }}">
+      {{ messages[0][1] }}
+    </div>
+    {% endif %}
+    {% endwith %}
+    <div class="card">
+      <div class="card-body">
+        <form id="profileForm" method="POST" onsubmit="updateProfile(event)">
+          <!-- Name -->
+          <div class="mb-3">
+            <label for="customerName" class="form-label"><strong>Name:</strong></label>
+            <div class="input-group">
+              <input type="text" id="customerName" name="customerName" class="form-control" value="{{ customer['name'] }}" readonly>
+              <span id="pen-icon-customerName" class="pen-icon" onclick="toggleEditableField('customerName', 'pen-icon-customerName')">
+                <i class="fas fa-pen"></i>
+              </span>
+            </div>
+          </div>
+          <!-- Email -->
+          <div class="mb-3">
+            <label for="email" class="form-label"><strong>Email:</strong></label>
+            <div class="input-group">
+              <input type="email" id="email" name="email" class="form-control" value="{{ customer['email'] }}" readonly>
+              <span id="pen-icon-email" class="pen-icon" onclick="toggleEditableField('email', 'pen-icon-email')">
+                <i class="fas fa-pen"></i>
+              </span>
+            </div>
+          </div>
+          <!-- Phone -->
+          <div class="mb-3">
+            <label for="phone" class="form-label"><strong>Phone:</strong></label>
+            <div class="input-group">
+              <input type="text" id="phone" name="phone" class="form-control" value="{{ customer['phone'] }}" readonly>
+              <span id="pen-icon-phone" class="pen-icon" onclick="toggleEditableField('phone', 'pen-icon-phone')">
+                <i class="fas fa-pen"></i>
+              </span>
+            </div>
+          </div>
+          <!-- Referral Code -->
+          <div class="mb-3">
+            <label for="referralCode" class="form-label"><strong>Referral Code:</strong></label>
+            <div class="input-group">
+              <input type="text" id="referralCode" name="referralCode" class="form-control" value="{{ customer['referral_code'] }}" readonly>
+              <button type="button" class="copy-btn" onclick="copyReferralCode()">📋</button>
+            </div>
+          </div>
+          <!-- Reward Points -->
+          <div class="mb-3">
+            <label for="rewardPoints" class="form-label"><strong>Reward Points:</strong></label>
+            <input type="text" id="rewardPoints" name="rewardPoints" class="form-control" value="{{ customer['reward_points'] }}" readonly>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+  <!-- Orange Label with Update Profile Button at the Bottom -->
+  <div class="orange-label">
+    <button type="submit" class="update-btn" form="profileForm">Update Profile</button>
+  </div>
 </body>
 </html>