1 <!DOCTYPE html> |
1 <!DOCTYPE html> |
2 <html lang="fr"> |
2 <html lang="fr"> |
3 <head> |
3 <head> |
4 <meta charset="utf-8"> |
4 <meta charset="utf-8"> |
5 <title>The End - @todo</title> |
5 <title>The End - @todo</title> |
6 <link rel="stylesheet" href="static/res/css/style.css" /> |
6 |
7 </head> |
7 <meta name="description" content="@todo"> |
8 <body> |
8 |
9 |
9 <!-- Mobile Specific Metas --> |
10 <!-- Content Video + Controls --> |
10 <meta name="viewport" content="initial-scale=1.0, width=device-width" /> |
11 <div id="playerContainer"> |
11 |
12 <!-- Video --> |
12 <link rel="stylesheet" href="static/res/css/style_1024.css" /> |
13 <div id="video"> |
13 <!-- stylesheet for ipad 3 |
14 </div> |
14 <link rel="stylesheet" href="static/res/css/style_2048.css" /> |
15 <!-- /Video --> |
15 --> |
16 |
16 |
17 <!-- Controls container --> |
17 </head> |
18 <div id="controlContainer"> |
18 <body> |
19 <div id="controlbar"> |
19 <!-- div content - site takes the full height of browser --> |
20 <button id="btnPlay" class="bnt" |
20 <div id="content"> |
21 onClick="incPlayer.ctrlPlay(this);">Play/Pause</button><!-- |
21 |
22 |
22 <!-- div content_top - the elements takes the full height of "content_top" --> |
23 --><button id="btnBck" class="bnt" |
23 <div id="content_top"> |
24 onClick="incPlayer.ctrlBackward(this);">Back</button><!-- |
24 |
25 |
25 <!-- change with js: height and line-height (the same size) of "conteneur_vcentering" --> |
26 --><button id="btnFwd" class="bnt" |
26 <header id="top" class="conteneur_vcentering"> |
27 onClick="incPlayer.ctrlForward(this);">Forward</button><!-- |
27 <div id="title_hp" class="box_vcentering"> |
28 |
28 <h2>UNE EXPÉRIENCE DE CINÉMA</h2> |
29 --><button id="btnFullScr" class="bnt" |
29 <h1>THE END, ETC.</h1> |
30 onClick="incPlayer.ctrlFullscreen(this);">FS</button><!-- |
30 <h2 class="h2_exeption">DE LAETITIA MASSON</h2> |
31 |
31 </div> |
32 --><button id="btnHD" class="bnt" |
32 </header> |
33 onClick="incPlayer.ctrlHd(this);">HD</button> |
33 |
34 </div> |
34 <section id="main"> |
35 </div> |
35 <canvas id="mosaic" width="100" height="100"></canvas> |
36 <!-- /Controlbar container --> |
36 </section> |
37 </div> |
37 |
38 <!-- /Content Video + Controls --> |
38 <!-- change with js: height and line-height (the same size) of "conteneur_vcentering" --> |
39 |
39 <section id="bottom" class="conteneur_vcentering"> |
40 <!-- jQuery --> |
40 <div class="box_vcentering"> |
41 <script src="static/res/js/jquery-1.8.2.min.js"></script> |
41 <p class="big_link"><a href ="/">COMPOSEZ VOTRE FILM</a></p> |
42 <script src="static/res/js/popcorn-complete.js"></script> |
42 </div> |
43 <script src="static/res/js/popcorn.sequence.js"></script> |
43 </section> |
44 <script src="static/res/js/incplayer.js"></script> |
44 </div> |
|
45 <!-- /div content_top --> |
|
46 |
|
47 <footer id="footer"> |
|
48 <ul id="logo_partners" class="floatL"> |
|
49 <li>UNE CO-PRODUCTION |
|
50 <ul> |
|
51 <li> |
|
52 <a href="http://www.francetv.fr/nouvelles-ecritures" target="_blank"> |
|
53 <img alt="Nouvelles écritures" src="static/res/img/footer/francetv.png" /> |
|
54 </a> |
|
55 </li> |
|
56 <li> |
|
57 <a href="http://www.memoprod.fr" target="_blank"> |
|
58 <img alt="Memo prod." src="static/res/img/footer/memoprod.png" /> |
|
59 </a> |
|
60 </li> |
|
61 </ul> |
|
62 </li><!-- |
|
63 --><li>AVEC LE SOUTIEN DE |
|
64 <ul> |
|
65 <li> |
|
66 <a href="http://www.cnc.fr" target="_blank"> |
|
67 <img alt="CNC" src="static/res/img/footer/cnc.png" /> |
|
68 </a> |
|
69 </li> |
|
70 <li> |
|
71 <a href="http://www.incandescence.com" target="_blank"> |
|
72 <img alt="Incandescence" src="static/res/img/footer/inc.png" /> |
|
73 </a> |
|
74 </li> |
|
75 <li> |
|
76 <a href="http://www.iri.centrepompidou.fr" target="_blank"> |
|
77 <img alt="iri Centre Pompidou" src="static/res/img/footer/iri.png" /> |
|
78 </a> |
|
79 </li> |
|
80 </ul> |
|
81 </li> |
|
82 </ul> |
|
83 <ul id="socialMedia" class="floatR"> |
|
84 <li><a href="/">Mentions légales</a></li> |
|
85 <li><a href="/" target="_blank"><img alt="Partager The End sur Facebook" src="static/res/img/footer/facebook.png" width ="50"/></a></li> |
|
86 <li><a href="/" target="_blank"><img alt="Partager The End sur Twitter" src="static/res/img/footer/twitter.png"/></a></li> |
|
87 </ul> |
|
88 </footer> |
|
89 |
|
90 </div> |
|
91 |
|
92 <!-- Metanav FranceTV --> |
|
93 <script src="http://static.francetv.fr/js/jquery.metanav-min.js" charset="utf-8"></script> |
|
94 <!-- JavaScript --> |
|
95 <script src="static/res/js/jquery-1.8.2.min.js"></script> |
|
96 <script src="static/res/js/ease.js"></script> |
|
97 <script src="static/res/js/incresize.js"></script> |
|
98 <script src="static/res/js/incmosaic.js"></script> |
45 <script> |
99 <script> |
46 $(function() { |
100 $(function() { |
47 if (incPlayer.init("video", "#playButton", "static/res/json/sequences.json", true)) { |
101 // Init the resize object |
48 incPlayer.createPopSequence(); |
102 incResize.init("content", "top", "mosaic", "bottom", "footer", 130, 1800/750, null, incMosaic.registerPostNewCanvasSize); |
49 } |
103 |
|
104 // Set mosaic pair of images |
|
105 incMosaic.addPairImages("static/res/img/accueil-00.jpg", "static/res/img/accueil-01.jpg"); |
|
106 incMosaic.addPairImages("static/res/img/accueil-02.jpg", "static/res/img/accueil-03.jpg"); |
|
107 incMosaic.addPairImages("static/res/img/accueil-04.jpg", "static/res/img/accueil-05.jpg"); |
|
108 |
|
109 // Start mosaic effect |
|
110 incMosaic.start("mosaic", 9, 5); |
50 }); |
111 }); |
51 </script> |
112 </script> |
52 </body> |
113 </body> |
53 </html> |
114 </html> |