integration/edition.html
changeset 2 78f71aa0a477
parent 1 b95aebb070b5
child 6 547b3ddedf7f
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/integration/edition.html	Tue May 14 18:19:04 2013 +0200
@@ -0,0 +1,444 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+    <title>Aix - Back office > Liste des projets</title>
+	<!--[if lt IE 9]>
+		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+	<![endif]-->
+	<link href="css/bootstrap.min.css" rel="stylesheet">
+	<link href="lib/jquery-ui/themes/base/minified/jquery-ui.min.css" rel="stylesheet">
+	<link href="lib/CLEditor/jquery.cleditor.css" rel="stylesheet">
+	<link href="css/style.css" rel="stylesheet">
+	
+</head>
+<body>
+	<div class="wrap">
+		<header>
+			<div class="container">
+				<div class="row">
+					<div class="span3"><h1><a class="clearfix" href="">
+						<img src="img/60x40.gif" alt="">
+						<span>
+							Doc<br/>Cliquable
+						</span>
+					</a></h1></div>
+					<div class="span9">
+						<ul class="breadcrumb nav-bar">
+					    <li>
+					    	<a data-type-media="image" data-title="Bibliothèque" class="open-modal" href="modal-bibliotheque.html">
+					    		<i class="icon-file"></i> Projets
+					    	</a> 
+				    	<li><span class="divider">></span></li>
+					    </li>
+					    <li class="active"><i class="icon-folder-close-alt"></i>Titre du projet azerty</li>
+					    <li><span class="divider">/</span></li>
+					    <a href=""><li class="active"><i class="icon-folder-close-alt"></i>Ressources</li></a>
+					    </ul>
+					</div>
+				</div>
+			</div>
+		</header>
+		<section>
+			<div class="container">
+				<div class="row project-head">
+					<div class="span7">
+						<div class="project-title-editor">
+							<i class="icon-folder-close-alt"></i> 
+							<a href="#" class="_popover" data-toggle="tooltip" data-placement="bottom" title="Modifier le du projet"><span class="project-title">Titre du projet</span> <i class="icon-pencil"></i></a> 
+						</div>
+					</div>
+					<div class="span5 text-right project-action">
+						<a href="" class="btn"><i class="icon-eye-open"></i> Voir aperçu</a>
+						<a href="" class="btn btn-success"><i class="icon-save"></i> Sauvegarder le projet</a>
+					</div>
+				</div>
+				<div class="row">
+					<div class="span6">
+						<img src="img/460x345.gif" alt="">
+						<div class="chapter-widget">
+							<div class="row">
+								
+								<div class="span6 chapitre-cut-wrap">
+									<div class="indicateur-chapter"></div>
+									<ul class="chapter-segments">
+										<li>chapitre 1</li>
+										<li>chapitre azerty</li>
+									</ul>
+									
+									<a href="#" class="btn btn-primary btn-cut-chapter"><i class="icon-flag"></i> Nouveau chapitre</a>
+								</div>
+							</div>
+							<div class="chapter-widget-info">
+								<form action="#"></form>
+									<div class="row">
+										<div class="span3 text-right">
+											<input type="text">
+											<input type="text">
+										</div>
+										<div class="span3">
+											<table class="table text-right">
+												
+												<thead>
+													<tr>
+														<th class="span1">Début</th>
+														<th class="span1">Durée</th>
+														<th class="span1">Fin</th>
+													</tr>
+												</thead>
+												<tbody>
+													<tr>
+														<td class="span1">4:20</td>
+														<td class="span1">4:20</td>
+														<td class="span1">4:20</td>
+													</tr>
+												</tbody>
+											</table>
+										</div>
+									</div>
+									<div class="row">
+										<div class="span6 text-center">
+											<textarea class="" name="" id=""></textarea>
+										</div>
+									</div>
+								</form>
+							</div>
+							<div class="list-chapter-wrap">
+								<h4><i class="icon-flag"></i> Liste des chapitres</h4>
+								<table class="table">
+									<thead>
+										<tr>
+											<th>Titre</th>
+											<th>Tags</th>
+											<th>Début</th>
+											<th>Durée</th>
+											<th>Fin</th>
+											<th>Actions</th>
+										</tr>
+									</thead>
+									<tbody>
+										<tr id="row-list-chapter-id1">
+											<td>Titre d'un chapitre</td>
+											<td>Tags, Tags, Tags</td>
+											<td>79:55</td>
+											<td>79:55</td>
+											<td>79:55</td>
+											<td>
+												<table>
+													<tr>
+														<td>
+															<a href="" class="btn edit-chapter"><i class="icon-pencil"></i></a>
+														</td>
+														<td>
+															<a data-title="Chapitre 1" href="#row-list-chapter-id1" class="btn btn-delete"><i class="icon-trash delete-annotation"></i></a>
+														</td>
+													</tr>
+												</table>
+											</td>
+										</tr>
+									</tbody>
+								</table>
+							</div>
+							
+						</div><!-- /.chapter-widget -->
+					</div>
+					<div class="span6 col-right">
+
+						<ul class="nav nav-tabs" id="annotation-tab">
+							<li class="active"><a id="tab-list-annotation" href="#list-annotations"><i class="icon-bookmark"></i> Annotations</a></li>
+							<li><a href="#annotation-azerty"><i class="icon-film"></i> All <span class="close-tab">&times;</span></a> </li>
+						</ul>
+						<div class="tab-content">
+							<div class="tab-pane active" id="list-annotations">
+								<div class="add-annotation-wrap">
+									<strong><i class="icon-plus"></i> Ajouter :</strong>
+									<a href="#" data-type="video" class="btn open-tab"><i class="icon-film"></i> Vidéo</a>
+									<a href="#" data-type="diaporama" class="btn open-tab"><i class="icon-picture"></i> Diaporama</a>
+									<a href="#" data-type="text" class="btn open-tab"><i class="icon-align-left"></i> Texte</a>
+									<a href="#" data-type="html" class="btn open-tab"><i class="icon-link"></i> Html</a>
+								</div>
+								<h4>Liste des annotations</h4>
+								<table class="table table-striped">
+									<thead>
+										<tr>
+											<th>Titre</th>
+											<th>Type</th>
+											<th>Début</th>
+											<th>Durée</th>
+											<th>Fin</th>
+											<th>Actions</th>
+										</tr>
+									</thead>
+									<tbody>
+										<tr id="row-list-annotation-id1">
+											<td>Titre annotation</td>
+											<td>Vidéo</td>
+											<td>4:26</td>
+											<td>4:26</td>
+											<td>4:26</td>
+											<td>
+												<a href="#" data-idAnnotation="annotation-123" class="btn btn-edit-annotation" data-type="video">
+													<i class="icon-pencil "></i></a>
+												<a data-title="Annotation XYZ" href="#row-list-annotation-id1" class="btn btn-delete">
+													<i class="icon-trash delete-annotation"></i>
+												</a>
+											</td>
+										</tr>
+										<tr id="row-list-annotation-id2">
+											<td>Titre annotation</td>
+											<td>Diaporama</td>
+											<td>4:26</td>
+											<td>4:26</td>
+											<td>4:26</td>
+											<td>
+												<a href="#" data-idAnnotation="annotation-456" class="btn btn-edit-annotation" data-type="diaporama">
+													<i class="icon-pencil "></i></a>
+												<a data-title="Annotation XYZ" href="#row-list-annotation-id2" class="btn btn-delete">
+													<i class="icon-trash delete-annotation"></i>
+												</a>
+											</td>
+										</tr>
+									</tbody>
+								</table>
+							</div>
+							<div class="tab-pane" id="annotation-azerty">
+							
+								<form action="#" class="form-info-general-annotation">
+									<div class="row">
+										<div class="span3 text-right">
+											<input type="text" placeholder="Titre de l'annotation..">
+											<textarea name="" id=""></textarea>
+										</div>
+										<div class="span3">
+											<input type="text" placeholder="Titre de l'annotation..">
+											<table class="table text-right">
+												<thead>
+													<tr>
+														<th class="span1">Début</th>
+														<th class="span1">Durée</th>
+														<th class="span1">Fin</th>
+													</tr>
+												</thead>
+												<tbody>
+													<tr>
+														<td class="span1">4:20</td>
+														<td class="span1">4:20</td>
+														<td class="span1">4:20</td>
+													</tr>
+												</tbody>
+											</table>
+										</div>
+									</div>
+									<div class="row">
+										<div class="span6 text-center">
+											<div id="" class="slider-duration"></div>
+										</div>
+										<div class="span6 text-right">
+											<input type="submit" class="btn btn-primary btn-save-annotation" value="Enregistrer l'annotation">
+										</div>
+									</div>
+								</form>
+
+
+						
+							
+								<div class="edit-annotation-title row">
+									<h3 class="span3"><i class="icon-film"></i> Vidéo</h3>
+									<span class="span3">
+										Ajouter une vidéo 
+										<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>
+									</span>
+								</div>
+								<div class="row">
+									<div class="span6">
+										<img src="img/460x345.gif" alt="">
+										<table class="table">
+											<tbody>
+												<tr>
+													<th>Titre</th>
+													<td>Titre de la vidéo Azerty</td>
+												</tr>
+												<tr>
+													<th>Date</th>
+													<td>14 / 05 / 2016</td>
+												</tr>
+												<tr>
+													<th>Durée</th>
+													<td>25 m 35 s</td>
+												</tr>
+												<tr>
+													<th>Description</th>
+													<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem iste blanditiis ducimus sint nemo aspernatur rem hic facere culpa dolore quis itaque magni voluptates aliquid veritatis non harum quo libero.</td>
+												</tr>
+											</tbody>
+										</table>
+									</div>
+								</div>
+							
+
+								<div class="edit-annotation-title row">
+									<h3 class="span3"><i class="icon-link"></i> Html</h3>
+								</div>
+								<div class="row edit-annotation-html">
+									<div class="span6">
+										<textarea class="" name="" id="" cols="30" rows="10"></textarea>
+										
+									</div>
+									<div class="span6 text-right">
+										<a href="#" class="btn btn-html-apercu"><i class="icon-eye-open"></i> Aperçu</a>
+									</div>
+									<div class="html-apercu span6"></div>
+								</div>
+							
+
+							
+								<div class="edit-annotation-title row">
+									<h3 class="span3"><i class="icon-align-left"></i> Texte</h3>
+								</div>
+								<div class="row">
+									<div class="span6 wysiwyg-wrap">
+										<textarea class="wysiwyg" name="" id="" cols="30" rows="10"></textarea>
+									</div>
+								</div>
+
+						
+								<div class="edit-annotation-title row">
+									<h3 class="span3"><i class="icon-picture"></i> Diaporama</h3>
+									<span class="span3">
+										Ajouter une image 
+										<a data-type-media="image" data-diaporama="diaporama-id1" data-title="Ajouter une image" class="btn btn-success open-modal" href="modal-bibliotheque-image.html"><i class="icon-plus"></i></a>
+									</span>
+								</div>
+								<div class="row config-diaporama">
+									<form action="">
+										<div class="span3">
+											<label for="">Diaporama :</label>
+										    <div class="btn-group" data-toggle="buttons-radio">
+											    <button type="button" class="btn btn-primary">Manuel</button>
+											    <button type="button" class="btn btn-primary active">Auto</button>
+										    </div>	
+										</div>
+										<div class="span3">
+											<label for="">Durée image : </label>
+											<input class="span1 number-spin" type="text" value="1"> sec
+										</div>
+									</form>
+								</div>
+								<div class="row">
+									<div class="span6">
+										<table class="table">
+											<thead>
+												<tr>
+													<th>Aperçu</th>
+													<th>Titre</th>
+													<th>Description</th>
+													<th>Actions</th>
+												</tr>
+											</thead>
+											<tbody id="diaporama-id1" class="list-image-diaporama ui-sortable">
+												<tr id="rid-id1" class="row-image-diaporama">
+													<td><img src="img/60x60.gif" alt=""> </td>
+													<td>Titre annotation 1</td>
+													<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis aliquid non placeat consequuntur fugit minima.</td>
+													<td>
+														<table>
+															<tr>
+																<td><a data-type-media="image" data-title="Modifier une image" class="btn open-modal" href="modal-image.html"><i class="icon-pencil"></i></a></td>
+																<td><a data-title="une image" href="#rid-id1" class="btn btn-delete"><i class="icon-trash"></i></a></td>
+															</tr>
+															<tr>
+																<td><a href="" class="btn btn-sort down"><i class="icon-angle-down"></i></a></td>
+																<td><a href="" class="btn btn-sort up"><i class="icon-angle-up"></i></a></td>
+															</tr>
+														</table>
+													</td>
+												</tr>
+												<tr id="rid-id2" class="row-image-diaporama">
+													<td><img src="img/60x60.gif" alt=""> </td>
+													<td>Titre annotation 2</td>
+													<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis aliquid non placeat consequuntur fugit minima.</td>
+													<td>
+														<table>
+															<tr>
+																<td><a href="" class="btn"><i class="icon-pencil"></i></a></td>
+																<td><a href="" class="btn"><i class="icon-trash"></i></a></td>
+															</tr>
+															<tr>
+																<td><a href="" class="btn btn-sort down"><i class="icon-angle-down"></i></a></td>
+																<td><a href="" class="btn btn-sort up"><i class="icon-angle-up"></i></a></td>
+															</tr>
+														</table>
+													</td>
+												</tr>
+												<tr id="rid-id3" class="row-image-diaporama">
+													<td><img src="img/60x60.gif" alt=""> </td>
+													<td>Titre annotation 3</td>
+													<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis aliquid non placeat consequuntur fugit minima.</td>
+													<td>
+														<table>
+															<tr>
+																<td><a href="" class="btn"><i class="icon-pencil"></i></a></td>
+																<td><a href="" class="btn"><i class="icon-trash"></i></a></td>
+															</tr>
+															<tr>
+																<td><a href="" class="btn btn-sort down"><i class="icon-angle-down"></i></a></td>
+																<td><a href="" class="btn btn-sort up"><i class="icon-angle-up"></i></a></td>
+															</tr>
+														</table>
+													</td>
+												</tr>
+											</tbody>
+										</table>
+									</div>
+								</div>
+						
+								<!---->
+								<!-- /.edit-annotation-diaporama -->
+
+
+							</div>
+						</div><!-- /.tab-content -->
+
+					</div><!-- /.col-right -->
+				</div>
+			</div><!-- /.container -->
+		</section>
+		<footer></footer>
+	</div>
+
+<!-- modal -->
+	<div id="modal-template" class="modal hide fade popup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+		<div class="modal-header">
+			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+			<h3></h3>
+		</div>
+		<div class="modal-body">
+
+		</div>
+	</div>
+
+	<div id="modal-confirm" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+		<div class="modal-header">
+		<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+			<h3><i class="icon-warning-sign"></i> Confirmation de la suppression</h3>
+		</div>
+		<div class="modal-body"></div>
+		<div class="modal-footer">
+			<button class="btn" data-dismiss="modal" aria-hidden="true">Annuler</button>
+			<button id="btn-delete-modal" class="btn btn-primary">Supprimer</button>
+		</div>
+	</div>
+
+	
+
+	<script src="js/jquery-1.9.1.min.js"></script>
+	<script src="js/jquery-migrate-1.1.1.js"></script>
+	<script src="lib/jquery-ui/ui/minified/jquery-ui.min.js"></script>
+	<script src="js/bootstrap.js"></script>
+	<script src="js/ZeroClipboard.min.js"></script>
+	<script src="js/jquery.spin-1.0.2.js"></script>
+	<script src="lib/CLEditor/jquery.cleditor.min.js"></script>
+	<script src="js/mustache.js"></script>
+	<script src="js/main.js"></script>
+</body>
+</html>
\ No newline at end of file