From 85a858d3b8f48068f8aedf6f81f99390c4f2c121 Mon Sep 17 00:00:00 2001 From: jfgiraud Date: Sun, 12 Jul 2026 10:41:08 +0000 Subject: [PATCH] WIP: bolsa V 1.1 horaires bourses dans footer --- css/style.css | 635 ++++++++++++++++++++++++----------------------- js/footer.js | 47 ++++ php/footer.php | 19 +- php/ordreGF.php | 16 +- php/ordreJFG.php | 16 +- 5 files changed, 398 insertions(+), 335 deletions(-) create mode 100644 js/footer.js diff --git a/css/style.css b/css/style.css index 5b92e77..4d06cdb 100755 --- a/css/style.css +++ b/css/style.css @@ -3,17 +3,17 @@ ============================================ */ :root { - --bg-primary: #121212; - --bg-secondary: #1e1e1e; - --bg-tertiary: #2a2a2a; - --text-primary: #e0e0e0; - --text-secondary: #b0b0b0; - --accent-color: #6200ee; - --accent-hover: #7c3aed; - --border-color: #333333; - --success-color: #4caf50; - --error-color: #f44336; - --warning-color: #ff9800; + --bg-primary: #121212; + --bg-secondary: #1e1e1e; + --bg-tertiary: #2a2a2a; + --text-primary: #e0e0e0; + --text-secondary: #b0b0b0; + --accent-color: #6200ee; + --accent-hover: #7c3aed; + --border-color: #333333; + --success-color: #4caf50; + --error-color: #f44336; + --warning-color: #ff9800; } /* ============================================ @@ -21,41 +21,43 @@ ============================================ */ * { - margin: 0; - padding: 0; - box-sizing: border-box; + margin: 0; + padding: 0; + box-sizing: border-box; } html { - scroll-behavior: smooth; - min-height: 100%; - height: 100%; + scroll-behavior: smooth; + min-height: 100%; + height: 100%; } body { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; - background-color: var(--bg-primary); - color: var(--text-primary); - line-height: 1.6; - font-size: 16px; - display: flex; - flex-direction: column; - min-height: 100vh; + font-family: + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Arial, sans-serif; + background-color: var(--bg-primary); + color: var(--text-primary); + line-height: 1.6; + font-size: 16px; + display: flex; + flex-direction: column; + min-height: 100vh; } body > .main-content { - flex: 1 0 auto; + flex: 1 0 auto; } main { - flex: 1 0 auto; - width: 100%; + flex: 1 0 auto; + width: 100%; } .container { - width: 100%; - margin: 0 auto; - padding: 0; + width: 100%; + margin: 0 auto; + padding: 0; } /* ============================================ @@ -63,134 +65,112 @@ main { ============================================ */ .header { - background-color: var(--bg-secondary); - border-bottom: 1px solid var(--border-color); - padding: 10px 0; - position: sticky; - top: 0; - z-index: 1000; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); + background-color: var(--bg-secondary); + border-bottom: 1px solid var(--border-color); + padding: 10px 0; + position: sticky; + top: 0; + z-index: 1000; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } .header .container { - position: relative; - min-height: 50px; - width: 100%; - padding: 0 8px; + position: relative; + min-height: 50px; + width: 100%; + padding: 0 8px; } .logo { - position: absolute; - left: 8px; - top: 50%; - transform: translateY(-50%); - display: flex; - align-items: center; - padding-left: 0; + position: absolute; + left: 8px; + top: 50%; + transform: translateY(-50%); + display: flex; + align-items: center; + padding-left: 0; } .site-title { - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - font-size: 28px; - font-weight: 700; - color: var(--text-primary); - letter-spacing: 0.5px; - text-align: center; - margin-left: 0; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + font-size: 28px; + font-weight: 700; + color: var(--text-primary); + letter-spacing: 0.5px; + text-align: center; + margin-left: 0; } .user-info { - position: absolute; - right: 8px; - top: 50%; - transform: translateY(-50%); - display: flex; - flex-direction: column; - align-items: flex-end; - gap: 2px; - text-align: right; - color: var(--text-secondary); - font-size: 0.95rem; - line-height: 1.3; - white-space: nowrap; - margin-right: 0; - padding-right: 0; + position: absolute; + right: 8px; + top: 50%; + transform: translateY(-50%); + display: flex; + flex-direction: column; + align-items: flex-end; + gap: 2px; + text-align: right; + color: var(--text-secondary); + font-size: 0.95rem; + line-height: 1.3; + white-space: nowrap; + margin-right: 0; + padding-right: 0; } .user-info span { - display: block; + display: block; } .user-info .info-ip { - display: inline-flex; - align-items: center; - gap: 10px; - flex-wrap: wrap; + display: inline-flex; + align-items: center; + gap: 10px; + flex-wrap: wrap; } .info-date { - display: inline-block; + display: inline-block; } .logout-button { - display: inline-block; - padding: 4px 10px; - border-radius: 8px; - border: 1px solid var(--accent-color); - background: var(--accent-color); - color: #ffffff; - font-size: 0.9rem; - font-weight: 600; - text-decoration: none; - text-transform: uppercase; - letter-spacing: 0.5px; - transition: all 0.2s ease; + display: inline-block; + padding: 4px 10px; + border-radius: 8px; + border: 1px solid var(--accent-color); + background: var(--accent-color); + color: #ffffff; + font-size: 0.9rem; + font-weight: 600; + text-decoration: none; + text-transform: uppercase; + letter-spacing: 0.5px; + transition: all 0.2s ease; } .logout-button:hover { - background: var(--accent-hover); - border-color: var(--accent-hover); - color: #ffffff; -} - -.footer { - position: relative; - padding: 8px 20px; - text-align: center; - font-size: 0.85rem; - 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); - flex-shrink: 0; -} - -.footer-logout { - position: absolute; - right: 20px; - top: 50%; - transform: translateY(-50%); + background: var(--accent-hover); + border-color: var(--accent-hover); + color: #ffffff; } .logo-img { - height: 50px; - width: auto; - display: block; - filter: brightness(1.1); + height: 50px; + width: auto; + display: block; + filter: brightness(1.1); } .site-title { - font-size: 28px; - font-weight: 700; - color: var(--text-primary); - letter-spacing: 0.5px; - text-align: center; + font-size: 28px; + font-weight: 700; + color: var(--text-primary); + letter-spacing: 0.5px; + text-align: center; } /* ============================================ @@ -198,53 +178,53 @@ main { ============================================ */ .main-content { - flex: 1 0 auto; - min-height: 0; - padding: 40px 20px 20px; - display: flex; - justify-content: center; - align-items: flex-start; - width: 100%; + flex: 1 0 auto; + min-height: 0; + padding: 40px 20px 20px; + display: flex; + justify-content: center; + align-items: flex-start; + width: 100%; } .login-container { - width: 100%; - max-width: 450px; + width: 100%; + max-width: 450px; } .login-box { - background-color: var(--bg-secondary); - padding: 40px; - border-radius: 12px; - border: 1px solid var(--border-color); - box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); - animation: slideUp 0.5s ease; + background-color: var(--bg-secondary); + padding: 40px; + border-radius: 12px; + border: 1px solid var(--border-color); + box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); + animation: slideUp 0.5s ease; } @keyframes slideUp { - from { - opacity: 0; - transform: translateY(30px); - } - to { - opacity: 1; - transform: translateY(0); - } + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } } .login-title { - font-size: 28px; - font-weight: 700; - color: var(--text-primary); - margin-bottom: 8px; - text-align: center; + font-size: 28px; + font-weight: 700; + color: var(--text-primary); + margin-bottom: 8px; + text-align: center; } .login-subtitle { - color: var(--text-secondary); - text-align: center; - font-size: 14px; - margin-bottom: 30px; + color: var(--text-secondary); + text-align: center; + font-size: 14px; + margin-bottom: 30px; } /* ============================================ @@ -252,46 +232,46 @@ main { ============================================ */ .login-form { - display: flex; - flex-direction: column; - gap: 20px; + display: flex; + flex-direction: column; + gap: 20px; } .form-group { - display: flex; - flex-direction: column; - gap: 8px; + display: flex; + flex-direction: column; + gap: 8px; } .form-label { - color: var(--text-primary); - font-weight: 600; - font-size: 14px; - text-transform: uppercase; - letter-spacing: 0.5px; + color: var(--text-primary); + font-weight: 600; + font-size: 14px; + text-transform: uppercase; + letter-spacing: 0.5px; } .form-input { - background-color: var(--bg-tertiary); - border: 1px solid var(--border-color); - color: var(--text-primary); - padding: 12px 16px; - border-radius: 8px; - font-size: 16px; - transition: all 0.3s ease; - font-family: inherit; + background-color: var(--bg-tertiary); + border: 1px solid var(--border-color); + color: var(--text-primary); + padding: 12px 16px; + border-radius: 8px; + font-size: 16px; + transition: all 0.3s ease; + font-family: inherit; } .form-input:focus { - outline: none; - border-color: var(--accent-color); - background-color: rgba(98, 0, 238, 0.05); - box-shadow: 0 0 0 3px rgba(98, 0, 238, 0.1); + outline: none; + border-color: var(--accent-color); + background-color: rgba(98, 0, 238, 0.05); + box-shadow: 0 0 0 3px rgba(98, 0, 238, 0.1); } .form-input::placeholder { - color: var(--text-secondary); - opacity: 0.7; + color: var(--text-secondary); + opacity: 0.7; } /* ============================================ @@ -299,25 +279,25 @@ main { ============================================ */ .form-group.checkbox { - flex-direction: row; - align-items: center; - gap: 10px; + flex-direction: row; + align-items: center; + gap: 10px; } .form-checkbox { - width: 18px; - height: 18px; - cursor: pointer; - accent-color: var(--accent-color); + width: 18px; + height: 18px; + cursor: pointer; + accent-color: var(--accent-color); } .form-checkbox-label { - color: var(--text-secondary); - font-size: 14px; - font-weight: 400; - cursor: pointer; - text-transform: none; - letter-spacing: normal; + color: var(--text-secondary); + font-size: 14px; + font-weight: 400; + cursor: pointer; + text-transform: none; + letter-spacing: normal; } /* ============================================ @@ -325,35 +305,35 @@ main { ============================================ */ .btn-submit { - background: linear-gradient(135deg, var(--accent-color), var(--accent-hover)); - color: #ffffff; - padding: 12px 24px; - border: none; - border-radius: 8px; - font-size: 16px; - font-weight: 600; - cursor: pointer; - transition: all 0.3s ease; - text-transform: uppercase; - letter-spacing: 0.5px; - margin-top: 10px; - box-shadow: 0 4px 15px rgba(98, 0, 238, 0.4); + background: linear-gradient(135deg, var(--accent-color), var(--accent-hover)); + color: #ffffff; + padding: 12px 24px; + border: none; + border-radius: 8px; + font-size: 16px; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; + text-transform: uppercase; + letter-spacing: 0.5px; + margin-top: 10px; + box-shadow: 0 4px 15px rgba(98, 0, 238, 0.4); } .btn-submit:hover { - transform: translateY(-2px); - box-shadow: 0 6px 20px rgba(98, 0, 238, 0.6); + transform: translateY(-2px); + box-shadow: 0 6px 20px rgba(98, 0, 238, 0.6); } .btn-submit:active { - transform: translateY(0); + transform: translateY(0); } .btn-submit:disabled { - background: var(--bg-tertiary); - color: var(--text-secondary); - cursor: not-allowed; - box-shadow: none; + background: var(--bg-tertiary); + color: var(--text-secondary); + cursor: not-allowed; + box-shadow: none; } /* ============================================ @@ -361,53 +341,53 @@ main { ============================================ */ .login-footer { - text-align: center; - margin-top: 20px; - padding-top: 20px; - border-top: 1px solid var(--border-color); - display: flex; - justify-content: center; - align-items: center; - gap: 10px; - font-size: 14px; + text-align: center; + margin-top: 20px; + padding-top: 20px; + border-top: 1px solid var(--border-color); + display: flex; + justify-content: center; + align-items: center; + gap: 10px; + font-size: 14px; } .alert { - border-radius: 10px; - padding: 16px 18px; - margin-bottom: 20px; - font-size: 14px; - line-height: 1.5; + border-radius: 10px; + padding: 16px 18px; + margin-bottom: 20px; + font-size: 14px; + line-height: 1.5; } .alert-error { - background-color: rgba(244, 67, 54, 0.12); - border: 1px solid rgba(244, 67, 54, 0.25); - color: #ffb3b0; + background-color: rgba(244, 67, 54, 0.12); + border: 1px solid rgba(244, 67, 54, 0.25); + color: #ffb3b0; } .alert-success { - background-color: rgba(76, 175, 80, 0.12); - border: 1px solid rgba(76, 175, 80, 0.25); - color: #c8facc; + background-color: rgba(76, 175, 80, 0.12); + border: 1px solid rgba(76, 175, 80, 0.25); + color: #c8facc; } .forgot-password, .signup-link { - color: var(--accent-color); - text-decoration: none; - transition: color 0.3s ease; - font-weight: 500; + color: var(--accent-color); + text-decoration: none; + transition: color 0.3s ease; + font-weight: 500; } .forgot-password:hover, .signup-link:hover { - color: var(--accent-hover); - text-decoration: underline; + color: var(--accent-hover); + text-decoration: underline; } .separator { - color: var(--text-secondary); + color: var(--text-secondary); } /* ============================================ @@ -415,13 +395,36 @@ main { ============================================ */ .footer { - background-color: var(--bg-secondary); - border-top: 1px solid var(--border-color); - padding: 20px; - text-align: center; - color: var(--text-secondary); - font-size: 13px; - margin-top: auto; + display: flex; + align-items: center; + padding: 10px 20px; + background-color: var(--bg-secondary); + border-top: 1px solid var(--border-color); + color: var(--text-secondary); + font-size: 0.85rem; + width: 100%; +} + +/* On donne une largeur fixe aux conteneurs latéraux pour forcer le centrage */ +#market-clocks, +.logout-container { + flex: 0 0 200px; /* Largeur fixe de 200px pour les deux côtés */ +} + +#market-clocks { + display: flex; + flex-direction: column; + text-align: left; +} + +.footer p { + flex: 1; /* Le texte prend tout l'espace restant */ + text-align: center; /* Centre le texte dans cet espace */ +} + +.footer-logout { + display: block; + text-align: right; /* Aligne le bouton à droite dans son bloc */ } /* ============================================ @@ -429,89 +432,89 @@ main { ============================================ */ @media (max-width: 768px) { - .header .container { - flex-direction: column; - gap: 20px; - } + .header .container { + flex-direction: column; + gap: 20px; + } - .navbar { - margin-left: 0; - width: 100%; - } + .navbar { + margin-left: 0; + width: 100%; + } - .nav-menu { - flex-direction: column; - gap: 15px; - } + .nav-menu { + flex-direction: column; + gap: 15px; + } - .logo-section { - width: 100%; - justify-content: center; - } + .logo-section { + width: 100%; + justify-content: center; + } - .site-title { - font-size: 24px; - } + .site-title { + font-size: 24px; + } - .login-box { - padding: 30px 20px; - } + .login-box { + padding: 30px 20px; + } - .login-title { - font-size: 24px; - } + .login-title { + font-size: 24px; + } - .footer-content { - grid-template-columns: 1fr; - text-align: center; - } + .footer-content { + grid-template-columns: 1fr; + text-align: center; + } - .footer-section h3 { - margin-top: 15px; - } + .footer-section h3 { + margin-top: 15px; + } } @media (max-width: 480px) { - body { - font-size: 15px; - } + body { + font-size: 15px; + } - .main-content { - padding: 20px 15px; - } + .main-content { + padding: 20px 15px; + } - .login-container { - max-width: 100%; - } + .login-container { + max-width: 100%; + } - .login-box { - padding: 25px 15px; - border-radius: 10px; - } + .login-box { + padding: 25px 15px; + border-radius: 10px; + } - .login-title { - font-size: 22px; - } + .login-title { + font-size: 22px; + } - .nav-link { - font-size: 14px; - } + .nav-link { + font-size: 14px; + } - .form-input { - padding: 10px 12px; - font-size: 16px; /* Évite le zoom sur iOS */ - } + .form-input { + padding: 10px 12px; + font-size: 16px; /* Évite le zoom sur iOS */ + } - .btn-submit { - padding: 11px 20px; - font-size: 15px; - } + .btn-submit { + padding: 11px 20px; + font-size: 15px; + } - .logo { - height: 40px; - } + .logo { + height: 40px; + } - .site-title { - font-size: 20px; - } -} \ No newline at end of file + .site-title { + font-size: 20px; + } +} diff --git a/js/footer.js b/js/footer.js new file mode 100644 index 0000000..25ee5d0 --- /dev/null +++ b/js/footer.js @@ -0,0 +1,47 @@ +document.addEventListener("DOMContentLoaded", function () { + function updateClocks() { + const now = new Date(); + const formatTime = (date) => date.toLocaleTimeString("fr-FR"); + + // --- PARIS --- + const parisTime = new Date( + now.toLocaleString("en-US", { timeZone: "Europe/Paris" }), + ); + const pDay = parisTime.getDay(); + const pHour = parisTime.getHours(); + const pMin = parisTime.getMinutes(); + const isParisOpen = + pDay >= 1 && + pDay <= 5 && + pHour >= 9 && + (pHour < 17 || (pHour === 17 && pMin < 30)); + + const pEl = document.getElementById("paris-clock"); + if (pEl) { + pEl.innerText = "Paris : " + formatTime(parisTime); + pEl.style.color = isParisOpen ? "#28a745" : "#dc3545"; + } + + // --- NEW-YORK --- + const nyTime = new Date( + now.toLocaleString("en-US", { timeZone: "America/New_York" }), + ); + const nyDay = nyTime.getDay(); + const nyHour = nyTime.getHours(); + const nyMin = nyTime.getMinutes(); + const isNyOpen = + nyDay >= 1 && + nyDay <= 5 && + nyHour >= 9 && + (nyHour < 16 || (nyHour === 9 && nyMin >= 30)); + + const nyEl = document.getElementById("ny-clock"); + if (nyEl) { + nyEl.innerText = "New-York : " + formatTime(nyTime); + nyEl.style.color = isNyOpen ? "#28a745" : "#dc3545"; + } + } + + setInterval(updateClocks, 1000); + updateClocks(); +}); diff --git a/php/footer.php b/php/footer.php index 62a8c1b..1f9a04a 100755 --- a/php/footer.php +++ b/php/footer.php @@ -1,9 +1,22 @@ - - \ No newline at end of file + + + \ No newline at end of file diff --git a/php/ordreGF.php b/php/ordreGF.php index 1c57957..d7c14b5 100644 --- a/php/ordreGF.php +++ b/php/ordreGF.php @@ -273,14 +273,14 @@ require_once __DIR__ . '/header.php';
- +
- - - + + +
@@ -326,14 +326,14 @@ require_once __DIR__ . '/header.php';
- +
- - - + + +
diff --git a/php/ordreJFG.php b/php/ordreJFG.php index b247cbe..bb3c101 100644 --- a/php/ordreJFG.php +++ b/php/ordreJFG.php @@ -241,14 +241,14 @@ require_once __DIR__ . '/header.php';
- +
- - - + + +
@@ -294,14 +294,14 @@ require_once __DIR__ . '/header.php';
- +
- - - + + +