{% extends "mnfapp/base.html" %}
{% load static %}
{% load i18n %}
<html>
<head>
{% block content %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="{% static '/Audit/css/Audit-input.css' %}">
</head>
<body>
<div id="container_loader" class="container_loader_class">
<div id="conatiner_sub" class="container_sub">
<div id="thank-you-message">
<div class="loading-spinner"></div>
<h3>
{% trans "We are processing your script. We will notify you when it is Audited." %}
</h3>
</div>
</div>
</div>
<div class="container mt">
<div class="frame">
<img src="/static/media/Audit_img.png" id="audit_img_dek" alt="" srcset="">
<div>
<span class="mobile_block"> <img src="/static/media/Audit_img.png" id="audit_img_mobile" alt="" srcset="">
<p class="heading">Welcome to Script Audit !</p>
</span>
<ul class="list ul_list">
<li class="light-text">Screenplay is a technical document!</li>
<li class="light-text">It is required to be written precisely as per international conventions regarding font
type and size,
indentation, alignment and spaces.
</li>
<li class="light-text">However, inadvertent human errors may creep in while writing it.</li>
<li class="light-text">The Script audit identifies such inadvertent errors and corrects them.</li>
<li class="light-text">It's simple. Upload your Script, wait a little and get the audited version.</li>
</ul>
</div>
</div>
<div class="frame-block">
<img src="/static/media/blockchain_img.png" alt="Auditblockchainimgage" class="block-chain-img">
<p class="heading_secondary">Your Scripts are Secured by blockchain. <span class="MNF_hightlight">MNF</span>
has no access to Them.</p>
</div>
<p class="heading_secondary-text">Upload on Blockchain and Audit your Screenplay !</p>
<form method="post" action="{% url 'upload_audit' %}" onsubmit="loaderfun()" enctype="multipart/form-data" id="form-container">
{% csrf_token %}
{% if form.non_field_errors %}
<div class="error-message">
{% for error in form.non_field_errors %}
<p class="custom-error">{{ error }}</p>
{% endfor %}
</div>
{% endif %}
<div class="form-row-audit">
<div class="author_center">
<label for="id_screenplay_name" class="label_headers">Screenplay Name<span
style="color: #ee3c4d">*</span></label>
<input type="text" name="screenplay_name" required id="id_screenplay_name"
class="input_fieldStyle" oninvalid="this.setCustomValidity('Please enter screenplay name')"
oninput="setCustomValidity('')" placeholder="enter file name" maxlength="30" />
</div>
<div class="author_center">
<label for="id_author_name" class="label_headers">Author<span style="color: #ee3c4d">*</span></label>
<input type="text" id="author_name" name="author_name" maxlength="30" required id="id_author_name"
class="input_fieldStyle" oninvalid="this.setCustomValidity('Please enter author name')"
oninput="setCustomValidity('')" placeholder="enter user name" />
</div>
<div class="author_center">
<label for="id_language" class="label_headers">Language:</label>
<select type="text" name="language" id="id_language" class="input_fieldStyle" required>
<option value="en">English</option>
<option value="en">Other</option>
</select>
</div>
</div>
<div id="input_fields_container_audit">
<div class="form-field">
<input type="file" name="script_file" required id="id_script_file" onchange="validateFile(this)" />
</div>
{% for field in form %}
<div class="mt-5 mx-3">
{% if field.errors %}
<p class="script_exist">{{ field.errors.0 }}</p>
{% endif %}
</div>
{% endfor %}
<div style="text-align: center;" id="text_alert">
<p class="para_text2">Please upload your script in ”fdx” "docx", "pdf" or "txt" format only..</p>
</div>
<br>
<div class="submit-btn-container ">
<input value="Upload on Blockchain" id="submit-btn" class="btn btn-primary mx-auto" type="submit" />
</div>
<br><br>
</div>
</form>
</div>
<script>
var URL = window.location.origin
</script>
<script>
function loaderfun(){
document.getElementById("container_loader").style.display = "flex";
document.body.style.overflow = 'hidden';
document.querySelector(".split-pane-component").style.overflow = "none";
document.getElementById("mulitligule").style.display = "none";
document.getElementById("footer_mulitligule").style.display = "none";
}
</script>
<script>
document.addEventListener("DOMContentLoaded", function () {
var selectElement = document.getElementById("id_language");
// Create a new option element for the placeholder
var placeholderOption = document.createElement("option");
placeholderOption.value = "";
placeholderOption.text = "Select a language";
// Add the new option to the select element
selectElement.add(placeholderOption, 0); // Add as the first option
// Set the default selected option to the placeholder
placeholderOption.selected = true;
});
</script>
<script>
function validateFile(input) {
const allowedExtensions = ['fdx', 'docx', 'pdf', 'txt'];
const fileName = input.value.split('\\').pop(); // Get the selected file name
const fileExtension = fileName.split('.').pop().toLowerCase(); // Get the file extension
const text = document.getElementById('text_alert');
if (!allowedExtensions.includes(fileExtension)) {
text.style.display = "block";
input.value = ''; // Clear the input value
}
else {
text.style.display = "none";
}
}
</script>
<script>
document.getElementById("form-container").addEventListener("submit", function (event) {
event.preventDefault();
document.getElementById("submit-btn").disabled = true;
document.getElementById("submit-btn").style.backgroundColor = "#616161";
document.getElementById("submit-btn").style.color = "#FAFAFA";
this.submit();
window.addEventListener("unload", function () {
clearTimeout(timeoutID);
window.location.href = "{% url 'new_audited_page' %}";
});
});
</script>
<script>
const authorNameInput = document.getElementById("author_name");
authorNameInput.addEventListener("input", function () {
this.value = this.value.replace(/[^a-zA-Z ]/g, "");
});
</script>
</body>
</html>
{% endblock %}