Compare commits
35 Commits
documentat
...
master
| Author | SHA1 | Date |
|---|---|---|
 Maxime ROCHER
|
da2a2395d8 | 1 month ago |
|
Maxime ROCHER
|
25c49e6600 | 1 month ago |
|
Maxime ROCHER
|
248d75441d | 1 month ago |
|
Maxime ROCHER
|
9fec0c90b3 | 1 month ago |
|
Maxime ROCHER
|
331d139b29 | 3 months ago |
|
Maxime ROCHER
|
dde7c7736f | 3 months ago |
 Leni BEAULATON
|
434c6f4144 | 3 months ago |
|
Leni BEAULATON
|
f7bd335735 | 3 months ago |
brongniart
|
c909aae222 | 3 months ago |
 Kentin BRONGNIART
|
3403a5592c | 3 months ago |
|
brongniart
|
63ab93f3ca | 3 months ago |
|
brongniart
|
42aa62aece | 3 months ago |
|
Maxime ROCHER
|
8f99b30a0e | 3 months ago |
|
Maxime ROCHER
|
00a9cc3641 | 3 months ago |
|
Maxime ROCHER
|
165b1fcbd9 | 3 months ago |
|
brongniart
|
dfa5813ace | 3 months ago |
|
Maxime ROCHER
|
f61062ae8a | 3 months ago |
 Kevin MONDEJAR
