diff --git a/assets/app.js b/assets/app.js
index b82a059..ca19e89 100644
--- a/assets/app.js
+++ b/assets/app.js
@@ -1,6 +1,7 @@
import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import './stimulus_bootstrap.js';
+import './js/header.js';
/*
* Welcome to your app's main JavaScript file!
*
@@ -9,4 +10,3 @@ import './stimulus_bootstrap.js';
*/
import './styles/app.css';
-console.log('This log comes from assets/app.js - welcome to AssetMapper! π');
diff --git a/assets/controllers/copy_link_controller.js b/assets/controllers/copy_link_controller.js
new file mode 100644
index 0000000..9257763
--- /dev/null
+++ b/assets/controllers/copy_link_controller.js
@@ -0,0 +1,26 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+ static targets = ['link'];
+
+ copy(event) {
+ event.preventDefault();
+ const text = this.linkTarget.getAttribute('data-copy-text') || this.linkTarget.textContent;
+
+ navigator.clipboard.writeText(text).then(() => {
+ // Feedback visuel : changement temporaire du texte/couleur
+ const originalText = this.linkTarget.textContent;
+ this.linkTarget.textContent = 'β CopiΓ© !';
+ this.linkTarget.classList.add('copied');
+
+ // Restaurer après 2 secondes
+ setTimeout(() => {
+ this.linkTarget.textContent = originalText;
+ this.linkTarget.classList.remove('copied');
+ }, 2000);
+ }).catch(err => {
+ console.error('Erreur lors de la copie:', err);
+ });
+ }
+}
+
diff --git a/assets/controllers/login_dropdown_controller.js b/assets/controllers/login_dropdown_controller.js
new file mode 100644
index 0000000..ee93fc0
--- /dev/null
+++ b/assets/controllers/login_dropdown_controller.js
@@ -0,0 +1,57 @@
+import { Controller } from '@hotwired/stimulus';
+
+/**
+ * ContrΓ΄leur Stimulus pour le dropdown de connexion
+ * Attache les événements de manière robuste et compatible avec Turbo
+ */
+export default class extends Controller {
+ static targets = ['wrapper', 'toggle', 'dropdown'];
+
+ connect() {
+ this.setupListeners();
+
+ // Ouvrir le dropdown s'il y a une erreur de connexion
+ const loginError = this.element.querySelector('.login-error');
+ if (loginError && this.dropdownTarget) {
+ this.open();
+ }
+ }
+
+ setupListeners() {
+ // Clic sur le bouton toggle
+ this.toggleTarget.addEventListener('click', (e) => {
+ e.stopPropagation();
+ this.toggle();
+ });
+
+ // Clic en dehors du dropdown
+ document.addEventListener('click', (e) => {
+ if (!this.wrapperTarget.contains(e.target)) {
+ this.close();
+ }
+ });
+
+ // Touche Echap
+ document.addEventListener('keydown', (e) => {
+ if (e.key === 'Escape') {
+ this.close();
+ }
+ });
+ }
+
+ toggle() {
+ const isOpen = this.dropdownTarget.classList.contains('open');
+ isOpen ? this.close() : this.open();
+ }
+
+ open() {
+ this.dropdownTarget.classList.add('open');
+ this.toggleTarget.setAttribute('aria-expanded', 'true');
+ }
+
+ close() {
+ this.dropdownTarget.classList.remove('open');
+ this.toggleTarget.setAttribute('aria-expanded', 'false');
+ }
+}
+
diff --git a/assets/controllers/theme_toggle_controller.js b/assets/controllers/theme_toggle_controller.js
new file mode 100644
index 0000000..cbca2ea
--- /dev/null
+++ b/assets/controllers/theme_toggle_controller.js
@@ -0,0 +1,44 @@
+import { Controller } from '@hotwired/stimulus';
+
+/**
+ * Contrôleur Stimulus pour le toggle du thème
+ * Compatible avec Turbo et les rechargements traditionnel
+ */
+export default class extends Controller {
+ static targets = ['button'];
+
+ connect() {
+ this.applyBackground();
+ this.setupListener();
+ }
+
+ setupListener() {
+ this.buttonTarget.addEventListener('click', (e) => {
+ e.preventDefault();
+ this.toggle();
+ });
+ }
+
+ toggle() {
+ const current = document.documentElement.getAttribute('data-theme');
+ const next = current === 'dark' ? 'light' : 'dark';
+
+ document.documentElement.setAttribute('data-theme', next);
+ localStorage.setItem('mc-theme', next);
+
+ this.applyBackground();
+ }
+
+ applyBackground() {
+ const body = document.getElementById('page-body');
+ if (!body) return;
+
+ const theme = document.documentElement.getAttribute('data-theme');
+ const bg = theme === 'dark' ? body.dataset.bgDark : body.dataset.bgLight;
+
+ if (bg) {
+ body.style.backgroundImage = `url('${bg}')`;
+ }
+ }
+}
+
diff --git a/assets/images/bg-dark.png b/assets/images/bg-dark.png
old mode 100755
new mode 100644
index a8f6023..03f3974
Binary files a/assets/images/bg-dark.png and b/assets/images/bg-dark.png differ
diff --git a/assets/images/bg-light.png b/assets/images/bg-light.png
index accc1dc..5f0013d 100644
Binary files a/assets/images/bg-light.png and b/assets/images/bg-light.png differ
diff --git a/assets/js/header.js b/assets/js/header.js
index 41749a3..8cea75c 100644
--- a/assets/js/header.js
+++ b/assets/js/header.js
@@ -1,53 +1,27 @@
/**
- * public/js/header.js
- * Comportements interactifs du header :
- * - Bascule thème clair / sombre
- * - Ouverture / fermeture du dropdown de connexion
+ * assets/js/header.js
+ * ES Module β gestion simple du thΓ¨me
+ * Les contrôleurs Stimulus gèrent les interactions interactives
*/
-document.addEventListener('DOMContentLoaded', function () {
+// Fonction pour appliquer le fond d'Γ©cran
+function applyBackground() {
+ const body = document.getElementById('page-body');
+ if (!body) return;
- // ββ THΓME βββββββββββββββββββββββββββββββββββββββββββββββββββ
- const themeToggle = document.getElementById('themeToggle');
+ const theme = document.documentElement.getAttribute('data-theme') || 'light';
+ const bg = theme === 'dark' ? body.dataset.bgDark : body.dataset.bgLight;
- themeToggle.addEventListener('click', function () {
- const current = document.documentElement.getAttribute('data-theme');
- const next = current === 'dark' ? 'light' : 'dark';
-
- document.documentElement.setAttribute('data-theme', next);
- localStorage.setItem('mc-theme', next);
- });
-
- // ββ DROPDOWN CONNEXION ββββββββββββββββββββββββββββββββββββββ
- const loginWrapper = document.getElementById('loginWrapper');
- const loginToggle = document.getElementById('loginToggle');
- const loginDropdown = document.getElementById('loginDropdown');
-
- /** Ouvre ou ferme le dropdown */
- function toggleDropdown(force) {
- const willOpen = force !== undefined ? force : !loginDropdown.classList.contains('open');
- loginDropdown.classList.toggle('open', willOpen);
- loginToggle.setAttribute('aria-expanded', String(willOpen));
+ if (bg) {
+ body.style.backgroundImage = `url('${bg}')`;
}
+}
- // Clic sur le bouton
- loginToggle.addEventListener('click', function (e) {
- e.stopPropagation();
- toggleDropdown();
- });
-
- // Clic en dehors β fermeture
- document.addEventListener('click', function (e) {
- if (!loginWrapper.contains(e.target)) {
- toggleDropdown(false);
- }
- });
-
- // Touche Γchap β fermeture
- document.addEventListener('keydown', function (e) {
- if (e.key === 'Escape') {
- toggleDropdown(false);
- }
- });
+// Appliquer le fond au chargement
+applyBackground();
+// Réappliquer après navigation Turbo
+document.addEventListener('turbo:load', () => {
+ applyBackground();
});
+
diff --git a/assets/styles/app.css b/assets/styles/app.css
index 8b13789..de805c5 100644
--- a/assets/styles/app.css
+++ b/assets/styles/app.css
@@ -1 +1,117 @@
+/* ================================================================
+ assets/styles/app.css
+ Variables CSS globales β Accessibles partout sur le site
+ ================================================================ */
+/* ββ VARIABLES GLOBALES ββββββββββββββββββββββββββββββββββββββββββ */
+:root {
+ /* Couleurs principales */
+ --violet: #7C3AED;
+ --violet-light: #A78BFA;
+ --violet-glow: rgba(124, 58, 237, 0.18);
+
+ /* Backgrounds de navigation */
+ --nav-bg-light: rgba(255, 255, 255, 0.5);
+ --nav-bg-dark: rgba(12, 10, 18, 0.4);
+
+ /* Couleurs de texte */
+ --text-light: #1a1625;
+ --text-dark: #ede9f6;
+ --muted-light: #6b7280;
+ --muted-dark: #9ca3af;
+
+ /* Couleurs de bordure */
+ --border-light: rgba(0, 0, 0, 0.08);
+ --border-dark: rgba(255, 255, 255, 0.08);
+
+ /* Backgrounds des Γ©lΓ©ments pilule */
+ --pill-bg-light: rgba(124, 58, 237, 0.08);
+ --pill-bg-dark: rgba(124, 58, 237, 0.20);
+
+ /* Effets de blur */
+ --blur-sm: 8px;
+ --blur-md: 20px;
+
+ /* DurΓ©es de transition */
+ --duration-fast: 0.15s; /* Transforms rapides */
+ --duration-normal: 0.2s; /* Animations standard */
+ --duration-medium: 0.25s; /* Animations moyennes */
+ --duration-slow: 0.4s; /* Changements de thème */
+}
+
+/* ββ RESET MINIMAL βββββββββββββββββββββββββββββββββββββββββββββββ */
+*, *::before, *::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+/* ββ STYLES GLOBAUX ββββββββββββββββββββββββββββββββββββββββββββββ */
+html, body {
+ min-height: 100vh;
+ font-family: 'DM Sans', sans-serif;
+ transition: background var(--duration-slow) ease;
+}
+
+body {
+ background-image: url('../images/bg-light.png');
+ background-size: cover;
+ background-position: center;
+ background-attachment: fixed;
+ padding-top: 72px;
+}
+
+[data-theme="dark"] body {
+ background-image: url('../images/bg-dark.png');
+}
+
+
+
+/* ββ STYLES POUR LE LIEN COPIABLE ββββββββββββββββββββββββββββββββ */
+.copy-link {
+ cursor: pointer;
+ font-weight: 500;
+ color: var(--violet);
+ padding: 0.25rem 0.5rem;
+ border-radius: 6px;
+ transition: background var(--duration-fast), color var(--duration-fast);
+ position: relative;
+}
+
+[data-theme="dark"] .copy-link {
+ color: var(--violet-light);
+}
+
+.copy-link:hover {
+ background: var(--pill-bg-light);
+ text-decoration: underline;
+}
+
+[data-theme="dark"] .copy-link:hover {
+ background: var(--pill-bg-dark);
+}
+
+.copy-link.copied {
+ color: #10b981;
+ animation: pulse-copied var(--duration-normal);
+}
+
+@keyframes pulse-copied {
+ 0% { transform: scale(1); }
+ 50% { transform: scale(1.05); }
+ 100% { transform: scale(1); }
+}
+
+/* ββ STYLES POUR LE LIEN ββββββββββββββββββββββββββββββββ */
+
+a {
+ color: var(--violet);
+ text-decoration: none;
+ transition: color var(--duration-fast);
+}
+[data-theme="dark"] a {
+ color: var(--violet-light);
+}
+a:hover{
+ text-decoration: underline;
+}
diff --git a/assets/styles/globals/bulles.css b/assets/styles/globals/bulles.css
new file mode 100644
index 0000000..9d6d3e2
--- /dev/null
+++ b/assets/styles/globals/bulles.css
@@ -0,0 +1,50 @@
+.bulle-container {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 1rem;
+ padding: 1rem;
+ place-items: center;
+ height: 100%;
+}
+
+.bulle{
+ /*style graphique*/
+ background: var(--nav-bg-light);
+ backdrop-filter: blur(var(--blur-sm));
+ -webkit-backdrop-filter: blur(var(--blur-sm));
+ border: 1px solid var(--border-light);
+ border-radius: 14px;
+ padding: 1.25rem;
+ transition: background var(--duration-slow), border-color var(--duration-slow), color var(--duration-slow), box-shadow var(--duration-slow);
+ margin: 1.25rem;
+}
+
+[data-theme="dark"] .bulle {
+ background: var(--nav-bg-dark);
+ border-color: var(--border-dark);
+ box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
+ color: var(--text-dark);
+}
+
+.bulle:hover{
+ box-shadow: 0 16px 40px rgba(124, 58, 237, 0.20);
+}
+
+.bulle-container>.bulle {
+ /**/
+ height: 100%;
+ width: 100%;
+ margin: 0;
+}
+
+.bulle-container>.bulle.bulle-all-col {
+ grid-column: 1 / -1;
+}
+
+.bulle-container>.bulle.bulle-2-col {
+ grid-column: span 2;
+}
+
+.bulle-container>.bulle.bulle-2-row {
+ grid-row: span 2;
+}
diff --git a/assets/styles/header.css b/assets/styles/partials/header.css
similarity index 57%
rename from assets/styles/header.css
rename to assets/styles/partials/header.css
index c51030f..a2d9249 100644
--- a/assets/styles/header.css
+++ b/assets/styles/partials/header.css
@@ -3,70 +3,37 @@
Styles du header β thΓ¨me clair & sombre
================================================================ */
-/* ββ RESET MINIMAL βββββββββββββββββββββββββββββββββββββββββββββββ */
-*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-
-/* ββ VARIABLES βββββββββββββββββββββββββββββββββββββββββββββββββββ */
-:root {
- --violet: #7C3AED;
- --violet-light: #A78BFA;
- --violet-glow: rgba(124, 58, 237, 0.18);
-
- --nav-bg-light: rgba(255, 255, 255, 0.78);
- --nav-bg-dark: rgba(12, 10, 18, 0.82);
-
- --text-light: #1a1625;
- --text-dark: #ede9f6;
- --muted-light: #6b7280;
- --muted-dark: #9ca3af;
-
- --border-light: rgba(0, 0, 0, 0.08);
- --border-dark: rgba(255, 255, 255, 0.08);
-
- --pill-bg-light: rgba(124, 58, 237, 0.08);
- --pill-bg-dark: rgba(124, 58, 237, 0.20);
-}
-
-/* ββ BODY / BACKGROUND βββββββββββββββββββββββββββββββββββββββββββ */
-html, body {
- min-height: 100vh;
- font-family: 'DM Sans', sans-serif;
- transition: background 0.4s ease;
-}
-body {
- background-image: url('../images/bg-light.png'); /* assets/images/bg-light.png */
- background-size: cover;
- background-position: center;
- background-attachment: fixed;
- padding-top: 64px; /* compense le header fixe */
-}
-[data-theme="dark"] body {
- background-image: url('../images/bg-dark.png'); /* assets/images/bg-dark.png */
-}
-
/* ββ HEADER ββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
- height: 64px;
- padding: 0 2rem;
- display: flex;
- align-items: center;
- justify-content: space-between;
+ height: 72px;
+ padding: 0 2rem !important;
+ display: flex !important;
+ align-items: center !important;
+ justify-content: space-between !important;
gap: 1.5rem;
background: var(--nav-bg-light);
- backdrop-filter: blur(20px) saturate(1.4);
- -webkit-backdrop-filter: blur(20px) saturate(1.4);
+ backdrop-filter: blur(var(--blur-sm)) saturate(1.4);
+ -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(1.4);
border-bottom: 1px solid var(--border-light);
- transition: background 0.4s ease, border-color 0.4s ease;
+ transition: background var(--duration-slow) ease, border-color var(--duration-slow) ease;
}
[data-theme="dark"] header {
background: var(--nav-bg-dark);
border-bottom-color: var(--border-dark);
}
+/* ββ GROUPE GAUCHE : logo + nav ββββββββββββββββββββββββββββββββββ */
+.header-left {
+ display: flex !important;
+ align-items: center !important;
+ gap: 1.25rem;
+ flex-shrink: 0;
+}
+
/* ββ LOGO ββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.logo {
display: flex;
@@ -76,14 +43,14 @@ header {
flex-shrink: 0;
}
.logo-mark {
- width: 30px;
- height: 30px;
+ width: 32px;
+ height: 32px;
background: var(--violet);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
- transition: transform 0.25s ease, box-shadow 0.25s ease;
+ transition: transform var(--duration-medium) ease, box-shadow var(--duration-medium) ease;
}
.logo:hover .logo-mark {
transform: rotate(-6deg) scale(1.08);
@@ -94,100 +61,99 @@ header {
font-size: 1.05rem;
letter-spacing: -0.02em;
color: var(--text-light);
- transition: color 0.4s ease;
+ transition: color var(--duration-slow) ease;
}
[data-theme="dark"] .logo-name { color: var(--text-dark); }
/* ββ NAVIGATION ββββββββββββββββββββββββββββββββββββββββββββββββββ */
-nav {
- display: flex;
- align-items: center;
- gap: 0.5rem;
- flex: 1;
- justify-content: center;
+header nav {
+ display: flex !important;
+ align-items: center !important;
+ gap: 0.4rem !important;
+ flex-wrap: nowrap;
}
-.nav-link {
- position: relative;
- padding: 0.6rem 1.5rem;
- border-radius: 10px;
- font-family: 'Syne', sans-serif;
- font-weight: 600;
- font-size: 0.9rem;
- letter-spacing: 0.04em;
- text-transform: uppercase;
- color: var(--muted-light);
- text-decoration: none;
- white-space: nowrap;
- transition: color 0.2s ease, background 0.2s ease, transform 0.15s ease;
-}
-[data-theme="dark"] .nav-link { color: var(--muted-dark); }
+/* ββ LIENS DE NAVIGATION β style calquΓ© sur .login-btn βββββββββββ */
+/*
+ "all: unset" neutralise Bootstrap 5 entièrement sur .nav-link,
+ puis on rΓ©applique exactement ce qu'on veut.
+ Les !important sur padding/border/background garantissent
+ qu'aucune règle Bootstrap résiduelle ne peut l'écraser.
+*/
+header nav .nav-link {
+ all: unset;
-.nav-link::after {
- content: '';
- position: absolute;
- bottom: 4px;
- left: 50%;
- transform: translateX(-50%) scaleX(0);
- width: 16px;
- height: 2px;
- border-radius: 2px;
- background: var(--violet);
- transition: transform 0.25s ease;
-}
-
-.nav-link:hover {
- color: var(--text-light);
- background: rgba(0, 0, 0, 0.05);
- transform: translateY(-1px);
-}
-[data-theme="dark"] .nav-link:hover {
- color: var(--text-dark);
- background: rgba(255, 255, 255, 0.07);
-}
-.nav-link:hover::after {
- transform: translateX(-50%) scaleX(1);
-}
-
-/* Onglet actif */
-.nav-link.active {
- color: var(--violet);
- background: var(--pill-bg-light);
- font-weight: 700;
-}
-[data-theme="dark"] .nav-link.active {
- color: var(--violet-light);
- background: var(--pill-bg-dark);
-}
-.nav-link.active::after {
- transform: translateX(-50%) scaleX(1);
-}
-[data-theme="dark"] .nav-link.active::after {
- background: var(--violet-light);
-}
-
-/* ActualitΓ© */
-.nav-link:has(.badge-dot) {
- display: flex;
- align-items: center;
+ display: inline-flex !important;
+ align-items: center !important;
gap: 0.45rem;
-}
-.badge-dot {
- width: 6px;
- height: 6px;
- border-radius: 50%;
- background: var(--violet);
- flex-shrink: 0;
- animation: pulse-dot 2.5s ease-in-out infinite;
-}
-[data-theme="dark"] .badge-dot { background: var(--violet-light); }
+ white-space: nowrap;
+ cursor: pointer;
+ text-decoration: none !important;
-@keyframes pulse-dot {
- 0%, 100% { opacity: 1; transform: scale(1); }
- 50% { opacity: 0.5; transform: scale(0.7); }
+ /* Dimensions β identiques au .login-btn */
+ padding: 0.55rem 1.1rem !important;
+ border-radius: 10px !important;
+ border: 1px solid var(--border-light) !important;
+ background: transparent !important;
+
+ /* Typographie */
+ font-family: 'Syne', sans-serif !important;
+ font-weight: 600 !important;
+ font-size: 0.875rem !important;
+ letter-spacing: 0.03em !important;
+ text-transform: uppercase !important;
+ color: var(--muted-light) !important;
+
+ transition:
+ color var(--duration-normal) ease,
+ background var(--duration-normal) ease,
+ border-color var(--duration-normal) ease,
+ box-shadow var(--duration-normal) ease,
+ transform var(--duration-fast) ease !important;
}
-/* ββ ACTIONS βββββββββββββββββββββββββββββββββββββββββββββββββββββ */
+[data-theme="dark"] header nav .nav-link {
+ border-color: var(--border-dark) !important;
+ color: var(--muted-dark) !important;
+}
+
+/* Hover */
+header nav .nav-link:hover {
+ color: var(--violet) !important;
+ background: rgba(0, 0, 0, 0.05) !important;
+ border-color: rgba(0, 0, 0, 0.15) !important;
+ transform: translateY(-1px) !important;
+ box-shadow: none !important;
+}
+[data-theme="dark"] header nav .nav-link:hover {
+ color: var(--violet-light) !important;
+ background: rgba(255, 255, 255, 0.07) !important;
+ border-color: rgba(255, 255, 255, 0.15) !important;
+}
+
+/* Actif β fond violet lΓ©ger + bordure violet */
+header nav .nav-link.active {
+ color: var(--violet) !important;
+ background: var(--pill-bg-light) !important;
+ border-color: rgba(124, 58, 237, 0.30) !important;
+ font-weight: 700 !important;
+}
+[data-theme="dark"] header nav .nav-link.active {
+ color: var(--violet-light) !important;
+ background: var(--pill-bg-dark) !important;
+ border-color: rgba(167, 139, 250, 0.30) !important;
+}
+
+/* Actif + hover β glow subtil */
+header nav .nav-link.active:hover {
+ box-shadow: 0 4px 16px rgba(124, 58, 237, 0.20) !important;
+}
+
+/* Pas de pseudo-Γ©lΓ©ment soulignement */
+header nav .nav-link::before,
+header nav .nav-link::after { display: none !important; }
+
+/* ββ ACTIONS (droite) ββββββββββββββββββββββββββββββββββββββββββββ */
.header-actions {
display: flex;
align-items: center;
@@ -197,8 +163,8 @@ nav {
/* ββ BOUTON THΓME ββββββββββββββββββββββββββββββββββββββββββββββββ */
.theme-btn {
- width: 36px;
- height: 36px;
+ width: 40px;
+ height: 40px;
border-radius: 10px;
border: 1px solid var(--border-light);
background: transparent;
@@ -207,7 +173,7 @@ nav {
align-items: center;
justify-content: center;
color: var(--muted-light);
- transition: color 0.25s, background 0.25s, border-color 0.25s, transform 0.3s;
+ transition: color var(--duration-medium) ease, background var(--duration-medium) ease, border-color var(--duration-medium) ease, transform var(--duration-slow) ease;
}
[data-theme="dark"] .theme-btn {
border-color: var(--border-dark);
@@ -223,7 +189,6 @@ nav {
color: var(--violet-light);
}
-/* IcΓ΄nes soleil / lune */
.icon-sun { display: block; }
.icon-moon { display: none; }
[data-theme="dark"] .icon-sun { display: none; }
@@ -234,7 +199,7 @@ nav {
display: flex;
align-items: center;
gap: 0.45rem;
- padding: 0.4rem 1.1rem;
+ padding: 0.55rem 1.1rem;
border-radius: 10px;
border: 1px solid var(--border-light);
background: transparent;
@@ -244,7 +209,7 @@ nav {
font-size: 0.875rem;
color: var(--text-light);
text-decoration: none;
- transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
+ transition: background var(--duration-normal) ease, border-color var(--duration-normal) ease, color var(--duration-normal) ease, box-shadow var(--duration-normal) ease;
}
[data-theme="dark"] .login-btn {
border-color: var(--border-dark);
@@ -258,7 +223,7 @@ nav {
}
/* ββ DROPDOWN CONNEXION ββββββββββββββββββββββββββββββββββββββββββ */
-.login-wrapper { position: relative; }
+.login-wrapper { position: relative; }
.login-dropdown {
position: absolute;
@@ -266,8 +231,8 @@ nav {
right: 0;
width: 260px;
background: var(--nav-bg-light);
- backdrop-filter: blur(20px);
- -webkit-backdrop-filter: blur(20px);
+ backdrop-filter: blur(var(--blur-md));
+ -webkit-backdrop-filter: blur(var(--blur-md));
border: 1px solid var(--border-light);
border-radius: 14px;
padding: 1.25rem;
@@ -275,7 +240,7 @@ nav {
display: none;
flex-direction: column;
gap: 0.75rem;
- animation: dropdown-in 0.2s ease;
+ animation: dropdown-in var(--duration-normal) ease;
}
[data-theme="dark"] .login-dropdown {
background: var(--nav-bg-dark);
@@ -313,7 +278,7 @@ nav {
[data-theme="dark"] .form-field label { color: var(--muted-dark); }
.form-field input {
- height: 36px;
+ height: 38px;
border-radius: 8px;
border: 1px solid var(--border-light);
background: rgba(0, 0, 0, 0.03);
@@ -322,7 +287,7 @@ nav {
font-size: 0.875rem;
color: var(--text-light);
outline: none;
- transition: border-color 0.2s, box-shadow 0.2s;
+ transition: border-color var(--duration-normal) ease, box-shadow var(--duration-normal) ease;
}
[data-theme="dark"] .form-field input {
border-color: var(--border-dark);
@@ -336,7 +301,7 @@ nav {
.submit-btn {
width: 100%;
- height: 36px;
+ height: 38px;
border-radius: 8px;
border: none;
background: var(--violet);
@@ -345,7 +310,7 @@ nav {
font-weight: 600;
font-size: 0.875rem;
cursor: pointer;
- transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
+ transition: background var(--duration-normal) ease, box-shadow var(--duration-normal) ease, transform var(--duration-fast) ease;
}
.submit-btn:hover {
background: #6d28d9;
@@ -355,6 +320,7 @@ nav {
/* ββ MOBILE ββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
@media (max-width: 640px) {
- nav { display: none; }
- header { padding: 0 1rem; }
+ header nav { display: none !important; }
+ header { padding: 0 1rem !important; }
+ .header-left { gap: 0; }
}
diff --git a/assets/styles/vitrine.css b/assets/styles/vitrine.css
new file mode 100644
index 0000000..5dacf09
--- /dev/null
+++ b/assets/styles/vitrine.css
@@ -0,0 +1,9 @@
+body{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+main {
+ width: 100%;
+ max-width: 1200px;
+}
diff --git a/src/Controller/SecurityController.php b/src/Controller/SecurityController.php
index 76bf5c4..d052e00 100644
--- a/src/Controller/SecurityController.php
+++ b/src/Controller/SecurityController.php
@@ -2,6 +2,8 @@
namespace App\Controller;
+use App\Entity\User;
+use Doctrine\ORM\EntityManagerInterface;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Attribute\Route;
@@ -10,8 +12,26 @@ use Symfony\Component\Security\Http\Authentication\AuthenticationUtils;
class SecurityController extends AbstractController
{
#[Route(path: '/login', name: 'app_login')]
- public function login(AuthenticationUtils $authenticationUtils): Response
+ public function login(AuthenticationUtils $authenticationUtils,EntityManagerInterface $em): Response
{
+ if($this->getUser()){
+ return $this->redirectToRoute('app_accueil');
+ }
+
+ // CrΓ©er un utilisateur admin par dΓ©faut s'il n'existe pas
+ $userRepository = $em->getRepository(User::class);
+ $adminUser = $userRepository->findOneBy(['pseudo' => 'admin']);
+
+ if(!$adminUser){
+ $user = new User();
+ $user->setRoles(["ROLE_ADMIN","ROLE_USER"]);
+ $user->setPseudo("admin");
+ $user->setPassword('$2y$13$CVJ/Hm29HJ3ehPrqrtMl8Oya55d/ZXwlhfL6D2TsWI238bHAqtCrS');
+ $user->setThemeSombre(false);
+ $em->persist($user);
+ $em->flush();
+ }
+
// get the login error if there is one
$error = $authenticationUtils->getLastAuthenticationError();
diff --git a/templates/base.html.twig b/templates/base.html.twig
index 169a6e9..ff96e31 100644
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@@ -1,37 +1,41 @@
-
-
-
- {% block title %}CraftWorld{% endblock %}
-
+
+
+
+ {% block title %}CraftWorld{% endblock %}
+
- {# Fonts #}
-
-
+ {# Anti-flash - DOIT Γͺtre avant tout le reste #}
+
- {# Styles globaux + header #}
-
+
+
- {% block stylesheets %}{% endblock %}
+ {# Variables CSS globales et styles de base #}
+
+ {# Styles du header #}
+
- {% block javascripts %}
- {% block importmap %}{{ importmap('app') }}{% endblock %}
- {% endblock %}
+ {% block stylesheets %}{% endblock %}
- {# Anti-flash thème sombre : exécuté avant le premier paint #}
-
-
+ {% block javascripts %}
+ {% block importmap %}{{ importmap('app') }}{% endblock %}
+ {% endblock %}
+
-
- {% include 'partials/_header.html.twig' %}
+{# id="page-body" + data-bg pour le changement de fond #}
+
- {% block body %}{% endblock %}
+{% include 'partials/_header.html.twig' %}
-
-
+{% block body %}{% endblock %}
+
+
diff --git a/templates/partials/_header.html.twig b/templates/partials/_header.html.twig
index 39ecef6..7d15d3f 100644
--- a/templates/partials/_header.html.twig
+++ b/templates/partials/_header.html.twig
@@ -7,33 +7,35 @@