From 6e76d699e15bc77315cbcce10a68ffdb7be98a0f Mon Sep 17 00:00:00 2001
From: rizwanisready <rizwanisready@gmail.com>
Date: Tue, 19 Mar 2024 12:40:13 +0530
Subject: [PATCH] subscribe

---
 static/src/assets/css/payment/style.css | 58 +++++++++++++++++
 templates/stripe_html/index.html        | 87 +++++++++++++++++--------
 2 files changed, 117 insertions(+), 28 deletions(-)

diff --git a/static/src/assets/css/payment/style.css b/static/src/assets/css/payment/style.css
index 62b7f37..a0226ab 100644
--- a/static/src/assets/css/payment/style.css
+++ b/static/src/assets/css/payment/style.css
@@ -264,6 +264,64 @@ header nav ul li a:hover:after {
     margin-top: 24px;
 }
 
+
+/* plan  */
+
+.modal-body .your-plan {
+    margin-top: 15px;
+}
+
+.modal-body .your-plans-main {
+    padding: 0px 10px 30px;
+}
+
+.modal-body .your-plans-main .head {
+    font-size: 25px;
+    color: black;
+    font-weight: 500;
+}
+
+.modal-body .your-plans-main .monthly-div-main {
+    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+    padding: 15px 20px;
+    border-radius: 8px;
+}
+
+.modal-body .your-plans-main .monthly-div-main .monthly-div {
+    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+    padding: 6px 10px;
+    border-radius: 8px;
+    border: 1px solid rgb(215 169 72 / 28%);
+}
+
+.modal-body .your-plans-main .your-heading {
+    color: var(--main-yellow);
+    font-size: 24px;
+    font-weight: 500;
+}
+
+.modal-body .your-plans-main .your-subheading {
+    font-size: 24px;
+    font-weight: 500;
+    color: black;
+}
+
+.modal-body .your-plans-main .your-subheading span {
+    font-size: 18px;
+    font-weight: 400;
+}
+
+.modal-body .your-plans-btn {
+    text-align: center;
+    margin-top: 20px;
+}
+
+.modal-body .your-plans-btn .common-btn {
+    width: 100%;
+}
+
+/* plan end  */
+
 .common-btn {
     background: linear-gradient(90.02deg, #CDA34C 0.02%, #F1D6A0 52%, #D1A956 98.68%);
     width: 252px;
diff --git a/templates/stripe_html/index.html b/templates/stripe_html/index.html
index af9acfb..9e11a99 100644
--- a/templates/stripe_html/index.html
+++ b/templates/stripe_html/index.html
@@ -70,8 +70,39 @@
                             </a>
                         </div>
 
+                        <!-- Button trigger modal -->
                         <div class="baner-btn">
-                            <button class="common-btn" id="submitBtn">Join now</button>
+                            <button id="toggleButton" class="common-btn" data-bs-toggle="modal"
+                                data-bs-target="#exampleModal">Join now</button>
+                        </div>
+
+                        <!-- Modal -->
+                        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
+                            aria-hidden="true">
+                            <div class="modal-dialog modal-dialog-centered">
+                                <div class="modal-content">
+                                    <div class="modal-header">
+                                        <h1 class="modal-title fs-5" id="exampleModalLabel">Your Plans</h1>
+                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
+                                            aria-label="Close"></button>
+                                    </div>
+                                    <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>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -251,15 +282,15 @@
                             <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.
+                                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>
@@ -275,15 +306,15 @@
                             <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.
+                                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>
@@ -299,15 +330,15 @@
                             <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.
+                                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>