add Sun & Moon & Quizz Layers SemiFunctionnals

SRC/DATA/Structure.sql

@@ -1,32 +1,8 @@
 -- phpMyAdmin SQL Dump
--- version 5.2.3-1.fc43
--- https://www.phpmyadmin.net/
---
--- Hôte : localhost
--- Généré le : lun. 04 mai 2026 à 21:24
--- Version du serveur : 10.11.16-MariaDB
--- Version de PHP : 8.4.20
-
 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
 START TRANSACTION;
 SET time_zone = "+00:00";
 
-
-/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
-/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
-/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
-/*!40101 SET NAMES utf8mb4 */;
-
---
--- Base de données : `OpenPlanetsMaps`
---
-
--- --------------------------------------------------------
-
---
--- Structure de la table `EARTH`
---
-
 CREATE TABLE `EARTH` (
   `id` int(11) NOT NULL,
   `date` date DEFAULT NULL,
@@ -40,12 +16,6 @@ CREATE TABLE `EARTH` (
   `planete_nom` varchar(20) DEFAULT 'Earth'
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
 
--- --------------------------------------------------------
-
---
--- Structure de la table `JUPITER`
---
-
 CREATE TABLE `JUPITER` (
   `id` int(11) NOT NULL,
   `date` date DEFAULT NULL,
@@ -59,12 +29,6 @@ CREATE TABLE `JUPITER` (
   `planete_nom` varchar(20) DEFAULT 'Jupiter'
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
 
--- --------------------------------------------------------
-
---
--- Structure de la table `MARS`
---
-
 CREATE TABLE `MARS` (
   `id` int(11) NOT NULL,
   `date` date DEFAULT NULL,
@@ -78,12 +42,6 @@ CREATE TABLE `MARS` (
   `planete_nom` varchar(20) DEFAULT 'Mars'
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
 
--- --------------------------------------------------------
-
---
--- Structure de la table `MERCURY`
---
-
 CREATE TABLE `MERCURY` (
   `id` int(11) NOT NULL,
   `date` date DEFAULT NULL,
@@ -97,12 +55,6 @@ CREATE TABLE `MERCURY` (
   `planete_nom` varchar(20) DEFAULT 'Mercury'
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
 
--- --------------------------------------------------------
-
---
--- Structure de la table `NEPTUNE`
---
-
 CREATE TABLE `NEPTUNE` (
   `id` int(11) NOT NULL,
   `date` date DEFAULT NULL,
@@ -116,12 +68,6 @@ CREATE TABLE `NEPTUNE` (
   `planete_nom` varchar(20) DEFAULT 'Neptune'
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
 
--- --------------------------------------------------------
-
---
--- Structure de la table `SATURN`
---
-
 CREATE TABLE `SATURN` (
   `id` int(11) NOT NULL,
   `date` date DEFAULT NULL,
@@ -135,12 +81,6 @@ CREATE TABLE `SATURN` (
   `planete_nom` varchar(20) DEFAULT 'Saturn'
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
 
--- --------------------------------------------------------
-
---
--- Structure de la table `URANUS`
---
-
 CREATE TABLE `URANUS` (
   `id` int(11) NOT NULL,
   `date` date DEFAULT NULL,
@@ -154,12 +94,6 @@ CREATE TABLE `URANUS` (
   `planete_nom` varchar(20) DEFAULT 'Uranus'
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
 
--- --------------------------------------------------------
-
---
--- Structure de la table `VENUS`
---
-
 CREATE TABLE `VENUS` (
   `id` int(11) NOT NULL,
   `date` date DEFAULT NULL,
@@ -173,111 +107,89 @@ CREATE TABLE `VENUS` (
   `planete_nom` varchar(20) DEFAULT 'Venus'
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
 
---
--- Index pour les tables déchargées
---
+CREATE TABLE `SUN` (
+  `id` int(11) NOT NULL,
+  `date` date DEFAULT NULL,
+  `explanation` text DEFAULT NULL,
+  `hdurl` varchar(255) DEFAULT NULL,
+  `media_type` varchar(50) DEFAULT NULL,
+  `service_version` varchar(10) DEFAULT NULL,
+  `title` varchar(255) DEFAULT NULL,
+  `url` varchar(255) DEFAULT NULL,
+  `copyright` varchar(255) DEFAULT NULL,
+  `planete_nom` varchar(20) DEFAULT 'Sun'
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
+
+CREATE TABLE `MOON` (
+  `id` int(11) NOT NULL,
+  `date` date DEFAULT NULL,
+  `explanation` text DEFAULT NULL,
+  `hdurl` varchar(255) DEFAULT NULL,
+  `media_type` varchar(50) DEFAULT NULL,
+  `service_version` varchar(10) DEFAULT NULL,
+  `title` varchar(255) DEFAULT NULL,
+  `url` varchar(255) DEFAULT NULL,
+  `copyright` varchar(255) DEFAULT NULL,
+  `planete_nom` varchar(20) DEFAULT 'Moon'
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
 
---
--- Index pour la table `EARTH`
---
 ALTER TABLE `EARTH`
   ADD PRIMARY KEY (`id`);
 
---
--- Index pour la table `JUPITER`
---
 ALTER TABLE `JUPITER`
   ADD PRIMARY KEY (`id`);
 
---
--- Index pour la table `MARS`
---
 ALTER TABLE `MARS`
   ADD PRIMARY KEY (`id`);
 
---
--- Index pour la table `MERCURY`
---
 ALTER TABLE `MERCURY`
   ADD PRIMARY KEY (`id`);
 
---
--- Index pour la table `NEPTUNE`
---
 ALTER TABLE `NEPTUNE`
   ADD PRIMARY KEY (`id`);
 
---
--- Index pour la table `SATURN`
---
 ALTER TABLE `SATURN`
   ADD PRIMARY KEY (`id`);
 
---
--- Index pour la table `URANUS`
---
 ALTER TABLE `URANUS`
   ADD PRIMARY KEY (`id`);
 
---
--- Index pour la table `VENUS`
---
 ALTER TABLE `VENUS`
   ADD PRIMARY KEY (`id`);
 
---
--- AUTO_INCREMENT pour les tables déchargées
---
+ALTER TABLE `SUN`
+  ADD PRIMARY KEY (`id`);
+
+ALTER TABLE `MOON`
+  ADD PRIMARY KEY (`id`);
 
---
--- AUTO_INCREMENT pour la table `EARTH`
---
 ALTER TABLE `EARTH`
   MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
 
---
--- AUTO_INCREMENT pour la table `JUPITER`
---
 ALTER TABLE `JUPITER`
   MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
 
---
--- AUTO_INCREMENT pour la table `MARS`
---
 ALTER TABLE `MARS`
   MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
 
---
--- AUTO_INCREMENT pour la table `MERCURY`
---
 ALTER TABLE `MERCURY`
   MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
 
---
--- AUTO_INCREMENT pour la table `NEPTUNE`
---
 ALTER TABLE `NEPTUNE`
   MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
 
---
--- AUTO_INCREMENT pour la table `SATURN`
---
 ALTER TABLE `SATURN`
   MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
 
---
--- AUTO_INCREMENT pour la table `URANUS`
---
 ALTER TABLE `URANUS`
   MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
 
---
--- AUTO_INCREMENT pour la table `VENUS`
---
 ALTER TABLE `VENUS`
   MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
+
+ALTER TABLE `SUN`
+  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
+
+ALTER TABLE `MOON`
+  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
 COMMIT;
-
-/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
-/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
-/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

SRC/admin.php

@@ -43,7 +43,7 @@ if (isset($_SESSION['admin_logged_in']) && $_SESSION['admin_logged_in'] === true
         
         if (array_key_exists($planete, $tablesAutorisees)) {
             $nomTable = $tablesAutorisees[$planete];
-            $stmt = $pdo->prepare("INSERT INTO $nomTable (nom, date, url, description) VALUES (?, ?, ?, ?)");
+            $stmt = $pdo->prepare("INSERT INTO $nomTable (title, date, url, explanation) VALUES (?, ?, ?, ?)");
             $stmt->execute([$nom, $date, $url, $description]);
             
             $message = "<p style='color: #4ade80; text-align: center; margin-bottom: 1rem;'>Ligne ajoutée avec succès dans la table $nomTable !</p>";

SRC/api.php

@@ -23,6 +23,54 @@ try {
         'neptune' => 'NEPTUNE'
     ];
     
+    if ($planetId === 'quizz') {
+        $queries = [];
+        $seed = date('Ymd');
+        foreach ($tablesAutorisees as $key => $table) {
+            $queries[] = "(SELECT explanation, planete_nom FROM $table WHERE explanation IS NOT NULL AND explanation != '' ORDER BY RAND($seed) LIMIT 3)";
+        }
+        $unionQuery = implode(' UNION ALL ', $queries);
+        
+        $stmt = $pdo->prepare("SELECT * FROM ($unionQuery) as all_data ORDER BY RAND($seed) LIMIT 10");
+        $stmt->execute();
+        $results = $stmt->fetchAll(PDO::FETCH_ASSOC);
+        
+        $questions = [];
+        $allPlanets = ['Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter', 'Saturn', 'Uranus', 'Neptune'];
+        
+        $traductions = [
+            'Mercury' => 'Mercure', 'Venus' => 'Vénus', 'Earth' => 'Terre', 
+            'Mars' => 'Mars', 'Jupiter' => 'Jupiter', 'Saturn' => 'Saturne', 
+            'Uranus' => 'Uranus', 'Neptune' => 'Neptune'
+        ];
+        
+        foreach ($results as $row) {
+            $correctEn = $row['planete_nom'];
+            $correctFr = isset($traductions[$correctEn]) ? $traductions[$correctEn] : $correctEn;
+            
+            $optionsEn = [$correctEn];
+            $others = array_diff($allPlanets, [$correctEn]);
+            shuffle($others);
+            $optionsEn = array_merge($optionsEn, array_slice($others, 0, 3));
+            
+            $optionsFr = array_map(function($p) use ($traductions) {
+                return isset($traductions[$p]) ? $traductions[$p] : $p;
+            }, $optionsEn);
+            shuffle($optionsFr); 
+            
+            $text = substr($row['explanation'], 0, 200) . '...';
+            
+            $questions[] = [
+                'q' => "De quel astre parle cette description ? « " . $text . " »",
+                'options' => $optionsFr,
+                'a' => $correctFr
+            ];
+        }
+        
+        echo json_encode($questions);
+        exit;
+    }
+    
     if (!array_key_exists($planetId, $tablesAutorisees)) {
         echo json_encode([]);
         exit;

SRC/index.html

@@ -18,6 +18,7 @@
     <nav id="sidebar" class="sidebar">
         <ul>
             <li onclick="showLayer('home')">Accueil</li>
+            <li class="menu-category">Planètes</li>
             <li onclick="showLayer('mercure')">Mercure</li>
             <li onclick="showLayer('venus')">Vénus</li>
             <li onclick="showLayer('terre')">Terre</li>
@@ -26,6 +27,11 @@
             <li onclick="showLayer('saturne')">Saturne</li>
             <li onclick="showLayer('uranus')">Uranus</li>
             <li onclick="showLayer('neptune')">Neptune</li>
+            <li class="menu-category">Astres</li>
+            <li onclick="showLayer('soleil')">Soleil</li>    
+            <li onclick="showLayer('lune')">Lune</li>
+            <li class="menu-category">Notions</li>
+            <li onclick="showLayer('Quizz')">Quizz</li>
         </ul>
     </nav>
 
@@ -249,6 +255,73 @@
                 </table>
             </div>
         </section>
+
+        <section id="layer-soleil" class="layer">
+            <div class="search-bar"><input type="text" placeholder="Recherche multi-critères..."></div>
+            <div class="main-img">
+                <iframe title="Soleil" frameborder="0" allow="autoplay; fullscreen; xr-spatial-tracking" src="https://sketchfab.com/models/19ebc57385f543ad8856cb04c000bece/embed?autostart=1&ui_infos=0&ui_watermark=0&ui_controls=0"></iframe>
+            </div>
+            <div class="desc-box">Le Soleil est l'étoile au centre de notre système solaire. Il représente à lui seul environ 99,8 % de la masse du système solaire et fournit l'énergie nécessaire au maintien de la vie sur Terre.</div>
+            <div class="ticker-wrap">
+                <div class="ticker">Type : Naine jaune &nbsp;&bull;&nbsp; Température de surface : 5 500°C &nbsp;&bull;&nbsp; Distance à la Terre : 150 millions de km (1 UA) &nbsp;&bull;&nbsp; Âge : 4,6 milliards d'années</div>
+            </div>
+            <div class="table-container">
+                <table class="data-table">
+                    <thead>
+                        <tr>
+                            <th>Nom</th>
+                            <th>Image</th>
+                            <th>Date</th>
+                        </tr>
+                    </thead>
+                    <tbody id="tbody-soleil">
+                        <tr><td colspan="3">En attente des données...</td></tr>
+                    </tbody>
+                </table>
+            </div>
+        </section>
+
+        <section id="layer-lune" class="layer">
+            <div class="search-bar"><input type="text" placeholder="Recherche multi-critères..."></div>
+            <div class="main-img">
+                <iframe title="Lune" frameborder="0" allow="autoplay; fullscreen; xr-spatial-tracking" src="https://sketchfab.com/models/78da6bf9c10444ce9cc8aa7d969ecfb4/embed?autostart=1&ui_infos=0&ui_watermark=0&ui_controls=0"></iframe>
+            </div>
+            <div class="desc-box">La Lune est l'unique satellite naturel de la Terre. Elle est le cinquième plus grand satellite du système solaire et le seul astre non terrestre à avoir été visité par des êtres humains.</div>
+            <div class="ticker-wrap">
+                <div class="ticker">Distance à la Terre : 384 400 km &nbsp;&bull;&nbsp; Température : de -173°C à 127°C &nbsp;&bull;&nbsp; Gravité : 1,62 m/s² &nbsp;&bull;&nbsp; Durée de l'orbite : 27,3 jours</div>
+            </div>
+            <div class="table-container">
+                <table class="data-table">
+                    <thead>
+                        <tr>
+                            <th>Nom</th>
+                            <th>Image</th>
+                            <th>Date</th>
+                        </tr>
+                    </thead>
+                    <tbody id="tbody-lune">
+                        <tr><td colspan="3">En attente des données...</td></tr>
+                    </tbody>
+                </table>
+            </div>
+        </section>
+
+        <section id="layer-Quizz" class="layer">
+            <div class="desc-box">Testez vos connaissances sur le système solaire ! Répondez aux questions ci-dessous pour voir si vous êtes un véritable expert de l'espace.</div>
+            
+            <div class="daily-challenge-box">
+                <strong class="daily-challenge-title">◈ DÉFI QUOTIDIEN</strong>
+                <p class="daily-challenge-desc">Chaque jour à minuit, l'ordinateur de bord compile nos archives pour générer un nouveau Quizz unique de 10 questions. Entraînez-vous quotidiennement pour parfaire vos connaissances !</p>
+            </div>
+
+            <div id="quiz-container" class="box">
+                <h2 id="quiz-question">Chargement du Quizz...</h2>
+                <div id="quiz-options">
+                </div>
+                <p id="quiz-score"></p>
+                <button id="quiz-restart-btn" onclick="initQuiz()">Recommencer le Quizz</button>
+            </div>
+        </section>
     </main>
 
     <footer class="site-footer">

SRC/main.js

@@ -12,7 +12,9 @@ function showLayer(layerId) {
     document.body.className = '';
     document.body.classList.add('theme-' + layerId);
 
-    if (layerId !== 'home') {
+    if (layerId === 'Quizz') {
+        initQuiz();
+    } else if (layerId !== 'home') {
         fetchData(layerId);
     }
 
@@ -198,4 +200,102 @@ async function fetchData(planetId) {
         console.error("Erreur de connexion à la BDD :", error);
         tbody.innerHTML = `<tr><td colspan="3" style="color: #ff4444;">Erreur technique : ${error.message}</td></tr>`;
     }
+}
+
+let quizQuestions = [];
+let currentQuizIndex = 0;
+let quizScore = 0;
+
+async function initQuiz() {
+    currentQuizIndex = 0;
+    quizScore = 0;
+    document.getElementById('quiz-restart-btn').style.display = 'none';
+    document.getElementById('quiz-score').textContent = '';
+
+    if (quizQuestions.length === 0) {
+        document.getElementById('quiz-question').textContent = "Chargement du Quizz du jour...";
+        document.getElementById('quiz-options').innerHTML = '';
+        
+        try {
+            const response = await fetch(`api.php?planet=quizz`);
+            if (!response.ok) {
+                let errMsg = "Erreur réseau";
+                try {
+                    const errData = await response.json();
+                    if (errData.error) errMsg = errData.error;
+                } catch (e) {}
+                throw new Error(errMsg);
+            }
+            quizQuestions = await response.json();
+
+            if (quizQuestions.length === 0) {
+                document.getElementById('quiz-question').textContent = "Pas assez de données dans la base pour générer un quizz.";
+                return;
+            }
+        } catch (error) {
+            console.error("Erreur Quizz:", error);
+            document.getElementById('quiz-question').textContent = "Erreur : " + error.message;
+            return;
+        }
+    }
+
+    showQuizQuestion();
+}
+
+function showQuizQuestion() {
+    if (currentQuizIndex >= quizQuestions.length) {
+        document.getElementById('quiz-question').textContent = "Quizz du jour terminé !";
+        document.getElementById('quiz-options').innerHTML = "";
+        document.getElementById('quiz-score').textContent = `Votre score : ${quizScore} / ${quizQuestions.length}`;
+        document.getElementById('quiz-restart-btn').style.display = 'inline-block';
+        return;
+    }
+
+    const qObj = quizQuestions[currentQuizIndex];
+    document.getElementById('quiz-question').innerText = `Question ${currentQuizIndex + 1}/${quizQuestions.length} :\n\n${qObj.q}`;
+    
+    const optionsContainer = document.getElementById('quiz-options');
+    optionsContainer.innerHTML = '';
+    
+    qObj.options.forEach(opt => {
+        const btn = document.createElement('button');
+        btn.className = 'quiz-btn';
+        btn.textContent = opt;
+        btn.onclick = () => checkAnswer(opt, qObj.a, btn);
+        optionsContainer.appendChild(btn);
+    });
+}
+
+function checkAnswer(selected, correct, btn) {
+    const optionsContainer = document.getElementById('quiz-options');
+    const buttons = optionsContainer.querySelectorAll('.quiz-btn');
+    
+    buttons.forEach(b => {
+        b.disabled = true;
+        b.style.cursor = 'default';
+    });
+
+    if (selected === correct) {
+        btn.style.backgroundColor = 'rgba(74, 222, 128, 0.4)';
+        btn.style.borderColor = '#4ade80';
+        btn.style.color = '#fff';
+        quizScore++;
+    } else {
+        btn.style.backgroundColor = 'rgba(248, 113, 113, 0.4)';
+        btn.style.borderColor = '#f87171';
+        btn.style.color = '#fff';
+        
+        buttons.forEach(b => {
+            if (b.textContent === correct) {
+                b.style.backgroundColor = 'rgba(74, 222, 128, 0.4)';
+                b.style.borderColor = '#4ade80';
+                b.style.color = '#fff';
+            }
+        });
+    }
+    
+    setTimeout(() => {
+        currentQuizIndex++;
+        showQuizQuestion();
+    }, 1500);
 }

SRC/style.css

@@ -14,6 +14,52 @@
     --star-color: #ffffff;
 }
 
+.daily-challenge-box {
+    margin: 0 auto 20px;
+    max-width: 600px;
+    padding: 15px;
+    background: rgba(156, 39, 176, 0.15);
+    border-left: 4px solid #9c27b0;
+    text-align: left;
+    border-radius: 4px;
+}
+
+.daily-challenge-title {
+    color: #e8c4f2;
+    font-family: 'Orbitron', monospace;
+    font-size: 0.85rem;
+    letter-spacing: 0.1em;
+}
+
+.daily-challenge-desc {
+    margin-top: 8px;
+    font-size: 0.85rem;
+    line-height: 1.5;
+    color: var(--text-secondary);
+}
+
+#quiz-container {
+    margin: 20px auto;
+    max-width: 600px;
+    text-align: center;
+}
+
+#quiz-question {
+    margin-bottom: 20px;
+}
+
+#quiz-options {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+#quiz-score {
+    margin-top: 20px;
+    font-size: 1.2rem;
+    font-weight: bold;
+}
+
 body.theme-home    { --theme-color: #4f8eff; --theme-glow: rgba(79,142,255,0.4);  --bg-deep: #020408; --bg-mid: #060d18; }
 body.theme-mercure { --theme-color: #c0a080; --theme-glow: rgba(192,160,128,0.4); --bg-deep: #0c0906; --bg-mid: #1a1008; }
 body.theme-venus   { --theme-color: #ff9230; --theme-glow: rgba(255,146,48,0.4);  --bg-deep: #0d0600; --bg-mid: #1e0e00; }
@@ -246,6 +292,15 @@ header h1 {
     transform: translateY(-50%) translateX(0);
 }
 
+.sidebar li.menu-category {
+    color: gray;
+    font-size: 0.85em;
+    text-transform: uppercase;
+    margin-top: 15px;
+    pointer-events: none;
+    cursor: default;
+}
+
 #content-area {
     flex: 1;
     padding: 2.5rem 2.5rem;
@@ -609,4 +664,71 @@ header h1 {
 ::selection {
     background: var(--theme-glow);
     color: #ffffff;
+}
+
+body.theme-soleil {
+    background-color: #2a1100;
+}
+body.theme-soleil .ticker-wrap .ticker {
+    color: #ff9800;
+}
+body.theme-soleil .desc-box {
+    border-color: #ff9800;
+}
+
+body.theme-lune {
+    background-color: #1a1a1d;
+}
+body.theme-lune .ticker-wrap .ticker {
+    color: #e0e0e0;
+}
+body.theme-lune .desc-box {
+    border-color: #aaaaaa;
+}
+
+body.theme-Quizz {
+    background-color: #1e0033;
+}
+body.theme-Quizz .desc-box {
+    border-color: #9c27b0;
+}
+body.theme-Quizz .box {
+    background: rgba(156, 39, 176, 0.1);
+    border: 1px solid #9c27b0;
+    box-shadow: 0 0 15px rgba(156, 39, 176, 0.2);
+}
+
+.quiz-btn {
+    background-color: rgba(255, 255, 255, 0.05);
+    color: #fff;
+    border: 1px solid #9c27b0;
+    padding: 12px;
+    font-size: 1rem;
+    cursor: pointer;
+    border-radius: 5px;
+    transition: background-color 0.3s, color 0.3s, transform 0.1s;
+}
+
+.quiz-btn:hover {
+    background-color: #9c27b0;
+    color: #fff;
+    transform: scale(1.02);
+}
+
+#quiz-restart-btn {
+    display: none;
+    margin-top: 15px;
+    padding: 10px 20px;
+    cursor: pointer;
+    background-color: #7b1fa2;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    font-size: 1rem;
+    transition: background-color 0.3s, transform 0.1s;
+}
+
+#quiz-restart-btn:hover {
+    background-color: #9c27b0;
+    transform: scale(1.05);
 }