{% extends "mnfapp/base.html" %} {% load static %} {% load i18n %}
<!-- {% block title %}Conversion Room {%endblock%} -->
<html>
<head>
{% block content %}
<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/3.6.0/jquery.min.js"></script> -->
<script>
$(document).ready(function(){
{% comment %} $(".container-995").hide();
$(".new").show(); {% endcomment %}
});
</script>
<style>
.label{
width: 112px;
}
.containerAudit{
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
position: absolute;
width: 50vw;
text-align: center;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
height: 40vh;
}
.containerAudit form{
display: flex;
width: 40vw;
margin-left: 10vw;
margin-top: 20%;
/* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
}
.actsic_builder{
background-color: #ee3c4d;
color: #fff;
}
#form-container {
min-width: 100%;
}
input[type="file"] {
display: inline-block !important;
}
#id_screenplay_name,
#id_author_name {
border: 1px solid;
border-radius:3px;
height: 28px;
margin: 0px 0px 5px;
padding: 0 0 0 7px;
{% comment %} width: 165px; {% endcomment %}
}
{% comment %}
#id_screenplay_name{
border-radius:3px;
height: 28px;
font-size : 14px;
color: #000;
} {% endcomment %}
#id_language{
border-radius:3px;
height: 28px;
width: 155px;
margin: 0px 0px 5px;
}
#id_script_file {
width: 180px;
margin: auto;
}
.btn-primary{
margin-left:20px;
font-weight: bold;
}
.form-field{
padding: 0 5px 0 0;
display: flex;
grid-gap: 0 5px;
align-items: center;
justify-content: left;
}
.form-row-audit {
display: grid;
grid-template-columns: repeat(3, 1fr);
row-gap: 10px;
margin-bottom: 6px;
margin-top: 20px;
}
.author_center {
width: 100%;
display: flex;
gap: 0 5px;
justify-content: center;
align-items: center;
}
.mb-5{
font-weight: 700;
}
.container-995 {
width: 80%;
max-width: 100% !important;
padding: 0 !important;
}
#input_fields_container_audit{
max-width: 410px;
}
.footer{
width:100%;
position: absolute !important;
bottom: 0;
}
.card.card-custom {
-webkit-box-shadow: none;
box-shadow: none;
}
.mt-5 {
margin-top: 0 !important;
}
.card.card-custom>.card-body {
padding: 0 2rem !important;
}
@media screen and (max-width: 1025px) {
.card.card-custom>.card-body {
margin-bottom: 2rem !important;
}
}
@media screen and (max-width: 860px) {
.container-995 {
margin: auto 0;
}
}
@media screen and (max-width: 768px) {
.form-row-audit {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 2rem;
}
.form-row-audit>div {
display: flex;
align-items: center;
justify-content: left;
width: 100%;
}
#input_fields_container_audit {
margin-bottom: 2rem;
min-width: 86vw;
text-align: center;
}
#input_fields_container_audit h3 {
font-size: 15px !important;
width: auto !important;
}
#input_fields_container_audit p {
font-size: 10px !important;
width: 80vw;
}
#input_fields_container_audit .form-field {
justify-content: center;
width: 80vw;
}
#input_fields_container_audit .submit-btn-container {
width: 80vw !important;
}
}
@media screen and (max-width: 1367px) {
#mulitligule {
min-height: 105vh;
}
.footer {
position: static !important;
}
}
</style>
</head>
<body>
<center class="new" style="display: none">
<h3 style="padding: 1em">
We are processing your script. <br />
We will notify you when it is Audited.
</h3>
</center>
<div id="mulitligule" class="container-995" style="max-width: 1170px">
<div class="pb-0" style="padding: 0.5em">
<div class="card card-custom">
<div class="card-body">
<h3 class="mb-5" style="font-size: 24px; font-weight: 700;">{% trans "Welcome to Script Audit !" %}</h3>
<p class="ml-2" style="font-size: 14px; color: #616161;">
A Screenplay is a technical document.
</p>
<p class="ml-2" style="font-size: 14px; color: #616161;">
Hence, it is required to be written precisely as per international
conventions regarding font type and size, indentation, alignment
and spaces.
</p>
<p class="ml-2" style="font-size: 14px; color: #616161;">
However, inadvertent human errors may creep in while writing a
Screenplay.
</p>
<p class="ml-2" style="font-size: 14px; color: #616161;">
The Script Auditor identifies such inadvertent errors and corrects
them.
</p>
<p class="ml-2" style="font-size: 14px; color: #616161;">
It's simple. Upload your Script, wait for a few minutes and get
the audited version of your Script.
</p>
<form
method="post"
action="{% url 'upload_audit_facade' %}"
enctype="multipart/form-data"
id="form-container"
>
{% csrf_token %}
<!-- <p class="lead ml-2">{% trans "Upload your Script in docx or pdf or fdx or txt format below to Audit it and we will notify you once it is Audited." %}</p> -->
{% if form.non_field_errors %}
<div class="error-message">
{% for error in form.non_field_errors %} {% comment %}
<p class="custom-error">{{ error }}</p>
{% endcomment %} {% endfor %}
</div>
{% endif %}
<div class="form-row-audit">
<div class="form-field w-100">
<label for="id_screenplay_name" style="min-width: 115px; font-size: 14px; font-weight: 500;"
>Screenplay name<span style="color: #ee3c4d">*</span></label
>
<input
type="text"
name="screenplay_name"
maxlength="40"
required
id="id_screenplay_name"
/>
</div>
<div class="author_center">
<label for="id_author_name" style="font-size: 14px; font-weight: 500;"
>Author<span style="color: #ee3c4d">*</span></label
>
<input
type="text"
id="author_name"
name="author_name"
maxlength="25"
required
id="id_author_name"
style="padding-left: 5px; height: 28px"
/>
</div>
<div class="form-field">
<label for="id_language" style="font-size: 14px; font-weight: 500;">Language:</label>
<select type="text" name="language" id="id_language">
<option value="en">English</option>
<option value="en">Other</option>
</select>
</div>
</div>
<div id="input_fields_container_audit">
<h3 style="font-size: 16px; font-weight: 600; width: 485px;">
Upload on Blockchain and Audit your Screenplay !
</h3>
<div style="text-align: center;">
<p style="font-size: 12px;">Please upload your script in "docx", "pdf", "fdx" or "txt" format only..</p>
</div>
<div class="form-field">
<!-- <label for="id_script_file">Script file<span style="color: #EE3C4D;">*</span></label> -->
<input
type="file"
name="script_file"
required
id="id_script_file"
syle="margin-left: 9rem"
/>
</div>
{% for field in form %}
<div class="mt-5 mx-3">
{% if field.errors %}
<p class="text-primary">{{ field.errors.0 }}</p>
{% endif %}
</div>
{% endfor %} {% comment %} <button>Submit</button> {% endcomment
%} {% comment %}
<button type="submit" class="btn btn-primary my-5">
Submit
</button>
{% endcomment %}
<div class="submit-btn-container " style="width: 100%; text-align: center; margin-top: 0.4rem;">
<input
value="UPLOAD"
id="submit-btn"
class="btn btn-primary mx-auto"
style="
border-radius: 10px;
font-family: inherit;
font-weight: 700;
font-size: 14px;
padding: 6px 30px 6px 30px;
background: #33B0CA;
border: none;
"
type="submit"
/>
</div>
</div>
</form>
<script>
document
.getElementById("form-container")
.addEventListener("submit", function () {
document.getElementById("submit-btn").disabled = true;
document.getElementById("submit-btn").style.backgroundColor = "#616161";
document.getElementById("submit-btn").style.color = "#FAFAFA";
});
</script>
<script>
const authorNameInput = document.getElementById("author_name");
authorNameInput.addEventListener("input", function () {
this.value = this.value.replace(/[^a-zA-Z ]/g, "");
});
</script>
</div>
</div>
</div>
</div>
</body>
</html>
{% endblock %}