valentin/edt_maker_m1orsay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

animation et responsive

Browse Source
This commit is contained in:
valentin
2026-08-05 18:28:33 +02:00
parent 15d3087fe4
commit 7e467f9b1a
3 changed files with 86 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/builder.js
+39 -17
View File
@@ -290,30 +290,52 @@ document
const response = const submitButton = document.getElementById("submit-button");
await fetch(
"/edt.pdf", const loader =
{ document.querySelector(".loader");
const iframe =
document.getElementById("pdf_iframe");
submitButton.disabled = true;
loader.style.display = "block";
try {
const response =
await fetch("/edt.pdf", {
method: "POST", method: "POST",
headers: { headers: {
"Content-Type": "Content-Type": "application/json"
"application/json"
}, },
body: body: JSON.stringify({ cours })
JSON.stringify({ });
cours
})
}
);
if (!response.ok)
throw new Error("Erreur lors de la génération du PDF.");
const blob = const blob =
await response.blob(); await response.blob();
const url =
URL.createObjectURL(blob);
window.open( iframe.src = url;
URL.createObjectURL(blob) iframe.style.display = "block";
);
} catch (err) {
console.error(err);
alert(err.message);
} finally {
loader.style.display = "none";
submitButton.disabled = false;
}
} }
); );
static/style.css
+40 -1
View File
@@ -105,6 +105,14 @@
color: #111; color: #111;
} }
button:disabled {
background: #bdbdbd;
border-color: #bdbdbd;
color: #666;
cursor: not-allowed;
opacity: 1;
}
.remove { .remove {
background: #333 !important; background: #333 !important;
@@ -136,4 +144,35 @@
overflow-x: auto; overflow-x: auto;
white-space: nowrap; white-space: nowrap;
} }
} }
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}
/* Safari */
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#pdf_iframe {
width: 100%;
height: calc(100vh - 220px);
min-height: 500px;
border: 1px solid #ccc;
margin-top: 1rem;
}
templates/index.html
+7 -1
View File
@@ -4,6 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>EDT Generator</title> <title>EDT Generator</title>
<link rel="stylesheet" href="/static/style.css"> <link rel="stylesheet" href="/static/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head> </head>
<body> <body>
@@ -230,15 +231,20 @@ Ajouter
<br> <br>
<button type="submit"> <button id="submit-button" type="submit">
Générer PDF Générer PDF
</button> </button>
<div class="loader" style="margin: auto; display: none"></div>
<iframe id="pdf_iframe" style="display: none"></iframe>
</form> </form>
<script src="/static/builder.js"></script> <script src="/static/builder.js"></script>
</body> </body>
</html> </html>