From 098a26b77f53b54152a698114f9ace04f08b083d Mon Sep 17 00:00:00 2001
From: Melissa <stage2@echoes.solutions>
Date: Thu, 18 Jun 2026 15:11:28 +0200
Subject: [PATCH] form letter count added with some JavaScript, small
 corrections

---
 contact.js         | 10 ++++++++
 pages/contact.css  | 60 +++++++++++++++++++++++++++-------------------
 pages/contact.html | 16 ++++++++-----
 3 files changed, 55 insertions(+), 31 deletions(-)
 create mode 100644 contact.js

diff --git a/contact.js b/contact.js
new file mode 100644
index 0000000..9dd650d
--- /dev/null
+++ b/contact.js
@@ -0,0 +1,10 @@
+const zoneMessage = document.getElementById("contacter");
+const compteur = document.getElementById("restant");
+
+const MAX = 500;
+
+zoneMessage.addEventListener("input", function () {
+  const dejaTape = zoneMessage.value.length;
+  compteur.textContent = MAX - dejaTape;
+  compteur.style.color = MAX - dejaTape < 50 ? "red" : "black";
+});
diff --git a/pages/contact.css b/pages/contact.css
index 4de2e45..e747cc7 100644
--- a/pages/contact.css
+++ b/pages/contact.css
@@ -5,9 +5,10 @@
 body {
     width: 100%;
     height: 100%;
-    background-color:lightblue;
+    background-color: lightblue;
     margin: 0;
     padding-bottom: 60px;
+}
 
 #nav_barre {
     display: flex;
@@ -19,10 +20,16 @@ body {
 }
 
 .styled {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    line-height: normal;
     border: 0;
     height: 70px;
     width: 130px;
-    line-height: 2.5;
+    gap: 6px;
+    line-height: normal;
     padding: 0 20px;
     box-shadow: 3px 5px 3px darkslategray;
     font-size: 1rem;
@@ -45,7 +52,7 @@ body {
 
 .styled:active {
     box-shadow:
-       inset -2px -2px 3px rgb(255 255 255 / 0.6),
+        inset -2px -2px 3px rgb(255 255 255 / 0.6),
         inset 2px 2px 3px rgb(0 0 0 / 0.6);
 }
 
@@ -61,18 +68,18 @@ body {
 .shadow {
     box-shadow: 0px 10px 5px gray;
 }
-h1{
+h1 {
     font-size: 40px;
 }
 
-.instyled{
+.instyled {
     border: 0;
     height: 70px;
     width: 130px;
     line-height: 2.5;
     padding: 0 20px;
     box-shadow:
-       inset -2px -2px 3px rgb(255 255 255 / 0.6),
+        inset -2px -2px 3px rgb(255 255 255 / 0.6),
         inset 2px 2px 3px rgb(0 0 0 / 0.6);
     font-size: 1rem;
     text-align: center;
@@ -85,54 +92,57 @@ h1{
         rgb(0 0 0 / 0.2),
         rgb(0 0 0 / 0.2) 30%,
         transparent
-         );
+    );
 }
 
-.table{
-
+.table {
     width: 700px;
     height: 300px;
     border-collapse: collapse;
     font-size: 35px;
     table-layout: auto;
     border: 5px solid darkblue;
-    margin-left: 600px;
+    margin-left: auto;
+    margin-right: auto;
     background-color: skyblue;
     box-shadow: 2px 5px 5px darkgray;
 }
 
-thead{
-    background-color:rgb(8, 105, 85);
+thead {
+    background-color: rgb(8, 105, 85);
     color: lightblue;
-
 }
-th,td{
+th,
+td {
     border: 2px solid dimgray;
     padding: 10px;
-
 }
-#titre_tableau{
+#titre_tableau {
     font-size: 25px;
     color: seagreen;
-    margin-left: 600px;
+    padding-left: 200px;
 }
 
-.form{
+.form {
     display: flex;
-    width: 35%;
-    height: 300px;
+    width: 570px;
+    height: 320px;
     border: 3px solid green;
     align-items: center;
     flex-direction: column;
-    margin-left: 620px;
+    margin-left: auto;
+    margin-right: auto;
     margin-top: 100px;
     background-color: rgb(159, 199, 159);
     box-shadow: 2px 5px 3px;
-
 }
 
-textarea{
-    resize:initial;
+textarea {
+    resize: none;
     width: 527px;
-    height:80px;
+    height: 80px;
+}
+
+.small {
+    font-size: 10px;
 }
diff --git a/pages/contact.html b/pages/contact.html
index 99546a3..bf21784 100644
--- a/pages/contact.html
+++ b/pages/contact.html
@@ -12,11 +12,12 @@
             <h1>FleetZen</h1>
             <div id="buttons">
                 <button class="instyled">contact</button>
-                <a href="pages/services.html"><button class="styled">services</button></a>
+                <a href="services.html"><button class="styled">services</button></a>
                 <a href="../index.html"><button class="styled"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-corner-down-left-icon lucide-corner-down-left"><path d="M20 4v7a4 4 0 0 1-4 4H4"/><path d="m9 10-5 5 5 5"/></svg>retour</button></a>
             </div>
         </div>
 
+
     <p id= titre_tableau>
         <b>Les développeurs de ce  site</b>
     </p>
@@ -49,16 +50,19 @@
                 </p>
                 <p>
                     <label for="e_mail">Votre e-mail:</label>
-                    <input type="text" name="e-mail" id="e-mail" placeholder="Ex. : stage2@echoes.solutions" size="50" maxlength="40">
-                </p>
-                <p>
-                       <label for="contacter">Des questions a nous poser?</label><br>
-                       <textarea name="contacter" id="contacter"></textarea>
+                    <input type="e_mail" name="email" id="email" placeholder="Ex. : stage2@echoes.solutions" size="50" maxlength="40">
                 </p>
+                <div>
+                    <label for="contacter">Des questions a nous poser?</label><br>
+                    <textarea name="contacter" id="contacter" rows="6" cols="40" maxlength="500"></textarea>
+                    <p class=small>Il vous reste <span id="restant">500</span> caractères.</p>
+                </div>
                 <p>
                     <button>Envoyer</button>
                 </p>
 
             </form>
         </div>
+        <script src="../contact.js"></script>
     </body>
+</html>