154 lines
4.7 KiB
HTML
154 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Active Subscription</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
|
|
|
|
body {
|
|
background-color: var(--black);
|
|
color: var(--white);
|
|
font-family: 'Poppins', sans-serif;
|
|
}
|
|
|
|
.container {
|
|
padding: 0 15px 20px;
|
|
}
|
|
|
|
.card {
|
|
background-color: var(--light-black);
|
|
border: 1px solid var(--main-yellow);
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
}
|
|
|
|
.card-header {
|
|
background-color: transparent;
|
|
border-bottom: 1px solid var(--main-yellow);
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 1.5rem;
|
|
color: var(--main-yellow);
|
|
}
|
|
|
|
.card-body {
|
|
font-size: 1rem;
|
|
color: var(--white-mix);
|
|
}
|
|
|
|
.btn {
|
|
background: linear-gradient(90.02deg, #CDA34C 0.02%, #F1D6A0 52%, #D1A956 98.68%);
|
|
border: none;
|
|
padding: 10px 20px;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
color: var(--black);
|
|
border-radius: 5px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.btn-cancel {
|
|
background-color: #dc3545;
|
|
color: var(--white);
|
|
}
|
|
|
|
.cancel-details {
|
|
background-color: #111;
|
|
color: #bbb;
|
|
padding: 15px;
|
|
margin-top: 20px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.card-title {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.btn {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.bg-dark {
|
|
background-color: #000 !important;
|
|
}
|
|
.text-light {
|
|
color: #f8f9fa !important;
|
|
}
|
|
.text-gold {
|
|
color: #d4af37 !important;
|
|
}
|
|
.border-gold {
|
|
border: 2px solid #d4af37 !important;
|
|
}
|
|
.border-bottom-gold {
|
|
border-bottom: 2px solid #d4af37 !important;
|
|
}
|
|
.btn-outline-gold {
|
|
color: #000;
|
|
border-color: #d4af37;
|
|
}
|
|
.btn-outline-gold:hover {
|
|
background-color: #d4af37;
|
|
color: #000;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<header class="text-center py-3">
|
|
<h1 class="text-gold">Subscription Details</h1>
|
|
</header>
|
|
|
|
<div class="container">
|
|
<div class="card bg-dark text-light border-gold">
|
|
<div class="card-header border-bottom-gold">
|
|
<h2 class="card-title text-gold">{{ subscription.subscription.title }}</h2>
|
|
</div>
|
|
<div class="card-body">
|
|
<h5 class="text-gold">Full Name:</h5>
|
|
<p>{{ subscription.principal.first_name }} {{ subscription.principal.last_name }}</p>
|
|
<p><strong>Status:</strong> {{ subscription.get_status_display }}</p>
|
|
<p><strong>Start Date:</strong> {{ subscription.start_date }}</p>
|
|
<p><strong>End Date:</strong> {{ subscription.end_date }}</p>
|
|
<p><strong>Auto Renew:</strong> {{ subscription.auto_renew|yesno:"Yes,No" }}</p>
|
|
|
|
{% if subscription.coupon_code %}
|
|
<p><strong>Coupon Code:</strong> {{ subscription.coupon_code }}</p>
|
|
{% endif %}
|
|
|
|
{% if subscription.cancelled_date_time %}
|
|
<div class="cancel-details mt-4">
|
|
<h4 class="text-gold">Auto renew cancellation details</h4>
|
|
<p><strong>Cancellation Date:</strong> {{ subscription.cancelled_date_time }}</p>
|
|
<p><strong>Grace Period End Date:</strong> {{ subscription.grace_period_end_date }}</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if subscription.auto_renew and not subscription.cancelled_date_time %}
|
|
<div class="cancel-details mt-4">
|
|
<h3 class="text-gold">Cancel Auto-Renewing Subscription</h3>
|
|
<p>Click the button below to cancel your auto-renewing subscription. This will prevent future payments from being processed.</p>
|
|
<a class="btn btn-outline-gold" href="{% url 'manage_subscriptions:cancel_subscription' subscription_id=subscription.id %}">Cancel Auto-Renewal</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
</html>
|