From 938d4cf3b5786f04a1cc2e42ec2030bc837dde06 Mon Sep 17 00:00:00 2001 From: Thomas Fauve-Piot Date: Fri, 20 Mar 2026 15:01:39 +0100 Subject: [PATCH 1/4] 45env45 --- .45env45 | 10 ++++++ Transcendence/srcs/frontend/src/app.js | 2 ++ Transcendence/srcs/frontend/src/game.css | 39 ++--------------------- Transcendence/srcs/frontend/src/index.css | 34 ++++++++++++++++++-- 4 files changed, 45 insertions(+), 40 deletions(-) create mode 100644 .45env45 diff --git a/.45env45 b/.45env45 new file mode 100644 index 0000000..67317b7 --- /dev/null +++ b/.45env45 @@ -0,0 +1,10 @@ +POSTGRES_PASSWORD=coucou +JWT_SECRET=superlongsecretkeyatleast32characterspleasenevercommitthis +POSTGRES_DB=database +POSTGRES_HOST=database +POSTGRES_USER=user +GITHUB_CLIENT_ID=Ov23li6ovg3fzec5IO5D +GITHUB_CLIENT_SECRET=0345e959e8f0e9f784061c5c90ee227ddb2ef9ab +GITHUB_CALLBACK_URL=http://localhost:8080/api/auth/github/callback + +pogpog diff --git a/Transcendence/srcs/frontend/src/app.js b/Transcendence/srcs/frontend/src/app.js index c6f3913..052dcaa 100644 --- a/Transcendence/srcs/frontend/src/app.js +++ b/Transcendence/srcs/frontend/src/app.js @@ -109,6 +109,8 @@ class App { } colorizeUI() { + if (!window.location.pathname.includes("game.html")) return; + const elements = document.querySelectorAll(".menu__item, .game__item, .page__item"); const colorizeText = (el) => { diff --git a/Transcendence/srcs/frontend/src/game.css b/Transcendence/srcs/frontend/src/game.css index f4503d6..8b636c0 100644 --- a/Transcendence/srcs/frontend/src/game.css +++ b/Transcendence/srcs/frontend/src/game.css @@ -18,8 +18,8 @@ --app-background-image: url("./assets/Frame1.png"); - --color-surface: #f5f52d; - --color-surface-light: #eff870; + --color-surface: #ffcc00; + --color-surface-light: #feffa6; --color-text: #000000; --color-text-muted: #353535; @@ -118,41 +118,6 @@ body { /* ============================================ TYPOGRAPHY ============================================ */ - -/* .title { - position: absolute; - top: 20px; - left: 50%; - transform: translateX(-50%); - text-transform: uppercase; - - display: flex; - align-items: center; - justify-content: center; - gap: 20px; - - font-size: var(--font-size-xl); - text-align: center; - text-shadow: 2px 2px 10px black; - z-index: 1; - font-family: "Patrick Hand", cursive; - color: #ff0055; - text-shadow: - 2px 2px 0 #000, - -2px -2px 0 #000, - 2px -2px 0 #000, - -2px 2px 0 #000; - - animation: wobble 2s infinite ease-in-out; - - margin: 0; - padding: var(--spacing-md); - - /* Rectangle + rounded corners */ - /* background-color: rgba(247, 7, 67, 0.6); - border: 2px solid rgba(0, 0, 0, 0.6); - border-radius: 15px; -} */ .title { position: absolute; diff --git a/Transcendence/srcs/frontend/src/index.css b/Transcendence/srcs/frontend/src/index.css index 0ec8442..3700dfa 100644 --- a/Transcendence/srcs/frontend/src/index.css +++ b/Transcendence/srcs/frontend/src/index.css @@ -126,7 +126,7 @@ body { /* Rectangle + rounded corners */ background-color: rgba(247, 7, 67, 0.6); border: 2px solid rgba(0, 0, 0, 0.6); - border-radius: 15px; + border-radius: var(--radius-lg); } @@ -134,7 +134,7 @@ body { MENU ============================================ */ -.menu { +/* .menu { position: fixed; top: 0; left: 50px; @@ -144,17 +144,31 @@ body { display: flex; flex-direction: column; gap: var(--spacing-xs); +} */ + +.menu { + position: fixed; + top: var(--spacing-lg); + left: 50px; + + display: flex; + flex-direction: column; + gap: var(--spacing-lg); + + z-index: var(--z-menu); } .menu__item { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-surface-light); + border-radius: var(--radius-lg); padding: var(--spacing-sm) var(--spacing-md); font-size: var(--font-size-md); cursor: pointer; transition: all var(--transition-fast); text-align: center; + overflow: hidden; } .menu__item:hover { @@ -171,7 +185,7 @@ body { GAME ============================================ */ -.game { +/* .game { position: fixed; top: 0; right: 50px; @@ -181,17 +195,27 @@ body { display: flex; flex-direction: column; gap: var(--spacing-xs); +} */ + +.game { + position: fixed; + top: var(--spacing-lg); + right: 50px; + display: flex; + flex-direction: column; } .game__item { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-surface-light); + border-radius: var(--radius-lg); padding: var(--spacing-sm) var(--spacing-md); font-size: var(--font-size-md); cursor: pointer; transition: all var(--transition-fast); text-align: center; + overflow: hidden; } .game__item:hover { @@ -390,6 +414,10 @@ body { ============================================ */ .login { width: 320px; + border-radius: 10px; + border-color: #ff0000; + border: 6px solid #000000; + background: var(--color-surface); } .login__form { From 27704b97f86d1f31190ea3ac84beb8d4070a65f8 Mon Sep 17 00:00:00 2001 From: Thomas Fauve-Piot Date: Fri, 20 Mar 2026 17:57:00 +0100 Subject: [PATCH 2/4] Home page's front good --- Transcendence/srcs/frontend/src/app.js | 3 +- Transcendence/srcs/frontend/src/index.css | 82 +++++++++------------- Transcendence/srcs/frontend/src/index.html | 4 +- 3 files changed, 36 insertions(+), 53 deletions(-) diff --git a/Transcendence/srcs/frontend/src/app.js b/Transcendence/srcs/frontend/src/app.js index 052dcaa..9efb1b2 100644 --- a/Transcendence/srcs/frontend/src/app.js +++ b/Transcendence/srcs/frontend/src/app.js @@ -109,9 +109,8 @@ class App { } colorizeUI() { - if (!window.location.pathname.includes("game.html")) return; - const elements = document.querySelectorAll(".menu__item, .game__item, .page__item"); + const elements = document.querySelectorAll(".title, .menu__item, .game__item, .page__item"); const colorizeText = (el) => { const text = el.textContent; diff --git a/Transcendence/srcs/frontend/src/index.css b/Transcendence/srcs/frontend/src/index.css index 3700dfa..841a3ca 100644 --- a/Transcendence/srcs/frontend/src/index.css +++ b/Transcendence/srcs/frontend/src/index.css @@ -7,28 +7,28 @@ CSS VARIABLES ============================================ */ :root { - --color-primary: #0066cc; - --color-primary-hover: #0052a3; + --color-primary: #ffc75e; + --color-primary-hover: #ffc75e; --color-success: #3cff01; - --color-success-dark: #28a745; + --color-success-dark: #ffc75e; --color-error: #ff4d4d; - --color-warning: #ffc107; - --color-github: #24292e; + --color-warning: #ffc75e; + --color-github: #ffc75e; - --color-bg: #a3a3a3; + --color-bg: #ffe5b5; --app-background-base: radial-gradient( circle at top, - #000000, - #4d4d4d + #fff787, + #ff8080 ); --app-background-image: url("./assets/background.png"); - --color-surface: #222; - --color-surface-light: #333; - --color-text: #fff; - --color-text-muted: #aaa; + --color-surface: #ffefce; + --color-surface-light: #ffc75e; + --color-text: #000000; + --color-text-muted: #000000; --font-size-base: 10px; --font-size-sm: 1.2rem; @@ -117,14 +117,14 @@ body { text-align: center; text-shadow: 2px 2px 10px black; z-index: 1; - font-family: "Patrick Hand", cursive; + font-family: "Roboto"; + letter-spacing: -10px; color: rgba(248, 252, 2, 0.6); margin: 0; - padding: var(--spacing-md); + padding: 0.6rem 1.2rem; - /* Rectangle + rounded corners */ - background-color: rgba(247, 7, 67, 0.6); + background-color: #ffefce; border: 2px solid rgba(0, 0, 0, 0.6); border-radius: var(--radius-lg); } @@ -163,12 +163,12 @@ body { color: var(--color-text); border: 1px solid var(--color-surface-light); border-radius: var(--radius-lg); + border-color: #000; padding: var(--spacing-sm) var(--spacing-md); font-size: var(--font-size-md); cursor: pointer; transition: all var(--transition-fast); text-align: center; - overflow: hidden; } .menu__item:hover { @@ -201,8 +201,12 @@ body { position: fixed; top: var(--spacing-lg); right: 50px; + display: flex; flex-direction: column; + gap: var(--spacing-lg); + + z-index: var(--z-menu); } .game__item { @@ -210,12 +214,12 @@ body { color: var(--color-text); border: 1px solid var(--color-surface-light); border-radius: var(--radius-lg); + border-color: #000; padding: var(--spacing-sm) var(--spacing-md); font-size: var(--font-size-md); cursor: pointer; transition: all var(--transition-fast); text-align: center; - overflow: hidden; } .game__item:hover { @@ -327,13 +331,15 @@ body { left: 50%; transform: translate(-50%, -50%); background: var(--color-bg); - border: 2px ridge var(--color-text); color: var(--color-text); z-index: var(--z-window); display: none; flex-direction: column; min-width: 280px; box-shadow: var(--shadow-lg); + border-radius: 5px; + border-color: #aa1f1f; + border: 6px solid #faac37; } .window--visible { @@ -394,7 +400,8 @@ body { .message { font-size: var(--font-size-sm); padding: var(--spacing-xs); - border-radius: var(--radius-sm); + border-radius: var(--radius-lg); + border-color: #000; } .message--success { @@ -414,10 +421,11 @@ body { ============================================ */ .login { width: 320px; - border-radius: 10px; - border-color: #ff0000; - border: 6px solid #000000; - background: var(--color-surface); + border-radius: 5px; + border-color: #aa1f1f; + border: 6px solid #faac37; + background: #ffffff; + color: #000; } .login__form { @@ -629,30 +637,6 @@ body { padding: var(--spacing-sm) 0; } -/* ============================================ - EASTER EGG BUTTON - ============================================ */ -/* .easter-egg { - position: absolute; - top: 20%; - left: 50%; - transform: translateX(-50%); - z-index: 1; - background: var(--color-surface); - color: var(--color-text); - border: 1px solid var(--color-surface-light); - padding: var(--spacing-sm) var(--spacing-md); - cursor: pointer; - font-size: var(--font-size-md); - border-radius: var(--radius-md); - transition: all var(--transition-fast); -} - -.easter-egg:hover { - background: var(--color-error); - border-color: var(--color-error); -} */ - /* ============================================ UTILITIES ============================================ */ @@ -698,7 +682,7 @@ body { .friends__tab { flex: 1; padding: var(--spacing-sm); - background: var(--color-surface); + background: var(--color-surface-light); border: 1px solid var(--color-surface-light); color: var(--color-text); cursor: pointer; diff --git a/Transcendence/srcs/frontend/src/index.html b/Transcendence/srcs/frontend/src/index.html index 9aa983f..a007348 100644 --- a/Transcendence/srcs/frontend/src/index.html +++ b/Transcendence/srcs/frontend/src/index.html @@ -3,14 +3,14 @@ - Transcendence.io + Transcendence -

Transcendence.io

+

Transcendence