23 <img class="pointer" src="img/popin-triangle.png" alt="" /> |
23 <img class="pointer" src="img/popin-triangle.png" alt="" /> |
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="titre-video">Titre :</label> |
28 <label for="hashcut-title">Titre :</label> |
29 <input type="text" id="titre-video" name="" value="Mon Hashcut" /> |
29 <input type="text" id="hashcut-title" name="" value="Mon Hashcut" /> |
30 </p> |
30 </p> |
31 <p> |
31 <p> |
32 <label for="tags-video">Tags :</label> |
32 <label for="hashcut-tags">Tags :</label> |
33 <input type="text" id="tags-video" name="" value="Lune, Espace, Lune" /> |
33 <input type="text" id="hashcut-tags" name="" value="Lune, Espace, Lune" /> |
34 </p> |
34 </p> |
35 </div> |
35 </div> |
36 <p class="form-right"> |
36 <p class="form-right"> |
37 <label for="description-video">Description :</label> |
37 <label for="hashcut-description">Description :</label> |
38 <textarea name="" id="description-video" cols="30" rows="10"></textarea> |
38 <textarea name="" id="hashcut-description"></textarea> |
39 </p> |
39 </p> |
40 </form> |
40 </form> |
41 </div> |
41 </div> |
42 </div><!-- popin update-title --> |
42 </div><!-- popin update-title --> |
43 |
43 |
160 |
160 |
161 <div class="Ldt-Ctrl"> |
161 <div class="Ldt-Ctrl"> |
162 <div class="Ldt-Ctrl-Left"> |
162 <div class="Ldt-Ctrl-Left"> |
163 <div class="Ldt-Ctrl-button Ldt-Ctrl-Play Ldt-Ctrl-Play-PlayState" title="Lecture/Pause"></div> |
163 <div class="Ldt-Ctrl-button Ldt-Ctrl-Play Ldt-Ctrl-Play-PlayState" title="Lecture/Pause"></div> |
164 <div class="Ldt-Ctrl-spacer"></div> |
164 <div class="Ldt-Ctrl-spacer"></div> |
|
165 <div class="Ldt-Ctrl-InOutBlock"> |
|
166 <div class="Ldt-Ctrl-button Ldt-Ctrl-SetIn" title="Débuter le segment ici"></div> |
|
167 <div class="Ldt-Ctrl-spacer"></div> |
|
168 <div class="Ldt-Ctrl-button Ldt-Ctrl-SetOut" title="Finir le segment ici"></div> |
|
169 <div class="Ldt-Ctrl-spacer"></div> |
|
170 </div> |
165 </div> |
171 </div> |
166 <div class="Ldt-Ctrl-Right"> |
172 <div class="Ldt-Ctrl-Right"> |
167 <div class="Ldt-Ctrl-spacer"></div> |
173 <div class="Ldt-Ctrl-spacer"></div> |
168 <div class="Ldt-Ctrl-Time"> |
174 <div class="Ldt-Ctrl-Time"> |
169 <div class="Ldt-Ctrl-Time-Elapsed" title="Temps écoulé">00:00</div> |
175 <div class="Ldt-Ctrl-Time-Elapsed" title="Temps écoulé">00:00</div> |
192 à |
198 à |
193 <span class="time-tangle tangle-end"></span> |
199 <span class="time-tangle tangle-end"></span> |
194 (durée: |
200 (durée: |
195 <span class="time-tangle tangle-duration"></span>) |
201 <span class="time-tangle tangle-duration"></span>) |
196 </h2> |
202 </h2> |
197 <form action="#"> |
203 <form action="#" id="segment-form"> |
198 <div class="form-segment-left"> |
204 <div class="form-segment-left"> |
199 <p> |
205 <p> |
200 <label for="titre">Titre :</label> |
206 <label for="segment-title">Titre :</label> |
201 <input type="text" id="titre" /> |
207 <input type="text" id="segment-title" /> |
202 </p> |
208 </p> |
203 <p> |
209 <p> |
204 <label for="tags">Tags :</label> |
210 <label for="segment-tags">Tags :</label> |
205 <input type="text" id="tags" /> |
211 <input type="text" id="segment-tags" /> |
206 </p> |
212 </p> |
207 </div> |
213 </div> |
208 <div class="form-segment-right"> |
214 <div class="form-segment-right"> |
209 <p> |
215 <p> |
210 <label for="description">Description :</label> |
216 <label for="segment-description">Description :</label> |
211 <textarea id="description"></textarea> |
217 <textarea id="segment-description"></textarea> |
212 </p> |
218 </p> |
213 </div> |
219 </div> |
214 <input class="button add-segment" type="submit" value="Ajouter au Hashcut" /> |
220 <input class="button add-segment" type="submit" value="Ajouter au Hashcut" /> |
215 |
221 |
216 </form> |
222 </form> |
217 </div> |
223 </div> |
218 </div><!-- popin segmentation --> |
224 </div><!-- popin segmentation --> |
219 |
225 <!-- //TODO: Add "Existing Segments" |
220 <div class="existant"> |
226 <div class="existant"> |
221 <h2>Segments existants :</h2> |
227 <h2>Segments existants :</h2> |
222 <div class="segments"> |
228 <div class="segments"> |
223 <div class="segment"> |
229 <div class="segment"> |
224 <div class="section" style="left:0%;width:20%;"></div> |
230 <div class="section" style="left:0%;width:20%;"></div> |
230 <p>De: <span>00:43</span> à <span>01:20</span> (durée: <span>00:37</span>)</p> |
236 <p>De: <span>00:43</span> à <span>01:20</span> (durée: <span>00:37</span>)</p> |
231 </div> |
237 </div> |
232 <a href="#" class="button reprendre-segment">Reprendre le segment</a> |
238 <a href="#" class="button reprendre-segment">Reprendre le segment</a> |
233 </div> |
239 </div> |
234 </div><!-- popin segment-section --> |
240 </div><!-- popin segment-section --> |
235 </div> |
241 <!-- |
|
242 </div> |
236 <div class="segment"> |
243 <div class="segment"> |
237 <div class="section" style="left:20%;width:20%;"></div> |
244 <div class="section" style="left:20%;width:20%;"></div> |
238 </div> |
245 </div> |
239 <div class="segment"> |
246 <div class="segment"> |
240 <div class="section" style="left:60%;width:20%;"></div> |
247 <div class="section" style="left:60%;width:20%;"></div> |
301 <div class="col-right"> |
309 <div class="col-right"> |
302 <div class="liste-segment"> |
310 <div class="liste-segment"> |
303 <h2>Liste des segments</h2> |
311 <h2>Liste des segments</h2> |
304 <div class="frise clearfix"> |
312 <div class="frise clearfix"> |
305 |
313 |
306 <span class="indication" style="left:64%;">00:30</span> |
314 <div class="indications"> |
307 <span class="indication" style="left:84%;">00:30</span> |
315 <span class="indication" style="left:30%;">00:30</span> |
|
316 <span class="indication" style="left:84%;">00:30</span> |
|
317 </div> |
308 <div class="segments"> |
318 <div class="segments"> |
309 <div class="segment" style="background-color:red;width:20%;"></div> |
319 <div class="segment" style="background-color:red;width:20%;"></div> |
310 <div class="segment" style="background-color:yellow;width:20%;"></div> |
320 <div class="segment" style="background-color:yellow;width:20%;"></div> |
311 <div class="segment" style="background-color:blue;width:20%;"></div> |
321 <div class="segment" style="background-color:blue;width:20%;"></div> |
312 <div class="segment" style="background-color:green;width:20%;"></div> |
322 <div class="segment" style="background-color:green;width:20%;"></div> |
313 <div class="segment" style="background-color:brown;width:20%;"></div> |
323 <div class="segment" style="background-color:brown;width:20%;"></div> |
314 </div> |
324 </div> |
|
325 |
315 </div> |
326 </div> |
316 </div> |
327 </div> |
317 |
328 |
318 <ul class="list-video organize-segments"> |
329 <ul class="list-video organize-segments"> |
319 <li class="item-video"> |
|
320 <img src="img/apercu-video.jpg" alt="aperçu" /> |
|
321 <span class="video-info"> |
|
322 <span class="title-video">Voyage à la Lune 1</span> |
|
323 <span class="subtitle">Chargement de la Capsule</span> |
|
324 <span class="duration">01:17 - 02:01 (00:44)</span> |
|
325 <ul class="tools"> |
|
326 <li><a class="edit" href="#"></a></li> |
|
327 <li><a class="bottom" href="#"></a></li> |
|
328 <li><a class="top" href="#"></a></li> |
|
329 <li><a class="delete" href="#"></a></li> |
|
330 </ul> |
|
331 </span> |
|
332 </li><!-- item-video --> |
|
333 <li class="item-video"> |
|
334 <img src="img/apercu-video.jpg" alt="aperçu" /> |
|
335 <span class="video-info"> |
|
336 <span class="title-video">Voyage à la Lune 2</span> |
|
337 <span class="subtitle">Chargement de la Capsule</span> |
|
338 <span class="duration">01:17 - 02:01 (00:44)</span> |
|
339 <ul class="tools"> |
|
340 <li><a class="edit" href="#"></a></li> |
|
341 <li><a class="bottom" href="#"></a></li> |
|
342 <li><a class="top" href="#"></a></li> |
|
343 <li><a class="delete" href="#"></a></li> |
|
344 </ul> |
|
345 </span> |
|
346 </li><!-- item-video --> |
|
347 <li class="item-video"> |
|
348 <img src="img/apercu-video.jpg" alt="aperçu" /> |
|
349 <span class="video-info"> |
|
350 <span class="title-video">Voyage à la Lune 3</span> |
|
351 <span class="subtitle">Chargement de la Capsule</span> |
|
352 <span class="duration">01:17 - 02:01 (00:44)</span> |
|
353 <ul class="tools"> |
|
354 <li><a class="edit" href="#"></a></li> |
|
355 <li><a class="bottom" href="#"></a></li> |
|
356 <li><a class="top" href="#"></a></li> |
|
357 <li><a class="delete" href="#"></a></li> |
|
358 </ul> |
|
359 </span> |
|
360 </li><!-- item-video --> |
|
361 |
330 |
362 </ul> |
331 </ul> |
363 </div><!-- col-right --> |
332 </div><!-- col-right --> |
364 |
333 |
365 </div><!-- content --> |
334 </div><!-- content --> |