création du style pour ajouter une quote et deplacement du bouton

config/config.php

@@ -14,7 +14,7 @@ $mdp   = '';
 
 
 //$racine='/~kemondejar/WF-Website'; // /~kekentin/WF/WF-Website /~lebeaulato/WF-Website /~kemondejar/WF-Website
-$racine='/~kekentin/WF/WF-Website';
+$racine='/~marocher8/WF-Website';
 
 //$repImg='/home/UCA/kemondejar/public_html/WF-Website/public/images/';
 $repImg='/';

images/Vector.svg

@@ -0,0 +1,3 @@
+<svg width="87" height="87" viewBox="0 0 87 87" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M74.6088 3.04338L75.4246 2.22758C76.0386 1.6139 76.7675 1.12717 77.5696 0.795191C78.3717 0.463209 79.2314 0.292471 80.0995 0.292725C80.9676 0.292979 81.8271 0.464221 82.629 0.796673C83.431 1.12912 84.1596 1.61628 84.7732 2.23031C85.3869 2.84435 85.8736 3.57325 86.2056 4.37539C86.5375 5.17753 86.7083 6.0372 86.708 6.90533C86.7078 7.77345 86.5365 8.63303 86.2041 9.43497C85.8716 10.2369 85.3845 10.9655 84.7705 11.5792L83.9547 12.3895C85.3502 13.9547 86.0942 15.9944 86.0341 18.0905C85.9741 20.1866 85.1145 22.1803 83.6317 23.663L27.2828 80.0192C26.9305 80.3696 26.4895 80.6175 26.0071 80.7364L4.10699 86.2116C3.64869 86.3257 3.16866 86.3193 2.71356 86.1931C2.25846 86.0668 1.84377 85.8249 1.50981 85.4909C1.17584 85.1569 0.933963 84.7422 0.807679 84.2871C0.681396 83.832 0.675004 83.352 0.789126 82.8936L6.26415 60.9929C6.38394 60.5124 6.63182 60.0734 6.98138 59.7226L59.7715 6.93077C59.2436 6.55917 58.6012 6.38613 57.9581 6.44224C57.3149 6.49834 56.7122 6.77997 56.2566 7.23738L38.2328 25.2672C37.9783 25.5217 37.6761 25.7236 37.3436 25.8614C37.011 25.9991 36.6546 26.07 36.2946 26.07C35.9347 26.07 35.5783 25.9991 35.2457 25.8614C34.9132 25.7236 34.611 25.5217 34.3565 25.2672C34.102 25.0127 33.9001 24.7105 33.7623 24.3779C33.6246 24.0454 33.5537 23.6889 33.5537 23.329C33.5537 22.969 33.6246 22.6126 33.7623 22.28C33.9001 21.9475 34.102 21.6453 34.3565 21.3908L52.3912 3.36642C53.8748 1.88272 55.87 1.02315 57.9673 0.964094C60.0646 0.905041 62.105 1.65099 63.6697 3.04886C65.1741 1.70436 67.1207 0.960681 69.1382 0.959672C71.1558 0.958662 73.1032 1.70039 74.6088 3.04338Z" fill="white"/>
+</svg>

public/styles/styleCreate.css

@@ -1 +1,70 @@
-@import url(./style.css); /* Import de style.css */
+@import url(./style.css);
+
+body.dark-mode .creation form.add {
+    background-color: var(--main-dark-other-color);
+    border-radius: 25px;
+    padding: 20px;
+    max-width: 600px;
+    margin: 40px auto;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    color: var(--main-dark-text-color);
+}
+
+body.light-mode .creation form.add {
+    background-color: var(--main-light-other-color);
+    border-radius: 25px;
+    padding: 20px;
+    max-width: 600px;
+    margin: 40px auto;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    color: var(--main-light-text-color);
+}
+
+.creation form.add input[type="text"],
+.creation form.add input[type="number"],
+.creation form.add textarea {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 15px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    box-sizing: border-box;
+}
+
+.creation form.add input[type="file"] {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 15px;
+    border-radius: 5px;
+    box-sizing: border-box;
+}
+
+.creation form.add input[type="radio"] {
+    width: auto;
+    margin-right: 5px;
+    vertical-align: middle;
+}
+
+.creation form.add label {
+    display: block;
+    margin-bottom: 5px;
+}
+
+.creation form.add input[type="submit"] {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    background-color: #ffffff;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.creation form.add input[type="submit"]:hover {
+    background-color: #f9f9f9;
+}
+
+.creation form.add h1 {
+    text-align: center;
+    margin-bottom: 20px;
+}

