<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8"/>
	<title>Smart Pass</title>
	<meta content='user-scalable=0' name='viewport' />
	<link rel="icon" type="image/ico" href="mmd/favicon.ico"/>
	<link rel="stylesheet" type="text/css" href="style/splasher.css"/>
	<link rel="stylesheet" type="text/css" href="style/loader.css"/>
	<link rel="stylesheet" type="text/css" href="style/style.css"/>
	<!--<link rel="stylesheet" type="text/css" href="style/orientation.css"/>-->
	<script src="script/jquery.js"></script>
	<script src="script/jquery-ui.js"></script>

	<!-- Favicon -->
	<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
	<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
	<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
	<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
	<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
	<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
	<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
	<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
	<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
	<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
	<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
	<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
	<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
	<link rel="manifest" href="/manifest.json">
	<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#b11111">
	<meta name="msapplication-TileColor" content="#b11111">
	<meta name="msapplication-TileImage" content="/mstile-144x144.png">
	<meta name="theme-color" content="#b11111">

	<style type="text/css">
	@media (orientation: portrait) {
	#warning { display: none; }
	}
	@media (orientation: landscape) {
	#splasher-splash, #loader-load, #content { display: none; }
	#warning { display: block; background-color: #333333; color: white; width: 100%; height: 100%; font-size: 1.4em; }
	#warning p {  margin-top: 50vh; transform: translateY(-50%); }
	}
	.main:not(:last-child) {
		border-bottom: 1px solid black;
	}
	</style>
</head>
<body id="container">
	<div id="splasher-splash">
		<div id="logo"></div>
		<div id="splasher"></div>
		<div class="splasher-section section-left"></div>
		<div class="splasher-section section-right"></div>
	</div>
	<div id="loader-load">
		<div id="loader"></div>
		<div class="loader-section section-left"></div>
		<div class="loader-section section-right"></div>
	</div>

	<div id="content">
		<div id="header">
			<img id="Smart_Pass" src="mmd/Smart_Pass.svg" alt="Smart Pass Logo"/>
			<img id="options" src="mmd/icon_Gear.svg" alt="options"/>
		</div>
		<div id="corps">
			<div id="menu_option">
				<a href="mentions.php?splash=1" style="text-decoration:none;color:white;" class="button_scroll">
					<p id="" style="font-size:3em;margin:0;padding-top:40px;padding-bottom:40px;">Mentions Légales</p>
				</a>
			</div>
			<div class="main">
				<a href="parcours.php?splash=1&theme=1" class="theme_box">
					<img class="box_img" src="mmd/pointer_paris.svg" alt="Thème"/>
					<p class="box_text">Deux parisiens à Deauville</p>
				</a>
			</div>
			<div class="main">
				<a href="parcours.php?splash=1&theme=2" class="theme_box">
					<img class="box_img" src="mmd/pointer_cinema.svg" alt="Thème"/>
					<p class="box_text">Deauville et le Cinéma</p>
				</a>
			</div>
			<div class="main">
				<a href="parcours.php?splash=1&theme=3" class="theme_box">
					<img class="box_img" src="mmd/pointer_construction.svg" alt="Thème"/>
					<p class="box_text">La construction de Deauville</p>
				</a>
			</div>
		</div>
		<div id="footer">
			<a class="options" href="index.php?splash=1"><img class="options_img" src="mmd/icon_Home.svg" alt="Home"/></a>
			<a class="options" href="index.php?splash=1"><img class="options_img" src="mmd/icon_Back.svg" alt="Back"/></a>
		</div>
	</div>

	<script type="text/javascript" src="script/script.js"></script>
	<div id="warning"><p>Veuillez positionner votre smartphone en mode portrait s'il vous plait.</p></div>

</body>
</html>