<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="UTF-8"/>
	<title>Smart Pass</title>
	<link rel="icon" type="image/ico" href="mmd/favicon.ico"/>
	<meta name="description" content=""/>
	<meta name="keywords" content=""/>

	<!-- Detection Smartphones / Tablettes -->
	<script src="scripts/mobile-detect.js"></script>
	<script>
		var md = new MobileDetect(window.navigator.userAgent);
		if (md.mobile()) {
			window.location.href = "webapp/index.php";
		}
	</script>

	<!-- Style Principale -->
	<link rel="stylesheet" type='text/css' href="styles/style.css"/>

	<!-- Formulaire -->
	<link rel="stylesheet" type='text/css' href="styles/sky-forms.css"/>
	<link rel="stylesheet" type='text/css' href="styles/sky-forms-red.css"/>

</head>
<body>

	<!-- particles.js -->
	<div id="particles-js"></div>
	<script src="scripts/particles.js"></script>
	<script src="scripts/particules-app.js"></script>

	<div id="logo_container"><img id="logo" src="mmd/Logo.svg" alt="Logo"/></div>

	<div id="title_container"><img id="title" src="mmd/Title.svg" alt="Title"/></div>

	<div id="subtitle_container"><h1>Parcours interactifs 4D</h1></div>

	<!-- <div class="button_container">
		<div class="button_circle">
			<img id="button_image" src="mmd/Plus.svg" alt="En Savoir +"/>
		</div>
	</div> -->

	<div id="formulaire_box" style="display:none;">
		<div id="formulaire">
			<form action="contact.php" method="POST" class="sky-form">
				<img id="close" src="mmd/Close.svg" alt="Fermer"/>
				<header>
					Formulaire de Contact
				</header>
				<fieldset>
					<div class="row">
						<section class="col col-6">
							<label class="label">Nom</label>
							<label class="input">
								<i class="icon-append icon-user"></i>
								<input type="text" name="nom">
							</label>
						</section>
						<section class="col col-6">
							<label class="label">E-mail</label>
							<label class="input">
								<i class="icon-append icon-envelope-alt"></i>
								<input type="email" name="email">
							</label>
						</section>
					</div>
					<section>
						<label class="label">Sujet</label>
						<label class="input">
							<i class="icon-append icon-tag"></i>
							<input type="text" name="sujet">
						</label>
					</section>
					<section>
						<label class="label">Message</label>
						<label class="textarea">
							<i class="icon-append icon-comment"></i>
							<textarea rows="4" name="message"></textarea>
						</label>
					</section>
				</fieldset>
				<footer>
					<button type="submit" name="submit" class="button">Envoyer le Message</button>
				</footer>
			</form>
		</div>
	</div>

	<!-- Jquery -->
	<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.js"></script>

	<!-- Script Principale -->
	<script type="text/javascript">
		$( ".button_circle" ).click(function() {
			$( "#formulaire_box" ).slideToggle( "slow", function() {});
			$( "#logo_container" ).fadeToggle( "slow", "linear" );
			$( "#title_container" ).fadeToggle( "slow", "linear" );
			$( "#subtitle_container" ).fadeToggle( "slow", "linear" );
			$( "#button_image" ).toggleClass( "cross" );
		});
		$( "#close" ).click(function() {
			$( "#formulaire_box" ).slideToggle( "slow", function() {});
			$( "#logo_container" ).fadeToggle( "slow", "linear" );
			$( "#title_container" ).fadeToggle( "slow", "linear" );
			$( "#subtitle_container" ).fadeToggle( "slow", "linear" );
			$( "#button_image" ).toggleClass( "cross" );
		});
	</script>

</body>
</html>