animation et responsive

2026-08-05 18:28:33 +02:00
parent 15d3087fe4
commit 7e467f9b1a
3 changed files with 86 additions and 19 deletions
@@ -290,30 +290,52 @@ document



+            const submitButton = document.getElementById("submit-button");
+
+            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",
-                    {
+                    await fetch("/edt.pdf", {
                        method: "POST",
                        headers: {
-                            "Content-Type":
-                                "application/json"
+                            "Content-Type": "application/json"
                        },
-                        body:
-                            JSON.stringify({
-                                cours
-                            })
-                    }
-                );
+                        body: JSON.stringify({ cours })
+                    });

+                if (!response.ok)
+                    throw new Error("Erreur lors de la génération du PDF.");

                const blob =
                    await response.blob();

+                const url =
+                    URL.createObjectURL(blob);

-            window.open(
-                URL.createObjectURL(blob)
-            );
+                iframe.src = url;
+                iframe.style.display = "block";
+
+            } catch (err) {
+
+                console.error(err);
+                alert(err.message);
+
+            } finally {
+
+                loader.style.display = "none";
+                submitButton.disabled = false;
+
+            }

        }
    );
@@ -105,6 +105,14 @@
        color: #111;
    }

+    button:disabled {
+        background: #bdbdbd;
+        border-color: #bdbdbd;
+        color: #666;
+        cursor: not-allowed;
+        opacity: 1;
+    }
+

    .remove {
        background: #333 !important;
@@ -137,3 +145,34 @@
            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;
+}
@@ -4,6 +4,7 @@
    <meta charset="UTF-8">
    <title>EDT Generator</title>
    <link rel="stylesheet" href="/static/style.css">
+     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 </head>

 <body>
@@ -230,15 +231,20 @@ Ajouter
 <br>


-<button type="submit">
+<button id="submit-button" type="submit">
 Générer PDF
 </button>


+<div class="loader" style="margin: auto; display: none"></div>
+<iframe id="pdf_iframe" style="display: none"></iframe>
+
 </form>


 <script src="/static/builder.js"></script>

+
+
 </body>
 </html>