public/styles/styleSubmitQuote.css

@@ -1,30 +1,29 @@
 @import url(./style.css);
 
-
 /* ====== DARK MODE ====== */
-
+body.dark-mode h1,
-body.dark-mode h1, body.dark-mode h2, body.dark-mode p {
+body.dark-mode h2,
+body.dark-mode p {
     color: var(--main-dark-text-color);
 }
 
-body.dark-mode #box{
+body.dark-mode #box {
     background: var(--main-dark-other-color);
 }
 
-
 /* ====== LIGHT MODE ====== */
-
+body.light-mode h1,
-body.light-mode h1, body.light-mode h2, body.light-mode p {
+body.light-mode h2,
+body.light-mode p {
     color: var(--main-light-text-color);
 }
 
-body.light-mode #box{
+body.light-mode #box {
     background: var(--main-light-other-color);
 }
 
 /* ====== ECRAN DEFAULT ====== */
-
+h1, h2 {
-h1, h2{
     font-family: "roboto condensed", sans-serif;
     text-align: center;
 }
@@ -39,13 +38,75 @@ h1, h2{
     border-radius: 25px;
 }
 
+/* ====== STYLE SPÉCIFIQUE AU FORMULAIRE ====== */
+#form select,
+#form textarea {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    margin-bottom: 15px;
+    box-sizing: border-box;
+}
+
+#form input[type="submit"] {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    background-color: #ffffff;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+#form input[type="submit"]:hover {
+    background-color: #f9f9f9;
+}
+
+/* ====== STYLE SPÉCIFIQUE À LA PAGE DE CONFIRMATION ====== */
+
+/* Espacement entre les blocs internes */
+#box > div {
+    margin-bottom: 15px;
+}
+
+/* Style pour les libellés */
+#box p {
+    margin: 0;
+    font-weight: bold;
+}
+
+/* Style pour les valeurs affichées */
+#box h2 {
+    margin: 5px 0 0 0;
+    font-weight: normal;
+}
+
+/* Style du bouton de retour */
+#box button {
+    align-self: center;
+    width: 60%;
+    padding: 20px;
+    margin : 20px 20% ;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+    font-size: 1rem;
+}
 
-/* ====== DIVERS ====== */
+/* Bouton en dark mode */
-#contentField, #characterField, #sourceField, #imageField {
+body.dark-mode #box button {
+    background-color: #ffffff;
+    color: black;
 }
 
-#contentField p, #characterField p, #sourceField p, #imageField p {
+/* Bouton en light mode */
+body.light-mode #box button {
+    background-color: #ffffff;
+    color: black;
 }
 
-#confirm {
+#box button:hover {
+    background-color: #f9f9f9;
 }

vue/templates/bandeau.html.twig

@@ -11,6 +11,7 @@
 
     <div class="user">
         <a href="{{ racine }}/search"><img src="{{ racine }}/images/loupe.svg" alt="search"  onmousedown="return false"></a>
+        <a href="{{racine}}/submit" class="createQuote"><img src="{{ racine }}/images/Vector.svg" onmousedown="return false"></img></a>
         <a class="iconUser" href="{{ racine }}/profil"><img src="{{ racine }}/images/user_dark.png" alt="user"  onmousedown="return false"></a>
     </div>
 </div>

vue/templates/profil.html.twig

@@ -45,10 +45,6 @@
             
         </form>
             
-            <div class="createQuote">
-                <a href="{{racine}}/submit" class="createQuote">Ajouter une citation</a>
-            </div>
-            
 
             <div class="buttonSudmiteDiv">
                 <a href="{{ racine }}/unlog" class="createQuote">