1 <!DOCTYPE html> |
1 <!DOCTYPE html> |
2 <html lang="fr"> |
2 <html lang="fr" |
|
3 xmlns:og="http://ogp.me/ns#" |
|
4 xmlns:fb="https://www.facebook.com/2008/fbml"> |
3 <head> |
5 <head> |
4 <meta charset="utf-8"> |
6 <meta charset="utf-8"> |
5 <title>The End - @todo</title> |
7 <title>The End - @todo</title> |
6 |
8 |
7 <meta name="description" content="@todo"> |
9 <meta name="description" content="@todo"> |
8 |
10 <link rel="icon" href="static/res/img/favicon.ico" /> |
9 <!-- Mobile Specific Metas --> |
11 |
10 <meta name="viewport" content="initial-scale=1.0, width=device-width" /> |
12 <!-- Site Optimization for Facebook --> |
11 |
13 <meta property="og:title" content="the end- @todo" /> |
|
14 <meta property="og:type" content="website" /> |
|
15 <meta property="og:url" content="http://www.clients.incandescence.com/theend/" /> |
|
16 <meta property="og:image" content="https://www.clients.incandescence.com/theend/theend_fb.jpg" /> |
|
17 <meta property="og:site_name" content="the end @todo" /> |
|
18 <meta property="og:description" content="@todo"/> |
|
19 |
|
20 <!-- Mobile Specific Metas --> |
|
21 <meta name="viewport" content="user-scalable=no"> |
|
22 <!-- |
|
23 <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" /> |
|
24 --> |
|
25 |
|
26 <!-- Test Smartphone --> |
|
27 <script src="static/res/js/incdetectmobile.js"></script> |
|
28 <script> |
|
29 if (IsSmartphone()) { location.href = "mindex.html"; } |
|
30 </script> |
|
31 <!-- Metanav FranceTV --> |
|
32 <script src="http://static.francetv.fr/js/jquery.metanav-min.js" charset="utf-8"></script> |
|
33 |
12 <link rel="stylesheet" href="static/res/css/style_1024.css" /> |
34 <link rel="stylesheet" href="static/res/css/style_1024.css" /> |
13 <!-- stylesheet for ipad 3 |
35 |
14 <link rel="stylesheet" href="static/res/css/style_2048.css" /> |
|
15 --> |
|
16 |
|
17 </head> |
36 </head> |
18 <body> |
37 <body> |
19 <!-- div content - site takes the full height of browser --> |
38 <!-- div content - site takes the full height of browser --> |
20 <div id="content"> |
39 <div id="content" class="smallMargin"> |
21 |
40 |
22 <!-- div content_top - the elements takes the full height of "content_top" --> |
41 <!-- div content_top - the elements takes the full height of "content_top" --> |
23 <div id="content_top"> |
42 <div id="content_top"> |
24 |
43 |
25 <!-- change with js: height and line-height (the same size) of "container_vcentering" --> |
44 <!-- change with js: height and line-height (the same size) of "container_vcentering" --> |
26 <header id="top" class="container_vcentering box_transparance"> |
45 <header id="top" class="container_vcentering box_transparance"><!-- |
27 <div id="title_hp" class="box_vcentering"> |
46 --><div id="title_hp" class="box_vcentering"> |
28 <h2>UNE EXPÉRIENCE DE CINÉMA</h2> |
47 <h2>UNE EXPÉRIENCE DE CINÉMA</h2> |
29 <h1>THE END, ETC.</h1> |
48 <h1>THE END, ETC.</h1> |
30 <h2 class="h2_exeption">DE LAETITIA MASSON</h2> |
49 <h2 class="h2_exeption">DE LAETITIA MASSON</h2> |
31 </div> |
50 </div><!-- |
32 </header> |
51 --></header> |
33 |
52 |
34 <section id="main"> |
53 <section id="main"> |
35 <canvas id="mosaic" width="100" height="100"></canvas> |
54 <div id="bd_noir"></div> |
|
55 <canvas id="mosaic" width="100" height="100"></canvas> |
36 </section> |
56 </section> |
37 |
57 |
38 <!-- change with js: height and line-height (the same size) of "container_vcentering" --> |
58 <!-- change with js: height and line-height (the same size) of "container_vcentering" --> |
39 <section id="bottom" class="container_vcentering box_transparance"> |
59 <section id="bottom" class="container_vcentering box_transparance"> |
40 <div class="box_vcentering"> |
60 <div class="box_vcentering"> |
41 <p class="big_link"><a onClick="fadeAndNext();">COMPOSEZ VOTRE FILM</a></p> |
61 <p class="big_link pointer"><a onClick="fadeAndNext();">COMPOSEZ VOTRE FILM</a></p> |
42 </div> |
62 </div> |
43 </section> |
63 </section> |
44 </div> |
64 </div> |
45 <!-- /div content_top --> |
65 <!-- /div content_top --> |
46 |
66 |
47 <footer id="footer" class="box_transparance"> |
67 <footer id="footer" class="box_transparance clearfix"> |
48 <ul id="logo_partners" class="floatL"> |
68 <ul class="logo_partners floatL"> |
49 <li>UNE CO-PRODUCTION |
69 <li>UNE CO-PRODUCTION |
50 <ul> |
70 <ul> |
51 <li> |
71 <li> |
52 <a href="http://www.francetv.fr/nouvelles-ecritures" target="_blank"> |
72 <a href="http://www.francetv.fr/nouvelles-ecritures" target="_blank"> |
53 <img alt="Nouvelles écritures" src="static/res/img/footer/francetv.png" /> |
73 <img alt="Nouvelles écritures" src="static/res/img/footer/francetv.png" /> |
54 </a> |
74 </a> |
55 </li> |
75 </li><!-- |
56 <li> |
76 --><li> |
57 <a href="http://www.memoprod.fr" target="_blank"> |
77 <a href="http://www.memoprod.fr" target="_blank"> |
58 <img alt="Memo prod." src="static/res/img/footer/memoprod.png" /> |
78 <img alt="Memo prod." src="static/res/img/footer/memoprod.png" /> |
59 </a> |
79 </a> |
60 </li> |
80 </li> |
61 </ul> |
81 </ul> |
64 <ul> |
84 <ul> |
65 <li> |
85 <li> |
66 <a href="http://www.cnc.fr" target="_blank"> |
86 <a href="http://www.cnc.fr" target="_blank"> |
67 <img alt="CNC" src="static/res/img/footer/cnc.png" /> |
87 <img alt="CNC" src="static/res/img/footer/cnc.png" /> |
68 </a> |
88 </a> |
69 </li> |
89 </li><!-- |
70 <li> |
90 --><li> |
71 <a href="http://www.incandescence.com" target="_blank"> |
91 <a href="http://www.incandescence.com" target="_blank"> |
72 <img alt="Incandescence" src="static/res/img/footer/inc.png" /> |
92 <img alt="Incandescence" src="static/res/img/footer/inc.png" /> |
73 </a> |
93 </a> |
74 </li> |
94 </li><!-- |
75 <li> |
95 --><li> |
76 <a href="http://www.iri.centrepompidou.fr" target="_blank"> |
96 <a href="http://www.iri.centrepompidou.fr" target="_blank"> |
77 <img alt="iri Centre Pompidou" src="static/res/img/footer/iri.png" /> |
97 <img alt="iri Centre Pompidou" src="static/res/img/footer/iri.png" /> |
|
98 </a> |
|
99 </li> |
|
100 </ul> |
|
101 </li> |
|
102 </ul> |
|
103 <ul class="logo_partners floatL"> |
|
104 <li>EN PARTENARIAT AVEC |
|
105 <ul> |
|
106 <li class="txt_hidden logo_bg"> |
|
107 <a href="http://www.franceinter.fr/" target="_blank">www.franceinter.fr |
78 </a> |
108 </a> |
79 </li> |
109 </li> |
80 </ul> |
110 </ul> |
81 </li> |
111 </li> |
82 </ul> |
112 </ul> |
83 <ul id="socialMedia" class="floatR"> |
113 <ul id="socialMedia" class="floatR"> |
84 <li><a href="/">Mentions légales</a></li> |
114 <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><!-- |
85 <li><a href="/" target="_blank"><img alt="Partager The End sur Facebook" src="static/res/img/footer/facebook.png" width ="50"/></a></li> |
115 --><li><a class="pointer" onclick="popup('popUpDiv', 'content')">Mentions légales</a></li><!-- |
86 <li><a href="/" target="_blank"><img alt="Partager The End sur Twitter" src="static/res/img/footer/twitter.png"/></a></li> |
116 --><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><!-- |
|
117 --><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> |
87 </ul> |
118 </ul> |
88 </footer> |
119 </footer> |
89 |
120 <section id="popUpDiv" style="display:none;"> |
|
121 <div id="popUpTitle"> |
|
122 <h3>Mentions Légales</h3> |
|
123 <a id="popUpClose" class="floatR clearfix pointer" onclick="popup('popUpDiv', 'content')"> |
|
124 <img alt="Fermer" src="static/res/img/popUpClose.png"/> |
|
125 </a> |
|
126 </div> |
|
127 <div id="popUpTxtScroll"> |
|
128 <p><strong>Editeur :</strong> FRANCE TELEVISIONS<br> |
|
129 <strong>Siège social :</strong> 7, Esplanade Henri de France 75015 PARIS<br> |
|
130 <strong>RCS de Paris :</strong> 432 766 947<br> |
|
131 <strong>Directeur de la Publication :</strong> Rémy Pflimlin<br> |
|
132 <strong>Tel :</strong> (+33) 08 90 71 02 02 (0.15 €/min)</p> |
|
133 <p><strong>Hébergeur :</strong> FRANCE OXALIDE<br> |
|
134 <strong>Siège social :</strong> 25, Boulevard de Strasbourg 75010 Paris<br> |
|
135 <strong>Tel :</strong> + 33(0)1 75 771 660</p> |
|
136 <h4>DONNEES PERSONNELLES</h4> |
|
137 <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> |
|
138 <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> |
|
139 <p>Chaque internaute peut exercer ces droits :<br> |
|
140 - 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> |
|
141 - 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> |
|
142 <h4>CREDITS</h4> |
|
143 <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> |
|
144 <h4>LOGICIELS</h4> |
|
145 <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> |
|
146 </div> |
|
147 </section> |
90 </div> |
148 </div> |
91 |
149 <div id="blanket" style="display:none;"></div> |
92 <!-- Metanav FranceTV --> |
150 |
93 <script src="http://static.francetv.fr/js/jquery.metanav-min.js" charset="utf-8"></script> |
|
94 <!-- JavaScript --> |
151 <!-- JavaScript --> |
95 <script src="static/res/js/jquery-1.8.2.min.js"></script> |
152 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> |
96 <script src="static/res/js/ease.js"></script> |
153 <script src="static/res/js/ease.js"></script> |
97 <script src="static/res/js/incresize.js"></script> |
154 <script src="static/res/js/incresize.js"></script> |
98 <script src="static/res/js/incmosaic.js"></script> |
155 <script src="static/res/js/incmosaic.js"></script> |
|
156 <script src="static/res/js/popUp.js"></script> |
99 <script> |
157 <script> |
100 $(function() { |
158 $(function() { |
101 // Init the resize object |
159 // Init the resize object |
102 incResize.init("content", "top", "mosaic", "bottom", "footer", 130, 1800/750, null, incMosaic.registerPostNewCanvasSize); |
160 incResize.init("content", "top", "mosaic", "bottom", "footer", 130, 1800/750, false, [incMosaic.registerPostNewCanvasSize, resizePopup]); |
103 |
161 |
104 // Set mosaic pair of images |
162 // Set the images for the mosaic effects |
105 incMosaic.addImageUrl("static/res/img/accueil-00.jpg"); |
163 incMosaic.addImageUrl("static/res/img/accueil-00.jpg"); |
106 incMosaic.addImageUrl("static/res/img/accueil-01.jpg"); |
164 incMosaic.addImageUrl("static/res/img/accueil-01.jpg"); |
107 incMosaic.addImageUrl("static/res/img/accueil-02.jpg"); |
165 incMosaic.addImageUrl("static/res/img/accueil-02.jpg"); |
108 incMosaic.addImageUrl("static/res/img/accueil-03.jpg"); |
166 incMosaic.addImageUrl("static/res/img/accueil-03.jpg"); |
109 incMosaic.addImageUrl("static/res/img/accueil-04.jpg"); |
167 incMosaic.addImageUrl("static/res/img/accueil-04.jpg"); |