From 8b4b3c84e0774ea6de8b3e8c4540a2c1e86879a3 Mon Sep 17 00:00:00 2001
From: MasterAcnolo <68693319+MasterAcnolo@users.noreply.github.com>
Date: Sat, 28 Jun 2025 17:56:36 +0200
Subject: [PATCH] Push avant modif DIV INFO

---
 public/assets/icons/file-audio-solid.svg |  1 +
 public/index.html                        | 26 +++++++-
 public/styles/button/btn-download.css    |  0
 public/styles/button/btn-select.css      |  0
 public/styles/button/checkbox.css        | 80 +++++++++++++++++++++++
 public/styles/layout/container.css       |  5 +-
 public/styles/layout/ctr-infos.css       |  2 +-
 public/styles/layout/footer.css          |  0
 public/styles/layout/form.css            | 31 ++++++++-
 public/styles/layout/header.css          | 11 ++++
 public/styles/layout/videoinfo.css       | 81 ++++++++++++++++++++++++
 public/styles/styles.css                 | 38 +++++------
 server/server.js                         |  2 +-
 13 files changed, 249 insertions(+), 28 deletions(-)
 create mode 100644 public/assets/icons/file-audio-solid.svg
 delete mode 100644 public/styles/button/btn-download.css
 delete mode 100644 public/styles/button/btn-select.css
 create mode 100644 public/styles/button/checkbox.css
 delete mode 100644 public/styles/layout/footer.css
 create mode 100644 public/styles/layout/videoinfo.css
diff --git a/public/assets/icons/file-audio-solid.svg b/public/assets/icons/file-audio-solid.svg
new file mode 100644
index 0000000..d0582af
--- /dev/null
+++ b/public/assets/icons/file-audio-solid.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-288-128 0c-17.7 0-32-14.3-32-32L224 0 64 0zM256 0l0 128 128 0L256 0zm2 226.3c37.1 22.4 62 63.1 62 109.7s-24.9 87.3-62 109.7c-7.6 4.6-17.4 2.1-22-5.4s-2.1-17.4 5.4-22C269.4 401.5 288 370.9 288 336s-18.6-65.5-46.5-82.3c-7.6-4.6-10-14.4-5.4-22s14.4-10 22-5.4zm-91.9 30.9c6 2.5 9.9 8.3 9.9 14.8l0 128c0 6.5-3.9 12.3-9.9 14.8s-12.9 1.1-17.4-3.5L113.4 376 80 376c-8.8 0-16-7.2-16-16l0-48c0-8.8 7.2-16 16-16l33.4 0 35.3-35.3c4.6-4.6 11.5-5.9 17.4-3.5zm51 34.9c6.6-5.9 16.7-5.3 22.6 1.3C249.8 304.6 256 319.6 256 336s-6.2 31.4-16.3 42.7c-5.9 6.6-16 7.1-22.6 1.3s-7.1-16-1.3-22.6c5.1-5.7 8.1-13.1 8.1-21.3s-3.1-15.7-8.1-21.3c-5.9-6.6-5.3-16.7 1.3-22.6z"/></svg>
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 38e370a..095164e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,15 +5,34 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Freedom Loader</title>
 
+    <!--CSS-->
     <link rel="stylesheet" href="styles/styles.css">
+    
+    <!--Icons-->
+    <link rel="icon" href="assets/icons/file-audio-solid.svg" type="image/svg+xml">
 </head>
 <body>
     
     <div class="container">
 
+        <header>
+            <h1> Freedom Loader </h1>
+            <p> Because why not? </p>
+        </header>
+        
         <form action="/download" method="POST" id="downloadForm">
-            <input name="url" placeholder="URL YouTube" id="UrlInput">
-            <input type="checkbox" name="audioOnly" value="1"> MP3 seulement
+            <input name="url" placeholder="URL" id="UrlInput">
+
+            <label class="checkbox-inline">
+
+                <label class="checkbox-mp3">
+                    <input type="checkbox" name="audioOnly" value="1">
+                    <div class="checkmark"></div>
+                </label>
+                <!-- <input type="checkbox" name="audioOnly" value="1"> -->
+                Audio seulement (MP3)
+            </label>
+            <!-- <input type="checkbox" name="audioOnly" value="1"> Audio seulement (MP3) -->
             <select name="quality">
                 <option value="best">Meilleure qualité</option>
                 <option value="worst">Qualité minimale</option>
@@ -21,7 +40,7 @@
             <button type="submit">Télécharger</button>
         </form>
 
-        <div id="downloadStatus" style="margin-top: 1em; font-weight:bold;"></div>
+        <div id="downloadStatus"></div>
 
         <!--Il faut utiliser un formulaire, parce que on doit envoyer a un serveur 
         les données à traiter. Pour cela on définit une route vers /download, ca va
