<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Portal za oddajanje besedil</title> <!--{{ dropzone.load_css() }}--> <link rel="stylesheet" href="/static/dropzone.css" type="text/css"> {{ dropzone.style('position: absolute; top: -0.5px; width: 388px; height: 831px; left: 385px; background: linear-gradient(198.62deg, rgba(255, 255, 255, 0.49) -1.62%, rgba(255, 255, 255, 0.73) -1.61%, rgba(255, 255, 255, 0.41) 79.34%); box-shadow: 20px 4px 40px rgba(0, 0, 0, 0.25); backdrop-filter: blur(20px); border: 0px; border-radius: 0px 20px 20px 0px;') }} <link rel="stylesheet" href="/static/style.css" type="text/css"> </head> <body> <div id="main-window" style="top: 45%;"> <div id="rect1" style="height: 831px;"> <div id="logo-container" style="top: -7.8%;"> <img src="/static/image/logo.svg" alt="logo"/> </div> <form id="my-dropzone" class="dropzone"> <div style="position: relative; right: 390px;"> <h1 id="title">Portal za oddajanje besedil</h1> <div class="form-text">{{description|safe}}</div> <label for="ime">* Ime in priimek:</label> <input type="text" id="ime" name="ime" required="required"/> <label for="naslov-predavanja">* Naslov predavanja:</label> <input type="text" id="naslov-predavanja" name="naslov-predavanja" required="required"/> <label for="predmet">* Predmet:</label> <input type="text" id="predmet" name="predmet" required="required"/> <label for="fakulteta">* Fakulteta:</label> <input type="text" id="fakulteta" name="fakulteta" required="required"/> <label for="email">* E-Pošta:</label> <input type="text" id="email" name="email" required="required"/> <label for="telefon">Telefon:</label> <input type="text" id="telefon" name="telefon"/> <label for="kljucne-besede">* Ključne besede (ločene s presledkom):</label> <input type="text" id="kljucne-besede" name="kljucne-besede" required="required"/> <br> <div style="display:flex; flex-direction: row; justify-content: left; align-items: center"> <label style="width: 95%; text-transform: none; font-size: 12px;"><b>*Privolitev:</b><br>Strinjam se, da Univerza v Ljubljani uporabi posnetek naloženega predavanja v okviru projekta za strojno prevajanje predavanj ON. Dostop do posnetka bodo imeli izključno sodelavci projekta za namen transkripcije govora.</label> <input style="width: 5%;" type="checkbox" name="strojno-prevajanje" value="strojno-prevajanje" checked> </div> <div style="display: flex; flex-direction: row; justify-content: left; align-items: center; width: 310px;"> <label style="text-transform: none; font-size: 12px;"><b>Javna objava posnetka:</b><br>Ali bi se v prihodnosti strinjali z javno objavo posnetka? (V primeru strinjanja bi podpisali poseben dogovor o pogojih objave.)</label> <div style="display: inline-block;"> <input type="radio" name="javna-objava-prihodnost" value="da" style="display: inline; float: left; width: 20px;" checked> <label for="da" style="display: inline; float: right; position: absolute; margin-top: 5px;">Da</label><br> <input type="radio" name="javna-objava-prihodnost" value="morda" style="display: inline; float: left; width: 20px;"> <label for="morda" style="display: inline; float: right; position: absolute; margin-top: 10px;">Morda</label><br> <input type="radio" name="javna-objava-prihodnost" value="ne" style="display: inline; float: left; width: 20px;"> <label for="ne" style="display: inline; float: right; position: absolute; margin-top: 18px;">Ne</label><br> </div> </div> <br> <div style="display:flex; flex-direction: row; justify-content: left; align-items: center"> <label style="width: 95%; text-transform: none; font-size: 12px;"><b>Obvestila:</b><br>Želim, da me Center za jezikovne vire in tehnologije UL obvešča o novicah v zvezi s sistemom za strojno prevajanje predavanj ON.</label> <input style="width: 5%;" type="checkbox" name="obvestila" value="obvestila" checked> </div> <br> <a class="form-text" href="https://www.cjvt.si/obvestilo-o-obdelavi-osebnih-podatkov/" style="cursor: pointer;">Obvestilo o obdelavi osebnih podatkov</a> <button id="button-submit" type="submit" style="top: 745px;">Oddaj</button> </div> <div class="dropzone-previews"></div> </form> </div> </div> <!--{{ dropzone.load_js() }}--> <script src="/static/dropzone.js"></script> <script> ///////////////////////// // Dropzone // ///////////////////////// var btnSubmit = document.getElementById("button-submit"); var form = document.forms["my-dropzone"]; function isEmptyOrSpaces(str){ return str == null || str.match(/^ *$/) !== null; } const reEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; const reKeyword = /^[a-zA-Zščđ枊ČĐĆŽ ]+$/; Dropzone.options.myDropzone = { // The camelized version of the ID of the form element url: "/predavanja/upload", autoProcessQueue: false, uploadMultiple: true, parallelUploads: {{max_files}}, paramName: "file", // The name that will be used to transfer the file maxFilesize: 10000, // MB timeout: 10000000, // milliseconds //acceptedFiles: ".txt, .csv, .pdf, .doc, .docx, .xls, .xlsx, .ppt, .pptx", maxFiles: {{max_files}}, dictDefaultMessage: `Kliknite ali odložite datoteke sem.`, dictFallbackMessage: "Vaš brskalnik ne podpira izbiranje datotek z odlaganjem (\"drag & drop\").", dictInvalidFileType: "Datoteka je napačnega formata.", dictFileTooBig: "Datoteke je prevelika {{filesize}}. Največja dovoljena velikost: {{maxFilesize}}MiB.", dictResponseError: "Napaka strežnika: {{statusCode}}", dictMaxFilesExceeded: "Največje število datotek že doseženo.", dictCancelUpload: "Prekini prenos", dictRemoveFile: "Odstrani datoteko", dictCancelUploadConfirmation: "Ali res želite odstraniti to datoteko?", dictUploadCanceled: "Prenos prekinjen", // The setting up of the dropzone init: function() { var dz = this; btnSubmit.addEventListener("click", function(e) { // Make sure that the form isn't actually being sent. e.preventDefault(); e.stopPropagation(); // Check form validity. var ime = form["ime"].value; var naslov = form["naslov-predavanja"].value; var predmet = form["predmet"].value; var fakulteta = form["fakulteta"].value; var kljucneBesede = form["kljucne-besede"].value; var email = form["email"].value; var telefon = form["telefon"].value; var privolitev = form["strojno-prevajanje"].checked; if (isEmptyOrSpaces(ime) || isEmptyOrSpaces(naslov) || isEmptyOrSpaces(predmet) || isEmptyOrSpaces(fakulteta) || isEmptyOrSpaces(kljucneBesede) || isEmptyOrSpaces(email)) { alert("Izpolnite vsa obvezna polja!"); } else if (!reEmail.test(email.toLowerCase())) { alert("Email napačnega formata!"); } else if (!reKeyword.test(kljucneBesede)) { alert("Ključne besede so napačnega formata! Besede ločujte s presledkom. Besede naj ne vsebujejo posebnih znakov."); } else if (ime.length > 100 || naslov.length > 100 || predmet.length > 100 || fakulteta.length > 100 || kljucneBesede.length > 100 || email.length > 100 || telefon.length > 100) { alert("Velikost polj je omejena na 100 znakov."); } else if (!privolitev) { alert("Odkljukana privolitev je pogoj za oddajo."); } else { // Hand off data to dropzone dz.processQueue(); // Clear fields and hide popup agian btnSubmit.disabled = false; form.reset(); } }); // Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead // of the sending event because uploadMultiple is set to true. this.on("sendingmultiple", function() { // Gets triggered when the form is actually being sent. // Hide the success button or the complete form. }); this.on("successmultiple", function(files, response) { // Gets triggered when the files have successfully been sent. // Redirect user or notify of success. alert("Odgovor strežnika: " + response); location.reload(); }); this.on("errormultiple", function(files, response) { // Gets triggered when there was an error sending the files. // Maybe show form again, and notify user of error }); } } </script> </body> </html>