42 <img class="pointer" src="img/popin-triangle.png" alt="" /> |
42 <img class="pointer" src="img/popin-triangle.png" alt="" /> |
43 <div class="popin-content"> |
43 <div class="popin-content"> |
44 <h2>Mashup75</h2> |
44 <h2>Mashup75</h2> |
45 <h3>mash@cinecast.fr</h3> |
45 <h3>mash@cinecast.fr</h3> |
46 <a href="#" class="nb-hashcut">12 Hashcuts</a> |
46 <a href="#" class="nb-hashcut">12 Hashcuts</a> |
47 <a href="#" class="change-account">Changer de compte</a> |
47 <p> |
|
48 <a href="#" class="change-account button">Changer de compte</a> |
|
49 </p> |
|
50 |
48 </div> |
51 </div> |
49 </div><!-- popin user info--> |
52 </div><!-- popin user info--> |
50 |
53 |
51 <div class="popin user signup" id="user"> |
54 <div class="popin user signup" id="user"> |
52 <img class="pointer" src="img/popin-triangle.png" alt="" /> |
55 <img class="pointer" src="img/popin-triangle.png" alt="" /> |
126 <ul class="list-video"> |
129 <ul class="list-video"> |
127 |
130 |
128 </ul> |
131 </ul> |
129 </div><!-- col-left --> |
132 </div><!-- col-left --> |
130 |
133 |
131 <div class="col-middle"> |
134 <div class="col-middle empty-mode"> |
|
135 |
|
136 <div class="col-middle-header"> |
|
137 <a href="#" class="tab tab-segment">Segmenter <span class="tab-media-title">La cuisine du Popcorn</span></a> |
|
138 <a href="#" class="tab tab-pvw">Prévisualiser</a> |
|
139 </div> |
|
140 |
|
141 <div class="video"> |
|
142 <div class="tutorial"> |
|
143 <h2>Créer un Hashcut, c’est facile !</h2> |
|
144 <ol> |
|
145 <li>Commencez par choisir une vidéo dans le volet de gauche</li> |
|
146 <li>Créez un segment dans la vidéo et profitez-en pour annoter votre segment</li> |
|
147 <li>Ajoutez votre segment à la liste, réorganisez les segments entre eux</li> |
|
148 <li>Rajoutez quelques commentaires à votre Hashcut. Vous êtes prêts à publier !</li> |
|
149 </ol> |
|
150 </div> |
|
151 <a class="publier-button" title="Publier" href="#"></a> |
|
152 </div> |
132 |
153 |
133 <div class="bloc-segmentation"> |
154 <div class="bloc-segmentation"> |
134 <div class="col-middle-header disable"> |
|
135 <a href="#" class="segmenter ">Segmenter <em>La cuisine du Popcorn</em></a> |
|
136 <a href="#" class="previsualiser disable">Prévisualiser</a> |
|
137 </div> |
|
138 <div class="video"> |
|
139 <a class="publier-button" title="Publier" href="#"></a> |
|
140 <img src="img/visuel-player.jpg" alt="" /> |
|
141 </div> |
|
142 <div class="segment"> |
155 <div class="segment"> |
143 <img src="img/visuel-segment.png" alt=""> |
156 <img src="img/visuel-segment.png" alt=""> |
144 </div> |
157 </div> |
145 <div class="popin segmentation" id=""> |
158 <div class="segmentation" id=""> |
146 <img class="pointer" src="img/popin-triangle.png" alt="" /> |
159 <img class="pointer" src="img/popin-triangle.png" alt="" /> |
147 <div class="popin-content"> |
160 <div class="popin-content"> |
148 <h2>Créer un nouveau segment de <span>02:27</span> à <span>02:27</span> (durée: <span>02:27</span>)</h2> |
161 <h2>Créer un nouveau segment de <span>02:27</span> à <span>02:27</span> (durée: <span>02:27</span>)</h2> |
149 <form action="#"> |
162 <form action="#"> |
150 <div class="form-segment-left"> |
163 <div class="form-segment-left"> |
178 <div class="section" style="left:0%;width:20%;"></div> |
189 <div class="section" style="left:0%;width:20%;"></div> |
179 <div class="popin segment-section" id=""> |
190 <div class="popin segment-section" id=""> |
180 <img style="left:20px;" class="pointer" src="img/popin-triangle.png" alt="" /> |
191 <img style="left:20px;" class="pointer" src="img/popin-triangle.png" alt="" /> |
181 <div class="popin-content clearfix"> |
192 <div class="popin-content clearfix"> |
182 <div class="instant-description"> |
193 <div class="instant-description"> |
183 <h2>Le moment crucial où le maïs explose</h2> |
194 <h3>Le moment crucial où le maïs explose</h3> |
184 <p>De: <span>00:43</span> à <span>01:20</span> (durée: <span>00:37</span>)</p> |
195 <p>De: <span>00:43</span> à <span>01:20</span> (durée: <span>00:37</span>)</p> |
185 </div> |
196 </div> |
186 <a href="#" class="reprendre-segment">Reprendre le segment</a> |
197 <a href="#" class="button reprendre-segment">Reprendre le segment</a> |
187 </div> |
198 </div> |
188 </div><!-- popin segment-section --> |
199 </div><!-- popin segment-section --> |
189 </div> |
200 </div> |
190 <div class="segment"> |
201 <div class="segment"> |
191 <div class="section" style="left:20%;width:20%;"></div> |
202 <div class="section" style="left:20%;width:20%;"></div> |
199 </div> |
210 </div> |
200 </div> |
211 </div> |
201 </div><!-- bloc-segmentation --> |
212 </div><!-- bloc-segmentation --> |
202 |
213 |
203 <div class="bloc-pvw"> |
214 <div class="bloc-pvw"> |
204 <div class="col-middle-header"> |
|
205 <a href="#" class="segmenter">Segmenter <em>La cuisine du Popcorn</em></a> |
|
206 <a href="#" class="previsualiser">Prévisualiser</a> |
|
207 </div> |
|
208 <div class="video"> |
|
209 <a class="publier-button" title="Publier" href="#"></a> |
|
210 <img src="img/visuel-player.jpg" alt="" /> |
|
211 </div> |
|
212 |
215 |
213 <div class="frise clearfix"> |
216 <div class="frise clearfix"> |
214 |
217 |
215 <span class="indication" style="left:24%;">00:30</span> |
218 <span class="indication" style="left:24%;">00:30</span> |
216 <span class="indication" style="left:44%;">00:30</span> |
219 <span class="indication" style="left:44%;">00:30</span> |
257 </div><!-- popin frise-description --> |
260 </div><!-- popin frise-description --> |
258 |
261 |
259 </div><!-- frise --> |
262 </div><!-- frise --> |
260 </div><!-- bloc-pvw --> |
263 </div><!-- bloc-pvw --> |
261 |
264 |
262 |
|
263 <div class="bloc-vide"> |
|
264 <div class="col-middle-header disable"> |
|
265 <a href="#" class="segmenter disable">Segmenter</a> |
|
266 <a href="#" class="previsualiser disable">Prévisualiser</a> |
|
267 </div> |
|
268 <div class="video"> |
|
269 <div class="tutorial"> |
|
270 <h2>Créer un Hashcut, c’est facile !</h2> |
|
271 <ol> |
|
272 <li>Commencez par choisir une vidéo dans le volet de gauche</li> |
|
273 <li>Créez un segment dans la vidéo et profitez-en pour annoter votre segment</li> |
|
274 <li>Ajoutez votre segment à la liste, réorganisez les segments entre eux</li> |
|
275 <li>Rajoutez quelques commentaires à votre Hashcut. Vous êtes prêts à publier !</li> |
|
276 </ol> |
|
277 </div> |
|
278 <a class="publier-button" title="Publier" href="#"></a> |
|
279 </div> |
|
280 </div><!-- bloc-vide --> |
|
281 |
|
282 </div><!-- col-middle --> |
265 </div><!-- col-middle --> |
283 |
266 |
284 <div class="col-right"> |
267 <div class="col-right"> |
285 <div class="liste-segment"> |
268 <div class="liste-segment"> |
286 <h2>Liste des segments</h2> |
269 <h2>Liste des segments</h2> |
298 </div> |
281 </div> |
299 </div> |
282 </div> |
300 |
283 |
301 <ul class="list-video" id="sortable"> |
284 <ul class="list-video" id="sortable"> |
302 <li class="item-video"> |
285 <li class="item-video"> |
303 <a class="clearfix" href="#"> |
286 <img src="img/apercu-video.jpg" alt="aperçu" /> |
304 <img src="img/apercu-video.jpg" alt="aperçu" /> |
287 <span class="video-info"> |
305 <span class="video-info"> |
288 <span class="title-video">Voyage à la Lune 1</span> |
306 <span class="title-video">Le a Lune 1</span> |
289 <span class="subtitle">Chargement de la Capsule</span> |
307 <span class="subtitle">Chargement de la Capsule</span> |
290 <span class="duration">01:17 - 02:01 (00:44)</span> |
308 <span class="duration">01:17 - 02:01 (00:44)</span> |
291 <ul class="tools"> |
309 </span> |
292 <li><a class="edit" href="#"></a></li> |
310 </a> |
293 <li><a class="bottom" href="#"></a></li> |
311 <ul class="tools"> |
294 <li><a class="top" href="#"></a></li> |
312 <li><a class="edit" href="#"></a></li> |
295 <li><a class="delete" href="#"></a></li> |
313 <li><a class="bottom" href="#"></a></li> |
296 </ul> |
314 <li><a class="top" href="#"></a></li> |
297 </span> |
315 <li><a class="delete" href="#"></a></li> |
|
316 </ul> |
|
317 </li><!-- item-video --> |
298 </li><!-- item-video --> |
318 <li class="item-video"> |
299 <li class="item-video"> |
319 <a class="clearfix" href="#"> |
300 <img src="img/apercu-video.jpg" alt="aperçu" /> |
320 <img src="img/apercu-video.jpg" alt="aperçu" /> |
301 <span class="video-info"> |
321 <span class="video-info"> |
302 <span class="title-video">Voyage à la Lune 2</span> |
322 <span class="title-video">Le a Lune 2</span> |
303 <span class="subtitle">Chargement de la Capsule</span> |
323 <span class="subtitle">Chargement de la Capsule</span> |
304 <span class="duration">01:17 - 02:01 (00:44)</span> |
324 <span class="duration">01:17 - 02:01 (00:44)</span> |
305 <ul class="tools"> |
325 </span> |
306 <li><a class="edit" href="#"></a></li> |
326 </a> |
307 <li><a class="bottom" href="#"></a></li> |
327 <ul class="tools"> |
308 <li><a class="top" href="#"></a></li> |
328 <li><a class="edit" href="#"></a></li> |
309 <li><a class="delete" href="#"></a></li> |
329 <li><a class="bottom" href="#"></a></li> |
310 </ul> |
330 <li><a class="top" href="#"></a></li> |
311 </span> |
331 <li><a class="delete" href="#"></a></li> |
|
332 </ul> |
|
333 </li><!-- item-video --> |
312 </li><!-- item-video --> |
334 <li class="item-video"> |
313 <li class="item-video"> |
335 <a class="clearfix" href="#"> |
314 <img src="img/apercu-video.jpg" alt="aperçu" /> |
336 <img src="img/apercu-video.jpg" alt="aperçu" /> |
315 <span class="video-info"> |
337 <span class="video-info"> |
316 <span class="title-video">Voyage à la Lune 3</span> |
338 <span class="title-video">Le a Lune 3</span> |
317 <span class="subtitle">Chargement de la Capsule</span> |
339 <span class="subtitle">Chargement de la Capsule</span> |
318 <span class="duration">01:17 - 02:01 (00:44)</span> |
340 <span class="duration">01:17 - 02:01 (00:44)</span> |
319 <ul class="tools"> |
341 </span> |
320 <li><a class="edit" href="#"></a></li> |
342 </a> |
321 <li><a class="bottom" href="#"></a></li> |
343 <ul class="tools"> |
322 <li><a class="top" href="#"></a></li> |
344 <li><a class="edit" href="#"></a></li> |
323 <li><a class="delete" href="#"></a></li> |
345 <li><a class="bottom" href="#"></a></li> |
324 </ul> |
346 <li><a class="top" href="#"></a></li> |
325 </span> |
347 <li><a class="delete" href="#"></a></li> |
|
348 </ul> |
|
349 </li><!-- item-video --> |
326 </li><!-- item-video --> |
|
327 |
350 </ul> |
328 </ul> |
351 </div><!-- col-right --> |
329 </div><!-- col-right --> |
352 |
330 |
353 </div><!-- content --> |
331 </div><!-- content --> |
354 |
332 |