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 {