Conversion_Kitchen_Code/kitchen_counter/payment/templates/payments/payment.html.save

432 lines
19 KiB
Plaintext
Executable File
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{% 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%}