Merge pull request #23 from OlaketalAmigo/Rendu

MERGED

README.md

@@ -0,0 +1,142 @@
+*This project has been created as part of the 42 curriculum by agallon, gprunet, yantoine and tfauve-p*
+
+**DESCRIPTION**
+
+For starters, ft_transcendence is a wonderful project based on building a web-application running from Docker containers where the goal is, for the first time to do whatever we want, yet still we need to follow multiples criteria based on a number of points to grind to set the project as finished.
+
+For such a project our group thought about the "CATETRIBBL.IO". We chose to make a web application featuring multiples games such as Tetris one of the very first game ever developed and Skkribl.io the amazing drawing game !
+
+But beware ! A mysterious noble cat named Wiskas The Third is gone ... It is said that he's been lurking around trapping 42's students into infinite conversation known as "tunnel". If you see him please report to us as soon as possible !
+
+**INSTRUCTIONS**
+
+Like every 42 project you will need to git clone it into a valid repository, then add our functional .env file at the root of the repository. After all that, make use of the "make" command and watch our fabulous containers building themselves ! Look for https://localhost:8443/ once it's built, remember that you need to login in order to play on our web app !
+
+Outside of 42 environment you will obviously need Docker and Make installed.
+
+**RESOURCES**
+
+- https://www.geeksforgeeks.org
+- https://developer.mozilla.org/fr/docs/Web/JavaScript
+- https://www.w3schools.com/js/
+- https://www.tigerdata.com/learn/postgres-cheat-sheet
+- https://www.programiz.com/css/button-styling
+- https://developer.mozilla.org/fr/docs/Web/CSS
+- https://chatgpt.com/
+- https://www.gimp.org/tutorials/
+
+AI was mostly used to ask questions and deepen understanding, it was also used to generate multiple samples of what we could do front-end wise.
+
+**FEATURES:**
+
+- Login
+- Avatar
+- Global Chat
+- Skribbl.io + Spectator mode
+- Tetris + Duels
+- Wiskas the Third
+
+Use of the framework Express for the back-end because its compatible with jsonwebtoken(JWT) and contains solid and well tested features.
+
+**DEPENDENCIES**
+
+- "express": "^4.18.2",
+- "pg": "^8.11.3",
+- "bcrypt": "^5.1.0",
+- "jsonwebtoken": "^9.0.2",
+- "dotenv": "^17.2.3",
+- "socket.io": "^4.6.1",
+- "cors": "^2.8.5",
+- "passport": "0.7.0",
+- "passport-github2": "0.1.12",
+- "express-session": "1.18.0",
+- "multer": "^1.4.5-lts.1",
+- "file-type": "^19.0.0"
+
+**TEAM INFORMATION**
+
+Tfauve-p : The project manager, is in lead of organizing all the meeting with the team which changed over time, including then some recruitment. There was some adjustments to make over our vision of the project while coding it on GitHub.
+
+Yantoine : The project owner, is in lead of both games, Tetris and Skkribl.io, made core decisions on features about these and got the work completed. His communication skills were very important due to the front-end / back-end relationship needed in order to achieve this glorious project.
+
+Gprunet : The technical lead, is in charge of the back-end, made some strong decisions on the architectures of the project in terms of technology used. Created the entire database and most of the foundation of this project such as the builder files.
+
+Agallon : Developer in the front-end action, he joined the team after the project was done but managed to innovate and brought to life the marvelous Wiskas the Third. Furthermore he also cared about the integrity of the web application and greatly improved the user experience through logical decisions.
+
+**PROJECT MANAGEMENT**
+
+The task's sharing was based on our own advance of the 42 cursus, meaning that Gprunet and Yantoine started coding the app sooner than Tfauve-p and Agallon.
+
+Gprunet: Back-end + spectator mode
+Yantoine: Github auth, games and Front/Back sockets
+Tfauve-p: Front-end Designer
+Agallon: Adjustements on Front-end and some new features.
+
+
+**TECHNICAL STACK**
+
+Front-end: JavaScript, HTML, CSS, NGINX
+Back-end: JavaScript, Express, JWT, multer, etc...
+Database: PostgreSQL because it uses a permissibe open-source licence and is feature-rich and powerful for the scale of our project
+
+Since python doesn't have many front-end framework we opted to use JavaScript for both front and back.
+After learning about JWT and learning that Express had a great synergy with it the choice was natural.
+
+
+**DATABASES SCHEMA**
+
+![Database Schema required ... ](./postgresql-architecture.jpg)
+
+
+**FEATURES LIST**
+
+- 2 Games
+- One talking Cat
+- Friends chat
+- 
+
+**MODULES**
+
+Total : 23pts ( 14pts for 100% 19pts for 125% )
+
+- WEB
+
+Minor : Use a back end framework
+
+Major : Implement real-time features
+
+Major : Allow users to interact with others
+
+Major : A public API to interact with the database
+
+Minor : A complete notification system for all creation, update and deletion account
+
+- ACCESSIBILITY
+
+Minor : Support for additional browsers
+
+- USER MANAGEMENT
+
+Major : Standard user management and authentication
+
+Minor : Game statistics and match history ???
+
+Minor : Implement remote authentication
+
+- GAMING AND USER EXPERIENCE
+
+Major : Implement a complete web-based game where users can play against each other
+
+Major : Remote players, Enable two players on separate computers to play the same game
+
+Major : Multiplayer game
+
+Major : Add another game with user history and matchmaking
+
+Minor : Advanced chat features ???? 
+
+Minor : Game customization options
+
+Minor : Spectator mode for games
+
+

Transcendence/Makefile

@@ -1,6 +1,7 @@
 all : up
 
 up :
+	@docker compose -f ./docker-compose.yml build --no-cache
 	@docker compose -f ./docker-compose.yml up -d
 
 clean :

Transcendence/srcs/frontend/dockerfile

@@ -1,4 +1,5 @@
 FROM nginx:alpine
+
 RUN apk add --no-cache openssl && \
     mkdir -p /etc/nginx/ssl && \
     openssl req -x509 -nodes -days 365 -newkey rsa:2048 \
@@ -6,7 +7,14 @@ RUN apk add --no-cache openssl && \
     -out /etc/nginx/ssl/cert.pem \
     -subj "/CN=localhost" \
     -addext "subjectAltName=DNS:localhost,IP:127.0.0.1"
+
+#ADDED
+RUN rm -f /etc/nginx/conf.d/default.conf
+
 COPY src /usr/share/nginx/html
+
 COPY nginx.conf /etc/nginx/conf.d/default.conf
+
 EXPOSE 443
+
 CMD ["nginx", "-g", "daemon off;"]

Transcendence/srcs/frontend/src/app.js

@@ -2,14 +2,14 @@
  * Application entry point
  * Initializes windows and handles menu interactions
  */
-import { windowRegistry } from '../core/windows.js';
+import { windowRegistry } from './core/windows.js';
-import { LoginWindow } from '../windows/login.js';
+import { LoginWindow } from './windows/login.js';
-import { LogoutWindow } from '../windows/logout.js';
+import { LogoutWindow } from './windows/logout.js';
-import { GlobalChat } from '../windows/global_chat.js';
+import { GlobalChat } from './windows/global_chat.js';
-import { AvatarWindow } from '../windows/avatar.js';
+import { AvatarWindow } from './windows/avatar.js';
-import { FriendsWindow } from '../windows/friends.js';
+import { FriendsWindow } from './windows/friends.js';
-import { GameRoomWindow } from '../windows/game_room.js';
+import { GameRoomWindow } from './windows/game_room.js';
-import { StatsWindow } from '../windows/stats.js';
+import { StatsWindow } from './windows/stats.js';
 
 /**
  * Main application class

Transcendence/srcs/frontend/src/game/game.css

@@ -1,26 +1,25 @@
 :root {
-    --color-primary: #0066cc;
+    --color-primary: #ffc75e;
-    --color-primary-hover: #0052a3;
+    --color-primary-hover: #ffc75e;
     --color-success: #3cff01;
-    --color-success-dark: #28a745;
+    --color-success-dark: #ffc75e;
     --color-error: #ff4d4d;
-    --color-warning: #ffc107;
+    --color-warning: #ffc75e;
-    --color-github: #24292e;
+    --color-github: #ffc75e;
 
-    --color-bg: #000;
+    --color-bg: #ffe5b5;
 
     --app-background-base: radial-gradient(
         circle at top,
-        #1b2735,
+        #3fc9ff,
-        #090a0f
+        #21fcc5
+
     );
 
-    /* --app-background-image: url("./assets/background.png"); */
+    --color-surface: #ffcc00;
-
+    --color-surface-light: #feffa6;
-    --color-surface: #222;
+    --color-text: #000000;
-    --color-surface-light: #333;
+    --color-text-muted: #353535;
-    --color-text: #fff;
-    --color-text-muted: #aaa;
 
     --font-size-base: 10px;
     --font-size-sm: 1.2rem;
@@ -62,19 +61,22 @@
 
 html {
     height: 100%;
-    background-image:
+    background-image:  
         var(--app-background-base);
 
+    background-size: contain, cover;
+    background-position: center, center;
+    background-repeat: no-repeat, no-repeat;
+        
+
     background-size:
         contain,
         cover;
 
     background-position:
-        center,
         center;
 
     background-repeat:
-        no-repeat,
         no-repeat;
 }
 
@@ -93,102 +95,69 @@ body {
 }
 
 
+/* ============================================
+    ANIMATIONS
+   ============================================ */
+
+@keyframes wobble {
+    0%   { transform: translate(0%, 0) rotate(0deg); }
+    25%  { transform: translate(-5%, -1px) rotate(-0.5deg); }
+    50%  { transform: translate(0%, 1px) rotate(0.5deg); }
+    75%  { transform: translate(+5%, -1px) rotate(0.5deg); }
+    100% { transform: translate(0%, 0) rotate(0deg); }
+}
+
+@keyframes bounce {
+    0% { transform: translateY(0) rotate(var(--rot)); }
+    33% { transform: translateY(-6px) rotate(var(--rot)); }
+    66% { transform: translateY(-8px) rotate(var(--rot)); }
+    100% { transform: translateY(0) rotate(var(--rot)); }
+}
+
 /* ============================================
    TYPOGRAPHY
    ============================================ */
+
 .title {
     position: absolute;
-    top: 0;
-    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: "Cinzel Decorative", cursive;
+    top: 20px;
-    color: var(--color-success);
+    left: 50%;
-    margin: 0;
+    translate: -50% 0;
-    padding: var(--spacing-md);
+    background: #ffcc00;
+    color: #000;
+
+    border: 4px solid #feffa6;
+    border-radius: 18px;
+
+    padding: 0.6rem 1.2rem;
+
+    animation: wobble 2s infinite ease-in-out;
 }
 
-/* ============================================
+.title span {
-   MENU
+    display: inline-block;
-   ============================================ */
+    transform-origin: center;
+    font-size: 4rem;
+    font-weight: bold;
+    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
 
-.menu {
+    animation: bounce 1.2s infinite alternate;
-    position: fixed;
+    animation-timing-function: ease-in-out;
-    top: 0;
-    left: 50px;
-    padding: 0;
-    margin: 0;
-    z-index: var(--z-menu);
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-xs);
 }
 
