<div id="topBarLobby">
	<h1 id="homeButton">METH</h1>
	<div class="search-container">
		<input type="text" placeholder="Search..." class="search-input" id="searchInputUser" autocomplete="off">
	</div>
	<div id="searchResult">
	</div>
	<div id="loginButton">
		<p></p>
	</div>
	<div id="popMenuLoginButton">
		<p>Profil</p>
		<p>Settings</p>
		<p>Logout</p>
	</div>
</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>

<div class="popup-background" id="popup-skin-selector">
	<div class="popup-skin">
		<h1>Select your skin</h1>
		<div class="color-grid">
			<div class="color-box color-box-skin"></div>
			<div class="color-box color-box-skin"></div>
			<div class="color-box color-box-skin"></div>
			<div class="color-box color-box-skin"></div>
			<div class="color-box color-box-skin"></div>
			<div class="color-box color-box-skin"></div>
			<div class="color-box color-box-skin"></div>
			<div class="color-box color-box-skin"></div>
		</div>
	</div>
</div>

<div class="popup-background" id="popup-goal-selector">
	<div class="popup-skin">
		<h1>Select your goal object</h1>
		<div class="color-grid">
			<div class="color-box color-box-goal"></div>
			<div class="color-box color-box-goal"></div>
			<div class="color-box color-box-goal"></div>
			<div class="color-box color-box-goal"></div>
		</div>
	</div>
</div>

<div class="main-container">
	<div class="main">
		<div class="game-mode">
			<div class="mode-card select-card">
				<p>Multiplayer local</p>
			</div>

			<div class="mode-card-ns select-card">
				<p>Matchmaking</p>
			</div>

			<div class="mode-card-ns select-card">
				<p>Ranked</p>
			</div>

			<div class="mode-card-ns select-card">
				<p>Tournament</p>
			</div>
		</div>

		<div class="menuSelected" id="multiLocalSelected">
			<div id="whatGame">
				<p>The key to success is timing and precision, as you need to position your paddle correctly to deflect the ball at the right angle.</p>
				<span class="line" id="tournament-line1"></span>
				<div class="keys">
					<div class="key">
						<p>W</p>
					</div>
					<div class="key">
						<p>S</p>
					</div>
					<div class="key">
						<img src="/static/img/lobbyPage/up-arrow.svg"></img>
					</div>
					<div class="key">
						<img id="down-key" src="/static/img/lobbyPage/up-arrow.svg"></img>
					</div>
				</div>
				<div class="select-line">
					<div class="select-keys USButton">US</div>
					<div class="not-select-keys FRButton">FR</div>
				</div>
			</div>
		</div>
		
		<div class="menuSelected" id="multiOnlineSelected">
			<div id="whatGame">
				<p>Face off in a revolutionary Pong game like never before, where the action takes place on both the floor and ceiling thanks to gravity inverters, offering a fun and unique gameplay experience!</p>
				<span class="line"></span>
				<div class="keys">
					<div class="key">
						<p>W</p>
					</div>
					<div class="key">
						<p>A</p>
					</div>
					<div class="key">
						<p>S</p>
					</div>
					<div class="key">
						<p>D</p>
					</div>
				</div>
				<div class="select-line">
					<div class="select-keys USButton">US</div>
					<div class="not-select-keys FRButton">FR</div>
				</div>
				<span class="line" id="tournament-line1"></span>
				<div style="display: flex; flex-direction: row; justify-content: space-between; padding-inline: 10px;">
					<p>Against bot</p>
					<label class="switch">
						<input type="checkbox" id="checkBoxBot">
						<span class="slider round"></span>
					</label>
				</div>
			</div>
			<div class="skin-select">
				<div class="barSelection" id="bar">
	
				</div>
				<div  class="goalSelection" id="goal">
					
				</div>
			</div>
		</div>

		<div class="menuSelected" id="rankedSelected">
			<div id="whatGame">
				<p>Prove your skills in ranked Pong mode! Compete against players worldwide, climb the leaderboard, and show everyone you've got what it takes to reach the top!</p>
				<span class="line"></span>
				<div class="keys">
					<div class="key">
						<p>W</p>
					</div>
					<div class="key">
						<p>A</p>
					</div>
					<div class="key">
						<p>S</p>
					</div>
					<div class="key">
						<p>D</p>
					</div>
				</div>
				<div class="select-line">
					<div class="select-keys USButton">US</div>
					<div class="not-select-keys FRButton">FR</div>
				</div>
			</div>
	
			<div class="skin-select">
				<div class="barSelection" id="bar1">
	
				</div>
				<div class="goalSelection" id="goal1">
					
				</div>
			</div>
		</div>

		<div class="menuSelected" id="tournamentSelected">
			<div id="whatGame">
				<p>Compete in the ultimate Pong Tournament with up to 8 players, only the best will claim victory!</p>
				<span class="line" id="tournament-line1"></span>
				<div class="keys">
					<div class="key">
						<p>W</p>
					</div>
					<div class="key">
						<p>A</p>
					</div>
					<div class="key">
						<p>S</p>
					</div>
					<div class="key">
						<p>D</p>
					</div>
				</div>
				<div class="select-line">
					<div class="select-keys USButton">US</div>
					<div class="not-select-keys FRButton">FR</div>
				</div>
				<span class="line"></span>
				<p style="text-align: center; margin-bottom: 20px;">Tournament code</p>
				<input id="tournamentCode" class="search-input" type="text" placeholder="Enter the tournament code (empty for create one)">
				<input type="number" id="nbBot" class="search-input" placeholder="Number of bots (1-7 | default 0)">
				<span class="line" id="tournament-line2"></span>

			</div>
			<div class="skin-select">
				<div class="barSelection" id="bar2">
	
				</div>
				<div class="goalSelection" id="goal2">
					
				</div>
			</div>
		</div>

	</div>
</div>
<div class="bottom">
	<div class="buttonStartGame">
		<p>Start</p>
	</div>
</div>
<div id="divNotification">
</div>