From dedf5f1964ac69155d4736ae694f1d20d578d3b8 Mon Sep 17 00:00:00 2001 From: jfgiraud Date: Thu, 2 Jul 2026 10:14:49 +0000 Subject: [PATCH] menu ok graphiquement et page 404 ok --- css/404.css | 135 +++++++++++++++++++++++++++++++++++++++++++++++++ css/menu.css | 131 +++++++++++++++++++++++++++++++++++++++++++++++ css/style.css | 27 +++++++--- js/menu.js | 12 +++++ php/404.php | 34 +++++++++---- php/footer.php | 2 +- php/header.php | 7 ++- php/logout.php | 14 +++++ php/menu.php | 96 +++++++++++++++++++++++++---------- structure.txt | 103 +++++++++++++++++++++++++++++++++++-- 10 files changed, 514 insertions(+), 47 deletions(-) create mode 100644 css/404.css create mode 100644 css/menu.css create mode 100644 js/menu.js create mode 100644 php/logout.php diff --git a/css/404.css b/css/404.css new file mode 100644 index 0000000..656025e --- /dev/null +++ b/css/404.css @@ -0,0 +1,135 @@ +/* 404 page specific styles - Dark glitch / data terminal theme */ + +body.page-404 { + background: radial-gradient(circle at top, rgba(13, 117, 255, 0.12), transparent 32%), + linear-gradient(180deg, #06080f 0%, #050611 100%); + color: #e4f0ff; + font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; +} + +.error-shell { + min-height: calc(100vh - 84px); + display: flex; + align-items: center; + justify-content: center; + padding: 24px; +} + +.error-card { + width: min(900px, 100%); + padding: 48px 40px; + border-radius: 28px; + background: rgba(4, 8, 16, 0.94); + border: 1px solid rgba(88, 152, 255, 0.18); + box-shadow: 0 26px 80px rgba(0, 0, 0, 0.45); + overflow: hidden; + position: relative; +} + +.error-card::before, +.error-card::after { + content: ''; + position: absolute; + inset: 0; + pointer-events: none; +} + +.error-card::before { + background: linear-gradient(90deg, rgba(255, 255, 255, 0.04), transparent 40%, rgba(255, 255, 255, 0.04)); + transform: skewX(-12deg); +} + +.error-card::after { + background-image: radial-gradient(circle at 10% 20%, rgba(3, 155, 255, 0.18), transparent 22%), + radial-gradient(circle at 80% 80%, rgba(63, 185, 255, 0.12), transparent 20%); +} + +.error-headline { + margin: 0 0 16px; + font-size: clamp(3rem, 5vw, 6rem); + letter-spacing: -0.08em; + line-height: 0.9; + color: #7df0ff; + text-shadow: 0 0 18px rgba(125, 240, 255, 0.28); + animation: glowPulse 2.5s ease-in-out infinite alternate; +} + +.error-subtitle { + margin: 0 0 24px; + color: #b8d3ff; + font-size: 1.05rem; + line-height: 1.8; + letter-spacing: 0.02em; + max-width: 720px; +} + +.error-meta { + display: flex; + gap: 16px; + flex-wrap: wrap; + margin-bottom: 32px; +} + +.meta-chip { + background: rgba(255, 255, 255, 0.04); + border: 1px solid rgba(34, 126, 255, 0.18); + border-radius: 999px; + padding: 10px 18px; + font-size: 0.95rem; + color: #c4d6ff; +} + +.error-actions { + display: flex; + align-items: center; + gap: 16px; + flex-wrap: wrap; +} + +.button-return { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 14px 26px; + border-radius: 999px; + border: 1px solid rgba(125, 240, 255, 0.5); + background: rgba(26, 34, 60, 0.95); + color: #e5f4ff; + font-size: 0.98rem; + font-weight: 700; + text-decoration: none; + text-transform: uppercase; + letter-spacing: 0.08em; + box-shadow: 0 0 18px rgba(46, 213, 255, 0.12); + transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; +} + +.button-return:hover, +.button-return:focus-visible { + transform: translateY(-2px); + background: rgba(14, 24, 42, 0.98); + box-shadow: 0 0 28px rgba(45, 210, 255, 0.35); +} + +@keyframes glowPulse { + 0% { + text-shadow: 0 0 18px rgba(125, 240, 255, 0.28), 0 0 40px rgba(125, 240, 255, 0.18); + } + 100% { + text-shadow: 0 0 24px rgba(125, 240, 255, 0.55), 0 0 64px rgba(125, 240, 255, 0.25); + } +} + +@media (max-width: 720px) { + .error-card { + padding: 32px 22px; + } + + .error-headline { + font-size: clamp(2.4rem, 10vw, 4rem); + } + + .error-actions { + width: 100%; + } +} diff --git a/css/menu.css b/css/menu.css new file mode 100644 index 0000000..371d2da --- /dev/null +++ b/css/menu.css @@ -0,0 +1,131 @@ +/* Menu page specific styles - Dark mode modern UI */ + +body.menu-page { + background: #090b10; + color: #e8effa; + font-family: Inter, 'Segoe UI', sans-serif; +} + +.menu-shell { + width: 100%; + display: flex; + justify-content: center; + align-items: stretch; + padding: 20px 8px 40px; + box-sizing: border-box; +} + +.menu-card { + width: min(1080px, 100%); + background: rgba(15, 21, 35, 0.98); + border: 1px solid rgba(120, 140, 190, 0.18); + border-radius: 28px; + box-shadow: 0 22px 80px rgba(0, 0, 0, 0.4); + backdrop-filter: blur(18px); + padding: 40px; +} + +.menu-card__header { + display: flex; + justify-content: space-between; + align-items: center; + gap: 20px; + margin-bottom: 32px; +} + +.menu-card__title { + font-size: clamp(1.8rem, 2.5vw, 2.6rem); + margin: 0; + line-height: 1.05; + letter-spacing: -0.03em; +} + +.menu-card__subtitle { + color: #97a3c0; + font-size: 0.95rem; + margin-top: 8px; +} + +.menu-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 20px; +} + +.menu-button { + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; + padding: 22px 24px; + border-radius: 20px; + border: 1px solid rgba(110, 146, 255, 0.2); + background: linear-gradient(180deg, rgba(15, 23, 45, 0.95), rgba(18, 24, 42, 0.98)); + color: #f5f9ff; + text-decoration: none; + transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; + min-height: 130px; +} + +.menu-button:hover, +.menu-button:focus-visible { + transform: translateY(-3px); + border-color: rgba(91, 132, 255, 0.75); + box-shadow: 0 20px 60px rgba(45, 67, 122, 0.28); +} + +.menu-button__content { + display: flex; + flex-direction: column; + gap: 6px; +} + +.menu-button__title { + font-size: 1.2rem; + font-weight: 700; + margin: 0; +} + +.menu-button__text { + color: #97a3c0; + font-size: 0.95rem; +} + +.menu-button__icon { + width: 48px; + height: 48px; + display: grid; + place-items: center; + border-radius: 16px; + background: rgba(87, 132, 255, 0.14); + color: #7fa2ff; + font-size: 1.4rem; +} + +.menu-note { + margin-top: 30px; + color: #8090b3; + font-size: 0.95rem; + text-align: center; +} + +@media (max-width: 860px) { + .menu-grid { + grid-template-columns: 1fr; + } + + .menu-card { + padding: 32px 22px; + } +} + +@media (max-width: 520px) { + .menu-card { + padding: 24px 16px; + } + + .menu-button { + min-height: 110px; + padding: 18px 18px; + } +} diff --git a/css/style.css b/css/style.css index 1997923..5031d9e 100755 --- a/css/style.css +++ b/css/style.css @@ -28,6 +28,8 @@ html { scroll-behavior: smooth; + min-height: 100%; + height: 100%; } body { @@ -41,6 +43,15 @@ body { min-height: 100vh; } +body > .main-content { + flex: 1 0 auto; +} + +main { + flex: 1 0 auto; + width: 100%; +} + .container { width: 100%; margin: 0 auto; @@ -147,14 +158,16 @@ body { .footer { position: relative; - padding: 2px 20px; + padding: 8px 20px; text-align: center; font-size: 0.85rem; - line-height: 1.1; - min-height: 28px; + line-height: 1.3; + min-height: 38px; display: flex; align-items: center; justify-content: center; + background: rgba(18, 24, 42, 0.98); + border-top: 1px solid rgba(255, 255, 255, 0.06); } .footer-logout { @@ -184,11 +197,13 @@ body { ============================================ */ .main-content { - flex: 1; - padding: 40px 20px; + flex: 1 0 auto; + min-height: 0; + padding: 40px 20px 20px; display: flex; justify-content: center; - align-items: center; + align-items: flex-start; + width: 100%; } .login-container { diff --git a/js/menu.js b/js/menu.js new file mode 100644 index 0000000..11753ec --- /dev/null +++ b/js/menu.js @@ -0,0 +1,12 @@ +document.addEventListener('DOMContentLoaded', function () { + const menuButtons = document.querySelectorAll('.menu-button[data-target]'); + + menuButtons.forEach((button) => { + button.addEventListener('click', () => { + const target = button.getAttribute('data-target'); + if (target) { + window.location.href = target; + } + }); + }); +}); diff --git a/php/404.php b/php/404.php index b987f59..2fc8781 100755 --- a/php/404.php +++ b/php/404.php @@ -1,16 +1,30 @@ -
-

Erreur 404

-

Désolé, la page que vous recherchez est introuvable.

- Retour à l'accueil -
+
+
+

404

+

La transaction est introuvable. Le cours de cette page a chuté et le marché n’en veut plus.

- \ No newline at end of file +
+ Route : /404 + Status : Page non cotée + Session : +
+ +
+ Retour à la base +
+
+
+ + \ No newline at end of file diff --git a/php/footer.php b/php/footer.php index 07dfb84..62a8c1b 100755 --- a/php/footer.php +++ b/php/footer.php @@ -1,7 +1,7 @@ diff --git a/php/header.php b/php/header.php index b48c6e5..86c82c2 100755 --- a/php/header.php +++ b/php/header.php @@ -5,9 +5,14 @@ Bourse - Page d'Accueil + + + + + - +