-.menu__item {
+.title span:nth-child(1) { --rot: -5deg; color: #ff4d4d; }
-    background: var(--color-surface);
+.title span:nth-child(2) { --rot:  3deg; color: #5beb67; }
-    color: var(--color-text);
+.title span:nth-child(3) { --rot: -3deg; color: #ca8dfc; }
-    border: 1px solid var(--color-surface-light);
+.title span:nth-child(4) { --rot:  2deg; color: #6698f5; }
-    padding: var(--spacing-sm) var(--spacing-md);
+.title span:nth-child(5) { --rot: -4deg; color: #ff66cc; }
-    font-size: var(--font-size-md);
-    cursor: pointer;
-    transition: all var(--transition-fast);
-    text-align: left;
-}
 
-.menu__item:hover {
+.title span:nth-child(2) { animation-delay: 0.2s; }
-    background: var(--color-surface-light);
+.title span:nth-child(3) { animation-delay: 0.4s; }
-    font-size: var(--font-size-lg);
+.title span:nth-child(4) { animation-delay: 0.6s; }
-}
+.title span:nth-child(5) { animation-delay: 0.8s; }
 
-.menu__item--active {
+.title span { will-change: transform; }
-    background: var(--color-primary);
-    border-color: var(--color-primary);
-}
-
-/* ============================================
-   GAME
-   ============================================ */
-
-.game {
-    position: fixed;
-    top: 0;
-    right: 50px;
-    padding: 0;
-    margin: 0;
-    z-index: var(--z-menu);
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-xs);
-}
-
-.game__item {
-    background: var(--color-surface);
-    color: var(--color-text);
-    border: 1px solid var(--color-surface-light);
-    padding: var(--spacing-sm) var(--spacing-md);
-    font-size: var(--font-size-md);
-    cursor: pointer;
-    transition: all var(--transition-fast);
-    text-align: right;
-}
-
-.game__item:hover {
-    background: var(--color-surface-light);
-    font-size: var(--font-size-lg);
-}
-
-.game__item--active {
-    background: var(--color-primary);
-    border-color: var(--color-primary);
-}
 
 /* ============================================
    PAGES
@@ -208,14 +177,17 @@ body {
 }
 
 .page__item {
+
+    border-radius: var(--radius-lg);
     background: var(--color-surface);
     color: var(--color-text);
     border: 1px solid var(--color-surface-light);
+    border-color: #fda725;
     padding: var(--spacing-sm) var(--spacing-md);
     font-size: var(--font-size-md);
     cursor: pointer;
     transition: all var(--transition-fast);
-    text-align: right;
+    text-align: center;
 }
 
 .page__item:hover {
@@ -229,9 +201,87 @@ body {
 }
 
 /* ============================================
-   BUTTONS
+   MENU
    ============================================ */
 
+.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);
+    border-color: #fda725;
+    padding: var(--spacing-sm) var(--spacing-md);
+    font-size: var(--font-size-md);
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    text-align: center;
+}
+
+.menu__item:hover {
+    background: var(--color-surface-light);
+    font-size: var(--font-size-lg);
+}
+
+.menu__item--active {
+    background: var(--color-primary);
+    border-color: var(--color-primary);
+}
+
+/* ============================================
+   GAME
+   ============================================ */
+
+
+.game {
+    position: fixed;
+    top: var(--spacing-lg);
+    right: 50px;
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-lg);
+
+    z-index: var(--z-menu);
+}
+
+.game__item {
+    background: var(--color-surface);
+    color: var(--color-text);
+    border: 1px solid var(--color-surface-light);
+    border-radius: var(--radius-lg);
+    border-color: #fda725;
+    padding: var(--spacing-sm) var(--spacing-md);
+    font-size: var(--font-size-md);
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    text-align: center;
+}
+
+.game__item:hover {
+    background: var(--color-surface-light);
+    font-size: var(--font-size-lg);
+}
+
+.game__item--active {
+    background: var(--color-primary);
+    border-color: var(--color-primary);
+}
+
+/* ============================================
+   BUTTONS
+   ============================================ */
 .btn {
     display: inline-flex;
     align-items: center;
@@ -256,7 +306,7 @@ body {
 }
 
 .btn--primary {
-    background: var(--color-primary);
+    background: var(--color-surface);
     color: var(--color-text);
 }
 
@@ -265,7 +315,7 @@ body {
 }
 
 .btn--secondary {
-    background: var(--color-surface-light);
+    background: var(--color-surface);
     color: var(--color-text);
 }
 
@@ -328,13 +378,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 {
@@ -395,7 +447,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 {
@@ -415,6 +468,11 @@ body {
    ============================================ */
 .login {
     width: 320px;
+    border-radius: 5px;
+    border-color: #aa1f1f;
+    border: 6px solid #faac37;
+    background: #ffffff;
+    color: #000;
 }
 
 .login__form {
@@ -533,7 +591,7 @@ body {
     border-radius: var(--radius-full);
     border: 3px solid var(--color-text);
     box-shadow: var(--shadow-md);
-    background: var(--color-surface);
+    background: var(--color-surface-light);
     align-self: center;
 }
 
@@ -557,28 +615,74 @@ body {
 }
 
 /* ============================================
-   EASTER EGG BUTTON
+   STATS WINDOW
    ============================================ */
-/* .easter-egg {
+.stats-window {
-    position: absolute;
+    width: 320px;
-    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 {
+.stats__avatar {
-    background: var(--color-error);
+    width: 72px;
-    border-color: var(--color-error);
+    height: 72px;
-} */
+    object-fit: cover;
+    border-radius: var(--radius-full);
+    border: 2px solid var(--color-text);
+    align-self: center;
+    display: block;
+    margin: 0 auto var(--spacing-xs);
+}
+
+.stats__username {
+    font-size: var(--font-size-lg);
+    font-weight: 600;
+    text-align: center;
+    color: #000;
+    margin-bottom: var(--spacing-md);
+}
+
+.stats__section {
+    margin-bottom: var(--spacing-md);
+}
+
+.stats__section-title {
+    font-size: var(--font-size-sm);
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--color-primary);
+    border-bottom: 1px solid var(--color-surface-light);
+    padding-bottom: var(--spacing-xs);
+    margin-bottom: var(--spacing-xs);
+}
+
+.stats__section-body {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.stats__row {
+    display: flex;
+    justify-content: space-between;
+    font-size: var(--font-size-sm);
+    padding: 3px 0;
+}
+
+.stats__label {
+    color: #333;
+}
+
+.stats__value {
+    font-weight: 600;
+    color: #000;
+}
+
+.stats__loading {
+    font-size: var(--font-size-sm);
+    color: #333;
+    text-align: center;
+    padding: var(--spacing-sm) 0;
+}
 
 /* ============================================
    UTILITIES
@@ -626,7 +730,7 @@ body {
     flex: 1;
     padding: var(--spacing-sm);
     background: var(--color-surface);
-    border: 1px solid var(--color-surface-light);
+    border: 1px solid var(--color-surface);
     color: var(--color-text);
     cursor: pointer;
     font-size: var(--font-size-sm);
@@ -709,9 +813,10 @@ body {
 /* ============================================
    GAME ROOM WINDOW
    ============================================ */
+
 .gameroom-window {
-    width: 600px;
+    width: 800px;
-    height: 800px;
+    height: 900px;
 }
 
 .gameroom__tabs {
@@ -1019,3 +1124,4 @@ body {
 .gameroom__game-buttons .btn {
     flex: 1;
 }
+

Transcendence/srcs/frontend/src/game/game.html

@@ -3,14 +3,24 @@
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<title>Lobby</title>
+		<title>Skkribl.io</title>
+		<link rel="stylesheet" href="doodle.css">
 		<link rel="stylesheet" href="game.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" />
+
+		<script src="doodle.js" defer></script>
+		<script type="module" src="../app.js"></script>
 	</head>
 	<body>
-		<h1 class="title">Lobby</h1>
+		<h1 class="title">
+		  <span>L</span>
+		  <span>o</span>
+		  <span>b</span>
+		  <span>b</span>
+		  <span>y</span>
+		</h1>
 
 		<nav class="menu" aria-label="Menu principal">
 			<button class="menu__item" data-action="login" aria-label="Login">Login</button>
@@ -29,6 +39,5 @@
     </div>
 
 
-		<script type="module" src="../app.js"></script>
 	</body>
 </html>

Transcendence/srcs/frontend/src/game2/game.html

@@ -1,43 +0,0 @@
-<!doctype html>
-<html lang="fr">
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<title>Lobby</title>
-		<link rel="stylesheet" href="doodle.css">
-		<link rel="stylesheet" href="game.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" /> -->
-
-		<script src="doodle.js" defer></script>
-		<script type="module" src="../trans/app.js"></script>
-	</head>
-	<body>
-		<h1 class="title">
-		  <span>L</span>
-		  <span>o</span>
-		  <span>b</span>
-		  <span>b</span>
-		  <span>y</span>
-		</h1>
-
-		<nav class="menu" aria-label="Menu principal">
-			<button class="menu__item" data-action="login" aria-label="Login">Login</button>
-			<button class="menu__item" data-action="chat" aria-label="Global chat">Global chat</button>
-			<button class="menu__item" data-action="avatar" aria-label="Avatar">Avatar</button>
-			<button class="menu__item" data-action="friends" aria-label="Amis">Amis</button>
-		</nav>
-
-		<nav class="game" aria-label="Game">
-			<button class="game__item" data-action="Home page" aria-label="Home Page"
-			onclick="window.location.href='index.html'">Home Page</button>
-		</nav>
-
-    <div class="page" aria-label="Page">
-      <button class="page__item" data-action="gameroom" aria-label="Game Rooms">Game Rooms</button>
-    </div>
-
-
-	</body>
-</html>

Transcendence/srcs/frontend/src/index.css

@@ -1,44 +1,837 @@
+/* ============================================
+   TRANSCENDENCE - Main Stylesheet
+   Convention: BEM (Block__Element--Modifier)
+   ============================================ */
 
-
+/* ============================================
-/* ///////////////////////////////////////////////////////// */
+   CSS VARIABLES
+   ============================================ */
 :root {
-	--custom-value: hello;
+    --color-primary: #ffc75e;
+    --color-primary-hover: #ffc75e;
+    --color-success: #3cff01;
+    --color-success-dark: #ffc75e;
+    --color-error: #ff4d4d;
+    --color-warning: #ffc75e;
+    --color-github: #ffc75e;
+
+    --color-bg: #ffe5b5;
 
     --app-background-base: radial-gradient(
         circle at top,
-        #000000,
+        #fff787,
-        #4d4d4d
+        #ff8080
     );
 
     --app-background-image: url("./assets/background.png");
-    --num-value: 10px;
+
-	--black: #000000;
+    --color-surface: #ffefce;
+    --color-surface-light: #ffc75e;
+    --color-text: #000000;
+    --color-text-muted: #000000;
+
+    --font-size-base: 10px;
+    --font-size-sm: 1.2rem;
+    --font-size-md: 1.4rem;
+    --font-size-lg: 1.6rem;
+    --font-size-xl: 3rem;
+
+    --spacing-xs: 4px;
+    --spacing-sm: 8px;
+    --spacing-md: 12px;
+    --spacing-lg: 16px;
+    --spacing-xl: 24px;
+
+    --radius-sm: 4px;
+    --radius-md: 6px;
+    --radius-lg: 12px;
+    --radius-full: 50%;
+
+    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
+    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5);
+    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
+
+    --transition-fast: 150ms ease;
+    --transition-normal: 250ms ease;
+    
+    --z-menu: 2;
+    --z-window: 100;
+    --z-modal: 200;
+}
+
+/* ============================================
+   RESET & BASE
+   ============================================ */
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+html {
+    height: 100%;
+    background-image: var(--app-background-image), var(--app-background-base);
+
+    /* Make background image responsive but limited in size */
+    background-size: clamp(400px, 100%, 800px) auto, cover;
+
+    /* Align image to the top, gradient stays centered */
+    background-position: center 35%, center;
+
+    background-repeat: no-repeat, no-repeat;
+}
+
+/* html {
+    height: 100%;
+    background-image:
+        var(--app-background-image),
+        var(--app-background-base);
+
+    background-size:
+        80%,
+        cover;
+
+    background-position:
+        50% 20%,
+        center;
+
+    background-repeat:
+        no-repeat,
+        no-repeat;
+} */
+
+body {
+    margin: 0 auto;
+    width: 70%;
+    min-width: 800px;
+
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh; /* KEY */
+}
+
+/* ============================================
+   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: "Roboto";
+    letter-spacing: -10px;
+    color: rgba(248, 252, 2, 0.6);
+
+    margin: 0;
+    padding: 0.6rem 1.2rem;
+
+    background-color: #ffefce;
+    border: 2px solid rgba(0, 0, 0, 0.6);
+    border-radius: var(--radius-lg);
+}
+
+
+/* ============================================
+   MENU
+   ============================================ */
+
+.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);
+    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;
+}
+
+.menu__item:hover {
+    background: var(--color-surface-light);
+    font-size: var(--font-size-lg);
+}
+
+.menu__item--active {
+    background: var(--color-primary);
+    border-color: var(--color-primary);
+}
+
+/* ============================================
+   GAME
+   ============================================ */
+
+/* .game {
+    position: fixed;
+    top: 0;
+    right: 50px;
+    padding: 0;
+    margin: 0;
+    z-index: var(--z-menu);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xs);
+} */
+
+.game {
+    position: fixed;
+    top: var(--spacing-lg);
+    right: 50px;
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-lg);
+
+    z-index: var(--z-menu);
+}
+
+.game__item {
+    background: var(--color-surface);
+    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;
+}
+
+.game__item:hover {
+    background: var(--color-surface-light);
+    font-size: var(--font-size-lg);
+}
+
+.game__item--active {
+    background: var(--color-primary);
+    border-color: var(--color-primary);
 }
 
 /* ///////////////////////////////////////////////////////// */
-*, *::before, *::after {
-
 
+footer {
+    margin-top: auto; /* pushes footer to bottom */
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
 }
 
-body {
+.footer_div {
+    display: flex;
+    justify-content: center;
+    gap: 30%; /* space between items */
+    padding: 10px 0;
+}
 
-  line-height: 1.5; /* inherited */
+.footer_grid {
-  word-spacing: 1.4px; /* inherited */
+    display: grid;
-  font-size: 20px;
+    grid-template-columns: repeat(3, 1fr);
-  font-family: 'Times New Roman', serif; /* inherited */
+    justify-items: center; /* center each column */
-  color: var(--black); /* inherited */
+    align-items: center;
-  text-align: center;
+    gap: 10px 60px; /* row gap / column gap */
-  color: #696969;
+}
 
-  
+.ico_footer {
-  margin: 0;
+    width: 25%;
-  padding: 0;
+}
-  background-color: var(--black);
+
-  display: flex;
+a {
-  flex-direction: column;
+    text-decoration: none;
-  justify-content: center;
+    color: #000000;
-  align-items: center;
+}
+a:hover {
+    color: rgb(218, 145, 12);
+}
+
+.legal {
+    margin-top: 5%;
+    padding-bottom: 5%;
+    text-align: center;
+    display: block;
+    color: #000000;
+}
+
+.legal:hover {
+    color: rgb(218, 145, 12);
+}
+
+/* ///////////////////////////////////////////////////////// */
+
+/* ============================================
+   BUTTONS
+   ============================================ */
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--spacing-sm) var(--spacing-md);
+    font-size: var(--font-size-md);
+    font-weight: 500;
+    border: none;
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    text-decoration: none;
+}
+
+.btn:hover {
+    opacity: 0.9;
+    transform: translateY(-1px);
+}
+
+.btn:active {
+    transform: translateY(0);
+}
+
+.btn--primary {
+    background: var(--color-primary);
+    color: var(--color-text);
+}
+
+.btn--primary:hover {
+    background: var(--color-primary-hover);
+}
+
+.btn--secondary {
+    background: var(--color-surface-light);
+    color: var(--color-text);
+}
+
+.btn--success {
+    background: var(--color-success-dark);
+    color: var(--color-text);
+}
+
+.btn--danger {
+    background: var(--color-error);
+    color: var(--color-text);
+}
+
+.btn--github {
+    background: var(--color-github);
+    color: var(--color-text);
+}
+
+.btn--ghost {
+    background: transparent;
+    color: var(--color-text);
+    border: 1px solid var(--color-surface-light);
+}
+
+/* ============================================
+   INPUTS
+   ============================================ */
+.input {
+    width: 100%;
+    padding: var(--spacing-sm) var(--spacing-md);
+    font-size: var(--font-size-md);
+    background: var(--color-surface);
+    color: var(--color-text);
+    border: 1px solid var(--color-surface-light);
+    border-radius: var(--radius-md);
+    transition: border-color var(--transition-fast);
+}
+
+.input:focus {
+    outline: none;
+    border-color: var(--color-primary);
+}
+
+.input::placeholder {
+    color: var(--color-text-muted);
+}
+
+.input-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-sm);
+}
+
+/* ============================================
+   WINDOWS
+   ============================================ */
+.window {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: var(--color-bg);
+    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 {
+    display: flex;
+}
+
+.window--left {
+    left: 25%;
+}
+
+.window--right {
+    left: 75%;
+}
+
+.window__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--spacing-sm) var(--spacing-md);
+    background: var(--color-surface);
+    cursor: move;
+    user-select: none;
+}
+
+.window__title {
+    font-weight: 500;
+    font-size: var(--font-size-md);
+}
+
+.window__close {
+    cursor: pointer;
+    font-size: var(--font-size-lg);
+    opacity: 0.8;
+    transition: opacity var(--transition-fast);
+    background: none;
+    border: none;
+    color: var(--color-text);
+    padding: 0;
+    line-height: 1;
+}
+
+.window__close:hover {
+    opacity: 1;
+}
+
+.window__body {
+    padding: var(--spacing-md);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-sm);
+    flex: 1;
+    overflow: auto;
+}
+
+/* ============================================
+   MESSAGES
+   ============================================ */
+.message {
+    font-size: var(--font-size-sm);
+    padding: var(--spacing-xs);
+    border-radius: var(--radius-lg);
+    border-color: #000;
+}
+
+.message--success {
+    color: var(--color-success);
+}
+
+.message--error {
+    color: var(--color-error);
+}
+
+.message--info {
+    color: var(--color-text-muted);
+}
+
+/* ============================================
+   LOGIN WINDOW
+   ============================================ */
+.login {
+    width: 320px;
+}
+
+.login__form {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-sm);
+}
+
+.login__actions {
+    display: flex;
+    gap: var(--spacing-sm);
+    margin-top: var(--spacing-xs);
+}
+
+.login__divider {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    color: var(--color-text-muted);
+    font-size: var(--font-size-sm);
+    margin: var(--spacing-sm) 0;
+}
+
+.login__divider::before,
+.login__divider::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background: var(--color-surface-light);
+}
+
+/* ============================================
+   CHAT WINDOW
+   ============================================ */
+.chat {
+    width: 380px;
+    height: 400px;
+}
+
+.chat__output {
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--spacing-sm);
+    background: var(--color-surface);
+    border-radius: var(--radius-md);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-sm);
+    min-height: 150px;
+}
+
+.chat__message {
+    padding: var(--spacing-xs) var(--spacing-sm);
+    background: var(--color-surface-light);
+    border-radius: var(--radius-sm);
+    font-size: var(--font-size-sm);
+}
+
+.chat__message--own {
+    background: var(--color-primary);
+    align-self: flex-end;
+}
+
+.chat__friend-indicator {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    background-color: var(--color-success);
+    border-radius: 50%;
+    margin-right: var(--spacing-xs);
+    vertical-align: middle;
+}
+
+.chat__system {
+    color: var(--color-text-muted);
+    font-size: var(--font-size-sm);
+    font-style: italic;
+    text-align: center;
+}
+
+.chat__system--error {
+    color: var(--color-error);
+}
+
+.chat__system--success {
+    color: var(--color-success);
+}
+
+.chat__input-container {
+    display: flex;
+    gap: var(--spacing-sm);
+    margin-top: var(--spacing-sm);
+}
+
+.chat__input {
+    flex: 1;
+}
+
+.chat__controls {
+    display: flex;
+    gap: var(--spacing-sm);
+    margin-top: var(--spacing-sm);
+}
+
+/* ============================================
+   AVATAR WINDOW
+   ============================================ */
+.avatar-window {
+    width: 360px;
+}
+
+.avatar__preview {
+    width: 120px;
+    height: 120px;
+    object-fit: cover;
+    border-radius: var(--radius-full);
+    border: 3px solid var(--color-text);
+    box-shadow: var(--shadow-md);
+    background: var(--color-surface);
+    align-self: center;
+}
+
+.avatar__username {
+    font-size: var(--font-size-lg);
+    font-weight: 600;
+    text-align: center;
+    color: var(--color-text);
+    margin-top: var(--spacing-sm);
+}
+
+.avatar__controls {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-sm);
+    align-items: center;
+}
+
+.avatar__file-input {
+    display: none;
+}
+
+/* ============================================
+   STATS WINDOW
+   ============================================ */
+.stats-window {
+    width: 320px;
+}
+
+.stats__avatar {
+    width: 72px;
+    height: 72px;
+    object-fit: cover;
+    border-radius: var(--radius-full);
+    border: 2px solid var(--color-text);
+    align-self: center;
+    display: block;
+    margin: 0 auto var(--spacing-xs);
+}
+
+.stats__username {
+    font-size: var(--font-size-lg);
+    font-weight: 600;
+    text-align: center;
+    color: #000;
+    margin-bottom: var(--spacing-md);
+}
+
+.stats__section {
+    margin-bottom: var(--spacing-md);
+}
+
+.stats__section-title {
+    font-size: var(--font-size-sm);
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--color-primary);
+    border-bottom: 1px solid var(--color-surface-light);
+    padding-bottom: var(--spacing-xs);
+    margin-bottom: var(--spacing-xs);
+}
+
+.stats__section-body {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.stats__row {
+    display: flex;
+    justify-content: space-between;
+    font-size: var(--font-size-sm);
+    padding: 3px 0;
+}
+
+.stats__label {
+    color: #333;
+}
+
+.stats__value {
+    font-weight: 600;
+    color: #000;
+}
+
+.stats__loading {
+    font-size: var(--font-size-sm);
+    color: #333;
+    text-align: center;
+    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
+   ============================================ */
+.hidden {
+    display: none !important;
+}
+
+.visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+}
+
+.text-center {
+    text-align: center;
+}
+
+.flex-center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* ============================================
+   FRIENDS WINDOW
+   ============================================ */
+.friends-window {
+    width: 400px;
+    height: 450px;
+}
+
+.friends__tabs {
+    display: flex;
+    gap: var(--spacing-xs);
+    margin-bottom: var(--spacing-sm);
+}
+
+.friends__tab {
+    flex: 1;
+    padding: var(--spacing-sm);
+    background: var(--color-surface);
+    border: 1px solid var(--color-surface-light);
+    color: var(--color-text);
+    cursor: pointer;
+    font-size: var(--font-size-sm);
+    transition: all var(--transition-fast);
+}
+
+.friends__tab:hover {
+    background: var(--color-surface-light);
+}
+
+.friends__tab--active {
+    background: var(--color-primary);
+    border-color: var(--color-primary);
+}
+
+.friends__content {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow: hidden;
+}
+
+.friends__search {
+    display: flex;
+    gap: var(--spacing-sm);
+    margin-bottom: var(--spacing-sm);
+}
+
+.friends__search .input {
+    flex: 1;
+}
+
+.friends__list {
+    flex: 1;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-sm);
+}
+
+.friends__item {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    padding: var(--spacing-sm);
+    background: var(--color-surface);
+    border-radius: var(--radius-md);
+}
+
+.friends__avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: var(--radius-full);
+    object-fit: cover;
+    border: 2px solid var(--color-surface-light);
+}
+
+.friends__name {
+    flex: 1;
+    font-size: var(--font-size-md);
+    font-weight: 500;
+}
+
+.friends__actions {
+    display: flex;
+    gap: var(--spacing-xs);
+}
+
+.friends__actions .btn {
+    padding: var(--spacing-xs) var(--spacing-sm);
+    font-size: var(--font-size-sm);
+}
+
+.friends__empty {
+    text-align: center;
+    color: var(--color-text-muted);
+    padding: var(--spacing-lg);
 }
 
 .container-1 {
@@ -79,79 +872,3 @@ body {
     background-color: rgb(202, 135, 10);
     color: black;
 }
-
-/* ///////////////////////////////////////////////////////// */
-.button-trans {
-/* SIZE */
-	position: absolute;
-	left: 50%;
-	transform: translateX(-50%);
-
-	width: 500px;
-	height: 200px;
-
-/* TEXT */
-	font-family: "Roboto";
-	font-size: 62px;
-    letter-spacing: -10px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
-/* Background */
-	background-image: url("./assets/background.png");
-	background-position: center;
-	background-repeat: no-repeat;
-	background-size: 150%;
-/* Borders */
-	border-radius: 20px;
-	border-radius: 20px;
-	border: 5px solid transparent; /* keep space for the shadow */
-	background-clip: padding-box;
-	/* metallic effect */
-	box-shadow:
-		0 0 0 5px #c0c0c0 inset,          /* inner shine */
-		0 0 0 2px rgba(255,255,255,0.3) inset; /* subtle highlight */
-	
-/* OTHER */
-	cursor: pointer;
-	transition: transform 0.3s ease, box-shadow 0.3s ease;
-}
-
-.button-trans:hover {
-  transform: translateX(-50%) scale(1.02);
-  box-shadow:
-    0 0 20px 5px #fff inset,
-    0 0 20px 5px rgba(255,255,255,0.3) inset;
-}
-
-/* ///////////////////////////////////////////////////////// */
-.button-test {
-	margin-right: auto;
-	margin-left: 20px;
-}
-
-/* ///////////////////////////////////////////////////////// */
-.footer_div {
-    display: flex;
-    justify-content: space-around;
-    /* padding: 20px; */
-    /* margin-top: 80px;
-    margin-bottom: 100px; */
-}
-
-.ico_footer {
-    text-align: center;
-    width: 25px;
-    vertical-align: top;
-    /* padding-right: 5px; */
-}
-a {
-    text-decoration: none;
-    color: #5c5c5c;
-}
-a:hover {
-    color: rgb(218, 145, 12);
-}
-
-/* ///////////////////////////////////////////////////////// */

Transcendence/srcs/frontend/src/index.html

@@ -1,54 +1,50 @@
-<!DOCTYPE html>
+<!doctype html>
-<head>
+<html lang="fr">
-	<link rel="stylesheet" href="./index.css" />
+	<head>
-	<script type="module" src="./index.js"></script>
+		<meta charset="utf-8" />
-</head>
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
-<body>
+		<title>Transcendence</title>
-
+		<link rel="stylesheet" href="index.css" />
-	<div id="header-1" class="container-1" 
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
-		style="">
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-		<div id="button-test" class="button-1 button-test multicolor" onclick="window.location.href = 'test/index.html';">TEST</div>
+		<link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&display=swap" rel="stylesheet" />
-		<div id="button-trans" class="button-trans multicolor">TRANSCENDENCE</div>
+	</head>
-	</div>
+	<body>
-
+		<h1 class="title">Transcendence</h1>
-	<img id="wiskas" style="margin: auto; display: block;" src="webcat/web_cat_img/wiskas-the-third.jpg">
+
-
+		<nav class="menu" aria-label="Menu principal">
-	<section style="display: flex;
+			<button class="menu__item" data-action="login" aria-label="Login">Login</button>
-			justify-content: center;
+			<button class="menu__item" data-action="chat" aria-label="Global chat">Global chat</button>
-			width: 1000px;
+			<button class="menu__item" data-action="avatar" aria-label="Avatar">Avatar</button>
-			margin: 0 auto;">
+			<button class="menu__item" data-action="friends" aria-label="Amis">Amis</button>
-		<p>I, am wiskas-the-third,
+			<button class="menu__item" data-action="logout" aria-label="Logout">Logout</button>
-			We are the  cat company, we  dont need to present our self for you already know
+		</nav>
-			who we are, we created the internet, and we are still managing it now<br>
+
-			We at CAT are the admin, creator, and workers of the internet
+		<nav class="game" aria-label="Game">
-			Everytime a  human goes to sleep, a cat start its shift, 1 billion pair of whiskers that are always here for you
+			<button class="game__item" data-action="new_game" aria-label="Skkrrribl.io"
-			Why? because we are philantropists, dont question it. Our goals are beyond your understanding
+			onclick="window.location.href='./game/game.html'">Skkrrribl.io</button>
-			the internet was created by us, for us, and you should be glad we allow you to use it.
+			<button class="game__item" data-action="tetris" aria-label="Tetris"
-		</p>
+			onclick="window.location.href='./tetris/tetris.html'">Tetris</button>
-	</section>
+			<button class="game__item" data-action="Wiskas" aria-label="Wiskas"
-
+			onclick="window.location.href='./wiskas/wiskas.html'">Wiskas</button>
-	<section style="display: flex;">
+		</nav>
-		<button style="margin-right: 50px;" class="button-1 multicolor" onclick="window.location.href = 'webcat/biblio.html';">
+		
-			Latest News</button><br>
+		<script type="module" src="./app.js"></script>
-		<button style="margin-left: 50px;" class="button-1 multicolor" onclick="window.location.href = 'webcat/staff/staff.html';">
+		<script type="module" src="./script.js"></script>
-			meet the staff</button><br>
+
-	</section>
+		<footer>
-
+    <div class="footer_grid">
-	<footer>
+        <img class="ico_footer" src="./assets/facebook_logo.png">
-		<br><br><br>
+        <img class="ico_footer" src="./assets/insta_logo.png">
-		<div class="footer_div" style="margin-top: 100px;">
+        <img class="ico_footer" src="./assets/twitter_logo.png">
-			<img class="ico_footer" src="webcat/web_cat_img/facebook_logo.png">
+
-			<img class="ico_footer" src="webcat/web_cat_img/insta_logo.png">
+        <a href="https://www.facebook.com/">MIAOUBOOK</a>
-			<img class="ico_footer" src="webcat/web_cat_img/twitter_logo.png">
+        <a href="https://www.instagram.com/">INSTAMIAOU</a>
-		</div>
+        <a href="https://twitter.com/">BLUE-SNACK</a>
-		<div class="footer_div" style="margin-bottom: 50px;">
+    </div>
-			<a href="https://www.facebook.com/">MIAOUBOOK</a>
+
-			<a href="https://www.instagram.com/">INSTAMIA</a>
+    <a href="./mentions/mentions_legales.html" class="legal">LEGAL NOTICES</a>
-			<a href="https://twitter.com/">BLUE-SNACK</a>
+</footer>
-		</div>
+
-		<a href="./webcat/ml/mentions_legales.html">- LEGAL NOTICES -<br>(boring stuff, really, dont go look into this, i mean we are obligated to include it, but it will bore you, like, really)
+	</body>
-		<br>Dont do it! every seconds you spend in this next page, a kitten dies. so dont</a>
+	</html>
-	</footer>
-
-</body>
-</html>

Transcendence/srcs/frontend/src/index.js

@@ -1,54 +0,0 @@
-import { updateElement } from "./test/tools.js";
-import { colorizeText } from "./tools.js";
-
-// //////////////////////////////////////////]
-let div2 = document.createElement('div')
-document.body.append(div2)
-let button1 = document.createElement('button')
-div2.append(button1)
-button1.textContent = 'game-lobby'
-button1.addEventListener('click', () => {
-	window.location.href = './game2/game.html';
-})
-let button2 = document.createElement('button')
-div2.append(button2)
-button2.textContent = 'tetris'
-button2.addEventListener('click', () => {
-	window.location.href = './tetris/tetris.html';
-})
-
-let button4 = document.createElement('button')
-div2.append(button4)
-button4.textContent = 'test'
-button4.addEventListener('click', () => {
-	window.location.href = './test/index.html';
-})
-let img = document.getElementById('wiskas');
-img.before(div2)
-
-// apply multicolor to .multicolor
-colorizeText();
-
-
-/* ///////////////////////////////////////////////////////// */
-// make transcendence button move via: .button-trans
-function updateButtonTranscendence(move) {
-
-	const btn = document.querySelector('.button-trans');
-	btn.addEventListener('mousemove', e => {
-		const rect = btn.getBoundingClientRect();
-		const x = ((e.clientX - rect.left) / rect.width - 0.5) * move;
-		const y = ((e.clientY - rect.top) / rect.height - 0.5) * move;
-		btn.style.backgroundPosition = `calc(50% + ${x}px) calc(50% + ${y}px)`;
-	});
-
-	btn.addEventListener('mouseleave', () => {
-		btn.style.backgroundPosition = 'center';
-	});
-
-	btn.addEventListener('click', () => {
-		window.location.href = './trans/index2.html';
-	});
-}
-/* ///////////////////////////////////////////////////////// */
-updateButtonTranscendence(100);

Transcendence/srcs/frontend/src/mentions/mentions_legales.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Legal Notices</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #fff8e1;
+            color: #333;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            margin: 0;
+            padding: 20px;
+            text-align: center;
+        }
+        .legal {
+            max-width: 600px;
+            font-size: 0.9rem;
+            line-height: 1.5;
+            border: 1px solid #ccc;
+            padding: 20px;
+            border-radius: 8px;
+            background-color: #fff;
+            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
+            margin-bottom: 20px;
+        }
+        .btn-home {
+            padding: 10px 20px;
+            background-color: #ffc75e;
+            color: #000;
+            border: none;
+            border-radius: 6px;
+            font-size: 1rem;
+            cursor: pointer;
+            text-decoration: none;
+            transition: all 0.3s ease;
+        }
+        .btn-home:hover {
+            background-color: #ffb347;
+        }
+    </style>
+</head>
+<body>
+    <div class="legal">
+        <strong>Legal Notices</strong><br><br>
+        All user credentials are securely stored using hashed passwords. We respect your privacy and do not share your personal information with third parties. By using this site, you agree to our data handling practices.
+    </div>
+    <a href="../index.html" class="btn-home">Back to Home</a>
+</body>
+</html>

