Site :
- Delete JS (fake html login page)
- Add Login page html css (display none)
This commit is contained in:
Mathis Degryck
@ -28,6 +28,35 @@
|
|||||||
<p>LOGIN</p>
|
<p>LOGIN</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div id="loginPopup" class="popup">
|
||||||
|
<div class="container">
|
||||||
|
<div class="left-side"></div>
|
||||||
|
<div class="right-side">
|
||||||
|
<h1>Acces to a new WORLD</h1>
|
||||||
|
<form>
|
||||||
|
<label for="email">Email</label>
|
||||||
|
<input type="email" id="email" name="email" placeholder="Email">
|
||||||
|
|
||||||
|
<label for="password">Password</label>
|
||||||
|
<input type="password" id="password" name="password" placeholder="Password">
|
||||||
|
|
||||||
|
<button type="submit" class="login-btn">Login</button>
|
||||||
|
|
||||||
|
<div class="new-player">
|
||||||
|
New player? <a href="#">Create an account</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="divider">
|
||||||
|
<span></span>
|
||||||
|
<p>Or</p>
|
||||||
|
<span></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="button" class="login-42-btn">Log with <span>42</span></button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div id="chatButton">
|
<div id="chatButton">
|
||||||
<p>CHAT</p>
|
<p>CHAT</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,59 +0,0 @@
|
|||||||
/* ************************************************************************** */
|
|
||||||
/* */
|
|
||||||
/* ::: :::::::: */
|
|
||||||
/* createThreeDiv.js :+: :+: :+: */
|
|
||||||
/* +:+ +:+ +:+ */
|
|
||||||
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
|
|
||||||
/* +#+#+#+#+#+ +#+ */
|
|
||||||
/* Created: 2024/08/07 18:09:36 by edbernar #+# #+# */
|
|
||||||
/* Updated: 2024/08/12 20:46:53 by edbernar ### ########.fr */
|
|
||||||
/* */
|
|
||||||
/* ************************************************************************** */
|
|
||||||
|
|
||||||
// import * as THREE from 'three';
|
|
||||||
|
|
||||||
function createThreeDiv()
|
|
||||||
{
|
|
||||||
const divThree = document.createElement("div");
|
|
||||||
|
|
||||||
divThree.setAttribute("id", "threeDiv");
|
|
||||||
// const scene = new THREE.Scene();
|
|
||||||
// // const camera = new THREE.PerspectiveCamera(75, divThree.innerWidth / divThree.innerHeight, 0.1, 1000);
|
|
||||||
// const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
|
|
||||||
// const renderer = new THREE.WebGLRenderer( {antialias: true} );
|
|
||||||
// // renderer.setSize(divThree.innerWidth, divThree.innerHeight);
|
|
||||||
// renderer.setSize(200, 700);
|
|
||||||
// divThree.appendChild(renderer.domElement);
|
|
||||||
// renderer.setClearColor(0x020202);
|
|
||||||
|
|
||||||
// let geometrie = new THREE.BoxGeometry(1, 1, 1);
|
|
||||||
|
|
||||||
// let materiel = new THREE.MeshBasicMaterial({color:0xffffff});
|
|
||||||
|
|
||||||
// const mesh = new THREE.Mesh( geometrie, materiel)
|
|
||||||
|
|
||||||
// camera.position.set(0, 0 ,4);
|
|
||||||
|
|
||||||
// renderer.antialias
|
|
||||||
|
|
||||||
// loop()
|
|
||||||
|
|
||||||
// function loop(){
|
|
||||||
// requestAnimationFrame(loop);
|
|
||||||
// let xsize = divThree.offsetWidth;
|
|
||||||
// let ysize = divThree.offsetHeight;
|
|
||||||
// renderer.setSize(xsize, ysize);
|
|
||||||
// camera.aspect = xsize / ysize;
|
|
||||||
// camera.updateProjectionMatrix()
|
|
||||||
// console.log(xsize, ysize);
|
|
||||||
// mesh.rotation.y += 0.001;
|
|
||||||
// mesh.rotation.x += 0.0005;
|
|
||||||
// renderer.render(scene, camera);
|
|
||||||
// }
|
|
||||||
|
|
||||||
// scene.add(mesh);
|
|
||||||
// renderer.render(scene, camera);
|
|
||||||
return (divThree);
|
|
||||||
}
|
|
||||||
|
|
||||||
export { createThreeDiv };
|
|
||||||
@ -3,17 +3,15 @@
|
|||||||
/* ::: :::::::: */
|
/* ::: :::::::: */
|
||||||
/* main.js :+: :+: :+: */
|
/* main.js :+: :+: :+: */
|
||||||
/* +:+ +:+ +:+ */
|
/* +:+ +:+ +:+ */
|
||||||
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
|
/* By: madegryc <madegryc@student.42.fr> +#+ +:+ +#+ */
|
||||||
/* +#+#+#+#+#+ +#+ */
|
/* +#+#+#+#+#+ +#+ */
|
||||||
/* Created: 2024/08/07 17:40:15 by edbernar #+# #+# */
|
/* Created: 2024/08/07 17:40:15 by edbernar #+# #+# */
|
||||||
/* Updated: 2024/08/13 00:01:42 by edbernar ### ########.fr */
|
/* Updated: 2024/08/23 18:35:44 by madegryc ### ########.fr */
|
||||||
/* */
|
/* */
|
||||||
/* ************************************************************************** */
|
/* ************************************************************************** */
|
||||||
|
|
||||||
import { createNotification as CN } from "../notification/main.js";
|
import { createNotification as CN } from "../notification/main.js";
|
||||||
import { userMeInfo, waitForLogin } from "../typeResponse/typeLogin.js";
|
import { userMeInfo, waitForLogin } from "../typeResponse/typeLogin.js";
|
||||||
import { createConnectDiv } from "./createConnectDiv.js";
|
|
||||||
import { createThreeDiv } from "./createThreeDiv.js";
|
|
||||||
|
|
||||||
function login()
|
function login()
|
||||||
{
|
{
|
||||||
@ -21,33 +19,26 @@ function login()
|
|||||||
const pLoginButton = loginButton.getElementsByTagName('p')[0];
|
const pLoginButton = loginButton.getElementsByTagName('p')[0];
|
||||||
let nodeText = null;
|
let nodeText = null;
|
||||||
|
|
||||||
waitForLogin().then((token) => {
|
// waitForLogin().then((token) => {
|
||||||
nodeText = document.createTextNode(userMeInfo.username);
|
// nodeText = document.createTextNode(userMeInfo.username);
|
||||||
|
// if (userMeInfo.id !== -1)
|
||||||
if (token !== undefined)
|
// {
|
||||||
{
|
// loginButton.replaceChild(nodeText, pLoginButton);
|
||||||
document.cookie = "token={" + token + "}; path=/; Secure; SameSite=Strict; max-age=3600";
|
// loginButton.addEventListener('click', showMenu);
|
||||||
}
|
// }
|
||||||
if (userMeInfo.id !== -1)
|
// else
|
||||||
{
|
|
||||||
loginButton.replaceChild(nodeText, pLoginButton);
|
|
||||||
loginButton.addEventListener('click', showMenu);
|
|
||||||
}
|
|
||||||
else
|
|
||||||
loginButton.addEventListener('click', showLoginDiv);
|
loginButton.addEventListener('click', showLoginDiv);
|
||||||
});
|
// });
|
||||||
}
|
}
|
||||||
|
|
||||||
function showLoginDiv()
|
function showLoginDiv()
|
||||||
{
|
{
|
||||||
const divLogin = document.createElement("div");
|
const popout = document.getElementById('loginPopup');
|
||||||
const threeDiv = createThreeDiv();
|
|
||||||
const connectDiv = createConnectDiv(divLogin);
|
|
||||||
|
|
||||||
divLogin.setAttribute("id", "loginDiv");
|
if (popout.style.display === 'flex')
|
||||||
divLogin.appendChild(threeDiv);
|
popout.style.display = 'none';
|
||||||
divLogin.appendChild(connectDiv);
|
else
|
||||||
document.body.appendChild(divLogin);
|
popout.style.display = 'flex';
|
||||||
}
|
}
|
||||||
|
|
||||||
function showMenu()
|
function showMenu()
|
||||||
|
|||||||
@ -3,14 +3,14 @@
|
|||||||
/* ::: :::::::: */
|
/* ::: :::::::: */
|
||||||
/* main.js :+: :+: :+: */
|
/* main.js :+: :+: :+: */
|
||||||
/* +:+ +:+ +:+ */
|
/* +:+ +:+ +:+ */
|
||||||
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
|
/* By: madegryc <madegryc@student.42.fr> +#+ +:+ +#+ */
|
||||||
/* +#+#+#+#+#+ +#+ */
|
/* +#+#+#+#+#+ +#+ */
|
||||||
/* Created: 2024/07/30 13:50:35 by edbernar #+# #+# */
|
/* Created: 2024/07/30 13:50:35 by edbernar #+# #+# */
|
||||||
/* Updated: 2024/08/22 18:01:38 by edbernar ### ########.fr */
|
/* Updated: 2024/08/23 17:47:37 by madegryc ### ########.fr */
|
||||||
/* */
|
/* */
|
||||||
/* ************************************************************************** */
|
/* ************************************************************************** */
|
||||||
|
|
||||||
import { liveChat } from "/liveChat/main.js";
|
import { liveChat } from "./liveChat/main.js";
|
||||||
import { login } from "./login/main.js";
|
import { login } from "./login/main.js";
|
||||||
import { home3D } from "./home3D/home3D.js"
|
import { home3D } from "./home3D/home3D.js"
|
||||||
|
|
||||||
@ -25,6 +25,10 @@ window.addEventListener('scroll', () => {
|
|||||||
parallaxElement2.style.transform = `translateX(50%) translateY(${-parallaxSpeed}px) rotate(${rotationAngle}deg)`;
|
parallaxElement2.style.transform = `translateX(50%) translateY(${-parallaxSpeed}px) rotate(${rotationAngle}deg)`;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
document.getElementById('closePopupBtn').addEventListener('click', function() {
|
||||||
|
document.getElementById('loginPopup').style.display = 'none';
|
||||||
|
});
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
liveChat();
|
liveChat();
|
||||||
login();
|
login();
|
||||||
|
|||||||
@ -3,10 +3,10 @@
|
|||||||
/* ::: :::::::: */
|
/* ::: :::::::: */
|
||||||
/* home.css :+: :+: :+: */
|
/* home.css :+: :+: :+: */
|
||||||
/* +:+ +:+ +:+ */
|
/* +:+ +:+ +:+ */
|
||||||
/* By: marvin <marvin@student.42.fr> +#+ +:+ +#+ */
|
/* By: madegryc <madegryc@student.42.fr> +#+ +:+ +#+ */
|
||||||
/* +#+#+#+#+#+ +#+ */
|
/* +#+#+#+#+#+ +#+ */
|
||||||
/* Created: 2024/08/07 12:00:55 by edbernar #+# #+# */
|
/* Created: 2024/08/07 12:00:55 by edbernar #+# #+# */
|
||||||
/* Updated: 2024/08/17 23:27:37 by marvin ### ########.fr */
|
/* Updated: 2024/08/23 18:32:53 by madegryc ### ########.fr */
|
||||||
/* */
|
/* */
|
||||||
/* ************************************************************************** */
|
/* ************************************************************************** */
|
||||||
|
|
||||||
@ -48,6 +48,9 @@ body {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: #020202;
|
background-color: #020202;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
font-family: "Poppins", sans-serif;
|
||||||
|
font-weight: 500;
|
||||||
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -69,9 +72,6 @@ body {
|
|||||||
color: white;
|
color: white;
|
||||||
display: flex;
|
display: flex;
|
||||||
font-size: 25px;
|
font-size: 25px;
|
||||||
font-family: "Poppins", sans-serif;
|
|
||||||
font-weight: 500;
|
|
||||||
font-style: normal;
|
|
||||||
padding-left: 60px;
|
padding-left: 60px;
|
||||||
gap: 6rem;
|
gap: 6rem;
|
||||||
}
|
}
|
||||||
@ -112,9 +112,6 @@ body {
|
|||||||
height: 40px;
|
height: 40px;
|
||||||
width: 130px;
|
width: 130px;
|
||||||
color: black;
|
color: black;
|
||||||
font-family: "Poppins", sans-serif;
|
|
||||||
font-weight: 500;
|
|
||||||
font-style: normal;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
@ -127,6 +124,148 @@ body {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.popup {
|
||||||
|
display: none; /* La popup est masquée par défaut */
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
backdrop-filter: blur(5px);
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
width: 70%;
|
||||||
|
height: 80%;
|
||||||
|
background-color: #020202;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-side {
|
||||||
|
background-color: #D3D3D3;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-side {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0;
|
||||||
|
padding-inline: 180px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-side h1 {
|
||||||
|
font-size: 2rem;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
border: none;
|
||||||
|
padding: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-family: "Poppins", sans-serif;
|
||||||
|
font-weight: 500;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
padding: 15px;
|
||||||
|
font-size: 1rem;
|
||||||
|
cursor: pointer;
|
||||||
|
border: none;
|
||||||
|
font-family: "Poppins", sans-serif;
|
||||||
|
font-weight: 500;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.login-btn {
|
||||||
|
background-color: #fff;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
transition: background-color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-btn:hover {
|
||||||
|
background-color: #f0f0f0e1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.new-player {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.new-player a {
|
||||||
|
color: white;
|
||||||
|
text-decoration: underline;
|
||||||
|
transition: color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.new-player a:hover {
|
||||||
|
color: #f0f0f0e1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider span {
|
||||||
|
flex: 1;
|
||||||
|
height: 1px;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider p {
|
||||||
|
margin: 0 10px;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-42-btn {
|
||||||
|
background-color: #fff;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
transition: background-color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-42-btn span {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-42-btn:hover {
|
||||||
|
background-color: #f0f0f0e1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
right: 10px;
|
||||||
|
font-size: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
.homeSection{
|
.homeSection{
|
||||||
min-height: 100svh;
|
min-height: 100svh;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@ -134,9 +273,6 @@ body {
|
|||||||
|
|
||||||
.homeSection p{
|
.homeSection p{
|
||||||
color: white;
|
color: white;
|
||||||
font-family: "Poppins", sans-serif;
|
|
||||||
font-weight: 500;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#firstText{
|
#firstText{
|
||||||
@ -204,9 +340,6 @@ body {
|
|||||||
|
|
||||||
.team h2 {
|
.team h2 {
|
||||||
color: white;
|
color: white;
|
||||||
font-family: "Poppins", sans-serif;
|
|
||||||
font-weight: 500;
|
|
||||||
font-style: normal;
|
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -251,9 +384,6 @@ footer {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
height: 150px;
|
height: 150px;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
font-family: "Poppins", sans-serif;
|
|
||||||
font-weight: 500;
|
|
||||||
font-style: normal;
|
|
||||||
color: #020202;
|
color: #020202;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -6,7 +6,7 @@
|
|||||||
/* By: madegryc <madegryc@student.42.fr> +#+ +:+ +#+ */
|
/* By: madegryc <madegryc@student.42.fr> +#+ +:+ +#+ */
|
||||||
/* +#+#+#+#+#+ +#+ */
|
/* +#+#+#+#+#+ +#+ */
|
||||||
/* Created: 2024/08/22 17:08:46 by madegryc #+# #+# */
|
/* Created: 2024/08/22 17:08:46 by madegryc #+# #+# */
|
||||||
/* Updated: 2024/08/22 19:15:25 by madegryc ### ########.fr */
|
/* Updated: 2024/08/23 18:34:42 by madegryc ### ########.fr */
|
||||||
/* */
|
/* */
|
||||||
/* ************************************************************************** */
|
/* ************************************************************************** */
|
||||||
|
|
||||||
@ -25,7 +25,6 @@ let gameMode = 0;
|
|||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
document.getElementsByClassName('game-mode')[0].addEventListener('click', function() {
|
document.getElementsByClassName('game-mode')[0].addEventListener('click', function() {
|
||||||
document.getElementById('loginPopup').style.display = 'flex';
|
document.getElementById('loginPopup').style.display = 'flex';
|
||||||
console.log('Popup opened');
|
|
||||||
});
|
});
|
||||||
|
|
||||||
document.getElementById('closePopupBtn').addEventListener('click', function() {
|
document.getElementById('closePopupBtn').addEventListener('click', function() {
|
||||||
|
|||||||
Reference in New Issue
Block a user