Hugging Face's logo

Spaces:
Swathi6
/
Biryanihub
Sleeping

App Files Community
Swathi6 commited on
Commit
051b72a
·
verified ·
1 Parent(s): 8818cc9

Create templates/customer_details.html

Browse files
Files changed (1) hide show
  1. templates/customer_details.html +228 -0
templates/customer_details.html ADDED
@@ -0,0 +1,228 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>User Profile</title>
7
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
8
+ <style>
9
+ body {
10
+ background-color: #FDF4E3;
11
+ }
12
+ .back-to-menu {
13
+ display: block;
14
+ margin: 30px auto 10px auto;
15
+ padding: 10px 20px;
16
+ background-color: #ff5722;
17
+ color: #ffffff;
18
+ border: none;
19
+ border-radius: 25px;
20
+ font-size: 1rem;
21
+ font-weight: bold;
22
+ text-align: center;
23
+ text-decoration: none;
24
+ width: 100%;
25
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
26
+ transition: background-color 0.3s ease;
27
+ }
28
+ .back-to-menu:hover {
29
+ background-color: #e64a19;
30
+ text-decoration: none;
31
+ }
32
+ .editable {
33
+ background-color: #f0f8ff; /* Light blue when edited */
34
+ }
35
+ .input-group {
36
+ position: relative;
37
+ }
38
+ .btn-change {
39
+ position: absolute;
40
+ right: 10px;
41
+ top: 50%;
42
+ transform: translateY(-50%);
43
+ background-color: #ffffff;
44
+ color: #0FAA39;
45
+ border: none;
46
+ border-radius: 5px;
47
+ padding: 5px 10px;
48
+ cursor: pointer;
49
+ font-size: 0.9rem;
50
+ }
51
+ .btn-change:hover {
52
+ background-color: #ffffff;
53
+ color: #0FAA39;
54
+ }
55
+ .copy-btn {
56
+ position: absolute;
57
+ right: 10px;
58
+ top: 50%;
59
+ transform: translateY(-50%);
60
+ background: none;
61
+ border: none;
62
+ color: #007bff;
63
+ font-size: 1.2rem;
64
+ cursor: pointer;
65
+ }
66
+ .update-btn {
67
+ background-color: #0FAA39;
68
+ color: white;
69
+ border: none;
70
+ border-radius: 5px;
71
+ padding: 10px 20px;
72
+ font-size: 1rem;
73
+ cursor: pointer;
74
+ width: 100%;
75
+ font-weight: bold; /* Making the button text bold */
76
+ }
77
+ .update-btn:hover {
78
+ background-color: #0f8e29;
79
+ }
80
+ .edit-btn {
81
+ background-color: #0FAA39;
82
+ color: white;
83
+ border: none;
84
+ border-radius: 5px;
85
+ padding: 10px 20px;
86
+ font-size: 1rem;
87
+ cursor: pointer;
88
+ width: 100%;
89
+ font-weight: bold; /* Making the button text bold */
90
+ }
91
+ .edit-btn:hover {
92
+ background-color: #0f8e29;
93
+ }
94
+ /* Flexbox for equally spaced buttons */
95
+ .button-container {
96
+ display: flex;
97
+ justify-content: space-between;
98
+ margin-top: 20px;
99
+ }
100
+ /* Ensure both buttons have equal height and width */
101
+ .edit-btn, .update-btn {
102
+ flex: 1;
103
+ margin: 0 5px;
104
+ padding: 10px 20px;
105
+ font-size: 1rem;
106
+ cursor: pointer;
107
+ border-radius: 5px;
108
+ height: 50px; /* Equal height for both buttons */
109
+ }
110
+ /* Change text color inside input fields to gray */
111
+ input[type="text"], input[type="email"], input[type="number"], .form-control {
112
+ color: #808080; /* Change text color to gray */
113
+ }
114
+ /* Change color for the headings like Name, Email, Phone, Referral Code, Reward Points */
115
+ .form-label {
116
+ color: #1C1C1C; /* Change heading text color */
117
+ }
118
+ h1 {
119
+ color: #1C1C1C; /* Change User Profile heading color */
120
+ font-size: 24px; /* Change font size of 'User Profile' */
121
+ }
122
+ </style>
123
+ <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
124
+ <script>
125
+ function enableEditField(fieldId) {
126
+ var field = document.getElementById(fieldId);
127
+ field.removeAttribute("readonly");
128
+ field.classList.add("editable");
129
+ field.focus();
130
+ }
131
+ function updateProfile(event) {
132
+ event.preventDefault();
133
+ var formData = $('#profileForm').serialize();
134
+ $.ajax({
135
+ type: "POST",
136
+ url: "/update_profile",
137
+ data: formData,
138
+ success: function(response) {
139
+ if (response.status === "success") {
140
+ alert(response.message);
141
+ location.reload();
142
+ } else {
143
+ alert(response.message);
144
+ }
145
+ },
146
+ error: function() {
147
+ alert("An error occurred while updating the profile.");
148
+ }
149
+ });
150
+ }
151
+ function editProfileFields() {
152
+ document.getElementById('customerName').removeAttribute('readonly');
153
+ document.getElementById('email').removeAttribute('readonly');
154
+ document.getElementById('phone').removeAttribute('readonly');
155
+ document.getElementById('customerName').classList.add('editable');
156
+ document.getElementById('email').classList.add('editable');
157
+ document.getElementById('phone').classList.add('editable');
158
+ }
159
+ function copyReferralCode() {
160
+ var referralCode = document.getElementById('referralCode');
161
+ referralCode.select();
162
+ document.execCommand('copy');
163
+ alert('Referral Code Copied!');
164
+ }
165
+ </script>
166
+ </head>
167
+ <body>
168
+ <div class="container mt-4">
169
+ <h1>User Profile</h1>
170
+
171
+ {% with messages = get_flashed_messages(with_categories=true) %}
172
+ {% if messages %}
173
+ <div class="alert alert-{{ messages[0][0] }}">
174
+ {{ messages[0][1] }}
175
+ </div>
176
+ {% endif %}
177
+ {% endwith %}
178
+
179
+ <div class="card">
180
+ <div class="card-body">
181
+ <form id="profileForm" method="POST" onsubmit="updateProfile(event)">
182
+ <div class="mb-3">
183
+ <label for="customerName" class="form-label"><strong>Name:</strong></label>
184
+ <div class="input-group">
185
+ <input type="text" id="customerName" name="customerName" class="form-control" value="{{ customer['name'] }}" readonly>
186
+ </div>
187
+ </div>
188
+
189
+ <div class="mb-3">
190
+ <label for="email" class="form-label"><strong>Email:</strong></label>
191
+ <div class="input-group">
192
+ <input type="email" id="email" name="email" class="form-control" value="{{ customer['email'] }}" readonly>
193
+ </div>
194
+ </div>
195
+
196
+ <div class="mb-3">
197
+ <label for="phone" class="form-label"><strong>Phone:</strong></label>
198
+ <div class="input-group">
199
+ <input type="text" id="phone" name="phone" class="form-control" value="{{ customer['phone'] }}" readonly>
200
+ </div>
201
+ </div>
202
+
203
+ <div class="mb-3">
204
+ <label for="referralCode" class="form-label"><strong>Referral Code:</strong></label>
205
+ <div class="input-group">
206
+ <input type="text" id="referralCode" name="referralCode" class="form-control" value="{{ customer['referral_code'] }}" readonly>
207
+ <button type="button" class="copy-btn" onclick="copyReferralCode()">📋</button>
208
+ </div>
209
+ </div>
210
+
211
+ <div class="mb-3">
212
+ <label for="rewardPoints" class="form-label"><strong>Reward Points:</strong></label>
213
+ <input type="text" id="rewardPoints" name="rewardPoints" class="form-control" value="{{ customer['reward_points'] }}" readonly>
214
+ </div>
215
+
216
+ <!-- Flex container for Edit and Update buttons -->
217
+ <div class="button-container">
218
+ <button type="button" class="edit-btn" onclick="editProfileFields()">Edit Profile</button>
219
+ <button type="submit" class="update-btn">Update Profile</button>
220
+ </div>
221
+ </form>
222
+ </div>
223
+ </div>
224
+
225
+ <a href="/menu" class="back-to-menu">Back to Menu</a>
226
+ </div>
227
+ </body>
228
+ </html>