45env45

.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

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) => {

Transcendence/srcs/frontend/src/game.css

@@ -18,8 +18,8 @@
 
     --app-background-image: url("./assets/Frame1.png");
 
-    --color-surface: #f5f52d;
+    --color-surface: #ffcc00;
-    --color-surface-light: #eff870;
+    --color-surface-light: #feffa6;
     --color-text: #000000;
     --color-text-muted: #353535;
 
@@ -119,41 +119,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;
     top: 20px;

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 {