--- a/web/index.html Fri Nov 16 12:53:58 2012 +0100
+++ b/web/index.html Sun Dec 09 19:59:03 2012 +0100
@@ -1,53 +1,114 @@
<!DOCTYPE html>
<html lang="fr">
- <head>
- <meta charset="utf-8">
- <title>The End - @todo</title>
- <link rel="stylesheet" href="static/res/css/style.css" />
- </head>
- <body>
-
- <!-- Content Video + Controls -->
- <div id="playerContainer">
- <!-- Video -->
- <div id="video">
- </div>
- <!-- /Video -->
-
- <!-- Controls container -->
- <div id="controlContainer">
- <div id="controlbar">
- <button id="btnPlay" class="bnt"
- onClick="incPlayer.ctrlPlay(this);">Play/Pause</button><!--
-
- --><button id="btnBck" class="bnt"
- onClick="incPlayer.ctrlBackward(this);">Back</button><!--
-
- --><button id="btnFwd" class="bnt"
- onClick="incPlayer.ctrlForward(this);">Forward</button><!--
-
- --><button id="btnFullScr" class="bnt"
- onClick="incPlayer.ctrlFullscreen(this);">FS</button><!--
-
- --><button id="btnHD" class="bnt"
- onClick="incPlayer.ctrlHd(this);">HD</button>
- </div>
- </div>
- <!-- /Controlbar container -->
- </div>
- <!-- /Content Video + Controls -->
-
- <!-- jQuery -->
- <script src="static/res/js/jquery-1.8.2.min.js"></script>
- <script src="static/res/js/popcorn-complete.js"></script>
- <script src="static/res/js/popcorn.sequence.js"></script>
- <script src="static/res/js/incplayer.js"></script>
+ <head>
+ <meta charset="utf-8">
+ <title>The End - @todo</title>
+
+ <meta name="description" content="@todo">
+
+ <!-- Mobile Specific Metas -->
+ <meta name="viewport" content="initial-scale=1.0, width=device-width" />
+
+ <link rel="stylesheet" href="static/res/css/style_1024.css" />
+ <!-- stylesheet for ipad 3
+ <link rel="stylesheet" href="static/res/css/style_2048.css" />
+ -->
+
+ </head>
+ <body>
+ <!-- div content - site takes the full height of browser -->
+ <div id="content">
+
+ <!-- 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 "conteneur_vcentering" -->
+ <header id="top" class="conteneur_vcentering">
+ <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">
+ <canvas id="mosaic" width="100" height="100"></canvas>
+ </section>
+
+ <!-- change with js: height and line-height (the same size) of "conteneur_vcentering" -->
+ <section id="bottom" class="conteneur_vcentering">
+ <div class="box_vcentering">
+ <p class="big_link"><a href ="/">COMPOSEZ VOTRE FILM</a></p>
+ </div>
+ </section>
+ </div>
+ <!-- /div content_top -->
+
+ <footer id="footer">
+ <ul id="logo_partners" class="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 id="socialMedia" class="floatR">
+ <li><a href="/">Mentions légales</a></li>
+ <li><a href="/" target="_blank"><img alt="Partager The End sur Facebook" src="static/res/img/footer/facebook.png" width ="50"/></a></li>
+ <li><a href="/" target="_blank"><img alt="Partager The End sur Twitter" src="static/res/img/footer/twitter.png"/></a></li>
+ </ul>
+ </footer>
+
+ </div>
+
+ <!-- Metanav FranceTV -->
+ <script src="http://static.francetv.fr/js/jquery.metanav-min.js" charset="utf-8"></script>
+ <!-- JavaScript -->
+ <script src="static/res/js/jquery-1.8.2.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>
$(function() {
- if (incPlayer.init("video", "#playButton", "static/res/json/sequences.json", true)) {
- incPlayer.createPopSequence();
- }
+ // Init the resize object
+ incResize.init("content", "top", "mosaic", "bottom", "footer", 130, 1800/750, null, incMosaic.registerPostNewCanvasSize);
+
+ // Set mosaic pair of images
+ incMosaic.addPairImages("static/res/img/accueil-00.jpg", "static/res/img/accueil-01.jpg");
+ incMosaic.addPairImages("static/res/img/accueil-02.jpg", "static/res/img/accueil-03.jpg");
+ incMosaic.addPairImages("static/res/img/accueil-04.jpg", "static/res/img/accueil-05.jpg");
+
+ // Start mosaic effect
+ incMosaic.start("mosaic", 9, 5);
});
- </script>
- </body>
+ </script>
+ </body>
</html>
\ No newline at end of file