diff --git a/flask_base/static/quiz.css b/flask_base/static/quiz.css index 83df3b8..f4a668b 100644 --- a/flask_base/static/quiz.css +++ b/flask_base/static/quiz.css @@ -12,8 +12,6 @@ img.logo { background-color: #0f0f20; } - - p { color: rgb(0, 221, 255); } diff --git a/flask_base/static/style.css b/flask_base/static/style.css index a4b1b5a..581383e 100644 --- a/flask_base/static/style.css +++ b/flask_base/static/style.css @@ -384,4 +384,127 @@ button:hover { font-size: 0.9rem; color: #00ff88; opacity: 0.7; -} \ No newline at end of file +} + +/* --- QUIZ --- */ + +img.logo { + background-color: #0f0f20; +} + +p { + color: rgb(0, 221, 255); +} + +input::checkmark { + color: #000; +} + +/* Boutons quiz plus intégrés au style général */ +button.ans { + border: 2px solid #00ff88; + line-height: 2.0; + padding: 0 10px; + font-size: 1rem; + text-align: center; + color: #00ffcc; + text-shadow: 0 0 5px #00ff88; + border-radius: 10px; + background-color: rgba(0, 255, 136, 0.15); + cursor: pointer; + font-family: "Courier New", monospace; + transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; + margin: 0.5rem; + height: 3rem; + display: inline-flex; + align-items: center; + justify-content: center; +} + +button.ans:hover { + background-color: #00ff88; + color: #000; + box-shadow: 0 0 12px #00ff88; +} + +button.ans:active { + box-shadow: + inset -2px -2px 3px rgba(255, 255, 255, 0.6), + inset 2px 2px 3px rgba(0, 0, 0, 0.6); +} + +/* Conteneur quiz caché par défaut */ +.test { + background-color: #202040; + margin: 2rem auto; + width: 50%; + border-radius: 25px; + padding: 2rem; + box-shadow: 0 0 15px #00ff88; + display: none; /* caché initialement */ + color: #a0a0ff; + font-size: 1.25rem; + font-family: "Courier New", monospace; + user-select: none; + text-align: center; +} + +/* Style pour les questions et réponses */ +.ans { + margin: 1.5rem 0; + color: #a0a0ff; + font-size: 1.2rem; + line-height: 1.4; + cursor: default; +} + +/* Style pour les réponses (liste) */ +#answersList { + list-style: none; + padding: 0; + margin: 1rem 0 0 0; + display: flex; + flex-direction: column; + gap: 0.8rem; +} + +#answersList li { + background-color: rgba(0, 255, 136, 0.1); + border: 1px solid #00ff88; + border-radius: 12px; + padding: 10px 15px; + cursor: pointer; + transition: background-color 0.3s ease, color 0.3s ease; + font-size: 1.1rem; + color: #00ffcc; + user-select: none; +} + +#answersList li:hover { + background-color: #00ff88; + color: #000; +} + +/* Zone feedback cachée au départ */ +#feedback { + margin-top: 1rem; + font-weight: bold; + color: #00ff88; + display: none; +} + +/* Bouton suivant caché au départ */ +#nextBtn { + margin-top: 1.5rem; + display: none; + width: 100%; +} + +#finalScore { + display: none; + font-size: 1.6rem; + text-align: center; + margin-top: 2rem; + color: #00ffcc; + text-shadow: 0 0 6px #00ff88; +} diff --git a/flask_base/templates/PAI.html b/flask_base/templates/PAI.html index 5326875..5f207bb 100644 --- a/flask_base/templates/PAI.html +++ b/flask_base/templates/PAI.html @@ -1,16 +1,14 @@ - - - - PAI - Analyse en cours - - - - +{% include 'head.html' %} -{% include 'header.html' %} +
+ Mascotte animée +

PAI

+ {% include 'header.html' %} + +
diff --git a/flask_base/templates/head.html b/flask_base/templates/head.html new file mode 100644 index 0000000..86338f6 --- /dev/null +++ b/flask_base/templates/head.html @@ -0,0 +1,8 @@ + + + + Nuit de l'info + + + + diff --git a/flask_base/templates/header.html b/flask_base/templates/header.html index 3e9dd9e..b8e9c22 100644 --- a/flask_base/templates/header.html +++ b/flask_base/templates/header.html @@ -1,13 +1,9 @@ -
- Mascotte animée -

Logiciels Libres

- -
\ No newline at end of file + \ No newline at end of file diff --git a/flask_base/templates/index.html b/flask_base/templates/index.html index 50bc74f..8f3771c 100644 --- a/flask_base/templates/index.html +++ b/flask_base/templates/index.html @@ -1,15 +1,16 @@ - - - - Introduction aux Logiciels Libres - - - + +{% include 'head.html' %} + - {% include 'header.html' %} +
+ Mascotte animée +

Accueil

+ {% include 'header.html' %} + +

Qu’est-ce qu’un logiciel libre ?

diff --git a/flask_base/templates/outils.html b/flask_base/templates/outils.html index cc172b6..9303428 100644 --- a/flask_base/templates/outils.html +++ b/flask_base/templates/outils.html @@ -1,13 +1,14 @@ - - - - - Outils Open Source vs Propriétaires - + {% include 'head.html' %} - {% include 'header.html' %} + +
+ Mascotte animée +

Outils et OS

+ {% include 'header.html' %} + +

Outils Open Source vs Propriétaires

diff --git a/flask_base/templates/pokemon.html b/flask_base/templates/pokemon.html index 48aafd6..682eba5 100644 --- a/flask_base/templates/pokemon.html +++ b/flask_base/templates/pokemon.html @@ -1,14 +1,14 @@ - - - - Jeu Pokémon - - +{% include 'head.html' %} - {% include 'header.html' %} +
+ Mascotte animée +

Accueil

+ {% include 'header.html' %} + +

Combat Pokémon-like (simple)

diff --git a/flask_base/templates/quiz.html b/flask_base/templates/quiz.html index c7bc543..a5b3c7e 100644 --- a/flask_base/templates/quiz.html +++ b/flask_base/templates/quiz.html @@ -1,14 +1,13 @@ - - Nuit de l'info quiz - - - - + {% include 'head.html' %} - {% include 'header.html' %} - +
+ Mascotte animée +

Questions

+ {% include 'header.html' %} + +

page du quiz

{% include 'question.html' %}