<div id="divNotification">
</div>
<div id="topBar">
	<h1>METH</h1>
	<div id="topButton">
		<p id="buttonPlay">PLAY</p>
		<p id="buttonProject">PROJECT</p>
		<p id="buttonAuthors">AUTHORS</p>
	</div>
	<div id="loginButton">
		<p>LOGIN</p>
	</div>
	<div id="popMenuLoginButton">
		<p>Profil</p>
		<p>Settings</p>
		<p>Logout</p>
	</div>
</div>
	<div id="loginPopup" class="popup">
		<div class="containerHomePage">
			<div class="left-side">
				<canvas id="canvas-left-side" style="width: 100%; height: 100%;"></canvas>
			</div>
			<div class="right-side">
				<img id="cross-login" src="/static/img/profilPage/back.svg"></img>
				<h1>Access to a new WORLD</h1>
				<form id="loginForm">
					<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" href="{{ link42 }}">Log with <img id="logo-ft" src="/static/img/homePage/42logo.png"></img></button>
				</form>
			</div>
			<div class="right-side-register">
				<h1>Welcome to a new WORLD</h1>
				<form id="registerForm">
					<label for="username">Username</label>
					<input type="username" id="username" name="username" placeholder="Username">

					<label for="email">Email</label>
					<input type="email" id="email-register" name="email" placeholder="Email">
	
					<label for="password">Password</label>
					<input type="password" id="password-register" name="password" placeholder="Password">
	
					<label for="password">Confirm password</label>
					<input type="password" id="password-confirm" name="password" placeholder="Confirm password">

					<button type="submit" class="login-btn">Register</button>
					<div class="old-player">
						Already have an account? <a href="#">Log in</a>
					</div>
				</form>
			</div>
		</div>
		
	</div>
<div class="centered-text">Click on the TV screen to play</div>
<div id="chatButton">
	<span class="notification-badge"></span>
	<img src="/static/img/homePage/bulle.png">
</div>
<div id="chatDiv">
	<div id="topChatHome">
		<h1>Chat</h1>
		<div id="topChatCross"><span>&times;</span></div>
	</div>
	<div id="messageListChatHome">
		<p id="infoChat">You are not connected to the chat</p>
	</div>
</div>
<section class="homeSection">
</section>
<section class="homeSection relative" id="project">
	<img id="firstBall" src="/static/img/homePage/ball3D2.png">
	<img id="secondBall" src="/static/img/homePage/ball3D3.png">
	<div class="relative">
		<p id="firstText">Pong is one of the earliest arcade video games, released in 1972 by Atari, where two players control vertical paddles on opposite sides of the screen to bounce a ball back and forth. The objective is to score points by making the ball pass the opponent's paddle, much like a digital version of table tennis.</p>
		<p id="secondText">The "ft_transcendence" project is a full-stack web application development challenge that involves creating a multiplayer game platform, integrating features like real-time gameplay, user authentication, chat, and social interactions, GDPR friendly.</p>
	</div>
</section>
<section class="homeSection" id="authors">
	<div class="team">
		<div class="team-member">
			<img src="/static/img/homePage/madegryc.png" alt="Mathis" class="team-photo">
			<h2>Mathis, madegryc</h2>
			<p>Frontend / Design</p>
			<div class="info">
				<p>Mathis took charge of the front-end development, user interface and experience (UI/UX), overseeing the overall design and contributing to the conceptualization, ensuring both aesthetic appeal and ergonomic functionality.</p>
			</div>
		</div>
		<div class="team-member">
			<img src="/static/img/homePage/edbernard.png" alt="Eddy" class="team-photo">
			<h2>Eddy, edbernar</h2>
			<p>Full-stack</p>
			<div class="info">
				<p>Eddy worked on the fundamentals of back-end and front-end development, as well as game development. He have a solid grasp of Python and JavaScript, which allowed him to contribute from all angles and be involved in every aspect of the project.</p>
			</div>
		</div>
		<div class="team-member">
			<img src="/static/img/homePage/tomoron.png" alt="Tom" class="team-photo">
			<h2>Tom, tomoron</h2>
			<p>Backend</p>
			<div class="info">
				<p>Tom led back-end development with Django, PostgreSQL, and Docker, creating a secure, scalable, and efficient backbone that seamlessly integrated with the front end, ensuring smooth and reliable functionality.</p>
			</div>
		</div>
		<div class="team-member">
			<img src="/static/img/homePage/hubourge.png" alt="Hugo" class="team-photo">
			<h2>Hugo, hubourge</h2>
			<p>Game</p>
			<div class="info">
				<p>Hugo worked on the game development, implementing various advanced features using JavaScript and the Three.js library. He integrated interactive elements and immersive 3D effects to create a rich and dynamic user experience.</p>
			</div>
		</div>
	</div>
</section>
<footer>
	<div class="footer-content">
		<div class="footer-left">
			<h1>METH</h1>
			<p>ft_transcendance project<br>for 42 shcool</p>
		</div>
		<div class="footer-right">
			<p>2024</p>
		</div>
</footer>
