Hugging Face's logo

Spaces:
nagasurendra
/
BiryaniHubflaskSalesTeam5
Sleeping

App Files Community
nagasurendra commited on
Commit
917882b
·
verified ·
1 Parent(s): a29ad21

Update templates/loyalty.html

Browse files
Files changed (1) hide show
  1. templates/loyalty.html +111 -15
templates/loyalty.html CHANGED
@@ -1,26 +1,122 @@
1
  <!DOCTYPE html>
2
- <html>
3
  <head>
 
 
4
  <title>Loyalty Program</title>
5
  <style>
6
- .badge { font-weight: bold; color: gold; }
7
- .reward { margin: 10px 0; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8
  </style>
9
  </head>
10
  <body>
11
- <h1>Your Loyalty Status</h1>
12
- <div id="loyalty-info">
13
- <p>Points: {{ loyalty_data.reward_points }}</p>
14
- <p>Total Orders: {{ loyalty_data.total_orders }}</p>
15
- <p>Total Spent: ${{ loyalty_data.total_spent }}</p>
16
- <p>Badge: <span class="badge">{{ loyalty_data.badge }}</span></p>
17
- <h2>Available Rewards</h2>
18
- {% for reward in loyalty_data.available_rewards %}
19
- <div class="reward">
20
- <strong>{{ reward.name }}</strong> - {{ reward.points }} points
21
- <p>{{ reward.description }}</p>
22
  </div>
23
- {% endfor %}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
24
  </div>
25
  </body>
26
  </html>
 
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>Loyalty Program</title>
7
  <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ background-color: #f4f4f4;
11
+ margin: 0;
12
+ padding: 20px;
13
+ }
14
+ .container {
15
+ max-width: 800px;
16
+ margin: 0 auto;
17
+ text-align: center;
18
+ }
19
+ h1 {
20
+ color: #333;
21
+ margin-bottom: 20px;
22
+ }
23
+ .loyalty-card {
24
+ background-color: white;
25
+ border-radius: 10px;
26
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
27
+ padding: 20px;
28
+ margin-bottom: 20px;
29
+ display: flex;
30
+ justify-content: space-around;
31
+ align-items: center;
32
+ }
33
+ .loyalty-stat {
34
+ text-align: center;
35
+ }
36
+ .loyalty-stat img {
37
+ width: 80px;
38
+ height: 80px;
39
+ margin-bottom: 10px;
40
+ }
41
+ .loyalty-stat p {
42
+ margin: 5px 0;
43
+ color: #666;
44
+ }
45
+ .loyalty-stat .value {
46
+ font-size: 1.2em;
47
+ font-weight: bold;
48
+ color: #2c3e50;
49
+ }
50
+ .rewards-section {
51
+ background-color: white;
52
+ border-radius: 10px;
53
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
54
+ padding: 20px;
55
+ }
56
+ .rewards-section h2 {
57
+ color: #333;
58
+ margin-bottom: 15px;
59
+ }
60
+ .reward {
61
+ display: flex;
62
+ align-items: center;
63
+ margin: 15px 0;
64
+ padding: 10px;
65
+ background-color: #f9f9f9;
66
+ border-radius: 5px;
67
+ }
68
+ .reward img {
69
+ width: 50px;
70
+ height: 50px;
71
+ margin-right: 15px;
72
+ }
73
+ .reward-details {
74
+ text-align: left;
75
+ }
76
+ .reward-details strong {
77
+ color: #e74c3c;
78
+ font-size: 1.1em;
79
+ }
80
+ .reward-details p {
81
+ margin: 5px 0;
82
+ color: #777;
83
+ }
84
  </style>
85
  </head>
86
  <body>
87
+ <div class="container">
88
+ <h1>Your Loyalty Status</h1>
89
+ <div class="loyalty-card">
90
+ <div class="loyalty-stat">
91
+ <p>Points</p>
92
+ <p class="value">{{ loyalty_data.reward_points }}</p>
 
 
 
 
 
93
  </div>
94
+ <div class="loyalty-stat">
95
+ <p>Total Orders</p>
96
+ <p class="value">{{ loyalty_data.total_orders }}</p>
97
+ </div>
98
+ <div class="loyalty-stat">
99
+ <p>Total Spent</p>
100
+ <p class="value">${{ loyalty_data.total_spent }}</p>
101
+ </div>
102
+ <div class="loyalty-stat">
103
+ <img src="{{ loyalty_data.badge_image }}" alt="{{ loyalty_data.badge }} Badge">
104
+ <p class="value">{{ loyalty_data.badge }}</p>
105
+ </div>
106
+ </div>
107
+
108
+ <div class="rewards-section">
109
+ <h2>Available Rewards</h2>
110
+ {% for reward in loyalty_data.available_rewards %}
111
+ <div class="reward">
112
+ <img src="{{ reward.image }}" alt="{{ reward.name }}">
113
+ <div class="reward-details">
114
+ <strong>{{ reward.name }} ({{ reward.points }} points)</strong>
115
+ <p>{{ reward.description }}</p>
116
+ </div>
117
+ </div>
118
+ {% endfor %}
119
+ </div>
120
  </div>
121
  </body>
122
  </html>