<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Edition</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="css/edition.css" />
<link rel="stylesheet" href="lib/jquery-ui.css">
</head>
<body>
<div class="wrap">
<div class="wrap-header">
<a title="Bibliothèque Publique d'Information" href="#"><img src="img/pompidou-logo.png" alt="Bibliothèque centre Pompidou" /></a>
</div>
<div class="header">
<!-- popin header -->
<div class="popin update-title" id="update-title">
<img class="pointer" src="img/popin-triangle.png" alt="" />
<div class="popin-content">
<form class="clearfix" action="#" method="">
<div class="form-left">
<p class="titre-wrap">
<label for="titre-video">Titre :</label>
<input type="text" id="titre-video" name="" value="Mon Hashcut" />
</p>
<p>
<label for="tags-video">Tags :</label>
<input type="text" id="tags-video" name="" value="Lune, Espace, Lune" />
</p>
</div>
<p class="form-right">
<label for="description-video">Description :</label>
<textarea name="" id="description-video" cols="30" rows="10"></textarea>
</p>
</form>
</div>
</div><!-- popin update-title -->
<div class="popin user info" id="user">
<img class="pointer" src="img/popin-triangle.png" alt="" />
<div class="popin-content">
<h2>Mashup75</h2>
<h3>mash@cinecast.fr</h3>
<a href="#" class="nb-hashcut">12 Hashcuts</a>
<a href="#" class="change-account">Changer de compte</a>
</div>
</div><!-- popin user info-->
<div class="popin user signup" id="user">
<img class="pointer" src="img/popin-triangle.png" alt="" />
<div class="popin-content">
<h2>Créer un compte :</h2>
<form action="#">
<p>
<label for="signup-pseudo">Pseudonyme : </label>
<input type="text" id="signup-pseudo" name="" />
</p>
<p >
<label for="signup-email">Email : </label>
<input type="text" id="signup-email" name="" />
</p>
<p >
<label for="signup-password">Mot de passe : </label>
<input type="password" id="signup-password" name="" />
</p>
<p>
<label for="signup-password">Confirmer le mot de passe : </label>
<input type="password" id="signup-password" name="" />
</p>
<p>
<input type="submit" value="Créer le compte">
</p>
</form>
</div>
</div><!-- popin user signup-->
<div class="popin user login" id="user">
<img class="pointer" src="img/popin-triangle.png" alt="" />
<div class="popin-content">
<h2>Connexion :</h2>
<form action="#">
<p>
<label for="signup-pseudo">E-mail : </label>
<input type="text" id="signup-pseudo" name="" />
</p>
<p >
<label for="signup-email">Mot de passe : </label>
<input type="password" id="signup-email" name="" />
</p>
<p>
<input type="submit" value="Se connecter">
</p>
<p>
<a class="signup-button" href="#">Créer un compte</a>
</p>
</form>
</div>
</div><!-- popin user login-->
<h1><a title="Hashcut - Le Mashup cliquable" class="clearfix" href="#">
<img src="img/hashcut-logo.png" alt="Hashcut" />
<span>Le Mashup<br />Cliquable</span>
</a></h1>
<div class="title-video-wrap">
<a class="open-popin" href="#update-title">Hashcut sans titre</a>
<p class="time-length">Durée: <span>02:24</span></p>
</div>
<div class="profil-wrap">
<a href="#" class="all-hashcut">Tous les Hashcuts</a>
<a href="#user" class="my-profil open-popin">Mon profil</a>
</div>
</div><!-- header -->
<div class="content clearfix">
<div class="col-left">
<form action="#" method="">
<h2>Sélectionner les vidéos</h2>
<p>
<input type="text" name="" placeholder="Rechercher une vidéo" />
<input type="submit" value="" />
</p>
</form>
<ul class="list-video">
</ul>
</div><!-- col-left -->
<div class="col-middle">
<div class="bloc-segmentation">
<div class="col-middle-header disable">
<a href="#" class="segmenter ">Segmenter <em>La cuisine du Popcorn</em></a>
<a href="#" class="previsualiser disable">Prévisualiser</a>
</div>
<div class="video">
<a class="publier-button" title="Publier" href="#"></a>
<img src="img/visuel-player.jpg" alt="" />
</div>
<div class="segment">
<img src="img/visuel-segment.png" alt="">
</div>
<div class="popin segmentation" id="">
<img class="pointer" src="img/popin-triangle.png" alt="" />
<div class="popin-content">
<h2>Créer un nouveau segment de <span>02:27</span> à <span>02:27</span> (durée: <span>02:27</span>)</h2>
<form action="#">
<div class="form-segment-left">
<p>
<label for="titre">Titre :</label>
<input type="text" id="titre" />
</p>
<p>
<label for="tags">Tags :</label>
<input type="text" id="tags" />
</p>
</div>
<div class="form-segment-right">
<p>
<label for="description">Description :</label>
<textarea id="description"></textarea>
</p>
<p>
<input type="submit" value="Ajouter au Hashcut" />
</p>
</div>
</form>
</div>
</div><!-- popin segmentation -->
<div class="existant">
<h2>Segments existants :</h2>
<div class="segments">
<div class="segment">
<div class="section" style="left:0%;width:20%;"></div>
<div class="popin segment-section" id="">
<img style="left:20px;" class="pointer" src="img/popin-triangle.png" alt="" />
<div class="popin-content clearfix">
<div class="instant-description">
<h2>Le moment crucial où le maïs explose</h2>
<p>De: <span>00:43</span> à <span>01:20</span> (durée: <span>00:37</span>)</p>
</div>
<a href="#" class="reprendre-segment">Reprendre le segment</a>
</div>
</div><!-- popin segment-section -->
</div>
<div class="segment">
<div class="section" style="left:20%;width:20%;"></div>
</div>
<div class="segment">
<div class="section" style="left:60%;width:20%;"></div>
</div>
<div class="segment">
<div class="section" style="left:80%;width:10%;"></div>
</div>
</div>
</div>
</div><!-- bloc-segmentation -->
<div class="bloc-pvw">
<div class="col-middle-header">
<a href="#" class="segmenter">Segmenter <em>La cuisine du Popcorn</em></a>
<a href="#" class="previsualiser">Prévisualiser</a>
</div>
<div class="video">
<a class="publier-button" title="Publier" href="#"></a>
<img src="img/visuel-player.jpg" alt="" />
</div>
<div class="frise clearfix">
<span class="indication" style="left:24%;">00:30</span>
<span class="indication" style="left:44%;">00:30</span>
<span class="indication" style="left:64%;">00:30</span>
<span class="indication" style="left:84%;">00:30</span>
<div class="segments">
<div class="segment" style="background-color:red;width:20%;"></div>
<div class="segment" style="background-color:green;width:20%;"></div>
<div class="segment" style="background-color:red;width:20%;"></div>
<div class="segment" style="background-color:green;width:20%;"></div>
<div class="segment" style="background-color:red;width:20%;"></div>
</div>
<div class="popin frise-description" id="frise-description">
<img class="pointer" src="img/popin-triangle.png" alt="" />
<div class="popin-content">
<ul class="tools">
<li><a class="edit" href="#"></a></li>
<li><a class="bottom" href="#"></a></li>
<li><a class="top" href="#"></a></li>
<li><a class="delete" href="#"></a></li>
</ul>
<h2>Chargement de la capsule lunaire</h2>
<table>
<tbody>
<tr>
<th>Extrait de :</th>
<td>Le Voyage dans la Lune (05:01 - 05:24)</td>
</tr>
<tr>
<th>Description :</th>
<td>Lors d'un colloque d'astronomie, le professeur Barbenfouillis crée l'événement en faisant part à l'assemblée de son projet de voyage dans la Lune. Il organise ensuite la visite à ses confrères de l'atelier où l'obus spatial est en chantier. Il sera propulsé en direction de la Lune au moyen d'un canon géant.</td>
</tr>
<tr>
<th>Tags :</th>
<td>astronomie, lune, fiction, histoire du cinéma, canon, projectile</td>
</tr>
</tbody>
</table>
</div>
</div><!-- popin frise-description -->
</div><!-- frise -->
</div><!-- bloc-pvw -->
<div class="bloc-vide">
<div class="col-middle-header disable">
<a href="#" class="segmenter disable">Segmenter</a>
<a href="#" class="previsualiser disable">Prévisualiser</a>
</div>
<div class="video">
<div class="tutorial">
<h2>Créer un Hashcut, c’est facile !</h2>
<ol>
<li>Commencez par choisir une vidéo dans le volet de gauche</li>
<li>Créez un segment dans la vidéo et profitez-en pour annoter votre segment</li>
<li>Ajoutez votre segment à la liste, réorganisez les segments entre eux</li>
<li>Rajoutez quelques commentaires à votre Hashcut. Vous êtes prêts à publier !</li>
</ol>
</div>
<a class="publier-button" title="Publier" href="#"></a>
</div>
</div><!-- bloc-vide -->
</div><!-- col-middle -->
<div class="col-right">
<div class="liste-segment">
<h2>Liste des segments</h2>
<div class="frise clearfix">
<span class="indication" style="left:64%;">00:30</span>
<span class="indication" style="left:84%;">00:30</span>
<div class="segments">
<div class="segment" style="background-color:red;width:20%;"></div>
<div class="segment" style="background-color:yellow;width:20%;"></div>
<div class="segment" style="background-color:blue;width:20%;"></div>
<div class="segment" style="background-color:green;width:20%;"></div>
<div class="segment" style="background-color:brown;width:20%;"></div>
</div>
</div>
</div>
<ul class="list-video" id="sortable">
<li class="item-video">
<a class="clearfix" href="#">
<img src="img/apercu-video.jpg" alt="aperçu" />
<span class="video-info">
<span class="title-video">Le a Lune 1</span>
<span class="subtitle">Chargement de la Capsule</span>
<span class="duration">01:17 - 02:01 (00:44)</span>
</span>
</a>
<ul class="tools">
<li><a class="edit" href="#"></a></li>
<li><a class="bottom" href="#"></a></li>
<li><a class="top" href="#"></a></li>
<li><a class="delete" href="#"></a></li>
</ul>
</li><!-- item-video -->
<li class="item-video">
<a class="clearfix" href="#">
<img src="img/apercu-video.jpg" alt="aperçu" />
<span class="video-info">
<span class="title-video">Le a Lune 2</span>
<span class="subtitle">Chargement de la Capsule</span>
<span class="duration">01:17 - 02:01 (00:44)</span>
</span>
</a>
<ul class="tools">
<li><a class="edit" href="#"></a></li>
<li><a class="bottom" href="#"></a></li>
<li><a class="top" href="#"></a></li>
<li><a class="delete" href="#"></a></li>
</ul>
</li><!-- item-video -->
<li class="item-video">
<a class="clearfix" href="#">
<img src="img/apercu-video.jpg" alt="aperçu" />
<span class="video-info">
<span class="title-video">Le a Lune 3</span>
<span class="subtitle">Chargement de la Capsule</span>
<span class="duration">01:17 - 02:01 (00:44)</span>
</span>
</a>
<ul class="tools">
<li><a class="edit" href="#"></a></li>
<li><a class="bottom" href="#"></a></li>
<li><a class="top" href="#"></a></li>
<li><a class="delete" href="#"></a></li>
</ul>
</li><!-- item-video -->
</ul>
</div><!-- col-right -->
</div><!-- content -->
<div class="footer clearfix">
<ul class="links-left">
<li><a href="#">Mentions légales</a></li>
<li><a href="#">Contacts</a></li>
</ul>
<ul class="links-right">
<li><a title="IRI" href="http://www.iri.centrepompidou.fr/"> <img src="img/logo-iri.png" alt="iri" /></a></li>
<li><a title="cinecast" href="http://cinecast.fr/"><img src="img/logo-cinecast.png" alt="cinecast" /></a></li>
<li>© 2012</li>
</ul>
</div><!-- footer -->
</div><!-- wrap -->
<!-- JavaScript -->
<script type="text/javascript" src="lib/jquery.min.js"></script>
<script type="text/javascript" src="lib/jquery-ui.min.js"></script>
<script type="text/javascript" src="lib/mustache.js"></script>
<script type="text/javascript" src="lib/underscore-min.js"></script>
<script type="text/javascript" src="lib/popcorn-complete.min.js"></script>
<script type="text/javascript" src="lib/raphael-min.js"></script>
<script type="text/javascript" src="js/init.js"></script>
<script type="text/javascript" src="js/medialist-serializer.js"></script>
<script type="text/javascript" src="js/model.js"></script>
<script type="text/javascript" src="js/editor.js"></script>
</body>
</html>