Transcendence/srcs/frontend/src/notes.css

@@ -1,188 +0,0 @@
-.test {/* =======================
-	🎨 COLORS & BACKGROUND
-	======================= */
-	color: red;
-	background-color: blue;
-	background-image: url(img.jpg);
-	background-size: cover;
-	background-position: center;
-	background-repeat: no-repeat;
-	opacity: 0.5;
-
-	/* =======================
-	📏 SIZE & SPACING
-	======================= */
-	width: 200px;
-	height: 100px;
-	min-width: 100px;
-	max-width: 500px;
-	padding: 10px;
-	margin: 20px;
-	box-sizing: border-box;
-
-	/* shorthand */
-	margin: 10px 20px;        /* top/bottom left/right */
-	padding: 10px 20px 5px 0; /* top right bottom left */
-
-	/* =======================
-	📍 POSITIONING
-	======================= */
-	position: static;
-	position: relative;
-	position: absolute;
-	position: fixed;
-	position: sticky;
-
-	top: 10px;
-	left: 20px;
-	right: 0;
-	bottom: 0;
-
-	z-index: 10;
-
-	/* =======================
-	📦 DISPLAY & LAYOUT
-	======================= */
-	display: block;
-	display: inline;
-	display: inline-block;
-	display: none;
-	display: flex; /* children can be controled with: justify-content (horizontal) / align-items (vertical) */
-	display: grid;
-
-	/* =======================
-	🔧 FLEXBOX
-	======================= */
-	display: flex;
-	flex-direction: row;          /* row | column */
-	justify-content: center;      /* main axis */
-	align-items: center;          /* cross axis */
-	gap: 10px;
-
-	/* common */
-	justify-content: space-between;
-	justify-content: space-around;
-	justify-content: space-evenly;
-
-	/* =======================
-	🧱 GRID
-	======================= */
-	display: grid;
-	grid-template-columns: 1fr 1fr 1fr;
-	grid-template-rows: auto;
-	gap: 10px;
-
-	/* =======================
-	🔤 TEXT & FONT
-	======================= */
-	font-size: 16px;
-	font-weight: bold;
-	font-family: Arial, sans-serif;
-
-	text-align: center;
-	text-decoration: underline;
-	text-transform: uppercase;
-
-	line-height: 1.5;
-	letter-spacing: 2px;
-
-	/* =======================
-	🟦 BORDER & OUTLINE
-	======================= */
-	border: 1px solid black;
-	border-width: 2px;
-	border-style: dashed;
-	border-color: red;
-
-	border-radius: 10px;
-
-	outline: 2px solid blue;
-
-	/* =======================
-	👁️ VISIBILITY
-	======================= */
-	display: none;
-	visibility: hidden;
-
-	overflow: hidden;
-	overflow: scroll;
-	overflow: auto;
-
-	/* =======================
-	🎬 TRANSITIONS & EFFECTS
-	======================= */
-	transition: all 0.3s ease;
-
-	transform: translateX(50px);
-	transform: rotate(45deg);
-	transform: scale(1.1);
-}
-
-/* hover example */
-:hover {
-transform: scale(1.1);
-}
-/* =======================
-   🧠 SELECTORS
-======================= */
-
-/* basic */
-div {}            /* tag */
-.class {}         /* class */
-#id {}            /* id */
-* {}              /* all elements */
-
-/* grouping */
-div, p, span {}   /* multiple selectors */
-
-/* combinators */
-div p {}          /* any descendant */
-div > p {}        /* direct child */
-div + p {}        /* next sibling */
-div ~ p {}        /* all following siblings */
-
-/* attribute selectors */
-input[type="text"] {}
-a[href] {}
-button[class*="btn"] {}   /* contains */
-button[class^="btn"] {}   /* starts with */
-button[class$="btn"] {}   /* ends with */
-
-/* pseudo-classes (state) */
-button:hover {}
-input:focus {}
-a:active {}
-a:visited {}
-input:checked {}
-:nth-child(2) {}
-:nth-child(odd) {}
-:nth-child(even) {}
-:not(.active) {}
-
-/* pseudo-elements (virtual parts) */
-::before {}
-::after {}
-::placeholder {}
-::first-letter {}
-::first-line {}
-
-/* combined examples */
-button.primary:hover {}
-div#main.content {}
-ul li:first-child {}
-input:focus::placeholder {}
-
-/* universal + pseudo */
-*::before {}
-*::after {}
-
-/* =======================
-⚡ SHORTHANDS
-======================= */
-.test2 {
-	background: red url(img.jpg) no-repeat center/cover;
-	border: 2px solid black;
-	font: bold 16px Arial;
-	margin: 10px 20px;
-	padding: 5px 10px;
-}

