503 lines
24 KiB
HTML
503 lines
24 KiB
HTML
{% load static %}
|
||
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<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' %}">
|
||
<title>Good times</title>
|
||
<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">
|
||
×
|
||
</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>
|
||
{% for subscription in subscriptions %}
|
||
<div class="feat-card">
|
||
<div class="card text-center mb-2">
|
||
<!-- Dark card with gold border -->
|
||
<h5 class="gold-text mb-0 p-1" style="background-color: #f1d59f6e;">{{
|
||
subscription.title }}</h5>
|
||
{% if subscription.image %}
|
||
<img src="{{ subscription.image.url }}" alt="{{ subscription.title }}"
|
||
class="card-img-top">
|
||
{% endif %}
|
||
</div>
|
||
<div class="card-body mb-2 text-center"> <!-- 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 mb-0"><s>£ {{ subscription.high_amount }}</s> £ {{
|
||
subscription.amount }}</p>
|
||
{% else %}
|
||
<p class="gold-text mb-0">£ {{ subscription.amount }}</p>
|
||
{% endif %}
|
||
</div>
|
||
<div class="Adventure-btn text-center">
|
||
<!-- Add a data attribute to store subscription ID -->
|
||
<button class="common-btn subscribe-btn"
|
||
data-subscription-id="{{ subscription.id }}">Join now</button>
|
||
</div>
|
||
</div>
|
||
<hr>
|
||
{% empty %}
|
||
<p>No subscriptions available.</p>
|
||
{% endfor %}
|
||
|
||
|
||
</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>
|
||
</div> -->
|
||
</section>
|
||
|
||
<!-- Key Features -->
|
||
<section class="key-features ptb">
|
||
<div class="container">
|
||
<h2 class="sec-heading">Key Features</h2>
|
||
<p class="sec-subheading">Find What’s 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 city’s 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">
|
||
How can I find events in my city?
|
||
</button>
|
||
</h2>
|
||
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
|
||
<div class="accordion-body">
|
||
<strong>This is the second item's accordion
|
||
body.</strong> It is hidden by default,
|
||
until the collapse plugin adds the
|
||
appropriate classes that we use to style
|
||
each element. These classes control the
|
||
overall appearance, as well as the showing
|
||
and hiding via CSS transitions. You can
|
||
modify any of this with custom CSS or
|
||
overriding our default variables. It's also
|
||
worth noting that just about any HTML can go
|
||
within the transition does limit overflow.
|
||
</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 Good Times personalise event
|
||
recommendations for me?
|
||
</button>
|
||
</h2>
|
||
<div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
|
||
<div class="accordion-body">
|
||
<strong>This is the third item's accordion
|
||
body.</strong> It is hidden by default,
|
||
until the collapse plugin adds the
|
||
appropriate classes that we use to style
|
||
each element. These classes control the
|
||
overall appearance, as well as the showing
|
||
and hiding via CSS transitions. You can
|
||
modify any of this with custom CSS or
|
||
overriding our default variables. It's also
|
||
worth noting that just about any HTML can go
|
||
within the transition does limit overflow.
|
||
</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="collapseThree">
|
||
Are there any membership fees or
|
||
subscription charges for using Good Times?
|
||
</button>
|
||
</h2>
|
||
<div id="collapseFour" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
|
||
<div class="accordion-body">
|
||
<strong>This is the third item's accordion
|
||
body.</strong> It is hidden by default,
|
||
until the collapse plugin adds the
|
||
appropriate classes that we use to style
|
||
each element. These classes control the
|
||
overall appearance, as well as the showing
|
||
and hiding via CSS transitions. You can
|
||
modify any of this with custom CSS or
|
||
overriding our default variables. It's also
|
||
worth noting that just about any HTML can go
|
||
within the transition does limit overflow.
|
||
</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="collapseThree">
|
||
Can I use Good Times as an event manager?
|
||
</button>
|
||
</h2>
|
||
<div id="collapseFive" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
|
||
<div class="accordion-body">
|
||
<strong>This is the third item's accordion
|
||
body.</strong> It is hidden by default,
|
||
until the collapse plugin adds the
|
||
appropriate classes that we use to style
|
||
each element. These classes control the
|
||
overall appearance, as well as the showing
|
||
and hiding via CSS transitions. You can
|
||
modify any of this with custom CSS or
|
||
overriding our default variables. It's also
|
||
worth noting that just about any HTML can go
|
||
within the transition does limit overflow.
|
||
</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">
|
||
<!-- <div class="footer-btn">
|
||
<button class="common-btn">Join now</button>
|
||
</div> -->
|
||
<p class="para">Let the Adventure Begin</p>
|
||
<p class="para">FAQ
|
||
</p>
|
||
</div>
|
||
|
||
</div>
|
||
<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"
|
||
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous">
|
||
</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!");
|
||
|
||
// Get Stripe publishable key
|
||
fetch("https://goodtimes.betadelivery.com/subscriptions/stripe-subscription/")
|
||
.then((result) => { return result.json(); })
|
||
.then((data) => {
|
||
// Initialize Stripe.js
|
||
const stripe = Stripe(data.publicKey);
|
||
console.log("loaded stripe public key");
|
||
// new
|
||
// Event handler
|
||
// document.querySelector("#submitBtn").addEventListener("click", () => {
|
||
// button.disabled = true;
|
||
// // Get Checkout Session ID
|
||
// fetch("https://goodtimes.betadelivery.com/subscriptions/create-checkout-session/")
|
||
// .then((result) => { return result.json(); })
|
||
// .then((data) => {
|
||
// console.log(data);
|
||
// // Redirect to Stripe Checkout
|
||
// return stripe.redirectToCheckout({ sessionId: data.sessionId })
|
||
// })
|
||
// .then((res) => {
|
||
// console.log(res);
|
||
// });
|
||
// });
|
||
|
||
document.querySelectorAll(".subscribe-btn").forEach(button => {
|
||
button.addEventListener("click", () => {
|
||
const subscriptionId = button.getAttribute("data-subscription-id");
|
||
|
||
console.log("subscriptionId: ", subscriptionId);
|
||
button.disabled = true;
|
||
// Create checkout session for the selected subscription
|
||
fetch("https://goodtimes.betadelivery.com/subscriptions/create-checkout-session/", {
|
||
// fetch("http://192.168.0.101:8000/subscriptions/create-checkout-session/", {
|
||
method: "POST",
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify({ subscriptionId: subscriptionId }),
|
||
})
|
||
.then((result) => { return result.json(); })
|
||
.then((data) => {
|
||
// Redirect to Stripe Checkout
|
||
return stripe.redirectToCheckout({ sessionId: data.sessionId })
|
||
})
|
||
.catch((error) => {
|
||
console.error("Error:", error);
|
||
button.disabled = false;
|
||
});
|
||
});
|
||
});
|
||
|
||
|
||
|
||
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
|
||
</html> |