@@ -35,5 +54,6 @@
 
     <script src="script/downloadstatus.js"></script>
     <script src="script/fetchinfo.js"></script>
+    
 </body>
 </html>
\ No newline at end of file
diff --git a/public/styles/button/btn-download.css b/public/styles/button/btn-download.css
deleted file mode 100644
index e69de29..0000000
diff --git a/public/styles/button/btn-select.css b/public/styles/button/btn-select.css
deleted file mode 100644
index e69de29..0000000
diff --git a/public/styles/button/checkbox.css b/public/styles/button/checkbox.css
new file mode 100644
index 0000000..7029595
--- /dev/null
+++ b/public/styles/button/checkbox.css
@@ -0,0 +1,80 @@
+/* From Uiverse.io by bociKond */ 
+/* Hide the default checkbox */
+.checkbox-mp3 input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+
+.checkbox-mp3 {
+  display: block;
+  position: relative;
+  cursor: pointer;
+  font-size: 1.5rem;
+  user-select: none;
+}
+
+/* Create a custom checkbox */
+.checkmark {
+  --clr: #0B6E4F;
+  position: relative;
+  top: 0;
+  left: 0;
+  height: 1.3em;
+  width: 1.3em;
+  background-color: #ccc;
+  border-radius: 50%;
+  transition: 300ms;
+}
+
+/* When the checkbox is checked, add a blue background */
+.checkbox-mp3 input:checked ~ .checkmark {
+  background-color: var(--clr);
+  border-radius: .5rem;
+  animation: pulse 500ms ease-in-out;
+}
+
+/* Create the checkmark/indicator (hidden when not checked) */
+.checkmark:after {
+  content: "";
+  position: absolute;
+  display: none;
+}
+
+/* Show the checkmark when checked */
+.checkbox-mp3 input:checked ~ .checkmark:after {
+  display: block;
+}
+
+/* Style the checkmark/indicator */
+.container .checkmark:after {
+  left: 0.45em;
+  top: 0.25em;
+  width: 0.25em;
+  height: 0.5em;
+  border: solid #E0E0E2;
+  border-width: 0 0.15em 0.15em 0;
+  transform: rotate(45deg);
+}
+
+@keyframes pulse {
+  0% {
+    box-shadow: 0 0 0 #0B6E4F90;
+    rotate: 20deg;
+  }
+
+  50% {
+    rotate: -20deg;
+  }
+
+  75% {
+    box-shadow: 0 0 0 10px #0B6E4F60;
+  }
+
+  100% {
+    box-shadow: 0 0 0 13px #0B6E4F30;
+    rotate: 0;
+  }
+}
\ No newline at end of file
diff --git a/public/styles/layout/container.css b/public/styles/layout/container.css
index 15de33e..c00fd6c 100644
--- a/public/styles/layout/container.css
+++ b/public/styles/layout/container.css
@@ -1,11 +1,10 @@
 .container {
-  position: fixed;      
+  position: relative;      
   top: 0;
   left: 0;
   right: 0;
-  background-color: #121212; 
+  /* height: 10000px; */
   padding: 1em;
-  box-shadow: 0 2px 5px rgba(0,0,0,0.5);
   z-index: 1000;        
   display: flex;
   flex-direction: column;
diff --git a/public/styles/layout/ctr-infos.css b/public/styles/layout/ctr-infos.css
index ed71cf6..554c505 100644
--- a/public/styles/layout/ctr-infos.css
+++ b/public/styles/layout/ctr-infos.css
@@ -1,5 +1,5 @@
 #downloadStatus {
-    min-height: 1.5em;  /* pour garder la place même vide */
+    min-height: 1.5em;  
     font-weight: bold;
     text-align: center;
     color: #007bff;
diff --git a/public/styles/layout/footer.css b/public/styles/layout/footer.css
deleted file mode 100644
index e69de29..0000000
diff --git a/public/styles/layout/form.css b/public/styles/layout/form.css
index a85d857..faa7f41 100644
--- a/public/styles/layout/form.css
+++ b/public/styles/layout/form.css
@@ -41,4 +41,33 @@ form#downloadForm {
   max-width: 600px;
   width: 100%;
   justify-content: center;
-}
\ No newline at end of file
+}
+
+.checkbox-inline {
+  display: flex;
+  align-items: center;
+  align-self: center;
+  gap: 0.5em;
+}
+
+#UrlInput {
+  padding: 0.75em 1em;
+  border-color: #ccc;
+  box-shadow: none;
+  border-radius: 8px;
+  font-size: 1rem;
+  transition: border-color 0.3s ease, box-shadow 0.3s ease;
+  background-color: #f9f9f9;
+  color: #333;
+}
+
+#UrlInput:focus {
+  border-color: #0056b3;
+  box-shadow: 0 0 5px rgba(0,123,255,0.4);
+  outline: none;
+  background-color: #fff;
+}
+
+#UrlInput::placeholder {
+  color: #aaa;
+}
diff --git a/public/styles/layout/header.css b/public/styles/layout/header.css
index e69de29..f2ba12f 100644
--- a/public/styles/layout/header.css
+++ b/public/styles/layout/header.css
@@ -0,0 +1,11 @@
+header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;  
+    margin-bottom: 2vw;
+}
+
+
+header h1{
+    margin-bottom: 0.2vw;
+}
\ No newline at end of file
diff --git a/public/styles/layout/videoinfo.css b/public/styles/layout/videoinfo.css
new file mode 100644
index 0000000..b47fc17
--- /dev/null
+++ b/public/styles/layout/videoinfo.css
@@ -0,0 +1,81 @@
+#videoInfo {
+  margin-top: 20px;
+  max-width: 600px;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 1.5em 2em;
+  background-color: #fff;
+  border-radius: 12px;
+  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
+  color: #222;
+  font-size: 1rem;
+  line-height: 1.5;
+  opacity: 0;
+  max-height: 0;
+  overflow: hidden;
+  transition: opacity 0.5s ease, max-height 0.5s ease;
+  user-select: text;
+  word-wrap: break-word;
+}
+
+#videoInfo.visible {
+  opacity: 1;
+  max-height: 1500px; 
+  overflow: visible;
+}
+
+#videoInfo h3 {
+  font-size: 1.8rem;
+  margin-bottom: 0.6em;
+  color: #007bff;
+  font-weight: 700;
+  word-break: break-word;
+}
+
+#videoInfo img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 10px;
+  margin-bottom: 1em;
+  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+#videoInfo ul {
+  list-style: none;
+  padding-left: 0;
+}
+
+#videoInfo ul li {
+  margin-bottom: 0.5em;
+  font-weight: 500;
+  color: #444;
+}
+
+#videoInfo ul li strong {
+  color: #000;
+}
+
+#videoInfo ul li a {
+  color: #007bff;
+  text-decoration: none;
+}
+
+#videoInfo ul li a:hover,
+#videoInfo ul li a:focus {
+  text-decoration: underline;
+}
+
+/* Responsive */
+@media (max-width: 480px) {
+  #videoInfo {
+    padding: 1em;
+    font-size: 0.9rem;
+  }
+
+  #videoInfo h3 {
+    font-size: 1.4rem;
+  }
+}
diff --git a/public/styles/styles.css b/public/styles/styles.css
index 05ade30..39d6786 100644
--- a/public/styles/styles.css
+++ b/public/styles/styles.css
@@ -1,31 +1,37 @@
 @import url("layout/form.css");
 @import url("layout/container.css");
 @import url("layout/ctr-infos.css");