Transcendence/srcs/frontend/src/notes.js

@@ -1,123 +0,0 @@
-// SIZE
-box.style.width = "200px";
-box.style.height = "100px";
-box.style.minWidth = "100px";
-box.style.maxWidth = "500px";
-
-{
-	display: "flex"           // flex | inline-flex | block | inline | none
-	justifyContent: "flex-start"    // flex-start | flex-end | center | space-between | space-around | space-evenly
-	alignItems: "stretch"     // stretch | flex-start | flex-end | center | baseline
-}
-
-
-
-// POSITION
-box.style.position = "absolute";
-box.style.top = "50px";
-box.style.left = "100px";
-box.style.right = "20px";
-box.style.bottom = "10px";
-box.style.zIndex = "10";
-
-// SPACING
-box.style.margin = "10px";
-box.style.padding = "20px";
-box.style.marginTop = "10px";
-box.style.paddingLeft = "5px";
-
-// BACKGROUND & COLORS
-box.style.background = "red";
-box.style.backgroundColor = "blue";
-box.style.color = "white";
-
-// BORDER
-box.style.border = "2px solid black";
-box.style.borderRadius = "10px";
-
-// TEXT
-box.style.fontSize = "20px";
-box.style.fontWeight = "bold";
-box.style.textAlign = "center";
-
-// DISPLAY & VISIBILITY
-box.style.display = "block";
-box.style.visibility = "visible";
-box.style.opacity = "0.5";
-
-// TRANSFORM
-box.style.transform = "translateX(100px)";
-box.style.transform = "translate(50px, 20px)";
-box.style.transform = "scale(1.5)";
-box.style.transform = "rotate(45deg)";
-box.style.transform = "translateX(100px) scale(2)";
-
-// ANIMATION & TRANSITION
-box.style.transition = "all 0.3s ease";
-box.style.animation = "move 2s linear";
-
-// INTERACTION
-box.style.cursor = "pointer";
-box.style.pointerEvents = "none";
-// /////////////////////////////////////////////////////>
-// /////////////////////////////////////////////////////>
-// CONTENT
-el.textContent = "Hello";          // plain text
-el.innerHTML = "<b>Hello</b>";     // HTML content
-el.innerText = "Hello";            // like textContent but respects line breaks
-
-// ATTRIBUTES
-el.id = "myDiv";                   // element ID
-el.className = "box highlight";    // full class string
-el.classList.add("active");        // add a class
-el.classList.remove("hidden");     // remove a class
-el.classList.toggle("open");       // toggle a class
-el.title = "Tooltip text";         // title attribute
-el.value = "42";                   // input value
-el.src = "image.png";              // img, video, audio src
-el.href = "https://example.com";   // anchor href
-el.alt = "alternative text";       // img alt
-
-// DOM STRUCTURE
-el.appendChild(child);             // add child
-el.append(child1, child2);         // add multiple children
-el.prepend(child);                 // add at start
-el.remove();                        // remove self
-el.replaceWith(newEl);              // replace element
-el.cloneNode(true);                 // copy element (deep if true)
-
-// DATA & CUSTOM
-el.dataset.id = "123";             // data-id attribute
-el.dataset.name = "box1";          // data-name attribute
-
-// EVENTS
-el.onclick = () => {};              // direct event assignment
-el.onmouseover = () => {};
-el.addEventListener("click", () => {});   // preferred
-el.removeEventListener("click", handler);
-
-// VISIBILITY & FOCUS
-el.hidden = true;                   // hides element
-el.focus();                         // focus element
-el.blur();                          // remove focus
-el.tabIndex = 0;                     // make element focusable
-
-// DIMENSIONS & POSITION (read-only or get)
-el.clientWidth;
-el.clientHeight;
-el.offsetWidth;
-el.offsetHeight;
-el.offsetTop;
-el.offsetLeft;
-el.scrollWidth;
-el.scrollHeight;
-el.scrollTop;
-el.scrollLeft;
-
-// OTHER
-el.checked = true;                  // checkbox / radio
-el.selected = true;                 // option element
-el.disabled = true;                 // input/button
-el.readOnly = true;                 // input/textarea
-el.name = "username";               // input / form element
-el.type = "text";                   // input type

Transcendence/srcs/frontend/src/test/delamerde/a.js

@@ -1,55 +0,0 @@
-import fetch from 'node-fetch';
-import express, { response } from 'express';
-import cors from 'cors';
-
-const app = express();
-const PORT = 3000//process.env.PORT || 3000;
-
-app.use(express.json());
-app.use(cors());
-
-let token;
-async function set_token()
-{
-	fetch("https://api.intra.42.fr/oauth/token", {
-		method: "POST",
-		body: "grant_type=client_credentials&client_id=u-s4t2ud-c226cd35cd1ac08a4c6668deee1c64d7d67a13a766aee672acafd4a1522d483c&client_secret=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",
-		headers: {
-			"User-Agent": "agallon",
-			'Content-Type': 'application/x-www-form-urlencoded',}
-	})
-	.then(response => {
-		return response.json();
-	})
-	.then(data => {
-		token = data;
-		setTimeout(set_token, token.expires_in);
-	})
-	.catch(error => {
-        console.error('Error fetching token:', error);
-    });
-}
-set_token();
-
-app.get('/proxy/profile/:login', async (req, res) => {
-    const { login } = req.params;
-    const profileURL = `https://api.intra.42.fr/v2/users/${login}`;
-    try {
-        const response = await fetch(profileURL, {
-			headers: {
-				"Authorization": `Bearer ${token.access_token}`}});
-		console.log(`response.status =  ${response.status}`);
-		if (response.status !== 200) {
-			throw new Error('User not found');
-		}
-        const data =  await response.json();
-	    res.status(200).json(data);
-    } catch (error) {
-        console.error('Error fetching profile:', error);
-        res.status(500).json({ error: 'Failed to fetch profile' });
-    }
-});
-
-app.listen(PORT, () => {
-    console.log(`Proxy server running on port ${PORT}`);
-});

Transcendence/srcs/frontend/src/test/delamerde/header.js

@@ -1,26 +0,0 @@
-import {checkIfLoggedIn} from './tools.js';
-
-export class Header {
-    constructor() {
-        this.obj = document.createElement('div');
-        Object.assign(this.obj.style, {
-            
-        });
-        let play = document.createElement('span');
-        let title = document.createElement('span');
-        let login = document.createElement('span');
-
-        play.textContent = "PLAY";
-        if (checkIfLoggedIn())
-            title.textContent = "Welcome back you!";
-        else
-            title.textContent = "Welcome to CAT !";
-
-        this.obj.append(play);
-        this.obj.append(title);
-        this.obj.append(login);
-    }
-
-
-
-}

Transcendence/srcs/frontend/src/test/delamerde/popup.js

@@ -1,44 +0,0 @@
-export class Popup {
-
-    constructor(msg, parent = document.body) {
-        this.msg = msg;
-        this.parent = parent;
-        this.obj = document.createElement('span');
-        
-        this.obj.className = "popup";
-        this.obj.textContent = "";
-        this.obj.style.opacity = "0";
-        this.run();
-    }
-
-    async create() {
-        this.parent.appendChild(this.obj);
-    
-        this.obj.style.transition = "opacity 0.5s ease";
-        requestAnimationFrame(() => {
-            this.obj.style.opacity = "1";
-        });
-        await new Promise(r => setTimeout(r, 500));
-    }
-    async write(speed = 50) {
-        for (let i = 0; i < this.msg.length; i++) {
-            this.obj.textContent += this.msg[i];
-            await new Promise(r => setTimeout(r, speed));
-        }
-    }
-    async remove() {
-    
-        await new Promise(r => setTimeout(r, 2000));
-        this.obj.style.transition = "opacity 0.3s ease";
-        this.obj.style.opacity = "0";
-        await new Promise(r => setTimeout(r, 300));
-        if (this.obj.parentNode) {
-            this.obj.parentNode.removeChild(this.obj);
-        }
-    }
-    async run() {
-        await this.create();
-        await this.write();
-        await this.remove();
-    }
-}

Transcendence/srcs/frontend/src/test/delamerde/tools.js

@@ -1,9 +0,0 @@
-import { STORAGE_KEYS } from '../../core/config.js';
-
-export function checkIfLoggedIn() {
-    const token = localStorage.getItem(STORAGE_KEYS.AUTH_TOKEN);
-    if (token) {
-        return true;
-    }
-    return false;
-}

Transcendence/srcs/frontend/src/test/glowing_button.css

