--- a/web/choix-de-mots-the-end-etc.html Mon Jan 21 21:04:36 2013 +0100
+++ b/web/choix-de-mots-the-end-etc.html Mon Jan 21 21:05:32 2013 +0100
@@ -37,7 +37,7 @@
<!--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">
+ --><div id="mots" class="fullScreen_vcentering blue big_txt pointer" style="display: none;">
<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>
@@ -57,13 +57,17 @@
<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"]);
+ ["choix3fond1.jpg", "choix3fond2.jpg", "choix3fond3.jpg"],
+ function() {
+ $("#mots").show();
+ });
// Set the list of words and the mosaic effect
incChoice.setWordsAndEffect(0);
@@ -72,7 +76,7 @@
incChoice.saveChosenVideos([-1, -1, -1]);
// Set video hd by default
- incChoice.setHD(1);
+ incChoice.setHD(1);
});
</script>
</body>
--- a/web/credits-the-end-etc.html Mon Jan 21 21:04:36 2013 +0100
+++ b/web/credits-the-end-etc.html Mon Jan 21 21:05:32 2013 +0100
@@ -1,226 +1,223 @@
-<!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>
+<!DOCTYPE html>
+<html lang="fr" >
+ <head>
+ <meta charset="utf-8">
+ <title>Crédits - The End, etc.</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="boxReturn">
+ <button id="btnChoice" class="btn" onClick="location.href='transition-the-end-etc.html';">Choice</button>
+ </div>
+
+ <section id="credit">
+ <h3>MEMO PROD</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>
+ <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>PRODUCTION</h4>
+
+ <p><span class="gris">Productrice déléguée</span> Géraldine Michelon</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">Assistante de production web</span> Hélène Adamo</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">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>
+ <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>
+ <h3>Institut de recherche et d’innovation du Centre Georges Pompidou</h3>
+
+ <p><span class="gris">Directeur</span> Bernard Stiegler</p>
+ <p><span class="gris">Directeur exé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 interface utilisateur</span> Raphaël Velt</p>
+ <p><span class="gris">Designer</span> Samuel Huron</p>
+ <p><span class="gris">Ingénieur</span> Thibaut Cavalié</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">Montage image et son - Étalonnage</span> FILM FACTORY</p>
+ <p><span class="gris">Mixage</span> ARCHIPEL</p>
+ <br>
+
+ <h4>ASSURANCE</h4>
+ <p>CONTINENTAL MEDIA ASSURANCES</p>
+ <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>
+ <p>Arnaud Ragonnet</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, Séverin Favriau, M. 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
--- a/web/fiction-the-end-etc.html Mon Jan 21 21:04:36 2013 +0100
+++ b/web/fiction-the-end-etc.html Mon Jan 21 21:05:32 2013 +0100
@@ -27,8 +27,8 @@
<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 class="boxReturn">
+ <button class="btnReturn" onClick="location.href='the-end-etc.html';">Retour</button>
</div>
<!--this div empty allows the element content_vcentering to be vertically aligned -->
--- a/web/film-aleatoire-the-end-etc.html Mon Jan 21 21:04:36 2013 +0100
+++ b/web/film-aleatoire-the-end-etc.html Mon Jan 21 21:05:32 2013 +0100
@@ -2,10 +2,17 @@
<html lang="fr">
<head>
<meta charset="utf-8">
- <title>The End niv1- @todo</title>
+ <title>The End, etc. : ma version du film de Laetitia Masson</title>
+
+ <meta name="description" content="The End, etc. : ma version du film de Laetitia Masson">
+ <link rel="icon" href="static/res/img/favicon.ico" />
- <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, etc." />
+ <meta property="og:type" content="website" />
+ <meta property="og:image" content="http://www.clients.incandescence.com/theend/theend_fb.jpg" />
+ <meta property="og:site_name" content="The End, etc." />
+ <meta property="og:description" content="The End, etc. : ma version du film de Laetitia Masson #TheEndEtc"/>
<!-- Mobile Specific Metas -->
<meta name="viewport" content="user-scalable=no">
@@ -45,7 +52,7 @@
<!-- @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="btnInfo" class="btn" onclick="openClosePopup();">INFO</button>
<button id="btnSDHD" class="btn" onClick="incPlayer.ctrlHdSd()">SD/HD</button>
@@ -72,35 +79,39 @@
<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>
+ <button id="btnChoice" class="btn" onClick="location.href = 'transition-the-end-etc.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')">
+ <div id="popUpTitle">
+ <h2>THE END, ETC. <br><span class="text_lowercase">de Laetitia Masson.</span></h2>
+ <a id="popUpClose" class="pointer" onclick="openClosePopup();">
<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>À 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…<br>
+ 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.<br>
+ Fin du monde ?<br>
+ Fin d'une ère ?<br>
+ Fin d'un idéal ?<br>
+ Début d'autre chose ?<br>
+ Ceci est votre expérience.</p>
+
+ <h3>UNE EXPÉRIENCE DE CINÉMA</h3>
<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>
+ <h3>PROLONGER L’EXPÉRIENCE</h3>
<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>
+ <h3>ETC.</h3>
<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>
+ <p class="gris">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>
@@ -114,15 +125,15 @@
<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/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());
+ if (incPlayer.init("transition-the-end-etc.html", "video", "btnPlayPause", "btnSDHD", "current", "duration", "stateBar", "progressBar", "static/res/json/sequences.json")) {
+ incPlayer.createPopSequence(incChoice.getChoosenWords(), incChoice.getChosenVideos(), incChoice.readUrlVideosIndex());
// Add class on all videos
$("#video").children().addClass("small_video");
--- a/web/index.html Mon Jan 21 21:04:36 2013 +0100
+++ b/web/index.html Mon Jan 21 21:05:32 2013 +0100
@@ -12,10 +12,9 @@
<!-- Site Optimization for Facebook -->
<meta property="og:title" content="The End, etc." />
<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:image" content="http://www.clients.incandescence.com/theend/theend_fb.jpg" />
<meta property="og:site_name" content="The End, etc." />
- <meta property="og:description" content="@todo"/>
+ <meta property="og:description" content="The End, etc. : une expérience web de Laetitia Masson"/>
<!-- Mobile Specific Metas -->
<meta name="viewport" content="user-scalable=no">
@@ -119,29 +118,29 @@
</footer>
<section id="popUpDiv" style="display:none;">
<div id="popUpTitle">
- <h3>Mentions Légales</h3>
- <a id="popUpClose" class="floatR clearfix pointer" onclick="popup('popUpDiv', 'content')">
+ <h2>Mentions Légales</h2>
+ <a id="popUpClose" class="pointer" onclick="popup('popUpDiv', 'content')">
<img alt="Fermer" src="static/res/img/popUpClose.png"/>
</a>
</div>
<div id="popUpTxtScroll">
- <p><strong>Editeur :</strong> FRANCE TELEVISIONS<br>
- <strong>Siège social :</strong> 7, Esplanade Henri de France 75015 PARIS<br>
- <strong>RCS de Paris :</strong> 432 766 947<br>
- <strong>Directeur de la Publication :</strong> Rémy Pflimlin<br>
- <strong>Tel :</strong> (+33) 08 90 71 02 02 (0.15 €/min)</p>
- <p><strong>Hébergeur :</strong> FRANCE OXALIDE<br>
- <strong>Siège social :</strong> 25, Boulevard de Strasbourg 75010 Paris<br>
- <strong>Tel :</strong> + 33(0)1 75 771 660</p>
- <h4>DONNEES PERSONNELLES</h4>
+ <p><span class="gris">Editeur :</span> FRANCE TELEVISIONS<br>
+ <span class="gris">Siège social :</span> 7, Esplanade Henri de France 75015 PARIS<br>
+ <span class="gris">RCS de Paris :</span> 432 766 947<br>
+ <span class="gris">Directeur de la Publication :</span> Rémy Pflimlin<br>
+ <span class="gris">Tel :</span> (+33) 08 90 71 02 02 (0.15 €/min)</p>
+ <p><span class="gris">Hébergeur :</span> FRANCE OXALIDE<br>
+ <span class="gris">Siège social :</span> 25, Boulevard de Strasbourg 75010 Paris<br>
+ <span class="gris">Tel :</span> + 33(0)1 75 771 660</p>
+ <h3>DONNEES PERSONNELLES</h3>
<p>En application de la loi n°78-17 du 6 janvier 1978 relative à l’informatique, aux fichiers et aux libertés, chaque internaute dispose des droits d’opposition (article 38 de la loi), d’accès (articles 39, 41 et 42 de la loi) et de rectification (article 40 de la loi) des données le concernant. </p>
<p>Ainsi, il peut exiger que soient rectifiées, complétées, clarifiées, mises à jour ou effacées les informations le concernant qui sont inexactes, incomplètes, équivoques, périmées, ou dont la collecte ou l’utilisation, la communication ou la conservation est interdite.</p>
<p>Chaque internaute peut exercer ces droits :<br>
- soit en accédant à son compte à l’aide de son e-mail et de son mot de passe à l’adresse suivante : http://www.leclubfrancetelevisions.fr<br>
- soit en écrivant à FranceTélévisions - A l’attention de Monsieur le Responsable du Service Inscription Internet - 7 Esplanade Henri de France 75015 Paris.</p>
- <h4>CREDITS</h4>
+ <h3>CREDITS</h3>
<p>Les dépêches de presse et contenus graphiques d’agence utilisés dans la préparation des informations sont la propriété intellectuelle des différentes agences partenaires de francetvinfo (AFP, Reuters, MaxpPPP, Sipa, Getty).</p>
- <h4>LOGICIELS</h4>
+ <h3>LOGICIELS</h3>
<p>Certains sites de France Télévisions sont créés à partir des logiciels libres (sous licence GPL) de publication Spip (http://www.uzine.net/spip) et Drupal (http://drupal.org).</p>
</div>
</section>
@@ -153,7 +152,7 @@
<script src="static/res/js/ease.js"></script>
<script src="static/res/js/incresize.js"></script>
<script src="static/res/js/incmosaic.js"></script>
- <script src="static/res/js/popUp.js"></script>
+ <script src="static/res/js/popup.js"></script>
<script>
$(function() {
// Init the resize object
@@ -168,7 +167,7 @@
incMosaic.addImageUrl("static/res/img/accueil-05.jpg");
// Start mosaic effect
- incMosaic.start("mosaic", 1, 9, 5, true, false, null);
+ incMosaic.start("mosaic", 1, 9, 5, true, false, null, null);
});
var cliked = false;
@@ -190,7 +189,7 @@
}, mosaicFadeStartAtTime);
setTimeout(function() {
- location.href = "prologue.html";
+ location.href = "prologue-the-end-etc.html";
}, nextPageTime);
}
--- a/web/instructions-the-end-etc.html Mon Jan 21 21:04:36 2013 +0100
+++ b/web/instructions-the-end-etc.html Mon Jan 21 21:05:32 2013 +0100
@@ -56,7 +56,7 @@
});
var gotoChoice = function() {
- location.href = "choix.html";
+ location.href = "choix-de-mots-the-end-etc.html";
}
</script>
</body>
--- a/web/mindex.html Mon Jan 21 21:04:36 2013 +0100
+++ b/web/mindex.html Mon Jan 21 21:05:32 2013 +0100
@@ -15,10 +15,9 @@
<!-- Site Optimization for Facebook -->
<meta property="og:title" content="The End, etc." />
<meta property="og:type" content="website" />
- <meta property="og:url" content="http://www.the-end.nouvelles-ecritures.francetv.fr/" />
- <meta property="og:image" content="https://www.the-end.nouvelles-ecritures.francetv.fr/theend_fb.jpg" />
+ <meta property="og:image" content="https://www.clients.incandescence.com/theend/theend_fb.jpg" />
<meta property="og:site_name" content="The End, etc." />
- <meta property="og:description" content="Géraldine Michelon présente The End, etc. Un projet écrit et réalisé par Laetitia Masson. Une coproduction France Télévisions - Memo Prod avec la participation du Centre national du cinéma et de l'image animée, Incandescence et Institut de recherche et de l'innovation du Centre Georges Pompidou."/>
+ <meta property="og:description" content="The End, etc. : une expérience web de Laetitia Masson"/>
<!-- Test Smartphone -->
<script src="static/res/js/incdetectmobile.js"></script>
@@ -103,44 +102,44 @@
</ul>
<ul id="socialMedia" class="floatR">
<li><a class="pointer" onclick="popup('popUpDiv', 'content')">Mentions légales</a></li><!--
- --><li class="socialLogo"><a href="http://www.facebook.com/share.php?u=http://the-end.nouvelles-ecritures.francetv.fr/" target="_blank"><img alt="Partager The End sur Facebook" src="static/res/img/footer/facebook.png"/></a></li><!--
- --><li class="socialLogo"><a href="https://twitter.com/share?url=https%3A%2F%2Fwww.the-end.nouvelles-ecritures.francetv.fr%2F" target="_blank"><img alt="Partager The End sur Twitter" src="static/res/img/footer/twitter.png"/></a></li>
+ --><li class="socialLogo"><a href="http://www.facebook.com/share.php?u=http://www.clients.incandescence.com/theend/" target="_blank"><img alt="Partager The End sur Facebook" src="static/res/img/footer/facebook.png"/></a></li><!--
+ --><li class="socialLogo"><a href="https://twitter.com/share?url=https%3A%2F%2Fwww.clients.incandescence.com%2Ftheend%2F" target="_blank"><img alt="Partager The End sur Twitter" src="static/res/img/footer/twitter.png"/></a></li>
</ul>
</footer>
<section id="popUpDiv" style="display:none;">
<div id="popUpTitle">
- <h3>Mentions légales</h3>
- <a id="popUpClose" class="floatR clearfix pointer" onclick="popup('popUpDiv', 'content')">
+ <h2>Mentions Légales</h2>
+ <a id="popUpClose" class="pointer" onclick="popup('popUpDiv', 'content')">
<img alt="Fermer" src="static/res/img/popUpClose.png"/>
</a>
</div>
<div id="popUpTxtScroll">
- <p><strong>Editeur :</strong> FRANCE TELEVISIONS<br>
- <strong>Siège social :</strong> 7, Esplanade Henri de France 75015 PARIS<br>
- <strong>RCS de Paris :</strong> 432 766 947<br>
- <strong>Directeur de la Publication :</strong> Rémy Pflimlin<br>
- <strong>Tel :</strong> (+33) 08 90 71 02 02 (0.15 €/min)</p>
- <p><strong>Hébergeur :</strong> FRANCE OXALIDE<br>
- <strong>Siège social :</strong> 25, Boulevard de Strasbourg 75010 Paris<br>
- <strong>Tel :</strong> + 33(0)1 75 771 660</p>
- <h4>DONNEES PERSONNELLES</h4>
+ <p><span class="gris">Editeur :</span> FRANCE TELEVISIONS<br>
+ <span class="gris">Siège social :</span> 7, Esplanade Henri de France 75015 PARIS<br>
+ <span class="gris">RCS de Paris :</span> 432 766 947<br>
+ <span class="gris">Directeur de la Publication :</span> Rémy Pflimlin<br>
+ <span class="gris">Tel :</span> (+33) 08 90 71 02 02 (0.15 €/min)</p>
+ <p><span class="gris">Hébergeur :</span> FRANCE OXALIDE<br>
+ <span class="gris">Siège social :</span> 25, Boulevard de Strasbourg 75010 Paris<br>
+ <span class="gris">Tel :</span> + 33(0)1 75 771 660</p>
+ <h3>DONNEES PERSONNELLES</h3>
<p>En application de la loi n°78-17 du 6 janvier 1978 relative à l’informatique, aux fichiers et aux libertés, chaque internaute dispose des droits d’opposition (article 38 de la loi), d’accès (articles 39, 41 et 42 de la loi) et de rectification (article 40 de la loi) des données le concernant. </p>
<p>Ainsi, il peut exiger que soient rectifiées, complétées, clarifiées, mises à jour ou effacées les informations le concernant qui sont inexactes, incomplètes, équivoques, périmées, ou dont la collecte ou l’utilisation, la communication ou la conservation est interdite.</p>
<p>Chaque internaute peut exercer ces droits :<br>
- soit en accédant à son compte à l’aide de son e-mail et de son mot de passe à l’adresse suivante : http://www.leclubfrancetelevisions.fr<br>
- soit en écrivant à FranceTélévisions - A l’attention de Monsieur le Responsable du Service Inscription Internet - 7 Esplanade Henri de France 75015 Paris.</p>
- <h4>CREDITS</h4>
+ <h3>CREDITS</h3>
<p>Les dépêches de presse et contenus graphiques d’agence utilisés dans la préparation des informations sont la propriété intellectuelle des différentes agences partenaires de francetvinfo (AFP, Reuters, MaxpPPP, Sipa, Getty).</p>
- <h4>LOGICIELS</h4>
+ <h3>LOGICIELS</h3>
<p>Certains sites de France Télévisions sont créés à partir des logiciels libres (sous licence GPL) de publication Spip (http://www.uzine.net/spip) et Drupal (http://drupal.org).</p>
</div>
- </section>
+ </section>
</div>
<div id="blanket" style="display:none;"></div>
<!-- JavaScript -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
- <script src="static/res/js/popUp.js"></script>
+ <script src="static/res/js/popup.js"></script>
<script>
$(function() {
var resize = function() {
--- a/web/music-the-end-etc.html Mon Jan 21 21:04:36 2013 +0100
+++ b/web/music-the-end-etc.html Mon Jan 21 21:05:32 2013 +0100
@@ -27,9 +27,10 @@
<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 class="boxReturn">
+ <button class="btnReturn" onClick="location.href='the-end-etc.html';">Retour</button>
</div>
+
<!--this div empty allows the element content_vcentering to be vertically aligned -->
<section id="intMusic" class="full_hightScreen">
<div class="strut"></div><!--
@@ -144,7 +145,7 @@
var audio = audioObj.get(0);
playingIndex = audioIndex;
- if (audio.readyState === 4) {
+ if (audio.readyState === 4 || audio.readyState === 3) {
// Play the sound
playSound(audio);
@@ -153,10 +154,7 @@
audio.load();
loading = true;
- // Add event canplaythrough
audioObj.bind("canplaythrough", function() {
- console.log("canplaythrough");
-
// Play the sound
playSound(audio);
@@ -174,7 +172,6 @@
// Add event ended
audioObj.bind("ended", function() {
- console.log("ended");
// Change the button pause in play
$("#playpause" + playingIndex).css({"background-position" : '0 0'});
--- a/web/partage-du-film-aleatoire-the-end-etc.html Mon Jan 21 21:04:36 2013 +0100
+++ b/web/partage-du-film-aleatoire-the-end-etc.html Mon Jan 21 21:05:32 2013 +0100
@@ -4,18 +4,10 @@
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" />
+ <title>The End, etc.</title>
- <!-- 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"/>
+ <meta name="description" content="The End, etc.">
+ <link rel="icon" href="static/res/img/favicon.ico" />
<!-- Mobile Specific Metas -->
<meta name="viewport" content="user-scalable=no">
@@ -38,8 +30,8 @@
<!-- 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 class="boxReturn">
+ <button id="btnChoice" class="btn" onClick="location.href='transition-the-end-etc.html';">Choice</button>
</div>
<!-- change with js: height and line-height (the same size) of "container_vcentering" -->
<header id="top" class="container_vcentering">
@@ -61,9 +53,9 @@
<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>
+ <a id="sharefb" target="_blank"><img alt="Partager The End, etc. 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>
+ <li><a id="sharetw" target="_blank"><img alt="Partager The End, etc. sur Twitter" src="static/res/img/footer/twitter.png"/></a></li>
</ul>
</div>
</section>
@@ -74,14 +66,24 @@
<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>
+ <script>
$(function() {
// Init the resize object
incResize.init("content", "top", "imgMiddle", "bottom", null, 130, 1075/604);
incResize.resizeElements();
- // Debug
- console.log(incChoice.createShareUrl());
+ var replaceAll = function(txt, replace, with_this) {
+ return txt.replace(new RegExp(replace, 'g'),with_this);
+ }
+
+ var urlToShare = incChoice.createShareUrl();
+ var urlToShareTw = replaceAll(urlToShare, ":", "%3A");
+ urlToShareTw = replaceAll(urlToShareTw, "/", "%2F");
+
+ // Set the facebook share url
+ $("#sharefb").attr('href', "http://www.facebook.com/share.php?u=" + urlToShare);
+
+ $("#sharetw").attr('href', "https://twitter.com/share?url=" + urlToShareTw);
});
</script>
</body>
--- a/web/portraits-regarde-the-end-etc.html Mon Jan 21 21:04:36 2013 +0100
+++ b/web/portraits-regarde-the-end-etc.html Mon Jan 21 21:05:32 2013 +0100
@@ -30,7 +30,11 @@
<!-- div content_top - the elements takes the full height of "content_top" -->
<div id="content_top">
- <div id="topEmpty"></div>
+ <div id="topEmpty">
+ <div class="boxReturn">
+ <button class="btnReturn" onClick="location.href='the-end-etc.html';">Retour</button>
+ </div>
+ </div>
<section id="main">
<!-- Video -->
<div id="video" class="small_video">
@@ -45,7 +49,7 @@
<!-- @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="btnInfo" class="btn" onclick="openClosePopup();">INFO</button>
<button id="btnSDHD" class="btn" onClick="incPlayer.ctrlHdSd()">SD/HD</button>
@@ -72,7 +76,7 @@
<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>
+ <button id="btnChoice" class="btn" onClick="location.href = 'transition-the-end-etc.html';">Choice</button>
</div>
</section>
<!-- /Controlbar container -->
@@ -80,31 +84,35 @@
<!-- 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')">
+ <h2>THE END, ETC. <br><span class="text_lowercase">de Laetitia Masson.</span></h2>
+ <a id="popUpClose" class="floatR clearfix" onclick="openClosePopup();">
<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>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…<br>
+ 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.<br>
+ Fin du monde ?<br>
+ Fin d'une ère ?<br>
+ Fin d'un idéal ?<br>
+ Début d'autre chose ?<br>
+ Ceci est votre expérience.</p>
+
+ <h3>UNE EXPÉRIENCE DE CINÉMA</h3>
<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>
+ <h3>PROLONGER L’EXPÉRIENCE</h3>
<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>
+ <h3>ETC.</h3>
<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>
+ <p class="gris">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>
+ <div id="blanket" style="display:none;"></div>
<!-- JavaScript -->
<script src="static/res/js/jquery-1.8.2.min.js"></script>
@@ -114,14 +122,14 @@
<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/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")) {
+ if (incPlayer.init("portraits-the-end-etc.html", "video", "btnPlayPause", "btnSDHD", "current", "duration", "stateBar", "progressBar")) {
incPlayer.playSingleVideo("http://dvvsyrlsr21oz.cloudfront.net/" + incChoice.getSingleVideo());
// Add class on all videos
--- a/web/portraits-the-end-etc.html Mon Jan 21 21:04:36 2013 +0100
+++ b/web/portraits-the-end-etc.html Mon Jan 21 21:05:32 2013 +0100
@@ -27,10 +27,10 @@
<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 class="boxReturn">
+ <button class="btnReturn" onClick="location.href='the-end-etc.html';">Retour</button>
</div>
-
+
<!--this div empty allows the element content_vcentering to be vertically aligned -->
<section class="full_hightScreen">
<div class="strut"></div><!--
@@ -91,7 +91,7 @@
// Set video hd by default
incChoice.setHD(1);
- location.href = "portraits_player.html";
+ location.href = "portraits-regarde-the-end-etc.html";
}
</script>
</body>
--- a/web/prologue-the-end-etc.html Mon Jan 21 21:04:36 2013 +0100
+++ b/web/prologue-the-end-etc.html Mon Jan 21 21:05:32 2013 +0100
@@ -31,7 +31,7 @@
<div id="content_top" onClick="gotoInterChoice();">
<div id="topEmpty"></div>
<section id="main">
- <video id="video" autoplay poster="static/res/img/poster_prologue.jpg">
+ <video id="video" autoplay poster="static/res/img/poster_prologue.png">
<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" />
@@ -136,7 +136,7 @@
$('#btnPlayPause').css({"background-position" : video.paused ? '-77px 0' : '-77px -17px'});
}
var gotoInterChoice = function() {
- location.href = "inter_choix.html";
+ location.href = "instructions-the-end-etc.html";
}
</script>
</body>
--- a/web/the-end-etc.html Mon Jan 21 21:04:36 2013 +0100
+++ b/web/the-end-etc.html Mon Jan 21 21:05:32 2013 +0100
@@ -27,8 +27,8 @@
<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 class="boxReturn">
+ <button id="btnChoice" class="btn" onClick="location.href='transition-the-end-etc.html';">Choice</button>
</div>
<!--this div empty allows the element content_vcentering to be vertically aligned -->
@@ -44,9 +44,9 @@
<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><a href="fiction-the-end-etc.html">Fiction</a></p>
+ <p><a href="portraits-the-end-etc.html">Portraits</a></p>
+ <p><a href="music-the-end-etc.html">Musique</a></p>
<!--<p class="margin_huge black">Director's cut</p>
<p><a href="int_film.html">Film</a></p>-->
</div>
--- a/web/transition-the-end-etc.html Mon Jan 21 21:04:36 2013 +0100
+++ b/web/transition-the-end-etc.html Mon Jan 21 21:05:32 2013 +0100
@@ -51,11 +51,11 @@
<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>
+ <p><a href="partage-du-film-aleatoire-the-end-etc.html">Partagez</a></p>
+ <p><a href="choix-de-mots-the-end-etc.html">Recommencez</a></p>
+ <p class="margin_exeptionTop"><a href="the-end-etc.html">The end, etc.</a></p>
+ <p class="margin_exeptionBottom"><a href="experience-the-end-etc.html">Prolongez l'expérience</a></p>
+ <p><a href="credits-the-end-etc.html">Crédits</a></p>
</div>
</div>
</section>
@@ -78,8 +78,8 @@
setTimeout(function() {
$("#theEnd").addClass("display");
$("#transition").css({"opacity" : 0});
- $("#transition").animate({opacity: 1}, 3000);
- }, 3000);
+ $("#transition").animate({opacity: 1}, 2000);
+ }, 2000);
});
</script>