web/index.html
author ymh <ymh.work@gmail.com>
Tue, 22 Jan 2013 14:45:24 +0100
changeset 100 befcb69a8279
parent 94 873b0e9ff7f6
child 103 be6c1f9cc258
permissions -rw-r--r--
Added tag V01.19 for changeset 44647228cfb9

<!DOCTYPE html>
<html lang="fr"
      xmlns:og="http://ogp.me/ns#"
      xmlns:fb="https://www.facebook.com/2008/fbml">
	<head>
		<meta charset="utf-8">
		<title>The End, etc.</title>
		
		<meta name="description" content="Géraldine Michelon présente The End, etc. Un projet écrit et réalisé par Laetitia Masson. Une coproduction France Télévisions - Memo Prod avec la participation du Centre national du cinéma et de l'image animée, Incandescence et Institut de recherche et de l'innovation du Centre Georges Pompidou, en participation avec France Inter.">
		<link rel="icon" href="static/res/img/favicon.ico" />		
		
		<!-- Site Optimization for Facebook -->
        <meta property="og:title" content="The End, etc." />
		<meta property="og:type" content="website" />
		<meta property="og:image" content="http://www.clients.incandescence.com/theend/theend_fb.jpg" />
		<meta property="og:site_name" content="The End, etc." />
        <meta property="og:description" content="The End, etc. : une expérience web de Laetitia Masson"/>		
		
		<!-- Mobile Specific Metas -->		
		<meta name="viewport" content="user-scalable=no">
		<!--
		<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />
		-->

		<!-- Test Smartphone  -->
	    <script src="static/res/js/incdetectmobile.js"></script>        
		<script>
			if (IsSmartphone()) { location.href = "mindex.html"; }	
		</script>
		<!-- Metanav FranceTV 	-->
		<script src="http://static.francetv.fr/js/jquery.metanav-min.js" charset="utf-8"></script>

		<link rel="stylesheet" href="static/res/css/style_1024.css" /> 

	</head>
	<body>
		<!-- div content - site takes the full height of browser -->	
		<div id="content" class="smallMargin">
		
			<!-- div content_top - the elements takes the full height of "content_top" -->				
			<div id="content_top">
				
				<!--  change with js: height and line-height (the same size) of "container_vcentering"  -->
				<header id="top" class="container_vcentering box_transparance"><!--
					--><div id="title_hp" class="box_vcentering">
						<h2>UNE EXPÉRIENCE DE CINÉMA</h2>
						<h1>THE END, ETC.</h1>
						<h2 class="h2_exeption">DE LAETITIA MASSON</h2>
					</div><!--
				--></header>	
				
				<section id="main">
		            <div id="bd_noir"></div> 
		            <canvas id="mosaic" width="100" height="100"></canvas> 
				</section>
				
				<!--  change with js: height and line-height (the same size) of "container_vcentering"  -->
				<section id="bottom" class="container_vcentering box_transparance">
					<div class="box_vcentering">
						<p class="big_link pointer"><a onClick="fadeAndNext();">COMPOSEZ VOTRE FILM</a></p>
					</div>
				</section>
			</div>
			<!-- /div content_top -->				

			<footer id="footer" class="box_transparance clearfix">
				<ul class="logo_partners floatL">
					<li>UNE CO-PRODUCTION
						<ul>
							<li>
								<a href="http://www.francetv.fr/nouvelles-ecritures" target="_blank">
									<img alt="Nouvelles écritures" src="static/res/img/footer/francetv.png" />
								</a>
							</li><!--
							--><li>
								<a href="http://www.memoprod.fr" target="_blank">
									<img alt="Memo prod." src="static/res/img/footer/memoprod.png" />
								</a>
							</li>
						</ul>
					</li><!--
					--><li>AVEC LE SOUTIEN DE
						<ul>
							<li>
								<a href="http://www.cnc.fr" target="_blank">
									<img alt="CNC" src="static/res/img/footer/cnc.png" />
								</a>
							</li><!--
							--><li>
								<a href="http://www.incandescence.com" target="_blank">
									<img alt="Incandescence" src="static/res/img/footer/inc.png" />		
								</a>
							</li><!--
							--><li>
								<a href="http://www.iri.centrepompidou.fr" target="_blank">
									<img alt="iri Centre Pompidou" src="static/res/img/footer/iri.png" />		
								</a>
							</li>
						</ul>
					</li>
				</ul>
				<ul class="logo_partners floatL">
					<li>EN PARTENARIAT AVEC
						<ul>
							<li class="txt_hidden logo_bg">
								<a href="http://www.franceinter.fr/" target="_blank">www.franceinter.fr									
								</a>
							</li>
						</ul>
					</li>	
				</ul>
				<ul id="socialMedia" class="floatR">
					<li class="license"><a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/fr/" target="_blank"><img alt="Licence Creative Commons" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-nd/3.0/fr/80x15.png" /></a></li><!--
					--><li><a class="pointer" onclick="popup('popUpDiv', 'content')">Mentions légales</a></li><!--
					--><li class="socialLogo"><a href="http://www.facebook.com/share.php?u=http://www.clients.incandescence.com/theend/" target="_blank"><img alt="Partager The End sur Facebook" src="static/res/img/footer/facebook.png"/></a></li><!--
					--><li class="socialLogo"><a href="https://twitter.com/share?url=https%3A%2F%2Fwww.clients.incandescence.com%2Ftheend%2F" target="_blank"><img alt="Partager The End sur Twitter" src="static/res/img/footer/twitter.png"/></a></li>
				</ul>				
			</footer>
			<section id="popUpDiv" style="display:none;">
				<div id="popUpTitle">
					<h2>Mentions Légales</h2>
					<a id="popUpClose" class="pointer" onclick="popup('popUpDiv', 'content')">
						<img alt="Fermer" src="static/res/img/popUpClose.png"/>
					</a>
				</div>
				<div id="popUpTxtScroll">				
					<p><span class="gris">Editeur :</span> FRANCE TELEVISIONS<br>
					<span class="gris">Siège social :</span> 7, Esplanade Henri de France 75015 PARIS<br>
					<span class="gris">RCS de Paris :</span> 432 766 947<br>
					<span class="gris">Directeur de la Publication :</span> Rémy Pflimlin<br>
					<span class="gris">Tel :</span> (+33) 08 90 71 02 02 (0.15 €/min)</p>
					<p><span class="gris">Hébergeur :</span> FRANCE OXALIDE<br>
					<span class="gris">Siège social :</span> 25, Boulevard de Strasbourg 75010 Paris<br>
					<span class="gris">Tel :</span> + 33(0)1 75 771 660</p>
					<h3>DONNEES PERSONNELLES</h3>
					<p>En application de la loi n°78-17 du 6 janvier 1978 relative à l’informatique, aux fichiers et aux libertés, chaque internaute dispose des droits d’opposition (article 38 de la loi), d’accès (articles 39, 41 et 42 de la loi) et de rectification (article 40 de la loi) des données le concernant. </p>
					<p>Ainsi, il peut exiger que soient rectifiées, complétées, clarifiées, mises à jour ou effacées les informations le concernant qui sont inexactes, incomplètes, équivoques, périmées, ou dont la collecte ou l’utilisation, la communication ou la conservation est interdite.</p>
					<p>Chaque internaute peut exercer ces droits :<br>
					- soit en accédant à son compte à l’aide de son e-mail et de son mot de passe à l’adresse suivante : http://www.leclubfrancetelevisions.fr<br>
					- soit en écrivant à FranceTélévisions - A l’attention de Monsieur le Responsable du Service Inscription Internet - 7 Esplanade Henri de France 75015 Paris.</p>
					<h3>CREDITS</h3>
					<p>Les dépêches de presse et contenus graphiques d’agence utilisés dans la préparation des informations sont la propriété intellectuelle des différentes agences partenaires de francetvinfo (AFP, Reuters, MaxpPPP, Sipa, Getty).</p>
					<h3>LOGICIELS</h3>
					<p>Certains sites de France Télévisions sont créés à partir des logiciels libres (sous licence GPL) de publication Spip (http://www.uzine.net/spip) et Drupal (http://drupal.org).</p>
				</div>
			</section>		
		</div>	
		<div id="blanket" style="display:none;"></div>

		<!-- JavaScript -->		
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
        <script src="static/res/js/ease.js"></script>        
        <script src="static/res/js/incresize.js"></script>
        <script src="static/res/js/incmosaic.js"></script>
        <script src="static/res/js/popup.js"></script>
        <script>        
            $(function() {
            	// Init the resize object
            	incResize.init("content", "top", "mosaic", "bottom", "footer", 130, 1800/750, false, [incMosaic.registerPostNewCanvasSize, resizePopup]);

            	// Set the images for the mosaic effects
                incMosaic.addImageUrl("static/res/img/accueil-00.jpg");
                incMosaic.addImageUrl("static/res/img/accueil-01.jpg");
                incMosaic.addImageUrl("static/res/img/accueil-02.jpg");
                incMosaic.addImageUrl("static/res/img/accueil-03.jpg");
                incMosaic.addImageUrl("static/res/img/accueil-04.jpg");
                incMosaic.addImageUrl("static/res/img/accueil-05.jpg");

                // Start mosaic effect
    			incMosaic.start("mosaic", 1, 9, 5, true, false, null, null);
            });

            var cliked = false;
            var fadeAndNext = function() {
            	if (cliked) {
            		return;
            	}
            	
            	cliked = true;
            	var logoFadeTime = 4000;
            	var mosaicFadeStartAtTime = 3000;
            	var nextPageTime = 6000;

            	// Fade on elements
            	$(".box_transparance").animate({opacity: 0}, logoFadeTime);
            	
            	setTimeout(function() { 
            		$("#bd_noir").animate({opacity: 1}, nextPageTime - mosaicFadeStartAtTime - 100); 
            	}, mosaicFadeStartAtTime);

            	setTimeout(function() {
            		location.href = "prologue-the-end-etc.html";
            	}, nextPageTime);
            }

            var resizePopup = function() {
            	popupPosition('popUpDiv', 'content');
            }
        </script>
	</body>
</html>