Hugging Face's logo

Spaces:
nagasurendra
/
BiryaniHubflaskSalesTeam6
Sleeping

App Files Community
nagasurendra commited on
Commit
1b7fef0
·
verified ·
1 Parent(s): e2f4644

Update templates/reward_status.html

Browse files
Files changed (1) hide show
  1. templates/reward_status.html +61 -33
templates/reward_status.html CHANGED
@@ -16,12 +16,49 @@
16
  margin: auto;
17
  padding-top: 20px;
18
  }
19
- .status-bar {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
20
  width: 100%;
21
  height: 20px;
22
  background-color: #e0e0e0;
23
  border-radius: 10px;
24
- margin-bottom: 20px;
25
  }
26
  .progress {
27
  height: 100%;
@@ -29,50 +66,41 @@
29
  width: {{ progress_percentage }}%;
30
  border-radius: 10px;
31
  }
32
- .reward-info {
33
- background-color: #fff;
34
- padding: 20px;
35
- border-radius: 10px;
36
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
37
- }
38
- .reward-info h2 {
39
- text-align: center;
40
- }
41
- .points {
42
- font-size: 24px;
43
- text-align: center;
44
- margin: 10px 0;
45
  }
46
- .tier {
47
- text-align: center;
 
48
  font-weight: bold;
49
  }
50
- .next-tier {
51
- text-align: center;
52
- margin-top: 20px;
53
  }
54
  </style>
55
  </head>
56
  <body>
57
 
58
  <div class="container">
59
- <div class="reward-info">
60
- <h2>Reward Status</h2>
61
- <p class="points">You currently have {{ user_points }} points.</p>
62
- <div class="tier">
63
- <p>Your current tier: <strong>{{ current_tier }}</strong></p>
64
- </div>
 
 
65
 
66
- <div class="status-bar">
67
  <div class="progress"></div>
68
  </div>
69
 
70
- <div class="next-tier">
71
- {% if points_needed_for_next_tier > 0 %}
72
- <p>You need <strong>{{ points_needed_for_next_tier }}</strong> more points to reach the next tier!</p>
73
- {% else %}
74
- <p>Congratulations! You've reached Platinum!</p>
75
- {% endif %}
76
  </div>
77
  </div>
78
  </div>
 
16
  margin: auto;
17
  padding-top: 20px;
18
  }
19
+ .order-confirmed {
20
+ background-color: #fff;
21
+ padding: 20px;
22
+ border-radius: 10px;
23
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
24
+ text-align: center;
25
+ }
26
+ .order-confirmed h1 {
27
+ font-size: 2em;
28
+ color: #ff6f00;
29
+ }
30
+ .order-confirmed .delivery-time {
31
+ margin-top: 10px;
32
+ font-size: 1.2em;
33
+ color: #666;
34
+ }
35
+ .reward-status {
36
+ margin-top: 30px;
37
+ background-color: #fff;
38
+ padding: 20px;
39
+ border-radius: 10px;
40
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
41
+ }
42
+ .badge {
43
+ font-size: 1.5em;
44
+ font-weight: bold;
45
+ color: #ff6f00;
46
+ background-color: #fff3e0;
47
+ padding: 10px;
48
+ border-radius: 5px;
49
+ margin: 10px 0;
50
+ }
51
+ .valid-through {
52
+ font-size: 1em;
53
+ color: #888;
54
+ margin-bottom: 20px;
55
+ }
56
+ .points-bar {
57
  width: 100%;
58
  height: 20px;
59
  background-color: #e0e0e0;
60
  border-radius: 10px;
61
+ margin: 20px 0;
62
  }
63
  .progress {
64
  height: 100%;
 
66
  width: {{ progress_percentage }}%;
67
  border-radius: 10px;
68
  }
69
+ .points-info {
70
+ display: flex;
71
+ justify-content: space-between;
72
+ margin-top: 10px;
 
 
 
 
 
 
 
 
 
73
  }
74
+ .next-tier {
75
+ font-size: 1.2em;
76
+ color: #333;
77
  font-weight: bold;
78
  }
79
+ .points {
80
+ font-size: 1.2em;
81
+ color: #333;
82
  }
83
  </style>
84
  </head>
85
  <body>
86
 
87
  <div class="container">
88
+ <div class="order-confirmed">
89
+ <h1>Order Confirmed!</h1>
90
+ <p class="delivery-time">Estimated delivery time: 35 minutes</p>
91
+ </div>
92
+
93
+ <div class="reward-status">
94
+ <div class="badge">{{ current_tier }} Status</div>
95
+ <div class="valid-through">Valid through December 2024</div>
96
 
97
+ <div class="points-bar">
98
  <div class="progress"></div>
99
  </div>
100
 
101
+ <div class="points-info">
102
+ <div class="points">You have <strong>{{ round(user_points) }}</strong> points</div>
103
+ <div class="next-tier">You need <strong>{{ round(points_needed_for_next_tier) }}</strong> more points to reach the next tier!</div>
 
 
 
104
  </div>
105
  </div>
106
  </div>