|
0b226224cf | 3 months ago |
|
kevin.modejar
|
48c5114e0c | 3 months ago |
|
kevin.modejar
|
4c365356a2 | 3 months ago |
|
Maxime ROCHER
|
37f0c11f4c | 3 months ago |
|
Maxime ROCHER
|
342a9f1de8 | 3 months ago |
|
Maxime ROCHER
|
a38e64c2bc | 3 months ago |
|
kevin.modejar
|
5090c8407e | 3 months ago |
|
Maxime ROCHER
|
7e553a63e7 | 3 months ago |
|
Maxime ROCHER
|
82b2b047c5 | 3 months ago |
|
kevin.modejar
|
cd767ee45a | 3 months ago |
|
kevin.modejar
|
ca81cd84bf | 3 months ago |
|
kevin.modejar
|
c25b7b5030 | 3 months ago |
|
kevin.modejar
|
fda3d1e68f | 3 months ago |
|
kevin.modejar
|
60e2f0729f | 3 months ago |
|
kevin.modejar
|
c86de066fd | 3 months ago |
|
kevin.modejar
|
ccc48431e8 | 3 months ago |
|
Maxime ROCHER
|
8c848bc67d | 3 months ago |
|
kevin.modejar
|
ab176cb06e | 3 months ago |
@ -1,2 +1,73 @@
|
|||||||
# WikiFantasyWeb
|
# Projet web What the Fantasy
|
||||||
|
|
||||||
|
Current deployment state : [](https://codefirst.iut.uca.fr/WhatTheFantasy/WF-Website)
|
||||||
|
|
||||||
|
## Description
|
||||||
|
|
||||||
|
Le site **What the Fantasy** est une application web permettant aux utilisateurs de découvrir des citations célèbres du monde de la fantasy. En plus de pouvoir lire et apprécier les citations, les utilisateurs peuvent créer un compte pour interagir avec elles en les likant, en les commentant, et en participant à des quiz à thème ou aléatoires.
|
||||||
|
|
||||||
|
### Fonctionnalités principales
|
||||||
|
|
||||||
|
- **Découverte de citations** : Parcourez une large sélection de citations tirées de l'univers de la fantasy.
|
||||||
|
- **Interaction avec les citations** : Les utilisateurs connectés peuvent **liker** et **commenter** les citations.
|
||||||
|
- **Création de compte utilisateur** : Inscription et connexion des utilisateurs pour accéder à des fonctionnalités supplémentaires.
|
||||||
|
- **Quiz interactifs** : Les utilisateurs peuvent participer à des quiz à thème (par exemple, quiz sur les personnages de la fantasy) ou un quiz aléatoire pour deviner qui a dit une citation parmi une liste d'auteurs célèbres.
|
||||||
|
|
||||||
|
|
||||||
|
## Prérequis
|
||||||
|
|
||||||
|
Avant d'exécuter le site, vous devez avoir installé les éléments suivants sur votre machine :
|
||||||
|
|
||||||
|
- **Apache2** : Le serveur web Apache2 pour héberger le site.
|
||||||
|
- [Installation d'Apache2](https://httpd.apache.org/docs/)
|
||||||
|
|
||||||
|
- **PHP** : Le langage côté serveur utilisé pour gérer la logique d'interaction et les données dynamiques.
|
||||||
|
- Vous pouvez installer PHP sur votre serveur via [ces instructions](https://www.php.net/manual/en/install.php).
|
||||||
|
|
||||||
|
- **PostgreSQL** : La base de données pour stocker les utilisateurs, citations et résultats des quiz.
|
||||||
|
- [Installation de PostgreSQL](https://www.postgresql.org/download/)
|
||||||
|
|
||||||
|
- **JavaScript** : Pour les fonctionnalités interactives côté client.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
### 1. Cloner le dépôt
|
||||||
|
|
||||||
|
Clonez le dépôt Git sur votre machine locale avec la commande suivante :
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git clone https://codefirst.iut.uca.fr/git/WhatTheFantasy/WF-Website.git
|
||||||
|
```
|
||||||
|
### 2. Installer Apache2, PHP et MySQL/MariaDB
|
||||||
|
**Sur Ubuntu/Debian (exemple d'installation) :**
|
||||||
|
```bash
|
||||||
|
sudo apt update
|
||||||
|
sudo apt install apache2
|
||||||
|
```
|
||||||
|
Cela installera Apache2.
|
||||||
|
|
||||||
|
**Lancer le serveur Apache**
|
||||||
|
|
||||||
|
Assurez-vous que le serveur Apache2 est en fonctionnement. Sur Ubuntu/Debian, vous pouvez redémarrer Apache avec la commande suivante :
|
||||||
|
```bash
|
||||||
|
sudo systemctl restart apache2
|
||||||
|
```
|
||||||
|
|
||||||
|
**Sur Windows :**<br/>
|
||||||
|
Téléchargez et installez [XAMPP](https://www.apachefriends.org/download.html), qui inclut Apache, PHP
|
||||||
|
|
||||||
|
|
||||||
|
## Auteurs
|
||||||
|
BRONGNIART Kentin<br/>
|
||||||
|
BEAULATON Léni<br/>
|
||||||
|
ROCHER Maxime<br/>
|
||||||
|
MONDEJAR Kevin<br/>
|
||||||
|
GUICHARD-MONTGUERS Louis<br/>
|
||||||
|
NGUYEN Tommy<br/>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
|
After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 1.7 MiB |
|
After Width: | Height: | Size: 135 KiB |
|
Before Width: | Height: | Size: 152 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 152 KiB After Width: | Height: | Size: 28 KiB |
@ -0,0 +1,76 @@
|
|||||||
|
@import url(./style.css); /* Import de style.css */
|
||||||
|
|
||||||
|
h2{
|
||||||
|
text-align: center;
|
||||||
|
font-size: 2em;
|
||||||
|
padding-top: 15px;
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3{
|
||||||
|
text-align: center;
|
||||||
|
margin-left: 15px;
|
||||||
|
margin-right: 15px;
|
||||||
|
margin-top: -5px;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a{
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.linkQuiz img{
|
||||||
|
width: 14vw;
|
||||||
|
height: 22vh;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 10px 10px 0px 0px;
|
||||||
|
margin : 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quizCard{
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 15px;
|
||||||
|
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.quiz-container{
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
display: flex;
|
||||||
|
justify-content: start;
|
||||||
|
align-items: self-start;
|
||||||
|
gap: 2vw;
|
||||||
|
margin-top: 2em;
|
||||||
|
min-height: 68vh;
|
||||||
|
width: 95vw;
|
||||||
|
padding: 15px;
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark mode */
|
||||||
|
|
||||||
|
.dark-mode h3 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-mode .quizCard {
|
||||||
|
background: var(--main-dark-gradient);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-mode .quiz-container {
|
||||||
|
background: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Light mode */
|
||||||
|
|
||||||
|
.light-mode h3 {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.light-mode .quizCard {
|
||||||
|
background: var(--main-light-gradient);
|
||||||
|
}
|
||||||
|
|
||||||
|
.light-mode .quiz-container {
|
||||||
|
background: #46BE73;
|
||||||
|
}
|
||||||
@ -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;
|
||||||
|
}
|
||||||
|
|||||||
@ -1,120 +0,0 @@
|
|||||||
/* Conteneur pour les suggestions en deux colonnes */
|
|
||||||
.suggestions-container {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: space-around;
|
|
||||||
width: 100%;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
a.link-citation {
|
|
||||||
text-decoration: none;
|
|
||||||
color: white;
|
|
||||||
width: 47.5%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Citations */
|
|
||||||
.citation-container {
|
|
||||||
background: linear-gradient(to right, #4a148c, #7b1fa2);
|
|
||||||
border-radius: 12px;
|
|
||||||
color: white;
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
align-items: flex-start;
|
|
||||||
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 {
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.citation .movie, .character, .year {
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Mode sombre */
|
|
||||||
body.dark-mode .quote {
|
|
||||||
background: linear-gradient(45deg, #4a148c, #7b1fa2);
|
|
||||||
color:white;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Mode clair */
|
|
||||||
body.light-mode .quote {
|
|
||||||
background-image: linear-gradient(-28deg, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
|
|
||||||
color:black; /* Changer le texte en noir pour le mode clair */
|
|
||||||
}
|
|
||||||
|
|
||||||
body.light-mode .citation,
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,108 +0,0 @@
|
|||||||
/* header.css */
|
|
||||||
|
|
||||||
/* Styles généraux */
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background-color: #120b1d;
|
|
||||||
font-family: "Lemon", serif;
|
|
||||||
margin-top: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Header */
|
|
||||||
.header {
|
|
||||||
display: flex;
|
|
||||||
position: fixed;
|
|
||||||
background-color: #000000;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
vertical-align: center;
|
|
||||||
gap: 30px;
|
|
||||||
width: 40%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 20%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: flex-end;
|
|
||||||
align-items: center;
|
|
||||||
vertical-align: center;
|
|
||||||
gap: 30px;
|
|
||||||
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;
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode .header {
|
|
||||||
background-color: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode .header img {
|
|
||||||
filter: invert(0%);
|
|
||||||
}
|
|
||||||
|
|
||||||
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: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Mode clair */
|
|
||||||
body.light-mode {
|
|
||||||
background-color: #ffffff;
|
|
||||||
color: #000000;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.light-mode .header {
|
|
||||||
background-color: #F4F1DE;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.light-mode .header img {
|
|
||||||
filter: invert(100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
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: black;
|
|
||||||
}
|
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
<?php
|
||||||
|
global $twig;
|
||||||
|
|
||||||
|
|
||||||
|
echo $twig->render('head.html.twig', [
|
||||||
|
'title' => "Quiz",
|
||||||
|
'style' => "public/styles/styleAccueilQuiz.css",
|
||||||
|
'scripts' => array("public/script/theme-toggle.js")
|
||||||
|
]);
|
||||||
|
|
||||||
|
echo $twig->render('bandeau.html.twig');
|
||||||
|
|
||||||
|
echo $twig->render('accueilQuiz.html.twig', [
|
||||||
|
'quizs' => $quizs
|
||||||
|
]);
|
||||||
|
?>
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
<?php
|
||||||
|
global $twig;
|
||||||
|
|
||||||
|
|
||||||
|
echo $twig->render('head.html.twig', [
|
||||||
|
'title' => "Quiz",
|
||||||
|
'style' => "public/styles/styleEndQuiz.css",
|
||||||
|
'scripts' => array("public/script/theme-toggle.js")
|
||||||
|
]);
|
||||||
|
|
||||||
|
// Rendu du bandeau
|
||||||
|
echo $twig->render('bandeau.html.twig');
|
||||||
|
|
||||||
|
echo $twig->render('endQuizRandom.html.twig',
|
||||||
|
['score' => $score
|
||||||
|
]);
|
||||||
|
?>
|
||||||
@ -1,5 +1,25 @@
|
|||||||
<h1>
|
|
||||||
<?php
|
<?php
|
||||||
echo "ERREUR";
|
global $twig;
|
||||||
?>
|
|
||||||
</h1>
|
if(!isset($erreur[2])){
|
||||||
|
echo $twig->render('head.html.twig', [
|
||||||
|
'title' => "Accueil",
|
||||||
|
'style' => "public/styles/style.css",
|
||||||
|
'scripts' => array("public/script/theme-toggle.js")
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
echo $twig->render('head.html.twig', array(
|
||||||
|
'title' => "Quote",
|
||||||
|
'style' => "../public/styles/styleQuote.css",
|
||||||
|
'scripts' => array("../public/script/theme-toggle-double-param.js", "../public/script/copy.js")
|
||||||
|
));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Rendu du bandeau
|
||||||
|
echo $twig->render('bandeau.html.twig');
|
||||||
|
|
||||||
|
echo $twig->render('erreur.html.twig',[
|
||||||
|
'numero' => $erreur[0],
|
||||||
|
'context' => $erreur[1],
|
||||||
|
]);
|
||||||
|
|||||||
@ -1,16 +1,64 @@
|
|||||||
<?php
|
<?php
|
||||||
global $twig;
|
global $twig;
|
||||||
|
|
||||||
|
// Paramètres de la pagination
|
||||||
|
$perPage = 30;
|
||||||
|
$currentPage = isset($_GET['page']) ? (int)$_GET['page'] : 1;
|
||||||
|
if ($currentPage < 1) {
|
||||||
|
$currentPage = 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
$totalItems = count($favorites);
|
||||||
|
$totalPages = ceil($totalItems / $perPage);
|
||||||
|
$offset = ($currentPage - 1) * $perPage;
|
||||||
|
$favoritesPaginated = array_slice($favorites, $offset, $perPage);
|
||||||
|
|
||||||
echo $twig->render('head.html.twig', [
|
echo $twig->render('head.html.twig', [
|
||||||
'title' => "Favoris",
|
'title' => "Favoris",
|
||||||
'style' => "public/styles/styleAccueil.css",
|
'style' => "public/styles/styleAccueil.css",
|
||||||
'scripts' => array("public/script/theme-toggle.js")
|
'scripts' => array("public/script/theme-toggle.js")
|
||||||
]);
|
]);
|
||||||
|
|
||||||
echo $twig->render('bandeau.html.twig');
|
echo $twig->render('bandeau.html.twig');
|
||||||
|
|
||||||
echo $twig->render('quoteLittle.html.twig', [
|
echo $twig->render('quoteLittle.html.twig', [
|
||||||
'quotes' => $favorites,
|
'quotes' => $favoritesPaginated,
|
||||||
'titre' => "Favoris"
|
'titre' => "Favoris"
|
||||||
]);
|
]);
|
||||||
?>
|
?>
|
||||||
|
|
||||||
|
<div class="pagination-container">
|
||||||
|
<button id="prev-page" <?php if($currentPage <= 1) echo "disabled"; ?>>Page précédente</button>
|
||||||
|
<select id="page-selector">
|
||||||
|
<?php for($page = 1; $page <= $totalPages; $page++): ?>
|
||||||
|
<option value="<?php echo $page; ?>" <?php if($page == $currentPage) echo "selected"; ?>>Page <?php echo $page; ?></option>
|
||||||
|
<?php endfor; ?>
|
||||||
|
</select>
|
||||||
|
<button id="next-page" <?php if($currentPage >= $totalPages) echo "disabled"; ?>>Page suivante</button>
|
||||||
|
<div class="spinner" id="spinner"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.getElementById('page-selector').addEventListener('change', function() {
|
||||||
|
document.getElementById('spinner').style.display = 'inline-block';
|
||||||
|
window.location.href = "?page=" + this.value;
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('prev-page').addEventListener('click', function() {
|
||||||
|
var selector = document.getElementById('page-selector');
|
||||||
|
var newPage = parseInt(selector.value) - 1;
|
||||||
|
if(newPage >= 1) {
|
||||||
|
document.getElementById('spinner').style.display = 'inline-block';
|
||||||
|
window.location.href = "?page=" + newPage;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('next-page').addEventListener('click', function() {
|
||||||
|
var selector = document.getElementById('page-selector');
|
||||||
|
var newPage = parseInt(selector.value) + 1;
|
||||||
|
if(newPage <= <?php echo $totalPages; ?>) {
|
||||||
|
document.getElementById('spinner').style.display = 'inline-block';
|
||||||
|
window.location.href = "?page=" + newPage;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|||||||
@ -1,17 +1,18 @@
|
|||||||
<?php
|
<?php
|
||||||
global $twig;
|
global $twig;
|
||||||
|
|
||||||
|
|
||||||
echo $twig->render('head.html.twig', [
|
echo $twig->render('head.html.twig', [
|
||||||
'title' => "Quiz",
|
'title' => "Quiz",
|
||||||
'style' => "../public/styles/styleQuiz.css",
|
'style' => "../public/styles/styleQuiz.css",
|
||||||
'scripts' => array("../public/script/theme-toggle-double-param.js")
|
'scripts' => array("../public/script/theme-toggle-double-param.js")
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
|
||||||
// Rendu du bandeau
|
// Rendu du bandeau
|
||||||
echo $twig->render('bandeau.html.twig');
|
echo $twig->render('bandeau.html.twig');
|
||||||
|
|
||||||
echo $twig->render('quiz.html.twig', ['idQuiz'=>$id , 'question' => $question,'id'=>$idquestion]);
|
echo $twig->render('quiz.html.twig', [
|
||||||
?>
|
'question' => $question,
|
||||||
|
'id'=>$idquestion,
|
||||||
|
'nb' => $num + 1,
|
||||||
|
'nbFinal' => $nbQuestion
|
||||||
|
]);
|
||||||
|
|||||||
@ -0,0 +1,20 @@
|
|||||||
|
<?php
|
||||||
|
global $twig;
|
||||||
|
|
||||||
|
echo $twig->render('head.html.twig', [
|
||||||
|
'title' => "Random Quiz",
|
||||||
|
'style' => "public/styles/styleQuiz.css",
|
||||||
|
'scripts' => array("public/script/theme-toggle.js")
|
||||||
|
]);
|
||||||
|
|
||||||
|
// Rendu du bandeau
|
||||||
|
echo $twig->render('bandeau.html.twig');
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
echo $twig->render('quizRandom.html.twig', [
|
||||||
|
'vie' => $vie,
|
||||||
|
'question' => $question,
|
||||||
|
'nb' => $no_question + 1
|
||||||
|
]);
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
global $twig;
|
||||||
|
|
||||||
|
echo $twig->render('head.html.twig', array(
|
||||||
|
'title' => "Recap Quote",
|
||||||
|
'style' => "public/styles/styleSubmitQuote.css",
|
||||||
|
'scripts' => array("public/script/theme-toggle.js")
|
||||||
|
));
|
||||||
|
echo $twig->render('bandeau.html.twig');
|
||||||
|
echo $twig -> render("recapSubmitQuote.html.twig", [
|
||||||
|
'content' => $recap["content"],
|
||||||
|
'character' => $recap["character"],
|
||||||
|
'source' => $recap["src"]
|
||||||
|
]);
|
||||||
|
?>
|
||||||
@ -0,0 +1,26 @@
|
|||||||
|
<h2>Liste des Quiz</h2>
|
||||||
|
<div class="quiz-container">
|
||||||
|
|
||||||
|
<div class="quizCard">
|
||||||
|
<a href="{{ racine }}/randomQuiz" class="linkQuiz">
|
||||||
|
<img src="{{ racine }}/images/quizz.svg" alt="Image du quiz random">
|
||||||
|
<h3>Quiz random </h3>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% for quiz in quizs %}
|
||||||
|
<div class="quizCard">
|
||||||
|
<a href="{{ racine }}/quiz/{{ quiz.id_quiz }}" class="linkQuiz">
|
||||||
|
<img src="{{ quiz.imgPath }}" alt="Image du quiz {{ quiz.title }}">
|
||||||
|
<h3>{{ quiz.title }} ({{ quiz.nb_quest }} questions)</h3>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{% else %}
|
||||||
|
<h3>Aucun quiz disponible pour le moment.</h3>
|
||||||
|
{% endfor %}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,10 +1,13 @@
|
|||||||
<h1>Résultat</h1>
|
<h1>Résultat</h1>
|
||||||
<div class="resultat">
|
<div class="resultat">
|
||||||
<p> nombre de réponse juste : {{ score }}</p>
|
<p> nombre de réponse juste : {{ score }}</p>
|
||||||
<p> nombre de réponse fausse : {{ 10 - score }}</p>
|
<p> nombre de réponse fausse : {{ nb - score }}</p>
|
||||||
<a class="suiv" href="{{racine}}/quiz/{{ nextquiz }}" alt="quiz suivant">
|
<p> pourcentage de réusite : {{ (100 * score) / nb }}%<p>
|
||||||
|
|
||||||
|
<a class="suiv" href="{{racine}}/accueilQuiz" alt="Retour selection quiz">
|
||||||
<img src="../images/suivant.png" />
|
<img src="../images/suivant.png" />
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -0,0 +1,12 @@
|
|||||||
|
<h1>Résultat</h1>
|
||||||
|
<div class="resultat">
|
||||||
|
|
||||||
|
<p> nombre de réponse juste : {{ score }}</p>
|
||||||
|
|
||||||
|
<a class="suiv" href="{{racine}}/accueilQuiz" alt="Retour selection quiz">
|
||||||
|
<img src="images/suivant.png" />
|
||||||
|
</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
<h1 class='error'>Erreur</h1>
|
||||||
|
<p class="explanation">Erreur {{numero}} : {{context}}</p>
|
||||||
|
<body>
|
||||||
|
<html>
|
||||||
@ -1,9 +0,0 @@
|
|||||||
<div class="citation-container suggestion">
|
|
||||||
<img src="{{ imagePath }}" alt="{{ movie }}" class="citation-image">
|
|
||||||
<div class="text-content">
|
|
||||||
<p class="quote">"{{ quote }}"</p>
|
|
||||||
<p class="movie">- {{ movie }}</p>
|
|
||||||
<p class="character">Personnage : {{ character }}</p>
|
|
||||||
<p class="year">Année : {{ year }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@ -1,25 +1,25 @@
|
|||||||
<h1>Quiz</h1>
|
<h1>Quiz</h1>
|
||||||
<div class="quiz">
|
<div class="quiz">
|
||||||
<h2> {{ question.question }} </h2>
|
<h2> {{ question.question }} </h2>
|
||||||
{#<a id="timer"> 10 seconds left .. </a>#}
|
|
||||||
|
|
||||||
<form id="quizForm" method="POST" >
|
<form id="quizForm" method="POST" >
|
||||||
<div class="answers">
|
<div class="answers">
|
||||||
<button class="answer" name="answera" value="A-{{ id }}">
|
<button class="answer" name="answera" value="{{ question.answera }}-{{ id }}">
|
||||||
{{ question.answera }}
|
{{ question.answera }}
|
||||||
</button>
|
</button>
|
||||||
<button class="answer" name="answerb" value="B-{{ id }}">
|
<button class="answer" name="answerb" value="{{ question.answerb }}-{{ id }}">
|
||||||
{{ question.answerb }}
|
{{ question.answerb }}
|
||||||
</button>
|
</button>
|
||||||
<button class="answer" name="answerc" value="C-{{ id }}">
|
<button class="answer" name="answerc" value="{{ question.answerc }}-{{ id }}">
|
||||||
{{ question.answerc }}
|
{{ question.answerc }}
|
||||||
</button>
|
</button>
|
||||||
<button class="answer" name="answerd" value="D-{{ id }}">
|
<button class="answer" name="answerd" value="{{ question.answerd }}-{{ id }}">
|
||||||
{{ question.answerd }}
|
{{ question.answerd }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<input type="hidden" name="action" value="canswer">
|
<input type="hidden" name="action" value="canswer">
|
||||||
</form>
|
</form>
|
||||||
|
<a id="timer">{{ nb }}/{{ nbFinal }}</a>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -0,0 +1,27 @@
|
|||||||
|
<h1>Quiz Random</h1>
|
||||||
|
<div class="quiz">
|
||||||
|
<h2> {{ question.question }} </h2>
|
||||||
|
|
||||||
|
<h3>Vie restante : {{ vie }}</h3>
|
||||||
|
|
||||||
|
<form id="quizForm" method="POST" >
|
||||||
|
<div class="answers">
|
||||||
|
<button class="answer" name="answera" value="{{ question.answera }}">
|
||||||
|
{{ question.answera }}
|
||||||
|
</button>
|
||||||
|
<button class="answer" name="answerb" value="{{ question.answerb }}">
|
||||||
|
{{ question.answerb }}
|
||||||
|
</button>
|
||||||
|
<button class="answer" name="answerc" value="{{ question.answerc }}">
|
||||||
|
{{ question.answerc }}
|
||||||
|
</button>
|
||||||
|
<button class="answer" name="answerd" value="{{ question.answerd }}">
|
||||||
|
{{ question.answerd }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<input type="hidden" name="canswer" value="{{ question.canswer }}">
|
||||||
|
</form>
|
||||||
|
<a id="timer">{{ nb }}/∞</a>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in new issue