parent
c8d2a5fead
commit
d7a097ae89
@ -1,64 +0,0 @@
|
|||||||
<?php
|
|
||||||
|
|
||||||
class CitationView {
|
|
||||||
|
|
||||||
public static function display($citationDuJour, $suggestions) {
|
|
||||||
echo "<div class='citations-section'>";
|
|
||||||
|
|
||||||
// Afficher la citation du jour
|
|
||||||
if ($citationDuJour) {
|
|
||||||
$quote = htmlspecialchars(trim(substr($citationDuJour[1], 1))); // Retirer le symbole µ
|
|
||||||
$movie = htmlspecialchars(trim($citationDuJour[2]));
|
|
||||||
$character = htmlspecialchars(trim($citationDuJour[3]));
|
|
||||||
$year = htmlspecialchars(trim($citationDuJour[4]));
|
|
||||||
$imagePath = htmlspecialchars(trim($citationDuJour[5]));
|
|
||||||
|
|
||||||
echo "<h2>Citation du jour</h2>";
|
|
||||||
echo "<div class='citation-container citation-du-jour'>";
|
|
||||||
echo "<img src='$imagePath' alt='$movie' class='citation-image'>";
|
|
||||||
echo "<div class='text-content'>";
|
|
||||||
echo "<p class='quote'>\"$quote\"</p>";
|
|
||||||
echo "<p class='movie'>- $movie</p>";
|
|
||||||
echo "<p class='character'>Personnage : $character</p>";
|
|
||||||
echo "<p class='year'>Année : $year</p>";
|
|
||||||
echo "</div>";
|
|
||||||
echo "</div>";
|
|
||||||
} else {
|
|
||||||
echo "<p class='error'>Aucune citation du jour n'a été trouvée.</p>";
|
|
||||||
}
|
|
||||||
|
|
||||||
// Filtrer les suggestions pour éviter de reprendre la citation du jour
|
|
||||||
$filteredSuggestions = array_filter($suggestions, function($suggestion) use ($citationDuJour) {
|
|
||||||
// Vérifie que les deux citations ne sont pas identiques
|
|
||||||
return isset($suggestion[0]) && trim($suggestion[0]) !== trim($citationDuJour[1]);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Afficher les suggestions
|
|
||||||
if (!empty($filteredSuggestions)) {
|
|
||||||
echo "<h2>Suggestions</h2>";
|
|
||||||
echo "<div class='suggestions-container'>"; // Conteneur pour gérer les colonnes
|
|
||||||
foreach ($filteredSuggestions as $suggestion) {
|
|
||||||
// Vérifier si tous les éléments requis sont bien présents dans $suggestion
|
|
||||||
$quote = isset($suggestion[0]) ? htmlspecialchars(trim($suggestion[0])) : '';
|
|
||||||
$movie = isset($suggestion[1]) ? htmlspecialchars(trim($suggestion[1])) : '';
|
|
||||||
$character = isset($suggestion[2]) ? htmlspecialchars(trim($suggestion[2])) : 'Inconnu';
|
|
||||||
$year = isset($suggestion[3]) ? htmlspecialchars(trim($suggestion[3])) : 'Inconnue';
|
|
||||||
$imagePath = isset($suggestion[4]) ? htmlspecialchars(trim($suggestion[4])) : 'images/default.jpg';
|
|
||||||
|
|
||||||
echo "<div class='citation-container suggestion'>";
|
|
||||||
echo "<img src='$imagePath' alt='$movie' class='citation-image'>";
|
|
||||||
echo "<div class='text-content'>";
|
|
||||||
echo "<p class='quote'>\"$quote\"</p>";
|
|
||||||
echo "<p class='movie'>- $movie</p>";
|
|
||||||
echo "<p class='character'>- Personnage : $character</p>";
|
|
||||||
echo "<p class='year'>- Année : $year</p>";
|
|
||||||
echo "</div>";
|
|
||||||
echo "</div>";
|
|
||||||
}
|
|
||||||
echo "</div>"; // Fin du conteneur suggestions
|
|
||||||
}
|
|
||||||
|
|
||||||
echo "</div>"; // Fin de la section des citations
|
|
||||||
echo "</body></html>"; // Clôture la structure HTML
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,61 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="fr">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Wiki Fantasy : Quiz</title>
|
|
||||||
<link id="favicon" rel="icon" href="../images/iconeSombre.ico"> <!-- Par défaut sombre -->
|
|
||||||
<link rel="stylesheet" href="../public/styles/styleQuiz.css">
|
|
||||||
<script defer src="../public/script/theme-toggle.js"></script>
|
|
||||||
<script>
|
|
||||||
// Timer pour 5 minutes
|
|
||||||
|
|
||||||
var timeLeft = 300;
|
|
||||||
function countdown() {
|
|
||||||
var timerDisplay = document.getElementById("timer");
|
|
||||||
if (timeLeft <= 0) {
|
|
||||||
document.getElementById("quizForm").submit();
|
|
||||||
} else {
|
|
||||||
timerDisplay.innerHTML = timeLeft + " seconds left";
|
|
||||||
timeLeft -= 1;
|
|
||||||
setTimeout(countdown, 1000);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
window.onload = countdown;
|
|
||||||
</script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="header">
|
|
||||||
<div class="nav">
|
|
||||||
<a href="favorite.html"><img src="../images/coeur.svg" alt="coeur" width="67px" height="67px" onmousedown="return false"></a>
|
|
||||||
<img id="theme-icon" src="../images/light.svg" alt="toggle theme" width="72px" height="37px" onmousedown="return false" onclick="toggleTheme()">
|
|
||||||
<img src="../images/quizz.svg" alt="quizz" width="51px" height="82px" onmousedown="return false">
|
|
||||||
</div>
|
|
||||||
<div class="logo">
|
|
||||||
<a href="accueil.html"><img src="../images/WIKIFANTASY.png" alt="Logo" width="227px" height="106px" onmousedown="return false"></a>
|
|
||||||
</div>
|
|
||||||
<div class="user">
|
|
||||||
<img src="../images/user_dark.png" alt="user" width="70px" height="70px" onmousedown="return false">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1>▶ Quiz ◀</h1>
|
|
||||||
|
|
||||||
<div class="quiz">
|
|
||||||
<h2>Question 1</h2>
|
|
||||||
<p>“Tu es un sorcier Harry”</p>
|
|
||||||
|
|
||||||
<!-- Grille de réponses (2 par ligne) -->
|
|
||||||
<div class="answers">
|
|
||||||
<button class="answer">Fight Club</button>
|
|
||||||
<button class="answer">Jurassic World</button>
|
|
||||||
<button class="answer">La 7ème compagnie</button>
|
|
||||||
<button class="answer">Harry Potter à l'école des sorciers</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="submit-button">
|
|
||||||
<button class="buttonSudmite" type="submit">Confirmer</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,211 +0,0 @@
|
|||||||
|
|
||||||
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="fr">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Wiki Fantasy : Quizz</title>
|
|
||||||
<link id="favicon" rel="icon" href="../images/iconeSombre.ico"> <!-- Par défaut sombre -->
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Lemon&display=swap" rel="stylesheet">
|
|
||||||
<style>
|
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Lemon&display=swap');
|
|
||||||
|
|
||||||
/* ====== DARK MODE ====== */
|
|
||||||
body.dark-mode h1, body.dark-mode h2, body.dark-mode p {
|
|
||||||
color: white;
|
|
||||||
font-family: "Lemon", serif;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode .quizz {
|
|
||||||
background-color: black;
|
|
||||||
width: 50%;
|
|
||||||
margin: 3% auto;
|
|
||||||
padding: 2%;
|
|
||||||
border-radius: 25px;
|
|
||||||
border: 2px solid transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode .answers {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: space-around;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode .answer {
|
|
||||||
background-color: #1b0048;
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
border-radius: 25px;
|
|
||||||
width: 45%;
|
|
||||||
padding: 10px;
|
|
||||||
font-size: 18px;
|
|
||||||
text-align: center;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode .answer:hover {
|
|
||||||
background-color: #6100ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode .submit-button {
|
|
||||||
text-align: center;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode .buttonSudmite {
|
|
||||||
background: linear-gradient(90deg, #6100ff 0%, #1b0048 100%);
|
|
||||||
font-family: "Lemon", serif;
|
|
||||||
border: none;
|
|
||||||
color: white;
|
|
||||||
padding: 10px 20px;
|
|
||||||
border-radius: 25px;
|
|
||||||
font-size: 20px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ====== LIGHT MODE ====== */
|
|
||||||
body.light-mode h1, body.light-mode h2, body.light-mode p {
|
|
||||||
color: black;
|
|
||||||
font-family: "Lemon", serif;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.light-mode .quizz {
|
|
||||||
background-color: white;
|
|
||||||
width: 50%;
|
|
||||||
margin: 3% auto;
|
|
||||||
padding: 2%;
|
|
||||||
border-radius: 25px;
|
|
||||||
border: 2px solid black;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.light-mode .answers {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: space-around;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.light-mode .answer {
|
|
||||||
background-color: #fff1f1;
|
|
||||||
color: black;
|
|
||||||
border: 1px solid black;
|
|
||||||
border-radius: 25px;
|
|
||||||
width: 45%;
|
|
||||||
padding: 10px;
|
|
||||||
font-size: 18px;
|
|
||||||
text-align: center;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.light-mode .answer:hover {
|
|
||||||
background-color: #c7f6c4;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.light-mode .submit-button {
|
|
||||||
text-align: center;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.light-mode .buttonSudmite {
|
|
||||||
background: linear-gradient(180deg, rgba(187,211,249,1) 0%, rgba(199,246,196,1) 100%);
|
|
||||||
font-family: "Lemon", serif;
|
|
||||||
border: none;
|
|
||||||
color: black;
|
|
||||||
padding: 10px 20px;
|
|
||||||
border-radius: 25px;
|
|
||||||
font-size: 20px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ====== OTHER ====== */
|
|
||||||
.container {
|
|
||||||
width: 100%;
|
|
||||||
height: 100px;
|
|
||||||
background-color: transparent;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header {
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav img {
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo img {
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user img {
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="dark-mode"> <!-- Ajouter ici la classe pour le mode sombre ou clair -->
|
|
||||||
|
|
||||||
<!-- Bandeau du haut avec les images -->
|
|
||||||
<div class="container">
|
|
||||||
<div class="header">
|
|
||||||
<div class="nav">
|
|
||||||
<img src="../images/coeur.svg" alt="coeur" width="67px" height="67px" onmousedown="return false">
|
|
||||||
<img id="theme-icon" src="../images/light.svg" alt="toggle theme" width="72px" height="37px" onmousedown="return false" onclick="toggleTheme()">
|
|
||||||
<img src="../images/quizz.svg" alt="quizz" width="51px" height="82px" onmousedown="return false">
|
|
||||||
</div>
|
|
||||||
<div class="logo">
|
|
||||||
<a href="accueil.html"><img src="../images/WIKIFANTASY.png" alt="Logo" width="227px" height="106px" onmousedown="return false"></a>
|
|
||||||
</div>
|
|
||||||
<div class="user">
|
|
||||||
<img src="../images/user_dark.png" alt="user" width="70px" height="70px" onmousedown="return false">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Section du quizz -->
|
|
||||||
<h1>▶ Quizz ◀</h1>
|
|
||||||
|
|
||||||
<div class="quizz">
|
|
||||||
<h2>Question 1</h2>
|
|
||||||
<p>“Tu es un sorcier Harry”</p>
|
|
||||||
|
|
||||||
<!-- Grille de réponses (2 par ligne) -->
|
|
||||||
<div class="answers">
|
|
||||||
<button class="answer">Fight Club</button>
|
|
||||||
<button class="answer">Jurassic World</button>
|
|
||||||
<button class="answer">La 7ème compagnie</button>
|
|
||||||
<button class="answer">Harry Potter à l'école des sorciers</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="submit-button">
|
|
||||||
<button class="buttonSudmite">Confirmer</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
function toggleTheme() {
|
|
||||||
const body = document.body;
|
|
||||||
body.classList.toggle("dark-mode");
|
|
||||||
body.classList.toggle("light-mode");
|
|
||||||
|
|
||||||
const themeIcon = document.getElementById("theme-icon");
|
|
||||||
if (body.classList.contains("dark-mode")) {
|
|
||||||
themeIcon.src = "../images/light.svg";
|
|
||||||
} else {
|
|
||||||
themeIcon.src = "../images/dark.svg";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,50 +0,0 @@
|
|||||||
<div class="container">
|
|
||||||
<div class="header">
|
|
||||||
<div class="nav">
|
|
||||||
<a href="favorite.html"><img src="images/coeur.svg" alt="coeur" width="67px" height="67px" onmousedown="return false"></a>
|
|
||||||
<img id="theme-icon" src="images/light.svg" alt="toggle theme" width="72px" height="37px" onmousedown="return false" onclick="toggleTheme()">
|
|
||||||
<a href="quiz.html"><img src="images/quizz.svg" alt="quizz" width="51px" height="82px" onmousedown="return false"></a>
|
|
||||||
</div>
|
|
||||||
<div class="logo">
|
|
||||||
<a href="/~kekentin/WF/WF-Website/"><img src="images/WIKIFANTASY.png" alt="Logo" width="227px" height="106px" onmousedown="return false"></a>
|
|
||||||
</div>
|
|
||||||
<div class="user">
|
|
||||||
<img src="images/user_dark.png" alt="user" width="70px" height="70px" onmousedown="return false">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<h1>▶ S'inscrire ◀</h1>
|
|
||||||
<form action="script/signin.php" method="post">
|
|
||||||
<div class="signin">
|
|
||||||
<div class="DivId">
|
|
||||||
<p>Identifiant *</p>
|
|
||||||
<input type="text" class="champ" id="name" name="name" required/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="DivEmail">
|
|
||||||
<p>Email *</p>
|
|
||||||
<input type="email" class="champ" id="email" name="email" required/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mdp">
|
|
||||||
<p>Mot de passe *</p>
|
|
||||||
<input type="password" class="champ" id="pswd" name="pswd" required/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="confmdp">
|
|
||||||
<p>Confirmer mot de passe *</p>
|
|
||||||
<input type="password" class="champ" id="confpswd" name="confpswd" required/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="imgprof">
|
|
||||||
<p>Image *</p>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="confirmer">
|
|
||||||
<input type="submit" class="btn" value="Inscription" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Loading…
Reference in new issue