108 <div class="profil-wrap"> |
114 <div class="profil-wrap"> |
109 <a href="#" class="all-hashcut">Tous les Hashcuts</a> |
115 <a href="#" class="all-hashcut">Tous les Hashcuts</a> |
110 <a href="#user" class="my-profil open-popin">Mon profil</a> |
116 <a href="#user" class="my-profil open-popin">Mon profil</a> |
111 </div> |
117 </div> |
112 </div><!-- header --> |
118 </div><!-- header --> |
|
119 </div><!-- wrap-header --> |
113 |
120 |
114 <div class="content clearfix"> |
121 <div class="wrapper"> |
115 |
122 <div class="wrap"> |
116 <div class="left-content"> |
123 <div class="content clearfix"> |
117 <h2>Lire le Hashcut</h2> |
124 |
118 <div class="bloc-video"> |
125 <div class="left-content"> |
119 <div class="video"> |
126 <h2>Lire le Hashcut</h2> |
120 <div class="video-wait"></div> |
127 <div class="bloc-video"> |
121 </div> |
128 <div class="video"> |
122 <div class="widget"> |
129 <div class="video-wait"></div> |
123 <div class="Ldt-Slider-Container"> |
130 </div> |
124 <div class="Ldt-Slider"></div> |
131 <div class="widget"> |
125 </div> |
132 <div class="Ldt-Slider-Container"> |
126 <div class="Ldt-Slider-Time"></div> |
133 <div class="Ldt-Slider"></div> |
127 |
134 </div> |
128 <div class="Ldt-Ctrl"> |
135 <div class="Ldt-Slider-Time"></div> |
129 <div class="Ldt-Ctrl-Left"> |
136 |
130 <div title="Lecture" class="Ldt-Ctrl-button Ldt-Ctrl-Play Ldt-Ctrl-Play-PlayState"></div> |
137 <div class="Ldt-Ctrl"> |
131 <div class="Ldt-Ctrl-spacer"></div> |
138 <div class="Ldt-Ctrl-Left"> |
132 <div class="Ldt-Ctrl-InOutBlock"> |
139 <div title="Lecture" class="Ldt-Ctrl-button Ldt-Ctrl-Play Ldt-Ctrl-Play-PlayState"></div> |
133 <div title="Débuter le segment ici" class="Ldt-Ctrl-button Ldt-Ctrl-SetIn"></div> |
|
134 <div class="Ldt-Ctrl-spacer"></div> |
140 <div class="Ldt-Ctrl-spacer"></div> |
135 <div title="Finir le segment ici" class="Ldt-Ctrl-button Ldt-Ctrl-SetOut"></div> |
141 <div class="Ldt-Ctrl-InOutBlock"> |
136 <div class="Ldt-Ctrl-spacer"></div> |
142 <div title="Débuter le segment ici" class="Ldt-Ctrl-button Ldt-Ctrl-SetIn"></div> |
137 </div> |
143 <div class="Ldt-Ctrl-spacer"></div> |
138 </div> |
144 <div title="Finir le segment ici" class="Ldt-Ctrl-button Ldt-Ctrl-SetOut"></div> |
139 <div class="Ldt-Ctrl-Right"> |
145 <div class="Ldt-Ctrl-spacer"></div> |
140 <div class="Ldt-Ctrl-spacer"></div> |
146 </div> |
141 <div class="Ldt-Ctrl-Time"> |
147 </div> |
142 <div title="Temps écoulé" class="Ldt-Ctrl-Time-Elapsed">00:00</div> |
148 <div class="Ldt-Ctrl-Right"> |
143 <div class="Ldt-Ctrl-Time-Separator">/</div> |
149 <div class="Ldt-Ctrl-spacer"></div> |
144 <div title="Temps total" class="Ldt-Ctrl-Time-Total">1:03:30</div> |
150 <div class="Ldt-Ctrl-Time"> |
145 </div> |
151 <div title="Temps écoulé" class="Ldt-Ctrl-Time-Elapsed">00:00</div> |
146 <div class="Ldt-Ctrl-spacer"></div> |
152 <div class="Ldt-Ctrl-Time-Separator">/</div> |
147 <div title="Couper le son" class="Ldt-Ctrl-button Ldt-Ctrl-Sound Ldt-Ctrl-Sound-Full"></div> |
153 <div title="Temps total" class="Ldt-Ctrl-Time-Total">1:03:30</div> |
148 </div> |
154 </div> |
149 <div title="Changer le volume" class="Ldt-Ctrl-Volume-Control"> |
155 <div class="Ldt-Ctrl-spacer"></div> |
150 <div class="Ldt-Ctrl-Volume-Bar"></div> |
156 <div title="Couper le son" class="Ldt-Ctrl-button Ldt-Ctrl-Sound Ldt-Ctrl-Sound-Full"></div> |
151 </div> |
157 </div> |
152 </div> |
158 <div title="Changer le volume" class="Ldt-Ctrl-Volume-Control"> |
153 |
159 <div class="Ldt-Ctrl-Volume-Bar"></div> |
154 </div> |
160 </div> |
155 <div class="frise mashup-frise"> |
|
156 <div class="frise-overflow"> |
|
157 <div class="frise-segments"> |
|
158 </div> |
|
159 <div class="frise-indications"> |
|
160 </div> |
|
161 </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> |
161 </div> |
167 |
162 |
168 </div> |
163 </div> |
169 <div class="segment-info mashup-description"> |
164 <div class="frise mashup-frise"> |
170 <img alt="" src="img/popin-triangle.png" class="pointer" style="left: 50%;"> |
165 <div class="frise-overflow"> |
171 <div class="popin-content"> |
166 <div class="frise-segments"> |
172 <h2><span class="annotation-title">Segment sans titre</span></h2> |
167 </div> |
173 <table> |
168 <div class="frise-indications"> |
174 <tbody> |
169 </div> |
175 <tr> |
170 </div> |
176 <th>Extrait de :</th> |
171 <div class="frise-position"></div> |
177 <td><span class="annotation-media-title">Firminy, le maire et l'architecte</span> (<span class="annotation-time annotation-begin">00:00</span> - <span class="annotation-time annotation-end">53:50</span>)</td> |
172 <div class="mashup-tooltip segment-tooltip-wrapper"> |
178 </tr> |
173 <div class="segment-tooltip"></div> |
179 <tr> |
174 <div class="segment-tooltip-tip"></div> |
180 <th>Description :</th> |
175 </div> |
181 <td><span class="annotation-description">Extrait de « Firminy, le maire et l'architecte »</span></td> |
176 |
182 </tr> |
177 </div> |
183 <tr> |
178 <div class="segment-info mashup-description"> |
184 <th>Tags :</th> |
179 <img alt="" src="img/popin-triangle.png" class="pointer" style="left: 50%;"> |
185 <td><span class="annotation-tags">(fonctionnalité à venir)</span></td> |
180 <div class="popin-content"> |
186 </tr> |
181 <h2><span class="annotation-title">Segment sans titre</span></h2> |
187 </tbody> |
182 <table> |
188 </table> |
183 <tbody> |
189 </div> |
184 <tr> |
|
185 <th>Extrait de :</th> |
|
186 <td><span class="annotation-media-title">Firminy, le maire et l'architecte</span> (<span class="annotation-time annotation-begin">00:00</span> - <span class="annotation-time annotation-end">53:50</span>)</td> |
|
187 </tr> |
|
188 <tr> |
|
189 <th>Description :</th> |
|
190 <td><span class="annotation-description">Extrait de « Firminy, le maire et l'architecte »</span></td> |
|
191 </tr> |
|
192 <tr> |
|
193 <th>Tags :</th> |
|
194 <td><span class="annotation-tags">(fonctionnalité à venir)</span></td> |
|
195 </tr> |
|
196 </tbody> |
|
197 </table> |
|
198 </div> |
|
199 </div> |
|
200 </div><!-- bloc-video --> |
|
201 </div><!-- left-content --> |
|
202 |
|
203 <div class="right-content"> |
|
204 <h2>Plus d’informations</h2> |
|
205 <div class="more-info-wrap"> |
|
206 <table class="more-info "> |
|
207 <tbody> |
|
208 <tr class="info-title"> |
|
209 <th>Titre :</th> |
|
210 <td><a href="#">Titre du Hashcut</a></td> |
|
211 </tr> |
|
212 <tr class="info-duration"> |
|
213 <th>Durée :</th> |
|
214 <td></td> |
|
215 </tr> |
|
216 <tr class="info-author"> |
|
217 <th>Auteur : </th> |
|
218 <td><a href="#"></a></td> |
|
219 </tr> |
|
220 <tr class="info-description"> |
|
221 <th>Description : </th> |
|
222 <td></td> |
|
223 </tr> |
|
224 <!-- <tr class="info-tags"> |
|
225 <th>Tags : </th> |
|
226 <td>Mashup, Création, Art</td> |
|
227 </tr> --> |
|
228 </tbody> |
|
229 </table> |
|
230 <a href="#" class="button cloner">Cloner le Hashcut</a> |
190 </div> |
231 </div> |
191 </div><!-- bloc-video --> |
232 <h2>Médias utilisés dans le Hashcut</h2> |
192 </div><!-- left-content --> |
233 <ul class="list-video"> |
193 |
234 |
194 <div class="right-content"> |
235 </ul> |
195 <h2>Plus d’informations</h2> |
236 </div><!-- right-content --> |
196 <div class="more-info-wrap"> |
237 |
197 <table class="more-info "> |
238 |
198 <tbody> |
239 |
199 <tr class="info-title"> |
240 </div><!-- content --> |
200 <th>Titre :</th> |
241 |
201 <td><a href="#">Titre du Hashcut</a></td> |
242 <div class="footer clearfix"> |
202 </tr> |
243 <ul class="links-left"> |
203 <tr class="info-duration"> |
244 <li><a href="#">Mentions légales</a></li> |
204 <th>Durée :</th> |
245 <li><a href="#">Contacts</a></li> |
205 <td></td> |
|
206 </tr> |
|
207 <tr class="info-author"> |
|
208 <th>Auteur : </th> |
|
209 <td><a href="#"></a></td> |
|
210 </tr> |
|
211 <tr class="info-description"> |
|
212 <th>Description : </th> |
|
213 <td></td> |
|
214 </tr> |
|
215 <!-- <tr class="info-tags"> |
|
216 <th>Tags : </th> |
|
217 <td>Mashup, Création, Art</td> |
|
218 </tr> --> |
|
219 </tbody> |
|
220 </table> |
|
221 <a href="#" class="button cloner">Cloner le Hashcut</a> |
|
222 </div> |
|
223 <h2>Médias utilisés dans le Hashcut</h2> |
|
224 <ul class="list-video"> |
|
225 |
|
226 </ul> |
246 </ul> |
227 </div><!-- right-content --> |
247 <ul class="links-right"> |
228 |
248 <li><a title="IRI" href="http://www.iri.centrepompidou.fr/"> <img src="img/logo-iri.png" alt="iri" /></a></li> |
229 |
249 <li><a title="cinecast" href="http://cinecast.fr/"><img src="img/logo-cinecast.png" alt="cinecast" /></a></li> |
230 |
250 <li>© 2012</li> |
231 </div><!-- content --> |
251 </ul> |
232 |
252 </div><!-- footer --> |
233 <div class="footer clearfix"> |
253 </div><!-- wrap --> |
234 <ul class="links-left"> |
254 </div><!-- wrapper --> |
235 <li><a href="#">Mentions légales</a></li> |
|
236 <li><a href="#">Contacts</a></li> |
|
237 </ul> |
|
238 <ul class="links-right"> |
|
239 <li><a title="IRI" href="http://www.iri.centrepompidou.fr/"> <img src="img/logo-iri.png" alt="iri" /></a></li> |
|
240 <li><a title="cinecast" href="http://cinecast.fr/"><img src="img/logo-cinecast.png" alt="cinecast" /></a></li> |
|
241 <li>© 2012</li> |
|
242 </ul> |
|
243 </div><!-- footer --> |
|
244 </div><!-- wrap --> |
|
245 <!-- JavaScript --> |
255 <!-- JavaScript --> |
246 <script type="text/javascript" src="lib/jquery.min.js"></script> |
256 <script type="text/javascript" src="lib/jquery.min.js"></script> |
247 <script type="text/javascript" src="lib/jquery-ui.min.js"></script> |
257 <script type="text/javascript" src="lib/jquery-ui.min.js"></script> |
248 <script type="text/javascript" src="lib/underscore-min.js"></script> |
258 <script type="text/javascript" src="lib/underscore-min.js"></script> |
249 <script type="text/javascript" src="lib/popcorn-complete.min.js"></script> |
259 <script type="text/javascript" src="lib/popcorn-complete.min.js"></script> |