478 lines
14 KiB
HTML
Executable File
478 lines
14 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
{% block content %} {% load poll_extras1 %}
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
{% comment %}
|
|
<link
|
|
rel="apple-touch-icon"
|
|
href="{%static 'homepage/assets/img/apple-touch-icon.png'%}"
|
|
/>
|
|
{% endcomment %} {% comment %}
|
|
<link
|
|
rel="icon"
|
|
href="{%static 'homepage/assets/logos/MNF-Logo-Final.png'%}"
|
|
/>
|
|
{% endcomment %}
|
|
<title>PPT Conversion - Invoice</title>
|
|
<style>
|
|
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap");
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
font-family: "Poppins", sans-serif;
|
|
}
|
|
|
|
#master-container {
|
|
border: 2px solid #ccc;
|
|
width: 90vw;
|
|
margin: 2rem auto;
|
|
}
|
|
|
|
#master-container header {
|
|
height: 100px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom: 2px solid #ccc;
|
|
}
|
|
|
|
#master-container header img {
|
|
height: 62px;
|
|
width: 99px;
|
|
margin-left: 5%;
|
|
}
|
|
|
|
#master-container header section {
|
|
margin-right: 2%;
|
|
text-align: right;
|
|
}
|
|
|
|
#master-container header section h2 {
|
|
color: #ee3c4d;
|
|
font-family: cursive;
|
|
font-style: italic;
|
|
}
|
|
|
|
#master-container header section p,
|
|
a {
|
|
color: #605d5d;
|
|
}
|
|
|
|
#master-container .body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
#master-container .body .middle {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 90%;
|
|
}
|
|
|
|
#master-container .body .middle .invoice-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
#master-container .body .middle .invoice-container h1 {
|
|
font-size: 3.2rem;
|
|
color: #ff223c;
|
|
}
|
|
|
|
#master-container .body .middle .invoice-container p {
|
|
width: 190px;
|
|
text-align: center;
|
|
padding: 0.7rem 0;
|
|
border-top: 2px solid #ccc;
|
|
border-bottom: 2px solid #ccc;
|
|
}
|
|
|
|
#master-container .body .middle .details-container {
|
|
display: flex;
|
|
margin: 2rem 0;
|
|
}
|
|
|
|
#master-container .body .middle .details-container .left {
|
|
width: 200px;
|
|
}
|
|
|
|
#master-container .body .bottom {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 5rem;
|
|
width: 90%;
|
|
}
|
|
|
|
#master-container .body .bottom .left,
|
|
#master-container .body .bottom .right {
|
|
width: 100%;
|
|
}
|
|
|
|
#master-container .body .bottom .left .red,
|
|
#master-container .body .bottom .right .red {
|
|
background: #ef4f5e;
|
|
color: #fff;
|
|
font-size: 1.2rem;
|
|
font-weight: 600;
|
|
max-width: 55%;
|
|
text-align: center;
|
|
padding: 0.7rem 55px 0.7rem 0;
|
|
border: none;
|
|
clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%, 0% 50%);
|
|
}
|
|
|
|
#master-container .body .bottom .left .card {
|
|
height: 440px;
|
|
border: 2px solid #ccc;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
#master-container .body .bottom .right .card {
|
|
max-height: 450px;
|
|
border: 2px solid #ccc;
|
|
}
|
|
|
|
#master-container .body .bottom .left .card div:nth-child(1),
|
|
#master-container .body .bottom .right .card div:nth-child(1) {
|
|
margin-top: 26px;
|
|
}
|
|
|
|
#master-container .body .bottom .left .card div,
|
|
#master-container .body .bottom .right .card div {
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
padding: 0.4rem 1rem;
|
|
font-size: 1.1rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
#master-container .body .bottom .right .card .green {
|
|
display: block;
|
|
background: rgb(208, 255, 208);
|
|
}
|
|
|
|
#master-container .body .bottom .right .card .green section {
|
|
max-width: 65%;
|
|
padding: 0.4rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-left: 10%;
|
|
}
|
|
|
|
#master-container .body .bottom .right .card .green .total-discount {
|
|
max-width: 100%;
|
|
min-width: 101%;
|
|
margin-left: 0;
|
|
}
|
|
|
|
#master-container .body .bottom .right .card .light-red {
|
|
background: rgb(255, 194, 194);
|
|
}
|
|
|
|
#master-container .body .bottom .right .card .light-red p {
|
|
color: red;
|
|
}
|
|
|
|
#master-container .body .bottom .right .card .bold,
|
|
#master-container .body .bottom .right .card .light-red .bold {
|
|
font-weight: 600;
|
|
color: black;
|
|
}
|
|
|
|
#master-container .body .lower {
|
|
margin: 2rem 0;
|
|
width: 100%;
|
|
}
|
|
|
|
#master-container .body .lower .terms-service .blue {
|
|
color: #5a83ef;
|
|
}
|
|
|
|
#master-container .body .lower .pay-container {
|
|
text-align: center;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
#master-container .body .lower .pay-container button {
|
|
background: #f0505f;
|
|
color: #fff;
|
|
width: 200px;
|
|
border: none;
|
|
border-radius: 12px;
|
|
height: 50px;
|
|
font-size: 1.3rem;
|
|
font-weight: 600;
|
|
margin-top: 1rem;
|
|
margin-left: 0.5rem;
|
|
cursor: pointer;
|
|
box-shadow: 0 0 5px #000;
|
|
}
|
|
|
|
form {
|
|
width: 90%;
|
|
}
|
|
|
|
@media screen and (width < 1355px) {
|
|
#master-container .body .bottom .left .red,
|
|
#master-container .body .bottom .right .red {
|
|
max-width: 70%;
|
|
}
|
|
}
|
|
|
|
@media screen and (width < 1024px) {
|
|
#master-container .body .bottom {
|
|
flex-direction: column;
|
|
gap: 2rem;
|
|
}
|
|
|
|
#master-container .body .bottom .left .red,
|
|
#master-container .body .bottom .right .red {
|
|
max-width: 55%;
|
|
}
|
|
}
|
|
|
|
@media screen and (width < 555px) {
|
|
#master-container .body .bottom .left .red,
|
|
#master-container .body .bottom .right .red {
|
|
max-width: 70%;
|
|
}
|
|
|
|
#master-container .body .bottom .right .card .green section {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
@media screen and (width < 500px) {
|
|
#master-container header {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
#master-container header img {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media screen and (width < 400px) {
|
|
#master-container {
|
|
width: 98vw;
|
|
}
|
|
|
|
#master-container .body .middle {
|
|
width: 95%;
|
|
}
|
|
|
|
#master-container .body .bottom .left .red,
|
|
#master-container .body .bottom .right .red {
|
|
max-width: 90%;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<main id="master-container">
|
|
<header>
|
|
<img src="/static/media/23.png" alt="img" />
|
|
<section class="right">
|
|
<h2>My Next Film Pvt. Ltd.</h2>
|
|
<p>CIN - U92419DL2021PTC381570</p>
|
|
<a href="https://mynextfilm.ai/">www.mynextfilm.ai</a>
|
|
</section>
|
|
</header>
|
|
<div class="body">
|
|
<section class="middle">
|
|
<div class="invoice-container">
|
|
<h1>Invoice</h1>
|
|
<p id="date">{{date_at}}</p>
|
|
</div>
|
|
<div class="details-container">
|
|
<div class="left">
|
|
<p>Bill to</p>
|
|
<p>Email Id</p>
|
|
<p>Contact Number</p>
|
|
<p>Address</p>
|
|
<p>Invoice For</p>
|
|
</div>
|
|
<div class="right">
|
|
<p>{{name}}</p>
|
|
<p>{{email_id}}</p>
|
|
<p class="available2">{{phone_number}}</p><p class="not-available2">N/A</p>
|
|
<p class="available">{{address}}</p><p class="not-available">N/A</p>
|
|
<p>PPT Conversion</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="bottom">
|
|
<div class="left">
|
|
<p class="red">Service Details</p>
|
|
<div class="card">
|
|
<div>
|
|
<p>Presentation Title</p>
|
|
<p>{{ppt_title}}</p>
|
|
</div>
|
|
<div>
|
|
<p>no. of slides</p>
|
|
<p>{{numPages}}</p>
|
|
</div>
|
|
<div>
|
|
<p>Source language of Presentation</p>
|
|
<p>{{ndial_src}}</p>
|
|
</div>
|
|
<div>
|
|
<p>Desired language of Presentation</p>
|
|
<p>{{ndial_dest}}</p>
|
|
</div>
|
|
<div>
|
|
<p>Source script of Presentation</p>
|
|
<p>{{dial_src_script}}</p>
|
|
</div>
|
|
<div>
|
|
<p>Desired script of Presentation</p>
|
|
<p>{{dial_dest_script}}</p>
|
|
</div>
|
|
<div>
|
|
<p>Vetting by LPP</p>
|
|
<p>{{lpp_available}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<p class="red">Charges Payable</p>
|
|
<div class="card">
|
|
<div>
|
|
<p>Charges as per Card rate</p>
|
|
<p class="bold">${{sub_total}}</p>
|
|
</div>
|
|
<div class="green">
|
|
<section>
|
|
<p>Membership Discount</p>
|
|
<p>${{membership_discount}}</p>
|
|
</section>
|
|
<section>
|
|
<p>Team Discount</p>
|
|
<p>${{staff_discount}}</p>
|
|
</section>
|
|
<section>
|
|
<p>Student Discount</p>
|
|
<p>${{student_discount}}</p>
|
|
</section>
|
|
<section>
|
|
<p>Early Bird Discount</p>
|
|
<p>${{early_bird_discount}}</p>
|
|
</section>
|
|
<section class="total-discount">
|
|
<p>Total Discount</p>
|
|
<p>${{total_discount}}</p>
|
|
</section>
|
|
</div>
|
|
<div>
|
|
<p>Net Service Charges</p>
|
|
<p>${{net_service_charge}}</p>
|
|
</div>
|
|
{% if monthly_membership %}
|
|
<div>
|
|
<p>Monthly Subscription</p>
|
|
<p>$1</p>
|
|
</div>
|
|
{%endif %} {% if monthly_membership %}
|
|
<div>
|
|
<p>Total Payable</p>
|
|
<p>${{net_service_charge|add_one}}</p>
|
|
</div>
|
|
{% else %}
|
|
<div>
|
|
<p>Total Payable</p>
|
|
<p>${{net_service_charge}}</p>
|
|
</div>
|
|
{% endif %}
|
|
<div>
|
|
<p>Taxes</p>
|
|
<p>${{gst_calculate}}</p>
|
|
</div>
|
|
{% if monthly_membership %}
|
|
<div class="light-red">
|
|
<p>Gross Payable</p>
|
|
<p class="bold">${{gross_payable|add_one}}</p>
|
|
</div>
|
|
{% else %}
|
|
<div class="light-red">
|
|
<p>Gross Payable</p>
|
|
<p class="bold">${{gross_payable}}</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<form action="{% url 'pptCheckout'%}" method="POST">
|
|
{%csrf_token%} {% if lpp_available == 'YES' %}
|
|
<input id="lpp1" type="hidden" name="want_to_be_vetted" value="yes" />
|
|
{% endif %}
|
|
<section class="lower">
|
|
<div class="terms-service">
|
|
<input type="checkbox" id="agreement" required />
|
|
<label for="agreement">I Agree with the </label
|
|
><a href="{% url 'tnc_base' %}" target="_blank" class="blue">Terms of Payment</a>
|
|
</div>
|
|
<div class="pay-container">
|
|
{% if balance != -1 %}
|
|
<div>
|
|
<input type="checkbox" name="pay_wallet" id="pay" />
|
|
<label for="pay">Pay with Wallet (Rs. <span id="wallet-balance">{{balance}}</span>)</label>
|
|
</div>
|
|
{% endif %}
|
|
<button id="pay-btn">Pay Now</button>
|
|
</div>
|
|
</section>
|
|
</form>
|
|
</div>
|
|
</main>
|
|
|
|
<script>
|
|
const walletBalance = document.getElementById("wallet-balance");
|
|
TotalWalletBalance = parseFloat(walletBalance.innerText);
|
|
TotalWalletBalance = TotalWalletBalance.toFixed(2);
|
|
walletBalance.innerText = TotalWalletBalance;
|
|
|
|
const dataAvailable = document.querySelector(".available")
|
|
const dataNotAvailable = document.querySelector(".not-available");
|
|
|
|
let dataAvailableToString = dataAvailable.innerHTML;
|
|
dataAvailableToString = JSON.stringify(dataAvailableToString);
|
|
|
|
if (dataAvailableToString === "\"None\"" || dataAvailable.textContent === "") {
|
|
dataNotAvailable.style.display = "block";
|
|
dataAvailable.style.display = "none";
|
|
} else {
|
|
dataNotAvailable.style.display = "none";
|
|
dataAvailable.style.display = "block";
|
|
}
|
|
|
|
const dataAvailable2 = document.querySelector(".available2")
|
|
const dataNotAvailable2 = document.querySelector(".not-available2");
|
|
|
|
let dataAvailableToString2 = dataAvailable2.innerHTML;
|
|
dataAvailableToString2 = JSON.stringify(dataAvailableToString2);
|
|
|
|
if (dataAvailableToString2 === "\"None\"" || dataAvailable2.textContent === "") {
|
|
dataNotAvailable2.style.display = "block";
|
|
dataAvailable2.style.display = "none";
|
|
} else {
|
|
dataNotAvailable2.style.display = "none";
|
|
dataAvailable2.style.display = "block";
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|
|
{%endblock%}
|