Files
goodtimes/templates/stripe_html/index.html
2024-07-22 21:08:56 +05:30

602 lines
31 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Good times</title>
{% load static %}
<link rel="icon" type="image/x-icon" href="{% static '/images/icon.png' %}">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" />
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="{% static 'src/assets/css/payment/style.css' %}">
<script src="https://js.stripe.com/v3/"></script>
<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Header -->
<header class="header-main" id="header">
<div class="container">
<div class="header-main-inner">
<div class="logo">
<a href="index.html">
<img loading="lazy" src="{% static '/images/logo.png' %}" alt="logo">
</a>
</div>
<!-- <nav class="navs">
<div class="cross-btn">
&times;
</div>
<ul class="navLinks">
<li><a href="index.html">Home</a></li>
<li><a href="about-us.html">About Us</a></li>
<li><a href="terms.html">Terms & Condition</a></li>
</ul>
</nav>
<div class="hamburger">
<img loading="lazy" src="{% static "/images/ham.png" %}" alt>
</div>
<div class="overlay"></div> -->
</div>
<!-- </div> -->
</div>
</header>
<!-- baner -->
<section class="baner-section">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="baner-content" data-aos="fade-right" data-aos-duration="1000">
<h1 class="big-heading">Discover the <span>Pulse</span>
<br>
of
<span>Your City!</span>
</h1>
<p class="grey-para">Stay in the loop: concerts,
festivals,
art <br> exhibits, and more near you!</p>
<!-- <div class="store-app">
<a href>
<img loading="lazy" src="{% static '/images/menu-left-btn.png' %}" alt>
</a>
<a href class>
<img loading="lazy" src="{% static '/images/menu-right-btn.png' %}" alt>
</a>
</div> -->
</div>
<!-- </div> -->
</div>
<div class="col-md-6">
<div class="baner-img" data-aos="zoom-in-up" data-aos-duration="1000">
<img loading="lazy" src="{% static '/images/banner-mobile.png' %}" alt>
</div>
</div>
</div>
</div>
</section>
<div class="row" id="already-active-subscription">
</div>
<section class="card_design">
<div class="container">
<div class="row">
{% for subscription in subscriptions %}
<div class="col-md-4">
<div class="feat-card">
<div class="card text-center mb-2">
<!-- Dark card with gold border -->
<h5 class="gold-text bg_color">{{ subscription.title }}
</h5>
{% if subscription.image %}
<img src="{{ subscription.image.url }}" alt="{{ subscription.title }}" class="card-img-top">
{% endif %}
</div>
<div class="card-body"> <!-- Golden text for the body -->
{% if subscription.short_description %}
<p class="gold-text">{{ subscription.short_description }}</p>
{% endif %}
{% if subscription.long_description %}
<p class="gold-text">{{ subscription.long_description|truncatewords:20 }}</p>
{% endif %}
<h5 class="card-title gold-text">Subscription Amount</h5>
{% if subscription.high_amount and subscription.high_amount > subscription.amount %}
<p class="gold-text"><s>£ {{ subscription.high_amount }}</s> £ {{ subscription.amount }}
</p>
{% else %}
<p class="gold-text">£ {{ subscription.amount }}</p>
{% endif %}
{% if subscription.plan.days %}
<p class="gold-text">Days of Subscription: {{ subscription.plan.days }}</p>
{% else %}
<p class="gold-text">Days of Subscription: Not available</p>
{% endif %}
</div>
<div class="Adventure-btn text-center">
<input type="text" placeholder="Enter Coupon Code" class="form-control coupon-code-input" size="20">
<!-- Add a data attribute to store subscription ID -->
<button class="common-btn subscribe-btn" data-subscription-id="{{ subscription.id }}">Join now</button>
<!-- Error message container -->
<div class="alert alert-danger coupon-error-message mt-2" style="display: none;"></div>
</div>
</div>
</div>
{% empty %}
<p>No subscriptions available.</p>
{% endfor %}
</div>
</div>
</section>
<!-- Key Features -->
<section class="key-features ptb">
<div class="container">
<h2 class="sec-heading">Key Features</h2>
<p class="sec-subheading">Find Whats Up</p>
<div class="row">
<div class="col-md-6">
<div class="key-main-img text-center" data-aos="flip-left">
<img loading="lazy" src="{% static '/images/key-main.png' %}" alt>
</div>
</div>
<div class="col-md-6" data-aos="flip-left" data-aos-duration="1000">
<div class="key-right-first">
<img loading="lazy" src="{% static '/images/key mini.png' %}" alt>
<div class="key-right-first-inner">
<p class="sec-mini-heading">Comprehensive Event
Listings</p>
<p class="para">Explore all the exciting stuff
happening in your city. From live music
performances to theatre shows, we've got it all
covered.</p>
</div>
</div>
<div class="key-right-second">
<img loading="lazy" src="{% static '/images/key nini 2.png' %}" alt>
<div class="key-right-second-inner">
<p class="sec-mini-heading">Personalized
Recommendations</p>
<p class="para">Receive customized event suggestions
based on your preferences and
interests. Say goodbye to FOMO and hello to
unforgettable experiences.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- easy-steps -->
<section class="easy-steps ptb">
<div class="container">
<h2 class="sec-heading">3 Easy Steps to Stay Informed
</h2>
<p class="sec-subheading">Experience the thrill of your city like never
before <br> with Good Times.
</p>
<div class="easy-steps-main">
<div class="easy-steps-first">
<img loading="lazy" src="{% static '/images/1.png' %}" alt class="easy-steps-first-img-num">
<h4 class="para-dark">Sign Up</h4>
<p class="para">Create your account using your email <br> or
social media account.
</p>
<img loading="lazy" src="{% static '/images/1 inner.png' %}" alt class="easy-steps-first-img-bot">
</div>
<div class="easy-steps-first">
<img loading="lazy" src="{% static '/images/2.png' %}" alt class="easy-steps-first-img-num">
<h4 class="para-dark">Subscribe</h4>
<p class="para">Subscribe, pick your city, and share <br>
your
interests with us.
</p>
<img loading="lazy" src="{% static '/images/2 inner.png' %}" alt class="easy-steps-first-img-bot">
</div>
<div class="easy-steps-first">
<img loading="lazy" src="{% static '/images/3.png' %}" alt class="easy-steps-first-img-num">
<h4 class="para-dark">Start Exploring</h4>
<p class="para">Discover your citys best experiences <br>
and
events.
</p>
<img loading="lazy" src="{% static '/images/3 inner.png' %}" alt class="easy-steps-first-img-bot">
</div>
</div>
</div>
</section>
<!-- Adventure -->
<section class="Adventure ptb">
<div class="container">
<h2 class="sec-heading">Let the Adventure Begin
</h2>
<p class="sec-subheading">Plan Your Outings With Confidence
</p>
<div class="row">
<div class="col-md-6">
<div class="Adventure-left">
<div class="Adventure-rti">
<div class="Adventure-icon">
<img loading="lazy" src="{% static '/images/Star 1.png' %}" alt>
</div>
<div class="Adventure-text">Stay Informed</div>
</div>
<div class="Adventure-rti">
<div class="Adventure-icon">
<img loading="lazy" src="{% static '/images/Star 1.png' %}" alt>
</div>
<div class="Adventure-text">Curated
Recommendations</div>
</div>
<div class="Adventure-rti">
<div class="Adventure-icon">
<img loading="lazy" src="{% static '/images/Star 1.png' %}" alt>
</div>
<div class="Adventure-text">Social Sharing</div>
</div>
<!-- <div class="store-app">
<a href>
<img loading="lazy" src="{% static '/images/menu-left-btn.png' %}" alt>
</a>
<a href class>
<img loading="lazy" src="{% static '/images/menu-right-btn.png' %}" alt>
</a>
</div>
<div class="Adventure-btn">
<button class="common-btn">Join now</button>
</div> -->
</div>
</div>
<div class="col-md-6">
<div class="Adventure-right text-center">
<img loading="lazy" src="{% static '/images/Adventure.png' %}" alt>
</div>
</div>
</div>
</section>
<!-- fAQ -->
<section class="faq ptb">
<div class="container">
<h2 class="sec-heading">FAQ</h2>
<div class="main-faq">
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
What types of events does Good Times cover?
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show"
data-bs-parent="#accordionExample">
<div class="accordion-body">
Good Times covers a wide range of events,
including concerts, sporting events,
business
meets, tech showcases, and more. Whatever
your interests, we've got something for you.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
What is the Good Times Ltd App?
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">
The Good Times App is a revolutionary mobile application designed to bring people
together by providing a comprehensive listing of local and regional events. It caters to
a wide range of interests and passions, making it easier for users to find and connect
with events they love.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
How does the referral program work?
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">
For every new user that signs up for the Good Times App using a referral code, the
referrer earns 1 G-Token. The referrer continues to earn G-Tokens for each monthly
subscription payment made by the referred user. These tokens can be sold back to Good
Times Ltd for cash or used towards event payments.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
What is the value of G-Tokens?
</button>
</h2>
<div id="collapseFour" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">
G-Tokens are valued at 25% of the minimum monthly subscription cost. The funds from sold
G-Tokens are paid into the user's bank account of choice, according to the app's terms
and conditions.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
Is there a limit to how many G-Tokens I can sell?
</button>
</h2>
<div id="collapseFive" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">
No, there's no limit to the number of G-Tokens you can sell back to Good Times. However,
withdrawals can only be made once per month.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
How does the app ensure up-to-date information on events?
</button>
</h2>
<div id="collapseSix" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">
The Good Times App partners with local event organizers and venues, granting them
24-hour control over their event profiles and promotions. This ensures that customers
receive the most recent and accurate event information directly from the source.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseSeven" aria-expanded="false" aria-controls="collapseSeven">
How are events ranked within the app?
</button>
</h2>
<div id="collapseSeven" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">
Events are ranked based on a unique algorithm that considers customer interaction,
website traffic to the event's page, and the event's 1-to-5 star reviews. This helps
users find popular and highly regarded events tailored to their interests.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseEight" aria-expanded="false" aria-controls="collapseEight">
Can I book events through the Good Times App?
</button>
</h2>
<div id="collapseEight" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">
No, the app does not facilitate direct event bookings. However, it provides links to
event owners' or promoters' websites, where users can make bookings.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseNine" aria-expanded="false" aria-controls="collapseNine">
Does Good Times charge for data traffic to event websites?
</button>
</h2>
<div id="collapseNine" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">
No, Good Times does not charge partners for traffic data to their websites. The app
focuses on facilitating easy access to events for users without additional costs for
traffic.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseTen" aria-expanded="false" aria-controls="collapseTen">
How does Good Times ensure the safety of its users?
</button>
</h2>
<div id="collapseTen" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">
Safety and security are paramount for Good Times. The app employs the latest
technologies and practices to protect user data and privacy. While it vets each event
and organizer, it also encourages users to perform their due diligence for added safety.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseEleven" aria-expanded="false" aria-controls="collapseEleven">
What happens if I cancel my subscription?
</button>
</h2>
<div id="collapseEleven" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">
If you cancel your subscription, Good Times offers account recovery, allowing you to
pick up where you left off, including any referrals made previously. There is also a
15-day grace period for missed payments, after which wallet funds will be lost if the
payment is not made.
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- footer -->
<section class="footer">
<div class="container">
<div class="footer-main-img">
<img loading="lazy" src="{% static '/images/logo.png' %}" alt>
</div>
<!-- <div class="footer-main-grid">
<div class="footer-main-grid-first">
<div class="store-app">
<a href>
<img loading="lazy" src="{% static '/images/menu-left-btn.png' %}" alt>
</a>
<a href class>
<img loading="lazy" src="{% static '/images/menu-right-btn.png' %}" alt>
</a>
</div>
</div>
<div class="footer-main-grid-second">
<p class="para-dark">Help</p>
<p class="para">About Us</p>
<p class="para">Terms & Conditions</p>
</div>
<div class="footer-main-grid-third">
<p class="para-dark">Quick Links</p>
<p class="para">Key Features Us</p>
<p class="para">3 Easy Steps to Stay Informed
</p>
</div>
<div class="footer-main-grid-fourth">
<p class="para">Let the Adventure Begin</p>
<p class="para">FAQ
</p>
</div>
</div> -->
<hr>
<div class>
<a href="#" class="copy-right">
Copyright © Good Times
</a>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="{% static 'src/assets/js/payment/custom.js' %}"></script>
<script>
console.log("Sanity check!");
var stripeCheckoutUrl = "{{ stripeCheckoutUrl }}";
var stripeFinalUrl = "{{ stripeFinalUrl }}";
var couponValidityCheckUrl = "{{ couponValidityCheckUrl }}";
console.log("stripeCheckoutUrl: ", stripeCheckoutUrl);
console.log("stripeFinalUrl: ", stripeFinalUrl);
console.log("couponValidityCheckUrl: ", couponValidityCheckUrl);
// Geting Stripe publishable key
fetch(stripeCheckoutUrl)
.then((result) => {
return result.json();
})
.then((data) => {
// Initializing Stripe.js -- getting stripe public key to generate stripe object for creating checkout session
const stripe = Stripe(data.publicKey);
console.log("loaded stripe public key");
document.querySelectorAll(".subscribe-btn").forEach(button => {
button.addEventListener("click", () => {
const subscriptionId = button.getAttribute("data-subscription-id");
const couponCode = button.previousElementSibling.value;
const errorMessageContainer = button.nextElementSibling;
console.log("subscriptionId: ", subscriptionId);
console.log("couponCode: ", couponCode);
button.disabled = true;
button.previousElementSibling.value = "";
// Handling any coupon validation errors here before creating stripe final checkout session
fetch(couponValidityCheckUrl, {
method: "POST",
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
subscriptionId: subscriptionId,
couponCode: couponCode
}),
})
.then(response => {
if (!response.ok) {
return response.json().then(data => {
throw new Error(data.error);
});
}
return response.json();
})
.then(data => {
// Creating checkout session for the selected subscription
fetch(stripeFinalUrl, {
method: "POST",
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
subscriptionId: subscriptionId
}),
})
.then((result) => {
return result.json();
})
.then((data) => {
// Redirects to Stripe Checkout
return stripe.redirectToCheckout({
sessionId: data.sessionId
})
})
.catch((error) => {
console.error("Error:", error);
button.disabled = false;
});
})
.catch((error) => {
console.error("Error:", error);
errorMessageContainer.style.display = 'block';
errorMessageContainer.innerText = error.message;
button.disabled = false;
});
});
});
});
</script>
</body>
</html>