From 94c79aee9ed019d002553d934d4e4fb91d794f63 Mon Sep 17 00:00:00 2001 From: profTedou Date: Wed, 8 Oct 2025 19:57:36 +0100 Subject: [PATCH 1/2] changement de couleur de la page --- pages/login-page.html | 2 +- styles/login-page.css | 55 ++++++++++++++++++++++++---------------- styles/register-page.css | 55 ++++++++++++++++++++++++---------------- 3 files changed, 67 insertions(+), 45 deletions(-) diff --git a/pages/login-page.html b/pages/login-page.html index 1326cda..9f168b2 100644 --- a/pages/login-page.html +++ b/pages/login-page.html @@ -3,7 +3,7 @@ Title - +
diff --git a/styles/login-page.css b/styles/login-page.css index 620e1f5..cb33ca2 100644 --- a/styles/login-page.css +++ b/styles/login-page.css @@ -1,9 +1,20 @@ +/* +VAriables #776f73,#cccccc,#8f253c + */ + +:root { + --couleur-1: #776f73; + --couleur-2: #cccccc; + --couleur-3: #8f253c; +} + + /* === STYLES GLOBAUX === */ body { margin: 0; font-family: 'Inter', 'Roboto', sans-serif; - background: linear-gradient(135deg, #e8f1ff, #f8fbff); - color: #1a1a1a; + background: linear-gradient(135deg, var(--couleur-1), var(--couleur-2)); + color: var(--couleur-3); display: flex; align-items: center; justify-content: center; @@ -14,9 +25,9 @@ body { .login-page { width: 90%; max-width: 1100px; - background: #ffffff; + background: var(--couleur-2); border-radius: 20px; - box-shadow: 0 10px 30px rgba(0, 100, 255, 0.1); + box-shadow: 0 10px 30px var(--couleur-3); display: flex; flex-direction: column; overflow: hidden; @@ -27,10 +38,10 @@ body { .login-page h1 { text-align: center; padding: 2rem 1rem; - color: #1e3a8a; + color: var(--couleur-3); font-size: 1.8rem; - border-bottom: 1px solid #e2e8f0; - background: #f8fafc; + border-bottom: 1px solid var(--couleur-2); + background: var(--couleur-2); } /* === MAIN CONTENT === */ @@ -57,13 +68,13 @@ body { flex-direction: column; justify-content: space-between; text-align: center; - box-shadow: inset 0 0 15px rgba(0, 60, 255, 0.05); + box-shadow: inset 0 0 15px var(--couleur-3); } .presentation-login .descrition { font-size: 1rem; line-height: 1.6; - color: #334155; + color: var(--couleur-3); margin-bottom: 2rem; display: block; } @@ -74,12 +85,12 @@ body { justify-content: center; gap: 0.7rem; font-weight: 600; - color: #1e40af; + color: var(--couleur-3); font-size: 1.1rem; } .presentation-login svg { - stroke: #1d4ed8; + stroke: var(--couleur-3); transition: transform 0.3s ease; } @@ -89,7 +100,7 @@ body { /* === FORMULAIRE === */ .login-form { - background: #f9fafb; + background: var(--couleur-2); border-radius: 16px; padding: 2rem 2.5rem; display: flex; @@ -99,7 +110,7 @@ body { } .login-form h3 { - color: #1e3a8a; + color: var(--couleur-3); text-align: center; margin-bottom: 1.5rem; font-size: 1.4rem; @@ -125,8 +136,8 @@ input { } input:focus { - border-color: #3b82f6; - box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25); + border-color: var(--couleur-3); + box-shadow: 0 0 0 3px var(--couleur-1); } /* === BOUTONS === */ @@ -141,13 +152,13 @@ button { } button[type="submit"] { - background: #2563eb; - color: white; + background: var(--couleur-3); + color: var(--couleur-1); margin-top: 1rem; } button[type="submit"]:hover { - background: #1e40af; + background: var(--couleur-3); } .google-btn { @@ -155,14 +166,14 @@ button[type="submit"]:hover { align-items: center; justify-content: center; gap: 0.8rem; - background: white; - color: #1f2937; - border: 1px solid #d1d5db; + background: var(--couleur-2); + color: var(--couleur-1); + border: 1px solid var(--couleur-1); margin-top: 1rem; } .google-btn:hover { - background: #f3f4f6; + background: var(--couleur-2); } .google-icon { diff --git a/styles/register-page.css b/styles/register-page.css index 620e1f5..cb33ca2 100644 --- a/styles/register-page.css +++ b/styles/register-page.css @@ -1,9 +1,20 @@ +/* +VAriables #776f73,#cccccc,#8f253c + */ + +:root { + --couleur-1: #776f73; + --couleur-2: #cccccc; + --couleur-3: #8f253c; +} + + /* === STYLES GLOBAUX === */ body { margin: 0; font-family: 'Inter', 'Roboto', sans-serif; - background: linear-gradient(135deg, #e8f1ff, #f8fbff); - color: #1a1a1a; + background: linear-gradient(135deg, var(--couleur-1), var(--couleur-2)); + color: var(--couleur-3); display: flex; align-items: center; justify-content: center; @@ -14,9 +25,9 @@ body { .login-page { width: 90%; max-width: 1100px; - background: #ffffff; + background: var(--couleur-2); border-radius: 20px; - box-shadow: 0 10px 30px rgba(0, 100, 255, 0.1); + box-shadow: 0 10px 30px var(--couleur-3); display: flex; flex-direction: column; overflow: hidden; @@ -27,10 +38,10 @@ body { .login-page h1 { text-align: center; padding: 2rem 1rem; - color: #1e3a8a; + color: var(--couleur-3); font-size: 1.8rem; - border-bottom: 1px solid #e2e8f0; - background: #f8fafc; + border-bottom: 1px solid var(--couleur-2); + background: var(--couleur-2); } /* === MAIN CONTENT === */ @@ -57,13 +68,13 @@ body { flex-direction: column; justify-content: space-between; text-align: center; - box-shadow: inset 0 0 15px rgba(0, 60, 255, 0.05); + box-shadow: inset 0 0 15px var(--couleur-3); } .presentation-login .descrition { font-size: 1rem; line-height: 1.6; - color: #334155; + color: var(--couleur-3); margin-bottom: 2rem; display: block; } @@ -74,12 +85,12 @@ body { justify-content: center; gap: 0.7rem; font-weight: 600; - color: #1e40af; + color: var(--couleur-3); font-size: 1.1rem; } .presentation-login svg { - stroke: #1d4ed8; + stroke: var(--couleur-3); transition: transform 0.3s ease; } @@ -89,7 +100,7 @@ body { /* === FORMULAIRE === */ .login-form { - background: #f9fafb; + background: var(--couleur-2); border-radius: 16px; padding: 2rem 2.5rem; display: flex; @@ -99,7 +110,7 @@ body { } .login-form h3 { - color: #1e3a8a; + color: var(--couleur-3); text-align: center; margin-bottom: 1.5rem; font-size: 1.4rem; @@ -125,8 +136,8 @@ input { } input:focus { - border-color: #3b82f6; - box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25); + border-color: var(--couleur-3); + box-shadow: 0 0 0 3px var(--couleur-1); } /* === BOUTONS === */ @@ -141,13 +152,13 @@ button { } button[type="submit"] { - background: #2563eb; - color: white; + background: var(--couleur-3); + color: var(--couleur-1); margin-top: 1rem; } button[type="submit"]:hover { - background: #1e40af; + background: var(--couleur-3); } .google-btn { @@ -155,14 +166,14 @@ button[type="submit"]:hover { align-items: center; justify-content: center; gap: 0.8rem; - background: white; - color: #1f2937; - border: 1px solid #d1d5db; + background: var(--couleur-2); + color: var(--couleur-1); + border: 1px solid var(--couleur-1); margin-top: 1rem; } .google-btn:hover { - background: #f3f4f6; + background: var(--couleur-2); } .google-icon { From a21151b2a4820a2f434b87adf3b82c51e06a4341 Mon Sep 17 00:00:00 2001 From: profTedou Date: Wed, 8 Oct 2025 20:01:36 +0100 Subject: [PATCH 2/2] correction couleur --- pages/register-page.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/register-page.html b/pages/register-page.html index d67f858..8fc2db5 100644 --- a/pages/register-page.html +++ b/pages/register-page.html @@ -3,7 +3,7 @@ Title - +