--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/web/choix-de-mots-the-end-etc.html Mon Jan 21 21:00:24 2013 +0100
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="fr">
+ <head>
+ <meta charset="utf-8">
+ <title>The End - @todo</title>
+
+ <meta name="description" content="@todo">
+ <link rel="icon" href="static/res/img/favicon.ico" />
+
+ <!-- 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="full_hightScreen">
+ <!--this div empty allows the element content_vcentering to be vertically aligned -->
+ <div class="strut"></div><!--
+ this comment corrects the white-space (display: inline);
+ --><section id="bg_mosaic" class="fullScreen_vcentering">
+ <canvas id="mosaic" width="100" height="100"></canvas>
+ </section>
+ <section id="choice" class="positionAbs">
+ <!--this div empty allows the element content_vcentering to be vertically aligned -->
+ <div class="strut"></div><!--
+ this comment corrects the white-space (display: inline);
+ --><div class="fullScreen_vcentering blue big_txt pointer">
+ <p><a id="mot1" onClick="incChoice.selectWord(0);">Famille</a></p>
+ <p><a id="mot2" onClick="incChoice.selectWord(1);">Amour</a></p>
+ <p><a id="mot3" onClick="incChoice.selectWord(2);">Travail</a></p>
+ <p><a id="mot4" onClick="incChoice.selectWord(3);">International</a></p>
+ <p><a id="mot5" onClick="incChoice.selectWord(4);">Dieu</a></p>
+ <p><a id="mot6" onClick="incChoice.selectWord(5);">Président</a></p>
+ </div>
+ </section>
+ </div>
+
+ <!-- JavaScript -->
+ <script src="static/res/js/jquery-1.8.2.min.js"></script>
+ <script src="static/res/js/jquery.cookie.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/incchoice.js"></script>
+ <script>
+ $(function() {
+ // Init the resize object
+ incResize.init("content", null, "mosaic", null, null, 130, 1527/809, false, [incMosaic.registerPostNewCanvasSize]);
+
+ // Set the mosaic effect
+ incChoice.setMosaicImages( ["choix1fond1.jpg", "choix1fond2.jpg", "choix1fond3.jpg"],
+ ["choix2fond1.jpg", "choix2fond2.jpg", "choix2fond3.jpg"],
+ ["choix3fond1.jpg", "choix3fond2.jpg", "choix3fond3.jpg"]);
+
+ // Set the list of words and the mosaic effect
+ incChoice.setWordsAndEffect(0);
+
+ // Erase chosen videos
+ incChoice.saveChosenVideos([-1, -1, -1]);
+
+ // Set video hd by default
+ incChoice.setHD(1);
+ });
+ </script>
+ </body>
+</html>
\ No newline at end of file
--- a/web/choix.html Mon Jan 21 18:23:40 2013 +0100
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,79 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
- <head>
- <meta charset="utf-8">
- <title>The End - @todo</title>
-
- <meta name="description" content="@todo">
- <link rel="icon" href="static/res/img/favicon.ico" />
-
- <!-- 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="full_hightScreen">
- <!--this div empty allows the element content_vcentering to be vertically aligned -->
- <div class="strut"></div><!--
- this comment corrects the white-space (display: inline);
- --><section id="bg_mosaic" class="fullScreen_vcentering">
- <canvas id="mosaic" width="100" height="100"></canvas>
- </section>
- <section id="choice" class="positionAbs">
- <!--this div empty allows the element content_vcentering to be vertically aligned -->
- <div class="strut"></div><!--
- this comment corrects the white-space (display: inline);
- --><div class="fullScreen_vcentering blue big_txt pointer">
- <p><a id="mot1" onClick="incChoice.selectWord(0);">Famille</a></p>
- <p><a id="mot2" onClick="incChoice.selectWord(1);">Amour</a></p>
- <p><a id="mot3" onClick="incChoice.selectWord(2);">Travail</a></p>
- <p><a id="mot4" onClick="incChoice.selectWord(3);">International</a></p>
- <p><a id="mot5" onClick="incChoice.selectWord(4);">Dieu</a></p>
- <p><a id="mot6" onClick="incChoice.selectWord(5);">Président</a></p>
- </div>
- </section>
- </div>
-
- <!-- JavaScript -->
- <script src="static/res/js/jquery-1.8.2.min.js"></script>
- <script src="static/res/js/jquery.cookie.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/incchoice.js"></script>
- <script>
- $(function() {
- // Init the resize object
- incResize.init("content", null, "mosaic", null, null, 130, 1527/809, false, [incMosaic.registerPostNewCanvasSize]);
-
- // Set the mosaic effect
- incChoice.setMosaicImages( ["choix1fond1.jpg", "choix1fond2.jpg", "choix1fond3.jpg"],
- ["choix2fond1.jpg", "choix2fond2.jpg", "choix2fond3.jpg"],
- ["choix3fond1.jpg", "choix3fond2.jpg", "choix3fond3.jpg"]);
-
- // Set the list of words and the mosaic effect
- incChoice.setWordsAndEffect(0);
-
- // Erase chosen videos
- incChoice.saveChosenVideos([-1, -1, -1]);
-
- // Set video hd by default
- incChoice.setHD(1);
- });
- </script>
- </body>
-</html>
\ No newline at end of file
--- a/web/credit.html Mon Jan 21 18:23:40 2013 +0100
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,226 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr" >
- <head>
- <meta charset="utf-8">
- <title>The End - @todo</title>
-
- <meta name="description" content="@todo">
- <link rel="icon" href="static/res/img/favicon.ico" />
-
- <!-- 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 overflow">
- <div class="btnReturn">
- <button id="btnChoice" class="btn" onClick="location.href='transition.html';">Choice</button>
- </div>
- <section id="credit">
- <h3>Géraldine Michelon </h3>
- <p class="gris">présente </p>
- <h1>THE END, ETC.</h1>
-
- <p class="gris">Une coproduction </p>
- <h3>FRANCE TÉLÉVISIONS - MEMO PROD</h3>
-
- <p class="gris">Avec la participation du </p>
- <h3>Centre National du Cinéma et de l’Image Animée </h3>
- <h3>Incandescence</h3>
- <p class="gris">et</p>
- <h3>Institut de recherche et de l'innovation du Centre Georges Pompidou</h3>
-
- <p class="gris">Un projet écrit et réalisé par</p>
-
- <h3>LAETITIA MASSON</h3>
- </br>
-
- <p class="gris">avec</p>
- </br>
- <h4>FICTION</h4>
-
- <p>Élodie Bouchez</p>
- <p>Jérôme Kircher</p>
- <p>Avec la participation d’Aurore Clément et d’André Wilms</p>
- <p>Gil Ingrand</p>
- <p>Tom Roberts</p>
- </br>
-
- <h4>PORTRAITS</h4>
- <p class="gris">(par ordre alphabétique)</p>
-
- <p>Élodie Bouchez</p>
- <p>Aurore Clément</p>
- <p>Haïm Cohen</p>
- <p>Kristina Dariosecq</p>
- <p>Catherine Dolto</p>
- <p>David Germain</p>
- <p>Dominique Glories</p>
- <p>Denis Jeambar</p>
- <p>Jérôme Kircher</p>
- <p>Isaïe Théodore Korenfeld</p>
- <p>Cynthia Liméa</p>
- <p>Virginie Maréchal-Ossoukine</p>
- <p>Farid Mokart</p>
- <p>Elliot Perlman</p>
- <p>Fred Raillard</p>
- <p>Didier Schneider</p>
- <p>Jean-Pierre Tagliaferri</p>
- <p>Christian Tortu</p>
- <p>Margot Vaz-Pinto</p>
- <p>Philippe Vénère</p>
- <p>André Wilms</p>
- </br>
- <h4>MUSIQUE</h4>
-
- <p>Jean-Louis Murat</p>
-
- <p> <span class="gris">Accompagné de</span> Slim Batteux, Fred Jimenez, Stéphane Reynaud</p>
- <p><span class="gris">Avec la participation amicale de</span> Jeanne Cherhal</p>
- <p><span class="gris">Et l’aimable autorisation de </span>Barclay, Universal Music France</p>
-
- <p><span class="gris">Musique originale produite par </span>Scarlett Productions</p>
- <p><span class="gris">Composée par </span>JLM Bergheaud</p>
- <p><span class="gris">Interprétée par </span>Jean-Louis Murat</p>
- <p><span class="gris">Réalisée par </span>Jean-Louis Murat</p>
- <p><span class="gris">Avec l’aimable autorisation de </span> V2 Music (Universal Music France)</p>
- <p><span class="gris">Enregistrées par </span>Maxime Le Guil au Studio +30</p>
- <p><span class="gris">Chœurs :</span> Jeanne Cherhal, Fred Jimenez</p>
- <p><span class="gris">Guitare :</span> Jean-Louis Murat</p>
- <p><span class="gris">Basse :</span> Fred Jimenez</p>
- <p><span class="gris">Batterie :</span> Stéphane Reynaud</p>
- <p><span class="gris">Piano :</span> Slim Batteux</p>
- </br>
- <p>LA MARSEILLAISE</p>
- <p><span class="gris">Auteur :</span> Rouget de L’Isle (1792) <span class="gris">– Compositeur :</span> JLM Bergheaud</p>
- <p>Scarlett Productions Éditions</p>
- </br>
- <p>L’INTERNATIONALE</p>
- <p><span class="gris">Auteur :</span> Eugène Pottier (1888) <span class="gris">– Compositeur :</span> JLM Bergheaud</p>
- <p>Scarlett Productions Éditions</p>
- </br>
- <p>L’IDÉE</p>
- <p><span class="gris">Auteur :</span> Charles D’Avray (1898) <span class="gris">– Compositeur :</span> JLM Bergheaud</p>
- <p>Scarlett Productions Éditions</p>
- </br>
- <p>NI DIEU NI MAITRE</p>
- <p><span class="gris">Auteur :</span> Achille Le Roy (1892) <span class="gris">– Compositeur :</span> JLM Bergheaud</p>
- <p>Scarlett Productions Éditions</p>
- </br>
- <p>L’ENVERS DU ZÉBU</p>
- <p><span class="gris">Auteur/Compositeur :</span> JLM Bergheaud</p>
- <p>Scarlett Productions Éditions</p>
- </br>
- <h4>ÉQUIPE TECHNIQUE</h4>
-
- <p><span class="gris">1er Assistant Réalisateur</span> Hadrien Bichet</p>
- <p><span class="gris">Chef Opérateur Image </span>Fabien Chauvier, Frédéric Rozot</p>
- <p><span class="gris">Chef Opérateur Son </span>Laurent Trapenard, Ali Benmoussa</p>
- <p><span class="gris">Chef Décorateur </span>Pascale Consigny</p>
- <p><span class="gris">Assistant Décorateur </span>Jonathan Israel</p>
- <p><span class="gris">Chef Costumière </span>Carole Gérard</p>
- <p><span class="gris">Chef Maquilleuse </span>Sandrine Cirilli</p>
- <p><span class="gris">Chef Monteur Image </span>Olivier Michaut</p>
- <p><span class="gris">Assistante Monteuse Image </span>Isabelle Bassaglia</p>
- <p><span class="gris">Chef Monteur Son </span>Bruno Reiland, Gabriel Mathé</p>
- <p><span class="gris">Mixeur</span> Gilles Benardeau</p>
- <p><span class="gris">Etalonneur</span> Gregory Arvanitis</p>
- <p><span class="gris">Directrice de production</span> Sylvie Balland</p>
- <p><span class="gris">Administratrice de production </span>Martine Etchegaray</p>
- <p><span class="gris">Régisseur général </span>Maud Quiffet</p>
- <p><span class="gris">Assistant Régisseur Adjoint </span>Stéphane Avenard, Marine Longuet</p>
- <p><span class="gris">Traducteur – Adaptateur</span> Simon John, Julie Dutertre</p>
- <p><span class="gris">Assistante de production web </span>Hélène Adamo</p>
- </br>
- <h4>PRODUCTION WEB</h4>
-
- <h3>INCANDESCENCE</h3>
-
- <p><span class="gris">Production </span>Aurélien Bambagioni</p>
- <p><span class="gris">Directeur artistique</span> Jean-François Rey</p>
- <p><span class="gris">Directeur technique </span>Edwin Razafimahatratra</p>
- <p><span class="gris">Intégratrice Web </span>Agnieszka Bacior</p>
-
- <h3>IRI</h3>
-
- <p><span class="gris">Directeur </span>Bernard Stiegler</p>
- <p><span class="gris">Directeur Éxécutif </span>Vincent Puig</p>
- <p><span class="gris">Responsable Projets Média </span>Nicolas Sauret</p>
- <p><span class="gris">Directeur Technique </span>Yves Marie Haussonne</p>
- <p><span class="gris">Développeur</span> Raphaël Velt</p>
- </br>
- <h4>PRESTATAIRES TECHNIQUES</h4>
-
- <p><span class="gris">Costumes</span> MARATIER AUTO TELE CINEMA, LE VESTIAIRE</p>
- <p><span class="gris">Matériel Caméra</span> U KONCEPT</p>
- <p><span class="gris">Matériel Son </span>DCAudiovisuel</p>
- <p><span class="gris">Véhicules techniques</span> National/ Citer</p>
- <p><span class="gris">Montage image et son - Etalonnage </span>FILM FACTORY</p>
- <p><span class="gris">Mixage </span>ARCHIPEL</p>
- </br>
- <h4>ASSURANCE</h4>
-
- <h3>CONTINENTAL MEDIA ASSURANCES</h3>
-
- </br>
- <h4>CONSEIL JURIDIQUE</h4>
- <h3>Olivier Laude (Laude Esquier Champey)</h3>
-
- </br>
- <h4>UNE COPRODUCTION FRANCE TÉLÉVISIONS</h3>
-
- <h3>Nouvelles Écritures</h3>
- <p>Boris Razon</p>
- <p>Voyelle Acker</p>
- <p>Antonin Lhôte</p>
-
- <h3>Direction de la production</h3>
- <p>Jean-Louis Navarro</p>
- <p>Sandrine Amédée</p>
-
- <h3>France Télévisions Éditions Numériques</h3>
- <p>Emmanuel Lemoine</p>
- <p>Julie Pleno-Bonnet</p>
-
- <h3>Relations presse</h3>
- <p>Maya Dagnino</p>
- </br>
- <h4>COMMUNICATION DIGITALE</h4>
-
- <h3>FRANCE TÉLÉVISIONS</h3>
- <p>Antoine Allard</p>
-
- <h3>KETSU</h3>
- <p>Jérôme Reminiac</p>
- <p>Ugo Orlando</p>
- </br>
- <h4>REMERCIEMENTS</h4>
-
- <p>Nan Golding, Galerie Yvon Lambert</p>
- <p>Naomi Fisher, Galerie Perrotin</p>
- <p>Daniele Bluetti, Joseph Glasco, Carl Lessard</p>
-
- <p>Camille Trumer, Isabelle Grossenbacher, Laure Bergheaud</p>
- <p> Marie Audigier, Franck Lellouche, Francis Lucas</p>
- <p> Jean-Paul Allegre, Mr Dupin (Les 2 Magots)</p>
- </br>
- </br>
- <p class="uppercase gris">2013 FRANCE TÉLÉVISIONS – MEMO PROD</p>
- </section>
- </div>
- </body>
-</html>
\ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/web/credits-the-end-etc.html Mon Jan 21 21:00:24 2013 +0100
@@ -0,0 +1,226 @@
+<!DOCTYPE html>
+<html lang="fr" >
+ <head>
+ <meta charset="utf-8">
+ <title>The End - @todo</title>
+
+ <meta name="description" content="@todo">
+ <link rel="icon" href="static/res/img/favicon.ico" />
+
+ <!-- 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 overflow">
+ <div class="btnReturn">
+ <button id="btnChoice" class="btn" onClick="location.href='transition.html';">Choice</button>
+ </div>
+ <section id="credit">
+ <h3>Géraldine Michelon </h3>
+ <p class="gris">présente </p>
+ <h1>THE END, ETC.</h1>
+
+ <p class="gris">Une coproduction </p>
+ <h3>FRANCE TÉLÉVISIONS - MEMO PROD</h3>
+
+ <p class="gris">Avec la participation du </p>
+ <h3>Centre National du Cinéma et de l’Image Animée </h3>
+ <h3>Incandescence</h3>
+ <p class="gris">et</p>
+ <h3>Institut de recherche et de l'innovation du Centre Georges Pompidou</h3>
+
+ <p class="gris">Un projet écrit et réalisé par</p>
+
+ <h3>LAETITIA MASSON</h3>
+ </br>
+
+ <p class="gris">avec</p>
+ </br>
+ <h4>FICTION</h4>
+
+ <p>Élodie Bouchez</p>
+ <p>Jérôme Kircher</p>
+ <p>Avec la participation d’Aurore Clément et d’André Wilms</p>
+ <p>Gil Ingrand</p>
+ <p>Tom Roberts</p>
+ </br>
+
+ <h4>PORTRAITS</h4>
+ <p class="gris">(par ordre alphabétique)</p>
+
+ <p>Élodie Bouchez</p>
+ <p>Aurore Clément</p>
+ <p>Haïm Cohen</p>
+ <p>Kristina Dariosecq</p>
+ <p>Catherine Dolto</p>
+ <p>David Germain</p>
+ <p>Dominique Glories</p>
+ <p>Denis Jeambar</p>
+ <p>Jérôme Kircher</p>
+ <p>Isaïe Théodore Korenfeld</p>
+ <p>Cynthia Liméa</p>
+ <p>Virginie Maréchal-Ossoukine</p>
+ <p>Farid Mokart</p>
+ <p>Elliot Perlman</p>
+ <p>Fred Raillard</p>
+ <p>Didier Schneider</p>
+ <p>Jean-Pierre Tagliaferri</p>
+ <p>Christian Tortu</p>
+ <p>Margot Vaz-Pinto</p>
+ <p>Philippe Vénère</p>
+ <p>André Wilms</p>
+ </br>
+ <h4>MUSIQUE</h4>
+
+ <p>Jean-Louis Murat</p>
+
+ <p> <span class="gris">Accompagné de</span> Slim Batteux, Fred Jimenez, Stéphane Reynaud</p>
+ <p><span class="gris">Avec la participation amicale de</span> Jeanne Cherhal</p>
+ <p><span class="gris">Et l’aimable autorisation de </span>Barclay, Universal Music France</p>
+
+ <p><span class="gris">Musique originale produite par </span>Scarlett Productions</p>
+ <p><span class="gris">Composée par </span>JLM Bergheaud</p>
+ <p><span class="gris">Interprétée par </span>Jean-Louis Murat</p>
+ <p><span class="gris">Réalisée par </span>Jean-Louis Murat</p>
+ <p><span class="gris">Avec l’aimable autorisation de </span> V2 Music (Universal Music France)</p>
+ <p><span class="gris">Enregistrées par </span>Maxime Le Guil au Studio +30</p>
+ <p><span class="gris">Chœurs :</span> Jeanne Cherhal, Fred Jimenez</p>
+ <p><span class="gris">Guitare :</span> Jean-Louis Murat</p>
+ <p><span class="gris">Basse :</span> Fred Jimenez</p>
+ <p><span class="gris">Batterie :</span> Stéphane Reynaud</p>
+ <p><span class="gris">Piano :</span> Slim Batteux</p>
+ </br>
+ <p>LA MARSEILLAISE</p>
+ <p><span class="gris">Auteur :</span> Rouget de L’Isle (1792) <span class="gris">– Compositeur :</span> JLM Bergheaud</p>
+ <p>Scarlett Productions Éditions</p>
+ </br>
+ <p>L’INTERNATIONALE</p>
+ <p><span class="gris">Auteur :</span> Eugène Pottier (1888) <span class="gris">– Compositeur :</span> JLM Bergheaud</p>
+ <p>Scarlett Productions Éditions</p>
+ </br>
+ <p>L’IDÉE</p>
+ <p><span class="gris">Auteur :</span> Charles D’Avray (1898) <span class="gris">– Compositeur :</span> JLM Bergheaud</p>
+ <p>Scarlett Productions Éditions</p>
+ </br>
+ <p>NI DIEU NI MAITRE</p>
+ <p><span class="gris">Auteur :</span> Achille Le Roy (1892) <span class="gris">– Compositeur :</span> JLM Bergheaud</p>
+ <p>Scarlett Productions Éditions</p>
+ </br>
+ <p>L’ENVERS DU ZÉBU</p>
+ <p><span class="gris">Auteur/Compositeur :</span> JLM Bergheaud</p>
+ <p>Scarlett Productions Éditions</p>
+ </br>
+ <h4>ÉQUIPE TECHNIQUE</h4>
+
+ <p><span class="gris">1er Assistant Réalisateur</span> Hadrien Bichet</p>
+ <p><span class="gris">Chef Opérateur Image </span>Fabien Chauvier, Frédéric Rozot</p>
+ <p><span class="gris">Chef Opérateur Son </span>Laurent Trapenard, Ali Benmoussa</p>
+ <p><span class="gris">Chef Décorateur </span>Pascale Consigny</p>
+ <p><span class="gris">Assistant Décorateur </span>Jonathan Israel</p>
+ <p><span class="gris">Chef Costumière </span>Carole Gérard</p>
+ <p><span class="gris">Chef Maquilleuse </span>Sandrine Cirilli</p>
+ <p><span class="gris">Chef Monteur Image </span>Olivier Michaut</p>
+ <p><span class="gris">Assistante Monteuse Image </span>Isabelle Bassaglia</p>
+ <p><span class="gris">Chef Monteur Son </span>Bruno Reiland, Gabriel Mathé</p>
+ <p><span class="gris">Mixeur</span> Gilles Benardeau</p>
+ <p><span class="gris">Etalonneur</span> Gregory Arvanitis</p>
+ <p><span class="gris">Directrice de production</span> Sylvie Balland</p>
+ <p><span class="gris">Administratrice de production </span>Martine Etchegaray</p>
+ <p><span class="gris">Régisseur général </span>Maud Quiffet</p>
+ <p><span class="gris">Assistant Régisseur Adjoint </span>Stéphane Avenard, Marine Longuet</p>
+ <p><span class="gris">Traducteur – Adaptateur</span> Simon John, Julie Dutertre</p>
+ <p><span class="gris">Assistante de production web </span>Hélène Adamo</p>
+ </br>
+ <h4>PRODUCTION WEB</h4>
+
+ <h3>INCANDESCENCE</h3>
+
+ <p><span class="gris">Production </span>Aurélien Bambagioni</p>
+ <p><span class="gris">Directeur artistique</span> Jean-François Rey</p>
+ <p><span class="gris">Directeur technique </span>Edwin Razafimahatratra</p>
+ <p><span class="gris">Intégratrice Web </span>Agnieszka Bacior</p>
+
+ <h3>IRI</h3>
+
+ <p><span class="gris">Directeur </span>Bernard Stiegler</p>
+ <p><span class="gris">Directeur Éxécutif </span>Vincent Puig</p>
+ <p><span class="gris">Responsable Projets Média </span>Nicolas Sauret</p>
+ <p><span class="gris">Directeur Technique </span>Yves Marie Haussonne</p>
+ <p><span class="gris">Développeur</span> Raphaël Velt</p>
+ </br>
+ <h4>PRESTATAIRES TECHNIQUES</h4>
+
+ <p><span class="gris">Costumes</span> MARATIER AUTO TELE CINEMA, LE VESTIAIRE</p>
+ <p><span class="gris">Matériel Caméra</span> U KONCEPT</p>
+ <p><span class="gris">Matériel Son </span>DCAudiovisuel</p>
+ <p><span class="gris">Véhicules techniques</span> National/ Citer</p>
+ <p><span class="gris">Montage image et son - Etalonnage </span>FILM FACTORY</p>
+ <p><span class="gris">Mixage </span>ARCHIPEL</p>
+ </br>
+ <h4>ASSURANCE</h4>
+
+ <h3>CONTINENTAL MEDIA ASSURANCES</h3>
+
+ </br>
+ <h4>CONSEIL JURIDIQUE</h4>
+ <h3>Olivier Laude (Laude Esquier Champey)</h3>
+
+ </br>
+ <h4>UNE COPRODUCTION FRANCE TÉLÉVISIONS</h3>
+
+ <h3>Nouvelles Écritures</h3>
+ <p>Boris Razon</p>
+ <p>Voyelle Acker</p>
+ <p>Antonin Lhôte</p>
+
+ <h3>Direction de la production</h3>
+ <p>Jean-Louis Navarro</p>
+ <p>Sandrine Amédée</p>
+
+ <h3>France Télévisions Éditions Numériques</h3>
+ <p>Emmanuel Lemoine</p>
+ <p>Julie Pleno-Bonnet</p>
+
+ <h3>Relations presse</h3>
+ <p>Maya Dagnino</p>
+ </br>
+ <h4>COMMUNICATION DIGITALE</h4>
+
+ <h3>FRANCE TÉLÉVISIONS</h3>
+ <p>Antoine Allard</p>
+
+ <h3>KETSU</h3>
+ <p>Jérôme Reminiac</p>
+ <p>Ugo Orlando</p>
+ </br>
+ <h4>REMERCIEMENTS</h4>
+
+ <p>Nan Golding, Galerie Yvon Lambert</p>
+ <p>Naomi Fisher, Galerie Perrotin</p>
+ <p>Daniele Bluetti, Joseph Glasco, Carl Lessard</p>
+
+ <p>Camille Trumer, Isabelle Grossenbacher, Laure Bergheaud</p>
+ <p> Marie Audigier, Franck Lellouche, Francis Lucas</p>
+ <p> Jean-Paul Allegre, Mr Dupin (Les 2 Magots)</p>
+ </br>
+ </br>
+ <p class="uppercase gris">2013 FRANCE TÉLÉVISIONS – MEMO PROD</p>
+ </section>
+ </div>
+ </body>
+</html>
\ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/web/fiction-the-end-etc.html Mon Jan 21 21:00:24 2013 +0100
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="fr">
+ <head>
+ <meta charset="utf-8">
+ <title>The End - @todo</title>
+
+ <meta name="description" content="@todo">
+ <link rel="icon" href="static/res/img/favicon.ico" />
+
+ <!-- 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="full_hightScreen">
+ <div class="btnReturn">
+ <button id="btnChoice" class="btn" onClick="location.href='menu_bonus.html';">Choice</button>
+ </div>
+
+ <!--this div empty allows the element content_vcentering to be vertically aligned -->
+ <section class="full_hightScreen">
+
+ <div id="menuBonus" class="positionAbs">
+ <!--this div empty allows the element content_vcentering to be vertically aligned -->
+ <div class="strut"></div><!--
+ this comment corrects the white-space (display: inline);
+ --><div class="fullScreen_vcentering white big_txt">
+ <p>Prochainement</p>
+ </div>
+ </div>
+ </section>
+ </div>
+
+ <!-- JavaScript -->
+ <script src="static/res/js/jquery-1.8.2.min.js"></script>
+
+ </body>
+</html>
\ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/web/film-aleatoire-the-end-etc.html Mon Jan 21 21:00:24 2013 +0100
@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html lang="fr">
+ <head>
+ <meta charset="utf-8">
+ <title>The End niv1- @todo</title>
+
+ <meta name="description" content="@todo">
+ <link rel="icon" href="static/res/img/favicon.ico" />
+
+ <!-- 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="full_hightScreen">
+
+ <!-- div content_top - the elements takes the full height of "content_top" -->
+ <div id="content_top">
+ <div id="topEmpty"></div>
+ <section id="main">
+ <!-- Video -->
+ <div id="video" class="small_video">
+ </div>
+ <!-- /Video -->
+ </section>
+ <div id="bottomEmpty"></div>
+ </div>
+
+ <!-- Controls container -->
+ <footer id="controlContainer">
+ <!-- @todo JS the player disappears down the screen after 5 sec -->
+ <section id="controlbar">
+ <div class="container_hcentering">
+ <button id="btnInfo" class="btn" onclick="popup('popUpDiv', 'content')">INFO</button>
+
+ <button id="btnSDHD" class="btn" onClick="incPlayer.ctrlHdSd()">SD/HD</button>
+
+
+ <div id="progressContainer">
+
+ <div id="progressBar" class="progress_bar">
+ <span id="progress" class="progress_bar"></span>
+ <button id="stateBar" class="txt_hidden"></button>
+ </div>
+
+ <ul id="progressTime" class="clearfix">
+ <!-- class="txt_white" can be used to color current time in white -->
+ <li id="current" class="floatL">0'00''</li>
+ <li id="duration" class="floatR">0'00''</li>
+ </ul>
+
+ </div>
+ <button id="btnBck" class="btn txt_hidden" onClick="incPlayer.ctrlPrev();">Back</button>
+ <!--I use a single button, which will serve as a play button when the video is paused (or stopped) and a pause button when it's playing.
+ -->
+ <button id="btnPlayPause" class="btn txt_hidden" title="play" onClick="incPlayer.ctrlPlay();">Play/Pause</button>
+
+ <button id="btnFwd" class="btn txt_hidden" onClick="incPlayer.ctrlNext();">Forward</button>
+
+ <!-- il faut faire un lien vers la page transition mais le div the end,etc est visible ??? -->
+ <button id="btnChoice" class="btn" onClick="location.href = 'transition.html';">Choice</button>
+ </div>
+ </section>
+ <!-- /Controlbar container -->
+ </footer>
+ <!-- il faut stopper la video quand on clique sur info ??? -->
+ <div id="popUpDiv" style="display:none;">
+ <div id="popUpTitle" class="clearfix">
+ <h3>THE END, ETC. <span class="text_lowercase">de Laetitia Masson.</span></h3>
+ <a id="popUpClose" class="floatR clearfix" onclick="popup('popUpDiv', 'content')">
+ <img alt="Fermer" src="static/res/img/popUpClose.png"/>
+ </a>
+ </div>
+ <div id="popUpTxtScroll">
+ <div class="header_txt marginBottom ">
+ <p>A l’aube d’une nouvelle ère digitale, Laetitia Masson a choisi de questionner nos sociétés à travers le prisme de l’engagement et du désengagement : politique, humain, amoureux…</p>
+ <p>Autant de points de vue pour saisir l’ampleur d’un phénomène global et intemporel.</p>
+ <p>Dans une expérience de cinéma inédite sur internet, la cinéaste propose à chacun de s’approprier sa matière première. Pas d’histoire prédéfinie, pas de fin imposée.</p>
+ <p>Fin du monde ? Fin d'une ère ? Fin d'un idéal ? Début d'autre chose ? Ceci est votre expérience.</p>
+ </div>
+ <h4>UNE EXPÉRIENCE DE CINÉMA</h4>
+ <p>Trois clics, pour composer « votre » film. Le principe est simple : trois écrans successifs, vous choisissez un mot par écran, le site assemble votre film « The End, etc. »Et cætera, parce que ce n’est qu’un début. Chaque combinaison assemble un film différent, de 5 à 15 minutes. Vous pouvez recommencer à l’infini. Autant de propositions que de spectateurs...</p>
+ <h4>PROLONGER L’EXPÉRIENCE</h4>
+ <p>Dans cet espace, découvrez les versions intégrales de la fiction et des portraits documentaires. Accédez à l’écoute de la bande originale conçue par Jean-Louis Murat.</p>
+ <h4>ETC.</h4>
+ <p>Ce niveau est participatif. Son écran d'accueil, mis à jour en temps réel, présente tous les mots cités par les internautes, comme un écho aux mots proposés par la cinéaste. Au centre, les mots les plus cités, et en périphérie, les commentaires singuliers. Chaque mot donne accès à une liste de séquences permettant une lecture transversale de la matière première de la réalisatrice. A vous de choisir votre porte d'entrée dans ces 4h30 de séquences. A vous de les commenter afin de créer vos propres playlists et d'influer sur l'expérience. En choisissant un mot déjà cité, vous renforcez la présence de ce mot dans l'écran d'accueil.</p>
+ <p>Un espace transitoire vous permet de naviguer entre ces différents niveaux.</p>
+ <br>
+ <p>Ce site proposé en HTML5 nécessite une mise à jour de votre navigateur dans sa dernière version. Cette technologie vous permet de profiter d’une expérience optimale sur PC mais également sur tablette. « THE END, ETC. » nécessite une connexion internet haut-débit pour une utilisation idéale. Préférez les navigateurs Safari ou Chrome.</p>
+ </div>
+ </div>
+ </div>
+ <div id="blanket" style="display:none;"></div>
+
+ <!-- JavaScript -->
+ <script src="static/res/js/jquery-1.8.2.min.js"></script>
+ <script src="static/res/js/jquery.cookie.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/incdetectmobile.js"></script>
+ <script src="static/res/js/incplayer.js"></script>
+ <script src="static/res/js/incchoice.js"></script>
+ <script src="static/res/js/popUp.js"></script>
+ <script src="static/res/js/incresize.js"></script>
+ <script src="static/res/js/inchidebar.js"></script>
+ <script>
+ $(function() {
+
+ // Init the video player
+ if (incPlayer.init("transition.html", "video", "btnPlayPause", "btnSDHD", "current", "duration", "stateBar", "progressBar", "static/res/json/sequences.json")) {
+ incPlayer.createPopSequence(incChoice.getChoosenWords(), incChoice.getChosenVideos());
+
+ // Add class on all videos
+ $("#video").children().addClass("small_video");
+ }
+
+ // Init the resize object
+ incResize.init("content", "topEmpty", "video", "bottomEmpty", "controlContainer", 50, 1353/571, true, [resizePopup]);
+ incResize.resizeElements();
+
+ // Manage the hinding of the bar and of the pointer
+ incHideBar.init();
+ });
+
+ var resizePopup = function() {
+ popupPosition('popUpDiv', 'content');
+ }
+ </script>
+ </body>
+</html>
\ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/web/instructions-the-end-etc.html Mon Jan 21 21:00:24 2013 +0100
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="fr">
+ <head>
+ <meta charset="utf-8">
+ <title>The End - @todo</title>
+
+ <meta name="description" content="@todo">
+ <link rel="icon" href="static/res/img/favicon.ico" />
+
+ <!-- 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="full_hightScreen pointer" onClick="gotoChoice();">
+
+ <!--this div empty allows the element content_vcentering to be vertically aligned -->
+ <div class="strut"></div><!--
+ this comment corrects the white-space (display: inline);
+ --><section id="inter_choice" class="fullScreen_vcentering container_vcentering">
+ <!-- pour changer la tranparance tu accedes à la class ="box_transparance" et tu changes 'opacity: 0;' maintenat c'est 'opacity : 1;' -->
+ <div class="box_vcentering box_transparance big_txt">
+ <p>3 ÉCRANS</p>
+ <p>CHOISISSEZ UN MOT PAR ÉCRANS</p>
+ <p>COMPOSEZ VOTRE FILM</p>
+ </div>
+ </section>
+ </div>
+
+ <!-- JavaScript -->
+ <script src="static/res/js/jquery-1.8.2.min.js"></script>
+ <script>
+ $(function() {
+
+ setTimeout(function() {
+ $('.box_transparance').animate({
+ opacity: 0,
+ }, 4000, function() {
+ gotoChoice();
+ });
+ }, 2500);
+
+ });
+ var gotoChoice = function() {
+ location.href = "choix.html";
+ }
+ </script>
+ </body>
+</html>
\ No newline at end of file
--- a/web/int_fiction.html Mon Jan 21 18:23:40 2013 +0100
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,52 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
- <head>
- <meta charset="utf-8">
- <title>The End - @todo</title>
-
- <meta name="description" content="@todo">
- <link rel="icon" href="static/res/img/favicon.ico" />
-
- <!-- 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="full_hightScreen">
- <div class="btnReturn">
- <button id="btnChoice" class="btn" onClick="location.href='menu_bonus.html';">Choice</button>
- </div>
-
- <!--this div empty allows the element content_vcentering to be vertically aligned -->
- <section class="full_hightScreen">
-
- <div id="menuBonus" class="positionAbs">
- <!--this div empty allows the element content_vcentering to be vertically aligned -->
- <div class="strut"></div><!--
- this comment corrects the white-space (display: inline);
- --><div class="fullScreen_vcentering white big_txt">
- <p>Prochainement</p>
- </div>
- </div>
- </section>
- </div>
-
- <!-- JavaScript -->
- <script src="static/res/js/jquery-1.8.2.min.js"></script>
-
- </body>
-</html>
\ No newline at end of file
--- a/web/int_music.html Mon Jan 21 18:23:40 2013 +0100
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,222 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
- <head>
- <meta charset="utf-8">
- <title>The End - @todo</title>
-
- <meta name="description" content="@todo">
- <link rel="icon" href="static/res/img/favicon.ico" />
-
- <!-- 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="full_hightScreen">
- <div class="btnReturn">
- <button id="btnChoice" class="btn" onClick="location.href='menu_bonus.html';">Choice</button>
- </div>
- <!--this div empty allows the element content_vcentering to be vertically aligned -->
- <section id="intMusic" class="full_hightScreen">
- <div class="strut"></div><!--
- this comment corrects the white-space (display: inline);
- --><div id="bg_img" class="fullScreen_vcentering">
- <img id="bgimage" alt="The End, etc." src="static/res/img/choixMusique1.jpg" />
- </div>
- </section>
- <section id="playerAudio" class="positionAbs">
- <!--this div empty allows the element content_vcentering to be vertically aligned -->
- <div class="strut"></div><!--
- this comment corrects the white-space (display: inline);
- --><div class="fullScreen_vcentering white big_txt">
- <article class="boxAudio">
- <audio id="audio1" preload="metadata">
- <source src="http://clients.incandescence.com/theend/musique/MARSEILLAISE-CHANT_3.ogg" type="audio/ogg">
- <source src="http://clients.incandescence.com/theend/musique/MARSEILLAISE-CHANT_3.mp3" type="audio/mpeg">
- <p>Audio non supportée </p>
- </audio>
- <button id="playpause1" onClick="play(1)" class="btnPlayPause txt_hidden">Play</button>
-
- <!-- class="txt_white" can be used to color current time in white -->
- <p id="current1" class="time">0'00''</p>
- <p id="title1">LA MARSEILLAISE</p><br>
-
-
- <audio id="audio2" preload="metadata">
- <source src="http://clients.incandescence.com/theend/musique/IDEE-CHANT_5.ogg" type="audio/ogg">
- <source src="http://clients.incandescence.com/theend/musique/IDEE-CHANT_5.mp3" type="audio/mpeg">
- <p>Audio non supportée </p>
- </audio>
- <button id="playpause2" onClick="play(2)" title="play" class="btnPlayPause txt_hidden">Play</button>
-
- <p id="current2" class="time">0'00''</p>
- <p id="title2">L'IDÉE</p><br>
-
- <audio id="audio3" preload="metadata">
- <source src="http://clients.incandescence.com/theend/musique/INTERNATIONALE-CHANT_1.ogg" type="audio/ogg">
- <source src="http://clients.incandescence.com/theend/musique/INTERNATIONALE-CHANT_1.mp3" type="audio/mpeg">
- <p>Audio non supportée </p>
- </audio>
- <button id="playpause3" onClick="play(3)" title="play" class="btnPlayPause txt_hidden">Play</button>
-
- <p id="current3" class="time">0'00''</p>
- <p id="title3">L'INTERNATIONALE</p><br>
-
- <audio id="audio4" preload="metadata">
- <source src="http://clients.incandescence.com/theend/musique/NIDIEU-CHANT-2.ogg" type="audio/ogg">
- <source src="http://clients.incandescence.com/theend/musique/NIDIEU-CHANT-2.mp3" type="audio/mpeg">
- <p>Audio non supportée </p>
- </audio>
- <button id="playpause4" onClick="play(4)" title="play" class="btnPlayPause txt_hidden">Play</button>
- <p id="current4" class="time">0'00''</p>
- <p id="title4">NI DIEU NI MAÎTRE</p><br>
-
- <audio id="audio5" preload="metadata">
- <source src="http://clients.incandescence.com/theend/musique/ZEBU-CHANT_4.ogg" type="audio/ogg">
- <source src="http://clients.incandescence.com/theend/musique/ZEBU-CHANT_4.mp3" type="audio/mpeg">
- <p>Audio non supportée </p>
- </audio>
- <button id="playpause5" onClick="play(5)" title="play" class="btnPlayPause txt_hidden">Play</button>
-
- <p id="current5" class="time">0'00''</p>
- <p id="title5">L'ENVERS DU ZÉBU</p>
- </article>
- </div>
- </section>
-
- </div>
-
- <!-- JavaScript -->
- <script src="static/res/js/jquery-1.8.2.min.js"></script>
- <script>
- var playingIndex = -1;
- var loading = false;
-
- var play = function(audioIndex) {
-
- if (loading) {
- return;
- }
-
- var wasPlaying = playingIndex;
-
- // Stop the current played audio ?
- if (playingIndex !== -1 ) {
- var audioObj = $("#audio" + playingIndex);
- var audio = audioObj.get(0);
-
- // Unbind all events
- audioObj.unbind("canplaythrough");
- audioObj.unbind("timeupdate");
- audioObj.unbind("ended");
-
- // Pause the audio
- audio.pause();
- setTimeValue(0);
-
- // Change the button pause in play
- $("#playpause" + playingIndex).css({"background-position" : '0 0'});
-
- // Change the title color
- $("#title" + playingIndex).removeClass("gris");
-
- playingIndex = -1;
- }
-
- // Play a new audio
- if (audioIndex !== wasPlaying) {
-
- var audioObj = $("#audio" + audioIndex);
- var audio = audioObj.get(0);
- playingIndex = audioIndex;
-
- if (audio.readyState === 4) {
- // Play the sound
- playSound(audio);
-
- } else {
- // Load the sound
- audio.load();
- loading = true;
-
- // Add event canplaythrough
- audioObj.bind("canplaythrough", function() {
- console.log("canplaythrough");
-
- // Play the sound
- playSound(audio);
-
- // Unbind
- audioObj.unbind("canplaythrough");
- });
- }
-
- // Add event timeupdate
- audioObj.bind("timeupdate", function() {
- if (!loading) {
- setTimeValue(audio.duration - audio.currentTime);
- }
- });
-
- // Add event ended
- audioObj.bind("ended", function() {
- console.log("ended");
- // Change the button pause in play
- $("#playpause" + playingIndex).css({"background-position" : '0 0'});
-
- // Change the title color
- $("#title" + audioIndex).removeClass("gris");
-
- // Unbind
- audioObj.unbind("timeupdate");
- audioObj.unbind("ended");
- playingIndex = -1;
- });
-
- // Change the button pause in play
- $("#playpause" + audioIndex).css({"background-position" : '0 -30px'});
-
- // Change the title color
- $("#title" + audioIndex).addClass("gris");
-
- // Set the background
- $("#bgimage").attr("src", "static/res/img/choixMusique" + (audioIndex + 1)+ ".jpg");
- };
- };
-
- var playSound = function(audio) {
- audio.currentTime = 0;
- audio.play();
- loading = false;
- };
-
- var setTimeValue = function(time) {
- $("#current" + playingIndex).html(secondsToTime(time));
- };
-
- this.secondsToTime = function(sec) {
- var minutes = Math.floor(sec / 60);
- var seconds = Math.floor(sec - minutes * 60);
- if (seconds < 10) {
- seconds = "0" + seconds;
- }
- return "" + minutes + "'" + seconds + "''";
- };
- </script>
-
- </body>
-</html>
\ No newline at end of file
--- a/web/int_portraits.html Mon Jan 21 18:23:40 2013 +0100
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,98 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
- <head>
- <meta charset="utf-8">
- <title>The End - @todo</title>
-
- <meta name="description" content="@todo">
- <link rel="icon" href="static/res/img/favicon.ico" />
-
- <!-- 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="full_hightScreen">
- <div class="btnReturn">
- <button id="btnChoice" class="btn" onClick="location.href='menu_bonus.html';">Choice</button>
- </div>
-
- <!--this div empty allows the element content_vcentering to be vertically aligned -->
- <section class="full_hightScreen">
- <div class="strut"></div><!--
- this comment corrects the white-space (display: inline);
- --><div id="bg_img" class="fullScreen_vcentering">
- <img id="bgimage" alt="The End, etc." src="static/res/img/menuPortraits.jpg" />
- </div>
-
- <div id="intPortrait" class="positionAbs">
- <!--this div empty allows the element content_vcentering to be vertically aligned -->
- <div class="strut"></div><!--
- this comment corrects the white-space (display: inline);
-
- --><div class="fullScreen_vcentering white small_txt">
- <div class="col_middle">
- <p><a onClick="gotoPortraitVideo('14-Elodie-HD');">Élodie <br>Bouchez</a></p>
- <p><a onClick="gotoPortraitVideo('12-Aurore-HD');">Aurore <br>Clément</a></p>
- <p><a onClick="gotoPortraitVideo('09-Cohen-HD');">Haïm Cohen</a></p>
- <p><a onClick="gotoPortraitVideo('01-Kristina-HD');">Kristina <br/>Dariosecq</a></p>
- <p><a onClick="gotoPortraitVideo('16-Dolto-HD');">Catherine <br/>Dolto</a></p>
- <p><a onClick="gotoPortraitVideo('11-FF-HD');">F&F</a></p>
- <p><a onClick="gotoPortraitVideo('06-David-HD');">David Germain</a></p>
- </div><!--
-
- --><div class="col_big">
- <p><a onClick="gotoPortraitVideo('06b-Dominique-HD');">Dominique Glories& <br/>
- Margot Vaz-Pinto</a><p>
- <p><a onClick="gotoPortraitVideo('05-Jeambar-HD');">Denis <br>Jeambar</a></p>
- <p><a onClick="gotoPortraitVideo('17-Kircher-HD');">Jérôme <br>Kircher</a></p>
- <p><a onClick="gotoPortraitVideo('08-Corenfeld-HD');">Isaïe Théodore <br>Corenfeld</a></p>
- <p><a onClick="gotoPortraitVideo('15-Cynthia-HD');">Cynthia <br>Limea</a></p>
- <p><a onClick="gotoPortraitVideo('02-Virginie-HD');">Virginie <br>Maréchal-Ossoukine</a></p>
- </div><!--
-
- --><div class="col_small">
- <p><a onClick="gotoPortraitVideo('18-Perlman-HD');">Elliot <br>Perlman</a></p>
- <p><a onClick="gotoPortraitVideo('04-Didier-HD');">Didier <br>Schneider</a></p>
- <p><a onClick="gotoPortraitVideo('03-JP-HD');">Jean-Pierre <br>Tagliaferri</a></p>
- <p><a onClick="gotoPortraitVideo('10-Toru-HD');">Christian <br>Tortu</a></p>
- <p><a onClick="gotoPortraitVideo('07-Philippe-HD');">Philippe <br>Venere</a></p>
- <p><a onClick="gotoPortraitVideo('13-Andre-HD');">André <br>Wilms</a></p>
- </div>
- </div>
- </div>
- </section>
- </div>
-
- <!-- JavaScript -->
- <script src="static/res/js/jquery-1.8.2.min.js"></script>
- <script src="static/res/js/jquery.cookie.js"></script>
- <script src="static/res/js/incchoice.js"></script>
- <script>
- var gotoPortraitVideo = function(name) {
-
- // Save the name of the video
- incChoice.saveSingleVideo(name);
-
- // Set video hd by default
- incChoice.setHD(1);
-
- location.href = "portraits_player.html";
- }
- </script>
- </body>
-</html>
\ No newline at end of file
--- a/web/inter_choix.html Mon Jan 21 18:23:40 2013 +0100
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,63 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
- <head>
- <meta charset="utf-8">
- <title>The End - @todo</title>
-
- <meta name="description" content="@todo">
- <link rel="icon" href="static/res/img/favicon.ico" />
-
- <!-- 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="full_hightScreen pointer" onClick="gotoChoice();">
-
- <!--this div empty allows the element content_vcentering to be vertically aligned -->
- <div class="strut"></div><!--
- this comment corrects the white-space (display: inline);
- --><section id="inter_choice" class="fullScreen_vcentering container_vcentering">
- <!-- pour changer la tranparance tu accedes à la class ="box_transparance" et tu changes 'opacity: 0;' maintenat c'est 'opacity : 1;' -->
- <div class="box_vcentering box_transparance big_txt">
- <p>3 ÉCRANS</p>
- <p>CHOISISSEZ UN MOT PAR ÉCRANS</p>
- <p>COMPOSEZ VOTRE FILM</p>
- </div>
- </section>
- </div>
-
- <!-- JavaScript -->
- <script src="static/res/js/jquery-1.8.2.min.js"></script>
- <script>
- $(function() {
-
- setTimeout(function() {
- $('.box_transparance').animate({
- opacity: 0,
- }, 4000, function() {
- gotoChoice();
- });
- }, 2500);
-
- });
- var gotoChoice = function() {
- location.href = "choix.html";
- }
- </script>
- </body>
-</html>
\ No newline at end of file
--- a/web/menu_bonus.html Mon Jan 21 18:23:40 2013 +0100
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,61 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
- <head>
- <meta charset="utf-8">
- <title>The End - @todo</title>
-
- <meta name="description" content="@todo">
- <link rel="icon" href="static/res/img/favicon.ico" />
-
- <!-- 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="full_hightScreen">
- <div class="btnReturn">
- <button id="btnChoice" class="btn" onClick="location.href='transition.html';">Choice</button>
- </div>
-
- <!--this div empty allows the element content_vcentering to be vertically aligned -->
- <section class="full_hightScreen">
- <div class="strut"></div><!--
- this comment corrects the white-space (display: inline);
- --><div id="bg_img" class="fullScreen_vcentering">
- <img id="bgimage" alt="The End, etc." src="static/res/img/menuBonus.jpg" />
- </div>
-
- <div id="menuBonus" class="positionAbs">
- <!--this div empty allows the element content_vcentering to be vertically aligned -->
- <div class="strut"></div><!--
- this comment corrects the white-space (display: inline);
- --><div class="fullScreen_vcentering white big_txt">
- <p><a href="int_fiction.html">Fiction</a></p>
- <p><a href="int_portraits.html">Portraits</a></p>
- <p><a href="int_music.html">Musique</a></p>
- <!--<p class="margin_huge black">Director's cut</p>
- <p><a href="int_film.html">Film</a></p>-->
- </div>
- </div>
- </section>
- </div>
-
- <!-- JavaScript -->
- <script src="static/res/js/jquery-1.8.2.min.js"></script>
-
- </body>
-</html>
\ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/web/music-the-end-etc.html Mon Jan 21 21:00:24 2013 +0100
@@ -0,0 +1,222 @@
+<!DOCTYPE html>
+<html lang="fr">
+ <head>
+ <meta charset="utf-8">
+ <title>The End - @todo</title>
+
+ <meta name="description" content="@todo">
+ <link rel="icon" href="static/res/img/favicon.ico" />
+
+ <!-- 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="full_hightScreen">
+ <div class="btnReturn">
+ <button id="btnChoice" class="btn" onClick="location.href='menu_bonus.html';">Choice</button>
+ </div>
+ <!--this div empty allows the element content_vcentering to be vertically aligned -->
+ <section id="intMusic" class="full_hightScreen">
+ <div class="strut"></div><!--
+ this comment corrects the white-space (display: inline);
+ --><div id="bg_img" class="fullScreen_vcentering">
+ <img id="bgimage" alt="The End, etc." src="static/res/img/choixMusique1.jpg" />
+ </div>
+ </section>
+ <section id="playerAudio" class="positionAbs">
+ <!--this div empty allows the element content_vcentering to be vertically aligned -->
+ <div class="strut"></div><!--
+ this comment corrects the white-space (display: inline);
+ --><div class="fullScreen_vcentering white big_txt">
+ <article class="boxAudio">
+ <audio id="audio1" preload="metadata">
+ <source src="http://clients.incandescence.com/theend/musique/MARSEILLAISE-CHANT_3.ogg" type="audio/ogg">
+ <source src="http://clients.incandescence.com/theend/musique/MARSEILLAISE-CHANT_3.mp3" type="audio/mpeg">
+ <p>Audio non supportée </p>
+ </audio>
+ <button id="playpause1" onClick="play(1)" class="btnPlayPause txt_hidden">Play</button>
+
+ <!-- class="txt_white" can be used to color current time in white -->
+ <p id="current1" class="time">0'00''</p>
+ <p id="title1">LA MARSEILLAISE</p><br>
+
+
+ <audio id="audio2" preload="metadata">
+ <source src="http://clients.incandescence.com/theend/musique/IDEE-CHANT_5.ogg" type="audio/ogg">
+ <source src="http://clients.incandescence.com/theend/musique/IDEE-CHANT_5.mp3" type="audio/mpeg">
+ <p>Audio non supportée </p>
+ </audio>
+ <button id="playpause2" onClick="play(2)" title="play" class="btnPlayPause txt_hidden">Play</button>
+
+ <p id="current2" class="time">0'00''</p>
+ <p id="title2">L'IDÉE</p><br>
+
+ <audio id="audio3" preload="metadata">
+ <source src="http://clients.incandescence.com/theend/musique/INTERNATIONALE-CHANT_1.ogg" type="audio/ogg">
+ <source src="http://clients.incandescence.com/theend/musique/INTERNATIONALE-CHANT_1.mp3" type="audio/mpeg">
+ <p>Audio non supportée </p>
+ </audio>
+ <button id="playpause3" onClick="play(3)" title="play" class="btnPlayPause txt_hidden">Play</button>
+
+ <p id="current3" class="time">0'00''</p>
+ <p id="title3">L'INTERNATIONALE</p><br>
+
+ <audio id="audio4" preload="metadata">
+ <source src="http://clients.incandescence.com/theend/musique/NIDIEU-CHANT-2.ogg" type="audio/ogg">
+ <source src="http://clients.incandescence.com/theend/musique/NIDIEU-CHANT-2.mp3" type="audio/mpeg">
+ <p>Audio non supportée </p>
+ </audio>
+ <button id="playpause4" onClick="play(4)" title="play" class="btnPlayPause txt_hidden">Play</button>
+ <p id="current4" class="time">0'00''</p>
+ <p id="title4">NI DIEU NI MAÎTRE</p><br>
+
+ <audio id="audio5" preload="metadata">
+ <source src="http://clients.incandescence.com/theend/musique/ZEBU-CHANT_4.ogg" type="audio/ogg">
+ <source src="http://clients.incandescence.com/theend/musique/ZEBU-CHANT_4.mp3" type="audio/mpeg">
+ <p>Audio non supportée </p>
+ </audio>
+ <button id="playpause5" onClick="play(5)" title="play" class="btnPlayPause txt_hidden">Play</button>
+
+ <p id="current5" class="time">0'00''</p>
+ <p id="title5">L'ENVERS DU ZÉBU</p>
+ </article>
+ </div>
+ </section>
+
+ </div>
+
+ <!-- JavaScript -->
+ <script src="static/res/js/jquery-1.8.2.min.js"></script>
+ <script>
+ var playingIndex = -1;
+ var loading = false;
+
+ var play = function(audioIndex) {
+
+ if (loading) {
+ return;
+ }
+
+ var wasPlaying = playingIndex;
+
+ // Stop the current played audio ?
+ if (playingIndex !== -1 ) {
+ var audioObj = $("#audio" + playingIndex);
+ var audio = audioObj.get(0);
+
+ // Unbind all events
+ audioObj.unbind("canplaythrough");
+ audioObj.unbind("timeupdate");
+ audioObj.unbind("ended");
+
+ // Pause the audio
+ audio.pause();
+ setTimeValue(0);
+
+ // Change the button pause in play
+ $("#playpause" + playingIndex).css({"background-position" : '0 0'});
+
+ // Change the title color
+ $("#title" + playingIndex).removeClass("gris");
+
+ playingIndex = -1;
+ }
+
+ // Play a new audio
+ if (audioIndex !== wasPlaying) {
+
+ var audioObj = $("#audio" + audioIndex);
+ var audio = audioObj.get(0);
+ playingIndex = audioIndex;
+
+ if (audio.readyState === 4) {
+ // Play the sound
+ playSound(audio);
+
+ } else {
+ // Load the sound
+ audio.load();
+ loading = true;
+
+ // Add event canplaythrough
+ audioObj.bind("canplaythrough", function() {
+ console.log("canplaythrough");
+
+ // Play the sound
+ playSound(audio);
+
+ // Unbind
+ audioObj.unbind("canplaythrough");
+ });
+ }
+
+ // Add event timeupdate
+ audioObj.bind("timeupdate", function() {
+ if (!loading) {
+ setTimeValue(audio.duration - audio.currentTime);
+ }
+ });
+
+ // Add event ended
+ audioObj.bind("ended", function() {
+ console.log("ended");
+ // Change the button pause in play
+ $("#playpause" + playingIndex).css({"background-position" : '0 0'});
+
+ // Change the title color
+ $("#title" + audioIndex).removeClass("gris");
+
+ // Unbind
+ audioObj.unbind("timeupdate");
+ audioObj.unbind("ended");
+ playingIndex = -1;
+ });
+
+ // Change the button pause in play
+ $("#playpause" + audioIndex).css({"background-position" : '0 -30px'});
+
+ // Change the title color
+ $("#title" + audioIndex).addClass("gris");
+
+ // Set the background
+ $("#bgimage").attr("src", "static/res/img/choixMusique" + (audioIndex + 1)+ ".jpg");
+ };
+ };
+
+ var playSound = function(audio) {
+ audio.currentTime = 0;
+ audio.play();
+ loading = false;
+ };
+
+ var setTimeValue = function(time) {
+ $("#current" + playingIndex).html(secondsToTime(time));
+ };
+
+ this.secondsToTime = function(sec) {
+ var minutes = Math.floor(sec / 60);
+ var seconds = Math.floor(sec - minutes * 60);
+ if (seconds < 10) {
+ seconds = "0" + seconds;
+ }
+ return "" + minutes + "'" + seconds + "''";
+ };
+ </script>
+
+ </body>
+</html>
\ No newline at end of file
--- a/web/niv1_videoplayer.html Mon Jan 21 18:23:40 2013 +0100
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,144 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
- <head>
- <meta charset="utf-8">
- <title>The End niv1- @todo</title>
-
- <meta name="description" content="@todo">
- <link rel="icon" href="static/res/img/favicon.ico" />
-
- <!-- 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="full_hightScreen">
-
- <!-- div content_top - the elements takes the full height of "content_top" -->
- <div id="content_top">
- <div id="topEmpty"></div>
- <section id="main">
- <!-- Video -->
- <div id="video" class="small_video">
- </div>
- <!-- /Video -->
- </section>
- <div id="bottomEmpty"></div>
- </div>
-
- <!-- Controls container -->
- <footer id="controlContainer">
- <!-- @todo JS the player disappears down the screen after 5 sec -->
- <section id="controlbar">
- <div class="container_hcentering">
- <button id="btnInfo" class="btn" onclick="popup('popUpDiv', 'content')">INFO</button>
-
- <button id="btnSDHD" class="btn" onClick="incPlayer.ctrlHdSd()">SD/HD</button>
-
-
- <div id="progressContainer">
-
- <div id="progressBar" class="progress_bar">
- <span id="progress" class="progress_bar"></span>
- <button id="stateBar" class="txt_hidden"></button>
- </div>
-
- <ul id="progressTime" class="clearfix">
- <!-- class="txt_white" can be used to color current time in white -->
- <li id="current" class="floatL">0'00''</li>
- <li id="duration" class="floatR">0'00''</li>
- </ul>
-
- </div>
- <button id="btnBck" class="btn txt_hidden" onClick="incPlayer.ctrlPrev();">Back</button>
- <!--I use a single button, which will serve as a play button when the video is paused (or stopped) and a pause button when it's playing.
- -->
- <button id="btnPlayPause" class="btn txt_hidden" title="play" onClick="incPlayer.ctrlPlay();">Play/Pause</button>
-
- <button id="btnFwd" class="btn txt_hidden" onClick="incPlayer.ctrlNext();">Forward</button>
-
- <!-- il faut faire un lien vers la page transition mais le div the end,etc est visible ??? -->
- <button id="btnChoice" class="btn" onClick="location.href = 'transition.html';">Choice</button>
- </div>
- </section>
- <!-- /Controlbar container -->
- </footer>
- <!-- il faut stopper la video quand on clique sur info ??? -->
- <div id="popUpDiv" style="display:none;">
- <div id="popUpTitle" class="clearfix">
- <h3>THE END, ETC. <span class="text_lowercase">de Laetitia Masson.</span></h3>
- <a id="popUpClose" class="floatR clearfix" onclick="popup('popUpDiv', 'content')">
- <img alt="Fermer" src="static/res/img/popUpClose.png"/>
- </a>
- </div>
- <div id="popUpTxtScroll">
- <div class="header_txt marginBottom ">
- <p>A l’aube d’une nouvelle ère digitale, Laetitia Masson a choisi de questionner nos sociétés à travers le prisme de l’engagement et du désengagement : politique, humain, amoureux…</p>
- <p>Autant de points de vue pour saisir l’ampleur d’un phénomène global et intemporel.</p>
- <p>Dans une expérience de cinéma inédite sur internet, la cinéaste propose à chacun de s’approprier sa matière première. Pas d’histoire prédéfinie, pas de fin imposée.</p>
- <p>Fin du monde ? Fin d'une ère ? Fin d'un idéal ? Début d'autre chose ? Ceci est votre expérience.</p>
- </div>
- <h4>UNE EXPÉRIENCE DE CINÉMA</h4>
- <p>Trois clics, pour composer « votre » film. Le principe est simple : trois écrans successifs, vous choisissez un mot par écran, le site assemble votre film « The End, etc. »Et cætera, parce que ce n’est qu’un début. Chaque combinaison assemble un film différent, de 5 à 15 minutes. Vous pouvez recommencer à l’infini. Autant de propositions que de spectateurs...</p>
- <h4>PROLONGER L’EXPÉRIENCE</h4>
- <p>Dans cet espace, découvrez les versions intégrales de la fiction et des portraits documentaires. Accédez à l’écoute de la bande originale conçue par Jean-Louis Murat.</p>
- <h4>ETC.</h4>
- <p>Ce niveau est participatif. Son écran d'accueil, mis à jour en temps réel, présente tous les mots cités par les internautes, comme un écho aux mots proposés par la cinéaste. Au centre, les mots les plus cités, et en périphérie, les commentaires singuliers. Chaque mot donne accès à une liste de séquences permettant une lecture transversale de la matière première de la réalisatrice. A vous de choisir votre porte d'entrée dans ces 4h30 de séquences. A vous de les commenter afin de créer vos propres playlists et d'influer sur l'expérience. En choisissant un mot déjà cité, vous renforcez la présence de ce mot dans l'écran d'accueil.</p>
- <p>Un espace transitoire vous permet de naviguer entre ces différents niveaux.</p>
- <br>
- <p>Ce site proposé en HTML5 nécessite une mise à jour de votre navigateur dans sa dernière version. Cette technologie vous permet de profiter d’une expérience optimale sur PC mais également sur tablette. « THE END, ETC. » nécessite une connexion internet haut-débit pour une utilisation idéale. Préférez les navigateurs Safari ou Chrome.</p>
- </div>
- </div>
- </div>
- <div id="blanket" style="display:none;"></div>
-
- <!-- JavaScript -->
- <script src="static/res/js/jquery-1.8.2.min.js"></script>
- <script src="static/res/js/jquery.cookie.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/incdetectmobile.js"></script>
- <script src="static/res/js/incplayer.js"></script>
- <script src="static/res/js/incchoice.js"></script>
- <script src="static/res/js/popUp.js"></script>
- <script src="static/res/js/incresize.js"></script>
- <script src="static/res/js/inchidebar.js"></script>
- <script>
- $(function() {
-
- // Init the video player
- if (incPlayer.init("transition.html", "video", "btnPlayPause", "btnSDHD", "current", "duration", "stateBar", "progressBar", "static/res/json/sequences.json")) {
- incPlayer.createPopSequence(incChoice.getChoosenWords(), incChoice.getChosenVideos());
-
- // Add class on all videos
- $("#video").children().addClass("small_video");
- }
-
- // Init the resize object
- incResize.init("content", "topEmpty", "video", "bottomEmpty", "controlContainer", 50, 1353/571, true, [resizePopup]);
- incResize.resizeElements();
-
- // Manage the hinding of the bar and of the pointer
- incHideBar.init();
- });
-
- var resizePopup = function() {
- popupPosition('popUpDiv', 'content');
- }
- </script>
- </body>
-</html>
\ No newline at end of file
--- a/web/niv2_hp.html Mon Jan 21 18:23:40 2013 +0100
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
- <head>
- <meta charset="utf-8" />
- <meta http-equiv="refresh" content="0;URL=theend/prolonger" />
- <title>The End - Redirection vers "Prolongez l'expérience"</title>
- </head>
- <body>
- <h1>The End</h1>
- <p>Redirection vers "Prolongez l'expérience"</p>
- </body>
-</html>
\ No newline at end of file
--- a/web/niv2_videoplayer.html Mon Jan 21 18:23:40 2013 +0100
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,128 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
- <head>
- <meta charset="utf-8">
- <title>The End niv2- @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" />
-
- </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">
-
- <header>
- <div id="title_vp">
- <a href="/" class= "link_prev link_img">
- <img alt="Retour" src="static/res/img/footer/retour.png" />
- </a><!-- this comment corrects the bug display: inline-block;
- --><h1>Femme</h1>
- </div>
- </header>
-
- <section>
-
- <div id="title_sequence" class="float_sequence">
- <!-- Put real code -->
- <!-- Test - to remove
- class="here" can be used to color txt in white
- -->
- <ul>
- <li class="here"><a href="/">Titre séquence 1</a></li>
- <li><a href="/">Titre séquence 2</a></li>
- <li><a href="/">Titre séquence 3</a></li>
- <li><a href="/">Titre séquence 4</a></li>
- <li><a href="/">Titre séquence 5</a></li>
- <li><a href="/">Titre séquence 6</a></li>
- <li><a href="/">Titre séquence 7</a></li>
- <li><a href="/">Titre séquence 8</a></li>
- <li><a href="/">Titre séquence 9</a></li>
- </ul>
- <!--/Test-->
- </div>
-
- <!-- Video -->
- <div id="video_sequence">
- <video>
- <p>Votre navigateur ne gère pas l'élément video @todo</p>
- </video>
- </div>
- <!-- /Video -->
-
- <div id="tag_container" class="clearfix">
- <div id="tag_sequence" class="float_sequence">
- <!-- Put real code
- ? calculating the width of 'tag_sequence' ul (100%- width of form_tag)-->
- <!-- Test - to remove
- -->
- <ul>
- <li><a href="/">Tag séquence 1</a></li>
- <li><a href="/">Tag séquence 2</a></li>
- <li><a href="/">Tag séquence 3</a></li>
- <li><a href="/">Tag séquence 4</a></li>
- <li><a href="/">Tag séquence 5</a></li>
- <li><a href="/">Tag séquence 6</a></li>
- <li><a href="/">Tag séquence 7</a></li>
- <li><a href="/">Tag séquence 8</a></li>
- <li><a href="/">Tag séquence 9</a></li>
- </ul>
- </div>
-
- <form id="form_tag" action="/" method="get">
- <input type="text" name="tag" value="Entrer vos tags ici" onfocus="if(this.value == this.defaultValue) this.value = '';" onblur="if(this.value == '') this.value = this.defaultValue;" /><!--
- this comment corrects the white-space (display: inline);
- --><input type="submit" value="OK" />
- </form>
- </div>
- </section>
- </div>
-
- <!-- Controls container -->
- <footer id="controlContainer">
- <!-- @todo JS the player disappears down the screen after 5 sec -->
- <section id="controlbar">
- <div class="container_hcentering">
- <button id="btnInfo" class="btn">INFO</button>
-
- <button id="btnSDHD" class="btn" onClick="/">SD/HD</button>
-
- <button id="btnBck" class="btn txt_hidden" onClick="/">Back</button>
-
- <div id="progressContainer">
-
- <div id="progressBar" class="progress_bar">
- <span id="progress" class="progress_bar"></span>
- <!--I use a single button, which will serve as a play button when the video is paused (or stopped) and a pause button when it's playing.
- -->
- <button id="btnPlayPause" class="btn txt_hidden" title="play" onClick="/">Play/Pause</button>
- </div>
-
- <ul id="progressTime">
- <!-- class="txt_white" can be used to color current time in white -->
- <li id="current" class="floatL">0'00"</li>
- <li id="duration" class="floatR">10'00"</li>
- </ul>
-
- </div>
-
- <button id="btnFwd" class="btn txt_hidden">Forward</button>
-
- <button id="btnChoice" class="btn">Choice</button>
- </div>
- </section>
- <!-- /Controlbar container -->
- </footer>
- </div>
- <!-- Metanav FranceTV -->
- <script src="http://static.francetv.fr/js/jquery.metanav-min.js" charset="utf-8"></script>
- <!-- JavaScript -->
- </body>
-</html>
\ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/web/partage-du-film-aleatoire-the-end-etc.html Mon Jan 21 21:00:24 2013 +0100
@@ -0,0 +1,88 @@
+<!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 - @todo</title>
+
+ <meta name="description" content="@todo">
+ <link rel="icon" href="static/res/img/favicon.ico" />
+
+ <!-- Site Optimization for Facebook -->
+ <meta property="og:title" content="the end- @todo" />
+ <meta property="og:type" content="website" />
+ <meta property="og:url" content="http://www.clients.incandescence.com/theend/" />
+ <meta property="og:image" content="https://www.clients.incandescence.com/theend/theend_fb.jpg" />
+ <meta property="og:site_name" content="the end @todo" />
+ <meta property="og:description" content="@todo"/>
+
+ <!-- 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
+ class="hugeMargin" avant avec id="btnChoice" plus possible -->
+ <div id="content" class="smallMargin">
+ <div class="btnReturn">
+ <button id="btnChoice" class="btn" onClick="location.href='transition.html';">Choice</button>
+ </div>
+ <!-- change with js: height and line-height (the same size) of "container_vcentering" -->
+ <header id="top" class="container_vcentering">
+
+ <div id="title_sp" class="box_vcentering">
+ <h1>THE END, ETC.</h1>
+ </div>
+ </header>
+
+ <section id="imgMiddle" class="bg_smallimg">
+ <img alt="Élodie Bouchez à la fenêtre" src="static/res/img/partage.jpg" />
+ </section>
+
+ <!-- change with js: height and line-height (the same size) of "container_vcentering" -->
+ <!-- resize js: on supprime pas le footer 70px il y n'en a pas -->
+ <section id="bottom" class="container_vcentering">
+ <div class="box_vcentering">
+ <p class="big_link">Partagez VOTRE FILM</p>
+ <ul id="socialMedia" >
+ <!--https://developers.facebook.com/docs/reference/dialogs/feed/ -->
+ <li>
+ <a 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>
+ <!-- https://dev.twitter.com/docs/tweet-button -->
+ <li><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>
+ </div>
+ </section>
+ </div>
+
+ <!-- JavaScript -->
+ <script src="static/res/js/jquery-1.8.2.min.js"></script>
+ <script src="static/res/js/incresize.js"></script>
+ <script src="static/res/js/incchoice.js"></script>
+ <script src="static/res/js/jquery.cookie.js"></script>
+ <script>
+ $(function() {
+ // Init the resize object
+ incResize.init("content", "top", "imgMiddle", "bottom", null, 130, 1075/604);
+ incResize.resizeElements();
+
+ // Debug
+ console.log(incChoice.createShareUrl());
+ });
+ </script>
+ </body>
+</html>
\ No newline at end of file
--- a/web/partage.html Mon Jan 21 18:23:40 2013 +0100
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,88 +0,0 @@
-<!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 - @todo</title>
-
- <meta name="description" content="@todo">
- <link rel="icon" href="static/res/img/favicon.ico" />
-
- <!-- Site Optimization for Facebook -->
- <meta property="og:title" content="the end- @todo" />
- <meta property="og:type" content="website" />
- <meta property="og:url" content="http://www.clients.incandescence.com/theend/" />
- <meta property="og:image" content="https://www.clients.incandescence.com/theend/theend_fb.jpg" />
- <meta property="og:site_name" content="the end @todo" />
- <meta property="og:description" content="@todo"/>
-
- <!-- 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
- class="hugeMargin" avant avec id="btnChoice" plus possible -->
- <div id="content" class="smallMargin">
- <div class="btnReturn">
- <button id="btnChoice" class="btn" onClick="location.href='transition.html';">Choice</button>
- </div>
- <!-- change with js: height and line-height (the same size) of "container_vcentering" -->
- <header id="top" class="container_vcentering">
-
- <div id="title_sp" class="box_vcentering">
- <h1>THE END, ETC.</h1>
- </div>
- </header>
-
- <section id="imgMiddle" class="bg_smallimg">
- <img alt="Élodie Bouchez à la fenêtre" src="static/res/img/partage.jpg" />
- </section>
-
- <!-- change with js: height and line-height (the same size) of "container_vcentering" -->
- <!-- resize js: on supprime pas le footer 70px il y n'en a pas -->
- <section id="bottom" class="container_vcentering">
- <div class="box_vcentering">
- <p class="big_link">Partagez VOTRE FILM</p>
- <ul id="socialMedia" >
- <!--https://developers.facebook.com/docs/reference/dialogs/feed/ -->
- <li>
- <a 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>
- <!-- https://dev.twitter.com/docs/tweet-button -->
- <li><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>
- </div>
- </section>
- </div>
-
- <!-- JavaScript -->
- <script src="static/res/js/jquery-1.8.2.min.js"></script>
- <script src="static/res/js/incresize.js"></script>
- <script src="static/res/js/incchoice.js"></script>
- <script src="static/res/js/jquery.cookie.js"></script>
- <script>
- $(function() {
- // Init the resize object
- incResize.init("content", "top", "imgMiddle", "bottom", null, 130, 1075/604);
- incResize.resizeElements();
-
- // Debug
- console.log(incChoice.createShareUrl());
- });
- </script>
- </body>
-</html>
\ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/web/portraits-regarde-the-end-etc.html Mon Jan 21 21:00:24 2013 +0100
@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html lang="fr">
+ <head>
+ <meta charset="utf-8">
+ <title>The End niv1- @todo</title>
+
+ <meta name="description" content="@todo">
+ <link rel="icon" href="static/res/img/favicon.ico" />
+
+ <!-- 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="full_hightScreen">
+
+ <!-- div content_top - the elements takes the full height of "content_top" -->
+ <div id="content_top">
+ <div id="topEmpty"></div>
+ <section id="main">
+ <!-- Video -->
+ <div id="video" class="small_video">
+ </div>
+ <!-- /Video -->
+ </section>
+ <div id="bottomEmpty"></div>
+ </div>
+
+ <!-- Controls container -->
+ <footer id="controlContainer">
+ <!-- @todo JS the player disappears down the screen after 5 sec -->
+ <section id="controlbar">
+ <div class="container_hcentering">
+ <button id="btnInfo" class="btn" onclick="popup('popUpDiv', 'content')">INFO</button>
+
+ <button id="btnSDHD" class="btn" onClick="incPlayer.ctrlHdSd()">SD/HD</button>
+
+
+ <div id="progressContainer">
+
+ <div id="progressBar" class="progress_bar">
+ <span id="progress" class="progress_bar"></span>
+ <button id="stateBar" class="txt_hidden"></button>
+ </div>
+
+ <ul id="progressTime" class="clearfix">
+ <!-- class="txt_white" can be used to color current time in white -->
+ <li id="current" class="floatL">0'00''</li>
+ <li id="duration" class="floatR">0'00''</li>
+ </ul>
+
+ </div>
+ <button id="btnBck" class="btn txt_hidden" onClick="incPlayer.ctrlPrev();">Back</button>
+ <!--I use a single button, which will serve as a play button when the video is paused (or stopped) and a pause button when it's playing.
+ -->
+ <button id="btnPlayPause" class="btn txt_hidden" title="play" onClick="incPlayer.ctrlPlay();">Play/Pause</button>
+
+ <button id="btnFwd" class="btn txt_hidden" onClick="incPlayer.ctrlNext();">Forward</button>
+
+ <!-- il faut faire un lien vers la page transition mais le div the end,etc est visible ??? -->
+ <button id="btnChoice" class="btn" onClick="location.href = 'int_portraits.html';">Choice</button>
+ </div>
+ </section>
+ <!-- /Controlbar container -->
+ </footer>
+ <!-- il faut stopper la video quand on clique sur info ??? -->
+ <div id="popUpDiv" style="display:none;">
+ <div id="popUpTitle" class="clearfix">
+ <h3>THE END, ETC. <span class="text_lowercase">de Laetitia Masson.</span></h3>
+ <a id="popUpClose" class="floatR clearfix" onclick="popup('popUpDiv', 'content')">
+ <img alt="Fermer" src="static/res/img/popUpClose.png"/>
+ </a>
+ </div>
+ <div id="popUpTxtScroll">
+ <div class="header_txt marginBottom ">
+ <p>A l’aube d’une nouvelle ère digitale, Laetitia Masson a choisi de questionner nos sociétés à travers le prisme de l’engagement et du désengagement : politique, humain, amoureux…</p>
+ <p>Autant de points de vue pour saisir l’ampleur d’un phénomène global et intemporel.</p>
+ <p>Dans une expérience de cinéma inédite sur internet, la cinéaste propose à chacun de s’approprier sa matière première. Pas d’histoire prédéfinie, pas de fin imposée.</p>
+ <p>Fin du monde ? Fin d'une ère ? Fin d'un idéal ? Début d'autre chose ? Ceci est votre expérience.</p>
+ </div>
+ <h4>UNE EXPÉRIENCE DE CINÉMA</h4>
+ <p>Trois clics, pour composer « votre » film. Le principe est simple : trois écrans successifs, vous choisissez un mot par écran, le site assemble votre film « The End, etc. »Et cætera, parce que ce n’est qu’un début. Chaque combinaison assemble un film différent, de 5 à 15 minutes. Vous pouvez recommencer à l’infini. Autant de propositions que de spectateurs...</p>
+ <h4>PROLONGER L’EXPÉRIENCE</h4>
+ <p>Dans cet espace, découvrez les versions intégrales de la fiction et des portraits documentaires. Accédez à l’écoute de la bande originale conçue par Jean-Louis Murat.</p>
+ <h4>ETC.</h4>
+ <p>Ce niveau est participatif. Son écran d'accueil, mis à jour en temps réel, présente tous les mots cités par les internautes, comme un écho aux mots proposés par la cinéaste. Au centre, les mots les plus cités, et en périphérie, les commentaires singuliers. Chaque mot donne accès à une liste de séquences permettant une lecture transversale de la matière première de la réalisatrice. A vous de choisir votre porte d'entrée dans ces 4h30 de séquences. A vous de les commenter afin de créer vos propres playlists et d'influer sur l'expérience. En choisissant un mot déjà cité, vous renforcez la présence de ce mot dans l'écran d'accueil.</p>
+ <p>Un espace transitoire vous permet de naviguer entre ces différents niveaux.</p>
+ <br>
+ <p>Ce site proposé en HTML5 nécessite une mise à jour de votre navigateur dans sa dernière version. Cette technologie vous permet de profiter d’une expérience optimale sur PC mais également sur tablette. « THE END, ETC. » nécessite une connexion internet haut-débit pour une utilisation idéale. Préférez les navigateurs Safari ou Chrome.</p>
+ </div>
+ </div>
+ </div>
+ <div id="blanket" style="display:none;"></div>
+
+ <!-- JavaScript -->
+ <script src="static/res/js/jquery-1.8.2.min.js"></script>
+ <script src="static/res/js/jquery.cookie.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/incdetectmobile.js"></script>
+ <script src="static/res/js/incplayer.js"></script>
+ <script src="static/res/js/incchoice.js"></script>
+ <script src="static/res/js/popUp.js"></script>
+ <script src="static/res/js/incresize.js"></script>
+ <script src="static/res/js/inchidebar.js"></script>
+ <script>
+ $(function() {
+
+ // Init the video player
+ if (incPlayer.init("int_portraits.html", "video", "btnPlayPause", "btnSDHD", "current", "duration", "stateBar", "progressBar")) {
+ incPlayer.playSingleVideo("http://dvvsyrlsr21oz.cloudfront.net/" + incChoice.getSingleVideo());
+
+ // Add class on all videos
+ $("#video").children().addClass("small_video");
+ }
+
+ // Init the resize object
+ incResize.init("content", "topEmpty", "video", "bottomEmpty", "controlContainer", 50, 1353/571, true, [resizePopup]);
+ incResize.resizeElements();
+
+ // Manage the hinding of the bar and of the pointer
+ incHideBar.init();
+ });
+
+ var resizePopup = function() {
+ popupPosition('popUpDiv', 'content');
+ }
+ </script>
+ </body>
+</html>
\ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/web/portraits-the-end-etc.html Mon Jan 21 21:00:24 2013 +0100
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="fr">
+ <head>
+ <meta charset="utf-8">
+ <title>The End - @todo</title>
+
+ <meta name="description" content="@todo">
+ <link rel="icon" href="static/res/img/favicon.ico" />
+
+ <!-- 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="full_hightScreen">
+ <div class="btnReturn">
+ <button id="btnChoice" class="btn" onClick="location.href='menu_bonus.html';">Choice</button>
+ </div>
+
+ <!--this div empty allows the element content_vcentering to be vertically aligned -->
+ <section class="full_hightScreen">
+ <div class="strut"></div><!--
+ this comment corrects the white-space (display: inline);
+ --><div id="bg_img" class="fullScreen_vcentering">
+ <img id="bgimage" alt="The End, etc." src="static/res/img/menuPortraits.jpg" />
+ </div>
+
+ <div id="intPortrait" class="positionAbs">
+ <!--this div empty allows the element content_vcentering to be vertically aligned -->
+ <div class="strut"></div><!--
+ this comment corrects the white-space (display: inline);
+
+ --><div class="fullScreen_vcentering white small_txt">
+ <div class="col_middle">
+ <p><a onClick="gotoPortraitVideo('14-Elodie-HD');">Élodie <br>Bouchez</a></p>
+ <p><a onClick="gotoPortraitVideo('12-Aurore-HD');">Aurore <br>Clément</a></p>
+ <p><a onClick="gotoPortraitVideo('09-Cohen-HD');">Haïm Cohen</a></p>
+ <p><a onClick="gotoPortraitVideo('01-Kristina-HD');">Kristina <br/>Dariosecq</a></p>
+ <p><a onClick="gotoPortraitVideo('16-Dolto-HD');">Catherine <br/>Dolto</a></p>
+ <p><a onClick="gotoPortraitVideo('11-FF-HD');">F&F</a></p>
+ <p><a onClick="gotoPortraitVideo('06-David-HD');">David Germain</a></p>
+ </div><!--
+
+ --><div class="col_big">
+ <p><a onClick="gotoPortraitVideo('06b-Dominique-HD');">Dominique Glories& <br/>
+ Margot Vaz-Pinto</a><p>
+ <p><a onClick="gotoPortraitVideo('05-Jeambar-HD');">Denis <br>Jeambar</a></p>
+ <p><a onClick="gotoPortraitVideo('17-Kircher-HD');">Jérôme <br>Kircher</a></p>
+ <p><a onClick="gotoPortraitVideo('08-Corenfeld-HD');">Isaïe Théodore <br>Corenfeld</a></p>
+ <p><a onClick="gotoPortraitVideo('15-Cynthia-HD');">Cynthia <br>Limea</a></p>
+ <p><a onClick="gotoPortraitVideo('02-Virginie-HD');">Virginie <br>Maréchal-Ossoukine</a></p>
+ </div><!--
+
+ --><div class="col_small">
+ <p><a onClick="gotoPortraitVideo('18-Perlman-HD');">Elliot <br>Perlman</a></p>
+ <p><a onClick="gotoPortraitVideo('04-Didier-HD');">Didier <br>Schneider</a></p>
+ <p><a onClick="gotoPortraitVideo('03-JP-HD');">Jean-Pierre <br>Tagliaferri</a></p>
+ <p><a onClick="gotoPortraitVideo('10-Toru-HD');">Christian <br>Tortu</a></p>
+ <p><a onClick="gotoPortraitVideo('07-Philippe-HD');">Philippe <br>Venere</a></p>
+ <p><a onClick="gotoPortraitVideo('13-Andre-HD');">André <br>Wilms</a></p>
+ </div>
+ </div>
+ </div>
+ </section>
+ </div>
+
+ <!-- JavaScript -->
+ <script src="static/res/js/jquery-1.8.2.min.js"></script>
+ <script src="static/res/js/jquery.cookie.js"></script>
+ <script src="static/res/js/incchoice.js"></script>
+ <script>
+ var gotoPortraitVideo = function(name) {
+
+ // Save the name of the video
+ incChoice.saveSingleVideo(name);
+
+ // Set video hd by default
+ incChoice.setHD(1);
+
+ location.href = "portraits_player.html";
+ }
+ </script>
+ </body>
+</html>
\ No newline at end of file
--- a/web/portraits_player.html Mon Jan 21 18:23:40 2013 +0100
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,144 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
- <head>
- <meta charset="utf-8">
- <title>The End niv1- @todo</title>
-
- <meta name="description" content="@todo">
- <link rel="icon" href="static/res/img/favicon.ico" />
-
- <!-- 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="full_hightScreen">
-
- <!-- div content_top - the elements takes the full height of "content_top" -->
- <div id="content_top">
- <div id="topEmpty"></div>
- <section id="main">
- <!-- Video -->
- <div id="video" class="small_video">
- </div>
- <!-- /Video -->
- </section>
- <div id="bottomEmpty"></div>
- </div>
-
- <!-- Controls container -->
- <footer id="controlContainer">
- <!-- @todo JS the player disappears down the screen after 5 sec -->
- <section id="controlbar">
- <div class="container_hcentering">
- <button id="btnInfo" class="btn" onclick="popup('popUpDiv', 'content')">INFO</button>
-
- <button id="btnSDHD" class="btn" onClick="incPlayer.ctrlHdSd()">SD/HD</button>
-
-
- <div id="progressContainer">
-
- <div id="progressBar" class="progress_bar">
- <span id="progress" class="progress_bar"></span>
- <button id="stateBar" class="txt_hidden"></button>
- </div>
-
- <ul id="progressTime" class="clearfix">
- <!-- class="txt_white" can be used to color current time in white -->
- <li id="current" class="floatL">0'00''</li>
- <li id="duration" class="floatR">0'00''</li>
- </ul>
-
- </div>
- <button id="btnBck" class="btn txt_hidden" onClick="incPlayer.ctrlPrev();">Back</button>
- <!--I use a single button, which will serve as a play button when the video is paused (or stopped) and a pause button when it's playing.
- -->
- <button id="btnPlayPause" class="btn txt_hidden" title="play" onClick="incPlayer.ctrlPlay();">Play/Pause</button>
-
- <button id="btnFwd" class="btn txt_hidden" onClick="incPlayer.ctrlNext();">Forward</button>
-
- <!-- il faut faire un lien vers la page transition mais le div the end,etc est visible ??? -->
- <button id="btnChoice" class="btn" onClick="location.href = 'int_portraits.html';">Choice</button>
- </div>
- </section>
- <!-- /Controlbar container -->
- </footer>
- <!-- il faut stopper la video quand on clique sur info ??? -->
- <div id="popUpDiv" style="display:none;">
- <div id="popUpTitle" class="clearfix">
- <h3>THE END, ETC. <span class="text_lowercase">de Laetitia Masson.</span></h3>
- <a id="popUpClose" class="floatR clearfix" onclick="popup('popUpDiv', 'content')">
- <img alt="Fermer" src="static/res/img/popUpClose.png"/>
- </a>
- </div>
- <div id="popUpTxtScroll">
- <div class="header_txt marginBottom ">
- <p>A l’aube d’une nouvelle ère digitale, Laetitia Masson a choisi de questionner nos sociétés à travers le prisme de l’engagement et du désengagement : politique, humain, amoureux…</p>
- <p>Autant de points de vue pour saisir l’ampleur d’un phénomène global et intemporel.</p>
- <p>Dans une expérience de cinéma inédite sur internet, la cinéaste propose à chacun de s’approprier sa matière première. Pas d’histoire prédéfinie, pas de fin imposée.</p>
- <p>Fin du monde ? Fin d'une ère ? Fin d'un idéal ? Début d'autre chose ? Ceci est votre expérience.</p>
- </div>
- <h4>UNE EXPÉRIENCE DE CINÉMA</h4>
- <p>Trois clics, pour composer « votre » film. Le principe est simple : trois écrans successifs, vous choisissez un mot par écran, le site assemble votre film « The End, etc. »Et cætera, parce que ce n’est qu’un début. Chaque combinaison assemble un film différent, de 5 à 15 minutes. Vous pouvez recommencer à l’infini. Autant de propositions que de spectateurs...</p>
- <h4>PROLONGER L’EXPÉRIENCE</h4>
- <p>Dans cet espace, découvrez les versions intégrales de la fiction et des portraits documentaires. Accédez à l’écoute de la bande originale conçue par Jean-Louis Murat.</p>
- <h4>ETC.</h4>
- <p>Ce niveau est participatif. Son écran d'accueil, mis à jour en temps réel, présente tous les mots cités par les internautes, comme un écho aux mots proposés par la cinéaste. Au centre, les mots les plus cités, et en périphérie, les commentaires singuliers. Chaque mot donne accès à une liste de séquences permettant une lecture transversale de la matière première de la réalisatrice. A vous de choisir votre porte d'entrée dans ces 4h30 de séquences. A vous de les commenter afin de créer vos propres playlists et d'influer sur l'expérience. En choisissant un mot déjà cité, vous renforcez la présence de ce mot dans l'écran d'accueil.</p>
- <p>Un espace transitoire vous permet de naviguer entre ces différents niveaux.</p>
- <br>
- <p>Ce site proposé en HTML5 nécessite une mise à jour de votre navigateur dans sa dernière version. Cette technologie vous permet de profiter d’une expérience optimale sur PC mais également sur tablette. « THE END, ETC. » nécessite une connexion internet haut-débit pour une utilisation idéale. Préférez les navigateurs Safari ou Chrome.</p>
- </div>
- </div>
- </div>
- <div id="blanket" style="display:none;"></div>
-
- <!-- JavaScript -->
- <script src="static/res/js/jquery-1.8.2.min.js"></script>
- <script src="static/res/js/jquery.cookie.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/incdetectmobile.js"></script>
- <script src="static/res/js/incplayer.js"></script>
- <script src="static/res/js/incchoice.js"></script>
- <script src="static/res/js/popUp.js"></script>
- <script src="static/res/js/incresize.js"></script>
- <script src="static/res/js/inchidebar.js"></script>
- <script>
- $(function() {
-
- // Init the video player
- if (incPlayer.init("int_portraits.html", "video", "btnPlayPause", "btnSDHD", "current", "duration", "stateBar", "progressBar")) {
- incPlayer.playSingleVideo("http://dvvsyrlsr21oz.cloudfront.net/" + incChoice.getSingleVideo());
-
- // Add class on all videos
- $("#video").children().addClass("small_video");
- }
-
- // Init the resize object
- incResize.init("content", "topEmpty", "video", "bottomEmpty", "controlContainer", 50, 1353/571, true, [resizePopup]);
- incResize.resizeElements();
-
- // Manage the hinding of the bar and of the pointer
- incHideBar.init();
- });
-
- var resizePopup = function() {
- popupPosition('popUpDiv', 'content');
- }
- </script>
- </body>
-</html>
\ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/web/prologue-the-end-etc.html Mon Jan 21 21:00:24 2013 +0100
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="fr">
+ <head>
+ <meta charset="utf-8">
+ <title>The End - @todo</title>
+
+ <meta name="description" content="@todo">
+ <link rel="icon" href="static/res/img/favicon.ico" />
+
+ <!-- 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="full_hightScreen pointer">
+ <!-- div content_top - the elements takes the full height of "content_top" -->
+ <div id="content_top" onClick="gotoInterChoice();">
+ <div id="topEmpty"></div>
+ <section id="main">
+ <video id="video" autoplay poster="static/res/img/poster_prologue.jpg">
+ <source src="http://dvvsyrlsr21oz.cloudfront.net/PROLOGUE-SD.mp4" type="video/mp4" />
+ <source src="http://dvvsyrlsr21oz.cloudfront.net/PROLOGUE-SD.webmsd.webm" type="video/webm" />
+
+ <p>Votre navigateur ne gère pas l'élément video @todo</p>
+ </video>
+ </section>
+ <div id="bottomEmpty"></div>
+ </div>
+ <!-- /div content_top -->
+ </div>
+
+ <!-- JavaScript -->
+ <script src="static/res/js/jquery-1.8.2.min.js"></script>
+ <script src="static/res/js/incresize.js"></script>
+ <script>
+ $(function() {
+ $("video").bind("ended", function() {
+ gotoInterChoice();
+ });
+
+ var ipad = IsIpad();
+ if (ipad) {
+ var footerHtmlCode = "<footer id='controlContainer'><section id='controlbarPlay'><div class='container_hcentering'><button id='btnPlayPause' class='btn txt_hidden' title='play' onClick='playVideo();'>Play/Pause</button> </div></section></footer>";
+ $("#content").append(footerHtmlCode);
+ }
+
+ // Init the resize object
+ incResize.init("content", "topEmpty", "video", "bottomEmpty", ipad ? "controlContainer" : null, 40, 1388/586, true);
+ incResize.resizeElements();
+
+ if (ipad) {
+ document.onmousemove = function() {
+ showBarPointerOnAction(4000);
+ };
+
+ document.ontouch = function() {
+ showBarPointerOnAction(8000);
+ };
+
+ document.ontouchmove = function(e) {
+ e.preventDefault();
+ };
+ }
+ });
+
+ var timeoutBarPointer;
+ var goUp = false;
+ var canShowCursor = false;
+
+ var showBarPointer = function(state) {
+ if (state) {
+ // Bar
+ goUp = true;
+ $("#controlbarPlay").stop(true);
+ $("#controlbarPlay").animate({bottom: 0}, 500, function() {goUp = false;})
+
+ // Pointer
+ document.body.style.cursor = "default";
+ canShowCursor = false;
+
+ } else {
+ // Bar
+ $("#controlbarPlay").animate({bottom: -70}, 2000, function() {});
+
+ // Pointer
+ document.body.style.cursor = "url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==), pointer";
+ setTimeout(function() {canShowCursor = true;}, 300);
+ }
+ }
+
+ var hideBarPointerTimeout = function(time) {
+ timeoutBarPointer = setTimeout(function() {
+ showBarPointer(false);
+ }, time);
+ };
+
+ var showBarPointerOnAction = function(hideTime) {
+ // Controls
+ if (!goUp && canShowCursor) {
+ showBarPointer(true);
+ if (timeoutBarPointer) {
+ window.clearTimeout(timeoutBarPointer);
+ }
+ hideBarPointerTimeout(hideTime);
+ }
+ };
+
+ var hideBarAtPlay = true;
+ var playVideo = function() {
+ var video = $('#video').get(0);
+ if (video.paused) {
+ video.play();
+
+ if (hideBarAtPlay) {
+ // Hide bar and pointer in seconds
+ hideBarPointerTimeout(4000);
+ hideBarAtPlay = false;
+ }
+ } else {
+ video.pause();
+ }
+ $('#btnPlayPause').css({"background-position" : video.paused ? '-77px 0' : '-77px -17px'});
+ }
+ var gotoInterChoice = function() {
+ location.href = "inter_choix.html";
+ }
+ </script>
+ </body>
+</html>
\ No newline at end of file
--- a/web/prologue.html Mon Jan 21 18:23:40 2013 +0100
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,143 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
- <head>
- <meta charset="utf-8">
- <title>The End - @todo</title>
-
- <meta name="description" content="@todo">
- <link rel="icon" href="static/res/img/favicon.ico" />
-
- <!-- 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="full_hightScreen pointer">
- <!-- div content_top - the elements takes the full height of "content_top" -->
- <div id="content_top" onClick="gotoInterChoice();">
- <div id="topEmpty"></div>
- <section id="main">
- <video id="video" autoplay poster="static/res/img/poster_prologue.jpg">
- <source src="http://dvvsyrlsr21oz.cloudfront.net/PROLOGUE-SD.mp4" type="video/mp4" />
- <source src="http://dvvsyrlsr21oz.cloudfront.net/PROLOGUE-SD.webmsd.webm" type="video/webm" />
-
- <p>Votre navigateur ne gère pas l'élément video @todo</p>
- </video>
- </section>
- <div id="bottomEmpty"></div>
- </div>
- <!-- /div content_top -->
- </div>
-
- <!-- JavaScript -->
- <script src="static/res/js/jquery-1.8.2.min.js"></script>
- <script src="static/res/js/incresize.js"></script>
- <script>
- $(function() {
- $("video").bind("ended", function() {
- gotoInterChoice();
- });
-
- var ipad = IsIpad();
- if (ipad) {
- var footerHtmlCode = "<footer id='controlContainer'><section id='controlbarPlay'><div class='container_hcentering'><button id='btnPlayPause' class='btn txt_hidden' title='play' onClick='playVideo();'>Play/Pause</button> </div></section></footer>";
- $("#content").append(footerHtmlCode);
- }
-
- // Init the resize object
- incResize.init("content", "topEmpty", "video", "bottomEmpty", ipad ? "controlContainer" : null, 40, 1388/586, true);
- incResize.resizeElements();
-
- if (ipad) {
- document.onmousemove = function() {
- showBarPointerOnAction(4000);
- };
-
- document.ontouch = function() {
- showBarPointerOnAction(8000);
- };
-
- document.ontouchmove = function(e) {
- e.preventDefault();
- };
- }
- });
-
- var timeoutBarPointer;
- var goUp = false;
- var canShowCursor = false;
-
- var showBarPointer = function(state) {
- if (state) {
- // Bar
- goUp = true;
- $("#controlbarPlay").stop(true);
- $("#controlbarPlay").animate({bottom: 0}, 500, function() {goUp = false;})
-
- // Pointer
- document.body.style.cursor = "default";
- canShowCursor = false;
-
- } else {
- // Bar
- $("#controlbarPlay").animate({bottom: -70}, 2000, function() {});
-
- // Pointer
- document.body.style.cursor = "url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==), pointer";
- setTimeout(function() {canShowCursor = true;}, 300);
- }
- }
-
- var hideBarPointerTimeout = function(time) {
- timeoutBarPointer = setTimeout(function() {
- showBarPointer(false);
- }, time);
- };
-
- var showBarPointerOnAction = function(hideTime) {
- // Controls
- if (!goUp && canShowCursor) {
- showBarPointer(true);
- if (timeoutBarPointer) {
- window.clearTimeout(timeoutBarPointer);
- }
- hideBarPointerTimeout(hideTime);
- }
- };
-
- var hideBarAtPlay = true;
- var playVideo = function() {
- var video = $('#video').get(0);
- if (video.paused) {
- video.play();
-
- if (hideBarAtPlay) {
- // Hide bar and pointer in seconds
- hideBarPointerTimeout(4000);
- hideBarAtPlay = false;
- }
- } else {
- video.pause();
- }
- $('#btnPlayPause').css({"background-position" : video.paused ? '-77px 0' : '-77px -17px'});
- }
- var gotoInterChoice = function() {
- location.href = "inter_choix.html";
- }
- </script>
- </body>
-</html>
\ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/web/the-end-etc.html Mon Jan 21 21:00:24 2013 +0100
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="fr">
+ <head>
+ <meta charset="utf-8">
+ <title>The End - @todo</title>
+
+ <meta name="description" content="@todo">
+ <link rel="icon" href="static/res/img/favicon.ico" />
+
+ <!-- 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="full_hightScreen">
+ <div class="btnReturn">
+ <button id="btnChoice" class="btn" onClick="location.href='transition.html';">Choice</button>
+ </div>
+
+ <!--this div empty allows the element content_vcentering to be vertically aligned -->
+ <section class="full_hightScreen">
+ <div class="strut"></div><!--
+ this comment corrects the white-space (display: inline);
+ --><div id="bg_img" class="fullScreen_vcentering">
+ <img id="bgimage" alt="The End, etc." src="static/res/img/menuBonus.jpg" />
+ </div>
+
+ <div id="menuBonus" class="positionAbs">
+ <!--this div empty allows the element content_vcentering to be vertically aligned -->
+ <div class="strut"></div><!--
+ this comment corrects the white-space (display: inline);
+ --><div class="fullScreen_vcentering white big_txt">
+ <p><a href="int_fiction.html">Fiction</a></p>
+ <p><a href="int_portraits.html">Portraits</a></p>
+ <p><a href="int_music.html">Musique</a></p>
+ <!--<p class="margin_huge black">Director's cut</p>
+ <p><a href="int_film.html">Film</a></p>-->
+ </div>
+ </div>
+ </section>
+ </div>
+
+ <!-- JavaScript -->
+ <script src="static/res/js/jquery-1.8.2.min.js"></script>
+
+ </body>
+</html>
\ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/web/transition-the-end-etc.html Mon Jan 21 21:00:24 2013 +0100
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="fr">
+ <head>
+ <meta charset="utf-8">
+ <title>The End - @todo</title>
+
+ <meta name="description" content="@todo">
+ <link rel="icon" href="static/res/img/favicon.ico" />
+
+ <!-- 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="full_hightScreen">
+
+ <!--Part 1 - opacity -->
+ <section id="theEnd" class="box_transparance">
+ <!--this div empty allows the element content_vcentering to be vertically aligned -->
+ <div class="strut"></div><!--
+ this comment corrects the white-space (display: inline);
+ --><h1>THE END, ETC.</h1>
+ </section>
+ <!--/Part 1 -->
+
+ <!--Part 2 -->
+ <!--this div empty allows the element content_vcentering to be vertically aligned -->
+ <section id="transition" class="full_hightScreen">
+ <div class="strut"></div><!--
+ this comment corrects the white-space (display: inline);
+ --><div id="bg_img" class="fullScreen_vcentering">
+ <img id="bgimage" alt="The End, etc." src="" />
+ </div>
+
+ <div id="transitionTxt" class="positionAbs">
+ <!--this div empty allows the element content_vcentering to be vertically aligned -->
+ <div class="strut"></div><!--
+ this comment corrects the white-space (display: inline);
+ --><div class="fullScreen_vcentering white big_txt">
+ <p><a href="partage.html">Partagez</a></p>
+ <p><a href="choix.html">Recommencez</a></p>
+ <p class="margin_exeptionTop"><a href="menu_bonus.html">The end, etc.</a></p>
+ <p class="margin_exeptionBottom"><a href="niv2_hp.html">Prolongez l'expérience</a></p>
+ <p><a href="credit.html">Crédits</a></p>
+ </div>
+ </div>
+ </section>
+ <!--/Part 2 -->
+ </div>
+
+ <!-- JavaScript -->
+ <script src="static/res/js/jquery-1.8.2.min.js"></script>
+ <script>
+ var r = Math.floor(Math.random()*3);
+ if (r == 0) {
+ $("#bgimage").attr("src", "static/res/img/transitionChoix1.jpg");
+ } else if (r == 1) {
+ $("#bgimage").attr("src", "static/res/img/transitionChoix2.jpg");
+ } else {
+ $("#bgimage").attr("src", "static/res/img/transitionChoix3.jpg");
+ }
+
+ $(function() {
+ setTimeout(function() {
+ $("#theEnd").addClass("display");
+ $("#transition").css({"opacity" : 0});
+ $("#transition").animate({opacity: 1}, 3000);
+ }, 3000);
+ });
+ </script>
+
+ </body>
+</html>
\ No newline at end of file
--- a/web/transition.html Mon Jan 21 18:23:40 2013 +0100
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,87 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
- <head>
- <meta charset="utf-8">
- <title>The End - @todo</title>
-
- <meta name="description" content="@todo">
- <link rel="icon" href="static/res/img/favicon.ico" />
-
- <!-- 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="full_hightScreen">
-
- <!--Part 1 - opacity -->
- <section id="theEnd" class="box_transparance">
- <!--this div empty allows the element content_vcentering to be vertically aligned -->
- <div class="strut"></div><!--
- this comment corrects the white-space (display: inline);
- --><h1>THE END, ETC.</h1>
- </section>
- <!--/Part 1 -->
-
- <!--Part 2 -->
- <!--this div empty allows the element content_vcentering to be vertically aligned -->
- <section id="transition" class="full_hightScreen">
- <div class="strut"></div><!--
- this comment corrects the white-space (display: inline);
- --><div id="bg_img" class="fullScreen_vcentering">
- <img id="bgimage" alt="The End, etc." src="" />
- </div>
-
- <div id="transitionTxt" class="positionAbs">
- <!--this div empty allows the element content_vcentering to be vertically aligned -->
- <div class="strut"></div><!--
- this comment corrects the white-space (display: inline);
- --><div class="fullScreen_vcentering white big_txt">
- <p><a href="partage.html">Partagez</a></p>
- <p><a href="choix.html">Recommencez</a></p>
- <p class="margin_exeptionTop"><a href="menu_bonus.html">The end, etc.</a></p>
- <p class="margin_exeptionBottom"><a href="niv2_hp.html">Prolongez l'expérience</a></p>
- <p><a href="credit.html">Crédits</a></p>
- </div>
- </div>
- </section>
- <!--/Part 2 -->
- </div>
-
- <!-- JavaScript -->
- <script src="static/res/js/jquery-1.8.2.min.js"></script>
- <script>
- var r = Math.floor(Math.random()*3);
- if (r == 0) {
- $("#bgimage").attr("src", "static/res/img/transitionChoix1.jpg");
- } else if (r == 1) {
- $("#bgimage").attr("src", "static/res/img/transitionChoix2.jpg");
- } else {
- $("#bgimage").attr("src", "static/res/img/transitionChoix3.jpg");
- }
-
- $(function() {
- setTimeout(function() {
- $("#theEnd").addClass("display");
- $("#transition").css({"opacity" : 0});
- $("#transition").animate({opacity: 1}, 3000);
- }, 3000);
- });
- </script>
-
- </body>
-</html>
\ No newline at end of file