equal
deleted
inserted
replaced
1 <!DOCTYPE html> |
1 <!DOCTYPE html> |
2 <html> |
2 <html> |
3 <head> |
3 <head> |
4 <meta charset="utf-8"> |
4 <meta charset="utf-8"> |
5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
6 <title>Edition</title> |
6 <meta name="description" content="Interface d'édition de Hashcuts (Mashups vidéo cliquables)" /> |
|
7 <meta name="copyright" content="Institut de Recherche et d'Innovation (IRI), 2012" /> |
|
8 <meta name="author" content="Anthony Ly, Raphaël Velt" /> |
|
9 <title>Hashcut > Edition</title> |
7 <link rel="stylesheet" href="css/reset.css" /> |
10 <link rel="stylesheet" href="css/reset.css" /> |
8 <link rel="stylesheet" href="css/common.css" /> |
11 <link rel="stylesheet" href="css/common.css" /> |
9 <link rel="stylesheet" href="css/edition.css" /> |
12 <link rel="stylesheet" href="css/edition.css" /> |
10 <link rel="stylesheet" href="lib/jquery-ui.css"> |
13 <link rel="stylesheet" href="lib/jquery-ui.css"> |
11 </head> |
14 </head> |
45 <h3>mash@cinecast.fr</h3> |
48 <h3>mash@cinecast.fr</h3> |
46 <a href="#" class="nb-hashcut">12 Hashcuts</a> |
49 <a href="#" class="nb-hashcut">12 Hashcuts</a> |
47 <p> |
50 <p> |
48 <a href="#" class="change-account button">Changer de compte</a> |
51 <a href="#" class="change-account button">Changer de compte</a> |
49 </p> |
52 </p> |
50 |
|
51 </div> |
53 </div> |
52 </div><!-- popin user info--> |
54 </div><!-- popin user info--> |
53 |
55 |
54 <div class="popin user signup" id="user"> |
56 <div class="popin user signup" id="user"> |
55 <img class="pointer" src="img/popin-triangle.png" alt="" /> |
57 <img class="pointer" src="img/popin-triangle.png" alt="" /> |
153 |
155 |
154 <div class="bloc-segmentation"> |
156 <div class="bloc-segmentation"> |
155 <div class="segment"> |
157 <div class="segment"> |
156 <img src="img/visuel-segment.png" alt=""> |
158 <img src="img/visuel-segment.png" alt=""> |
157 </div> |
159 </div> |
158 <div class="segmentation" id=""> |
160 <div class="segment-info segmentation"> |
159 <img class="pointer" src="img/popin-triangle.png" alt="" /> |
161 <img class="pointer" src="img/popin-triangle.png" alt="" /> |
160 <div class="popin-content"> |
162 <div class="popin-content"> |
161 <h2>Créer un nouveau segment de <span>02:27</span> à <span>02:27</span> (durée: <span>02:27</span>)</h2> |
163 <h2>Créer un nouveau segment de <span>02:27</span> à <span>02:27</span> (durée: <span>02:27</span>)</h2> |
162 <form action="#"> |
164 <form action="#"> |
163 <div class="form-segment-left"> |
165 <div class="form-segment-left"> |
185 <div class="existant"> |
187 <div class="existant"> |
186 <h2>Segments existants :</h2> |
188 <h2>Segments existants :</h2> |
187 <div class="segments"> |
189 <div class="segments"> |
188 <div class="segment"> |
190 <div class="segment"> |
189 <div class="section" style="left:0%;width:20%;"></div> |
191 <div class="section" style="left:0%;width:20%;"></div> |
190 <div class="popin segment-section" id=""> |
192 <div class="popin segment-section"> |
191 <img style="left:20px;" class="pointer" src="img/popin-triangle.png" alt="" /> |
193 <img style="left:20px;" class="pointer" src="img/popin-triangle.png" alt="" /> |
192 <div class="popin-content clearfix"> |
194 <div class="popin-content clearfix"> |
193 <div class="instant-description"> |
195 <div class="instant-description"> |
194 <h3>Le moment crucial où le maïs explose</h3> |
196 <h3>Le moment crucial où le maïs explose</h3> |
195 <p>De: <span>00:43</span> à <span>01:20</span> (durée: <span>00:37</span>)</p> |
197 <p>De: <span>00:43</span> à <span>01:20</span> (durée: <span>00:37</span>)</p> |
226 <div class="segment" style="background-color:red;width:20%;"></div> |
228 <div class="segment" style="background-color:red;width:20%;"></div> |
227 <div class="segment" style="background-color:green;width:20%;"></div> |
229 <div class="segment" style="background-color:green;width:20%;"></div> |
228 <div class="segment" style="background-color:red;width:20%;"></div> |
230 <div class="segment" style="background-color:red;width:20%;"></div> |
229 </div> |
231 </div> |
230 |
232 |
|
233 </div> |
231 |
234 |
232 <div class="popin frise-description" id="frise-description"> |
235 <div class="segment-info mashup-description"> |
233 <img class="pointer" src="img/popin-triangle.png" alt="" /> |
236 <img class="pointer" src="img/popin-triangle.png" alt="" /> |
234 <div class="popin-content"> |
237 <div class="popin-content"> |
235 <ul class="tools"> |
238 <ul class="tools"> |
236 <li><a class="edit" href="#"></a></li> |
239 <li><a class="edit" href="#"></a></li> |
237 <li><a class="bottom" href="#"></a></li> |
240 <li><a class="bottom" href="#"></a></li> |
255 <td>astronomie, lune, fiction, histoire du cinéma, canon, projectile</td> |
258 <td>astronomie, lune, fiction, histoire du cinéma, canon, projectile</td> |
256 </tr> |
259 </tr> |
257 </tbody> |
260 </tbody> |
258 </table> |
261 </table> |
259 </div> |
262 </div> |
260 </div><!-- popin frise-description --> |
263 </div> |
261 |
|
262 </div><!-- frise --> |
|
263 </div><!-- bloc-pvw --> |
264 </div><!-- bloc-pvw --> |
264 |
265 |
265 </div><!-- col-middle --> |
266 </div><!-- col-middle --> |
266 |
267 |
267 <div class="col-right"> |
268 <div class="col-right"> |
279 <div class="segment" style="background-color:brown;width:20%;"></div> |
280 <div class="segment" style="background-color:brown;width:20%;"></div> |
280 </div> |
281 </div> |
281 </div> |
282 </div> |
282 </div> |
283 </div> |
283 |
284 |
284 <ul class="list-video" id="sortable"> |
285 <ul class="list-video organize-segments"> |
285 <li class="item-video"> |
286 <li class="item-video"> |
286 <img src="img/apercu-video.jpg" alt="aperçu" /> |
287 <img src="img/apercu-video.jpg" alt="aperçu" /> |
287 <span class="video-info"> |
288 <span class="video-info"> |
288 <span class="title-video">Voyage à la Lune 1</span> |
289 <span class="title-video">Voyage à la Lune 1</span> |
289 <span class="subtitle">Chargement de la Capsule</span> |
290 <span class="subtitle">Chargement de la Capsule</span> |