119 lines
5.7 KiB
HTML
119 lines
5.7 KiB
HTML
|
<!doctype HTML>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Easy-Editing</title>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<link href="/static/main.css" rel="stylesheet">
|
||
|
|
</head>
|
||
|
|
<body class="layout-documentation page-components">
|
||
|
|
<nav class="navbar is-link" role="navigation" aria-label="main navigation">
|
||
|
|
<div class="container">
|
||
|
|
<div class="navbar-brand">
|
||
|
|
<a class="navbar-item is-size-4" href="/"><strong>Easy-Editing</strong></a>
|
||
|
|
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
|
||
|
|
<span aria-hidden="true"></span>
|
||
|
|
<span aria-hidden="true"></span>
|
||
|
|
<span aria-hidden="true"></span>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
<section class="section">
|
||
|
|
<div class="container">
|
||
|
|
<div class="columns is-desktop">
|
||
|
|
<div class="column is-6 is-offset-3">
|
||
|
|
<article id="success" class="message is-success" style="display: none;">
|
||
|
|
<div class="message-header">
|
||
|
|
<p>Votre archive a été envoyée</p>
|
||
|
|
</div>
|
||
|
|
<div class="message-body">
|
||
|
|
Vous recevrez un email quand votre vidéo sera prête.
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<article id="error" class="message is-danger" style="display: none;">
|
||
|
|
<div class="message-header">
|
||
|
|
<p>Erreur</p>
|
||
|
|
</div>
|
||
|
|
<div class="message-body content">
|
||
|
|
<p>Les erreurs suivantes ont été détectées dans votre archive :</p>
|
||
|
|
<ul id="error-message">
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
<div id="form">
|
||
|
|
<div class="field">
|
||
|
|
<div class="control">
|
||
|
|
<input class="input is-primary" id="email" type="email" placeholder="Adresse email" name="email">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="field is-grouped">
|
||
|
|
<div class="file has-name">
|
||
|
|
<div class="control">
|
||
|
|
<label class="file-label">
|
||
|
|
<input id="file-input" class="file-input" type="file" name="archive" accept="application/zip,application/octet-stream,application/x-zip-compressed,multipart/x-zip">
|
||
|
|
<span class="file-cta">
|
||
|
|
<span class="file-icon">
|
||
|
|
<i class="fas fa-upload"></i>
|
||
|
|
</span>
|
||
|
|
<span class="file-label">
|
||
|
|
Choisissez un fichier…
|
||
|
|
</span>
|
||
|
|
</span>
|
||
|
|
<span id="file-name" class="file-name">
|
||
|
|
Aucun fichier selectionné
|
||
|
|
</span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="field is-grouped">
|
||
|
|
<div class="control">
|
||
|
|
<button id="button" class="button is-link">Envoyer</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<script>
|
||
|
|
const button = document.getElementById('button');
|
||
|
|
const fileInput = document.getElementById('file-input');
|
||
|
|
fileInput.onchange = () => {
|
||
|
|
if (fileInput.files.length > 0) {
|
||
|
|
const fileName = document.getElementById('file-name');
|
||
|
|
fileName.textContent = fileInput.files[0].name;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
button.addEventListener('click', () => {
|
||
|
|
button.disabled = true;
|
||
|
|
let formData = new FormData();
|
||
|
|
formData.append("email", document.getElementById("email").value);
|
||
|
|
formData.append("archive", fileInput.files[0]);
|
||
|
|
|
||
|
|
let xhr = new XMLHttpRequest();
|
||
|
|
xhr.onreadystatechange = () => {
|
||
|
|
if (xhr.readyState == 4) {
|
||
|
|
if (xhr.status == 200) {
|
||
|
|
document.getElementById('success').style.display = "";
|
||
|
|
document.getElementById('error').style.display = "none";
|
||
|
|
document.getElementById('form').style.display = "none";
|
||
|
|
} else {
|
||
|
|
document.getElementById('error-message').innerHTML = xhr.responseText;
|
||
|
|
document.getElementById('error').style.display = "";
|
||
|
|
document.getElementById('success').style.display = "none";
|
||
|
|
button.disabled = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
xhr.open("POST", "/easy-edit");
|
||
|
|
xhr.send(formData);
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
|
||
|
|
|