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

1897 lines
67 KiB
HTML
Executable File
Raw 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 %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- font-awesome -->
{% comment %} <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
integrity="sha512-MCQjHzXiDGfqw3jGxooYf7c3M2WEj5eqXWquqwfz3LN+mzIMHf/AaXoAdIcmhvZBWHaxROm5ZOFxjkoC+Gu9KA=="
crossorigin="anonymous" referrerpolicy="no-referrer" /> {% endcomment %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" type="text/css"
href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<!-- <link rel="stylesheet" href="project4.css"> -->
<!-- Refused to apply style from 'http://115.245.192.138/project4.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. -->
<base href="static/media/">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script src="https://js.stripe.com/v3/"></script>
<link rel="stylesheet" type="text/css" href=".." href="{% static 'homepage/css/style.css' %}">
<style>
* {
box-sizing: border-box;
}
body{
overflow-x:hidden;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
margin: 20px;
width: 446px;
height: 700px;
}
/* Should be removed. Only for demonstration *
/* Clear floats after the columns */
/*.row:after {
content: "";
display: table;
clear: both;
}
.shape {
width: 354px;
height: 115px;
background-color: green;
-webkit-clip-path: polygon(0 0, 900% 0, 100% 0%, 50% 100%, 0 0%);
clip-path: polygon(0 0, 900% 0, 100% 0%, 50% 100%, 0 0%);
position: relative;
}
.shape:before {
content: '';
width: 341px;
height: 113px;
-webkit-clip-path: polygon(0 0, 900% 0, 100% 0%, 50% 100%, 0 0%);
clip-path: polygon(0 0, 900% 0, 100% 0%, 50% 100%, 0 0%);
background: white;
display: block;
position: absolute;
top: 1px;
left: 1px;
}
.shape2 {
width: 454px;
height: 115px;
background-color: #43479E;
-webkit-clip-path: polygon(0 0, 900% 0, 100% 0%, 50% 100%, 0 0%);
clip-path: polygon(0 0, 900% 0, 100% 0%, 50% 100%, 0 0%);
position: relative;
}
.shape2:before {
content: '';
width: 441px;
height: 113px;
-webkit-clip-path: polygon(0 0, 900% 0, 100% 0%, 50% 100%, 0 0%);
clip-path: polygon(0 0, 900% 0, 100% 0%, 50% 100%, 0 0%);
background: white;
display: block;
position: absolute;
top: 0px;
left: 0px;
}
.shape3 {
width: 454px;
height: 115px;
background-color: #ee273c;
-webkit-clip-path: polygon(0 0, 900% 0, 100% 0%, 50% 100%, 0 0%);
clip-path: polygon(0 0, 900% 0, 100% 0%, 50% 100%, 0 0%);
position: relative;
}
.shape3:before {
content: '';
width: 441px;
height: 113px;
-webkit-clip-path: polygon(0 0, 900% 0, 100% 0%, 50% 100%, 0 0%);
clip-path: polygon(0 0, 900% 0, 100% 0%, 50% 100%, 0 0%);
background: white;
display: block;
position: absolute;
top: 0px;
left: 0px;
}*/
#title {
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
font-size: 24px;
}
.footer {
position: static;
}
#box3 {
border-left: 1px solid rgba(238, 44, 61, 0.85);
border-right: 6px solid rgba(238, 44, 61, 0.85);
border-bottom: 6px solid rgba(238, 44, 61, 0.85);
border-bottom-left-radius: 150px;
border-bottom-right-radius: 75px;
}
#box2 {
border-left: 1px solid #43479e;
border-right: 6px solid #43479e;
border-bottom: 6px solid #43479e;
border-bottom-left-radius: 150px;
border-bottom-right-radius: 75px;
}
#box1 {
border-left: 1px solid #7ac043;
border-right: 6px solid #7ac043;
border-bottom: 6px solid #7ac043;
border-bottom-left-radius: 150px;
border-bottom-right-radius: 75px;
}
.flim-title {
min-height: 50px !important;
display: flex;
justify-content: center;
align-items: center;
background-color: #7ac043;
font-family: 'Poppins';
font-style: normal;
font-weight: 600;
color: white;
}
.pri-title {
min-height: 50px !important;
display: flex;
justify-content: center;
align-items: center;
background-color: #43479e;
font-family: 'Poppins';
font-style: normal;
font-weight: 600;
color: white;
}
.grab-title {
min-height: 50px !important;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: rgba(238, 44, 61, 0.85);
font-family: 'Poppins';
font-style: normal;
font-weight: 600;
color: white;
}
.p-title {
font-family: 'Poppins';
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #ee273c;
}
.pri-btn1 {
color: white;
font-weight: bold;
border: none;
width: 80%;
background: #43479E;
}
.pri-btn2 {
color: white;
font-weight: bold;
border: none;
width: 80%;
background: rgba(248, 69, 88, 0.85);
}
.pri-btnnone {
color: red;
font-weight: bold;
border: none;
width: 80%;
cursor:default;
}
.pri-btn1:hover {
transform: scale(1.1);
cursor: pointer;
}
.card-body li {
font-weight: 500;
}
/*.card1 {
background-image: url("./1.png") !important;
}*/
.batn {
width: 310px;
height: 30px;
background-color: #ee3c4d;
color: #fff;
border: solid #ee3c4d 1px;
border-radius: 20px;
font-size: 14px;
font-weight: bold;
float: right;
text-align: center;
margin-right: 25px;
}
.p-free,
.p-board,
.p-privilege {
text-align: right;
position: relative;
}
.p-free img {
position: absolute;
top: -30px;
right: 30px;
}
.pri-btn2:hover {
transform: scale(1.1);
cursor: pointer;
}
.p-board img {
/*background-image: url("{% static 'media/Ellipse 1.png' %}");
background-repeat: no-repeat;*/
background-color: #43479e;
border-radius: 50%;
position: absolute;
top: -30px;
right: 30px;
}
.p-privilege img {
/*background-image: url("{% static 'media/Ellipse 1.png' %}");
background-repeat: no-repeat;*/
background-color: #43479e;
border-radius: 50%;
position: absolute;
top: -20px;
right: 30px;
}
.p-additional {
background-repeat: no-repeat;
text-align: center;
color: #43479E;
margin-top: 100px !important;
font-weight: bold;
}
.batn:hover {
transform: scale(1.1)
}
.col {
margin-bottom: 50px;
}
.promo-container {
position: relative;
display: inline-block;
}
.promo-text {
position: relative;
color: white;
font-size: 24px;
font-weight: bold;
text-align: center;
z-index: 2;
white-space: nowrap;
}
.promo-star {
position: absolute;
top: 0;
margin-left: -143px;
margin-top: -3px;
width: 281px;
height: 46px;
z-index: 1;
}
.p-pop8,
.pop8 {
display: none;
position: absolute;
top: 13vh;
background: linear-gradient(to bottom,
rgba(254,
255,
255,
0.7),
rgba(254,
255,
255,
0.7)),
url("{%static 'media/./49.jpeg'%}") no-repeat center center/cover;
left: 24vw;
width: 54vw;
height: 75vh;
border: 4px solid purple;
border-radius: 20px;
padding: 20px;
z-index: 20;
}
.p-pop88,
.pop88 {
display: none;
position: absolute;
top: 13vh;
background:#FFE2E5;
left: 27vw;
min-width: 600px;
min-height: 450px;
border-radius: 20px;
padding: 20px;
z-index: 20;
}
.center_align {
display: flex;
justify-content: space-between;
margin: 0px 20px;
}
.jp_button_1 {
width: 190px;
height: 30px;
border: none;
border-radius: 40px;
font-weight: 600;
font-size: 14px;
top: 11px;
position: relative;
font-family: inherit;
cursor: pointer;
background: linear-gradient(90deg, rgba(96, 49, 134, 1) 0%, rgba(107, 56, 136, 1) 44%, rgba(238, 60, 77, 1) 73%, rgba(238, 60, 77, 1) 100%);
color: #ffff;
}
{% comment %} .hidden {
display: none;
} {% endcomment %}
{% comment %} #jp_table1{
display: block;
height: 60vh;
overflow: auto;
} {% endcomment %}
#jp_table1 {
display: block;
height: 63vh;
overflow: auto;
{% comment %} display: flex;
justify-content: center;
text-align: center; {% endcomment %}
margin-top: 20px;
margin-left:20px;
margin-bottom:20px;
}
#jp_table2{
height: 60vh;
overflow: auto;
display:none;
{% comment %} display: flex;
justify-content: center;
text-align: center; {% endcomment %}
margin-top: 20px;
margin-left:20px;
}
.btn {
background: #7634d9;
background-image: -webkit-linear-gradient(left, #55318b, rgb(238, 60, 77));
background-image: -moz-linear-gradient(left, #55318b, rgb(238, 60, 77));
background-image: -ms-linear-gradient(left, #55318b, rgb(238, 60, 77));
background-image: -o-linear-gradient(left, #55318b, rgb(238, 60, 77));
background-image: linear-gradient(to right, #55318b, rgb(238, 60, 77));
border-radius: 60px;
color: #ffffff;
font-size: 2vh;
padding: 3px 17px 2px 13px;
text-decoration: none;
border: none;
/*cursor: pointer;*/
font-family: Poppins, Helvetica, "sans-serif";
font-weight: bold;
}
.pop1btn8 {
width: 32vw;
height: 6vh;
position: absolute;
top: -3vh;
left: 11vw;
align-items: center;
font-size: 2vw;
font-family: Poppins, Helvetica, "sans-serif";
font-weight: bold;
}
.red-cross-btn {
border: 1px solid whitesmoke;
font-size: 12px;
border-radius: 50%;
background-color: #d64242;
color: white;
height: 18px;
width: 18px;
display: flex;
justify-content: center;
align-items: center;
font-weight: 700;
cursor: pointer;
z-index: 999;
padding:17px;
}
.red-cross-btn {
position: absolute;
top: -20px;
right: -10px;
}
.jp_button_1_clicked {
background:#FFE2E6;
color:#EE3C4D;
}
.table-con table td,
.table-con-discount table td,
.table-div table td {
width: max-content;
font-size: 1vw;
padding: 5px 2px;
color: #444 !important;
font-family: Poppins, Helvetica, "sans-serif";
font-weight: bold;
}
.table-con table td,
.table-con-discount table td,
.table-div table td {
position: relative;
left: .5vw;
}
.table-div table {
background-color: rgba(246, 220, 220, 0.5);
border: 1px solid #6f6e6e;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
table-layout: fixed;
color: #444 !important;
}
.table-div td,
tr {
border: 1px solid #f97474;
border-collapse: collapse;
padding: 0;
margin: 0;
}
.table-con td,
tr {
border-bottom: 1px solid #f97474;
border-collapse: collapse;
padding: 0;
margin: 0;
}
.table-con-discount td,
tr {
border-bottom: 1px solid #f97474;
border-collapse: collapse;
padding: 0;
margin: 0;
}
.table-con table,
.table-con-discount table {
border: none;
margin: 0;
padding: 0;
width: 100%;
table-layout: fixed;
color: #444;
}
.table-con thead td,
.table-div thead td {
color: #f43434 !important;
font-size: 1.3vw !important;
padding: 2px 2px !important;
}
.table-con tbody td {
font-size: 1vw !important;
}
.table-con-discount thead td {
color: #f43434 !important;
font-size: 30px !important;
padding: 10px 2px !important;
}
.jp_tablehead,.jp_tablehead2 {
color: #EE3C4D;
background: #FFE2E6;
font-size: 14px;
padding: 2px 12px;
}
.jp_tablehead,.jp_tabledata,.jp_tablehead2 {
border: 1px solid #EE3C4D;
padding: 4px 0px;
text-align: center;
font-family: 'Poppins', sans-serif !important;
font-size: 12px;
color: #333031;
}
.jp_tabledataaa ,.jp_tableheaddd{
border: 1px solid #EE3C4D;
padding: 4px 22px;
text-align: center;
font-family: 'Poppins', sans-serif !important;
font-size: 12px;
color: #333031;
}
.extra_bold_text {
font-weight: 600;
font-weight: bolder;
}
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
.checkbox-wrapper-13 input[type=checkbox] {
--active: #EE3C4D;
--active-inner: red;
--focus: 2px #8f252f(39, 94, 254, .3);
--border: #EE3C4D;
--border-hover: #EE3C4D;
--background: #fff;
--disabled: #F6F8FF;
--disabled-inner: #E1E6F9;
-webkit-appearance: none;
-moz-appearance: none;
height: 16px;
outline: none;
display: inline-block;
vertical-align: top;
position: relative;
margin: 0;
cursor: pointer;
border: 2px solid var(--bc, var(--border));
background: var(--b, var(--background));
transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
}
.checkbox-wrapper-13 input[type=checkbox]:after {
content: "";
display: block;
left: 0;
top: 0;
position: absolute;
transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
}
.checkbox-wrapper-13 input[type=checkbox]:checked {
--b: transparent;
--bc: var(--active);
--d-o: .3s;
--d-t: .6s;
--d-t-e: cubic-bezier(.2, .85, .32, 1.2);
}
.checkbox-wrapper-13 input[type=checkbox]:disabled {
--b: var(--disabled);
cursor: not-allowed;
opacity: 0.9;
}
.checkbox-wrapper-13 input[type=checkbox]:disabled:checked {
--b: var(--disabled-inner);
--bc: var(--border);
}
.checkbox-wrapper-13 input[type=checkbox]:disabled + label {
cursor: not-allowed;
}
.checkbox-wrapper-13 input[type=checkbox]:hover:not(:checked):not(:disabled) {
--bc: var(--border-hover);
}
.checkbox-wrapper-13 input[type=checkbox]:focus {
box-shadow: 0 0 0 var(--focus);
}
.checkbox-wrapper-13 input[type=checkbox]:not(.switch) {
width: 17px;
}
.checkbox-wrapper-13 input[type=checkbox]:not(.switch):after {
opacity: var(--o, 0);
}
.checkbox-wrapper-13 input[type=checkbox]:not(.switch):checked {
--o: 1;
}
.checkbox-wrapper-13 input[type=checkbox] + label {
display: inline-block;
vertical-align: middle;
cursor: pointer;
margin-left: 3.5px;
}
.checkbox-wrapper-13 input[type=checkbox]:not(.switch) {
border-radius: 1px;
}
.checkbox-wrapper-13 input[type=checkbox]:not(.switch):after {
width: 4px;
height: 8px;
border: 2px solid var(--active-inner);
border-top: 0;
border-left: 0;
left: 5px;
top: 2px;
transform: rotate(var(--r, 20deg));
}
.checkbox-wrapper-13 input[type=checkbox]:not(.switch):checked {
--r: 43deg;
}
.jp_buynow_button {
color: #ee3a4c;
background: #FFE2E6;
border: none;
box-sizing: border-box;
padding: 2px 14px;
border-radius: 14px;
cursor: pointer;
font-style: bold;
font-size: 13px;
}
.jp_buynow_button:hover{
background:#DB5858;
color: #FFE2E6;
}
}
.italic_text {
font-style: italic;
font-weight: 600;
}
.center_bottom_text {
display: flex;
justify-content: center;
top: 20px;
position: relative;
font-size: 16px;
}
{% comment %} .jp_tablehead2 {
color: #EE3C4D;
background: #FFE2E6;
font-size: 14px;
padding: 2px 12px;
} {% endcomment %}
{% comment %} .col_width3 {
width: 105px;
} {% endcomment %}
.popo{
{% comment %} border:2px solid blue; {% endcomment %}
}
.bb{
background:#FFE2E6;
color:#EE3C4D;
}
.overlay{
z-index:44444;
border:2px solid black;
height:50vh;
weight:100px;
display: none;
background-color: rgba(0, 0, 0, 0.7);
position:absolute;
top:0;
left:30px;
{% comment %} position: fixed; {% endcomment %}
}
{% comment %} .overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
align-items: center;
justify-content: center;
} {% endcomment %}
/* Styles for the modal */
.modal {
z-index:444444;
background-color: #fff;
padding: 20px;
border-radius: 5px;
max-width: 400px;
text-align: center;
}
/* Style for the close button */
.close-btn {
z-index:4444477;
cursor: pointer;
color: #333;
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container mx-auto" style="min-height: 90vh;">
<h4 id="title">Pull Your <span style="color:#EE273C;">Filmmaking Future Into Present</span>
</h4>
<div class="pay-payment">
<div class="checkout-container ">
<button class="batn activation-btn" id="submit-button"><a href="/pay/verifygift"
style="color: white;">Activate&nbsp;Your&nbsp;Gift&nbsp;Subscription</a>
</button>
</div>
<div class="checkout-container">
{% comment %} <button class="batn activation-btn" id="submit-button" onclick="myFunction17P()" onmouseleave="SetTimeOutForIdea()"
style="color: white; margin-right:20px;">juggernaut Package
</button> {% endcomment %}
<a href="/pay/base_related"><button class="batn activation-btn" id="submit-button" onmouseleave="SetTimeOutForIdea()"
style="color: white; margin-right:20px;">juggernaut Package
</button></a>
</div>
{% comment %} check {% endcomment %}
{% comment %} <div class="checkout-container">
<button class="batn activation-btn" id="submit-button" onclick="myFunction17PP()"
style="color: white; margin-right:20px;">Check
</button>
</div> {% endcomment %}
<div class="p-pop88" style="z-index:999 !important;" >
<i class="fa-solid fa-x red-cross-btn" onclick="myFunction188()" style="cursor:pointer;"></i>
<h3>Amount: {{total_amount}} USD </h3>
<div class="payment-elements" id="payment-element"></div>
<button class="btn btn-danger px-3 py-2 mt-2" onclick="handleStripePayment()" id="stripe-pay-button">Make Payment</button>
</div>
{% comment %} end {% endcomment %}
<!-- Bundle pricing -->
<div class="p-pop8" onmouseover="typeWriter8()">
<button class="btn pop1btn8">Juggernaut Packages </button>
<i class="fa-solid fa-x red-cross-btn" onclick="myFunction18()" style="cursor:pointer;"></i>
{% comment %} <h3 class="margin-top primary-color">Coming soon..........</h3> {% endcomment %}
<div class="center_align">
<button id="production_house_button" class="jp_button_1 bb">Production Houses</button>
<button id="screenplay_writers_button" class="jp_button_1">Screenplay Writers</button>
</div>
<!-- ******************first table***************** -->
<div id="jp_table1" class="popo">
<table id="jp_table" class="jp_table">
<tr class="jp_tablerow">
<th class="jp_tablehead jp_tableheaddd" colspan="4">Package Name</th>
<th class="jp_tablehead jp_tableheaddd col_width3">Radiate</th>
<th class="jp_tablehead jp_tableheaddd col_width3">Regionalise</th>
<th class="jp_tablehead jp_tableheaddd col_width3">Globalise</th>
</tr>
<tr class="jp_tablerow">
<td class="jp_tabledata medium_bold_text" colspan="4">Validity in days</td>
<td class="jp_tabledata medium_bold_text">30</td>
<td class="jp_tabledata medium_bold_text">180</td>
<td class="jp_tabledata medium_bold_text">365</td>
</tr>
<tr class="jp_tablerow">
<td class="jp_tabledata medium_bold_text" colspan="4">Price $</td>
<td id="radiate_price" class="jp_tabledata medium_bold_text">149</td>
<td id="regionalise_price" class="jp_tabledata medium_bold_text">1499</td>
<td id="globalise_price" class="jp_tabledata medium_bold_text">14999</td>
</tr>
<tr class="jp_tablerow">
<td class="jp_tabledata jp_tabledataaa extra_bold_text " rowspan="4">Subtitling</td>
<td class="jp_tabledata left_text medium_bold_text" colspan="3">Number of Minutes Input (Any
number of videos)</td>
<td class="jp_tabledata medium_bold_text">30</td>
<td class="jp_tabledata medium_bold_text">150</td>
<td class="jp_tabledata medium_bold_text">1200</td>
</tr>
<tr class="jp_tablerow">
<td class="jp_tabledata left_text medium_bold_text" colspan="3">Output in No. of Languages</td>
<td class="jp_tabledata medium_bold_text">2</td>
<td class="jp_tabledata medium_bold_text">5</td>
<td class="jp_tabledata medium_bold_text">8</td>
</tr>
<tr class="jp_tablerow">
<td class="jp_tabledata left_text medium_bold_text" colspan="3">No. of iterations per language
</td>
<td class="jp_tabledata medium_bold_text">2</td>
<td class="jp_tabledata medium_bold_text">2</td>
<td class="jp_tabledata medium_bold_text">2</td>
</tr>
<tr class="jp_tablerow">
<td class="jp_tabledata italic_text left_text medium_bold_text" colspan="6">Note : Extra
minutes/
Subtitles in more
languages/ more
iterations
are available at normal rates.</td>
</tr>
<tr class="jp_tablerow">
<td class="jp_tabledata extra_bold_text " rowspan="8">Added Benefits</td>
<td class="jp_tabledata extra_bold_text left_text" colspan="3">No. of Projects
Scheduling and Budgeting</td>
<td class="jp_tabledata">2</td>
<td class="jp_tabledata">5</td>
<td class="jp_tabledata">10</td>
</tr>
<tr class="jp_tablerow">
<td class="jp_tabledata extra_bold_text left_text" rowspan="3">Narration in 1 language</td>
<td class="jp_tabledata italic_text right_text medium_bold_text" colspan="2">Character
Introduction
</td>
<td class="jp_tabledata">
<div class="checkbox-wrapper-13">
<input id="" type="checkbox" name="" class="jp_checkbox" value="" >
</div>
</td>
<td class="jp_tabledata">
<div class="checkbox-wrapper-13">
<input id="" type="checkbox" name="" class="jp_checkbox" value="" checked >
</div>
</td>
<td class="jp_tabledata">
<div class="checkbox-wrapper-13">
<input id="" type="checkbox" name="" class="jp_checkbox" value="" checked >
</div>
</td>
</tr>
<tr class="jp_tablerow">
<td class="jp_tabledata italic_text right_text medium_bold_text" colspan="2">Line by line
Narration
</td>
<td class="jp_tabledata">
<div class="checkbox-wrapper-13">
<input id="" type="checkbox" name="" class="jp_checkbox" value="" >
</div>
</td>
<td class="jp_tabledata">
<div class="checkbox-wrapper-13">
<input id="" type="checkbox" name="" class="jp_checkbox" value="" checked >
</div>
</td>
<td class="jp_tabledata">
<div class="checkbox-wrapper-13">
<input id="" type="checkbox" name="" class="jp_checkbox" value="" checked >
</div>
</td>
</tr>
<tr class="jp_tablerow">
<td class="jp_tabledata italic_text right_text medium_bold_text" colspan="2">Character Wise
Narration</td>
<td class="jp_tabledata">
<div class="checkbox-wrapper-13">
<input id="" type="checkbox" name="" class="jp_checkbox" value="" >
</div>
</td>
<td class="jp_tabledata">
<div class="checkbox-wrapper-13">
<input id="" type="checkbox" name="" class="jp_checkbox" value="" checked >
</div>
</td>
<td class="jp_tabledata">
<div class="checkbox-wrapper-13">
<input id="" type="checkbox" name="" class="jp_checkbox" value="" checked >
</div>
</td>
</tr>
<tr class="jp_tablerow">
<td class="jp_tabledata extra_bold_text left_text" rowspan="2">Conversion</td>
<td class="jp_tabledata italic_text right_text medium_bold_text" colspan="2">No. of Script pages
for
Conversion</td>
<td class="jp_tabledata medium_bold_text">0</td>
<td class="jp_tabledata medium_bold_text">150</td>
<td class="jp_tabledata medium_bold_text">1200</td>
</tr>
<tr class="jp_tablerow">
<td class="jp_tabledata italic_text right_text medium_bold_text" colspan="2">Conversion in
languages
with LPP</td>
<td class="jp_tabledata medium_bold_text">0</td>
<td class="jp_tabledata medium_bold_text">1</td>
<td class="jp_tabledata medium_bold_text">1</td>
</tr>
<tr class="jp_tablerow">
<td class="jp_tabledata extra_bold_text left_text" colspan="3">AI-assisted beat wise Scene
generation</td>
<td class="jp_tabledata medium_bold_text">100</td>
<td class="jp_tabledata medium_bold_text">500</td>
<td class="jp_tabledata medium_bold_text">5000</td>
</tr>
<tr class="jp_tablerow">
<td class="jp_tabledata extra_bold_text left_text" colspan="3">Screenplay Audit</td>
<td class="jp_tabledata">
<div class="checkbox-wrapper-13">
<input id="" type="checkbox" name="" class="jp_checkbox" value="" checked >
</div>
</td>
<td class="jp_tabledata">
<div class="checkbox-wrapper-13">
<input id="" type="checkbox" name="" class="jp_checkbox" value="" checked >
</div>
</td>
<td class="jp_tabledata">
<div class="checkbox-wrapper-13">
<input id="" type="checkbox" name="" class="jp_checkbox" value="" checked >
</div>
</td>
</tr>
<tr class="jp_tablerow">
<td class="jp_tabledata" colspan="4"></td>
<td class="jp_tabledata">
{% if user.is_authenticated%}
<button onclick="handleUrlWithPricing('Radiate','149')" class="jp_buynow_button medium_bold_text" id="buybutton1">Buy Now </button>
{% else %}
<button onclick="alert('Please log in to access this feature.');" class="jp_buynow_button" >Buy Now </button>
{% endif %}
</td>
<td class="jp_tabledata">
{% if user.is_authenticated%}
<button onclick="handleUrlWithPricing('Regionalise','1499')" class="jp_buynow_button medium_bold_text" id="buybutton2">Buy Now</button>
{% else %}
<button onclick="alert('Please log in to access this feature.');" class="jp_buynow_button medium_bold_text">Buy Now</button>
{% endif %}
</td>
<td class="jp_tabledata">
{% if user.is_authenticated%}
<button onclick="handleUrlWithPricing('Globalise','14999')" class="jp_buynow_button medium_bold_text" id="buybutton3">Buy Now</button>
{% else %}
<button onclick="alert('Please log in to access this feature.');" class="jp_buynow_button medium_bold_text">Buy Now</button>
{% endif %}
</td>
</tr>
</table>
</div>
<!-- ******************second table***************** -->
<div id="jp_table2">
<table id="jp_table" class="jp_table">
<tr class="jp_tablerow">
<th class="jp_tablehead2" colspan="4">Package Name (For 110 Pages)</th>
<th class="jp_tablehead2 col_width3">Long Jump</th>
<th class="jp_tablehead2 col_width3">Triple Jump</th>
<th class="jp_tablehead2 col_width3">High Jump</th>
</tr>
<tr class="jp_tablerow">
<td class="jp_tabledata medium_bold_text" colspan="4">Validity in days</td>
<td class="jp_tabledata medium_bold_text">90</td>
<td class="jp_tabledata medium_bold_text">180</td>
<td class="jp_tabledata medium_bold_text">365</td>
</tr>
<tr class="jp_tablerow">
<td class="jp_tabledata medium_bold_text" colspan="4">Price $</td>
<td id="longjump_price" class="jp_tabledata medium_bold_text">149</td>
<td id="triplejump_price" class="jp_tabledata medium_bold_text">274</td>
<td id="highjump_price" class="jp_tabledata medium_bold_text">399</td>
</tr>
<tr class="jp_tablerow">
<td class="jp_tabledata left_text extra_bold_text" colspan="4">AI-assisted beat wise Scene
generation</td>
<td class="jp_tabledata medium_bold_text">500</td>
<td class="jp_tabledata medium_bold_text">1000</td>
<td class="jp_tabledata medium_bold_text">2000</td>
</tr>
<tr class="jp_tablerow">
<td class="jp_tabledata left_text extra_bold_text" colspan="4">Screenplay Audit</td>
<td class="jp_tabledata">
<div class="checkbox-wrapper-13">
<input id="" type="checkbox" name="" class="jp_checkbox" value="" checked >
</div>
</td>
<td class="jp_tabledata">
<div class="checkbox-wrapper-13">
<input id="" type="checkbox" name="" class="jp_checkbox" value="" checked >
</div>
</td>
<td class="jp_tabledata">
<div class="checkbox-wrapper-13">
<input id="" type="checkbox" name="" class="jp_checkbox" value="" checked >
</div>
</td>
</tr>
<tr class="jp_tablerow">
<td class="jp_tabledata extra_bold_text " rowspan="3">Conversion</td>
<td class="jp_tabledata italic_text left_text medium_bold_text col_width2" colspan="3">Languages
(with Vetting by Language Pair Partners)</td>
<td class="jp_tabledata ">1</td>
<td class="jp_tabledata ">3</td>
<td class="jp_tabledata ">5</td>
</tr>
<tr class="jp_tablerow">
<td class="jp_tabledata italic_text left_text medium_bold_text" colspan="3">No. of iterations
per
language</td>
<td class="jp_tabledata ">2</td>
<td class="jp_tabledata ">2</td>
<td class="jp_tabledata ">2</td>
</tr>
<tr class="jp_tablerow">
<td class="jp_tabledata italic_text left_text medium_bold_text" colspan="3">Conversion in
additional
languages
</td>
<td class="jp_tabledata extra_bold_italic_text" colspan="3">$99 each with applicable discounts
</td>
</tr>
<tr class="jp_tablerow">
<td class="jp_tabledata extra_bold_text " rowspan="3">Pitch deck creation
(in 1 language)</td>
<td class="jp_tabledata italic_text left_text medium_bold_text" colspan="3">One pager</td>
<td class="jp_tabledata">
<div class="checkbox-wrapper-13">
<input id="" type="checkbox" name="" class="jp_checkbox" value="" checked >
</div>
</td>
<td class="jp_tabledata">
<div class="checkbox-wrapper-13">
<input id="" type="checkbox" name="" class="jp_checkbox" value="" checked >
</div>
</td>
<td class="jp_tabledata">
<div class="checkbox-wrapper-13">
<input id="" type="checkbox" name="" class="jp_checkbox" value="" checked >
</div>
</td>
</tr>
<tr class="jp_tablerow">
<td class="jp_tabledata italic_text left_text medium_bold_text" colspan="3">Elevator Pitch</td>
<td class="jp_tabledata">
<div class="checkbox-wrapper-13">
<input id="" type="checkbox" name="" class="jp_checkbox" value="" checked >
</div>
</td>
<td class="jp_tabledata">
<div class="checkbox-wrapper-13">
<input id="" type="checkbox" name="" class="jp_checkbox" value="" checked >
</div>
</td>
<td class="jp_tabledata">
<div class="checkbox-wrapper-13">
<input id="" type="checkbox" name="" class="jp_checkbox" value="" checked >
</div>
</td>
</tr>
<tr class="jp_tablerow">
<td class="jp_tabledata italic_text left_text medium_bold_text" colspan="3">Screenplay Analysis
</td>
<td class="jp_tabledata">
<div class="checkbox-wrapper-13">
<input id="" type="checkbox" name="" class="jp_checkbox" value="" checked >
</div>
</td>
<td class="jp_tabledata">
<div class="checkbox-wrapper-13">
<input id="" type="checkbox" name="" class="jp_checkbox" value="" checked >
</div>
</td>
<td class="jp_tabledata">
<div class="checkbox-wrapper-13">
<input id="" type="checkbox" name="" class="jp_checkbox" value="" checked >
</div>
</td>
</tr>
<tr class="jp_tablerow">
<td class="jp_tabledata extra_bold_text" colspan="4">Scheduling and Budgeting of 1 Project</td>
<td class="jp_tabledata">
<div class="checkbox-wrapper-13">
<input id="" type="checkbox" name="" class="jp_checkbox" value="" >
</div>
</td>
<td class="jp_tabledata">
<div class="checkbox-wrapper-13">
<input id="" type="checkbox" name="" class="jp_checkbox" value="" checked >
</div>
</td>
<td class="jp_tabledata">
<div class="checkbox-wrapper-13">
<input id="" type="checkbox" name="" class="jp_checkbox" value="" checked >
</div>
</td>
</tr>
<tr class="jp_tablerow">
<td class="jp_tabledata" colspan="4"></td>
<td class="jp_tabledata">
{% if user.is_authenticated%}
<button onclick="handleUrlWithPricing('Longjump','149')" class="jp_buynow_button" id="buybutton4">Buy Now</button>
{% else %}
<button onclick="alert('Please log in to access this feature.');" class="jp_buynow_button" >Buy Now </button>
{% endif %}
</td>
<td class="jp_tabledata">
{% if user.is_authenticated%}
<button onclick="handleUrlWithPricing('Triplejump','274')" class="jp_buynow_button" id="buybutton5">Buy Now</button>
{% else %}
<button onclick="alert('Please log in to access this feature.');" class="jp_buynow_button">Buy Now </button>
{% endif %}
</td>
<td class="jp_tabledata">
{% if user.is_authenticated%}
<button onclick="handleUrlWithPricing('Highjump','399')" class="jp_buynow_button" id="buybutton6">Buy Now</button>
{% else %}
<button onclick="alert('Please log in to access this feature.');" class="jp_buynow_button" >Buy Now </button>
{% endif %}
</td>
</tr>
</table>
<div>
<p class="center_bottom_text italic_text">Note : Validity is extendable by 30 days at a price of $5
</p>
</div>
</div>
</div>
</div>
{{member_type}}
{% if user.is_authenticated and dataP3 %}
<h1 style="text-align: left;">
<i style="color:black;"> Hi {{user.username}},<br> You are already a privileged member and your membership is valid till <span id="validity">{{expiry}}(UTC)</span>
</i>
</h1>
{%elif dataP4%}
<h4 style="text-align: left;">
<i style="color:black;"> Hi {{user.username}},<br> You are already a Life member and your membership is valid till <span id="validity2">{{expiry}}(UTC)</span>
</i>
</h4>
{%else%}
<h4 style="text-align: left;">
<i style="color:black;"> Hi {{user.username}},<br> Become a privileged member to avail our exciting services.
</i>
</h4>
{%endif%}
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-5">
<div class="col" style="">
<div class="card h-100 card-style card1" id="box1">
<h4 class="flim-title">Filmmaking Democratized</h4>
<div class="card-body">
<p class="p-title">In the Idea Mall</p>
<p>
<ul>
<li>Post your ideas, scripts, etc</li>
<li>Browse ideas posted by others</li>
<li>Find Co-writers</li>
<li>Find opportunities for Script Writing</li>
</ul>
</p>
<p class="p-title">In the Viewer's Lounge</p>
<p>
<ul>
<li>Upload your Showreel and other videos.</li>
<li>Create your video introduction for everyone to see.</li>
</ul>
</p>
<p class="p-title">In the Harkat Club</p>
<p>
<ul>
<li>Free membership of Harkat Club</li>
<li>Propose and set up a Harkat Club in your locality</li>
</ul>
</p>
<p class="p-title text-center" style="font-size: 24px;margin-top:40px;">& Also.... </p>
<p>
<ul>
<li>Limited usage of conversion studio, Narration room, Script Builder, Preview Chamber etc</li>
</ul>
</p>
</div>
<p class="p-free"><img loading="lazyloading" loading="lazyloading" src="{% static 'media/Frame1.png' %}" alt=""></p>
</div>
</div>
<div class="col" style="">
<div class="card h-100 card-style" id="box2">
<h4 class=" pri-title">Privileges waiting for You!</h4>
<div class="card-body">
<p class="p-title">In the Idea Mall</p>
<p>
<ul>
<li>Auction your scripts and Projects.</li>
<li>Commission script writing assignments and find co-producers and financers</li>
</ul>
</p>
<p class="p-title">Unique Offerings!</p>
<p>
<ul>
<li>Full benefits of conversion studio, Narration room, Script Builder, Preview Chamber etc</li>
</ul>
</p>
<div class="mx-auto text-center mt-2">
{% comment %} manoj starts code for monthly payment{% endcomment %}
{% if user.is_staff %}
<form action="{% url 'payment' %}" method="post" class="buy-now-up-btn">
{%csrf_token%}
<input type="text" style="display: none;" name="plan" value='Monthly special' id="plan" required>
<input type="text" style="display: none;" name="country">
{%if monthly_disable %}
<!-- <button id='claim' type="submit" disabled class="pri-btn1 rounded p-2 mb-2" style="font-size: 18px;">claim -->
<button id='claim' type="submit" class="pri-btn1 rounded p-2 mb-2" style="font-size: 18px;">claim
Privileges <br>for 1 USD/month</button>
{%else%}
<button type="submit" class="pri-btn1 rounded p-2 mb-2" style="font-size: 18px;">Claim Privileges
<br>for 1 USD/month</button>
{%endif%}
</form>
{% else %}
<form action="{% url 'payment' %}" method="post" class="buy-now-up-btn">
4
<input type="text" style="display: none;" name="plan" value='Monthly plan' id="plan" required>
<input type="text" style="display: none;" name="country">
{%if monthly_disable %}
<!-- <button type="submit" disabled class="pri-btn1 rounded p-2 mb-2" style="font-size: 18px;">Claim -->
<button type="submit" class="pri-btn1 rounded p-2 mb-2" style="font-size: 18px;">Claim
Privileges <br>for 1 USD/month</button>
{%else%}
<button type="submit" class="pri-btn1 rounded p-2 mb-2" style="font-size: 18px;">Claim Privileges
<br>for 1 USD/month</button>
{%endif%}
</form>
{%endif%}
{% comment %} manoj ends code for monthly payment {% endcomment %}
{% comment %} <button class="pri-btn1 rounded p-2 mb-2" style="font-size: 18px;">Claim Privileges <br>for
1 USD/month</button> {% endcomment %}
<div class="mt-5">
<p class="mt-5"><span style="color: #43479E;font-size: 18px;font-weight:bold">Yearly Subscription
</span>
<br>
<span style="color: #EE273C;font-size: 16px;">10 % additional discount on all services </span>
</p>
{% comment %} manoj starts code for yearly payment{% endcomment %}
{% if user.is_staff %}
<form action="{% url 'payment' %}" method="post" class="buy-now-up-btn">
{%csrf_token%}
<input type="text" style="display: none;" name="plan" value='yearly special' id="plan" required>
<input type="text" style="display: none;" name="country">
{%if yearly_disable %}
<!-- <button class="pri-btn1 rounded p-2" type="submit" disabled style="font-size: 18px;">Claim Privileges -->
<button class="pri-btn1 rounded p-2" type="submit" style="font-size: 18px;">Claim Privileges
Now for $10</button>
{%else%}
<button class="pri-btn1 rounded p-2" type="submit" style="font-size: 18px;">Claim Privileges Now for
$10</button>
{%endif%}
</form>
{% else %}
<form action="{% url 'payment' %}" method="post" class="buy-now-up-btn">
{%csrf_token%}
<input type="text" style="display: none;" name="plan" value='yearly' id="plan" required>
<input type="text" style="display: none;" name="country">
{%if yearly_disable %}
<!-- <button class="pri-btn1 rounded p-3" type="submit" disabled style="font-size: 18px;">Claim Privileges -->
<button class="pri-btn1 rounded p-3" type="submit" style="font-size: 18px;">Claim Privileges
Now for $10</button>
{%else%}
<button class="pri-btn1 rounded p-3" type="submit" style="font-size: 18px;">Claim Privileges Now for
$10</button>
{%endif%}
</form>
{%endif%}
{% comment %} manoj ends code for yearly payment {% endcomment %}
{% comment %} <button class="pri-btn1 rounded p-5" style="font-size: 24px;">Claim Privileges Now for
$10</button> {% endcomment %}
</div>
</div>
</div>
<!-- <p class="p-privilege"><img loading="lazyloading" loading="lazyloading" src="{% static 'media/privilege 1.png' %}" alt=""></p> -->
<p class="p-privilege"><img loading="lazyloading" loading="lazyloading" src="{% static 'media/image.png' %}" alt=""></p>
</div>
</div>
<div class="col" style="">
<div class="card h-100 card-style" id="box3">
<div class=" grab-title">
<div>
<span class="" style="font-size: 16px;">Grab a Life Membership!</span><br>
<span style="font-size:12px;">For 10 years</span>
</div>
</div>
<div class="card-body">
<p class="p-title">20 % additional discount on all services</p>
<p>
<ul>
<li>Free trial of yet to be launched products and services.</li>
<li>Get a committed Relationship Manager.</li>
<li>Be on the MNF life members page.</li>
<li>Get priority notifications/ informations for filmmaking related business
proposals/assignments/opportunities</li>
</ul>
</p>
<div class="mx-auto text-center mt-2">
{% comment %} manoj code for life payment {% endcomment %}
{% if user.is_staff %}
<!-- <p class="p-title">Only {{left}} left for {{thisMonth}}</p> -->
<!-- <button class="pri-btnnone rounded p-2 mb-2" style="font-size: 18px;cursor: default;">Only {{left}} left for
{{thisMonth}}</button> -->
<!-- <img loading="lazyloading" loading="lazyloading" src="{% static 'media/art.png' %}" class="promo-star" alt="bgart">-->
<div class="promo-container">
<img loading="lazyloading" loading="lazyloading" src="{% static 'media/art.png' %}" class="promo-star" alt="bgart">
<div class="promo-text"><p class="pri-btnnone rounded p-2 mb-2" style="font-size: 18px; margin-left: 20px;" >Only {{left}} left for {{thisMonth}}</p>
</div>
</div>
{%else%}
<form action="{% url 'payment' %}" method="post">
{%csrf_token%}
<input type="text" style="display: none;" name="plan" value='Life' id="plan" required>
<input type="text" style="display: none;" name="country">
{%if life_disable %}
<!-- <button type="submit" disabled class="pri-btn2 rounded p-2 mb-2" style="font-size: 18px;">Buy for 95 -->
<button type="submit" class="pri-btn2 rounded p-2 mb-2" style="font-size: 18px;">Buy for 95
USD</button>
{%else%}
<button type="submit" class="pri-btn2 rounded p-2 mb-2" style="font-size: 18px;">Buy for 95 USD</button>
{%endif%}
</form>
{% endif %}
{% comment %} ends manoj code {% endcomment %}
{% comment %} <button class="pri-btn2 rounded p-2 mb-2" style="font-size: 18px;">Buy for 95 USD</button>
{% endcomment %}
</div>
<p class="p-title">50 % saving on Life membership for</p>
<p>
<ul>
<li>Language Pair Partners</li>
<li>MNF Messiah</li>
<li>Harkat Club Founders</li>
<li>Find opportunities for Script Writing</li>
</ul>
</p>
<div class="mx-auto text-center mt-2">
{% if user.is_staff %}
<form action="{% url 'payment' %}" method="post">
{%csrf_token%}
<input type="text" style="display: none;" name="plan" value='Life' id="plan" required>
<input type="text" style="display: none;" name="country">
{%if life_disable %}
<!-- <button type="submit" disabled class="pri-btn2 rounded p-2 mb-2" style="font-size: 18px;">Grab it now <br>for 47 USD only</button> -->
<button type="submit" class="pri-btn2 rounded p-2 mb-2" style="font-size: 18px;">Grab it now <br>for 47 USD only</button>
{%else%}
<button type="submit" class="pri-btn2 rounded p-2 mb-2" style="font-size: 18px;">Grab it now <br>for 47
USD only</button>
{%endif%}
</form>
{%else%}
<button class="pri-btn2 rounded p-2 mb-2" style="font-size: 18px;cursor:default;">Only {{left}} left for
{{thisMonth}}</button>
{% endif %}
{% comment %} <button class="pri-btn2 rounded p-2 mb-2" style="font-size: 18px;">Grab it now <br>for 47
USD only</button> {% endcomment %}
</div>
</div>
<!-- <p class="p-board"><img loading="lazyloading" loading="lazyloading" src="{% static 'media/clapperboard 1.png' %}" alt=""></p> -->
<p class="p-board"><img loading="lazyloading" loading="lazyloading" src="{% static 'media/Capture.PNG' %}" alt=""></p>
</div>
</div>
</div>
{% comment %} RAZOR PAY FORM {% endcomment %}
{% if orderId %}
<form action="{% url 'jugarnut_Razorpay' %}" method="POST" id='payment-form' style="margin-top: 100px; position: absolute; min-width: 100%;">
{%csrf_token%}
<input type="hidden" name="payment_intent_id" value='{{pid}}'>
<div id="card-element" class="card-payment"></div>
</form>
{% endif %}
</div>
<div class="mt-5">
{% comment %} {% include 'mnfapp/footer.html' %} {% endcomment %}
</div>
<script>
$(document).ready(function () {
function daysInThisMonth() {
var now = new Date();
return new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate();
}
const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September",
"October", "November", "December"
];
var today = new Date();
var currentMonth = months[today.getMonth()];
var daysLeft = daysInThisMonth() - today.getDate() + 1;
$('#days-left')[0].textContent = daysLeft;
$('#current-month')[0].textContent = currentMonth;
});
</script>
<script>
fetch("https://ipinfo.io/json?key=tryout").then(
(response) => response.json()
).then(
(jsonResponse) => {
console.log(jsonResponse)
let L = document.getElementsByName("country");
console.log(L);
for (l of L) {
l.setAttribute("value", jsonResponse.country);
}
}
)
function add_months(dt, n) {
return new Date(dt.setMonth(dt.getMonth() + n));
}
</script>
<script>
function myFunction17P() {
timeoutId = setTimeout(function () {
document.querySelector(".p-pop8").style.display = "block";
}, 200);
}
</script>
<script>
var o = 0;
var speed8 = 150;
const pop8 = document.querySelector(".pop8");
function typeWriter8() {
if (!typeWriter8.called) {
typeWriter8.called = true;
var txt8 = new Typed(".p8-auto-type", {
strings: ["<li>MNF invites you to join or set up and administer a real life filmmaking club in your city, town or neighbourhood.</li><li>MNF supports the Harkat Clubs to make and showcase their films.</li><li>MNF also refers filmmaking related opportunities and assignments to the appropriate Harkat Club.</li>"],
typeSpeed: 41,
startDelay: 3000,
showCursor: false,
});
pop8.addEventListener("mouseenter", () => {
txt8.start();
});
pop8.addEventListener("mouseleave", () => {
txt8.stop();
});
}
}
function myFunction18() {
document.querySelector(".p-pop8").style.display = "none";
}
{% comment %} function myFunction188() {
document.querySelector(".p-pop88").style.display = "none";
} {% endcomment %}
function SetTimeOutForIdea() {
clearTimeout(timeoutId);
}
</script>
<script>
document.addEventListener("DOMContentLoaded", function () {
const productionHouseButton = document.getElementById("production_house_button");
const screenplayWritersButton = document.getElementById("screenplay_writers_button");
const jpTable1 = document.getElementById("jp_table1");
const jpTable2 = document.getElementById("jp_table2");
function handleButtonClick(button, divToDisplay) {
jpTable1.style.display = "none";
jpTable2.style.display = "none";
// Remove the "jp_button_1_clicked" class from all buttons
productionHouseButton.classList.remove("bb")
screenplayWritersButton.classList.remove("jp_button_1_clicked");
// Show the specified div
divToDisplay.style.display = "block";
// Add the "jp_button_1_clicked" class to the clicked button
button.classList.add("jp_button_1_clicked");
}
// Add click event listeners to the buttons
productionHouseButton.addEventListener("click", function () {
handleButtonClick(productionHouseButton, jpTable1);
});
screenplayWritersButton.addEventListener("click", function () {
handleButtonClick(screenplayWritersButton, jpTable2);
});
});
</script>
{% comment %} check {% endcomment %}
<script>
$(document).ready(function () {
function daysInThisMonth() {
var now = new Date();
return new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate();
}
const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September",
"October", "November", "December"
];
var today = new Date();
var currentMonth = months[today.getMonth()];
var daysLeft = daysInThisMonth() - today.getDate() + 1;
$('#days-left')[0].textContent = daysLeft;
$('#current-month')[0].textContent = currentMonth;
});
</script>
<script>
fetch("https://ipinfo.io/json?key=tryout").then(
(response) => response.json()
).then(
(jsonResponse) => {
console.log(jsonResponse)
let L = document.getElementsByName("country");
console.log(L);
for (l of L) {
l.setAttribute("value", jsonResponse.country);
}
}
)
function add_months(dt, n) {
return new Date(dt.setMonth(dt.getMonth() + n));
}
</script>
<script>
function myFunction17P() {
timeoutId = setTimeout(function () {
document.querySelector(".p-pop8").style.display = "block";
}, 200);
}
{% comment %} stripe modal open {% endcomment %}
function myFunction17PP() {
timeoutId = setTimeout(function () {
document.querySelector(".p-pop88").style.display = "block";
}, 200);
}
{% comment %} stripe modal close {% endcomment %}
function myFunction188() {
document.querySelector(".p-pop88").style.display = "none";
}
</script>
<script>
var o = 0;
var speed8 = 150;
const pop8 = document.querySelector(".pop8");
function typeWriter8() {
if (!typeWriter8.called) {
typeWriter8.called = true;
var txt8 = new Typed(".p8-auto-type", {
strings: ["<li>MNF invites you to join or set up and administer a real life filmmaking club in your city, town or neighbourhood.</li><li>MNF supports the Harkat Clubs to make and showcase their films.</li><li>MNF also refers filmmaking related opportunities and assignments to the appropriate Harkat Club.</li>"],
typeSpeed: 41,
startDelay: 3000,
showCursor: false,
});
pop8.addEventListener("mouseenter", () => {
txt8.start();
});
pop8.addEventListener("mouseleave", () => {
txt8.stop();
});
}
}
function myFunction18() {
document.querySelector(".p-pop8").style.display = "none";
}
function SetTimeOutForIdea() {
clearTimeout(timeoutId);
}
</script>
<script>
function handleUrlWithPricing(package,price){
console.log('inside buy func');
window.location.href=`http://115.245.192.138/juggernaut/${package}/${price}`
//const price = parseInt(document.getElementById(price).innerText);
console.log(package,price)
}
</script>
{% comment %} button {% endcomment %}
{% if orderId %}
<script>
function makeRazorPay(){
var options = {
key: "{{pk}}",
amount: "{{amtINR}}",
currency: "INR",
order_id: "{{pid}}",
name: "MNF",
description: "Juggernaut",
image: "{% static 'logo.jpg' %}",
handler: function(response) {
// alert(response.razorpay_order_id);
// alert(response.razorpay_signature);
// alert(response.razorpay_payment_id);
var form = document.getElementById('payment-form');
var razorpay_payment_id = document.createElement('input');
razorpay_payment_id.setAttribute('type', 'hidden');
razorpay_payment_id.setAttribute('name', 'razorpay_payment_id');
razorpay_payment_id.setAttribute('value', response.razorpay_payment_id);
form.appendChild(razorpay_payment_id);
var razorpay_order_id = document.createElement('input');
razorpay_order_id.setAttribute('type', 'hidden');
razorpay_order_id.setAttribute('name', 'razorpay_order_id');
razorpay_order_id.setAttribute('value', response.razorpay_order_id);
//alert(response.razorpay_order_id)
form.appendChild(razorpay_order_id);
var razorpay_signature = document.createElement('input');
razorpay_signature.setAttribute('type', 'hidden');
razorpay_signature.setAttribute('name', 'razorpay_signature');
razorpay_signature.setAttribute('value', response.razorpay_signature);
form.appendChild(razorpay_signature);
form.submit();
},
theme: {
color: "#ee3c4d",
},
};
var rzp1 = new Razorpay(options);
rzp1.open();
}
makeRazorPay()
</script>
{% elif client_secret %}
<script>
const stripe = Stripe("{{pk}}");
console.log("test2");
var options = {
clientSecret: "{{secret_key}}",
};
const elements = stripe.elements(options);
var style = {
base: {
color: "#32325d",
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: "antialiased",
fontSize: "16px",
"::placeholder": {
color: "#aab7c4",
},
},
invalid: {
color: "#fa755a",
iconColor: "#fa755a",
},
};
async function showStripeForm(){
// document.getElementById("stripe-pay-button").style.display="block"
var paymentElement = elements.create("payment");
console.log("aajjj")
paymentElement.mount("#payment-element");
}
async function handleStripePayment(){
//const stripeBtn = document.getElementById("stripe-pay-button")
//stripeBtn.setAttribute("disabled",true)
//stripeBtn.textContent("Processing...")
const { error } = await stripe.confirmPayment({
//`Elements` instance that was used to create the Payment Element
elements,
confirmParams: {
return_url: "http://115.245.192.138/jugarnut_Stripe",
},
});
if (error) {
const messageContainer = document.querySelector("#error-message");
messageContainer.textContent = error.message;
} else {
}
}
setTimeout(()=> {
myFunction17PP()
showStripeForm()
},1000)
</script>
{% endif %}
<script>
// Function to open the modal
function openModal() {
console.log("okk")
document.getElementById('modalOverlay').style.display = 'block';
}
// Function to close the modal
function closeModal() {
document.getElementById('modalOverlay').style.display = 'none';
}
// Event listener for the Buy Now button
document.getElementById('buyNowBtn').addEventListener('click', openModal);
</script>
{% comment %} {% if messages %}
<script>
$(document).ready(function() {
// Display an alert for each success message
{% for message in messages %}
// Customize the alert based on your needs
alert("{{ message }}");
{% endfor %}
});
</script>
{% endif %} {% endcomment %}
{% if error %}
<div id="error-message" style="display: none;">{{ error }}</div>
{% endif %}
<script>
const errorMessage = document.getElementById('error-message');
if (errorMessage.innerHTML.length > 0) {
alert(errorMessage.innerHTML);
}
</script>
</body>
</html>
{%endblock%}