Page Quote (revoir le CSS) mis en place du twig

public/styles/styleLogin.css

@@ -122,7 +122,7 @@ body.light-mode .connexion{
 }
 
 
-/* ====== OTHER ====== */
+/* ====== DEFAULT ====== */
 .buttonSudmiteDiv{
 	text-align: center;
 }

public/styles/styleQuote.css

@@ -1,21 +1,110 @@
 @import url(./style.css);
 
-body.dark-mode .divQuote{
+/* ====== DARK MODE ====== */
+body.dark-mode .card {
+    position: relative;
     background-color: black;
-	width: 30%;
-	margin-left: 2%;
-	margin-top: 3%;
-	border-radius: 25px;
-	border: 2px solid transparent;
+    border-radius: 15px;
+    width: 60%;
+    display: flex;
+    margin-left: 5%;
+    border: 2px solid transparent;
+}
+
+
+body.dark-mode .card-content {
+    color: white;
+    margin-left: 20px;
+    flex: 1;
+}
+
+
+body.dark-mode .likes {
+    margin-left: 85%;
+    font-size: 20px;
+    color: #fff;
+}
+
+body.dark-mode .like-icon {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    font-size: 35px;
+    color: #fff;
+    cursor: pointer;
+}
+
+body.dark-mode .share-icon {
+    position: absolute;
+    top: 70px;
+    right: 10px;
+    font-size: 35px;
+    color: #fff;
+    cursor: pointer;
 }
 
-body.dark-mode .imgQuote{
-    border-radius: 15%;
+/* ====== LIGHT MODE ====== */
+
+body.light-mode .card {
+    position: relative;
+    background-color: white;
+    border-radius: 15px;
     width: 60%;
+    display: flex;
+    margin-left: 5%;
+    border: 2px solid black;
+}
+
+body.light-mode .card-content {
+    color: black;
+    margin-left: 20px;
+    flex: 1;
 }
 
-body.dark-mode .textQuote, .quote{
-    font-family: "Lemon", serif;
+
+body.light-mode .likes {
+    margin-left: 85%;
     font-size: 20px;
+    color: black;
+}
+
+body.light-mode .like-icon {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    font-size: 35px;
+    color: black;
+    cursor: pointer;
+}
+
+body.light-mode .share-icon {
+    position: absolute;
+    top: 70px;
+    right: 10px;
+    font-size: 35px;
+    color: black;
+    cursor: pointer;
+}
+
+/* ====== DEFAULT ====== */
+.infoQuote {
+    list-style: none;
+    font-size: 25px;
+    line-height: 40px;
+    margin-top: 35%;
+    margin-left: -45%;
+    margin-bottom: 20px;
+}
+.card-image {
+    border-radius: 10px;
+    width: 310px;
+    height: 270px;
 }
 
+.quote {
+    margin-top: 10px;
+    font-size: 35px;
+    font-weight: bold;
+    font-style: italic;
+    margin-bottom: 15px;
+}

vue/quote.php

@@ -14,21 +14,14 @@
     ));
 
     echo $twig->render('bandeau.html.twig');
-    echo $twig->render('quote.html.twig', array(
-                        'srcImg' =>  "../default.jpg",
-                        'nameCarac' => "default",
-                        'quoteContent' => "je test la page",
-                        'sourceName' => "une source",
-                        'dateSortie' => "1999",
-                        'nbLike' => "0",
-                        'comment'=> array(
-                            array(
-                            'user'=>'toto',
-                            'content'=>'12345674fkjgvhgtfoidshfziutgfos'
-                            ),
-                            array(
-                            'user'=> 'tata',
-                            'content'=>'azertyuiopqsdfghjklmwxcvbn'
-                            )
-)));
+    echo $twig->render('quote.html', array(
+                        'srcImg' =>  "../public/images/Dark_Vador.jpg",
+                        'nameCarac' => "Dark Vador",
+                        'quoteContent' => "Je suis ton père",
+                        'sourceName' => "Star Wars V : L’Empire contre-attaque",
+                        'dateSortie' => "1980",
+                        'nbLike' => "173000",
+                        'timeCode' =>"1h45",
+                        
+));
 ?>

vue/templates/head.html.twig

@@ -6,6 +6,6 @@
         <title>{{ title }}</title>
         <link rel="stylesheet" href="{{ style }}">
         <link id="favicon" rel="icon" href="../../public/images/iconeSombre.ico" />
-        <script src="./../../public/script/theme-toggle.js"></script>
+        <script src="../public/script/theme-toggle.js"></script>
     </head>
     

vue/templates/quote.html

@@ -0,0 +1,23 @@
+
+    <div class="card">
+            <img class="card-image" src="{{ srcImg }}" >
+            
+            <div class="card-content">
+                <h2 class="quote">“{{quoteContent}}”</h2>
+                <ul class="infoQuote">
+                    <li>- {{sourceName}} ({{timeCode}})</li>
+                    <li>- {{nameCarac}}</li>
+                    <li>- {{dateSortie}}</li>
+                </ul>
+
+                <div class="likes">
+                    <p>{{nbLike}} ❤️</p>
+                </div>
+            </div>
+
+            <div class="like-icon">❤️</div>
+            <div class="share-icon">🔗</div>
+            
+        </div>
+    </body> 
+</html>

vue/templates/quote.html.twig

@@ -1,10 +0,0 @@
-
-        <div class="divQuote">
-            <img class="imgQuote" src="../../images/vador.webp"/>
-            <p class="quote"> <strong>"Je suis ton père"</strong></p>
-            <p class="textQuote"> Star Wars V : L'Empire contre-attaque (1h45)</p>
-            <p class="textQuote">Dark Vador</p>
-            <p class="textQuote">1980</p>
-        </div>
-    </body>
-</html>