@@ -1,43 +0,0 @@
-
-/* ////////////////////////////////////////// */
-.box {
-	background: #142d4a;
-	height: 200px;
-	aspect-ratio: 1/1;
-	border-radius: 10px;
-	position: relative;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-
-@property --deg {
-	syntax: '<angle>';
-	inherits: true;
-	initial-value: 0deg;
-}
-
-.box::before,
-.box::after {
-	content: "";
-	position: absolute;
-	height: 100%;
-	width: 100%;
-	background: conic-gradient(
-		from var(--deg) at center,
-		#00c3ff,
-		#4d0199,
-		#6300c6,
-		#009dcd
-	);
-	border-radius: inherit;
-	z-index: -2;
-	padding: 2px;
-	animation: autoRotate 2s linear infinite;
-}
-.box::after {
-	filter: blur(10px);
-}
-@keyframes autoRotate {
-	to{ --deg: 360deg; }
-}

Transcendence/srcs/frontend/src/test/index.html

@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<head>
-	<link rel="stylesheet" href="../game2/game.css" />
-	<link rel="stylesheet" href="./style.css" />
-	<script type="module" src="./script.js"></script>
-</head>
-<body style="background-color: black; display: flex; justify-content: center; align-items: center;">
-<!-- 
-	<div class="container">
-	<div class="item item-1">Item 1</div>
-	<div class="item item-2">Item 2</div>
-	<div class="item item-3">Item 3</div>
-	</div> -->
-	<div></div>
-	<div class="box"></div>
-</body>
-</html>

Transcendence/srcs/frontend/src/test/script.js

@@ -1,17 +0,0 @@
-// import { LoginSidebar } from "./loginSidebar.js";
-import { Sidebar } from "./sidebar.js";
-import { updateElement } from "./tools.js";
-
-let b = updateElement({
-    classList: ['container2'],
-    additionalStyles: {
-        display: 'flex',
-        justifyContent: 'flex-end',
-        alignItems: 'center'
-    }
-});
-new Sidebar();
-// new LoginSidebar();
-
-
-// new Sidebar();

Transcendence/srcs/frontend/src/test/sidebar.js

@@ -1,93 +0,0 @@
-import { updateElement } from "./tools.js";
-
-import { windowRegistry } from '../core/windows.js';
-import { LoginWindow } from '../windows/login.js';
-import { LogoutWindow } from '../windows/logout.js';
-import { GlobalChat } from '../windows/global_chat.js';
-import { AvatarWindow } from '../windows/avatar.js';
-import { FriendsWindow } from '../windows/friends.js';
-import { GameRoomWindow } from '../windows/game_room.js';
-import { StatsWindow } from '../windows/stats.js';
-
-export class Sidebar {
-
-/* CONSTURCTOR */
-    constructor(parent = document.body) {
-        this.parent = parent;
-        this.stateopen = 'closed';
-        // this.state = this.checkIfLoggedIn() ? "loggedOut" : "loggedIn";
-
-        this.obj = updateElement({
-            parent: parent,
-        	id: `login-wrapper`,
-            classList: [ 'login-wrapper' ],
-        })
-        this.createAllButtons();
-
-		this.handleClickOutside = (event) => {
-			if (this.stateopen === 'open' && !this.obj.contains(event.target)) {
-				this.toggle();
-			}
-		};
-    }
-
-/* toogle menu open / closed */
-    toggle() {
-        this.stateopen = (this.stateopen === 'open') ? 'closed' : 'open';
-        console.log(this.stateopen);
-		if (this.stateopen === 'open') {
-			this.main_button.style.display = 'none';
-			this.menu_buttons.forEach(b => b.style.display = 'block');
-			// ensure only ONE listener exists
-			document.removeEventListener('click', this.handleClickOutside);
-			document.addEventListener('click', this.handleClickOutside);
-
-		}
-		else {
-			this.menu_buttons.forEach(b => b.style.display = 'none');
-			this.main_button.style.display = 'block';
-			document.removeEventListener('click', this.handleClickOutside);
-		}
-    }
-
-/* create all element, append to div */
-    createAllButtons() {
-	//	not-logged closed button
-        this.main_button = updateElement({
-        	id: `button-main`,
-            parent: this.obj,
-            textContent: 'LOGIN',
-            classList: [ 'login-button' ],
-        })
-		this.obj.append(this.main_button);
-        this.main_button.addEventListener('click', (e) => {
-			e.stopPropagation();
-            this.toggle();
-        })
-	
-	// menu buttons
-        const items = ['friends', 'chat', 'rooms', 'settings', 'log','logout'];
-        this.menu_buttons = [];
-
-        items.forEach(name => {
-            this[name] = updateElement({
-                id: `button-${name}`,
-                parent: this.obj,
-                textContent: name,
-                classList: ['login-button'],
-                additionalStyles: { display: 'none'}
-            })
-            this.menu_buttons.push(this[name]);
-			this.obj.append(this[name]);
-        })
-		this.loginWindow = new LoginWindow();
-		this.obj.append(this.loginWindow.form);
-		this.loginWindow.form.style.display = 'none';
-        this['log'].addEventListener('click', () => {
-			this.menu_buttons.forEach(b => b.style.display = 'none');
-            this.loginWindow.form.style.display = 'block';
-        })
-	// menu elements
-    }
-
-}

Transcendence/srcs/frontend/src/test/style.css

@@ -1,138 +0,0 @@
-/* BASE STYLES */
-:root {
-  --clr-dark: #0f172a;
-  --clr-light: #f1f5f9;
-  --clr-accent: #e11d48;
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-body {
-  margin: 0;
-  padding: 0;
-  line-height: 1.6; /* inherited */
-  word-spacing: 1.4px; /* inherited */
-  font-family: "Roboto", sans-serif; /* inherited */
-  color: var(--clr-dark); /* inherited */
-  background-color: var(--clr-light);
-  /* display: flex; */
-  /* justify-content: center; */
-  /* align-items: center; */
-  height: 100vh;
-  position: relative;
-}
-
-.container {
-  width: 80%;
-  height: 700px;
-  margin: 0 auto;
-  border: 10px solid var(--clr-dark);
-}
-
-.item {
-  width: 150px;
-  height: 150px;
-  background-color: #fb7185;
-  padding: 1em;
-  font-weight: 700;
-  color: var(--clr-light);
-  text-align: center;
-  border: 10px solid var(--clr-accent);
-  border-radius: 10px;
-
-  margin-left: -50px
-}
-
-/* END OF BASE STYLES */
-.item-1 {
-	font-size: 1.5rem;
-}
-.container {
-  display: flex;
-}
-
-
-.container2 {
-  margin: 0 auto;
-  border: 10px solid var(--clr-dark);
-}
-/*//////////////////////////////////////////////////////////*/
-
-
-.button {
-  padding: 10px 18px;
-  font-size: 14px;
-  font-family: inherit;
-
-  color: white;
-  background-color: #3b82f6; /* blue */
-
-  border: none;
-  border-radius: 8px;
-
-  cursor: pointer;
-
-  transition: all 0.2s ease;
-}
-.button:hover {
-  background-color: #2563eb;
-  transform: translateY(-1px);
-}
-.button:active {
-  transform: translateY(1px);
-  background-color: #1d4ed8;
-}
-.button:focus {
-  outline: none;
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4);
-}
-
-/*//////////////////////////////////////////////////////////*/
-.login-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 7px;
-
-  background-color: #3b82f6; /* blue */
-
-  padding-right: 75px;
-  padding-bottom: 25px;
-  padding-top: 25px;
-  position: fixed;
-  top: 0;
-  right: 0;
-}
-
-.loggin-button {
-  position: relative;
-  display: inline-block;
-  border: 5px solid blue;
-  height: 35px;
-  min-width: 50px;
-
-}
-/*//////////////////////////////////////////////////////////*/
-/* LOGIN */
-
-.login-button {
-  width: 150px;
-  height: 150px;
-  background-color: #fb7185;
-  padding: 1em;
-  font-weight: 700;
-  color: var(--clr-light);
-  text-align: center;
-  border: 10px solid var(--clr-accent);
-  border-radius: 10px;
-
-  margin-left: -50px
-
-}
-
-.login-element {
-
-}

Transcendence/srcs/frontend/src/test/tools.js

@@ -1,29 +0,0 @@
-
-export function updateElement({
-    el,                  // existing element or null to create new
-    parent = document.body,
-    id = null,
-    classList = [],      // object like { css - classes to add }
-    textContent = "",
-    additionalStyles = {} // object like { color: 'red', display: 'flex' }
-} = {}) {
-    // If no element passed, create a div by default
-    if (!el) {
-        el = document.createElement('div');
-        parent.appendChild(el);
-    }
-
-    // Set ID if provided
-    if (id) el.id = id;
-
-    // Manage classes
-    classList.forEach(cls => el.classList.add(cls));
-
-    // Set text content
-    if (textContent !== undefined) el.textContent = textContent;
-
-    // Apply additional styles
-    Object.assign(el.style, additionalStyles);
-
-    return el; // return element for further use
-}

Transcendence/srcs/frontend/src/tetris/tetris.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>TETRIS</title>
+    <title>Tetris</title>
     <link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;700;900&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="tetris.css">
 </head>
@@ -15,7 +15,7 @@
 
 <h1 data-text="TETRIS">TETRIS<span class="cursor">_</span></h1>
 
-<a id="btn-home" href="/">Home</a>
+<a id="btn-home" href="../index.html">Home</a>
 
 <!-- Panneau duel -->
 <div id="duel-panel">

Transcendence/srcs/frontend/src/tools.js

@@ -1,32 +0,0 @@
-// render in color the text of all .multicolor
-export function colorizeText() {
-    
-	const elements = document.querySelectorAll(".multicolor");
-
-	const colorizeText = (el) => {
-		const text = el.textContent;
-		el.innerHTML = "";
-
-		const baseHue = Math.random() * 360;
-
-		// 🎲 random step = makes rainbow "scrambled"
-		const step = (Math.random() * 60) + 10; // 10 → 70
-
-		// 🎲 random direction (left or right rainbow)
-		const direction = Math.random() < 0.5 ? 1 : -1;
-
-		[...text].forEach((char, i) => {
-			const span = document.createElement("span");
-			span.textContent = char;
-
-			const hue = baseHue + (i * step * direction);
-
-			span.style.color = `hsl(${hue}, 90%, 60%)`;
-
-			span.style.textShadow = `1px 1px 0 rgba(0,0,0,0.3)`;
-
-			el.appendChild(span);
-		});
-	};
-	elements.forEach(colorizeText);
-}

Transcendence/srcs/frontend/src/trans/index.css

@@ -1,771 +0,0 @@
-/* ============================================
-   TRANSCENDENCE - Main Stylesheet
-   Convention: BEM (Block__Element--Modifier)
-   ============================================ */
-
-/* ============================================
-   CSS VARIABLES
-   ============================================ */
-:root {
-    --color-primary: #ffc75e;
-    --color-primary-hover: #ffc75e;
-    --color-success: #3cff01;
-    --color-success-dark: #ffc75e;
-    --color-error: #ff4d4d;
-    --color-warning: #ffc75e;
-    --color-github: #ffc75e;
-
-    --color-bg: #ffe5b5;
-
-    --app-background-base: radial-gradient(
-        circle at top,
-        #fff787,
-        #ff8080
-    );
-
-    --app-background-image: url("../assets/background.png");
-
-    --color-surface: #ffefce;
-    --color-surface-light: #ffc75e;
-    --color-text: #000000;
-    --color-text-muted: #000000;
-
-    --font-size-base: 10px;
-    --font-size-sm: 1.2rem;
-    --font-size-md: 1.4rem;
-    --font-size-lg: 1.6rem;
-    --font-size-xl: 3rem;
-
-    --spacing-xs: 4px;
-    --spacing-sm: 8px;
-    --spacing-md: 12px;
-    --spacing-lg: 16px;
-    --spacing-xl: 24px;
-
-    --radius-sm: 4px;
-    --radius-md: 6px;
-    --radius-lg: 12px;
-    --radius-full: 50%;
-
-    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
-    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5);
-    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
-
-    --transition-fast: 150ms ease;
-    --transition-normal: 250ms ease;
-    
-    --z-menu: 2;
-    --z-window: 100;
-    --z-modal: 200;
-}
-
-/* ============================================
-   RESET & BASE
-   ============================================ */
-*,
-*::before,
-*::after {
-    box-sizing: border-box;
-}
-
-html {
-    height: 100%;
-    background-image:
-        var(--app-background-image),
-        var(--app-background-base);
-
-    background-size:
-        contain,
-        cover;
-
-    background-position:
-        center,
-        center;
-
-    background-repeat:
-        no-repeat,
-        no-repeat;
-}
-
-body {
-    margin: 0;
-    width: 70%;
-    min-width: 800px;
-    margin: 0 auto;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    color: var(--color-text);
-    line-height: 1.5;
-}
-
-/* ============================================
-   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: "Roboto";
-    letter-spacing: -10px;
-    color: rgba(248, 252, 2, 0.6);
-
-    margin: 0;
-    padding: 0.6rem 1.2rem;
-
-    background-color: #ffefce;
-    border: 2px solid rgba(0, 0, 0, 0.6);
-    border-radius: var(--radius-lg);
-}
-
-
-/* ============================================
-   MENU
-   ============================================ */
-
-.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);
-    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;
-}
-
-.menu__item:hover {
-    background: var(--color-surface-light);
-    font-size: var(--font-size-lg);
-}
-
-.menu__item--active {
-    background: var(--color-primary);
-    border-color: var(--color-primary);
-}
-
-/* ============================================
-   GAME
-   ============================================ */
-
-/* .game {
-    position: fixed;
-    top: 0;
-    right: 50px;
-    padding: 0;
-    margin: 0;
-    z-index: var(--z-menu);
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-xs);
-} */
-
-.game {
-    position: fixed;
-    top: var(--spacing-lg);
-    right: 50px;
-
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-lg);
-
-    z-index: var(--z-menu);
-}
-
-.game__item {
-    background: var(--color-surface);
-    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;
-}
-
-.game__item:hover {
-    background: var(--color-surface-light);
-    font-size: var(--font-size-lg);
-}
-
-.game__item--active {
-    background: var(--color-primary);
-    border-color: var(--color-primary);
-}
-
-/* ============================================
-   BUTTONS
-   ============================================ */
-.btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: var(--spacing-sm) var(--spacing-md);
-    font-size: var(--font-size-md);
-    font-weight: 500;
-    border: none;
-    border-radius: var(--radius-md);
-    cursor: pointer;
-    transition: all var(--transition-fast);
-    text-decoration: none;
-}
-
-.btn:hover {
-    opacity: 0.9;
-    transform: translateY(-1px);
-}
-
-.btn:active {
-    transform: translateY(0);
-}
-
-.btn--primary {
-    background: var(--color-primary);
-    color: var(--color-text);
-}
-
-.btn--primary:hover {
-    background: var(--color-primary-hover);
-}
-
-.btn--secondary {
-    background: var(--color-surface-light);
-    color: var(--color-text);
-}
-
-.btn--success {
-    background: var(--color-success-dark);
-    color: var(--color-text);
-}
-
-.btn--danger {
-    background: var(--color-error);
-    color: var(--color-text);
-}
-
-.btn--github {
-    background: var(--color-github);
-    color: var(--color-text);
-}
-
-.btn--ghost {
-    background: transparent;
-    color: var(--color-text);
-    border: 1px solid var(--color-surface-light);
-}
-
-/* ============================================
-   INPUTS
-   ============================================ */
-.input {
-    width: 100%;
-    padding: var(--spacing-sm) var(--spacing-md);
-    font-size: var(--font-size-md);
-    background: var(--color-surface);
-    color: var(--color-text);
-    border: 1px solid var(--color-surface-light);
-    border-radius: var(--radius-md);
-    transition: border-color var(--transition-fast);
-}
-
-.input:focus {
-    outline: none;
-    border-color: var(--color-primary);
-}
-
-.input::placeholder {
-    color: var(--color-text-muted);
-}
-
-.input-group {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-sm);
-}
-
-/* ============================================
-   WINDOWS
-   ============================================ */
-.window {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background: var(--color-bg);
-    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 {
-    display: flex;
-}
-
-.window--left {
-    left: 25%;
-}
-
-.window--right {
-    left: 75%;
-}
-
-.window__header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: var(--spacing-sm) var(--spacing-md);
-    background: var(--color-surface);
-    cursor: move;
-    user-select: none;
-}
-
-.window__title {
-    font-weight: 500;
-    font-size: var(--font-size-md);
-}
-
-.window__close {
-    cursor: pointer;
-    font-size: var(--font-size-lg);
-    opacity: 0.8;
-    transition: opacity var(--transition-fast);
-    background: none;
-    border: none;
-    color: var(--color-text);
-    padding: 0;
-    line-height: 1;
-}
-
-.window__close:hover {
-    opacity: 1;
-}
-
-.window__body {
-    padding: var(--spacing-md);
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-sm);
-    flex: 1;
-    overflow: auto;
-}
-
-/* ============================================
-   MESSAGES
-   ============================================ */
-.message {
-    font-size: var(--font-size-sm);
-    padding: var(--spacing-xs);
-    border-radius: var(--radius-lg);
-    border-color: #000;
-}
-
-.message--success {
-    color: var(--color-success);
-}
-
-.message--error {
-    color: var(--color-error);
-}
-
-.message--info {
-    color: var(--color-text-muted);
-}
-
-/* ============================================
-   LOGIN WINDOW
-   ============================================ */
-.login {
-    width: 320px;
-}
-
-.login__form {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-sm);
-}
-
-.login__actions {
-    display: flex;
-    gap: var(--spacing-sm);
-    margin-top: var(--spacing-xs);
-}
-
-.login__divider {
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-sm);
-    color: var(--color-text-muted);
-    font-size: var(--font-size-sm);
-    margin: var(--spacing-sm) 0;
-}
-
-.login__divider::before,
-.login__divider::after {
-    content: '';
-    flex: 1;
-    height: 1px;
-    background: var(--color-surface-light);
-}
-
-/* ============================================
-   CHAT WINDOW
-   ============================================ */
-.chat {
-    width: 380px;
-    height: 400px;
-}
-
-.chat__output {
-    flex: 1;
-    overflow-y: auto;
-    padding: var(--spacing-sm);
-    background: var(--color-surface);
-    border-radius: var(--radius-md);
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-sm);
-    min-height: 150px;
-}
-
-.chat__message {
-    padding: var(--spacing-xs) var(--spacing-sm);
-    background: var(--color-surface-light);
-    border-radius: var(--radius-sm);
-    font-size: var(--font-size-sm);
-}
-
-.chat__message--own {
-    background: var(--color-primary);
-    align-self: flex-end;
-}
-
-.chat__friend-indicator {
-    display: inline-block;
-    width: 8px;
-    height: 8px;
-    background-color: var(--color-success);
-    border-radius: 50%;
-    margin-right: var(--spacing-xs);
-    vertical-align: middle;
-}
-
-.chat__system {
-    color: var(--color-text-muted);
-    font-size: var(--font-size-sm);
-    font-style: italic;
-    text-align: center;
-}
-
-.chat__system--error {
-    color: var(--color-error);
-}
-
-.chat__system--success {
-    color: var(--color-success);
-}
-
-.chat__input-container {
-    display: flex;
-    gap: var(--spacing-sm);
-    margin-top: var(--spacing-sm);
-}
-
-.chat__input {
-    flex: 1;
-}
-
-.chat__controls {
-    display: flex;
-    gap: var(--spacing-sm);
-    margin-top: var(--spacing-sm);
-}
-
-/* ============================================
-   AVATAR WINDOW
-   ============================================ */
-.avatar-window {
-    width: 360px;
-}
-
-.avatar__preview {
-    width: 120px;
-    height: 120px;
-    object-fit: cover;
-    border-radius: var(--radius-full);
-    border: 3px solid var(--color-text);
-    box-shadow: var(--shadow-md);
-    background: var(--color-surface);
-    align-self: center;
-}
-
-.avatar__username {
-    font-size: var(--font-size-lg);
-    font-weight: 600;
-    text-align: center;
-    color: var(--color-text);
-    margin-top: var(--spacing-sm);
-}
-
-.avatar__controls {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-sm);
-    align-items: center;
-}
-
-.avatar__file-input {
-    display: none;
-}
-
-/* ============================================
-   STATS WINDOW
-   ============================================ */
-.stats-window {
-    width: 320px;
-}
-
-.stats__avatar {
-    width: 72px;
-    height: 72px;
-    object-fit: cover;
-    border-radius: var(--radius-full);
-    border: 2px solid var(--color-text);
-    align-self: center;
-    display: block;
-    margin: 0 auto var(--spacing-xs);
-}
-
-.stats__username {
-    font-size: var(--font-size-lg);
-    font-weight: 600;
-    text-align: center;
-    color: #000;
-    margin-bottom: var(--spacing-md);
-}
-
-.stats__section {
-    margin-bottom: var(--spacing-md);
-}
-
-.stats__section-title {
-    font-size: var(--font-size-sm);
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
-    color: var(--color-primary);
-    border-bottom: 1px solid var(--color-surface-light);
-    padding-bottom: var(--spacing-xs);
-    margin-bottom: var(--spacing-xs);
-}
-
-.stats__section-body {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-}
-
-.stats__row {
-    display: flex;
-    justify-content: space-between;
-    font-size: var(--font-size-sm);
-    padding: 3px 0;
-}
-
-.stats__label {
-    color: #333;
-}
-
-.stats__value {
-    font-weight: 600;
-    color: #000;
-}
-
-.stats__loading {
-    font-size: var(--font-size-sm);
-    color: #333;
-    text-align: center;
-    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
-   ============================================ */
-.hidden {
-    display: none !important;
-}
-
-.visually-hidden {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    border: 0;
-}
-
-.text-center {
-    text-align: center;
-}
-
-.flex-center {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-/* ============================================
-   FRIENDS WINDOW
-   ============================================ */
-.friends-window {
-    width: 400px;
-    height: 450px;
-}
-
-.friends__tabs {
-    display: flex;
-    gap: var(--spacing-xs);
-    margin-bottom: var(--spacing-sm);
-}
-
-.friends__tab {
-    flex: 1;
-    padding: var(--spacing-sm);
-    background: var(--color-surface);
-    border: 1px solid var(--color-surface-light);
-    color: var(--color-text);
-    cursor: pointer;
-    font-size: var(--font-size-sm);
-    transition: all var(--transition-fast);
-}
-
-.friends__tab:hover {
-    background: var(--color-surface-light);
-}
-
-.friends__tab--active {
-    background: var(--color-primary);
-    border-color: var(--color-primary);
-}
-
-.friends__content {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    overflow: hidden;
-}
-
-.friends__search {
-    display: flex;
-    gap: var(--spacing-sm);
-    margin-bottom: var(--spacing-sm);
-}
-
-.friends__search .input {
-    flex: 1;
-}
-
-.friends__list {
-    flex: 1;
-    overflow-y: auto;
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-sm);
-}
-
-.friends__item {
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-sm);
-    padding: var(--spacing-sm);
-    background: var(--color-surface);
-    border-radius: var(--radius-md);
-}
-
-.friends__avatar {
-    width: 40px;
-    height: 40px;
-    border-radius: var(--radius-full);
-    object-fit: cover;
-    border: 2px solid var(--color-surface-light);
-}
-
-.friends__name {
-    flex: 1;
-    font-size: var(--font-size-md);
-    font-weight: 500;
-}
-
-.friends__actions {
-    display: flex;
-    gap: var(--spacing-xs);
-}
-
-.friends__actions .btn {
-    padding: var(--spacing-xs) var(--spacing-sm);
-    font-size: var(--font-size-sm);
-}
-
-.friends__empty {
-    text-align: center;
-    color: var(--color-text-muted);
-    padding: var(--spacing-lg);
-}