+@import url("layout/header.css");
+@import url("layout/videoinfo.css");
+@import url("button/checkbox.css");
 
-*{
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
+html,body{
     margin: 0;
     padding: 0;
     scroll-behavior: smooth;
-
+    /* outline: 2px solid red; */
+      font-family: "Poppins", sans-serif;
+    font-weight: 500;
+    font-style: normal;
 }
 
 body {
     margin: 0;
-    font-family: Arial, sans-serif;
-    background-color: #f5f5f5;
+    /* background-color: #f5f5f5; */
+    background-image: linear-gradient(to left top, #838383, #a1a1a1, #bfbfbf, #dfdfdf, #ffffff);
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+    width: 100%;
+    height: 100%;
     color: #333;
     display: flex;
     justify-content: center;
-    align-items: center;
-    height: 100vh;
+    align-items: center;    
 }
 
-#downloadStatus {
-  margin-top: 0.5em;
-  font-weight: bold;
-  color: #eee;
-  min-height: 1.5em;
-}
 
 #videoInfo {
   margin-top: 100px; 
@@ -34,7 +40,7 @@ body {
   margin-left: auto;
   margin-right: auto;
   border-radius: 8px;
-  color: #fff;
+  color: rgb(0, 0, 0);
   box-shadow: 0 0 10px rgba(0,0,0,0.5);
   transition: opacity 0.5s ease, max-height 0.5s ease;
   opacity: 0;
@@ -46,9 +52,3 @@ body {
   opacity: 1;
   max-height: 1000px;
 }
-
-label {
-    display: flex;
-    align-items: center;
-    font-size: 0.9em;
-}
\ No newline at end of file
diff --git a/server/server.js b/server/server.js
index 2650471..1a7ed50 100644
--- a/server/server.js
+++ b/server/server.js
@@ -23,5 +23,5 @@ app.use("/info", infoRoute); // on associe le contenu de infos.js à /info
 
 
 app.listen(8080, () => {
-  console.log("🟢 Serveur prêt sur http://localhost:8080");
+  console.log("🟢 Serveur prêt sur http://localhost:8080 \n Bonjour!");
 });
