Conversion_Kitchen_Code/kitchen_counter/scriptAudit/templates/audit/audit.html

254 lines
8.4 KiB
HTML
Executable File

{% 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' %}">
<style>
.block-chain-modal {
display: none;
background-color: #7f7f7f;
position: absolute;
width: 100%;
height: 100%;
z-index: 9;
top: 0%;
left: 0%;
}
.block-chain-text {
background-color: #fafafa;
position: absolute;
width: 680px;
height: 300px;
top: 50%;
border-radius: 8px;
padding: 3rem;
left: 50%;
transform: translate(-50%, -50%);
z-index: 99;
}
.closebtn {
position: absolute;
top: -0.5rem;
width: 40px;
height: 40px;
border-radius: 20px;
right: -0.5rem;
top: 1;
background-color: #ee3c4d;
border: none;
color: #fafafa;
font-weight: 700;
cursor: pointer;
}
.modal-para {
font-size: 16px;
font-weight: 600;
color: #252525;
}
.warningMsg {
text-align: end;
color: #ee3c4d;
font-size: 12px;
}
.script_con_card_low button:nth-child(1) {
border: 1px solid #33B0CA;
color: #33B0CA;
padding: 4px 12px;
font-size: 12px;
border-radius: 4px;
font-weight: 600;
cursor: pointer;
background-color: transparent;
}
.script_con_card_low button:nth-child(2) {
border: 1px solid #33B0CA;
color: white;
background-color: #33B0CA;
padding: 4px 12px;
font-size: 12px;
font-weight: 600;
border-radius: 4px;
cursor: pointer;
}
#primary_key_value_get {
width: 100%;
border: 1px solid #eaeaea;
border-radius: 4px;
padding: 5px;
margin-top: 8px;
font-size: 12px;
}
</style>
</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' %}" 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" maxlength="40" required id="id_screenplay_name"
class="input_fieldStyle" oninvalid="this.setCustomValidity('Please enter screenplay name')"
oninput="setCustomValidity('')" placeholder="enter file name" />
</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="25" 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="text-primary">{{ 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>
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();
let timeoutID = setTimeout(function () {
document.getElementById("container_loader").style.display = "flex";
document.querySelector(".split-pane-component").style.overflow = "none";
document.getElementById("mulitligule").style.display = "none";
document.getElementById("footer_mulitligule").style.display = "none";
}, 1000);
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 %}