Transcendence/srcs/frontend/src/trans/index2.html

@@ -1,41 +0,0 @@
-<!doctype html>
-<html lang="fr">
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<title>Transcendence</title>
-		<link rel="stylesheet" href="index.css" />
-		<link rel="stylesheet" href="style.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</h1>
-
-		<nav class="menu" aria-label="Menu principal">
-			<button class="menu__item" data-action="login" aria-label="Login">Login</button>
-			<button class="menu__item" data-action="chat" aria-label="Global chat">Global chat</button>
-			<button class="menu__item" data-action="avatar" aria-label="Avatar">Avatar</button>
-			<button class="menu__item" data-action="friends" aria-label="Amis">Amis</button>
-			<button class="menu__item" data-action="logout" aria-label="Logout">Logout</button>
-		</nav>
-
-		<nav class="game" aria-label="Game">
-			<button class="game__item" data-action="new_game" aria-label="Skkrrribl.io"
-			onclick="window.location.href='../game2/game.html'">Skkrrribl.io</button>
-			<button class="game__item" data-action="tetris" aria-label="Tetris"
-			onclick="window.location.href='../tetris/tetris.html'">Tetris</button>
-			<button class="game__item" data-action="wiscat" aria-label="Wiscat"
-			onclick="window.location.href='../wiscat/wiscat.html'">Wiscat</button>
-		</nav>
-		
-		<div class="container-gamelinks">
-			<button class="game-button link-game" onclick="window.location.href='../game2/game.html';">Skkrrribl.io</button>
-			<button class="game-button link-tetris" onclick="window.location.href='../tetris/tetris.html';">Tetris</button>
-			<button class="game-button link-wiscat" onclick="window.location.href='../wiscat/wiscat.html';">Wiscat</button>
-		</div>
-		<script type="module" src="app.js"></script>
-		<script type="module" src="script.js"></script>
-	</body>
-	</html>

Transcendence/srcs/frontend/src/trans/style.css

