From 40917f52d4838b8aa85c71ae264bc923bd97903a Mon Sep 17 00:00:00 2001 From: tuanvu Date: Sun, 11 Jan 2026 19:23:49 +0100 Subject: [PATCH] commit --- front_end/package-lock.json | 46 +++-- front_end/src/App.css | 171 +++++++++++------- .../src/components/style/createSession.css | 16 +- front_end/src/components/style/edt.css | 88 +++++---- front_end/src/components/style/objectList.css | 72 +++++--- front_end/src/components/style/topBar.css | 93 +++++++--- 6 files changed, 309 insertions(+), 177 deletions(-) diff --git a/front_end/package-lock.json b/front_end/package-lock.json index 9cd9e01..a1e3b46 100644 --- a/front_end/package-lock.json +++ b/front_end/package-lock.json @@ -74,6 +74,7 @@ "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.5.tgz", "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==", "license": "MIT", + "peer": true, "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.5", @@ -723,6 +724,7 @@ "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.27.1.tgz", "integrity": "sha512-p9OkPbZ5G7UT1MofwYFigGebnrzGJacoBSQM0/6bi/PUMVE+qlWDD/OalvQKbwgQzU6dl0xAv6r4X7Jme0RYxA==", "license": "MIT", + "peer": true, "dependencies": { "@babel/helper-plugin-utils": "^7.27.1" }, @@ -1606,6 +1608,7 @@ "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.27.1.tgz", "integrity": "sha512-2KH4LWGSrJIkVf5tSiBFYuXDAoWRq2MMwgivCf+93dd0GQi8RXLjKA/0EvRnVV5G0hrHczsquXuD01L8s6dmBw==", "license": "MIT", + "peer": true, "dependencies": { "@babel/helper-annotate-as-pure": "^7.27.1", "@babel/helper-module-imports": "^7.27.1", @@ -2987,6 +2990,7 @@ "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", "license": "MIT", + "peer": true, "funding": { "type": "opencollective", "url": "https://opencollective.com/popperjs" @@ -3465,6 +3469,7 @@ "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz", "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==", "license": "MIT", + "peer": true, "dependencies": { "@babel/code-frame": "^7.10.4", "@babel/runtime": "^7.12.5", @@ -3850,6 +3855,7 @@ "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.7.tgz", "integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==", "license": "MIT", + "peer": true, "dependencies": { "csstype": "^3.2.2" } @@ -3859,6 +3865,7 @@ "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz", "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==", "license": "MIT", + "peer": true, "peerDependencies": { "@types/react": "^19.2.0" } @@ -3988,6 +3995,7 @@ "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz", "integrity": "sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag==", "license": "MIT", + "peer": true, "dependencies": { "@eslint-community/regexpp": "^4.4.0", "@typescript-eslint/scope-manager": "5.62.0", @@ -4041,6 +4049,7 @@ "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.62.0.tgz", "integrity": "sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA==", "license": "BSD-2-Clause", + "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "5.62.0", "@typescript-eslint/types": "5.62.0", @@ -4410,6 +4419,7 @@ "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz", "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "license": "MIT", + "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -4508,6 +4518,7 @@ "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", "license": "MIT", + "peer": true, "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", @@ -5447,6 +5458,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "baseline-browser-mapping": "^2.9.0", "caniuse-lite": "^1.0.30001759", @@ -7302,6 +7314,7 @@ "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==", "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.", "license": "MIT", + "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.6.1", @@ -10066,6 +10079,7 @@ "resolved": "https://registry.npmjs.org/jest/-/jest-27.5.1.tgz", "integrity": "sha512-Yn0mADZB89zTtjkPJEXwrac3LHudkQMR+Paqa8uxJHCBr9agxztUifWCyiYrjhMPBoUVBjyny0I7XH6ozDr7QQ==", "license": "MIT", + "peer": true, "dependencies": { "@jest/core": "^27.5.1", "import-local": "^3.0.2", @@ -10963,6 +10977,7 @@ "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz", "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==", "license": "MIT", + "peer": true, "bin": { "jiti": "bin/jiti.js" } @@ -11166,6 +11181,7 @@ "resolved": "https://registry.npmjs.org/keycloak-js/-/keycloak-js-26.2.2.tgz", "integrity": "sha512-ug7pNZ1xNkd7PPkerOJCEU2VnUhS7CYStDOCFJgqCNQ64h53ppxaKrh4iXH0xM8hFu5b1W6e6lsyYWqBMvaQFg==", "license": "Apache-2.0", + "peer": true, "workspaces": [ "test" ] @@ -12325,6 +12341,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", @@ -13459,6 +13476,7 @@ "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz", "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==", "license": "MIT", + "peer": true, "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -13837,6 +13855,7 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz", "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==", "license": "MIT", + "peer": true, "engines": { "node": ">=0.10.0" } @@ -13999,6 +14018,7 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz", "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==", "license": "MIT", + "peer": true, "dependencies": { "scheduler": "^0.27.0" }, @@ -14035,6 +14055,7 @@ "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==", "license": "MIT", + "peer": true, "engines": { "node": ">=0.10.0" } @@ -14497,6 +14518,7 @@ "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.2.tgz", "integrity": "sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ==", "license": "MIT", + "peer": true, "bin": { "rollup": "dist/bin/rollup" }, @@ -14739,6 +14761,7 @@ "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz", "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==", "license": "MIT", + "peer": true, "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", @@ -15985,23 +16008,6 @@ } } }, - "node_modules/tailwindcss/node_modules/yaml": { - "version": "2.8.2", - "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.2.tgz", - "integrity": "sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==", - "license": "ISC", - "optional": true, - "peer": true, - "bin": { - "yaml": "bin.mjs" - }, - "engines": { - "node": ">= 14.6" - }, - "funding": { - "url": "https://github.com/sponsors/eemeli" - } - }, "node_modules/tapable": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz", @@ -16219,6 +16225,7 @@ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "license": "MIT", + "peer": true, "engines": { "node": ">=12" }, @@ -16387,6 +16394,7 @@ "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz", "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==", "license": "(MIT OR CC0-1.0)", + "peer": true, "engines": { "node": ">=10" }, @@ -16495,6 +16503,7 @@ "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", "license": "Apache-2.0", + "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -16833,6 +16842,7 @@ "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.104.1.tgz", "integrity": "sha512-Qphch25abbMNtekmEGJmeRUhLDbe+QfiWTiqpKYkpCOWY64v9eyl+KRRLmqOFA2AvKPpc9DC6+u2n76tQLBoaA==", "license": "MIT", + "peer": true, "dependencies": { "@types/eslint-scope": "^3.7.7", "@types/estree": "^1.0.8", @@ -16904,6 +16914,7 @@ "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.15.2.tgz", "integrity": "sha512-0XavAZbNJ5sDrCbkpWL8mia0o5WPOd2YGtxrEiZkBK9FjLppIUK2TgxK6qGD2P3hUXTJNNPVibrerKcx5WkR1g==", "license": "MIT", + "peer": true, "dependencies": { "@types/bonjour": "^3.5.9", "@types/connect-history-api-fallback": "^1.3.5", @@ -17317,6 +17328,7 @@ "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz", "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==", "license": "MIT", + "peer": true, "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", diff --git a/front_end/src/App.css b/front_end/src/App.css index 1dffe81..5d80aba 100644 --- a/front_end/src/App.css +++ b/front_end/src/App.css @@ -1,40 +1,52 @@ /* Variables de thème */ [data-theme='dark'] { - --tint0: #000000; - --tint1: #0b0c0e; - --tint2: #16181d; - --tint3: #21252b; - --tint4: #2c313a; - --tint5: #373d48; - --text: #FFFFFF; + --tint0: #0a0e27; + --tint1: #1a1f3a; + --tint2: #232d4a; + --tint3: #2e3a59; + --tint4: #3d4a6f; + --tint5: #4a5a85; + --text: #f0f4f8; --text2: #000000; --disable: #02291d; --green-primary: #10b981; --green-secondary: #059669; --green-dark: #047857; - --green-A-primary: #10b98120; - --green-A-secondary: #05966920; - --green-A-dark: #04785720; - --themeButtonColor : #00AAFF; + --green-A-primary: #10b98130; + --green-A-secondary: #05966930; + --green-A-dark: #04785730; + --themeButtonColor: #00AAFF; + --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); + --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); + --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5); + --blue-accent: #3b82f6; + --purple-accent: #a78bfa; + --cyan-accent: #06b6d4; } [data-theme='light'] { - --tint0: #ffffff; - --tint1: #f4f1f1; - --tint2: #e8e4e3; - --tint3: #ddd6d5; - --tint4: #d2c8c6; - --tint5: #c6bab8; - --text: #000000; + --tint0: #f8fafc; + --tint1: #f1f5f9; + --tint2: #e2e8f0; + --tint3: #cbd5e1; + --tint4: #b0bac4; + --tint5: #94a3b8; + --text: #0f172a; --text2: #FFFFFF; --disable: #02291d; - --green-primary: #00ce89; - --green-secondary: #00a571; - --green-dark: #00825d; - --green-A-primary: #00ce8920; - --green-A-secondary: #00a57120; - --green-A-dark: #00825d20; - --themeButtonColor : #FFAA00; + --green-primary: #10b981; + --green-secondary: #059669; + --green-dark: #047857; + --green-A-primary: #10b98125; + --green-A-secondary: #05966925; + --green-A-dark: #04785725; + --themeButtonColor: #f59e0b; + --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); + --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1); + --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.15); + --blue-accent: #3b82f6; + --purple-accent: #a855f7; + --cyan-accent: #06b6d4; } /* Reset et base */ @@ -46,17 +58,18 @@ body { margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; + font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - background-color: var(--tint0); + background: linear-gradient(135deg, var(--tint0) 0%, var(--tint1) 100%); color: var(--text); - transition: background-color 0.3s ease, color 0.3s ease; + transition: background 0.4s ease, color 0.4s ease; + font-weight: 400; + line-height: 1.6; } -.padding{ +.padding { padding: 10px } @@ -71,10 +84,23 @@ code { color: var(--green-primary); } -.App{ +.App { display: grid; - padding: 10px; - gap:10px; + padding: 20px; + gap: 24px; + max-width: 1400px; + margin: 0 auto; +} + +.App h1 { + font-size: clamp(2rem, 5vw, 3.5rem); + font-weight: 700; + background: linear-gradient(135deg, var(--green-primary) 0%, var(--cyan-accent) 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + margin-bottom: 8px; + letter-spacing: -0.5px; } /* Container principal */ @@ -83,16 +109,23 @@ code { background: linear-gradient(180deg, var(--tint0) 0%, var(--tint1) 100%); } -.composant-padding{ - padding: 10px; +.composant-padding { + padding: 10px; } -.composant-container{ - background-color: var(--tint2); - border-radius: 30px; - padding: 10px; - border: 2px solid var(--tint4); - box-shadow: 0 4px 6px rgba(16, 185, 129, 0.1); +.composant-container { + background: linear-gradient(135deg, var(--tint2) 0%, var(--tint3) 100%); + border-radius: 24px; + padding: 24px; + border: 1px solid var(--tint4); + box-shadow: var(--shadow-lg); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +.composant-container:hover { + border-color: var(--green-primary); + box-shadow: 0 12px 40px var(--green-A-primary); + transform: translateY(-2px); } /* Header / Navigation */ @@ -134,18 +167,18 @@ code { /* Cards et containers */ .card { - background-color: var(--tint1); + background: linear-gradient(135deg, var(--tint1) 0%, var(--tint2) 100%); border-radius: 20px; - padding: 20px; - border: 2px solid var(--green-A-secondary); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); - transition: all 0.3s ease; + padding: 24px; + border: 1px solid var(--tint4); + box-shadow: var(--shadow-md); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .card:hover { border-color: var(--green-primary); - box-shadow: 0 6px 16px var(--green-A-primary); - transform: translateY(-2px); + box-shadow: 0 8px 24px var(--green-A-primary); + transform: translateY(-4px); } .card-header { @@ -171,20 +204,21 @@ input[type="time"], input[type="search"], input[type="datetime-local"], textarea { - background-color: var(--tint3); + background-color: var(--tint2); color: var(--text); - border: 2px solid var(--tint5); - border-radius: 8px; - padding: 10px 14px; - transition: all 0.3s ease; + border: 1px solid var(--tint4); + border-radius: 12px; + padding: 12px 14px; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-size: 15px; + font-family: inherit; } input:focus, textarea:focus { outline: none; border-color: var(--green-primary); - background-color: var(--tint3); + background-color: var(--tint1); box-shadow: 0 0 0 3px var(--green-A-primary); } @@ -227,23 +261,29 @@ select option { /* Buttons */ button { color: var(--text); - background-color: var(--tint3); - border: 2px solid var(--tint5); - border-radius: 8px; - padding: 5px 10px; + background: linear-gradient(135deg, var(--tint3) 0%, var(--tint4) 100%); + border: 1px solid var(--tint4); + border-radius: 12px; + padding: 10px 16px; cursor: pointer; - transition: all 0.3s ease; - font-weight: 500; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + font-weight: 600; font-size: 14px; display: inline-block; width: auto; + box-shadow: var(--shadow-sm); } button:hover { - background-color: var(--tint4); + background: linear-gradient(135deg, var(--green-primary) 0%, var(--green-secondary) 100%); border-color: var(--green-primary); + color: white; transform: translateY(-2px); - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + box-shadow: 0 6px 20px var(--green-A-primary); +} + +button:active { + transform: translateY(0); } button:active { @@ -430,7 +470,8 @@ td { /* Lists */ -ul, ol { +ul, +ol { color: var(--text); padding-left: 20px; } @@ -547,6 +588,7 @@ input[type="radio"] { from { opacity: 0; } + to { opacity: 1; } @@ -557,6 +599,7 @@ input[type="radio"] { opacity: 0; transform: translateY(20px); } + to { opacity: 1; transform: translateY(0); diff --git a/front_end/src/components/style/createSession.css b/front_end/src/components/style/createSession.css index 89000af..21e8486 100644 --- a/front_end/src/components/style/createSession.css +++ b/front_end/src/components/style/createSession.css @@ -1,5 +1,13 @@ -.createActivite{ - background: var(--tint1); - padding: 15px; - border-radius: 15px; +.createActivite { + background: linear-gradient(135deg, var(--tint2) 0%, var(--tint3) 100%); + padding: 20px; + border-radius: 16px; + border: 1px solid var(--tint4); + box-shadow: var(--shadow-md); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +.createActivite:hover { + border-color: var(--green-primary); + box-shadow: 0 8px 24px var(--green-A-primary); } \ No newline at end of file diff --git a/front_end/src/components/style/edt.css b/front_end/src/components/style/edt.css index ccc46c5..c00da9b 100644 --- a/front_end/src/components/style/edt.css +++ b/front_end/src/components/style/edt.css @@ -1,17 +1,24 @@ -.edt{ - background-color: var(--tint2); - border-radius: 30px; - padding: 10px; - border: 2px solid var(--tint4); - box-shadow: 0 4px 6px rgba(16, 185, 129, 0.1); +.edt { + background: linear-gradient(135deg, var(--tint2) 0%, var(--tint3) 100%); + border-radius: 24px; + padding: 20px; + border: 1px solid var(--tint4); + box-shadow: var(--shadow-lg); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } -.edt_header{ +.edt:hover { + border-color: var(--green-primary); + box-shadow: 0 12px 40px var(--green-A-primary); +} + +.edt_header { justify-content: center; display: grid; grid-template-columns: repeat(3, 0.5fr); - padding-bottom: 10px; - gap: 5%; + padding-bottom: 16px; + gap: 12px; + margin-bottom: 12px; } .edt_colonnes { @@ -24,7 +31,7 @@ width: 100%; } -.edt_loading{ +.edt_loading { position: absolute; inset: 0; display: grid; @@ -32,31 +39,38 @@ } .edt_colonne { - background-color: var(--tint3); - border-radius: 20px; - transition: all 0.3s ease; + background: linear-gradient(135deg, var(--tint3) 0%, var(--tint4) 100%); + border-radius: 16px; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); height: 100%; + border: 1px solid var(--tint4); + padding: 12px; } -.edt_day_header{ +.edt_day_header { font-size: clamp(5px, 1vw, 18px); - padding: 8px; - border-radius: 20px; + padding: 12px; + border-radius: 12px; height: fit-content; text-align: center; font-size: 1em; - background: linear-gradient(135deg, var(--green-A-primary), var(--green-A-dark)); - font-weight: 600; + background: linear-gradient(135deg, var(--green-primary) 0%, var(--green-secondary) 100%); + font-weight: 700; font-size: large; + color: white; + box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } -.today{ - background: linear-gradient(135deg, var(--green-primary), var(--green-dark)); +.today { + background: linear-gradient(135deg, var(--green-primary) 0%, var(--cyan-accent) 100%); color: #FFFFFF; + box-shadow: 0 6px 20px var(--green-A-primary); + transform: scale(1.02); } -.edt_day_content{ +.edt_day_content { display: flex; flex-direction: column; gap: 8px; @@ -68,39 +82,39 @@ .edt_session { font-size: clamp(1px, 8cqi, 18px); gap: 8px; - background-color: var(--tint4); + background: linear-gradient(135deg, var(--tint4) 0%, var(--tint5) 100%); border-radius: 12px; - padding: 5%; + padding: 12px; min-width: 0; - border-left: 3px solid var(--green-primary); /* Accent vert à gauche */ - transition: all 0.3s ease; + border-left: 4px solid var(--green-primary); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; + box-shadow: var(--shadow-sm); } .edt_session:hover { - background-color: var(--tint2); - border-left-width: 5px; - transform: translateX(3px); - box-shadow: -2px 2px 8px var(--green-A-primary); + background: linear-gradient(135deg, var(--green-A-primary), var(--green-A-secondary)); + border-left-width: 6px; + transform: translateX(4px); + box-shadow: 0 8px 16px var(--green-A-primary); } .edt_session:active { - background-color: var(--tint5); transform: translateX(1px); } -.edt_session_header{ +.edt_session_header { display: flex; gap: 5px; } -.edt_date{ +.edt_date { font-size: 0.75em; font-weight: 500; } -.edt_button_week_select{ - background: linear-gradient(135deg, var(--green-primary), var( --green-secondary)); +.edt_button_week_select { + background: linear-gradient(135deg, var(--green-primary), var(--green-secondary)); color: white; height: 40px; border-radius: 20px; @@ -123,7 +137,7 @@ box-shadow: 0 1px 2px var(--green-A-primary); } -.edt_session_modal{ +.edt_session_modal { background-color: var(--tint2); padding: 10px; border-radius: 20px; @@ -132,14 +146,14 @@ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1), 0 0 0 1px var(--green-A-primary); } -.ent_activite_list{ +.ent_activite_list { padding: 10px; background-color: var(--tint3); border-radius: 10px; border: 1px solid var(--green-A-primary); } -.edt_activite_modal{ +.edt_activite_modal { background-color: var(--tint3); padding: 10px; border-radius: 20px; diff --git a/front_end/src/components/style/objectList.css b/front_end/src/components/style/objectList.css index bc6c3df..a682bfb 100644 --- a/front_end/src/components/style/objectList.css +++ b/front_end/src/components/style/objectList.css @@ -1,65 +1,85 @@ .list_object{ display: grid; - gap:10px; - background-color: var(--tint1); - padding: 10px; - border-radius: 20px; + gap: 12px; + background: linear-gradient(135deg, var(--tint2) 0%, var(--tint3) 100%); + padding: 16px; + border-radius: 16px; + border: 1px solid var(--tint4); + box-shadow: var(--shadow-md); } .list_object_modal{ display: grid; - gap:10px; - background-color: var(--tint1); - padding: 10px; - border-radius: 20px; - max-height: 200px; + gap: 12px; + background: linear-gradient(135deg, var(--tint2) 0%, var(--tint3) 100%); + padding: 16px; + border-radius: 16px; + max-height: 280px; overflow-y: auto; + border: 1px solid var(--tint4); } .object { - font-size: clamp(1px, 8cqi, 18px); gap: 8px; - background-color: var(--tint3); + background: linear-gradient(135deg, var(--tint3) 0%, var(--tint4) 100%); border-radius: 12px; - padding: 10px; + padding: 12px; min-width: 0; - border: 2px solid; - border-color: var(--tint3); + border: 1px solid var(--tint4); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: var(--shadow-sm); } + .object:hover { - background-color: var(--tint2); + background: linear-gradient(135deg, var(--green-A-primary), var(--green-A-secondary)); border-color: var(--green-primary); + transform: translateY(-2px); + box-shadow: 0 8px 16px var(--green-A-primary); } .object:active { - background-color: var(--tint4); + background: linear-gradient(135deg, var(--tint4) 0%, var(--tint5) 100%); + transform: translateY(0); } + .object_header{ display: flex; - gap: 5px; + gap: 8px; + align-items: center; + font-weight: 600; } .object_small{ font-size: 0.75em; + opacity: 0.8; } .object_modal{ - background-color: var(--tint2); - padding: 10px; - border-radius: 20px; + background: linear-gradient(135deg, var(--tint2) 0%, var(--tint3) 100%); + padding: 14px; + border-radius: 12px; position: relative; + border: 1px solid var(--tint4); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +.object_modal:hover { + border-color: var(--green-primary); + box-shadow: 0 4px 12px var(--green-A-primary); } .session_modal_activite_list{ display: grid; - padding: 10px; - background-color: var(--tint3); - border-radius: 10px; - gap: 5px; + padding: 12px; + background: linear-gradient(135deg, var(--tint3) 0%, var(--tint4) 100%); + border-radius: 12px; + gap: 8px; + border: 1px solid var(--tint4); } .activiteList{ display: flex; - gap: 10px; -} \ No newline at end of file + gap: 12px; + flex-wrap: wrap; +} diff --git a/front_end/src/components/style/topBar.css b/front_end/src/components/style/topBar.css index 345612c..471a420 100644 --- a/front_end/src/components/style/topBar.css +++ b/front_end/src/components/style/topBar.css @@ -1,69 +1,104 @@ -.topBar{ +.topBar { display: flex; justify-content: space-between; align-items: center; - padding:15px; - background: var(--tint2); - border-radius: 30px; - height: 60px; - border: 3px solid var(--tint5); + padding: 16px 24px; + background: linear-gradient(135deg, var(--tint2) 0%, var(--tint3) 100%); + border-radius: 20px; + height: auto; + min-height: 70px; + border: 1px solid var(--tint4); + box-shadow: var(--shadow-md); + backdrop-filter: blur(10px); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } -.toBarLeft{ +.topBar:hover { + border-color: var(--green-primary); + box-shadow: 0 8px 32px var(--green-A-primary); +} + +.toBarLeft { display: flex; - gap: 10px; + gap: 16px; align-items: center; + font-weight: 600; +} + +.toBarLeft h2 { + background: linear-gradient(135deg, var(--green-primary) 0%, var(--cyan-accent) 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + margin: 0; + font-size: 1.5rem; } -.topBarRight{ +.topBarRight { display: flex; align-items: center; justify-content: flex-end; gap: 10px; } -.loginContainer{ +.loginContainer { position: relative; } -.login{ - position:absolute; +.login { + position: absolute; right: 0; - top: 1; + top: calc(100% + 8px); display: grid; - gap:15px; + gap: 12px; width: fit-content; white-space: nowrap; align-items: left; - background: var(--tint2) ; - padding: 10px; - border-radius: 15px; - border: 3px solid var(--tint5); + background: linear-gradient(135deg, var(--tint2) 0%, var(--tint3) 100%); + padding: 16px; + border-radius: 16px; + border: 1px solid var(--tint4); + box-shadow: var(--shadow-lg); + z-index: 1000; + backdrop-filter: blur(10px); } -.loginButton{ +.loginButton { width: 120px; height: 30px; border-radius: 15px; } -.ButtonTheme{ - height: 40px; - width: 40px; +.ButtonTheme { + height: 44px; + width: 44px; color: var(--text); - background-color: var(--tint3); - border-radius: 15px; - font-size: 16px; - border-color: var(--tint5); + background: linear-gradient(135deg, var(--tint3) 0%, var(--tint4) 100%); + border: 1px solid var(--tint4); + border-radius: 12px; + font-size: 18px; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; } -.ButtonTheme:hover{ +.ButtonTheme:hover { border-color: var(--themeButtonColor); color: var(--themeButtonColor); + box-shadow: 0 4px 12px rgba(0, 170, 255, 0.3); + transform: scale(1.05) rotateZ(-180deg); } -.logo{ - height: 30px; +.logo { + height: 40px; + filter: drop-shadow(0 2px 8px rgba(16, 185, 129, 0.3)); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +.logo:hover { + transform: scale(1.1) rotateY(10deg); } \ No newline at end of file