|
224
|
1 |
<!doctype html> |
|
|
2 |
<html lang="fr"> |
|
|
3 |
<head> |
|
|
4 |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
|
|
5 |
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> |
|
|
6 |
<title>Plateforme LDT : Player</title> |
|
|
7 |
<link rel="stylesheet" href="css/ldt-commun.css" type="text/css" /> |
|
|
8 |
<link rel="stylesheet" href="css/ldt-player.css" type="text/css" /> |
|
|
9 |
</head> |
|
|
10 |
<body> |
|
|
11 |
|
|
|
12 |
<div id="general_container"> |
|
|
13 |
|
|
|
14 |
<!-- BARRE DE TITRE COMMUNE --> |
|
|
15 |
|
|
|
16 |
<ul class="floatlist" id="title_bar"> |
|
|
17 |
<li id="li_h1"> |
|
|
18 |
<h1><a href="#"><b>Lignes</b> de temps</a></h1> |
|
|
19 |
</li> |
|
|
20 |
<li id="li_search"> |
|
|
21 |
<form id="form_search"> |
|
|
22 |
<input id="search_text" name="q" value="" /> |
|
|
23 |
<input id="search_submit" type="submit" value="Rechercher" /> |
|
|
24 |
</form> |
|
|
25 |
<li id="li_annotation"> |
|
|
26 |
<div class="fl"> |
|
|
27 |
<a href="#"><img src="img/annot_icon.png" id="annot_icon" /></a> |
|
|
28 |
</div> |
|
|
29 |
<div class="fl"> |
|
|
30 |
<a href="#">Annoter</a> |
|
|
31 |
</div> |
|
|
32 |
</li> |
|
|
33 |
<li id="li_connexion"> |
|
|
34 |
<a href="#">Connexion</a> |
|
|
35 |
</li> |
|
|
36 |
</ul> |
|
|
37 |
|
|
|
38 |
<!-- COLONNE DE GAUCHE --> |
|
|
39 |
|
|
|
40 |
<div id="player_col_g"> |
|
|
41 |
<ul class="floatlist" id="top_media"> |
|
|
42 |
<li id="title_media"><h2>Nom du média : <span class="pink font_16">Titre de l'annotation</span></h2></li> |
|
|
43 |
<li id="media_share"> |
|
|
44 |
<ul class="floatlist"> |
|
|
45 |
<li class="share_li"> |
|
|
46 |
<a href="https://twitter.com/share" class="twitter-share-button" data-count="none">Twitter</a> |
|
348
|
47 |
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script> |
|
224
|
48 |
</li> |
|
|
49 |
<li class="share_li" style="padding-top: 3px"> |
|
|
50 |
<a name="fb_share">Partager</a> |
|
|
51 |
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> |
|
|
52 |
</li> |
|
|
53 |
<li class="share_li"> |
|
|
54 |
<g:plusone size="medium" annotation="none"></g:plusone> |
|
|
55 |
<script type="text/javascript"> |
|
|
56 |
(function() { |
|
|
57 |
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; |
|
|
58 |
po.src = 'https://apis.google.com/js/plusone.js'; |
|
|
59 |
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); |
|
|
60 |
})(); |
|
|
61 |
</script> |
|
|
62 |
</li> |
|
|
63 |
</ul> |
|
|
64 |
</li> |
|
|
65 |
</ul> |
|
|
66 |
<img src="img/placeholder.png" width="550" height="420" /> |
|
|
67 |
<div id="annotation_bas"> |
|
|
68 |
<div id="ann_fleche_cont"> |
|
|
69 |
<div id="ann_fleche" style="left: 100px;"> |
|
|
70 |
<div id="ann_fl_left"></div> |
|
|
71 |
<div id="ann_fl_right"></div> |
|
|
72 |
</div> |
|
|
73 |
</div> |
|
|
74 |
<h3>Titre d'annotation <span class="pink">(00:12:12 - 00:14:03)</span></h3> |
|
|
75 |
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam volu ptatem quia voluptas sit aspernatur aut?</p> |
|
|
76 |
<h5>Mots-clés</h5> |
|
|
77 |
<p class="b fl">: <a href="#" class="pink under">lorem</a> , <a href="#" class="pink under">ipsum</a> , <a href="#" class="pink under">quia</a> , <a href="#" class="pink under">dolor</a> |
|
|
78 |
<h5>Groupes</h5> |
|
|
79 |
<p class="b fl">: <a href="#" class="pink under">IRI</a> , <a href="#" class="pink under">Ars Industrialis</a> , <a href="#" class="pink under">RSLN</a> |
|
|
80 |
</div> |
|
|
81 |
</div> |
|
|
82 |
|
|
|
83 |
<div id="player_col_d"> |
|
|
84 |
<div class="li_h2"> |
|
|
85 |
<h2>Créer une annotation</h2> |
|
|
86 |
</div> |
|
|
87 |
<form id="ajout_annot"> |
|
|
88 |
<input name="ajan_titre" value="Titre"/> |
|
|
89 |
<textarea name="ajan_texte">Cliquez ici pour rédiger une annotation sur ce segment</textarea> |
|
|
90 |
<input name="ajan_tags" value="Entrez ici vos mots-clés séparés par des virgules" /> |
|
|
91 |
<input type="submit" value="Envoyer" /> |
|
|
92 |
</form> |
|
|
93 |
|
|
|
94 |
<div class="li_h2"> |
|
|
95 |
<h2>Toutes les annotations sur ce média</h2> |
|
|
96 |
</div> |
|
|
97 |
|
|
|
98 |
<ul class="floatlist" id="annot_media"> |
|
|
99 |
<li> |
|
|
100 |
<img class="fl img_media" src="img/placeholder_16_9.jpg" width="80" height="45" /> |
|
|
101 |
<div class="fl une_annot"> |
|
|
102 |
<h5><a class="blue">Lorem Ipsum Dolor</a></h5> |
|
|
103 |
<p class="fr pink font_11">00:12:12 - 00:15:13</p> |
|
|
104 |
<p class="clear font_11">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</p> |
|
|
105 |
</div> |
|
|
106 |
</li> |
|
|
107 |
<li> |
|
|
108 |
<img class="fl img_media" src="img/placeholder_16_9.jpg" width="80" height="45" /> |
|
|
109 |
<div class="fl une_annot"> |
|
|
110 |
<h5><a class="blue">Lorem Ipsum Dolor</a></h5> |
|
|
111 |
<p class="fr pink font_11">00:12:12 - 00:15:13</p> |
|
|
112 |
<p class="clear font_11">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</p> |
|
|
113 |
</div> |
|
|
114 |
</li> |
|
|
115 |
<li> |
|
|
116 |
<img class="fl img_media" src="img/placeholder_16_9.jpg" width="80" height="45" /> |
|
|
117 |
<div class="fl une_annot"> |
|
|
118 |
<h5><a class="blue">Lorem Ipsum Dolor</a></h5> |
|
|
119 |
<p class="fr pink font_11">00:12:12 - 00:15:13</p> |
|
|
120 |
<p class="clear font_11">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</p> |
|
|
121 |
</div> |
|
|
122 |
</li> |
|
|
123 |
<li class="selected"> |
|
|
124 |
<img class="fl img_media" src="img/placeholder_16_9.jpg" width="80" height="45" /> |
|
|
125 |
<div class="fl une_annot"> |
|
|
126 |
<h5><a class="blue">Lorem Ipsum Dolor</a></h5> |
|
|
127 |
<p class="fr pink font_11">00:12:12 - 00:15:13</p> |
|
|
128 |
<p class="clear font_11">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</p> |
|
|
129 |
</div> |
|
|
130 |
</li> |
|
|
131 |
<li> |
|
|
132 |
<img class="fl img_media" src="img/placeholder_16_9.jpg" width="80" height="45" /> |
|
|
133 |
<div class="fl une_annot"> |
|
|
134 |
<h5><a class="blue">Lorem Ipsum Dolor</a></h5> |
|
|
135 |
<p class="fr pink font_11">00:12:12 - 00:15:13</p> |
|
|
136 |
<p class="clear font_11">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</p> |
|
|
137 |
</div> |
|
|
138 |
</li> |
|
|
139 |
<li> |
|
|
140 |
<img class="fl img_media" src="img/placeholder_16_9.jpg" width="80" height="45" /> |
|
|
141 |
<div class="fl une_annot"> |
|
|
142 |
<h5><a class="blue">Lorem Ipsum Dolor</a></h5> |
|
|
143 |
<p class="fr pink font_11">00:12:12 - 00:15:13</p> |
|
|
144 |
<p class="clear font_11">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</p> |
|
|
145 |
</div> |
|
|
146 |
</li> |
|
|
147 |
<li> |
|
|
148 |
<img class="fl img_media" src="img/placeholder_16_9.jpg" width="80" height="45" /> |
|
|
149 |
<div class="fl une_annot"> |
|
|
150 |
<h5><a class="blue">Lorem Ipsum Dolor</a></h5> |
|
|
151 |
<p class="fr pink font_11">00:12:12 - 00:15:13</p> |
|
|
152 |
<p class="clear font_11">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</p> |
|
|
153 |
</div> |
|
|
154 |
</li> |
|
|
155 |
<li> |
|
|
156 |
<img class="fl img_media" src="img/placeholder_16_9.jpg" width="80" height="45" /> |
|
|
157 |
<div class="fl une_annot"> |
|
|
158 |
<h5><a class="blue">Lorem Ipsum Dolor</a></h5> |
|
|
159 |
<p class="fr pink font_11">00:12:12 - 00:15:13</p> |
|
|
160 |
<p class="clear font_11">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</p> |
|
|
161 |
</div> |
|
|
162 |
</li> |
|
|
163 |
<li> |
|
|
164 |
<img class="fl img_media" src="img/placeholder_16_9.jpg" width="80" height="45" /> |
|
|
165 |
<div class="fl une_annot"> |
|
|
166 |
<h5><a class="blue">Lorem Ipsum Dolor</a></h5> |
|
|
167 |
<p class="fr pink font_11">00:12:12 - 00:15:13</p> |
|
|
168 |
<p class="clear font_11">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</p> |
|
|
169 |
</div> |
|
|
170 |
</li> |
|
|
171 |
<li> |
|
|
172 |
<img class="fl img_media" src="img/placeholder_16_9.jpg" width="80" height="45" /> |
|
|
173 |
<div class="fl une_annot"> |
|
|
174 |
<h5><a class="blue">Lorem Ipsum Dolor</a></h5> |
|
|
175 |
<p class="fr pink font_11">00:12:12 - 00:15:13</p> |
|
|
176 |
<p class="clear font_11">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</p> |
|
|
177 |
</div> |
|
|
178 |
</li> |
|
|
179 |
<li> |
|
|
180 |
<img class="fl img_media" src="img/placeholder_16_9.jpg" width="80" height="45" /> |
|
|
181 |
<div class="fl une_annot"> |
|
|
182 |
<h5><a class="blue">Lorem Ipsum Dolor</a></h5> |
|
|
183 |
<p class="fr pink font_11">00:12:12 - 00:15:13</p> |
|
|
184 |
<p class="clear font_11">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</p> |
|
|
185 |
</div> |
|
|
186 |
</li> |
|
|
187 |
<li> |
|
|
188 |
<img class="fl img_media" src="img/placeholder_16_9.jpg" width="80" height="45" /> |
|
|
189 |
<div class="fl une_annot"> |
|
|
190 |
<h5><a class="blue">Lorem Ipsum Dolor</a></h5> |
|
|
191 |
<p class="fr pink font_11">00:12:12 - 00:15:13</p> |
|
|
192 |
<p class="clear font_11">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</p> |
|
|
193 |
</div> |
|
|
194 |
</li> |
|
|
195 |
<li> |
|
|
196 |
<img class="fl img_media" src="img/placeholder_16_9.jpg" width="80" height="45" /> |
|
|
197 |
<div class="fl une_annot"> |
|
|
198 |
<h5><a class="blue">Lorem Ipsum Dolor</a></h5> |
|
|
199 |
<p class="fr pink font_11">00:12:12 - 00:15:13</p> |
|
|
200 |
<p class="clear font_11">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</p> |
|
|
201 |
</div> |
|
|
202 |
</li> |
|
|
203 |
</ul> |
|
|
204 |
</div> |
|
|
205 |
|
|
|
206 |
<!-- FOOTER COMMUN --> |
|
|
207 |
|
|
|
208 |
<ul id="footer"> |
|
|
209 |
<li> |
|
|
210 |
<a href="#">V.01.15</a> |
|
|
211 |
</li> |
|
|
212 |
<li> |
|
|
213 |
<a href="#"> © 2011 IRI</a> |
|
|
214 |
</li> |
|
|
215 |
<li> |
|
|
216 |
<a href="#">Contact</a> |
|
|
217 |
</li> |
|
|
218 |
<li> |
|
|
219 |
<a href="#">A propos</a> |
|
|
220 |
</li> |
|
|
221 |
</ul> |
|
|
222 |
<div class="clear"></div> |
|
|
223 |
</div> |
|
|
224 |
|
|
|
225 |
</body> |
|
|
226 |
</html> |