--- a/web/index.html Wed Jan 16 12:12:51 2013 +0100
+++ b/web/index.html Wed Jan 16 21:26:15 2013 +0100
@@ -4,17 +4,17 @@
xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
<meta charset="utf-8">
- <title>The End - @todo</title>
+ <title>The End, etc.</title>
- <meta name="description" content="@todo">
+ <meta name="description" content="Géraldine Michelon présente The End, etc. Un projet écrit et réalisé par Laetitia Masson. Une coproduction France Télévisions - Memo Prod avec la participation du Centre national du cinéma et de l'image animée, Incandescence et Institut de recherche et de l'innovation du Centre Georges Pompidou, en participation avec France Inter.">
<link rel="icon" href="static/res/img/favicon.ico" />
<!-- Site Optimization for Facebook -->
- <meta property="og:title" content="the end- @todo" />
+ <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:site_name" content="the end @todo" />
+ <meta property="og:site_name" content="The End, etc." />
<meta property="og:description" content="@todo"/>
<!-- Mobile Specific Metas -->
@@ -111,7 +111,7 @@
</li>
</ul>
<ul id="socialMedia" class="floatR">
- <li class="license"><a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/fr/"><img alt="Licence Creative Commons" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-nd/3.0/fr/80x15.png" /></a></li><!--
+ <li class="license"><a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/fr/" target="_blank"><img alt="Licence Creative Commons" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-nd/3.0/fr/80x15.png" /></a></li><!--
--><li><a class="pointer" onclick="popup('popUpDiv', 'content')">Mentions légales</a></li><!--
--><li class="socialLogo"><a href="http://www.facebook.com/share.php?u=http://www.clients.incandescence.com/theend/" target="_blank"><img alt="Partager The End sur Facebook" src="static/res/img/footer/facebook.png"/></a></li><!--
--><li class="socialLogo"><a href="https://twitter.com/share?url=https%3A%2F%2Fwww.clients.incandescence.com%2Ftheend%2F" target="_blank"><img alt="Partager The End sur Twitter" src="static/res/img/footer/twitter.png"/></a></li>
--- a/web/int_music.html Wed Jan 16 12:12:51 2013 +0100
+++ b/web/int_music.html Wed Jan 16 21:26:15 2013 +0100
@@ -44,7 +44,7 @@
this comment corrects the white-space (display: inline);
--><div class="fullScreen_vcentering white big_txt">
<article class="boxAudio">
- <audio id="audio1" ontimeupdate="update()">
+ <audio id="audio1" preload="metadata">
<source src="audio.ogg" type="audio/ogg">
<source src="http://clients.incandescence.com/theend/MP3/MARSEILLAISE-CHANT_3.mp3" type="audio/mpeg">
<p>Audio non supportée </p>
@@ -56,7 +56,7 @@
<p id="title1">LA MARSEILLAISE</p><br>
- <audio id="audio2" ontimeupdate="update()">
+ <audio id="audio2" preload="metadata">
<source src="audio.ogg" type="audio/ogg">
<source src="http://clients.incandescence.com/theend/MP3/IDEE-CHANT_5.mp3" type="audio/mpeg">
<p>Audio non supportée </p>
@@ -66,7 +66,7 @@
<p id="current2" class="time">0'00''</p>
<p id="title2">L'IDÉE</p><br>
- <audio id="audio3" ontimeupdate="update()">
+ <audio id="audio3" preload="metadata">
<source src="audio.ogg" type="audio/ogg">
<source src="http://clients.incandescence.com/theend/MP3/INTERNATIONALE-CHANT_1.mp3" type="audio/mpeg">
<p>Audio non supportée </p>
@@ -76,7 +76,7 @@
<p id="current3" class="time">0'00''</p>
<p id="title3">L'INTERNATIONALE</p><br>
- <audio id="audio4" ontimeupdate="update()">
+ <audio id="audio4" preload="metadata">
<source src="audio.ogg" type="audio/ogg">
<source src="http://clients.incandescence.com/theend/MP3/NIDIEU-CHANT-2.mp3" type="audio/mpeg">
<p>Audio non supportée </p>
@@ -85,7 +85,7 @@
<p id="current4" class="time">0'00''</p>
<p id="title4">NI DIEU NI MAÎTRE</p><br>
- <audio id="audio5" ontimeupdate="update()">
+ <audio id="audio5" preload="metadata">
<source src="audio.ogg" type="audio/ogg">
<source src="http://clients.incandescence.com/theend/MP3/ZEBU-CHANT_4.mp3" type="audio/mpeg">
<p>Audio non supportée </p>
@@ -104,15 +104,28 @@
<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" + playingIndex).get(0).pause();
+ audio.pause();
setTimeValue(0);
// Change the button pause in play
@@ -126,40 +139,74 @@
// Play a new audio
if (audioIndex !== wasPlaying) {
- // Reset position and play the audio
- var audio = $("#audio" + audioIndex).get(0);
- audio.play();
- audio.currentTime = 0;
+
+ var audioObj = $("#audio" + audioIndex);
+ var audio = audioObj.get(0);
playingIndex = audioIndex;
- // Add event on the end
- $("#audio" + audioIndex).bind("ended", function() {
+ 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'});
- playingIndex = -1;
+
+ // 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'});
- // Set the background
- $("#bgimage").attr("src", "static/res/img/choixMusique" + (audioIndex + 1)+ ".jpg");
-
// Change the title color
$("#title" + audioIndex).addClass("gris");
- }
+
+ // Set the background
+ $("#bgimage").attr("src", "static/res/img/choixMusique" + (audioIndex + 1)+ ".jpg");
+ };
};
- var update = function() {
- if (playingIndex !== -1) {
- var audio = $("#audio" + playingIndex).get(0);
- setTimeValue(audio.duration - audio.currentTime);
- }
+ 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);
--- a/web/menu_bonus.html Wed Jan 16 12:12:51 2013 +0100
+++ b/web/menu_bonus.html Wed Jan 16 21:26:15 2013 +0100
@@ -48,6 +48,7 @@
<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>
--- a/web/mindex.html Wed Jan 16 12:12:51 2013 +0100
+++ b/web/mindex.html Wed Jan 16 21:26:15 2013 +0100
@@ -20,12 +20,12 @@
<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."/>
- <!-- Test Smartphone -->
+ <!-- Test Smartphone -->
<script src="static/res/js/incdetectmobile.js"></script>
<script>
if (!IsSmartphone()) { location.href = "index.html"; }
</script>
-
+
<link rel="stylesheet" href="static/res/css/style_1024.css" />
</head>
@@ -49,7 +49,7 @@
<section id="bottom" >
<div class="strut"></div><!--
--><div class="fullScreen_vcentering">
- <p class="txt_bold">Pour composer votre film, rendez-vous sur une tablette ou sur votre ordinateur.</p>
+ <p id="txt_phone">Pour composer votre film, rendez-vous sur une tablette ou sur votre ordinateur.</p>
</div>
</section>
</div>
--- a/web/static/res/css/style_1024.css Wed Jan 16 12:12:51 2013 +0100
+++ b/web/static/res/css/style_1024.css Wed Jan 16 21:26:15 2013 +0100
@@ -664,7 +664,9 @@
text-transform: uppercase;
}
#inter_choice .big_txt p{
- margin: 2.1372em 0; /*109px 0*/
+ /* margin: 2.1372em 0; 109px 0*/
+ margin: 1.9372em 0;
+ line-height: 1.2;
}
#inter_choice .big_txt p:first-child,
#choice .big_txt p:first-child, {
@@ -686,6 +688,12 @@
#transition .big_txt p.margin_exeption{
margin: 0.9215em 0; /*47px 0;*/
}
+#transition .big_txt p.margin_exeptionTop {
+ margin-top: 0.9215em;
+}
+#transition .big_txt p.margin_exeptionBottom {
+ margin-bottom: 0.9215em;
+}
.positionAbs {
position: absolute;
top: 0;
@@ -858,6 +866,9 @@
width: 25%;
display: inline-block;
}
+#intPortrait p a {
+ cursor: pointer;
+}
#intPortrait .white a:hover,
#intPortrait .white a:hover {
color: #7e7878;
@@ -1262,14 +1273,20 @@
/* Resize for screen (max-width: 525px) and smartphone */
/*----------------------------------------------*/
/* la taille du texte choix (plus petit) */
-
@media only screen and (max-width: 900px) {
+ #inter_choice .big_txt p {
+ font-size: 39px;
+ }
#choice .big_txt p,
#transitionTxt .big_txt p {
font-size: 39px;
}
}
+
@media only screen and (max-width: 700px) {
+ #inter_choice .big_txt p {
+ font-size: 28px;
+ }
#choice .big_txt p,
#transitionTxt .big_txt p {
font-size: 28px;
@@ -1286,10 +1303,16 @@
}
@media only screen and (max-width: 480px) {
+ #inter_choice .big_txt p {
+ font-size: 22px;
+ }
#choice .big_txt p,
#transitionTxt .big_txt p {
font-size: 22px;
}
+ #inter_choice .big_txt p {
+ font-size: 18px;
+ }
#theEnd h1 {
font-size: 40px;
}
@@ -1327,7 +1350,43 @@
width: 18px;
height: 18px;
}
+ #content h3 {
+ font-size: 14px;
+ }
+ #content p,
+ #content h4 {
+ font-size: 12px;
+ }
+ /* changement de la taille de titre */
+ #title_hp {
+ padding: 0;
+ margin-left: -20px ; /* decalage du titre à gauche 32 / 53px */
+ }
+ #title_hp h1 {
+ margin: 1px 0 5px 0;
+ padding-left: 1.142857em; /* 32px 40px / -20% */
+ font-size: 28px; /* 43px */
+ }
+ #title_hp h2 {
+ padding-left: 2em; /* 30px 35px / -20% */
+ font-size: 15px; /* 24px */
+ }
+ #title_hp .h2_exeption {
+ font-size: 16px; /* 25px / -20% */
+ }
+ #content .big_link {
+ font-size: 16px;
+ }
+ #popUpClose {
+ width: 10px;
+ height: 10px;
+ }
+}
+
+/*----------------------------------------------*/
+/* Resize for smartphone */
+/*----------------------------------------------*/
body#mobilhp {
height: 100%;
}
@@ -1349,80 +1408,60 @@
#mobilhp footer {
height: 30%;
}
- #content h3 {
- font-size: 14px;
- }
- #content p,
- #content h4 {
- font-size: 12px;
- }
/* pas de padding pour le dernier elem */
#mobilhp footer .logo_partners > li:last-child {
padding-right: 0;
}
/* un nouveau elem sur mobile*/
- #mobilhp .txt_bold {
+ #mobilhp #txt_phone {
font-family: "Arial Black", "arial_blackregular", sans-serif;
- /*text-align: left;*/
- text-align: center;
+ text-align: left;
text-transform: uppercase;
font-size: 14px; /* 43px */
line-height: 1.1;
+ color: #ffffff;
+ margin: 1em 0;
}
/* changement de la taille de titre */
- #title_hp {
- padding: 0;
- margin-left: -20px ; /* decalage du titre à gauche 32 / 53px */
- }
#mobilhp #title_hp {
padding: 0;
display: inline-block;
vertical-align: bottom;
}
- #title_hp h1 {
- margin: 1px 0 5px 0;
- padding-left: 1.142857em; /* 32px 40px / -20% */
- font-size: 28px; /* 43px */
- }
- #title_hp h2 {
- padding-left: 2em; /* 30px 35px / -20% */
- font-size: 15px; /* 24px */
- }
- #title_hp .h2_exeption {
- font-size: 16px; /* 25px / -20% */
- }
- #popUpClose {
- width: 10px;
- height: 10px;
- }
#mobilhp #blanket {
top: 0;
}
-}
-@media only screen and (max-width: 480px) and (orientation: landscape) {
+
+
+@media only screen and (orientation: landscape) {
#mobilhp header {
- height: 38%;
+ height: 36%;
}
#mobilhp #bottom {
height: 26%;
}
- #mobilhp footer {
- height: 36%;
+ #mobilhp footer {
+ height: 38%;
}
#mobilhp #content{
width: 98%;
}
- footer .logo_partners {
- margin-bottom: 0;
- }
+
#mobilhp footer .logo_partners > li:last-child {
padding-right: 22px;
}
- footer #socialMedia {
- margin-top: 10px;
+ #mobilhp footer #socialMedia {
+ margin-top: 0;
}
}
/*
+ footer .logo_partners {
+ margin-bottom: 0;
+ }
+ footer #socialMedia {
+ margin-top: 10px;
+ }
+
.logo_partners {
float: none;
--- a/web/static/res/js/incplayer.js Wed Jan 16 12:12:51 2013 +0100
+++ b/web/static/res/js/incplayer.js Wed Jan 16 21:26:15 2013 +0100
@@ -48,6 +48,8 @@
this.nextPage = nextPage;
this.videoDivId = videoDivId;
+ this.readUrlVideosIndex();
+
// Control
this.playButton = $("#" + playButtonId).get(0);
this.hdSdButton = $("#" + hdSdButtonId).get(0);
@@ -824,6 +826,25 @@
}
return "";
};
+
+ this.createUrlVideosIndex = function(index1, index2, index3)
+ {
+ return ((index1 << 16) | (index2 << 8) | index3) << 4;
+ }
+
+ this.readUrlVideosIndex = function()
+ {
+ var query = window.location.search.substring(1);
+ if (query.length < 0) {
+ return;
+ }
+
+ var number = parseInt(query);
+ number = this.createUrlVideosIndex(20, 30, 44);
+
+ console.log("query: " + number);
+ console.log(n);
+ };
}
var incPlayer = new IncPlayer();
--- a/web/transition.html Wed Jan 16 12:12:51 2013 +0100
+++ b/web/transition.html Wed Jan 16 21:26:15 2013 +0100
@@ -53,8 +53,8 @@
--><div class="fullScreen_vcentering white big_txt">
<p><a href="partage.html">Partagez</a></p>
<p><a href="choix.html">Recommencez</a></p>
- <p><a href="menu_bonus.html">The end, etc.</a></p>
- <p class="margin_exeption"><a href="niv2_hp.html">Prolongez l'expérience</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>