add style and button logic

src/public/js/main.js

@@ -85,23 +85,27 @@ const send = (file, element) => {
                     let url = window.location.href.split("/");
                     url.pop();
                     url.push("file");
+                    let link = `${url.join("/")}/${req.responseText.slice(
+                        1,
+                        -2
+                    )}/${pub_key[0]}:${pub_key[1]}`;
 
                     let main_div = element.parentElement.parentElement;
                     main_div.textContent = "";
                     let div = document.createElement("DIV");
-                    div.textContent = "Fichier prêt !";
                     div.className = "link-area";
                     main_div.appendChild(div);
 
+                    let div_title = document.createElement("H4");
+                    div_title.textContent = "Fichier prêt !";
+                    div.appendChild(div_title);
+
                     let message = document.createElement("P");
                     message.innerHTML = `Copiez le lien pour télécharger <code>${file.name}</code>`;
                     div.appendChild(message);
 
                     let input = document.createElement("INPUT");
-                    input.value = `${url.join("/")}/${req.responseText.slice(
+                    input.value = link;
-                        1,
-                        -2
-                    )}/${pub_key[0]}:${pub_key[1]}`;
                     input.readOnly = true;
                     div.appendChild(input);
 
@@ -109,6 +113,12 @@ const send = (file, element) => {
                     let button = document.createElement("BUTTON");
                     button.textContent = "Copier le lien";
                     div.appendChild(button);
+
+                    button.addEventListener("click", () => {
+                        navigator.clipboard
+                            .writeText(link)
+                            .then(() => (button.textContent = "Lien copié !"));
+                    });
                 } else {
                     console.error("Upload failed.");
                 }

src/public/styles/style.css

@@ -15,6 +15,7 @@
         --border: rgb(45, 40, 22);
         --area-hover: rgb(184, 150, 48);
         --font-size: 17px;
+        --font: Rilu;
     }
 }
 
@@ -27,6 +28,7 @@
         --border: rgb(213, 202, 168);
         --area-hover: rgb(223, 193, 99);
         --font-size: 17px;
+        --font: Rilu;
     }
 }
 
@@ -38,7 +40,7 @@
 html {
     background-color: var(--bg-color);
     color: var(--text-color);
-    font-family: Rilu;
+    font-family: var(--font);
     font-size: var(--font-size);
     scroll-behavior: smooth;
 }
@@ -105,13 +107,50 @@ main {
     padding-left: 1em;
 }
 
+.link-area > input {
+    border-radius: 6px;
+    border: 2px solid var(--shadow);
+    width: 49%;
+    height: 3vh;
+    margin: 0.5vw;
+    background-color: var(--bg-color);
+    color: var(--text-color);
+    font-family: var(--font);
+    font-size: calc(var(--font-size) - 5px);
+}
+
+.link-area > input:focus {
+    border: 2px solid var(--border);
+    outline: none;
+}
+
+.link-area > button {
+    border-radius: 6px;
+    border: 2px solid var(--shadow);
+    width: 50%;
+    height: 5vh;
+    background-color: var(--bg-color);
+    color: var(--text-color);
+    font-family: var(--font);
+    font-size: var(--font-size);
+    transition-duration: 0.4s;
+    cursor: pointer;
+}
+
+.link-area > button:hover {
+    background-color: var(--text-color);
+    color: var(--bg-color);
+    box-shadow: 0 4px 15px 0 var(--shadow), 0 4px 15px 0 var(--shadow);
+}
+
 /* Mobile display */
 @media only screen and (max-height: 850px) {
     header > .text-title {
         font-size: 1.5rem;
     }
 
-    .upload-area {
+    .upload-area,
+    .link-area {
         height: 65vh;
     }
 }