Home page's front good

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;

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;

Transcendence/srcs/frontend/src/index.html

@@ -3,14 +3,14 @@
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<title>Transcendence.io</title>
+		<title>Transcendence</title>
 		<link rel="stylesheet" href="index.css" />
 		<link rel="preconnect" href="https://fonts.googleapis.com" />
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 		<link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&display=swap" rel="stylesheet" />
 	</head>
 	<body>
-		<h1 class="title">Transcendence.io</h1>
+		<h1 class="title">Transcendence</h1>
 
 		<nav class="menu" aria-label="Menu principal">
 			<button class="menu__item" data-action="login" aria-label="Login">Login</button>