integration/edition.html
changeset 6 547b3ddedf7f
parent 2 78f71aa0a477
child 9 e3d551eda5a6
child 10 34df8e58b6fc
equal deleted inserted replaced
2:78f71aa0a477 6:547b3ddedf7f
     4 	<meta charset="utf-8">
     4 	<meta charset="utf-8">
     5     <title>Aix - Back office > Liste des projets</title>
     5     <title>Aix - Back office > Liste des projets</title>
     6 	<!--[if lt IE 9]>
     6 	<!--[if lt IE 9]>
     7 		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
     7 		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
     8 	<![endif]-->
     8 	<![endif]-->
     9 	<link href="css/bootstrap.min.css" rel="stylesheet">
     9 	<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    10 	<link href="lib/jquery-ui/themes/base/minified/jquery-ui.min.css" rel="stylesheet">
    10 	<link href="lib/jquery-ui/themes/base/minified/jquery-ui.min.css" rel="stylesheet">
    11 	<link href="lib/CLEditor/jquery.cleditor.css" rel="stylesheet">
    11 	<link href="lib/CLEditor/jquery.cleditor.css" rel="stylesheet">
       
    12 	<link href="lib/tag-it/css/jquery.tagit.css" rel="stylesheet">
    12 	<link href="css/style.css" rel="stylesheet">
    13 	<link href="css/style.css" rel="stylesheet">
    13 	
    14 	
    14 </head>
    15 </head>
    15 <body>
    16 <body>
    16 	<div class="wrap">
    17 	<div class="wrap">
    24 						</span>
    25 						</span>
    25 					</a></h1></div>
    26 					</a></h1></div>
    26 					<div class="span9">
    27 					<div class="span9">
    27 						<ul class="breadcrumb nav-bar">
    28 						<ul class="breadcrumb nav-bar">
    28 					    <li>
    29 					    <li>
    29 					    	<a data-type-media="image" data-title="Bibliothèque" class="open-modal" href="modal-bibliotheque.html">
    30 					    	<a href="#">
    30 					    		<i class="icon-file"></i> Projets
    31 					    		<i class="icon-file"></i> Projets
    31 					    	</a> 
    32 					    	</a> 
    32 				    	<li><span class="divider">></span></li>
    33 				    	<li><span class="divider">></span></li>
    33 					    </li>
    34 					    </li>
    34 					    <li class="active"><i class="icon-folder-close-alt"></i>Titre du projet azerty</li>
    35 					    <li class="active"><i class="icon-folder-close-alt"></i>Titre du projet azerty</li>
    54 					</div>
    55 					</div>
    55 				</div>
    56 				</div>
    56 				<div class="row">
    57 				<div class="row">
    57 					<div class="span6">
    58 					<div class="span6">
    58 						<img src="img/460x345.gif" alt="">
    59 						<img src="img/460x345.gif" alt="">
       
    60 						<div class="timeline-annotation-widget">
       
    61 							<div class="annotation" style="left:20%"></div>
       
    62 						</div>
       
    63 <!-- chapter-widget -->
    59 						<div class="chapter-widget">
    64 						<div class="chapter-widget">
    60 							<div class="row">
    65 							<div class="row">
    61 								
    66 								
    62 								<div class="span6 chapitre-cut-wrap">
    67 								<div class="span6 chapitre-cut-wrap">
    63 									<div class="indicateur-chapter"></div>
    68 									<div class="indicateur-chapter"></div>
    68 									
    73 									
    69 									<a href="#" class="btn btn-primary btn-cut-chapter"><i class="icon-flag"></i> Nouveau chapitre</a>
    74 									<a href="#" class="btn btn-primary btn-cut-chapter"><i class="icon-flag"></i> Nouveau chapitre</a>
    70 								</div>
    75 								</div>
    71 							</div>
    76 							</div>
    72 							<div class="chapter-widget-info">
    77 							<div class="chapter-widget-info">
    73 								<form action="#"></form>
    78 								<form action="#" class="form-chapter-edit">
    74 									<div class="row">
    79 									<div class="row">
    75 										<div class="span3 text-right">
    80 										<div class="span3 text-right">
    76 											<input type="text">
    81 											<input type="text">
    77 											<input type="text">
    82 											<input type="text" class="tag-it">
    78 										</div>
    83 										</div>
    79 										<div class="span3">
    84 										<div class="span3">
    80 											<table class="table text-right">
    85 											<table class="table text-right">
    81 												
    86 												
    82 												<thead>
    87 												<thead>
   114 											<th>Durée</th>
   119 											<th>Durée</th>
   115 											<th>Fin</th>
   120 											<th>Fin</th>
   116 											<th>Actions</th>
   121 											<th>Actions</th>
   117 										</tr>
   122 										</tr>
   118 									</thead>
   123 									</thead>
   119 									<tbody>
   124 									<tbody class="list-chapter-rows-wrap">
   120 										<tr id="row-list-chapter-id1">
   125 										<tr id="row-list-chapter-id1">
   121 											<td>Titre d'un chapitre</td>
   126 											<td>Titre d'un chapitre</td>
   122 											<td>Tags, Tags, Tags</td>
   127 											<td>Tags, Tags, Tags</td>
   123 											<td>79:55</td>
   128 											<td>79:55</td>
   124 											<td>79:55</td>
   129 											<td>79:55</td>
   141 							</div>
   146 							</div>
   142 							
   147 							
   143 						</div><!-- /.chapter-widget -->
   148 						</div><!-- /.chapter-widget -->
   144 					</div>
   149 					</div>
   145 					<div class="span6 col-right">
   150 					<div class="span6 col-right">
   146 
   151 <!-- tab -->
   147 						<ul class="nav nav-tabs" id="annotation-tab">
   152 						<ul class="nav nav-tabs" id="annotation-tab">
   148 							<li class="active"><a id="tab-list-annotation" href="#list-annotations"><i class="icon-bookmark"></i> Annotations</a></li>
   153 							<li class="active"><a id="tab-list-annotation" href="#list-annotations"><i class="icon-bookmark"></i> Annotations</a></li>
   149 							<li><a href="#annotation-azerty"><i class="icon-film"></i> All <span class="close-tab">&times;</span></a> </li>
   154 							<li><a href="#annotation-azerty"><i class="icon-film"></i> All <span class="close-tab">&times;</span></a> </li>
   150 						</ul>
   155 						</ul>
       
   156 
   151 						<div class="tab-content">
   157 						<div class="tab-content">
       
   158 <!-- liste annotations -->
   152 							<div class="tab-pane active" id="list-annotations">
   159 							<div class="tab-pane active" id="list-annotations">
   153 								<div class="add-annotation-wrap">
   160 								<div class="add-annotation-wrap">
   154 									<strong><i class="icon-plus"></i> Ajouter :</strong>
   161 									<strong><i class="icon-plus"></i> Ajouter :</strong>
   155 									<a href="#" data-type="video" class="btn open-tab"><i class="icon-film"></i> Vidéo</a>
   162 									<a href="#" data-type="video" class="btn open-tab"><i class="icon-film"></i> Vidéo</a>
   156 									<a href="#" data-type="diaporama" class="btn open-tab"><i class="icon-picture"></i> Diaporama</a>
   163 									<a href="#" data-type="diaporama" class="btn open-tab"><i class="icon-picture"></i> Diaporama</a>
   175 											<td>Vidéo</td>
   182 											<td>Vidéo</td>
   176 											<td>4:26</td>
   183 											<td>4:26</td>
   177 											<td>4:26</td>
   184 											<td>4:26</td>
   178 											<td>4:26</td>
   185 											<td>4:26</td>
   179 											<td>
   186 											<td>
   180 												<a href="#" data-idAnnotation="annotation-123" class="btn btn-edit-annotation" data-type="video">
   187 												<a href="#" data-id="annotation-123" class="btn btn-edit-annotation" data-type="video">
   181 													<i class="icon-pencil "></i></a>
   188 													<i class="icon-pencil"></i></a>
   182 												<a data-title="Annotation XYZ" href="#row-list-annotation-id1" class="btn btn-delete">
   189 												<a data-id="annotation-123" data-type="annotation" data-title="Annotation XYZ" href="#row-list-annotation-id1" class="btn btn-delete">
   183 													<i class="icon-trash delete-annotation"></i>
   190 													<i class="icon-trash delete-annotation"></i>
   184 												</a>
   191 												</a>
   185 											</td>
   192 											</td>
   186 										</tr>
   193 										</tr>
   187 										<tr id="row-list-annotation-id2">
   194 										<tr id="row-list-annotation-id2">
   189 											<td>Diaporama</td>
   196 											<td>Diaporama</td>
   190 											<td>4:26</td>
   197 											<td>4:26</td>
   191 											<td>4:26</td>
   198 											<td>4:26</td>
   192 											<td>4:26</td>
   199 											<td>4:26</td>
   193 											<td>
   200 											<td>
   194 												<a href="#" data-idAnnotation="annotation-456" class="btn btn-edit-annotation" data-type="diaporama">
   201 												<a href="#" data-id="annotation-456" class="btn btn-edit-annotation" data-type="diaporama">
   195 													<i class="icon-pencil "></i></a>
   202 													<i class="icon-pencil "></i></a>
   196 												<a data-title="Annotation XYZ" href="#row-list-annotation-id2" class="btn btn-delete">
   203 												<a data-id="annotation-456" data-type="annotation" data-title="Annotation XYZ" href="#row-list-annotation-id2" class="btn btn-delete">
   197 													<i class="icon-trash delete-annotation"></i>
   204 													<i class="icon-trash delete-annotation"></i>
   198 												</a>
   205 												</a>
   199 											</td>
   206 											</td>
   200 										</tr>
   207 										</tr>
   201 									</tbody>
   208 									</tbody>
   202 								</table>
   209 								</table>
   203 							</div>
   210 							</div>
       
   211 <!-- exemple annotation all -->
   204 							<div class="tab-pane" id="annotation-azerty">
   212 							<div class="tab-pane" id="annotation-azerty">
   205 							
   213 	<!-- head -->
   206 								<form action="#" class="form-info-general-annotation">
   214 								<form action="#" class="form-info-general-annotation">
   207 									<div class="row">
   215 									<div class="row">
   208 										<div class="span3 text-right">
   216 										<div class="span3 text-right">
   209 											<input type="text" placeholder="Titre de l'annotation..">
   217 											<input type="text" placeholder="Titre de l'annotation..">
   210 											<textarea name="" id=""></textarea>
   218 											<textarea name="" id=""></textarea>
   219 														<th class="span1">Fin</th>
   227 														<th class="span1">Fin</th>
   220 													</tr>
   228 													</tr>
   221 												</thead>
   229 												</thead>
   222 												<tbody>
   230 												<tbody>
   223 													<tr>
   231 													<tr>
   224 														<td class="span1">4:20</td>
   232 														<td id="id741-begin" class="span1">4:20</td>
   225 														<td class="span1">4:20</td>
   233 														<td id="id741-duration" class="span1">4:20</td>
   226 														<td class="span1">4:20</td>
   234 														<td id="id741-end" class="span1">4:20</td>
   227 													</tr>
   235 													</tr>
   228 												</tbody>
   236 												</tbody>
   229 											</table>
   237 											</table>
   230 										</div>
   238 										</div>
   231 									</div>
   239 									</div>
   232 									<div class="row">
   240 									<div class="row">
   233 										<div class="span6 text-center">
   241 										<div class="span6 text-center">
   234 											<div id="" class="slider-duration"></div>
   242 											<div data-id="id741" id="id741" class="slider-duration"></div>
   235 										</div>
   243 										</div>
   236 										<div class="span6 text-right">
   244 										<div class="span6 text-right">
   237 											<input type="submit" class="btn btn-primary btn-save-annotation" value="Enregistrer l'annotation">
   245 											<button data-id="id741" type="submit" class="btn btn-primary btn-save-annotation">
       
   246 												<i class="icon-save"></i> Enregistrer l'annotation
       
   247 											</button>
   238 										</div>
   248 										</div>
   239 									</div>
   249 									</div>
   240 								</form>
   250 								</form>
   241 
   251 	<!-- vidéo -->
   242 
       
   243 						
       
   244 							
       
   245 								<div class="edit-annotation-title row">
   252 								<div class="edit-annotation-title row">
   246 									<h3 class="span3"><i class="icon-film"></i> Vidéo</h3>
   253 									<h3 class="span3"><i class="icon-film"></i> Vidéo</h3>
   247 									<span class="span3">
   254 									<span class="span3">
   248 										Ajouter une vidéo 
   255 										Ajouter une vidéo 
   249 										<a data-type-media="video" data-title="Ajouter une vidéo" class="btn btn-success open-modal" href="modal-bibliotheque-video.html"><i class="icon-plus"></i></a>
   256 										<a data-type-media="video" data-id="annotation-azerty" data-title="Ajouter une vidéo" class="btn btn-success open-modal" href="modal-bibliotheque-video.html"><i class="icon-plus"></i></a>
   250 									</span>
   257 									</span>
   251 								</div>
   258 								</div>
   252 								<div class="row">
   259 								<div class="row annotation-video-content">
   253 									<div class="span6">
   260 									<div class="span6">
   254 										<img src="img/460x345.gif" alt="">
   261 										<img src="img/460x345.gif" alt="">
   255 										<table class="table">
   262 										<table class="table">
   256 											<tbody>
   263 											<tbody>
   257 												<tr>
   264 												<tr>
   273 											</tbody>
   280 											</tbody>
   274 										</table>
   281 										</table>
   275 									</div>
   282 									</div>
   276 								</div>
   283 								</div>
   277 							
   284 							
   278 
   285 	<!-- html -->
   279 								<div class="edit-annotation-title row">
   286 								<div class="edit-annotation-title row">
   280 									<h3 class="span3"><i class="icon-link"></i> Html</h3>
   287 									<h3 class="span3"><i class="icon-link"></i> Html</h3>
   281 								</div>
   288 								</div>
   282 								<div class="row edit-annotation-html">
   289 								<div class="row edit-annotation-html">
   283 									<div class="span6">
   290 									<div class="span6">
   289 									</div>
   296 									</div>
   290 									<div class="html-apercu span6"></div>
   297 									<div class="html-apercu span6"></div>
   291 								</div>
   298 								</div>
   292 							
   299 							
   293 
   300 
   294 							
   301 	<!-- text -->
   295 								<div class="edit-annotation-title row">
   302 								<div class="edit-annotation-title row">
   296 									<h3 class="span3"><i class="icon-align-left"></i> Texte</h3>
   303 									<h3 class="span3"><i class="icon-align-left"></i> Texte</h3>
   297 								</div>
   304 								</div>
   298 								<div class="row">
   305 								<div class="row">
   299 									<div class="span6 wysiwyg-wrap">
   306 									<div class="span6 wysiwyg-wrap">
   300 										<textarea class="wysiwyg" name="" id="" cols="30" rows="10"></textarea>
   307 										<textarea class="wysiwyg" name="" id="" cols="30" rows="10"></textarea>
   301 									</div>
   308 									</div>
   302 								</div>
   309 								</div>
   303 
   310 	<!-- diaporama -->
   304 						
   311 						
   305 								<div class="edit-annotation-title row">
   312 								<div class="edit-annotation-title row">
   306 									<h3 class="span3"><i class="icon-picture"></i> Diaporama</h3>
   313 									<h3 class="span3"><i class="icon-picture"></i> Diaporama</h3>
   307 									<span class="span3">
   314 									<span class="span3">
   308 										Ajouter une image 
   315 										Ajouter une image 
   318 											    <button type="button" class="btn btn-primary active">Auto</button>
   325 											    <button type="button" class="btn btn-primary active">Auto</button>
   319 										    </div>	
   326 										    </div>	
   320 										</div>
   327 										</div>
   321 										<div class="span3">
   328 										<div class="span3">
   322 											<label for="">Durée image : </label>
   329 											<label for="">Durée image : </label>
   323 											<input class="span1 number-spin" type="text" value="1"> sec
   330 											<input pattern="[0-9]*" class="span1 number-spin" type="text" value="1"> sec
   324 										</div>
   331 										</div>
   325 									</form>
   332 									</form>
   326 								</div>
   333 								</div>
   327 								<div class="row">
   334 								<div class="row">
   328 									<div class="span6">
   335 									<div class="span6">
   390 											</tbody>
   397 											</tbody>
   391 										</table>
   398 										</table>
   392 									</div>
   399 									</div>
   393 								</div>
   400 								</div>
   394 						
   401 						
   395 								<!---->
   402 							</div><!-- /exemple annotation all -->
   396 								<!-- /.edit-annotation-diaporama -->
   403 
   397 
       
   398 
       
   399 							</div>
       
   400 						</div><!-- /.tab-content -->
   404 						</div><!-- /.tab-content -->
   401 
       
   402 					</div><!-- /.col-right -->
   405 					</div><!-- /.col-right -->
   403 				</div>
   406 				</div>
   404 			</div><!-- /.container -->
   407 			</div><!-- /.container -->
   405 		</section>
   408 		</section>
   406 		<footer></footer>
   409 		<footer></footer>
   427 			<button class="btn" data-dismiss="modal" aria-hidden="true">Annuler</button>
   430 			<button class="btn" data-dismiss="modal" aria-hidden="true">Annuler</button>
   428 			<button id="btn-delete-modal" class="btn btn-primary">Supprimer</button>
   431 			<button id="btn-delete-modal" class="btn btn-primary">Supprimer</button>
   429 		</div>
   432 		</div>
   430 	</div>
   433 	</div>
   431 
   434 
   432 	
   435 	<script src="lib/jquery-1.9.1.min.js"></script>
   433 
   436 	<script src="lib/jquery-migrate-1.1.1.js"></script>
   434 	<script src="js/jquery-1.9.1.min.js"></script>
       
   435 	<script src="js/jquery-migrate-1.1.1.js"></script>
       
   436 	<script src="lib/jquery-ui/ui/minified/jquery-ui.min.js"></script>
   437 	<script src="lib/jquery-ui/ui/minified/jquery-ui.min.js"></script>
   437 	<script src="js/bootstrap.js"></script>
   438 	<script src="lib/bootstrap/js/bootstrap.min.js"></script>
   438 	<script src="js/ZeroClipboard.min.js"></script>
   439 	<script src="lib/spin/jquery.spin-1.0.2.js"></script>
   439 	<script src="js/jquery.spin-1.0.2.js"></script>
   440 	<script src="lib/cleditor/jquery.cleditor.min.js"></script>
   440 	<script src="lib/CLEditor/jquery.cleditor.min.js"></script>
   441 	<script src="lib/tag-it/js/tag-it.min.js"></script>
   441 	<script src="js/mustache.js"></script>
   442 	<script src="lib/mustache.js"></script>
   442 	<script src="js/main.js"></script>
   443 
       
   444 	<script src="js/edition.js"></script>
   443 </body>
   445 </body>
   444 </html>
   446 </html>