Update templates/reward_status.html

templates/reward_status.html

@@ -40,13 +40,14 @@
             box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
         }
         .badge {
-            font-size: 1.5em;
+            font-size: 1.2em;
             font-weight: bold;
             color: #ff6f00;
             background-color: #fff3e0;
-            padding: 10px;
+            padding: 8px 15px;
             border-radius: 5px;
             margin: 10px 0;
+            display: inline-block;
         }
         .valid-through {
             font-size: 1em;
@@ -69,15 +70,21 @@
         .points-info {
             display: flex;
             justify-content: space-between;
-            margin-top: 10px;
+            font-size: 0.9em;
+            color: #333;
+        }
+        .points {
+            font-size: 1.1em;
+            font-weight: bold;
         }
         .next-tier {
-            font-size: 1.2em;
-            color: #333;
+            font-size: 1.1em;
             font-weight: bold;
         }
-        .points {
-            font-size: 1.2em;
+        .points-bar-info {
+            display: flex;
+            justify-content: space-between;
+            font-size: 0.9em;
             color: #333;
         }
     </style>
@@ -94,13 +101,22 @@
         <div class="badge">{{ current_tier }} Status</div>
         <div class="valid-through">Valid through December 2024</div>
         
+        <div class="points-info">
+            <div class="points">You have <strong>{{ user_points }}</strong> points</div>
+        </div>
+
+        <div class="points-bar-info">
+            <div>0</div> <!-- Starting points -->
+            <div>{{ tiers[current_tier] }}</div> <!-- Ending points of the current tier -->
+        </div>
+
         <div class="points-bar">
             <div class="progress"></div>
         </div>
-        
+
         <div class="points-info">
-            <div class="points">You have <strong>{{ user_points }}</strong> points</div>
-            <div class="next-tier">You need <strong>{{ points_needed_for_next_tier }}</strong> more points to reach the next tier!</div>
+            <div class="points">You need <strong>{{ points_needed_for_next_tier }}</strong> more points</div>
+            <div class="next-tier">Next tier: {{ next_tier }}</div>
         </div>
     </div>
 </div>