422 lines
18 KiB
HTML
Executable File
422 lines
18 KiB
HTML
Executable File
|
||
{% 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%}
|
||
<h6 style="text-align: right;"><button onclick="window.history.back()" style="width:2vw; height:2vw;padding: 3px; border-radius: 4px; color: white; background-color: red;">x</button></h6>
|
||
|
||
<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%}
|
||
<h6 style="text-align: right;"><button onclick="window.history.back()" style="width:2vw; height:2vw;padding: 3px; border-radius: 4px; color: white; background-color: red;">x</button></h6>
|
||
|
||
<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%}
|
||
<h6 style="text-align: right;"><button onclick="window.history.back()" style="width:2vw; height:2vw;padding: 3px; border-radius: 4px; color: white; background-color: red;">x</button></h6>
|
||
|
||
<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>
|
||
{% if user.is_staff %}
|
||
<div style="margin: 0.5em; margin-left:5vw;">
|
||
<b>MNF Employee discount of 50% added.</b>
|
||
</div>
|
||
{%endif%}
|
||
|
||
</div>
|
||
{% if user.is_staff %}
|
||
<div class="item2">
|
||
<div>
|
||
<b style="color: rgb(40, 46, 126); font-size: 1.3em;"> <span style="font-size: 1.3em;">
|
||
<del>₹100</del> ₹50</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 special' 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;">
|
||
<del>₹1000</del> ₹500</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 special' id="plan" required>
|
||
<button type="submit" style="margin-top: -0.3em;">Buy Now</button>
|
||
</form>
|
||
|
||
</div>
|
||
|
||
{%else%}
|
||
<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>
|
||
{%endif%}
|
||
<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>
|
||
|
||
{%if response%}
|
||
<div id="amt-cont" style="padding: 5px;background-color: white;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);">
|
||
<h6 style="text-align: right;"><button onclick="$('#amt-cont').hide()" style="width:2vw; height:2vw;padding: 3px; border-radius: 4px; color: white; background-color: red;">x</button></h6>
|
||
<div style="text-align: center;">
|
||
{% if response %}
|
||
<div style="display: grid; grid-template-columns: auto auto auto; 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>
|
||
</div>
|
||
|
||
{% endif %}
|
||
{%if response2%}
|
||
<div id="amt-cont" style="padding: 5px;background-color: white;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);">
|
||
<h6 style="text-align: right;"><button onclick="$('#amt-cont').hide()" style="width:2vw; height:2vw;padding: 3px; border-radius: 4px; color: white; background-color: red;">x</button></h6>
|
||
<div style="text-align: center;">
|
||
<div style="display: grid; grid-template-columns: auto auto auto; 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>
|
||
</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", // 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 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/";
|
||
|
||
});
|
||
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/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%}
|