| author | Edwin Razafimahatratra <edwin@robotalismsoft.com> |
| Wed, 12 Dec 2012 03:10:24 +0100 | |
| changeset 46 | 542252e0c615 |
| parent 45 | f7bfdc49982b |
| child 47 | dbd46ed42b0d |
--- a/web/choix.html Tue Dec 11 21:13:42 2012 +0100 +++ b/web/choix.html Wed Dec 12 03:10:24 2012 +0100 @@ -29,12 +29,12 @@ <div class="strut"></div><!-- this comment corrects the white-space (display: inline); --><div class="fullScreen_vcentering box_vcentering blue big_txt"> - <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> + <p><a id="mot1" onClick="incChoice.selectWord(1);">Famille</a></p> + <p><a id="mot2" onClick="incChoice.selectWord(2);">Amour</a></p> + <p><a id="mot3" onClick="incChoice.selectWord(3);">Travail</a></p> + <p><a id="mot4" onClick="incChoice.selectWord(4);">International</a></p> + <p><a id="mot5" onClick="incChoice.selectWord(5);">Dieu</a></p> + <p><a id="mot6" onClick="incChoice.selectWord(6);">Président</a></p> </div> </section> </div> @@ -54,9 +54,9 @@ incResize.init("content", null, "mosaic", null, null, 130, 1920/809, null, 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"]); + 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);
--- a/web/index.html Tue Dec 11 21:13:42 2012 +0100 +++ b/web/index.html Wed Dec 12 03:10:24 2012 +0100 @@ -23,7 +23,7 @@ <div id="content_top"> <!-- change with js: height and line-height (the same size) of "container_vcentering" --> - <header id="top" class="container_vcentering"> + <header id="top" class="container_vcentering box_transparance"> <div id="title_hp" class="box_vcentering"> <h2>UNE EXPÉRIENCE DE CINÉMA</h2> <h1>THE END, ETC.</h1> @@ -36,15 +36,15 @@ </section> <!-- change with js: height and line-height (the same size) of "container_vcentering" --> - <section id="bottom" class="container_vcentering"> + <section id="bottom" class="container_vcentering box_transparance"> <div class="box_vcentering"> - <p class="big_link"><a href ="prologue.html">COMPOSEZ VOTRE FILM</a></p> + <p class="big_link"><a onClick="fadeAndNext();">COMPOSEZ VOTRE FILM</a></p> </div> </section> </div> <!-- /div content_top --> - <footer id="footer"> + <footer id="footer" class="box_transparance"> <ul id="logo_partners" class="floatL"> <li>UNE CO-PRODUCTION <ul> @@ -112,6 +112,23 @@ // Start mosaic effect incMosaic.start("mosaic", 1, 9, 5, true, false, null); }); + + var cliked = false; + var fadeAndNext = function() { + if (cliked) { + return; + } + + cliked = true; + var time = 4000; + + // Fade on elements + $('.box_transparance').animate({opacity: 0}, time - 100); + + setTimeout(function() { + location.href = "prologue.html"; + }, time); + } </script> </body> </html> \ No newline at end of file
--- a/web/inter_choix.html Tue Dec 11 21:13:42 2012 +0100 +++ b/web/inter_choix.html Wed Dec 12 03:10:24 2012 +0100 @@ -17,7 +17,7 @@ </head> <body> <!-- div content - site takes the full height of browser --> - <div id="content" class="full_screen pointer" onClick=""> + <div id="content" class="full_screen pointer" onClick="gotoChoice();"> <!--this div empty allows the element content_vcentering to be vertically aligned --> <div class="strut"></div><!-- @@ -40,9 +40,12 @@ $('.box_transparance').animate({ opacity: 0, }, 10000, function() { - // Animation complete. + gotoChoice(); }); }); + var gotoChoice = function() { + location.href = "choix.html"; + } </script> </body> </html> \ No newline at end of file
--- a/web/niv1_videoplayer.html Tue Dec 11 21:13:42 2012 +0100 +++ b/web/niv1_videoplayer.html Wed Dec 12 03:10:24 2012 +0100 @@ -46,26 +46,27 @@ <button id="btnSDHD" class="btn" onClick="/">SD/HD</button> - <button id="btnBck" class="btn txt_hidden" onClick="incPlayer.ctrlPrev();">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="incPlayer.ctrlPlay(this);">Play/Pause</button> + <button id="stateBar" class="txt_hidden" onClick="/"></button> </div> <ul id="progressTime"> <!-- class="txt_white" can be used to color current time in white --> <li id="current" class="floatL"></li> - <li id="duration" class="floatR"></li> + <li id="duration" class="floatR">0'00''</li> </ul> </div> - - <button id="btnFwd" class="btn txt_hidden" onClick="incPlayer.ctrlNext();">Forward</button> + <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(this);">Play/Pause</button> + + <button id="btnFwd" class="btn txt_hidden" onClick="incPlayer.ctrlNext();">Forward</button> <button id="btnChoice" class="btn">Choice</button> </div> @@ -77,18 +78,19 @@ <script src="http://static.francetv.fr/js/jquery.metanav-min.js" charset="utf-8"></script> <!-- JavaScript --> <script src="static/res/js/jquery-1.8.2.min.js"></script> + <script src="static/res/js/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/incresize.js"></script> <script src="static/res/js/incplayer.js"></script> + <script src="static/res/js/incchoice.js"></script> <script> $(function() { - // Init the resize object - //incResize.init("content", null, "video", null, "footer", 0, 1920/1080); + // Init the video player + if (incPlayer.init("video", "btnPlayPause", "current", "duration", "static/res/json/sequences.json", true)) { + incPlayer.createPopSequence(incChoice.getChoosenWords()); - // Init the video player - if (incPlayer.init("video", "btnPlayPause", "current", "duration", "static/res/json/sequences2.json", true)) { - incPlayer.createPopSequence(); + // Add class on all videos + $("#video").children().addClass("small_video"); } }); </script>
--- a/web/prologue.html Tue Dec 11 21:13:42 2012 +0100 +++ b/web/prologue.html Wed Dec 12 03:10:24 2012 +0100 @@ -23,8 +23,9 @@ <div class="strut"></div><!-- this comment corrects the white-space (display: inline); --><section class="fullScreen_vcentering"> - <video autoplay poster="/"> - <source src="static/res/video/boucle/FOND2.mp4"type="video/mp4" /> + <video class="small_video" autoplay poster="/"> + <!--<source src="http://dvvsyrlsr21oz.cloudfront.net/PROLOGUE-HD.mp4" type="video/mp4" />--> + <source src="http://dvvsyrlsr21oz.cloudfront.net/JP-HD-01.mp4"type="video/mp4" /> <source src="/"type="video/webm" /> <p>Votre navigateur ne gère pas l'élément video @todo</p> </video>
--- a/web/static/res/css/style.css Tue Dec 11 21:13:42 2012 +0100 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,190 +0,0 @@ -/*----------------------------------------------*/ -/* Summary */ -/*----------------------------------------------*/ - -/* 1- Mentions */ -/* 2- Color codes */ -/* 3- Reset */ -/* 4- Base styles */ -/* 5- Video */ -/* 6- Controls */ -/* 7- Sidebar */ -/* 8- Contact */ -/* 9- Footer */ - -/*----------------------------------------------*/ -/* 1- Mentions */ -/*----------------------------------------------*/ - -/* @client : The End */ -/* @date : octobre 2012 */ - -/*----------------------------------------------*/ -/* 2- Color codes */ -/*----------------------------------------------*/ - -/*----------------------------------------------*/ -/* 3- Reset */ -/*----------------------------------------------*/ - -html, body,div,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td { - margin:0; - padding:0; -} -html { - font-size: 100%; -} -h1,h2,h3,h4,h5,h6 { - font-size: 100%; - font-weight: normal; - font-style: normal; -} -fieldset,img, button { - border: 0; -} -li { - list-style: none; -} -textarea, table, td { - word-wrap: break-word; - white-space: pre-wrap; -} -table { - border-spacing: 0; - border-collapse: collapse; -} -caption,th { - text-align: left; -} -legend { - color: #000; -} -blockquote:before, blockquote:after, q:before, q:after { - content: ''; - content: none; -} -label, input[type="submit"], input[type="button"], button { - cursor: pointer; -} -input, button, select { - vertical-align: middle; - font-size: 100%; -} -table, td, blockquote, textarea, input, object, embed, video { - max-width: 100%; -} - -/* HTML5 display-role reset for older browsers */ -header, footer, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, figure, figcaption, time, dialog { - display: block; -} - -/*----------------------------------------------*/ -/* 4- Base styles */ -/*----------------------------------------------*/ -body { - background-color: black; -} -/*----------------------------------------------*/ -/* 5- Video */ -/*----------------------------------------------*/ -video { - width: 600px; - height: 400px; -} -/*----------------------------------------------*/ -/* 6- Controls */ -/*----------------------------------------------*/ -#playerContainer { - position: relative; - z-index: 1; -} - -#controlContainer { - position: absolute; - z-index: 10; - top: 200px; - left: 0; - right: 0; - height: 40px; - overflow: hidden; - background-color: blue; -} -#controlbar { - position: absolute; - /*bottom: -40px;*/ - bottom: 0; - left: 0; - height: 40px; - padding: 0 50px; - - -webkit-transition: all 0.3s ease-in-out; - -moz-transition: all 0.3s ease-in-out; - -o-transition: all 0.3s ease-in-out; - transition: all 0.3s ease-in-out; -} -#controlContainer:hover #controlbar { - bottom: 0; -} -.bnt { - height: 32px; - width: 32px; - margin-left: 15px; - text-indent: -99999px; - background-image: url(../img/player_btn.png); -} -#controlbar .bnt:first-child { - margin-left: 0; -} -#btnPlay { - background-position: 0 -32px; -} -#btnPlay:hover, -#btnPlay:focus { - background-position: 0 0; -} -#btnPaused { - background-position: 32px -32px; -} -#btnPaused:hover, -#btnPaused:focus { - background-position: 32px 0; -} -#btnBck { - background-position: -96px -32px; -} -#btnBck:hover, -#btnBck:focus { - background-position: -96px 0; -} -#btnFwd { - background-position: -64px -32px; -} -#btnFwd:hover, -#btnFwd:focus { - background-position: -64px 0; -} -#btnFullScr { - background-position: -132px -32px; - width: 48px; - } -#btnFullScr:hover, -#btnFullScr:focus { - background-position: -132px 0; -} -#btnHD { - background-position: -180px -32px; - width: 52px; -} -#btnHD:hover, -#btnHD:focus { - background-position: -180px 0; -} - -/*----------------------------------------------*/ -/* 9- Footer */ -/*----------------------------------------------*/ - - - -
--- a/web/static/res/css/style2.css Tue Dec 11 21:13:42 2012 +0100 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,19 +0,0 @@ -video { - position: relative; - width: 1280px; - height: 720px; - z-index: 1; -} - -#controls { - position: absolute; - left: 300px; - top: 550px; - z-index: 2; - - padding: 25px; - background: black; - color: white; - font-size: 2em; - font-family: Arial; -} \ No newline at end of file
--- a/web/static/res/css/style_1024.css Tue Dec 11 21:13:42 2012 +0100 +++ b/web/static/res/css/style_1024.css Wed Dec 12 03:10:24 2012 +0100 @@ -438,6 +438,9 @@ /*----------------------------------------------*/ /* Video */ /*----------------------------------------------*/ +video.small_video{ + min-width: 100%; +} .float_sequence { white-space: nowrap; overflow: hidden; @@ -547,13 +550,13 @@ } .container_hcentering { margin: 0 auto; - width: 530px; + width: 580px; } #progressContainer { width: 240px; display: inline-block; vertical-align: top; - padding-top: 6px; + height: 38px; margin: 0 25px; } /* @@ -568,6 +571,7 @@ */ .progress_bar { height: 5px; + margin-top: 8px; border-radius: 2px; } #progressBar { @@ -581,24 +585,28 @@ z-index: 2; top: 0; left: 0; + margin: 0; width: 40px; /* to change with JS */ background-color: #ffffff; } -#btnPlayPause { +#stateBar { position: absolute; z-index: 3; top: -6px; - left: 33px; /* to change with JS */ - width: 21px; - height: 22px; + left: 32px; /* to change with JS */ + + width: 16px; + height: 16px; + background-color: #000000; + border-radius: 2px; + border: 2px solid #777777; + -moz-box-shadow: 0 0 5px 3px #000000; + -webkit-box-shadow: 0 0 5px 3px #000000; + box-shadow: 0 0 5px 3px #000000; +} background-position: -72px 0; } -#btnPlayPause:hover, -#btnPlayPause:focus { - background-position: -72px -22px; -} - -footer ul#progressTime{ +footer #progressTime{ margin: 10px 0; width: 240px; font-size: 11px; @@ -627,12 +635,22 @@ background-position: -55px 0; width: 16px; height: 16px; - margin-left: 30px; + margin-right: 30px; } #btnBck:hover, #btnBck:focus { background-position: -55px -16px; } +#btnPlayPause { + background-position: -77px 0; + width: 16px; + height: 18px; + margin-right: 30px; +} +#btnPlayPause:hover, +#btnPlayPause:focus { + background-position: -77px -22px; +} #btnFwd { background-position: -93px 0; width: 16px; @@ -721,6 +739,12 @@ .choix .big_txt p{ margin: 25px 0; } +#partage .big_txt p{ + margin: 18px 0; +} +#partage .big_txt p.margin_exeption{ + margin: 47px 0; +} .inter_choice .big_txt p:first-child, .choice .big_txt p:first-child, { margin-top: 62px; @@ -734,16 +758,18 @@ .pointer { cursor: pointer; } -#bg_mosaic { +#bg_mosaic, +#bg_img { z-index: 5; } -#choix { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - z-index: 6; +#choix, +#partage { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 6; } .blue a, .blue a:link,
--- a/web/static/res/css/style_1024_avdernier.css Tue Dec 11 21:13:42 2012 +0100 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,373 +0,0 @@ -/*----------------------------------------------*/ -/* Summary */ -/*----------------------------------------------*/ - -/* 1- Mentions */ -/* 2- Color codes */ -/* 3- Reset */ -/* 4- Base styles */ -/* 5- Video */ -/* 6- Controls */ -/* 7- Sidebar */ -/* 8- Contact */ -/* 9- Footer */ - -/*----------------------------------------------*/ -/* 1- Mentions */ -/*----------------------------------------------*/ - -/* @client : The End */ -/* @date : octobre 2012 */ - -/*----------------------------------------------*/ -/* 2- Color codes */ -/*----------------------------------------------*/ - -/*----------------------------------------------*/ -/* 3- Reset */ -/*----------------------------------------------*/ - -html,body,div,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,legend,input,button,textarea,select,figure,p,blockquote,th,td { - margin:0; - padding:0; -} - -/* 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using `em` units */ -/* 2. Prevents iOS text size adjust after orientation change, without disabling user zoom.*/ -html { - font-size: 100%; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ - -ms-text-size-adjust: 100%; /* 2 */ -} -h1,h2,h3,h4,h5,h6 { - font-size: 100%; - font-weight: normal; - font-style: normal; -} -li { - list-style: none; -} -textarea, table, td, th, code, pre { - word-wrap: break-word; - white-space: pre-wrap; -} -table { - border-spacing: 0; - border-collapse: collapse; -} -caption, th { - text-align: left; -} -/* 1. Corrects alignment displayed oddly in IE 6/7 */ -legend { - color: #000; - *margin-left: -7px; /* 1 */ -} -blockquote:before, blockquote:after, q:before, q:after { - content: ''; - content: none; -} -label, input[type="submit"], input[type="button"], button { - cursor: pointer; -} -input, button, select { - vertical-align: middle; - font-size: 100%; -} - -/* 1. Removes default vertical scrollbar in IE 6/7/8/9 */ -/* 2. Improves readability and alignment in all browsers */ -/* 2. Allow only vertical resizing of textareas */ -textarea { - overflow: auto; /* 1 */ - vertical-align: top; /* 2 */ - resize: vertical; /* 3 */ -} - -fieldset, img, button { - border: 0; -} -img, table, td, blockquote, code, pre, textarea, input, object, embed, video { - max-width: 100%; -} - -/* Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3 */ -audio, canvas, video { - display: inline-block; - *display: inline; - *zoom: 1; -} - -/* Prevents `sub` and `sup` affecting `line-height` in all browsers */ -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} -sup { - top: -0.5em; -} -sub { - bottom: -0.25em; -} - -/* HTML5 - Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3 */ -header, footer, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, figure, figcaption, time, dialog { - display: block; -} - -/*----------------------------------------------*/ -/* 4- Base styles */ -/*----------------------------------------------*/ -body { - background-color: black; - font-size: 1em; - line-height: 1; -} - -/* Example */ - -h1 { - font-family: "Arial Black", sans-serif; - font-size: 43px; - color: #ffffff; -} - -h2 { - font-family: Arial, sans-serif; - font-size: 24px; - color: #bfbfbf; -} - -h3 { - -} - -h4 { - -} - -h5 { - -} - -h6 { - -} -p, -pre { - margin: 1em 0; -} -dl, -menu, -ol, -ul { - margin: 1em 0; -} - -b, -strong, -.bold { - font-weight: bold; -} -.uppercase{ - text-transform:uppercase; - } -a, -a:link, -a:visited, -a:active { - text-decoration: none; - } -a:hover, -a:focus { - } - -/* Clearfix: contain floats For modern browsers */ -/* 1. The space content is one way to avoid an Opera bug when the `contenteditable` attribute is included anywhere else in the document. - * Otherwise it causes space to appear at the top and bottom of elements that receive the `clearfix` class */ -/* 2. The use of `table` rather than `block` is only necessary if using `:before` to contain the top-margins of child elements */ - -.clearfix:before, -.clearfix:after { - content: " "; /* 1 */ - display: table; /* 2 */ -} -.clearfix:after { - clear: both; -} - -/* For IE 6/7 only. Include this rule to trigger hasLayout and contain floats */ -.clearfix { - *zoom: 1; -} -/*----------------------------------------------*/ -/* site takes all the space of the browser */ -/*----------------------------------------------*/ -html, body { - height: 100%; -} -#content{ - width: 98%; - min-height: 100%; - position: relative; - margin: 0 auto; -} -#content #content_top { - margin-top: 0; - margin-bottom: 0; - padding-bottom: 70px; /* height of <footer> + some margin */ -} -footer { - - position: absolute; - bottom: 0; - left: 0; - width: 100%; - - height: 47px; /* height of <footer> */ - padding: 0 0 20px 0; -} -/*----------------------------------------------*/ -/* the elements takes the full height of "content_top" */ -/*----------------------------------------------*/ -.conteneur_vcentering { - text-align:center; -} -.box_vcentering { - vertical-align: middle; - display: inline-block; - line-height: 1; - text-align: center; -} -/*----------------------------------------------*/ -/* 4- Main HP */ -/*----------------------------------------------*/ -section a, -section a:link, -section a:visited, -section a:active { - color: #ffffff; - } -section a:hover, -section a:focus { - color: #bfbfbf; - } -#title_hp { - text-align : center; - padding: 11px 0 11px 0; - margin-left: -13px; /* 53px */ - text-transform: uppercase; -} -#title_hp h1 { - margin: 0 0 5px 0; -} -#title_hp .h2_exeption{ - margin-left: -170px; /* 86px */ -} -.h2_exeption { - font-size: 25px; -} -#main { - display:block; - margin: 0 auto; -} -.big_link { - font-family: "Arial Black", sans-serif; - font-size: 21px; - text-align: center; - padding: 14px 0 16px 0; - margin: 0; -} -/*----------------------------------------------*/ -/* 9- Footer HP */ -/*----------------------------------------------*/ - -footer a, -footer a:link, -footer a:visited, -footer a:active { - color: #bfbfbf; - } -footer a:hover, -footer a:focus { - color: #ffffff; - } -footer ul { - margin: 0; - - font-family: "Arial Bold", sans-serif; - font-size: 9px; - color: #b9b9b9; - text-transform: uppercase; -} -footer ul li{ - display: inline; -} -footer ul li a{ - display: inline-block; -} -footer ul li img{ - min-width: 100%; -} - -footer #logo_partners{ - float: left; -} -footer #logo_partners>li { - display: inline-block; - padding-right: 22px; -} -footer #logo_partners li a{ - padding-top: 10px; - height: 28px; - line-height: 28px; - text-align:bottom; -} -footer #logo_partners li a img { - vertical-align:bottom; -} -footer #logo_partners li:first-child li a{ - width: 39px; -} -footer #logo_partners li:first-child li+li a{ - width: 40px; - padding-left: 18px; -} -footer #logo_partners li+li li a{ - width: 42px; -} -footer #logo_partners li+li li+li a{ - width: 62px; - padding-left: 16px; -} -footer #logo_partners li+li li+li+li a{ - width: 56px; - padding-left: 16px; -} - -footer #socialMedia { - float: right; - margin-top: 24px; -} -footer #socialMedia li a{ - display: inline-block; - vertical-align: middle; -} -footer #socialMedia li+li a{ - width: 20px; - height: 20px; -} -footer #socialMedia li+li { - padding-left: 22px; -} - -/*----------------------------------------------*/ -/* 5- Video */ -/*----------------------------------------------*/ - -/*----------------------------------------------*/ -/* 6- Controls */ -/*----------------------------------------------*/
--- a/web/static/res/js/incchoice.js Tue Dec 11 21:13:42 2012 +0100 +++ b/web/static/res/js/incchoice.js Wed Dec 12 03:10:24 2012 +0100 @@ -32,10 +32,8 @@ $("#mot5").html("dieu"); $("#mot6").html("president"); - // Set images for effect - //incMosaic.clear(); - //incMosaic.addImageUrl("static/res/img/" + this.image1); - //incMosaic.addImageUrl("static/res/img/" + this.image2); + // class + // by default there is the calss blue } else if (choiceIndex == 1) { $("#mot1").html("actif"); @@ -45,10 +43,8 @@ $("#mot5").html("patrie"); $("#mot6").html("politique"); - // Set images for effect - //incMosaic.clear(); - //incMosaic.addImageUrl("static/res/img/" + this.image2); - //incMosaic.addImageUrl("static/res/img/" + this.image3); + // class + $("#choix").removeClass("blue").addClass("white"); } else { $("#mot1").html("spleen"); @@ -58,13 +54,9 @@ $("#mot5").html("desir"); $("#mot6").html("bonheur"); - // Set images for effect - //incMosaic.clear(); - //incMosaic.addImageUrl("static/res/img/" + this.image3); - //incMosaic.addImageUrl("static/res/img/" + this.image1); + // class + $("#choix").removeClass("white").addClass("red"); } - - //incMosaic.start("mosaic", effectSpeed, 9, 5, false, true, function() {incChoice.effectIsDone();}); }; this.selectWord = function(wordIndex) @@ -98,18 +90,23 @@ incMosaic.UnpauseEffect(false); // Fade the text - $('.big_txt').animate({opacity: 1}, 20000 * 1 / effectSpeed); + $('.big_txt').animate({opacity: 1}, 10000 * 1 / effectSpeed); if (this.currentWorldIndex == 3) { // The 3 words get choosen location.href = "niv1_videoplayer.html"; } - } + }; + + this.getChoosenWords = function() + { + return [this.getCookie("niv1_world0"), this.getCookie("niv1_world1"), this.getCookie("niv1_world2")]; + }; this.setCookie = function(name, value) { $.removeCookie(name); - $.cookie(name, value, { expires: 7, path: '/' }); + $.cookie(name, value, { expires: 7, path: '/' }); }; this.getCookie = function(name) {
--- a/web/static/res/js/incplayer.js Tue Dec 11 21:13:42 2012 +0100 +++ b/web/static/res/js/incplayer.js Wed Dec 12 03:10:24 2012 +0100 @@ -59,9 +59,6 @@ // Load all sequences data this.allSequencesData = this.loadJson(jsonFile); - this.logi("sequences in part1: " + (this.allSequencesData.part1 !== undefined ? this.allSequencesData.part1.length : 0)); - this.logi("sequences in part2: " + (this.allSequencesData.part2 !== undefined ? this.allSequencesData.part2.length : 0)); - this.logi("sequences in part3: " + (this.allSequencesData.part3 !== undefined ? this.allSequencesData.part3.length : 0)); this.initDone = true; return true; @@ -78,7 +75,7 @@ } }; - this.createPopSequence = function() + this.createPopSequence = function(words) { if (!this.initDone) { this.loge("incplayer not initialized"); @@ -89,29 +86,24 @@ this.destroySequence(); // Choose the 3 video - this.choosePopSequence(); + this.choosePopSequence(words); // And cerate the popcorn sequence this.initPopSequence(); }; - this.choosePopSequence = function() + this.choosePopSequence = function(words) { this.sequences = []; - if (this.allSequencesData.part1 !== undefined && this.allSequencesData.part1.length) { - this.sequences.push(this.allSequencesData.part1[this.random(0, this.allSequencesData.part1.length)]); - } - if (this.allSequencesData.part2 !== undefined && this.allSequencesData.part2.length) { - this.sequences.push(this.allSequencesData.part2[this.random(0, this.allSequencesData.part2.length)]); - } - if (this.allSequencesData.part3 !== undefined && this.allSequencesData.part3.length) { - this.sequences.push(this.allSequencesData.part3[this.random(0, this.allSequencesData.part3.length)]); - } + var videos = this.allSequencesData.videos; + this.sequences.push(this.getRandomVideos(words[0])); + this.sequences.push(this.getRandomVideos(words[1])); + this.sequences.push(this.getRandomVideos(words[2])); // Set the video file name var i; for (i = 0; i < this.sequences.length; ++i) { - var file = this.sequences[i].src; + var file = this.sequences[i]; // HD if(this.hd) { @@ -119,11 +111,16 @@ } // Extention - file += "." + this.videoExt; + file += "." + /*this.videoExt*/ "mp4"; // todo // Set the final file - this.sequences[i].src = file; + this.sequences[i] = file; } + + for (i = 0; i < this.sequences.length; ++i) { + this.sequences[i] = { src: this.sequences[i], in: 0, out: -1 }; + } + this.logi("choosed sequences:"); for (i = 0; i < this.sequences.length; ++i) { @@ -131,6 +128,36 @@ } }; + this.getRandomVideos = function(word) + { + var index = this.getWordIndex(word); + var videos = []; + + // Get all video affected by this word + for (var i = 0; i < this.allSequencesData.videos.length; ++i) { + var video = this.allSequencesData.videos[i]; + + // We push has many time the url that the score for the word + for (var j = 0; j < video.scoreWord[index]; ++j) { + videos.push(video.src); + } + } + + return videos[this.random(0, videos.length)]; + } + + this.getWordIndex = function(word) + { + var words = this.allSequencesData.mots; + for (var i = 0; i < words.length; ++i) { + if (words[i] == word) { + return i; + } + } + console.log("getWordIndex erreur"); + return -1; + }; + this.initPopSequence = function() { var self = this; @@ -145,9 +172,6 @@ // Hide controls pop.controls(false); - // Mute (debug) - pop.mute(); - self.listenEvent(pop, "playing", false, function() { self.displayPlayButton(false); self.logi("play sequence: " + self.sequenceToString(self.popSeq.active)); @@ -171,32 +195,21 @@ self.playerIsReady = true; + // todo // Set total duration - $(self.progressDuration).html(self.secondsToTime(self.popSeq.duration())); + //$(self.progressDuration).html(self.secondsToTime(self.popSeq.duration())); if (!self.iOS) { // Automatic play self.ctrlPlay(); - - if (self.seekTime !== 0.0) { - self.popSeq.jumpTo(self.seekTime); - self.seekTime = 0.0; - } } // Unlisten event self.popSeq.off("loadedmetadata"); - - // Call the resize object - if (incResize !== undefined) { - incResize.resizeElements(); - } - self.logi("the player is ready"); }); self.popSeq.on("cycle", function() { - self.logi("CYCLE !"); }); };
--- a/web/static/res/json/sequences.json Tue Dec 11 21:13:42 2012 +0100 +++ b/web/static/res/json/sequences.json Wed Dec 12 03:10:24 2012 +0100 @@ -1,18 +1,314 @@ -{ - "words" : [ - "famille", "amour", "travail", "international", "dieu", "president", "actif", "passif", "corps", "charite", "patrie", "politique", "spleen", "ideal", "origines", "peur", "desir", "bonheur" - ], - - "videos" : [ - { - "name": "kristina1", - "src": "http://www.akamai.com/xxxxxxxxx/kristina1", - "wordscore": [0, 0, 0, 0, 0, 0, 7, 0, 8, 0, 0, 0, 4, 0, 8, 0, 0, 0] - }, - { - "name": "kristina2", - "src": "http://www.akamai.com/xxxxxxxxx/kristina2", - "wordscore": [0, 0, 0, 0, 8, 5, 3, 3, 8, 0, 0, 2, 10, 1, 8, 1, 0, 0] - } - ] -} +{ + "mots" : [ + "famille", "amour", "travail", "international", "dieu", "president", "actif", "passif", "corps", "charite", "patrie", "politique", "spleen", "ideal", "origines", "peur", "desir", "bonheur" + ], + + "videos" : [ + { + "name": "kristina1", + "src": "http://dvvsyrlsr21oz.cloudfront.net/kristina-HD-01", + "scoreWord": [0, 0, 0, 0, 0, 0, 7, 0, 8, 0, 0, 0, 4, 0, 8, 0, 0, 0] + }, + { + "name": "kristina2", + "src": "http://dvvsyrlsr21oz.cloudfront.net/kristina-HD-02", + "scoreWord": [0, 0, 0, 0, 8, 5, 3, 3, 8, 0, 0, 2, 10, 1, 8, 1, 0, 0] + }, + { + "name": "kristina3", + "src": "http://dvvsyrlsr21oz.cloudfront.net/kristina-HD-03", + "scoreWord": [0, 0, 10, 0, 0, 0, 7, 0, 8, 0, 0, 6, 10, 1, 0, 0, 3, 0] + }, + { + "name": "virginie1", + "src": "http://dvvsyrlsr21oz.cloudfront.net/virginie-HD-01", + "scoreWord": [1, 10, 10, 0, 9, 10, 2, 0, 0, 0, 0, 8, 0, 0, 1, 10, 1, 1] + }, + { + "name": "jp1", + "src": "http://dvvsyrlsr21oz.cloudfront.net/JP-HD-01", + "scoreWord": [10, 0, 5, 0, 0, 0, 10, 0, 5, 0, 0, 0, 0, 0, 10, 0, 0, 5] + }, + { + "name": "jp2", + "src": "http://dvvsyrlsr21oz.cloudfront.net/JP-HD-01", + "scoreWord": [10, 0, 0, 0, 0, 9, 0, 0, 0, 0, 0, 7, 0, 10, 8, 0, 0, 5] + }, + { + "name": "didier1", + "src": "http://dvvsyrlsr21oz.cloudfront.net/didier-HD-01", + "scoreWord": [3, 0, 10, 0, 0, 0, 8, 5, 5, 7, 4, 6, 5, 5, 8, 0, 0, 0] + }, + { + "name": "denis1", + "src": "http://dvvsyrlsr21oz.cloudfront.net/05-Jeambar-HD", + "scoreWord": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] + }, + { + "name": "david1", + "src": "http://dvvsyrlsr21oz.cloudfront.net/david-HD-01", + "scoreWord": [0, 0, 8, 0, 8, 0, 9, 0, 0, 10, 0, 0, 0, 6, 1, 0, 2, 0] + }, + { + "name": "david2", + "src": "http://dvvsyrlsr21oz.cloudfront.net/david-HD-02", + "scoreWord": [2, 0, 10, 0, 0, 7, 9, 0, 0, 10, 0, 10, 0, 7, 0, 0, 2, 0] + }, + { + "name": "dominique1", + "src": "http://dvvsyrlsr21oz.cloudfront.net/Dominique-HD-01", + "scoreWord": [7, 5, 5, 0, 10, 0, 10, 0, 4, 10, 0, 5, 0, 8, 7, 0, 0, 0] + }, + { + "name": "margot1", + "src": "http://dvvsyrlsr21oz.cloudfront.net/Margot-HD-01", + "scoreWord": [0, 0, 10, 0, 8, 8, 10, 0, 0, 10, 7, 10, 5, 8, 0, 7, 0, 4] + }, + { + "name": "philippe1", + "src": "http://dvvsyrlsr21oz.cloudfront.net/Philippe-HD-01", + "scoreWord": [0, 0, 8, 0, 0, 0, 10, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0] + }, + { + "name": "philippe2", + "src": "http://dvvsyrlsr21oz.cloudfront.net/Philippe-HD-02", + "scoreWord": [0, 0, 10, 0, 0, 8, 10, 0, 7, 0, 10, 10, 0, 5, 0, 8, 0, 0] + }, + { + "name": "philippe3", + "src": "http://dvvsyrlsr21oz.cloudfront.net/Philippe-HD-03", + "scoreWord": [0, 0, 8, 0, 0, 8, 10, 0, 3, 3, 6, 6, 0, 6, 0, 0, 0, 0] + }, + { + "name": "corenfeld1", + "src": "http://dvvsyrlsr21oz.cloudfront.net/Corenfeld-HD-01", + "scoreWord": [0, 0, 10, 0, 0, 0, 10, 10, 0, 0, 0, 0, 10, 9, 2, 0, 5, 5] + }, + { + "name": "corenfeld2", + "src": "http://dvvsyrlsr21oz.cloudfront.net/Corenfeld-HD-02", + "scoreWord": [0, 10, 7, 0, 0, 8, 10, 10, 0, 0, 0, 10, 10, 10, 2, 0, 9, 10] + }, + { + "name": "cohen1", + "src": "http://dvvsyrlsr21oz.cloudfront.net/Cohen-HD-01", + "scoreWord": [9, 5, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 6, 8, 6, 0, 0] + }, + { + "name": "cohen2", + "src": "http://dvvsyrlsr21oz.cloudfront.net/Cohen-HD-02", + "scoreWord": [4, 6, 5, 0, 0, 0, 0, 0, 2, 7, 0, 0, 0, 0, 5, 0, 0, 0] + }, + { + "name": "cohen3", + "src": "http://dvvsyrlsr21oz.cloudfront.net/Cohen-HD-03", + "scoreWord": [0, 0, 0, 0, 0, 0, 4, 0, 0, 5, 0, 6, 0, 7, 0, 0, 0, 0] + }, + { + "name": "tortu1", + "src": "http://dvvsyrlsr21oz.cloudfront.net/Tortu-HD-01", + "scoreWord": [8, 0, 10, 8, 0, 0, 10, 0, 5, 0, 5, 4, 6, 8, 7, 0, 6, 10] + }, + { + "name": "tortu2", + "src": "http://dvvsyrlsr21oz.cloudfront.net/Tortu-HD-02", + "scoreWord": [0, 0, 10, 8, 0, 0, 10, 0, 2, 0, 8, 7, 6, 8, 0, 0, 6, 10] + }, + { + "name": "aurore1", + "src": "http://dvvsyrlsr21oz.cloudfront.net/Aurore-HD-01", + "scoreWord": [6, 0, 10, 8, 0, 0, 9, 0, 10, 0, 0, 0, 0, 8, 7, 0, 7, 8] + }, + { + "name": "andre1", + "src": "http://dvvsyrlsr21oz.cloudfront.net/andre-HD-01", + "scoreWord": [5, 0, 8, 6, 0, 0, 9, 0, 8, 0, 0, 10, 4, 8, 3, 0, 7, 8] + }, + { + "name": "elodie1", + "src": "http://dvvsyrlsr21oz.cloudfront.net/elodie-HD-01", + "scoreWord": [5, 8, 8, 0, 0, 0, 4, 4, 3, 0, 0, 3, 1, 9, 5, 0, 10, 7] + }, + { + "name": "cynthia1", + "src": "http://dvvsyrlsr21oz.cloudfront.net/Cynthia-HD-01", + "scoreWord": [3, 5, 7, 0, 10, 5, 10, 0, 0, 7, 3, 5, 0, 7, 3, 0, 3, 5] + }, + { + "name": "dolto1", + "src": "http://dvvsyrlsr21oz.cloudfront.net/Dolto-HD-01", + "scoreWord": [10, 9, 8, 0, 0, 0, 7, 0, 8, 0, 0, 0, 2, 6, 10, 4, 0, 5] + }, + { + "name": "dolto2", + "src": "http://dvvsyrlsr21oz.cloudfront.net/Dolto-HD-02", + "scoreWord": [0, 0, 9, 0, 0, 0, 0, 0, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0] + }, + { + "name": "dolto3", + "src": "http://dvvsyrlsr21oz.cloudfront.net/Dolto-HD-03", + "scoreWord": [9, 8, 5, 0, 0, 0, 9, 0, 10, 4, 0, 0, 0, 0, 10, 5, 0, 5] + }, + { + "name": "dolto4", + "src": "http://dvvsyrlsr21oz.cloudfront.net/Dolto-HD-04", + "scoreWord": [5, 5, 2, 0, 0, 0, 9, 9, 2, 0, 0, 10, 5, 5, 9, 5, 3, 5] + }, + { + "name": "kircher1", + "src": "http://dvvsyrlsr21oz.cloudfront.net/Kircher-HD-01", + "scoreWord": [0, 0, 10, 0, 0, 0, 8, 0, 6, 0, 0, 0, 0, 0, 0, 0, 4, 4] + }, + { + "name": "kircher2", + "src": "http://dvvsyrlsr21oz.cloudfront.net/Kircher-HD-02", + "scoreWord": [0, 0, 3, 0, 0, 0, 7, 0, 1, 7, 0, 9, 0, 8, 0, 0, 3, 4] + }, + { + "name": "perlman1", + "src": "http://dvvsyrlsr21oz.cloudfront.net/Perlman-HD-01", + "scoreWord": [8, 3, 5, 0, 0, 0, 5, 5, 0, 4, 0, 0, 4, 0, 6, 3, 0, 0] + }, + { + "name": "perlman2", + "src": "http://dvvsyrlsr21oz.cloudfront.net/Perlman-HD-02", + "scoreWord": [0, 0, 7, 10, 0, 0, 9, 0, 0, 5, 7, 10, 8, 8, 0, 7, 0, 0] + }, + { + "name": "perlman3", + "src": "http://dvvsyrlsr21oz.cloudfront.net/Perlman-HD-03", + "scoreWord": [10, 9, 5, 5, 0, 0, 10, 0, 0, 10, 0, 8, 8, 9, 0, 7, 0, 0] + }, + { + "name": "perlman4", + "src": "http://dvvsyrlsr21oz.cloudfront.net/Perlman-HD-04", + "scoreWord": [0, 0, 10, 0, 0, 0, 8, 0, 0, 7, 0, 6, 8, 9, 0, 5, 0, 0] + }, + { + "name": "fiction1", + "src": "http://dvvsyrlsr21oz.cloudfront.net/AIMEZ-MOI-HD", + "scoreWord": [7, 9, 4, 0, 0, 0, 4, 0, 10, 9, 0, 1, 4, 3, 0, 4, 3, 4] + }, + { + "name": "fiction2", + "src": "http://dvvsyrlsr21oz.cloudfront.net/APPELEZ-MOI-HD", + "scoreWord": [0, 10, 9, 0, 0, 0, 5, 5, 5, 0, 0, 1, 5, 8, 0, 0, 10, 3] + }, + { + "name": "fiction3", + "src": "http://dvvsyrlsr21oz.cloudfront.net/DROIT-HD", + "scoreWord": [2, 0, 3, 0, 0, 0, 8, 0, 7, 0, 1, 7, 1, 2, 8, 0, 0, 0] + }, + { + "name": "fiction4", + "src": "http://dvvsyrlsr21oz.cloudfront.net/ECOUTEZ-MOI-HD", + "scoreWord": [0, 7, 9, 0, 0, 0, 10, 1, 7, 0, 0, 7, 9, 9, 8, 9, 8, 3] + }, + { + "name": "fiction5", + "src": "http://dvvsyrlsr21oz.cloudfront.net/EMBRASSEZ-MOI-HD", + "scoreWord": [2, 8, 1, 0, 0, 0, 1, 1, 6, 0, 0, 10, 1, 1, 0, 6, 6, 10] + }, + { + "name": "fiction6", + "src": "http://dvvsyrlsr21oz.cloudfront.net/ENGAGEZ-MOI-HD", + "scoreWord": [0, 3, 10, 0, 0, 0, 8, 0, 7, 0, 0, 0, 8, 7, 3, 5, 3, 8] + }, + { + "name": "fiction7", + "src": "http://dvvsyrlsr21oz.cloudfront.net/ENNEMI-HD", + "scoreWord": [0, 0, 10, 0, 0, 2, 8, 8, 7, 0, 10, 9, 10, 1, 5, 1, 0, 0] + }, + { + "name": "fiction8", + "src": "http://dvvsyrlsr21oz.cloudfront.net/IDEAL-HD", + "scoreWord": [1, 4, 0, 5, 0, 0, 3, 0, 5, 0, 0, 3, 0, 9, 8, 0, 5, 10] + }, + { + "name": "fiction9", + "src": "http://dvvsyrlsr21oz.cloudfront.net/MONDEALENVERS-HD", + "scoreWord": [1, 0, 0, 2, 0, 2, 0, 0, 6, 8, 0, 8, 5, 1, 4, 7, 0, 1] + }, + { + "name": "fiction10", + "src": "http://dvvsyrlsr21oz.cloudfront.net/REALITE-HD", + "scoreWord": [10, 5, 5, 0, 0, 0, 8, 5, 3, 0, 2, 6, 5, 7, 7, 0, 0, 8] + }, + { + "name": "fiction11", + "src": "http://dvvsyrlsr21oz.cloudfront.net/REVOLUTION1-HD", + "scoreWord": [0, 6, 0, 10, 0, 0, 2, 0, 0, 0, 0, 1, 0, 7, 8, 0, 2, 3] + }, + { + "name": "fiction12", + "src": "http://dvvsyrlsr21oz.cloudfront.net/REVOLUTION2-HD", + "scoreWord": [3, 0, 3, 7, 10, 0, 7, 2, 6, 0, 3, 2, 8, 5, 2, 0, 0, 10] + }, + { + "name": "definition1", + "src": "http://dvvsyrlsr21oz.cloudfront.net/AVENIR-HD", + "scoreWord": [0, 0, 9, 0, 0, 0, 7, 0, 5, 0, 0, 0, 0, 10, 0, 0, 10, 10] + }, + { + "name": "definition2", + "src": "http://dvvsyrlsr21oz.cloudfront.net/LUTTE-HD", + "scoreWord": [0, 8, 0, 0, 0, 0, 5, 5, 0, 0, 0, 9, 0, 0, 0, 0, 0, 0] + }, + { + "name": "definition3", + "src": "http://dvvsyrlsr21oz.cloudfront.net/POLITIQUE-1-HD", + "scoreWord": [1, 0, 2, 0, 0, 1, 1, 0, 0, 0, 1, 8, 0, 10, 0, 0, 0, 1] + }, + { + "name": "definition4", + "src": "http://dvvsyrlsr21oz.cloudfront.net/POLITIQUE-2-HD", + "scoreWord": [0, 0, 1, 0, 0, 1, 2, 0, 0, 0, 2, 2, 0, 0, 0, 2, 0, 0] + }, + { + "name": "definition5", + "src": "http://dvvsyrlsr21oz.cloudfront.net/POLITIQUE-3-HD", + "scoreWord": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 9, 1, 10, 0, 0, 0, 0] + }, + { + "name": "definition6", + "src": "http://dvvsyrlsr21oz.cloudfront.net/QUE1-HD", + "scoreWord": [0, 0, 0, 0, 0, 10, 10, 0, 0, 0, 10, 10, 0, 10, 0, 0, 10, 0] + }, + { + "name": "definition7", + "src": "http://dvvsyrlsr21oz.cloudfront.net/QUE2-HD", + "scoreWord": [0, 0, 0, 0, 10, 10, 10, 9, 5, 0, 10, 10, 10, 0, 0, 10, 0, 0] + }, + { + "name": "definition8", + "src": "http://dvvsyrlsr21oz.cloudfront.net/QUE3-HD", + "scoreWord": [0, 0, 0, 0, 10, 10, 10, 9, 5, 0, 10, 10, 10, 0, 0, 10, 0, 0] + }, + { + "name": "definition9", + "src": "http://dvvsyrlsr21oz.cloudfront.net/QUE4-HD", + "scoreWord": [0, 0, 0, 0, 0, 0, 10, 0, 5, 0, 10, 10, 0, 10, 0, 0, 0, 0] + }, + { + "name": "definition10", + "src": "http://dvvsyrlsr21oz.cloudfront.net/REVE-HD", + "scoreWord": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 7, 0, 0, 10, 10] + }, + { + "name": "definition11", + "src": "http://dvvsyrlsr21oz.cloudfront.net/VIE-HD", + "scoreWord": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 0, 0, 0, 0, 0, 0] + }, + { + "name": "chant4", + "src": "http://dvvsyrlsr21oz.cloudfront.net/ZEBU-CHANT_4-HD", + "scoreWord": [0, 10, 0, 0, 0, 0, 0, 0, 5, 0, 0, 2, 10, 0, 5, 5, 5, 0] + }, + { + "name": "chant5", + "src": "http://dvvsyrlsr21oz.cloudfront.net/IDEE-CHANT_5-HD", + "scoreWord": [8, 0, 0, 0, 0, 0, 9, 0, 5, 0, 0, 7, 0, 7, 7, 7, 1, 5] + } + + ] +}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/web/transition.html Wed Dec 12 03:10:24 2012 +0100 @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<html lang="fr"> + <head> + <meta charset="utf-8"> + <title>The End - @todo</title> + + <meta name="description" content="@todo"> + + <!-- Mobile Specific Metas --> + <meta name="viewport" content="initial-scale=1.0, width=device-width" /> + + <link rel="stylesheet" href="static/res/css/style_1024.css" /> + <!-- stylesheet for ipad 3 + <link rel="stylesheet" href="static/res/css/style_2048.css" /> + --> + + </head> + <body> + <!-- div content - site takes the full height of browser --> + <div id="content" class="full_screen"> + <div id="theEnd"> + <h1>THE END, ETC.</h1> + </div> + <!--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_img" class="fullScreen_vcentering"> + <img id="bgimage" alt="The End, etc." src="" /> + </section> + <section id="partage" class="container_vcentering"> + <!--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 box_vcentering white big_txt"> + <p><a href="partage.html">Partagez</a></p> + <p><a href="choix.html">Recommencez</a></p> + <p class="margin_exeption"><a href="niv2_hp.html">Prolongez l'expériance</a></p> + <p><a href="/">Crédits</a></p> + <p><a href="/">The End, etc.</a></p> + </div> + </section> + </div> + + <!-- Metanav FranceTV --> + <script src="http://static.francetv.fr/js/jquery.metanav-min.js" charset="utf-8"></script> + <!-- JavaScript --> + <script src="static/res/js/jquery-1.8.2.min.js"></script> + <script> + 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"); + } + </script> + + </body> +</html> \ No newline at end of file
