Changement de Streamlit vers Flask

static/script.js

@@ -0,0 +1,25 @@
+$(document).ready(function() {
+    $('#correct-button').click(function() {
+        var text = $('#input-text').val();
+        $.ajax({
+            url: '/correct',
+            method: 'POST',
+            data: { text: text },
+            success: function(response) {
+                if (response.error) {
+                    alert(response.error);
+                } else {
+                    $('#output-text').val(response.text);
+                }
+            },
+            error: function() {
+                alert('Une erreur est survenue lors de la correction du texte.');
+            }
+        });
+    });
+
+    // Load email form
+    $.get('ressources/formulaire_courriel.html', function(data) {
+        $('#email-form').html(data);
+    });
+});

static/style.css

@@ -0,0 +1,214 @@
+:root {
+    --bg-color: #001233;
+    --text-color: #c5c5c5;
+    --accent-color: #daa520;
+    --secondary-color: #791cf8;
+    --tertiary-color: #daa520;
+    --link-color: #954df9;
+    --link-hover-color: #daa520;
+    --code-bg-color: #1d1d1d;
+    --code-text-color: #c1bdbd;
+}
+
+@font-face {
+    font-family: 'Fira Sans';
+    src: url(/static/fonts/FiraSans/FiraSans-Light.ttf) format("truetype");
+    font-weight: 300;
+    font-style: normal
+}
+
+@font-face {
+    font-family: 'Fira Sans';
+    src: url(/static/fonts/FiraSans/FiraSans-Regular.ttf) format("truetype");
+    font-weight: 400;
+    font-style: normal
+}
+
+@font-face {
+    font-family: 'Fira Sans';
+    src: url(/static/fonts/FiraSans/FiraSans-Medium.ttf) format("truetype");
+    font-weight: 500;
+    font-style: normal
+}
+
+@font-face {
+    font-family: 'Fira Sans';
+    src: url(/static/fonts/FiraSans/FiraSans-SemiBold.ttf) format("truetype");
+    font-weight: 600;
+    font-style: normal
+}
+
+@font-face {
+    font-family: 'Cinzel';
+    src: url(/static/fonts/Cinzel/Cinzel-Regular.ttf) format("truetype");
+    font-weight: 400;
+    font-style: normal
+}
+
+@font-face {
+    font-family: 'Cinzel';
+    src: url(/static/fonts/Cinzel/Cinzel-SemiBold.ttf) format("truetype");
+    font-weight: 600;
+    font-style: normal
+}
+
+@font-face {
+    font-family: 'Cinzel';
+    src: url(/static/fonts/Cinzel/Cinzel-Bold.ttf) format("truetype");
+    font-weight: 700;
+    font-style: normal
+}
+
+.container {
+    width: 100%;
+    max-width: 100%;
+    margin: 0 auto;
+    padding: 0 20px;
+    box-sizing: border-box;
+}
+
+@media screen and (min-width: 768px) {
+    .container {
+        width: 80%;
+        max-width: 1200px;
+    }
+}
+
+body {
+    margin: 0;
+    padding: 0;
+}
+
+/* Adjust the existing body styles */
+body {
+    background-color: var(--bg-color);
+    color: var(--text-color);
+    font-family: 'Fira Sans', sans-serif;
+    font-weight: 300;
+    font-size: 18px;
+    line-height: 1.6;
+    background-image: radial-gradient(circle at 10% 20%, #8a2be20d 0%, transparent 20%), radial-gradient(circle at 90% 80%, #32cd320d 0%, transparent 20%);
+}
+
+/* Adjust padding for elements inside the container */
+.container > * {
+    padding-left: 0;
+    padding-right: 0;
+}
+
+strong {
+    font-weight: 600
+}
+
+h1 {
+    font-family: 'Cinzel', serif;
+    font-weight: 800;
+    color: var(--accent-color);
+    text-shadow: 2px 2px 4px #00000080;
+    letter-spacing: 1px;
+    font-size: 2.5em
+}
+
+h2, h3 {
+    font-family: 'Cinzel', serif;
+    font-weight: 600;
+    color: var(--accent-color);
+    text-shadow: 1px 1px 3px #0000004d;
+    letter-spacing: .5px
+}
+
+h4, h5 {
+    font-family: 'Cinzel', serif;
+    font-weight: 400;
+    color: var(--accent-color);
+    text-shadow: 1px 1px 3px #0000004d;
+    letter-spacing: .5px
+}
+
+h2 {
+    font-size: 2em
+}
+
+h3 {
+    font-size: 1.75em
+}
+
+h4 {
+    font-size: 1.5em
+}
+
+h5 {
+    font-size: 1.25em
+}
+
+a {
+    color: var(--link-color);
+    text-decoration: none;
+    transition: all .3s ease
+}
+
+a:hover {
+    color: var(--link-hover-color);
+    text-decoration: underline
+}
+
+textarea {
+    width: 100%;
+    padding: 15px 20px;
+    margin: 15px;
+    background-color: var(--code-bg-color);
+    color: var(--code-text-color);
+    border: 1px solid var(--accent-color);
+    border-radius: 5px;
+    font-family: 'Fira Sans', monospace;
+    font-size: 16px;
+    resize: vertical;
+    line-height: 1.5;
+    box-sizing: border-box;
+}
+
+textarea:focus {
+    outline: none;
+    border-color: var(--secondary-color);
+    box-shadow: 0 0 0 2px rgba(121, 28, 248, 0.2);
+}
+
+button {
+    padding: 12px 24px;
+    background-color: var(--secondary-color);
+    color: var(--text-color);
+    border: none;
+    border-radius: 30px;
+    cursor: pointer;
+    font-family: 'Fira Sans', sans-serif;
+    font-size: 18px;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    margin: 10px 0;
+    display: inline-block;
+    min-width: 150px;
+}
+
+button:hover {
+    background-color: var(--tertiary-color);
+    color: var(--bg-color);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
+}
+
+button:active {
+    transform: translateY(1px);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+button:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(218, 165, 32, 0.4);
+}
+
+.markdown-content {
+    margin-bottom: 20px;
+}