<!DOCTYPE HTML>
<html>
    <head>
		<meta charset="utf-8">
		<title>CitizenX Loadingscreen</title>
		<link href="style.css" rel="stylesheet" type="text/css"/>
		<script src="script.js"></script>
    </head>
	
    <body onload="BG.onLoadPage()">		
		<img class="background-img CitizenXHintergrundbild2"/>		
		<svg id="cursor" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
			<polygon style="fill:#b40087;" points="284.197,328.561 346.079,469.645 297.825,490.812 249.521,512 187.628,370.917 82.26,471.745 82.49,0 429.74,319.313"/>
			<polygon style="fill:#ffffff;" points="284.197,328.561 346.079,469.645 297.825,490.812 82.49,0 429.74,319.313"/>
		</svg>		
		<div class="music-container">			
			<div class="music-warp-container">
				<div id="musicDesc" style="padding-left: 37px"></div>
				<div class="MusikLautstaerke">					
					<img id="musicVolumeIcon" src="img/icons/CitizenXIconStumm.png" onclick="V.onClickMute()"/>
					<input id="musicVolumeSlider" type="range" min="0" max="1" step=".05" value="0" onchange="V.onChangeVolume(this.value)" onmousemove="V.onChangeVolumeMouseSlider(this.value)"/>
					<audio id="audioblock"></audio>
				</div>
			</div>			
		</div>		
		<div style="height: 15px;"></div>
		<div class="content">			
			<div id="banner" class="overlay-gray">
				<img class="CitizenXHintergrundbild" id="cardBackground"/>
				<div class="overlay-shadow"></div>
				<div class="server-name-overlay servername"></div>
				<img id="cardCharacter"/>
				<div id="overlayShine"></div>				
				<div class="content-page" id="page_home" style="display: flex;">
					<div class="home-title">
						<div class="server-name servername"></div>
						<div class="server-link" id="serverLink"></div>
					</div>
					<div class="home-video-content">
						<div class="home-video-title">Bilder der Woche</div>
						<div class="home-video">
							<div class="video-block">
								<video preload="auto" playsinline class="videoPlayer" id="videoOne" onclick="VIDEO.onClickPlay(this, 0)" poster="video/CitizenXBildDerWoche1.png">
									<source type="video/mp4" src="">
								</video>
							</div>
							<div style="width: 20px;"></div>
							<div class="video-block">
								<video preload="auto" playsinline class="videoPlayer" id="videoTwo" onclick="VIDEO.onClickPlay(this, 1)" poster="video/CitizenXBildDerWoche2.png">
									<source type="video/mp4" src="">
								</video>
							</div>
						</div>
					</div>
				</div>
				<div class="content-page" id="page_news" style="display: none;">					
					<div class="news-container slider-info" id="newsContainer"></div>					
				</div>
				<div class="content-page" id="page_content" style="display: none;">
					<div class="contact-container slider-info" id="contactContainer"></div>
				</div>				
				<div class="banner-head">					
					<div id="menu">
						<div class="menu-item menu-item-active" onclick="BG.onClickPageMenu(this, 'home')">Home</div>
						<div style="width: 10px"></div>
						<div class="menu-item" onclick="BG.onClickPageMenu(this, 'news')">Changelog</div>
						<div style="width: 10px"></div>
						<!-- <div class="menu-item" onclick="BG.onClickPageMenu(this, 'rules')">Donator</div>
						<div style="width: 10px"></div> -->
						<div class="menu-item" onclick="BG.onClickPageMenu(this, 'content')">Kontakt</div>
					</div>					
					<img class="banner-logo" src="img/CitizenXLogo.png"/>
				</div>
				<div class="loadbar">
					<div class="progress-loadbar" id="progressBar"></div>
				</div>
			</div>
		</div>
    </body>
</html>