Conversion_Kitchen_Code/kitchen_counter/mnfapp/templates/mnfapp/sampleC.html

278 lines
9.3 KiB
HTML
Executable File

{% extends "mnfapp/base.html" %} {% load static %}{% block content %}
{% block title %}{%endblock%}
<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>Convert a Sample Script</title>
<style>
* {
box-sizing: border-box;
}
.body-con {
min-height: 70vh;
width: 100%;
align-items: center;
position: absolute;
top: 35%;
left: 50%;
transform: translate(-50%, -50%);
}
:root {
--primary-btn-bg: #33B0CA;
--disabled-btn-bg: #616161;
--primary-bg: #FAFAFA;
--heading-bg: #EAEAEA;
--heading-color: #252525;
--text-color: #616161;
--cards-text-size: 10px;
--para-text-size: 12px;
--fullpage-para-text-size: 14px;
--seb-heading-text-size: 16px;
--menu-text-size: 16px;
--primary-heading-text-size: 24px;
--font-family: "Poppins", sans-serif;
}
.primary-btn-greeen {
background: var(--primary-btn-bg) !important;
font-family: var(--font-family) !important;
border: none !important;
}
.primary-heading {
font-size: var(--primary-heading-text-size) !important;
color: var(--heading-color) !important;
}
.sub-heading {
font-size: var(--seb-heading-text-size) !important;
color: var(--heading-color) !important;
font-weight: 500 !important;
}
.full-page-para {
font-size: var(--fullpage-para-text-size) !important;
color: var(--text-color) !important;
}
.sub-para {
color: var(--text-color) !important;
}
.green-stroke {
background-color: var(--primary-bg) !important;
border: 1px solid var(--primary-btn-bg) !important;
color: var(--primary-btn-bg) !important;
margin-bottom: 70px !important;
}
.green-stroke:hover {
background-color: var(--primary-btn-bg) !important;
color: var(--primary-bg) !important;
}
.flex-container {
display: flex;
flex-direction: row;
font-size: 15px;
text-align: center;
flex-wrap: wrap;
}
.flex-item {
background-color: #f1f1f1;
padding: 10px;
flex: 25%;
border: 1px solid black;
}
/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (max-width: 800px) {
.flex-container {
flex-direction: column;
}
}
.footer {
position: static;
}
.convert-sample-script-btn {
position: absolute;
top: 67%;
left: 50%;
transform: translate(-50%);
max-width: 84.5%;
}
.preview-btn {
margin-bottom: 50px;
position: relative;
bottom: 5px;
}
.cards-container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.cards-container .col {
min-width: 350px;
}
.text-primary {
color: #616161 !important;
}
.text-dark {
font-size: 14px !important;
}
@media (max-width:768px) {
.body-con {
padding: 0 5px !important;
}
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
<script>
function get_script(lang) {
$.ajax({
type: "POST",
url: "{% url 'samplescriptC_filter' %}",
data: {
language: lang.value,
csrfmiddlewaretoken: $("input[name=csrfmiddlewaretoken").val(),
},
success: function (result) {
console.log("Ran successfully");
$("#div_scripts").empty();
var str1 = result["scripts"];
var data = str1.replace("[[", "");
var data2 = data.replace("]]", "");
let myrry = data2.split("], [");
console.log(myrry);
for (let i = 0; i < myrry.length; i++) {
script = myrry[i].split(", ");
name1 = script[0].replaceAll('"', "");
author1 = script[4].replaceAll('"', "");
location1 = script[1].replaceAll('"', "");
initialname1 = script[3].replaceAll('"', "");
id1 = script[2].replaceAll('"', "");
const div = document.createElement("div");
div.className = "col";
div.innerHTML = "<div><div class='card card-custom gutter-b card-stretch'><div class='card-body pt-4'><div class='d-flex align-items-center mb-7'><div class='flex-shrink-0 mr-4 mt-lg-0 mt-3'><div class='symbol symbol-circle symbol-lg-75 d-none'></div><div class='symbol symbol-lg-75 symbol-circle symbol-primary'><span class='symbol-label font-size-h3 font-weight-boldest primary-btn-greeen'style='text-transform: uppercase; word-wrap: break-word'>"
+ initialname1 +
"</span></div></div><div class='d-flex flex-column' class='wrap'><span class='text-dark font-weight-bold font-size-h4 mb-0 script-title' style='word-wrap: break-all;max-width: 180px;word-wrap: break-word;'>"
+ name1 +
"</span><span class='text-primary font-weight-bold font-size-h8 mb-0 script-title' style=' word-wrap: break-all;max-width: 180px;word-wrap: break-word;'>"
+ author1 +
"</span></div></div><a href='../../media/"
+ location1 +
"' target='_blank' class='btn btn-block btn-sm btn-light-success font-weight-bolder text-uppercase py-4 preview-btn green-stroke'>Preview <i class='bi bi-file-earmark-pdf'></i></a><a href='/mnfapp/sampleconversion/"
+ id1 +
"' target='_blank' class='btn btn-block btn-sm btn-light-info font-weight-bolder text-uppercase py-4 convert-sample-script-btn green-stroke'>Convert <i class='bi bi-translate'></i></a></div></div></div></div>";
document.getElementById("div_scripts").appendChild(div);
}
},
});
}
// Aris
function displayFileName() {
const fileInput = event.target.previousElementSibling;
const file = fileInput.innerText;
if (file) {
sessionStorage.setItem("fileName", file);
}
}
</script>
<style>
.actconversion_studio {
background-color: #ee3c4d;
color: #fff;
}
</style>
<div class="container-885 body-con my-5 mt">
<h2 style="text-align: center; margin-top: 3em" id="pageHead" class="primary-heading">
Choose sample script and click an action (Preview or Convert)
</h2>
<div class="flex-container">
<div style="padding: 10px;flex: 25%;">
<label class="sub-heading">Choose the language of sample script</label>
<select id="actionline_select" onchange="get_script(this);" style="max-width: 165px;">
<option value="">Choose Language</option>
{% for lang in lang_list %}
<option value="{{lang}}">{{lang}}</option>
{% endfor %}
</select>
</div>
</div>
<div>
<div id="div_scripts" class="cards-container">
{% for i in list %} {% if i.approved != "False"%}
<div class="col">
<!--begin::Col-->
<div class="">
<!--begin::Card-->
<div class="card card-custom gutter-b card-stretch">
<!--begin::Body-->
<div class="card-body pt-4">
<!--begin::User-->
<div class="d-flex align-items-center mb-7">
<!--begin::Pic-->
<div class="flex-shrink-0 mr-4 mt-lg-0 mt-3">
<div class="symbol symbol-circle symbol-lg-75 d-none">
<img src="assets/media/users/300_10.jpg" alt="image" />
</div>
<div class="symbol symbol-lg-75 symbol-circle symbol-primary">
<span class="symbol-label font-size-h3 font-weight-boldest primary-btn-greeen"
style="text-transform: uppercase; word-wrap: break-word">{{i.script_title|slice:":1"}}</span>
</div>
</div>
<!--end::Pic-->
<!--begin::Title-->
<div class="d-flex flex-column" class="wrap">
<span href="#" class="text-dark font-weight-bold font-size-h6 mb-0 script-title" style="
word-wrap: break-all;
max-width: 180px;
word-wrap: break-word;
">{{i.script_title}}</span>
<a href="{% url 'sampleConversion' i.sample_id %}"
class="btn btn-block btn-sm btn-light-info font-weight-bolder text-uppercase py-4 convert-sample-script-btn green-stroke"
onclick="displayFileName()">Convert<i class="bi bi-translate"></i></a>
<span href="#" class="text-primary font-weight-bold font-size-h8 mb-0 script-title" style="
word-wrap: break-all;
max-width: 180px;
word-wrap: break-word;
">By {{i.author_name}}</span>
</div>
<!--end::Title-->
</div>
<!--end::User-->
<!--begin::Info-->
<!--end::Info-->
<a href="../../media/{{i.script_file_path_pdf}}" target="_blank"
class="btn btn-block btn-sm btn-light-success font-weight-bolder text-uppercase py-4 preview-btn green-stroke">
Preview<i class="bi bi-file-earmark-pdf"></i></a>
</div>
<!--end::Body-->
</div>
<!--end::Card-->
</div>
<!--end::Col-->
</div>
{% endif %}{% endfor %}
</div>
</div>
</div>
{%endblock%}