Spaces:
Sleeping
Sleeping
| <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: 100%; | |
| 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: 100%; | |
| font-weight: bold; /* Making the button text bold */ | |
| } | |
| .edit-btn:hover { | |
| background-color: #0f8e29; | |
| } | |
| /* 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> | |