diff --git a/images/search.png b/images/search.png new file mode 100644 index 0000000..04ef0e6 Binary files /dev/null and b/images/search.png differ diff --git a/public/styles/style.css b/public/styles/style.css index 63e9bd8..05bfef8 100644 --- a/public/styles/style.css +++ b/public/styles/style.css @@ -50,6 +50,19 @@ body { width: 40%; } +.search { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + vertical-align: center; + margin: 10px; + width: 70px; + height: 70px; + border-radius: 50%; +} + + /* Mode sombre */ body.dark-mode { background-color: #120B1D; @@ -68,6 +81,10 @@ body.dark-mode .nav img:hover { filter: invert(59%) sepia(96%) saturate(6733%) hue-rotate(275deg) brightness(112%) contrast(122%); } +body.dark-mode .search { + background: linear-gradient(to right, #4a148c, #7b1fa2); +} + /* Mode clair */ body.light-mode { background-color: #ffffff; @@ -86,6 +103,10 @@ body.light-mode .nav img:hover { filter: invert(22%) sepia(6%) saturate(2269%) hue-rotate(193deg) brightness(98%) contrast(106%); } +body.light-mode .search { + background: linear-gradient(180deg, rgba(187,211,249,1) 0%, rgba(199,246,196,1) 100%); +} + /* Media queries for responsiveness */ /* For tablets and small devices */ diff --git a/public/styles/styleAccueil.css b/public/styles/styleAccueil.css index 9f5ead4..45a64e6 100644 --- a/public/styles/styleAccueil.css +++ b/public/styles/styleAccueil.css @@ -1,4 +1,5 @@ -@import url('style.css'); /* Import de style.css */ +@import url(./style.css); /* Import de style.css */ +@import url(./styleQuoteLittle.css); /* Conteneur général pour les citations */ .citations-section { @@ -11,41 +12,6 @@ margin: 0 0; } -/* Conteneur pour les suggestions en deux colonnes */ -.suggestions-container { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - width: 90%; - margin: 0 auto; -} - -/* Citations */ -.citation-container { - background: linear-gradient(to right, #4a148c, #7b1fa2); - border-radius: 12px; - color: white; - display: flex; - align-items: flex-start; - width: 49%; /* Chaque citation occupe 45% de la largeur pour laisser 5% d'espace */ - box-sizing: border-box; - padding: 0; - height: 150px; - overflow: hidden; - margin-bottom: 20px; - word-wrap: break-word; /* Permet de couper les mots trop longs */ - word-break: break-word; -} - -/* Fixe la taille pour s'assurer que toutes les citations restent cohérentes */ -.citation-container .text-content { - flex-grow: 1; - display: flex; - flex-direction: column; - justify-content: center; - height: 150px; -} - /* Citation du jour - toujours en pleine largeur */ .citation-du-jour { width: 90%; /* Prend toute la largeur */ @@ -56,80 +22,3 @@ height: 150px; } -.suggestion { - background: linear-gradient(180deg, rgba(187,211,249,1) 0%, rgba(199,246,196,1) 100%); - padding: 0; - overflow: hidden; -} - -.citation-image { - width: 150px; - height: 100%; - object-fit: cover; - margin: 0; - border-radius: 0; -} - -.text-content { - flex: 1; - padding: 10px; - display: flex; - flex-direction: column; - justify-content: center; /* Centre verticalement le texte */ - word-wrap: break-word; /* Permet de couper les mots trop longs */ - word-break: break-word; -} - -.quote { - font-size: 1.2em; - margin-bottom: 10px; - font-style: italic; -} - - - -.movie, .character, .year { - margin-bottom: 5px; -} - -/* Mode sombre */ -body.dark-mode .suggestion { - background: linear-gradient(to right, #4a148c, #7b1fa2); - color:white; -} - -/* Mode clair */ -body.light-mode .suggestion { - background: linear-gradient(180deg, rgba(187,211,249,1) 0%, rgba(199,246,196,1) 100%); - color:black; /* Changer le texte en noir pour le mode clair */ -} - -body.light-mode .quote, -body.light-mode .movie, -body.light-mode .character, -body.light-mode .year { - color: black; /* Forcer le texte en noir pour le mode clair */ -} - -/* Responsive design */ -@media (max-width: 768px) { - .suggestions-container { - flex-direction: column; - width: 100%; - } - - .citation-container { - width: 100%; /* Chaque citation prend toute la largeur sur mobile */ - max-width: 100%; - height: 100px; /* Supprimer la hauteur fixe sur mobile */ - } - - .citation-image { - width: 100px; - height: 100px; - } - - .quote { - font-size: 1em; - } -} diff --git a/public/styles/styleQuoteLittle.css b/public/styles/styleQuoteLittle.css new file mode 100644 index 0000000..f6856cc --- /dev/null +++ b/public/styles/styleQuoteLittle.css @@ -0,0 +1,111 @@ +/* Conteneur pour les suggestions en deux colonnes */ +.quotes-container { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + width: 90%; + margin: 0 auto; +} + +/* Citations */ +.citation-container { + background: linear-gradient(to right, #4a148c, #7b1fa2); + border-radius: 12px; + color: white; + display: flex; + align-items: flex-start; + width: 49%; /* Chaque citation occupe 45% de la largeur pour laisser 5% d'espace */ + box-sizing: border-box; + padding: 0; + height: 150px; + overflow: hidden; + margin-bottom: 20px; + word-wrap: break-word; /* Permet de couper les mots trop longs */ + word-break: break-word; +} + +/* Fixe la taille pour s'assurer que toutes les citations restent cohérentes */ +.citation-container .text-content { + flex-grow: 1; + display: flex; + flex-direction: column; + justify-content: center; + height: 150px; +} +.quote { + background: linear-gradient(180deg, rgba(187,211,249,1) 0%, rgba(199,246,196,1) 100%); + padding: 0; + overflow: hidden; +} + +.citation-image { + width: 150px; + height: 100%; + object-fit: cover; + margin: 0; + border-radius: 0; +} + +.text-content { + flex: 1; + padding: 10px; + display: flex; + flex-direction: column; + justify-content: center; /* Centre verticalement le texte */ + word-wrap: break-word; /* Permet de couper les mots trop longs */ + word-break: break-word; +} + +.quoteContent { + font-size: 1.2em; + margin-bottom: 10px; + font-style: italic; +} + + + +.movie, .character, .year { + margin-bottom: 5px; +} + +/* Mode sombre */ +body.dark-mode .quote { + background: linear-gradient(to right, #4a148c, #7b1fa2); + color:white; +} + +/* Mode clair */ +body.light-mode .quote { + background: linear-gradient(180deg, rgba(187,211,249,1) 0%, rgba(199,246,196,1) 100%); + color:black; /* Changer le texte en noir pour le mode clair */ +} + +body.light-mode .quote, +body.light-mode .movie, +body.light-mode .character, +body.light-mode .year { + color: black; /* Forcer le texte en noir pour le mode clair */ +} + +/* Responsive design */ +@media (max-width: 768px) { + .suggestions-container { + flex-direction: column; + width: 100%; + } + + .citation-container { + width: 100%; /* Chaque citation prend toute la largeur sur mobile */ + max-width: 100%; + height: 100px; /* Supprimer la hauteur fixe sur mobile */ + } + + .citation-image { + width: 100px; + height: 100px; + } + + .quote { + font-size: 1em; + } +} diff --git a/public/styles/styleSearch.css b/public/styles/styleSearch.css index 2ae7ecf..8c61b09 100644 --- a/public/styles/styleSearch.css +++ b/public/styles/styleSearch.css @@ -1,11 +1,69 @@ @import url(./style.css); +@import url(./styleQuoteLittle.css); + +/* ====== DEFAULT ====== */ + + +.search-container { + margin-left: 5%; + width: 90%; + + height: 60px; + border-radius: 40px; +} + +.search-container .searchButton { + float: right; + width: 60px; + height: 60px; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; +} +.searchButton img{ + width: 70%; + height: 70%; +} + +.search-container input[type="search"] { + margin: 10px ; + border:none; + background: none; + float:left; + padding: 0; + color: #00f; + font-size: 16px; + line-height: 40px; + width:auto; +} + +.filtre{ + display: flex; + justify-content: space-around; + font-size: 30px; +} /* ====== DARK MODE ====== */ /*body.dark-mode */ - +body.dark-mode .search-container { + background: #fff; +} +body.dark-mode .search-container input[type="search"] { + color: #000; +} +body.dark-mode .search-container .searchButton { + background: linear-gradient(to right, #4a148c, #7b1fa2); +} /* ====== LIGHT MODE ====== */ /*body.light-mode*/ - - -/* ====== DEFAULT ====== */ +body.light-mode .search-container { + background: #ccc; +} +body.light-mode .search-container input[type="search"] { + color: #000; +} +body.light-mode .search-container .searchButton { + background: linear-gradient(180deg, rgba(187,211,249,1) 0%, rgba(199,246,196,1) 100%); +} \ No newline at end of file diff --git a/src/Controleur/FrontControler.php b/src/Controleur/FrontControler.php index 44a07b5..2f885ab 100644 --- a/src/Controleur/FrontControler.php +++ b/src/Controleur/FrontControler.php @@ -37,12 +37,12 @@ Class FrontControler{ '' => '[^/\.]++' */ - $router->map('GET|POST', '/quote/[i:idQuote]?', 'VisitorControler','quote'); - $router->map('GET|POST', '/login', 'VisitorControler','login'); - $router->map('GET|POST', '/signin', 'VisitorControler','signin'); + $router->map('GET', '/quote/[i:idQuote]?', 'VisitorControler','quote'); + $router->map('GET', '/login', 'VisitorControler','login'); + $router->map('GET', '/signin', 'VisitorControler','signin'); - $router->map('GET|POST', '/quiz/[i:id]?', 'QuizControler','quiz'); - $router->map('GET|POST', '/search/[a:type]?', 'VisitorControler','search'); + $router->map('GET', '/quiz/[i:id]?', 'QuizControler','quiz'); + $router->map('GET|POST', '/search', 'VisitorControler','search'); $match = $router->match(); diff --git a/src/Controleur/VisitorControler.php b/src/Controleur/VisitorControler.php index e360f72..781188d 100644 --- a/src/Controleur/VisitorControler.php +++ b/src/Controleur/VisitorControler.php @@ -1,16 +1,19 @@ qMod = new QuoteModel(new QuoteGateway($co)); + $this->sMod = new SearchModel(new QuoteGateway($co)); } public function accueil(){ @@ -22,7 +25,7 @@ Class VisitorControler{ global $vues; $id=$arg['idQuote'] ?? 1; $q = $this->qMod->searchId($id); - //echo "{$id}"; + require_once $vues['quote']; } @@ -38,9 +41,16 @@ Class VisitorControler{ require_once $vues['signin']; } - public function search(){ - + public function search(array $arg){ global $vues; + + $type = ($_POST['type'] ?? ""); + $search = ($_POST['search'] ?? NULL); + $filtre = ($arg['filtre'] ?? []); + + + $tq=$this->sMod->searchQuote($type,$search,$filtre); + require_once $vues['search']; } } \ No newline at end of file diff --git a/src/Gateway/QuoteGateway.php b/src/Gateway/QuoteGateway.php index 2794c32..c1ad75a 100644 --- a/src/Gateway/QuoteGateway.php +++ b/src/Gateway/QuoteGateway.php @@ -44,7 +44,33 @@ Class QuoteGateway{ return $result; } - + public function search(?string $type,?string $search,array $filtre):array{ + $query="SELECT q.id_quote, q.content, c.caracter, i.imgPath, s.title, s.dates, q.likes, q.langue + FROM Quote q + JOIN Caracter c ON c.id_caracter = q.id_caracter + JOIN Source s ON s.id_source = q.id_source + JOIN Image i ON c.id_img = i.id_img + WHERE lower("; + + if($type=='personnage'){ + $query = $query . "c.caracter) LIKE lower('%" . $search . "%')"; + } + elseif($type=='titre'){ + $query = $query . "s.title) LIKE lower('%" . $search . "%')"; + } + else{ + $query = $query . "q.content) LIKE lower('%" . $search . "%')"; + } + /* Categorie a rajouter + foreach($filtre as $fil){ + $query = $query . " AND " . $fil + }*/ + + $this->con->executeQuery($query,array()); + + $result=$this->con->getResults(); + return $result; + } //======================== PARTI ADMIN ======================== //Probablement à déplacer dans un autre fichier diff --git a/src/Model/searchModel.php b/src/Model/searchModel.php deleted file mode 100644 index e69de29..0000000 diff --git a/vue/accueil.php b/vue/accueil.php index 18a6c4a..acf53a9 100644 --- a/vue/accueil.php +++ b/vue/accueil.php @@ -49,7 +49,7 @@ if ($citationDuJour) { echo "
"; echo "$movie"; echo "
"; - echo "

\"$quote\"

"; + echo "

\"$quote\"

"; echo "

- $movie

"; echo "

Personnage : $character

"; echo "

Année : $year

"; @@ -61,23 +61,16 @@ if ($citationDuJour) { if (!empty($suggestions)) { echo "

Suggestions

"; - echo "
"; - foreach ($suggestions as $suggestion) { - $quote = htmlspecialchars(trim($suggestion[0])); - $movie = htmlspecialchars(trim($suggestion[1])); - $character = htmlspecialchars(trim($suggestion[2])); - $year = htmlspecialchars(trim($suggestion[3])); - $imagePath = htmlspecialchars(trim($suggestion[4])); - - echo "
"; - echo "$movie"; - echo "
"; - echo "

\"$quote\"

"; - echo "

- $movie

"; - echo "

Personnage : $character

"; - echo "

Année : $year

"; - echo "
"; - echo "
"; + echo "
"; + foreach($suggestions as $suggestion){ + + echo $twig->render('quoteLittle.html.twig', array( + 'srcImg' => htmlspecialchars(trim($suggestion[4])), + 'quoteContent' => htmlspecialchars(trim($suggestion[0])) , + 'sourceName' => htmlspecialchars(trim($suggestion[1])) , + 'nameCarac' => htmlspecialchars(trim($suggestion[2])) , + 'dateSortie' => htmlspecialchars(trim($suggestion[3])) , + )); } echo "
"; } diff --git a/vue/search.php b/vue/search.php index 177b1c3..a3ae87b 100644 --- a/vue/search.php +++ b/vue/search.php @@ -8,9 +8,25 @@ )); echo $twig->render('bandeau.html.twig'); - echo $twig->render('filtre.html.twig'); - echo $_POST['type']; - echo $_POST['search']; + echo $twig->render('filtre.html.twig',array( + 'search'=>$search, + 'type'=>$type, + )); + + + echo "

Résultats

"; + echo "
"; + foreach($tq as $q){ + + echo $twig->render('quoteLittle.html.twig', array( + 'srcImg' => $q->getImgPath(), + 'quoteContent' => $q->getContent(), + 'sourceName' => $q->getTitleSrc(), + 'nameCarac' => $q->getCarac(), + 'dateSortie' => $q->getDateSrc(), + )); + } + echo "
"; //echo $twig->render('resultat.html.twig'); ?> \ No newline at end of file diff --git a/vue/templates/bandeau.html.twig b/vue/templates/bandeau.html.twig index a5a512b..1b83d16 100644 --- a/vue/templates/bandeau.html.twig +++ b/vue/templates/bandeau.html.twig @@ -9,6 +9,11 @@ Logo
+ +
+ search +
+ user
\ No newline at end of file diff --git a/vue/templates/filtre.html.twig b/vue/templates/filtre.html.twig index 89f8ef2..1dc25eb 100644 --- a/vue/templates/filtre.html.twig +++ b/vue/templates/filtre.html.twig @@ -1,44 +1,46 @@ -
- - + +
+ + +
-
+
- +
- +
- +
+ \ No newline at end of file diff --git a/vue/templates/quoteLittle.html.twig b/vue/templates/quoteLittle.html.twig new file mode 100644 index 0000000..3f60e60 --- /dev/null +++ b/vue/templates/quoteLittle.html.twig @@ -0,0 +1,9 @@ +
+ {{ sourceName }} +
+

{{ quoteContent }}

+

- {{ sourceName }}

+

Personnage : {{ nameCarac }}

+

Année : {{ dateSortie }}

+
+
\ No newline at end of file