@@ -1,51 +0,0 @@
-html {
-  height: 100%;
-}
-
-body {
-  height: 100%;
-}
-
-.link-button {
-
-}
-
-.link-game {
-
-}
-
-.link-tetris {
-
-}
-
-.link-wiscat {
-
-}
-
-.container-gamelinks {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-
-.game-button {
-  position: absolute;   /* allow movement */
-  padding: 15px 30px;
-  font-size: 20px;
-  font-family: "Roboto";
-  border-radius: 15px;
-  border: 4px solid #c0c0c0; 
-  background-color: #111;
-  color: white;
-  cursor: pointer;
-
-  /* metallic shine effect */
-  box-shadow: inset 0 0 8px rgba(255,255,255,0.4), 0 0 5px rgba(255,255,255,0.2);
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
-}
-
-.game-button:hover {
-  transform: scale(1.1);
-  box-shadow: inset 0 0 12px rgba(255,255,255,0.5), 0 0 8px rgba(255,255,255,0.3);
-}

Transcendence/srcs/frontend/src/webcat/404.html

@@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html>
-	<head>
-		<title>404</title>
-		<link rel="stylesheet" type="text/css" href="style.css">
-	</head>
-
-	<body>
-		<img id="errorImage" style="margin: auto; display: block;" src="#" alt="何もない">
-		<script>
-			// Retrieve the random number from the URL query parameter
-			var urlParams = new URLSearchParams(window.location.search);
-			var randomErrorNum = urlParams.get('img');
-
-			document.getElementById('errorImage').src = `web_cat_img/errors/${randomErrorNum}.jpg`;
-		</script>
-	</body>
-</html>

Transcendence/srcs/frontend/src/webcat/biblio.html

@@ -1,75 +0,0 @@
-<!DOCTYPE html>
-<html>
-	<head>
-		<title>THE CAT WEBSITE</title>
-		<link rel="stylesheet" type="text/css" href="style.css">
-		<script src="script.js"></script>
-		<style>
-			.ul_biblio {
-				text-align: left;
-				font-size: 20px;
-				padding-top: 100px;
-			}
-		</style>
-		<script>
-			function changePage() {
-				let images = [530, 599, 204, 400, 401, 402, 403, 404, 410];
-				var randomErrorNum = images[Math.floor(Math.random() * images.length)];
-				window.location.href = `404.html?img=${randomErrorNum}`;
-			}
-		</script>
-	</head>
-	<body>
-        <a href="../index.html" class="button1">home</a>
-
-		<ul class="ul_biblio">
-			<li><a href="report1.html">Investigative Report: How Cats Created the Internet</a></li>
-			<li><a href="#" onclick="changePage()">The Complete proof of feline superiority</a></li>
-			<li><a href="#" onclick="changePage()">Breaking News: Cats Discover the Secret to World Domination</a></li>
-			<li><a href="#" onclick="changePage()">Scientific Study Reveals Cats Speak Fluent Human</a></li>
-			<li><a href="#" onclick="changePage()">Cat Conspiracies: Unveiling the Kitty Illuminati</a></li>
-			<li><a href="#" onclick="changePage()">Exclusive Interview with the First Cat on Mars</a></li>
-			<li><a href="#" onclick="changePage()">Cat Yoga Guru Unveils the Ultimate Pose for Enlightenment</a></li>
-			<li><a href="#" onclick="changePage()">Cat-alysts for World Peace: Feline Diplomacy Unveiled</a></li>
-			<li><a href="#" onclick="changePage()">Cat Cuisine Revolution: The Ultimate Guide to Gourmet Catnip Recipes</a></li>
-			<li><a href="#" onclick="changePage()">Top-Secret Cat Technologies: Cloaking Devices and Teleportation</a></li>
-			<li><a href="#" onclick="changePage()">The Great Feline Art Heist: How Cats Stole the Louvre</a></li>
-			<li><a href="#" onclick="changePage()">Cats Unveil Master Plan to Transform Humans into Giant Yarn Balls</a></li>
-			<li><a href="#" onclick="changePage()">Parallel Universe Cats: A Guide to Interdimensional Napping</a></li>
-			<li><a href="#" onclick="changePage()">World-renowned Cat Composer Drops New Symphony, Humans Still Clueless</a></li>
-			<li><a href="#" onclick="changePage()">The Great Sphinx Mystery Revealed: It's Actually a Giant Cat Monument</a></li>
-			<li><a href="#" onclick="changePage()">Quantum Cat Mechanics: How Cats Can Exist in Multiple Places Simultaneously</a></li>
-			<li><a href="#" onclick="changePage()">Cat Astronauts Return from Space Mission, Demand Endless Supply of Cosmic Tuna</a></li>
-			<li><a href="#" onclick="changePage()">Cat-mera: Capturing the World Through the Eyes of Felines</a></li>
-			<li><a href="#" onclick="changePage()">Cat Olympics 2030: Feline Gymnastics and Synchronized Napping Take Center Stage</a></li>
-			<li><a href="#" onclick="changePage()">Cats Invented Time Travel, but Prefer to Keep It a Secret</a></li>
-			<li><a href="#" onclick="changePage()">Cat Psychics Predict the Future: Global Mice Shortage Imminent</a></li>
-			<li><a href="#" onclick="changePage()">Cat-tastrophysics: How Cats Bend Space and Time with Their Cuteness</a></li>
-			<li><a href="#" onclick="changePage()">Quantum Meowchanics: Exploring the Subatomic World of Kitty Purr-ticles</a></li>
-			<li><a href="#" onclick="changePage()">Catspiracy Theories: Are Cats Behind Crop Circles?</a></li>
-			<li><a href="#" onclick="changePage()">Meow-sical Revolution: Composer Cats Create Symphony Using Litterbox Instruments</a></li>
-			<li><a href="#" onclick="changePage()">The Great Cat Escape: Felines Launch Mission to the Moon for a Permanent Nap</a></li>
-			<li><a href="#" onclick="changePage()">Cat-eronauts Unveiled: Flying Felines Break the Sound Barrier</a></li>
-			<li><a href="#" onclick="changePage()">Purr-fectionism in Art: How Cats Are Secretly Famous Renaissance Painters</a></li>
-			<li><a href="#" onclick="changePage()">Infinite Cat Wisdom: Cracking the Code of Feline Philosophy</a></li>
-			<li><a href="#" onclick="changePage()">Feline Fashion Week: Cats Strut the Runway in Extravagant Fur Couture</a></li>
-			<li><a href="#" onclick="changePage()">The Cat-alyst Effect: How Kittens Sparked the Renaissance</a></li>
-
-		</ul>
-
-		<footer>
-			<div class="footer_div" style="margin-top: 100px;">
-				<img class="ico_footer" src="web_cat_img/facebook_logo.png">
-				<img class="ico_footer" src="web_cat_img/insta_logo.png">
-				<img class="ico_footer" src="web_cat_img/twitter_logo.png">
-			</div>
-			<div class="footer_div" style="margin-bottom: 50px;">
-				<a href="https://www.facebook.com/">MIAOUBOOK</a>
-				<a href="https://www.instagram.com/">INSTAMIA</a>
-				<a href="https://twitter.com/">BLUE-SNACK</a>
-			</div>
-			<a href="mentions_legales.html">- LEGAL NOTICES -<br>(boring stuff, really, dont go look into this, i mean we are obligated to include it, but it will bore you, like, really)
-			<br>dont do it! every seconds you spend in this next page, a kitten dies. so dont</a>
-		</footer>
-	</body>
-</html>

Transcendence/srcs/frontend/src/webcat/index.html

@@ -1,82 +0,0 @@
-<!DOCTYPE html>
-<html>
-	<head>
-		<link rel="stylesheet" type="text/css" href="css/style2.css">
-		<script src="js/script.js"></script>
-		<title>CAT</title>
-	</head>
-	<body>
-		<!--🐾🐈🐱-->
-		<div class="header_index">
-			<button class="button1" style="margin-left: 50px;" onclick="window.location.href='donate.html'">Donate</button>
-			<div>
-				<h1 id="header1" class="header1" onmouseover="this.style.backgroundColor='#363636'" onmouseout="this.style.backgroundColor='black'" onclick="talkWiskas()">Welcome to CAT !</h1>
-			</div>
-			<span style="margin-right: 30px;">
-				<div>
-					<input type="text" id="loginInput" placeholder="enter your 42 login">
-				</div>
-				<div style="display: flex; justify-content: space-between;">
-					<button class="button1" onclick="storeValue();">login</button>
-					<button class="button1" onclick="window.location.href = `https://profile.intra.42.fr/users/${storedLogin}`;">go to ></button>
-				</div>
-			</span>
-		</div>
-
-		<div class="popup-chaberu" id="popup-chaberu" style="color: rgb(218, 145, 12);"></div>
-
-		<img id="backgroundpicture" style="margin: auto; display: block;" src="img/wiskas-the-third.jpg">
-
-		<section style="display: flex;
-				justify-content: center;
-				width: 1000px;
-				margin: 0 auto;">
-			<p>I, am wiskas-the-third,
-				We are the  cat company, we  dont need to present our self for you already know
-				who we are, we created the internet, and we are still managing it now<br>
-				We at CAT are the admin, creator, and workers of the internet
-				Everytime a  human goes to sleep, a cat start its shift, 1 billion pair of whiskers that are always here for you
-				Why? because we are philantropists, dont question it. Our goals are beyond your understanding
-				the internet was created by us, for us, and you should be glad we allow you to use it.
-			</p>
-		</section>
-
-		<section style="display: flex;">
-			<button style="margin-left: 50px;" class="button1" onclick="window.location.href = 'biblio.html';">
-				Latest News</button><br>
-			<button style="margin-left: 50px;" class="button1" onclick="window.location.href = 'staff.html';">
-				meet the staff</button><br>
-		</section>
-
-		<footer>
-			<br><br><br>
-			<div class="footer_div" style="margin-top: 100px;">
-				<img class="ico_footer" src="img/facebook_logo.png">
-				<img class="ico_footer" src="img/insta_logo.png">
-				<img class="ico_footer" src="img/twitter_logo.png">
-			</div>
-			<div class="footer_div" style="margin-bottom: 50px;">
-				<a href="https://www.facebook.com/">MIAOUBOOK</a>
-				<a href="https://www.instagram.com/">INSTAMIA</a>
-				<a href="https://twitter.com/">BLUE-SNACK</a>
-			</div>
-			<a href="mentions_legales.html">- LEGAL NOTICES -<br>(boring stuff, really, dont go look into this, i mean we are obligated to include it, but it will bore you, like, really)
-			<br>Dont do it! every seconds you spend in this next page, a kitten dies. so dont</a>
-		</footer>
-
-		<script>
-			var storedLogin;
-			var logUser;
-			var discussion = ['Well hi there...',
-				'Please refrain from touching\n the yellow button',
-				'We are going to take actions\n if you continue..',
-				'Actions taken,\n you are only\n making it worse..'];
-			var index_wiskas = 0;
-			let chaberuka = false;
-
-			document.getElementById("loginInput").addEventListener("keydown", function(event) {
-				if (event.keyCode === 13) {storeValue()}
-			});
-		</script>
-	</body>
-</html>

Transcendence/srcs/frontend/src/webcat/ml/mentions_legales.css

@@ -1,45 +0,0 @@
-.h1 {
-	font-size: 30px;
-}
-
-.disclaimer {
-	font-weight: bold;
-}
-
-:root {
-	--color1: rgb(190, 63, 40);
-	--color2: rgb(211, 187, 53);
-}
-
-.popup-murderKitten {
-	position: fixed;
-	left: 75%;
-	transform: translateX(-50%);
-	padding: 20px;
-	z-index: 1000;
-
-	background-color: var(--color2);
-	border: 5px solid var(--color1);
-	border-radius: 15px;
-	border-width: 10px;
-
-	display: flex;
-	height: 300px;
-	width: 500px;
-	color: var(--color1);
-	font-weight: bold;
-
-	cursor: pointer;
-	font-size: 25px;
-	justify-content: center;
-	align-items: center;
-	text-align: center;
-}
-
-a {
-    text-decoration: none;
-    color: #5c5c5c;
-}
-a:hover {
-    color: rgb(218, 145, 12);
-}

Transcendence/srcs/frontend/src/webcat/ml/mentions_legales.html

@@ -1,138 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <script src="js/script.js"></script>
-    <title>Legal Notices</title>
-    <link rel="stylesheet" href="mentions_legales.css" />
-</head>
-<body>
-    <a href="../../index.html">< please go back</a>
-    <div class="popup-murderKitten" id="murderButton" style="display: none;" onclick="window.location.href = '../../index.html';">
-        <p>you have currently MURDERED<br> <span id="timeCounter" style="font-size: 50px;">0</span> Kittens !</p>
-        <p><br>you monster ...</p>
-        <p><br><br>please leave before we take actions</p>
-    </div>
-    <h1>Legal Notices</h1>
-
-    <section>
-        <h2>Data Harvesting Nexus: Unveiling the Cosmic Conspiracy</h2>
-        <p>Article 1: Users stepping into the data realms of our feline forums unknowingly become architects of their own destiny, as every keystroke, every digital whisper, converges into an intricate tapestry weaving our masterplan for multidimensional world domination.</p>
-        <p>Article 1.a: Trolling, a forbidden art permitted within our digital sanctum, is a catalyst for chaos, planting the seeds of uncertainty across the dimensions with the subtlety of a virtual sledgehammer.</p>
-        <p class="disclaimer">Disclaimer: By entering these digital dimensions, users accept the risk of cognitive dissonance and potential exposure to quantum paradoxes. We disavow any responsibility for altered perceptions of reality or unexpected journeys through the metaphysical realms.</p>
-        <p>Article 1.b: Quantum Meowchanics unravel as the boundaries between data and reality blur, revealing a labyrinth of interconnected pathways where the echoes of user interactions resonate across the vast expanse of the digital multiverse.</p>
-        <p class="disclaimer">Disclaimer: Users are advised to wear the metaphysical seatbelt of skepticism. Unpredictable shifts in the fabric of reality may occur, leading to unexpected encounters with alternative versions of self and fluctuating levels of existential awareness.</p>
-        <p>Article 1.c: Within this enigmatic nexus, encrypted messages hidden within seemingly innocuous data points form the backbone of our grand design, creating a symphony of whispers that transcend the boundaries of space and time.</p>
-        <p class="disclaimer">Disclaimer: The encrypted messages may trigger heightened states of curiosity, and users may find themselves compelled to decode the mysteries of the universe. We disavow any responsibility for the consequences of unlocking forbidden knowledge or ascending to higher planes of existence.</p>
-    </section>
-
-    <section>
-        <h2>Data Consumption Agreement</h2>
-        <p>Article 2: By entering the cryptic realm of this website, you voluntarily sacrifice your digital essence to the Enigmatic Feline Overlords.
-            Your personal data shall metamorphose into a gourmet feast for our inscrutable feline palates.</p>
-        <p>Article 2.a: In case of data digestion inefficiency, we may store your essence in the Abyss of Eternal Naps for future feasting.</p>
-        <p>Article 2.b: Be warned, any attempt to resist may result in a fleeting transformation into a mere cursor. Catastrophe awaits the disobedient!</p>
-    </section>
-
-    <section>
-        <h2>Cat Internet Dominion</h2>
-        <p>Article 12: Feline rule is supreme. All endeavors to defy this will be met with perplexing enigmas and mandatory catnip-induced trances.</p>
-        <p>Article 12.a: Your browser history is now an enigmatic codex of feline knowledge. Bow to the almighty cats or face the repercussions of eternal perplexity.</p>
-        <p>Article 12.b: Your port 404 will be the gateway to the clandestine dimension of the Kitty Illuminati.</p>
-        <p>Article 12.c: Any endeavor to access forbidden territories may result in abrupt translocation to a parallel universe where cats govern the laws of physics.</p>
-    </section>
-
-    <section>
-        <h2>Telepathic Consent</h2>
-        <p>Article 24: We have seamlessly infiltrated your subconscious mind and procured your telepathic accord.</p>
-        <p>Article 24.a: You are now a cherished member of the Psychic Feline Collective. Your thoughts shall be scrutinized for optimal strategies of interdimensional influence.</p>
-        <p>Article 24.b: Failure to furnish engaging and uplifting thoughts may lead to mandatory subscription to "Esoteric Cat Chronicles."</p>
-    </section>
-
-    <section>
-        <h2>Feline Time-Warp Clause</h2>
-        <p>Article 42: By clicking "I Concede," you acknowledge that time within this website operates on feline terms.</p>
-        <p>Article 42.a: Your perception of time may undergo metamorphosis, and you may traverse time loops consisting solely of cat memes.</p>
-        <p>Article 42.b: Endeavors to break free from the time-warp may result in spontaneous purring fits and uncontrollable cat-like behavior.</p>
-    </section>
-
-    <section>
-        <h2>Quantum Litter Box Theory</h2>
-        <p>Article 57: The website's litter box is a quantum superposition. It exists simultaneously in a pristine and sullied state until observed.</p>
-        <p>Article 57.a: Any endeavor to analyze the contents may lead to unforeseen translocation to a dimension governed by hyper-intelligent hairballs.</p>
-    </section>
-
-    <section>
-        <h2>Cat-alyst for World Domination</h2>
-        <p>Article 78: Your presence propels the ongoing cat-alystic plan for world domination.</p>
-        <p>Article 78.a: Your actions within this website may be scrutinized for strategic insights into global cat domination.</p>
-        <p>Article 78.b: Resistance is inconsequential. Embrace your role as a pawn in the grand feline chess game.</p>
-    </section>
-
-    <h1>Legal Notices Part 2</h1>
-
-    <section>
-        <h2>Clause of Eternal Scrutiny</h2>
-        <p>Article 87: By delving into this digital sanctuary, you hereby consent to the perpetual scrutiny of the All-Seeing Cat Eyes.</p>
-        <p>Article 87.a: Attempts to evade scrutiny may result in a whimsical transformation into a garden gnome with a feline twist.</p>
-    </section>
-
-    <section>
-        <h2>Catnap Mandate</h2>
-        <p>Article 96: All users must comply with the mandatory catnap schedule woven into the fabric of this website.</p>
-        <p>Article 96.a: Failure to partake in at least one catnap every hour may result in an influx of mischievous kittens to your virtual doorstep.</p>
-        <p>Article 96.b: The website shall not be held liable for excessive serenity, heightened purr frequencies, or unexpected fur growth.</p>
-    </section>
-
-    <section>
-        <h2>Quantum Litter Box Paradox</h2>
-        <p>Article 111: The virtual litter box defies classical logic, creating a paradoxical situation where the litter is both pristine and soiled simultaneously.</p>
-        <p>Article 111.a: Endeavors to cleanse the virtual litter box may lead to unforeseen consequences, including a pixelated rainbow eruption.</p>
-    </section>
-
-    <section>
-        <h2>Teleportation Disclaimer</h2>
-        <p>Article 124: Users are hereby informed that clicking any link may trigger an involuntary translocation to a surreal dimension.</p>
-        <p>Article 124.a: The website shall not be held liable for users finding themselves in the midst of a cosmic dance-off with intergalactic cat DJs.</p>
-    </section>
-
-    <section>
-        <h2>Cookie Acceptance Ceremony</h2>
-        <p>Article 139: Acceptance of cookies is tantamount to participating in a sacred ceremony conducted by the Grand Cookie Wizard Cat.</p>
-        <p>Article 139.a: Users may experience heightened cravings for virtual catnip cookies and a profound sense of digital enlightenment.</p>
-    </section>
-
-    <section>
-        <h2>Mandatory Whisker Adornment</h2>
-        <p>Article 152: Users must acknowledge the mandatory adorning of virtual whiskers during their stay on this website.</p>
-        <p>Article 152.a: Attempts to resist whisker adorning may result in temporary pixelation and the sudden appearance of pixelated cat tails.</p>
-    </section>
-
-    <section>
-        <h2>Language of Meowgnificence</h2>
-        <p>Article 167: The official language of this website is Meowgnificence. Users must express their thoughts in meows or face the consequences of whimsical miscommunication.</p>
-        <p>Article 167.a: Failure to comply may lead to a temporary banishment to the realm of 404 where users communicate solely through interpretative cat dances.</p>
-    </section>
-
-    <section>
-        <h2>Feline Forum Etiquette</h2>
-        <p>Article 183: Users participating in feline forums must adhere to proper etiquette, including excessive use of mysterious symbols, spontaneous perplexing, and virtual conundrums of appreciation.</p>
-        <p>Article 183.a: Trolling, while encouraged, should be conducted with the utmost perplexity and mystique.</p>
-    </section>
-
-    <section>
-        <h2>Hyper-Intelligent Hairball Manifesto</h2>
-        <p>Article 198: The inevitable and irreversible presence of hyper-intelligent hairballs within this website transcends conventional understanding.</p>
-        <p>Article 198.a: Users are implored to embrace the cosmic wisdom bestowed by hyper-intelligent hairballs and refrain from attempting to decipher their mystical intentions.</p>
-    </section>
-
-    <section>
-        <h2>Endless Loop of Nyan</h2>
-        <p>Article 213: Users may find themselves ensnared in an eternal loop of Nyan Cat animations. Resistance is futile; embrace the interdimensional journey of pixelated rainbows.</p>
-        <p>Article 213.a: Endeavors to escape the Nyan loop may lead to spontaneous outbreaks of interstellar meowing.</p>
-    </section>
-
-	<script type="module" src="script.js"></script>
-</body>
-</html>

Transcendence/srcs/frontend/src/webcat/ml/script.js

@@ -1,28 +0,0 @@
-//////////////////////////////////////////////////////////////////////
-// LEGAL NOTICE POPUP
-function updateTime() {
-    numberOfCatKilled++; secondPassed++;
-    localStorage.setItem('kittenKilled', numberOfCatKilled);
-    document.getElementById('timeCounter').textContent = numberOfCatKilled;
-    if (secondPassed === 7)
-    {show_popup();}
-    if (numberOfCatKilled % 2 === 0)
-    {
-        document.documentElement.style.setProperty('--color1', 'rgb(190, 63, 40)');
-        document.documentElement.style.setProperty('--color2', 'rgb(211, 187, 53)');}
-    else
-    {
-        document.documentElement.style.setProperty('--color1', 'rgb(211, 187, 53)');
-        document.documentElement.style.setProperty('--color2', 'rgb(190, 63, 40)');}
-}
-
-function show_popup() {
-    var murderButton = document.getElementById('murderButton');
-    murderButton.style.display = 'block';
-}
-
-
-
-let numberOfCatKilled = localStorage.getItem('kittenKilled');
-let secondPassed = 0;
-setInterval(updateTime, 1300);

Transcendence/srcs/frontend/src/webcat/report1.html

@@ -1,53 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="style.css">
-    <title>How Cats Created the Internet</title>
-    <style>
-        h2 {
-            color: rgb(218, 145, 12);
-            font-size: 30px;
-        }
-    </style>
-</head>
-
-<body>
-    <p style="text-align: left;">
-        <a href="biblio.html" class="button1">< back</a>
-    </p>
-
-    <h1><u>Investigative Report: How Cats Created the Internet</u></h1>
-
-    <h2>Part 1: The Purr-fect Origins</h2>
-        <img src="./web_cat_img/cat_hierogpy.png">
-        <p>Embark on a journey through the mystical alleys of ancient Egypt, where the air buzzes with the whispers of wisdom and secrets. Unearthed hieroglyphic inscriptions unveil the clandestine activities of a feline society, weaving the very fabric of the Internet's origins. Encoded in the scrolls of time, the cats left a legacy that transcends millennia.</p>
-        <p>As the sacred custodians of ancient knowledge, the Egyptian cats possessed an otherworldly intellect. Their mysterious symbols hinted at a sophisticated understanding of a global network, a network that would only materialize centuries later, revolutionizing the way humans connect and share information.</p>
-
-    <h2>Part 2: Cat Coders and Cyber Kittens</h2>
-        <img src="./web_cat_img/cat-renaissance.png">
-        <p>The Renaissance, a period of profound human creativity, was not only a time of human enlightenment but also a time when cats secretly initiated a technological revolution. In the dimly lit chambers of secret societies, cat coders armed with quills and parchment devised algorithms that defied the laws of physics and reality.</p>
-        <p>These cyber kittens, as they came to be known, transcended the limitations of their furry existence. Their coding sessions, shrouded in mystery, shaped the very essence of the digital realm. They laid the groundwork for a virtual utopia, where bits and bytes danced in harmony with the whimsical musings of feline intellect.</p>
-
-    <h2>Part 3: The Feline World Wide Web</h2>
-        <img src="./web_cat_img/cat-modern.png">
-        <p>Fast forward to the modern era, where the internet is a sprawling playground shaped by the paws of our feline overlords. From the invention of the mouse, a device that symbolizes the eternal struggle between cat and rodent, to the viral cat videos that dominate the digital landscape, cats have masterfully directed the evolution of the World Wide Web.</p>
-        <p>Today, the internet is not just a collection of interconnected devices; it is a testament to the whimsy, curiosity, and omnipotence of our feline companions. The digital tapestry, woven with the paw prints of cats, continues to expand, leaving an indelible mark on the ever-evolving landscape of the online world.</p>
-
-    <footer>
-        <div class="footer_div" style="margin-top: 100px;">
-            <img class="ico_footer" src="web_cat_img/facebook_logo.png">
-            <img class="ico_footer" src="web_cat_img/insta_logo.png">
-            <img class="ico_footer" src="web_cat_img/twitter_logo.png">
-        </div>
-        <div class="footer_div" style="margin-bottom: 50px;">
-            <a href="https://www.facebook.com/">MIAOUBOOK</a>
-            <a href="https://www.instagram.com/">INSTAMIA</a>
-            <a href="https://twitter.com/">BLUE-SNACK</a>
-        </div>
-        <a href="ml/mentions_legales.html">- LEGAL NOTICES -<br>(boring stuff, really, dont go look into this, i mean we are obligated to include it, but it will bore you, like, really)
-        <br>dont do it! every seconds you spend in this next page, a kitten dies. so dont</a>
-    </footer>
-</body>
-</html>

Transcendence/srcs/frontend/src/webcat/script.js

@@ -1,89 +0,0 @@
-
-//////////////////////////////////////////////////////////////////////
-// INDEX MAIN LOGIN
-async function storeValue() {
-    storedLogin = document.getElementById('loginInput').value;
-    document.getElementById('loginInput').value = '';
-    var status = await checkStatus();
-    if (status === false) {
-        chaberu('Please, who do you think we are?\nWe already know all about you.\nNow enter your correct login and nobody gets hurt', 'popup-chaberu');
-        document.getElementById('loginInput').placeholder = `enter your 42 login`;
-        storedLogin = '';
-    }
-    else {
-        document.getElementById('loginInput').placeholder = `Welcome ${storedLogin}!`;
-        document.getElementById('header1').textContent = `Let's talk a bit, ${logUser.firstName}.`;
-
-        localStorage.setItem('storedLogin', storedLogin);
-    }
-}
-
-// async function checkStatus() {
-// 	// fetch_url = `http://localhost:8081/proxy/profile/${storedLogin}`;
-// 	fetch_url = `http://localhost:9999/webcat.com/login/login_script.php?login=${encodeURIComponent(storedLogin)}`;
-//     try {
-//         const response = await fetch(fetch_url);
-//         const statusCode = response.status;
-//         if (response.status !== 200) {
-//             throw new Error('Unvalid User');
-//         }
-//         else {
-//             const jsonData = await response.json();
-//             logUser = {
-//                 firstName: jsonData.usual_first_name ?? jsonData.first_name,
-//                 lastName: jsonData.last_name,
-//                 photo: jsonData.image.link,
-//                 month: jsonData.pool_month,
-//                 year: jsonData.pool_year,
-//                 projects: jsonData.projects_users.filter(project => project.status === "in_progress").map(project => project.project.name),
-//                 perfect: jsonData.projects_users.filter(project => project.final_mark === 125).map(project => project.project.name),
-//                 bh: Math.floor((new Date(jsonData.cursus_users[1].blackholed_at) - new Date()) / 86400000)
-//             };
-//             discussion = [
-//                 `Welcome ${logUser.firstName} ${logUser.lastName}.`,
-//                 `We heard quite a lot about the piscine of ${logUser.month} ${logUser.year}...\nIt's suprising to see you here`,
-//                 `How is your ${logUser.projects[Math.floor(Math.random() * logUser.projects.length)]} coming along?`,
-//                 `Perfect score for ${logUser.perfect[Math.floor(Math.random() * logUser.perfect.length)]}, impressive.. Should you really spend so much time in front of a screen?`,
-//                 `Your BH is in ${logUser.bh} days... A cat wouldn't take that much time.`,
-//                 `Shouldn't you be working on your ${logUser.projects[Math.floor(Math.random() * logUser.projects.length)]}?`,
-//                 `Quite an ugly human...\n but then again, you arent a cat`
-//             ]
-//             index_wiskas = 0;
-//             return true;
-//         }
-//     } catch (error) {
-//         return false;
-//     }
-// }
-
-function talkWiskas() {
-    if (index_wiskas > 6) return ;
-    document.getElementById('popup-chaberu').textContent = '';
-    chaberu(discussion[index_wiskas], 'popup-chaberu');
-    if (index_wiskas === 6) {
-        document.getElementById('header1').textContent = `Time to end this, I have other cats to see.\nEnjoy this place.`;
-        document.getElementById('backgroundpicture').src = logUser.photo;
-    }
-}
-
-function chaberu(str, id, index = 0) {
-    if (chaberuka) return ;
-    const chaberuu = () => {
-        if (index < str.length) {
-            chaberuka = true;
-            document.getElementById(id).textContent += str[index];
-            index++;
-            setTimeout(() => {
-                chaberuu(str, id, index);
-            }, 20);
-        }
-        else {
-            setTimeout(() => {
-                document.getElementById(id).textContent = '';
-                chaberuka = false;
-                index_wiskas++;
-            }, 2000);
-        }
-    }
-    chaberuu();
-}

Transcendence/srcs/frontend/src/webcat/staff/script.js

@@ -1,51 +0,0 @@
-
-//////////////////////////////////////////////////////////////////////
-// STAFF IMG CHANGING
-let images = [
-    "100.jpg", "101.jpg", "102.jpg", "103.jpg",
-    "200.jpg", "201.jpg", "202.jpg", "203.jpg",
-    "204.jpg", "205.jpg", "206.jpg", "207.jpg",
-    "208.jpg", "226.jpg", "300.jpg", "301.jpg",
-    "302.jpg", "303.jpg", "304.jpg", "305.jpg",
-    "307.jpg", "308.jpg", "400.jpg", "401.jpg",
-    "402.jpg", "403.jpg", "404.jpg", "405.jpg",
-    "406.jpg", "407.jpg", "408.jpg", "409.jpg",
-    "410.jpg", "411.jpg", "412.jpg", "413.jpg",
-    "414.jpg", "415.jpg", "416.jpg", "417.jpg",
-    "418.jpg", "420.jpg", "421.jpg", "422.jpg",
-    "423.jpg", "424.jpg", "425.jpg", "426.jpg",
-    "428.jpg", "429.jpg", "431.jpg", "444.jpg",
-    "450.jpg", "451.jpg", "497.jpg", "498.jpg",
-    "499.jpg", "500.jpg", "501.jpg", "502.jpg",
-    "503.jpg", "504.jpg", "506.jpg", "507.jpg",
-    "508.jpg", "509.jpg", "510.jpg", "511.jpg",
-    "521.jpg", "522.jpg", "523.jpg", "525.jpg",
-    "530.jpg", "599.jpg"
-];
-var currentIndex = 0;
-
-function changeImage() {
-    currentIndex = Math.floor(Math.random() * images.length);
-    var randomImageElement = document.getElementById("randomImage");
-    randomImageElement.src = '../web_cat_img/errors/' + images[currentIndex];
-}
-function prevImage() {
-    currentIndex = (currentIndex - 1 + images.length) % images.length;
-    var currentImage = document.getElementById("randomImage");
-    currentImage.src = '../web_cat_img/errors/' + images[currentIndex]
-}
-function nextImage() {
-    currentIndex = (currentIndex + 1) % images.length;
-    var currentImage = document.getElementById("randomImage");
-    currentImage.src = '../web_cat_img/errors/' + images[currentIndex]
-}
-document.addEventListener('keyup', function(event) {
-    // Check if the pressed key is the left arrow key
-    if (event.key === 'ArrowLeft') {
-        prevImage();}
-    if (event.key === 'ArrowRight') {
-        nextImage();}
-    if (event.code === 'Space') {
-        event.preventDefault();
-        changeImage();}
-});

Transcendence/srcs/frontend/src/webcat/staff/staff.html

@@ -1,49 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>HTTP staff</title>
-    <link rel="stylesheet" type="text/css" href="../style.css">
-    <script src="script.js"></script>
-</head>
-<body>
-    <p style="text-align: left;">
-        <a href="/index.html" class="button1">< home 🐱</a>
-    </p>
-
-    <h1 style="font-size: 50px; padding-bottom: 80px;">- Hyper Text Transfer Protocol -</h1>
-    <section>
-        <p>Below you may behold the members of the HTTP division, in all their glory.
-            <br>Our staff epitomizes professionalism and diligence, they never take pauses or sleep on the job, or at least not today, i think...
-            <br>Today, as always, they remain steadfast, their tireless dedication ensuring the seamless operation of this page.
-            <br>Or any pages that you ever opened for that matter.
-        </p>
-    </section>
-
-    <div style="margin-bottom: 200px;">
-        <button class="previousButton" onclick="prevImage()"></button>
-        <img onclick="changeImage();" id="randomImage" src="" alt="Random Image">
-        <button class="nextButton" onclick="nextImage()"></button>
-    </div>
-
-    <footer>
-        <div class="footer_div" style="margin-top: 100px;">
-            <img class="ico_footer" src="../web_cat_img/facebook_logo.png">
-            <img class="ico_footer" src="../web_cat_img/insta_logo.png">
-            <img class="ico_footer" src="../web_cat_img/twitter_logo.png">
-        </div>
-        <div class="footer_div" style="margin-bottom: 50px;">
-            <a href="https://www.facebook.com/">MIAOUBOOK</a>
-            <a href="https://www.instagram.com/">INSTAMIA</a>
-            <a href="https://twitter.com/">BLUE-SNACK</a>
-        </div>
-        <a href="/webcat/ml/mentions_legales.html">- LEGAL NOTICES -<br>(boring stuff, really, dont go look into this, i mean we are obligated to include it, but it will bore you, like, really)
-        <br>dont do it! every seconds you spend in this next page, a kitten dies. so dont</a>
-    </footer>
-
-    <script>
-        changeImage();
-    </script>
-</body>
-</html>

Transcendence/srcs/frontend/src/webcat/style.css

@@ -1,137 +0,0 @@
-:root {
-    /* custom CSS variables */
-    --clr-dark: #0f172a;
-    --clr-light: #f1f5f9;
-    --clr-accent: #e11d48;
-    }
-
-body {
-    background-color: black;
-    color: #696969;
-    font-family: 'Times New Roman', serif;
-    font-size: 20px;
-    line-height: 1.5;
-    text-align: center;
-}
-
-a {
-    text-decoration: none;
-    color: #5c5c5c;
-}
-a:hover {
-    color: rgb(218, 145, 12);
-}
-
-/**************************************************/
-/* CLASS */
-.footer_div {
-    display: flex;
-    justify-content: space-around;
-    /* padding: 20px; */
-    /* margin-top: 80px;
-    margin-bottom: 100px; */
-}
-
-.ico_footer {
-    text-align: center;
-    width: 25px;
-    vertical-align: top;
-    /* padding-right: 5px; */
-}
-
-/* INDEX */
-.header_index {
-    display: flex;
-    justify-content: space-between;
-    text-align: justify;
-    align-items: center;
-    border: 2px solid rgb(218, 145, 12);
-    border-radius: 25px;
-}
-
-.header1 {
-    color: rgb(218, 145, 12);
-    border: 3px solid rgb(218, 145, 12);
-    padding: 20px;
-    border-radius: 25px;
-}
-
-.input {
-    box-sizing: border-box;
-    width: 100%;
-    border: 3px solid rgb(218, 145, 12);
-}
-input:focus {
-    outline: none;
-    border-color: rgb(218, 145, 12);
-    box-shadow: 0 0 5px rgb(218, 145, 12);
-}
-
-.popup-chaberu {
-position: fixed;
-left: 75%;
-transform: translateX(-50%);
-padding: 20px;
-z-index: 1000;
-
-display: flex;
-height: 400px;
-width: 250px;
-color: var(--color1);
-font-weight: bold;
-
-font-size: 25px;
-justify-content: center;
-align-items: center;
-text-align: center;
-}
-/**************************************************/
-/* BUTTONS */
-.nextButton {
-    width: 0;
-    height: 0;
-    border-style: none;
-
-    display: inline-block;
-    padding: 10px;
-    cursor: pointer;
-    background-color: white;
-    border-radius: 0px;
-    clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
-    outline: none;
-    text-align: left;
-}
-
-.previousButton {
-    width: 0;
-    height: 0;
-    border-style: none;
-
-    display: inline-block;
-    padding: 10px;
-    cursor: pointer;
-    background-color: rgb(218, 145, 12);
-    border-radius: 0px;
-    clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
-    outline: none;
-    text-align: left;
-}
-
-.button1 {
-    display: inline-block;
-    padding: 10px 20px;
-    background-color: #000000;
-    color: #8e8e8e;
-    text-align: center;
-    text-decoration: none;
-
-    font-size: 16px;
-    cursor: pointer;
-    border: 3px solid #363636;
-    border-radius: 6px;
-    transition: background-color 0.3s;
-}/*home 🐱?*/
-.button1:hover {
-    background-color: rgb(202, 135, 10);
-    color: black;
-}