Réorganisation du code

static/css/style.css

@@ -1,40 +1,100 @@
-
 body {
-    background-color: black;
-}
-
-h1 {
-    /* border: 2px #eee solid; */
-    color: rgb(24,216,96);
-    background-color: black;
-    text-align: center;
-    padding: 10px;
-}
-
-h2 {
-    text-align: center;
-    margin: auto;
-    padding: 10px;
-    color: white;
-}
-
-.url {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    /* min-height:100%; */
-    background-color: black;
-    color: white
-}
-
-
-input[type="submit"] {
-    display: block;
-    margin: auto;
-}
-
-button {
-    display: block;
-    margin: 10px auto;
+    margin: 0;
+    font-family: Arial, Helvetica, sans-serif;
+    background-color: #131313;
+    color: #ffffff;
   }
 
+  .container {
+    max-width: 700px;
+    margin: 0 auto;
+    padding: 20px;
+    box-sizing: border-box;
+  }
+
+  .bordered {
+    border: 1px solid rgb(24,216,96);
+    border-radius: 5px;
+    padding: 20px;
+    margin-bottom: 20px;
+  }
+
+  li {
+    font-weight: bold;
+  }
+
+  a {
+    text-decoration-color: rgb(24,216,96);
+    color: rgb(24,216,96);
+  }
+
+  .form-group {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 20px;
+  }
+
+  .form-group label {
+    font-weight: bold;
+    margin-bottom: 5px;
+  }
+
+  .form-control {
+    background-color: #232323;
+    border: none;
+    border-radius: 5px;
+    padding: 10px;
+    color: #ffffff;
+  }
+
+  /* .form-control:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px rgb(24,216,96);
+  } */
+  .form-control:valid:not(:placeholder-shown) {
+    outline: none;
+    border: 2px solid rgb(24,216,96);
+  }
+  .form-control:invalid {
+    outline: none;
+    border: 2px solid red;
+  }
+
+
+
+  .btn {
+    background-color: rgb(24,216,96);
+    border: none;
+    border-radius: 5px;
+    padding: 10px 20px;
+    color: #131313;
+    font-weight: bold;
+    cursor: pointer;
+    text-decoration:none
+  }
+
+  .btn2 {
+      margin-top: 10px;
+      background-color: rgb(24,216,96);
+      border: none;
+      border-radius: 5px;
+      padding: 10px 20px;
+      color: #131313;
+      font-weight: bold;
+      cursor: pointer;
+      text-decoration:none
+  }
+
+  .btn:hover {
+    background-color: rgb(24,216,96);
+    color: whitesmoke
+  }
+
+  h1 {
+      color: rgb(24,216,96);
+  }
+
+  @media (max-width: 600px) {
+    .container {
+      padding: 10px;
+    }

static/js/script.js

@@ -0,0 +1,6 @@
+function startDownload() {
+  document.getElementById('download-button').innerHTML = 'Téléchargement en cours...';
+  }
+function refreshPage() {
+  window.location.reload();
+  }