|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Loyalty Program</title> |
|
<style> |
|
body { |
|
font-family: Arial, sans-serif; |
|
background-color: #f4f4f4; |
|
margin: 0; |
|
padding: 20px; |
|
} |
|
.container { |
|
max-width: 800px; |
|
margin: 0 auto; |
|
text-align: center; |
|
} |
|
h1 { |
|
color: #333; |
|
margin-bottom: 20px; |
|
} |
|
.loyalty-card { |
|
background-color: white; |
|
border-radius: 10px; |
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); |
|
padding: 20px; |
|
margin-bottom: 20px; |
|
display: flex; |
|
justify-content: space-around; |
|
align-items: center; |
|
} |
|
.loyalty-stat { |
|
text-align: center; |
|
} |
|
.loyalty-stat img { |
|
width: 80px; |
|
height: 80px; |
|
margin-bottom: 10px; |
|
} |
|
.loyalty-stat p { |
|
margin: 5px 0; |
|
color: #666; |
|
} |
|
.loyalty-stat .value { |
|
font-size: 1.2em; |
|
font-weight: bold; |
|
color: #2c3e50; |
|
} |
|
.rewards-section { |
|
background-color: white; |
|
border-radius: 10px; |
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); |
|
padding: 20px; |
|
} |
|
.rewards-section h2 { |
|
color: #333; |
|
margin-bottom: 15px; |
|
} |
|
.reward { |
|
display: flex; |
|
align-items: center; |
|
margin: 15px 0; |
|
padding: 10px; |
|
background-color: #f9f9f9; |
|
border-radius: 5px; |
|
} |
|
.reward img { |
|
width: 50px; |
|
height: 50px; |
|
margin-right: 15px; |
|
} |
|
.reward-details { |
|
text-align: left; |
|
} |
|
.reward-details strong { |
|
color: #e74c3c; |
|
font-size: 1.1em; |
|
} |
|
.reward-details p { |
|
margin: 5px 0; |
|
color: #777; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div class="container"> |
|
<h1>Your Loyalty Status</h1> |
|
<div class="loyalty-card"> |
|
<div class="loyalty-stat"> |
|
<p>Points</p> |
|
<p class="value">{{ loyalty_data.reward_points }}</p> |
|
</div> |
|
<div class="loyalty-stat"> |
|
<p>Total Orders</p> |
|
<p class="value">{{ loyalty_data.total_orders }}</p> |
|
</div> |
|
<div class="loyalty-stat"> |
|
<p>Total Spent</p> |
|
<p class="value">${{ loyalty_data.total_spent }}</p> |
|
</div> |
|
<div class="loyalty-stat"> |
|
<img src="{{ loyalty_data.badge_image }}" alt="{{ loyalty_data.badge }} Badge"> |
|
<p class="value">{{ loyalty_data.badge }}</p> |
|
</div> |
|
</div> |
|
|
|
<div class="rewards-section"> |
|
<h2>Available Rewards</h2> |
|
{% for reward in loyalty_data.available_rewards %} |
|
<div class="reward"> |
|
<img src="{{ reward.image }}" alt="{{ reward.name }}"> |
|
<div class="reward-details"> |
|
<strong>{{ reward.name }} ({{ reward.points }} points)</strong> |
|
<p>{{ reward.description }}</p> |
|
</div> |
|
</div> |
|
{% endfor %} |
|
</div> |
|
</div> |
|
</body> |
|
</html> |
