{% extends "mnfapp/base.html" %} {% load static %} {% block content %} <style> #h1{ color: black; } label{ color: black; } .item1 { grid-area: LeftL; } .item2 { grid-area: LeftB; } .item3 { grid-area: LeftC; } .item4 { grid-area: rightR; } .main-container{ display:grid; grid-template-areas: 'LeftL LeftL LeftL LeftL rightR rightR' 'LeftB LeftB LeftC LeftC rightR rightR'; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); grid-gap: 10px; padding: 10px; width: 90vw; margin:auto; } .item2, .item3{ background-color: #b2d8ff; width:80%; margin-left:10%; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); text-align: center; justify-content: space-between; flex-direction: column; display: flex; padding: 5px; } .item2 button, .item3 button, .item4 button{ justify-content: flex-end; } .item4{ background-color: #FFE2E5; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); text-align: center; justify-content: space-between; flex-direction: column; display: flex; padding: 5px; } .item2 b, .item2 b, .item4 b{ padding: 1em; font-size: 1.2em; } .item2 button,.item3 button, .item4 button{ padding: 0.4em 3em 0.4em 3em; margin: 0.1em; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border: 0; border-radius: 5px; color: white; background-color: rgb(62, 92, 190); } .item button:hover, .page-container3 button:hover{ opacity: 0.7; } #h1{ text-align: center; margin-bottom: -2em; } #pageHead{ animation: blink 1s linear infinite; } @keyframes blink{ 0%{opacity: 0;} 50%{opacity: .5;} 100%{opacity: 1;} } #boxD p{ font-size: 1.3em; } .lifeform button{ padding: 1em 2em 1em 2em; color: white; background-color: blue; border: solid blue 1px; } </style> {% if user.is_authenticated %} {%if dataP3%} <h2 style="text-align: center; padding: 1em;"> Hi {{user.first_name}}, You are already a privileged mamber and your membership is valid till <span id="validity"></span> </h2> {%elif dataP4%} <h2 style="text-align: center; padding: 1em;"> Hi {{user.first_name}}, You are already a Life mamber and your membership is valid till <span id="validity2"></span> </h2> {%else%} <div style="margin-top: 2em;margin-bottom: 1cm;"> <h2 id="h1"> <i style="color: black; font-size: 1.3em;"> <b> PULL YOUR FUTURE INTO THE PRESENT! </b> </i> </h2><br> <button class="btn btn-primary" style="margin:1em;"><a href="/pay/verifygift" style="color: white;">Claim Your Gift</a></button> <br> <div class="main-container"> <div class="item1"> <h3 style="text-align: center;" id="pageHead"><i style="font-size: 1.13em;color: rgb(209, 6, 6);">Privileges Waiting for you !!</i></h3> <p style="margin: 0.6em;margin-left:2vw;font-size: 1.2em; width: 50vw;"> ✓ Greater free use of MNF products and services, <br> ✓ Opportunity to refer MNF membership to friends and family and extend your free privileged membership duration, <br> ✓ Opportunity to gift MNF subscriptions to your friends and family at a discounted fee, <br> ✓ Opportunity to earn as MNF Language Pair Partner, <br> ✓ Build your profile at mynextfilm.com and attract attention of those who need you, <br> ✓ Free Membership of Harkat Clubs. </p> <div style="margin: 0.5em; margin-left:5vw;"> <b><input type="checkbox"> Students,MNF Employees, MNF Shareholders</b> <b style="color: rgb(209, 6, 6);"> <span style="font-size: 1.3em;"> Claim 50% Discount </span> </b> </div> </div> <div class="item2"> <div> <b style="color: rgb(40, 46, 126); font-size: 1.3em;"> <span style="font-size: 1.3em;">₹100</span></b><br> <br><b>Monthly Subscription</b> </div> <form action="{% url 'payment' %}" method="post"> {%csrf_token%} <input type="text" style="display: none;" name="plan" value='Monthly plan' id="plan" required> <button type="submit" style="margin-top: -0.3em;">Buy Now</button> </form> </div> <div class="item3"> <div style="height: 18vh;"> <b style="color: rgb(40, 46, 126);font-size: 1.3em;"> <span style="font-size: 1.3em;">₹1000</span></b><br> <b>Yearly Subscription</b><br> <b><span style="font-size: 1.2em;color: #ee3c4d;"> 10% Additional Discount</span> <br> on all services </b> </div> <form action="{% url 'payment' %}" method="post"> {%csrf_token%} <input type="text" style="display: none;" name="plan" value='yearly' id="plan" required> <button type="submit" style="margin-top: -0.3em;">Buy Now</button> </form> </div> <div class="item4"> <div> <div style="display: grid; grid-template-columns: auto auto;"> <div style="width: 13vw; height: 6.5vw;background-color: yellow; border-radius: 50%; text-align: center; border:solid black 1px"> <h6 style="text-align: center; width: 10vw; margin:auto; margin-top: 1.7vw;">Only {{left}} left for {{thisMonth}}</h6> </div> <div style="width: 20vw; text-align: right;"> <h4 style="color: rgb(40, 46, 126);font-size: 1.3em;">Only ₹9500</h4> <h3 id='pageHead' style="color: rgb(209, 6, 6);">Grab Life Membership</h3> <h5 style="color: red;">20% Additional Discount</h5> <h6>on all services</h6> </div> </div> <p style="text-align: left; font-size: 1.21em; padding-left: 2vw; padding-right:1.4vw ;"> ✓ Free trial of yet to be launched products and services, <br> ✓ Opportunity to earn as MNF Correspondent, <br> ✓ Get a committed Relationship Manager, <br> ✓ Be on the MNF Life members’ page, propose and set up a Harkat Club in your locality, <br> ✓ Get priority notifications/ information for filmmaking related business proposals/assignments/opportunities. <br> </p> <br> </div> <form action="{% url 'payment' %}" method="post"> {%csrf_token%} <input type="text" style="display: none;" name="plan" value='Life' id="plan" required> <button type="submit" style="margin-top: -0.3em;">Buy Now</button> </form> </div> </div> <div id="boxD" style="display: none;padding: 1em; width: 40vw;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); position: absolute; background-color: white; top: 50%; left: 50%; transform: translate(-50%,-50%);"> <form action="{% url 'payment' %}" method="post"> {%csrf_token%} <div style="display: flex;"> <span style="font-size: 1.3em; font-weight: bold; margin-right: 13%;">Amount to be paid</span> <span style="font-size: 1.3em; font-weight: bold; margin-right: 13%;" id="amount"></span> <input type="text" style="display: none;" name="plan" id="plan" required> <button class="btn btn-success">Proceed To Pay</button> </div> </form> </div> {%if planId%} <div style="text-align: center;position: absolute;width: 50vw; left: 25%; top: 40%;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);"> {% if response %} <div style="display: grid; grid-template-columns: auto auto auto; background-color: white; padding: 1em;"> <span style="font-size: 1.3em; font-weight: bold; margin-right: 15%;margin-top: 6px;">Amount to be paid</span> <span style="font-size: 1.3em; font-weight: bold; margin-right: 15%;margin-top: 6px;" id="amount">₹{{amount}}</span> <input type="text" style="display: none;" name="plan" id="plan" required> <button class="btn btn-success" id = "rzp-button1">Buy Now</button> </div> {% endif %} </div> {% endif %} {%if response2%} <div style="text-align: center;position: absolute;width: 40vw;left: 30vw; top:40%;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);"> <div style="display: grid; grid-template-columns: auto auto auto; background-color: white; padding: 1em;"> <span style="font-size: 1.3em; font-weight: bold; margin-right: 15%;margin-top: 6px;">Amount to be paid</span> <span style="font-size: 1.3em; font-weight: bold; margin-right: 15%;margin-top: 6px;" id="amount">₹{{amount}}</span> <input type="text" style="display: none;" name="plan" id="plan" required> <button class="btn btn-success" id = "rzp-button2">Buy Now</button> </div> </div> {% endif %} </div> </div> {%endif%} <script> function addgift(){ document.getElementById('giftForm').style.display = 'block'; } function month(){ document.getElementById('amount').innerHTML="₹100" // document.getElementById('typeM').innerHTML="Monthly Plan" // document.getElementById('dateM').innerHTML="" document.getElementById('plan').value="Monthly plan" document.getElementById('boxD').style.display = 'block'; } function year(){ document.getElementById('amount').innerHTML="₹1000" document.getElementById('plan').value="yearly" // document.getElementById('typeM').innerHTML="Yearly Plan" // document.getElementById('dateM').innerHTML="" document.getElementById('boxD').style.display = 'block'; } function Life(){ document.getElementById('amount').innerHTML="₹9500" document.getElementById('plan').value="Life" // document.getElementById('typeM').innerHTML="Yearly Plan" // document.getElementById('dateM').innerHTML="" document.getElementById('boxD').style.display = 'block'; } function student(){ document.getElementById('amount').innerHTML="50" document.getElementById('plan').value="student" } </script> <script src = "https://checkout.razorpay.com/v1/checkout.js"></script> <!--<script> // var options = { "key": "rzp_live_ZCKOJ4oKnyYgjf", "subscription_id": "{{sub_id}}", "name": "MyNextFilm", "description": "subscribe to MyNextFilm", "image": "{% static 'logo.jpg' %}", "handler": function(response) {callback_url: "", alert(response.razorpay_payment_id), alert(response.razorpay_subscription_id), alert(response.razorpay_signature); }, "prefill": { "name": "{{user.first_name}} {{user.last_name}}", "email": "{{user.email}}", "contact": "" }, "notes": { "note_key_1": "Tea. Earl Grey. Hot", "note_key_2": "Make it so." }, "theme": { "color": "#ee3c4d" } };var rzp1 = new Razorpay(options);document.getElementById('rzp-button1').onclick = function(e) { rzp1.open(); e.preventDefault();} var options = { "key": "rzp_live_ZCKOJ4oKnyYgjf", "subscription_id": "{{sub_id}}", "name": "MyNextFilm", "description": "subscribe to MyNextFilm", "image": "{% static 'logo.jpg' %}", "prefill": { "name": "{{user.first_name}} {{user.last_name}}", "email": "{{user.email}}", "contact": "" }, "handler": function (response){ alert(response.razorpay_payment_id); // alert(response.razorpay_order_id); // alert(response.razorpay_signature) window.location.href = "/pay/success/"+response.razorpay_payment_id+"/"+response.razorpay_signature; }, "notes": { "note_key_1": "Tea. Earl Grey. Hot", "note_key_2": "Make it so." }, "theme": { "color": "#ee3c4d" } }; var rzp1 = new Razorpay(options); rzp1.on('payment.failed', function (response){ alert(response.error.code); alert(response.error.description); // alert(response.error.source); // alert(response.error.step); // alert(response.error.reason); // alert(response.error.metadata.order_id); // alert(response.error.metadata.payment_id); window.location.href = "/pay/failed/"+response.error.code+"/"+response.error.description+'/'+response.error.metadata.order_id; }); document.getElementById('rzp-button1').onclick = function(e) { rzp1.open(); e.preventDefault();} </script> --> <script> var options = { "key": "rzp_live_ZCKOJ4oKnyYgjf", // Enter the Key ID generated from the Dashboard "amount": "{{amount}}", // Amount is in currency subunits. Default currency is INR. Hence, 50000 refers to 50000 paise "currency": "INR", "name": "MyNextFilm", "description": "Subscribe "+'{{desc}}'+" Membership", "image": "{% static 'logo.jpg' %}", "order_id": "{{ord_id}}", //This is a sample Order ID. Pass the `id` obtained in the response of Step 1 "prefill": { "name": "{{user.first_name}} {{user.last_name}}", "email": "{{user.email}}", "contact": ""}, "handler": function (response){ alert(response.razorpay_payment_id); // alert(response.razorpay_order_id); // alert(response.razorpay_signature) window.location.href = "/pay/success/"+response.razorpay_order_id+"/"+response.razorpay_signature; }, "notes": { "address": "Razorpay Corporate Office" }, "theme": { "color": "#ee3c4d" } }; var rzp2 = new Razorpay(options); rzp2.on('payment.failed', function (response){ // alert(response.error.code); // alert(response.error.description); // alert(response.error.source); // alert(response.error.step); // alert(response.error.reason); // alert(response.error.metadata.order_id); // alert(response.error.metadata.payment_id); window.location.href = "/pay/failed/" }); document.getElementById('rzp-button2').onclick = function(e){ rzp2.open(); e.preventDefault(); } </script> <script> var options = { "key": "rzp_live_ZCKOJ4oKnyYgjf", // Enter the Key ID generated from the Dashboard "amount": "{{amount}}", // Amount is in currency subunits. Default currency is INR. Hence, 50000 refers to 50000 paise "currency": "INR", "name": "MyNextFilm", "description": "Subscribe "+'{{desc}}'+" Membership", "image": "{% static 'logo.jpg' %}", "order_id": "{{ord_id}}", //This is a sample Order ID. Pass the `id` obtained in the response of Step 1 "prefill": { "name": "{{user.first_name}} {{user.last_name}}", "email": "{{user.email}}", "contact": ""}, "handler": function (response){ alert(response.razorpay_payment_id); // alert(response.razorpay_order_id); // alert(response.razorpay_signature) window.location.href = "/pay/success2/"+response.razorpay_order_id+"/"+response.razorpay_signature; }, "notes": { "address": "Razorpay Corporate Office" }, "theme": { "color": "#ee3c4d" } }; var rzp2 = new Razorpay(options); rzp2.on('payment.failed', function (response){ // alert(response.error.code); // alert(response.error.description); // alert(response.error.source); // alert(response.error.step); // alert(response.error.reason); // alert(response.error.metadata.order_id); // alert(response.error.metadata.payment_id); window.location.href = "/pay/failed/" }); document.getElementById('rzp-button2').onclick = function(e){ rzp2.open(); e.preventDefault(); } </script> <script> function add_months(dt, n) { return new Date(dt.setMonth(dt.getMonth() + n)); } '{% if dataP3%}' dt = new Date('{{dataP3.dateSubscribed.year}}','{{dataP3.dateSubscribed.month}}','{{dataP3.dateSubscribed.day}}'); // alert(add_months(dt, 10).toString()) // console.log(add_months(dt, 12).toString()); dateObj = add_months(dt, parseInt('{{dataP3.months}}')) var month = dateObj.getUTCMonth() + 1; //months from 1-12 var day = dateObj.getUTCDate(); var year = dateObj.getUTCFullYear(); document.getElementById('validity').innerHTML = day + "-" + month + "-" + year // document.getElementById('validity').innerHTML = "add" '{%endif%}' '{% if dataP4%}' dt2 = new Date('{{dataP4.dateSubscribed.year}}','{{dataP4.dateSubscribed.month}}','{{dataP4.dateSubscribed.day}}'); // alert(add_months(dt2, 120).toString()) // console.log(add_months(dt, 12).toString()); dateObj2 = add_months(dt2, 120) var month2 = dateObj2.getUTCMonth() + 1; //months from 1-12 var day2 = dateObj2.getUTCDate(); var year2 = dateObj2.getUTCFullYear(); document.getElementById('validity2').innerHTML = day2 + "-" + month2 + "-" + year2 '{%endif%}' </script> {%endif%} {%endblock%}