17 <div class="wrap-header"> |
17 <div class="wrap-header"> |
18 <a title="Bibliothèque Publique d'Information" href="#"><img src="img/pompidou-logo.png" alt="Bibliothèque centre Pompidou" /></a> |
18 <a title="Bibliothèque Publique d'Information" href="#"><img src="img/pompidou-logo.png" alt="Bibliothèque centre Pompidou" /></a> |
19 </div> |
19 </div> |
20 <div class="header"> |
20 <div class="header"> |
21 <!-- popin header --> |
21 <!-- popin header --> |
22 <div class="popin update-title" id="update-title"> |
|
23 <img class="pointer" src="img/popin-triangle.png" alt="" /> |
|
24 <div class="popin-content"> |
|
25 <form class="clearfix" action="#" method=""> |
|
26 <div class="form-left"> |
|
27 <p class="titre-wrap"> |
|
28 <label for="hashcut-title">Titre :</label> |
|
29 <input type="text" id="hashcut-title" name="" value="Hashcut sans titre" /> |
|
30 </p> |
|
31 <p> |
|
32 <label for="hashcut-tags">Tags :</label> |
|
33 <input type="text" id="hashcut-tags" name="" value="" /> |
|
34 </p> |
|
35 </div> |
|
36 <p class="form-right"> |
|
37 <label for="hashcut-description">Description :</label> |
|
38 <textarea name="" id="hashcut-description"></textarea> |
|
39 </p> |
|
40 </form> |
|
41 </div> |
|
42 </div><!-- popin update-title --> |
|
43 |
22 |
44 <div class="popin user info" id="user"> |
23 <div class="popin user info" id="user"> |
45 <img class="pointer" src="img/popin-triangle.png" alt="" /> |
24 <img class="pointer" src="img/popin-triangle.png" alt="" /> |
46 <div class="popin-content"> |
25 <div class="popin-content"> |
47 <h2>Mashup75</h2> |
26 <h2>Mashup75</h2> |
60 <form action="#" class="signup-form"> |
39 <form action="#" class="signup-form"> |
61 <p> |
40 <p> |
62 <label for="signup-pseudo">Pseudonyme : </label> |
41 <label for="signup-pseudo">Pseudonyme : </label> |
63 <input type="text" id="signup-pseudo" name="" /> |
42 <input type="text" id="signup-pseudo" name="" /> |
64 </p> |
43 </p> |
65 <p > |
44 <p> |
66 <label for="signup-email">Email : </label> |
45 <label for="signup-email">Email : </label> |
67 <input type="text" id="signup-email" name="" /> |
46 <input type="text" id="signup-email" name="" /> |
68 </p> |
47 </p> |
69 <p > |
48 <p> |
70 <label for="signup-password">Mot de passe : </label> |
49 <label for="signup-password">Mot de passe : </label> |
71 <input type="password" id="signup-password" name="" /> |
50 <input type="password" id="signup-password" name="" /> |
72 </p> |
51 </p> |
73 <p> |
52 <p> |
74 <label for="signup-password">Confirmer le mot de passe : </label> |
53 <label for="signup-password">Confirmer le mot de passe : </label> |
109 <h1><a title="Hashcut - Le Mashup cliquable" class="clearfix" href="#"> |
88 <h1><a title="Hashcut - Le Mashup cliquable" class="clearfix" href="#"> |
110 <img src="img/hashcut-logo.png" alt="Hashcut" /> |
89 <img src="img/hashcut-logo.png" alt="Hashcut" /> |
111 <span>Le Mashup<br />Cliquable</span> |
90 <span>Le Mashup<br />Cliquable</span> |
112 </a></h1> |
91 </a></h1> |
113 <div class="title-video-wrap"> |
92 <div class="title-video-wrap"> |
114 <a title="Modifier le titre et la description" href="#">Hashcut sans titre</a> |
93 <div class="Ldt-Social"> |
|
94 <div class="Ldt-Social-Url-Container"> |
|
95 <a href="#" target="_blank" class="Ldt-Social-Square Ldt-Social-Url" title="Partager le lien"></a> |
|
96 <span class="Ldt-Social-UrlPop"> |
|
97 <input class="Ldt-Social-Input"/> |
|
98 <div class="Ldt-Social-CopyBtn">Copier</div> |
|
99 </span> |
|
100 </div> |
|
101 <a href="#" target="_blank" class="Ldt-Social-Fb Ldt-Social-Ext" title="Partager sur Facebook"></a> |
|
102 <a href="#" target="_blank" class="Ldt-Social-Twitter Ldt-Social-Ext" title="Partager sur Twitter"></a> |
|
103 <a href="#" target="_blank" class="Ldt-Social-Gplus Ldt-Social-Ext" title="Partager sur Google+"></a> |
|
104 <a href="#" target="_blank" class="Ldt-Social-Mail" title="Partager par mail"></a> |
|
105 </div> |
|
106 <p class="title-video" href="#">Hashcut sans titre</p> |
115 </div> |
107 </div> |
116 <div class="profil-wrap"> |
108 <div class="profil-wrap"> |
117 <a href="#" class="all-hashcut">Tous les Hashcuts</a> |
109 <a href="#" class="all-hashcut">Tous les Hashcuts</a> |
118 <a href="#user" class="my-profil open-popin">Mon profil</a> |
110 <a href="#user" class="my-profil open-popin">Mon profil</a> |
119 </div> |
111 </div> |
122 <div class="content clearfix"> |
114 <div class="content clearfix"> |
123 |
115 |
124 <div class="left-content"> |
116 <div class="left-content"> |
125 <h2>Lire le Hashcut</h2> |
117 <h2>Lire le Hashcut</h2> |
126 <div class="bloc-video"> |
118 <div class="bloc-video"> |
127 <div class="video"></div> |
119 <div class="video"> |
|
120 <div class="video-wait"></div> |
|
121 </div> |
128 <div class="widget"> |
122 <div class="widget"> |
129 <div class="Ldt-Slider-Container" style="height: 6.29154px; margin-top: -2.29154px; overflow: hidden;"> |
123 <div class="Ldt-Slider-Container"> |
130 <div class="Ldt-Slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><div class="ui-slider-range ui-widget-header ui-slider-range-min" style="width: 0%;"></div><a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 0%; height: 8.29154px; width: 8.29154px; margin-left: -5.14577px; overflow: hidden;"></a></div> |
124 <div class="Ldt-Slider"></div> |
131 </div> |
125 </div> |
132 <div class="Ldt-Slider-Time" style="display: none; left: 51.5px;">07:17</div> |
126 <div class="Ldt-Slider-Time"></div> |
133 |
127 |
134 <div class="Ldt-Ctrl"> |
128 <div class="Ldt-Ctrl"> |
135 <div class="Ldt-Ctrl-Left"> |
129 <div class="Ldt-Ctrl-Left"> |
136 <div title="Lecture" class="Ldt-Ctrl-button Ldt-Ctrl-Play Ldt-Ctrl-Play-PlayState"></div> |
130 <div title="Lecture" class="Ldt-Ctrl-button Ldt-Ctrl-Play Ldt-Ctrl-Play-PlayState"></div> |
137 <div class="Ldt-Ctrl-spacer"></div> |
131 <div class="Ldt-Ctrl-spacer"></div> |
148 <div title="Temps écoulé" class="Ldt-Ctrl-Time-Elapsed">00:00</div> |
142 <div title="Temps écoulé" class="Ldt-Ctrl-Time-Elapsed">00:00</div> |
149 <div class="Ldt-Ctrl-Time-Separator">/</div> |
143 <div class="Ldt-Ctrl-Time-Separator">/</div> |
150 <div title="Temps total" class="Ldt-Ctrl-Time-Total">1:03:30</div> |
144 <div title="Temps total" class="Ldt-Ctrl-Time-Total">1:03:30</div> |
151 </div> |
145 </div> |
152 <div class="Ldt-Ctrl-spacer"></div> |
146 <div class="Ldt-Ctrl-spacer"></div> |
153 <div title="Couper le son" class="Ldt-Ctrl-button Ldt-Ctrl-Sound Ldt-TraceMe Ldt-Ctrl-Sound-Full"></div> |
147 <div title="Couper le son" class="Ldt-Ctrl-button Ldt-Ctrl-Sound Ldt-Ctrl-Sound-Full"></div> |
154 </div> |
148 </div> |
155 <div title="Changer le volume" class="Ldt-Ctrl-Volume-Control"> |
149 <div title="Changer le volume" class="Ldt-Ctrl-Volume-Control"> |
156 <div class="Ldt-Ctrl-Volume-Bar ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" title="Volume : 100%"><a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 100%;"></a></div> |
150 <div class="Ldt-Ctrl-Volume-Bar"></div> |
157 </div> |
151 </div> |
158 </div> |
152 </div> |
159 |
153 |
160 </div> |
154 </div> |
161 <div class="frise mashup-frise"> |
155 <div class="frise mashup-frise"> |
164 </div> |
158 </div> |
165 <div class="frise-indications"> |
159 <div class="frise-indications"> |
166 </div> |
160 </div> |
167 </div> |
161 </div> |
168 <div class="frise-position"></div> |
162 <div class="frise-position"></div> |
|
163 <div class="mashup-tooltip segment-tooltip-wrapper"> |
|
164 <div class="segment-tooltip"></div> |
|
165 <div class="segment-tooltip-tip"></div> |
|
166 </div> |
169 |
167 |
170 </div> |
168 </div> |
171 <div class="segment-info mashup-description"> |
169 <div class="segment-info mashup-description"> |
172 <img alt="" src="img/popin-triangle.png" class="pointer" style="left: 50%;"> |
170 <img alt="" src="img/popin-triangle.png" class="pointer" style="left: 50%;"> |
173 <div class="popin-content"> |
171 <div class="popin-content"> |
222 </table> |
220 </table> |
223 <a href="#" class="button cloner">Cloner le Hashcut</a> |
221 <a href="#" class="button cloner">Cloner le Hashcut</a> |
224 </div> |
222 </div> |
225 <h2>Médias utilisés dans le Hashcut</h2> |
223 <h2>Médias utilisés dans le Hashcut</h2> |
226 <ul class="list-video"> |
224 <ul class="list-video"> |
227 <li class="item-video"> |
225 |
228 <img alt="Roms en errance" src="thumbnails/roms-80.jpg"> |
|
229 <span class="video-info"> |
|
230 <span class="title-video">Roms en errance</span> |
|
231 <span class="author">Par : Bernard Kleindienst</span> |
|
232 <span class="time-length">Durée : <span>1:09:00</span></span> |
|
233 <span class="frise"> |
|
234 <div class="frise-overflow"> |
|
235 <div class="frise-segments"> |
|
236 <div style="background-color:#9467bd; left:20%; width:41.02564102564102%;" class="frise-segment"></div> |
|
237 </div> |
|
238 </div> |
|
239 </span> |
|
240 </span> |
|
241 </li> |
|
242 <li class="item-video"> |
|
243 <img alt="Roms en errance" src="thumbnails/roms-80.jpg"> |
|
244 <span class="video-info"> |
|
245 <span class="title-video">Roms en errance</span> |
|
246 <span class="author">Par : Bernard Kleindienst</span> |
|
247 <span class="time-length">Durée : <span>1:09:00</span></span> |
|
248 <span class="frise"> |
|
249 <div class="frise-overflow"> |
|
250 <div class="frise-segments"> |
|
251 <div style="background-color:#9467bd; left:20%; width:41.02564102564102%;" class="frise-segment"></div> |
|
252 </div> |
|
253 </div> |
|
254 </span> |
|
255 </span> |
|
256 </li> |
|
257 </ul> |
226 </ul> |
258 </div><!-- right-content --> |
227 </div><!-- right-content --> |
259 |
228 |
260 |
229 |
261 |
230 |
282 <script type="text/javascript" src="js/ldt-serializer.js"></script> |
251 <script type="text/javascript" src="js/ldt-serializer.js"></script> |
283 <script type="text/javascript" src="js/model.js"></script> |
252 <script type="text/javascript" src="js/model.js"></script> |
284 <script type="text/javascript" src="js/mashupcore.js"></script> |
253 <script type="text/javascript" src="js/mashupcore.js"></script> |
285 <script type="text/javascript" src="js/mashupplayer.js"></script> |
254 <script type="text/javascript" src="js/mashupplayer.js"></script> |
286 <script type="text/javascript" src="js/common.js"></script> |
255 <script type="text/javascript" src="js/common.js"></script> |
|
256 <script type="text/javascript" src="js/social.js"></script> |
287 <script type="text/javascript"> |
257 <script type="text/javascript"> |
288 $(function() { |
258 $(function() { |
289 IriSP.player({ |
259 IriSP.player({ |
290 url: "data/moon-mashup.json" |
260 url: "data/moon-mashup.json" |
|
261 // url: "http://capsicum/pf/ldtplatform/ldt/cljson/id/d204aa58-2cf2-11e2-a234-08002791f1b7" |
291 }) |
262 }) |
292 }) |
263 }) |
293 </script> |
264 </script> |
294 </body> |
265 </body> |
295 </html> |
266 </html> |