24 <div class="popin-content"> |
24 <div class="popin-content"> |
25 <form class="clearfix" action="#" method=""> |
25 <form class="clearfix" action="#" method=""> |
26 <div class="form-left"> |
26 <div class="form-left"> |
27 <p class="titre-wrap"> |
27 <p class="titre-wrap"> |
28 <label for="hashcut-title">Titre :</label> |
28 <label for="hashcut-title">Titre :</label> |
29 <input type="text" id="hashcut-title" name="" value="Mon Hashcut" /> |
29 <input type="text" id="hashcut-title" name="" value="Hashcut sans titre" /> |
30 </p> |
30 </p> |
31 <p> |
31 <p> |
32 <label for="hashcut-tags">Tags :</label> |
32 <label for="hashcut-tags">Tags :</label> |
33 <input type="text" id="hashcut-tags" name="" value="Lune, Espace, Lune" /> |
33 <input type="text" id="hashcut-tags" name="" value="" /> |
34 </p> |
34 </p> |
35 </div> |
35 </div> |
36 <p class="form-right"> |
36 <p class="form-right"> |
37 <label for="hashcut-description">Description :</label> |
37 <label for="hashcut-description">Description :</label> |
38 <textarea name="" id="hashcut-description"></textarea> |
38 <textarea name="" id="hashcut-description"></textarea> |
110 <img src="img/hashcut-logo.png" alt="Hashcut" /> |
110 <img src="img/hashcut-logo.png" alt="Hashcut" /> |
111 <span>Le Mashup<br />Cliquable</span> |
111 <span>Le Mashup<br />Cliquable</span> |
112 </a></h1> |
112 </a></h1> |
113 <div class="title-video-wrap"> |
113 <div class="title-video-wrap"> |
114 <a title="Modifier le titre et la description" class="open-popin" href="#update-title">Hashcut sans titre</a> |
114 <a title="Modifier le titre et la description" class="open-popin" href="#update-title">Hashcut sans titre</a> |
115 <p class="time-length">Durée: <span>00:00</span></p> |
115 <p class="time-length">Durée: <span class="mashup-total-duration">00:00</span></p> |
116 </div> |
116 </div> |
117 <div class="profil-wrap"> |
117 <div class="profil-wrap"> |
118 <a href="#" class="all-hashcut">Tous les Hashcuts</a> |
118 <a href="#" class="all-hashcut">Tous les Hashcuts</a> |
119 <a href="#user" class="my-profil open-popin">Mon profil</a> |
119 <a href="#user" class="my-profil open-popin">Mon profil</a> |
120 </div> |
120 </div> |
255 </div><!-- bloc-segmentation --> |
255 </div><!-- bloc-segmentation --> |
256 |
256 |
257 <div class="bloc-pvw"> |
257 <div class="bloc-pvw"> |
258 |
258 |
259 <div class="frise clearfix"> |
259 <div class="frise clearfix"> |
260 |
260 <div class="frise-indications"> |
261 <div class="indications"> |
261 </div> |
262 <span class="indication" style="left:24%;">00:30</span> |
262 <div class="frise-segments"> |
263 <span class="indication" style="left:44%;">00:30</span> |
263 </div> |
264 <span class="indication" style="left:64%;">00:30</span> |
264 <div class="frise-position"></div> |
265 <span class="indication" style="left:84%;">00:30</span> |
|
266 </div> |
|
267 |
|
268 <div class="segments"> |
|
269 <div class="segment" style="background-color:red;left:0;width:20%;"></div> |
|
270 <div class="segment" style="background-color:green;left:20%;width:20%;"></div> |
|
271 <div class="segment" style="background-color:red;left:40%;width:20%;"></div> |
|
272 <div class="segment" style="background-color:green;left:60%;width:20%;"></div> |
|
273 <div class="segment" style="background-color:red;left:80%;width:20%;"></div> |
|
274 </div> |
|
275 |
265 |
276 </div> |
266 </div> |
277 |
267 |
278 <div class="segment-info mashup-description"> |
268 <div class="segment-info mashup-description"> |
279 <img class="pointer" src="img/popin-triangle.png" alt="" /> |
269 <img class="pointer" src="img/popin-triangle.png" alt="" /> |
280 <div class="popin-content"> |
270 <div class="popin-content"> |
281 <ul class="tools"> |
271 <ul class="tools"> |
282 <li><a title="éditer" class="edit" href="#"></a></li> |
272 <li><a title="Éditer" class="edit" href="#"></a></li> |
283 <li><a title="descendre" class="bottom" href="#"></a></li> |
|
284 <li><a title="remonter" class="top" href="#"></a></li> |
|
285 <li><a title="supprimer" class="delete" href="#"></a></li> |
|
286 </ul> |
273 </ul> |
287 |
274 |
288 <h2>Chargement de la capsule lunaire</h2> |
275 <h2><span class="annotation-title"></span></h2> |
289 <table> |
276 <table> |
290 <tbody> |
277 <tbody> |
291 <tr> |
278 <tr> |
292 <th>Extrait de :</th> |
279 <th>Extrait de :</th> |
293 <td>Le Voyage dans la Lune (05:01 - 05:24)</td> |
280 <td><span class="annotation-media-title"></span> (<span class="annotation-time annotation-begin"></span> - <span class="annotation-time annotation-end"></span>)</td> |
294 </tr> |
281 </tr> |
295 <tr> |
282 <tr> |
296 <th>Description :</th> |
283 <th>Description :</th> |
297 <td>Lors d'un colloque d'astronomie, le professeur Barbenfouillis crée l'événement en faisant part à l'assemblée de son projet de voyage dans la Lune. Il organise ensuite la visite à ses confrères de l'atelier où l'obus spatial est en chantier. Il sera propulsé en direction de la Lune au moyen d'un canon géant.</td> |
284 <td><span class="annotation-description"></span></td> |
298 </tr> |
285 </tr> |
299 <tr> |
286 <tr> |
300 <th>Tags :</th> |
287 <th>Tags :</th> |
301 <td>astronomie, lune, fiction, histoire du cinéma, canon, projectile</td> |
288 <td><span class="annotation-tags">(fonctionnalité à venir)</span></td> |
302 </tr> |
289 </tr> |
303 </tbody> |
290 </tbody> |
304 </table> |
291 </table> |
305 </div> |
292 </div> |
306 </div> |
293 </div> |
311 <div class="col-right"> |
298 <div class="col-right"> |
312 <div class="liste-segment"> |
299 <div class="liste-segment"> |
313 <h2>Liste des segments</h2> |
300 <h2>Liste des segments</h2> |
314 <div class="frise clearfix"> |
301 <div class="frise clearfix"> |
315 <p class="aucun-segment">Aucun segment</p> |
302 <p class="aucun-segment">Aucun segment</p> |
316 <div class="indications"> |
303 <div class="frise-indications"> |
317 <span class="indication" style="left:64%;">00:30</span> |
304 </div> |
318 <span class="indication" style="left:84%;">00:30</span> |
305 <div class="frise-segments"> |
319 </div> |
|
320 <div class="segments"> |
|
321 <div class="segment" style="background-color:red;left:0;width:20%;"></div> |
|
322 <div class="segment" style="background-color:yellow;left:20%;width:20%;"></div> |
|
323 <div class="segment" style="background-color:blue;left:40%;width:20%;"></div> |
|
324 <div class="segment" style="background-color:green;left:60%;width:20%;"></div> |
|
325 <div class="segment" style="background-color:brown;left:80%;width:20%;"></div> |
|
326 </div> |
306 </div> |
327 |
307 |
328 </div> |
308 </div> |
329 </div> |
309 </div> |
330 |
310 |
348 </div><!-- footer --> |
328 </div><!-- footer --> |
349 </div><!-- wrap --> |
329 </div><!-- wrap --> |
350 <!-- JavaScript --> |
330 <!-- JavaScript --> |
351 <script type="text/javascript" src="lib/jquery.min.js"></script> |
331 <script type="text/javascript" src="lib/jquery.min.js"></script> |
352 <script type="text/javascript" src="lib/jquery-ui.min.js"></script> |
332 <script type="text/javascript" src="lib/jquery-ui.min.js"></script> |
353 <script type="text/javascript" src="lib/mustache.js"></script> |
|
354 <script type="text/javascript" src="lib/underscore-min.js"></script> |
333 <script type="text/javascript" src="lib/underscore-min.js"></script> |
355 <script type="text/javascript" src="lib/popcorn-complete.min.js"></script> |
334 <script type="text/javascript" src="lib/popcorn-complete.min.js"></script> |
356 <script type="text/javascript" src="lib/raphael-min.js"></script> |
335 <script type="text/javascript" src="lib/raphael-min.js"></script> |
357 <script type="text/javascript" src="js/init.js"></script> |
336 <script type="text/javascript" src="js/init.js"></script> |
358 <script type="text/javascript" src="js/medialist-serializer.js"></script> |
337 <script type="text/javascript" src="js/medialist-serializer.js"></script> |
359 <script type="text/javascript" src="js/model.js"></script> |
338 <script type="text/javascript" src="js/model.js"></script> |
360 <script type="text/javascript" src="js/editor.js"></script> |
339 <script type="text/javascript" src="js/editor.js"></script> |
361 <script type="text/javascript" src="js/common.js"></script> |
340 <script type="text/javascript" src="js/common.js"></script> |
|
341 <script type="text/javascript"> |
|
342 $(function() { |
|
343 var hashcut = new IriSP.Hashcut({url: "data/moon.json"}); |
|
344 }); |
|
345 </script> |
362 </body> |
346 </body> |
363 </html> |
347 </html> |