450 lines
21 KiB
HTML
450 lines
21 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>
|
||
</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>
|
||
|
||
<!-- Button trigger modal -->
|
||
<!-- <div class="baner-btn">
|
||
<button class="common-btn">Join now</button>
|
||
</div> -->
|
||
|
||
<!-- Modal -->
|
||
<div class="modal-body">
|
||
<div class="your-plan">
|
||
<div class="your-plans-main">
|
||
<div class="monthly-div-main">
|
||
<div class="monthly-div">
|
||
<p class="your-heading">Monthly</p>
|
||
<p class="your-subheading">$5.55 /<span> month</span></p>
|
||
</div>
|
||
</div>
|
||
<div class="your-plans-btn">
|
||
<!-- <button class="common-btn" id="submitBtn">Subscribe</button> -->
|
||
<button class="common-btn" id="submitBtn">Join now</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</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>
|
||
|
||
<!-- 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);
|
||
|
||
// new
|
||
// Event handler
|
||
document.querySelector("#submitBtn").addEventListener("click", () => {
|
||
// 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);
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
|
||
</html> |