# HG changeset patch
# User Anthony Ly <anthonyly.com@gmail.com>
# Date 1351010377 -7200
# Node ID 338f10af79ddaa2abc1280ad2656f01386e2f403
# Parent  25e1f60979ae4a8bd308aad11f308482c6b12b7d
ajout du bloc segmentation

diff -r 25e1f60979ae -r 338f10af79dd integration/css/style.css
--- a/integration/css/style.css	Wed Oct 17 18:24:00 2012 +0200
+++ b/integration/css/style.css	Tue Oct 23 18:39:37 2012 +0200
@@ -25,7 +25,7 @@
 }
 body{
 	height: 100%;
-	background: url(../img/bg.jpg) repeat-x 0 0;
+	background: url(../img/bg.png) repeat-x 0 0;
 }
 a{
 	color:#000;
@@ -42,14 +42,15 @@
   	height: 100%;
 }
 div.wrap-header{
-	background: url(../img/bg-wrap-header.jpg) repeat-x 0 0;
-	height: 58px;
+	padding-top: 5px;
+	background-color: #370078;
+	height: 53px;
 	margin-bottom: 1px;
 }
 /* header */
 div.header{
 	position: relative;
-	background: url(../img/bg-header.jpg) repeat-x 0 0;
+	background-color: #e2dbfd;
 	height: 60px;
 }
 div.header div.title-video-wrap, div.header h1, div.header div.profil-wrap{
@@ -65,11 +66,14 @@
 div.header h1 a img, div.header h1 a span{
 	float: left;
 }
+div.header h1 a{
+	padding-top: 6px;
+}
 div.header h1 a span{
  	font-family: 'OpenSans-Light';
  	font-size: 20px;
  	text-align: center;
- 	padding: 6px 0 0 6px;
+ 	padding: 0px 0 0 6px;
 }
 div.header div.title-video-wrap{
 	width: 460px;
@@ -127,7 +131,7 @@
 div.content{
 	width: 960px;
 	min-height: 750px;
-	background: url(../img/bg-degrade.jpg) 0 0 repeat-x;
+	background: url(../img/bg-degrade.png) 0 0 repeat-x;
 }
 
 div.col-middle, div.col-left, div.col-right{
@@ -139,11 +143,10 @@
 }
 div.col-middle-header{
 	height: 35px;
-	background: url(../img/bg-previsualiser.jpg) repeat-x 0 0;
+	background: url(../img/bg-previsualiser.png) repeat-x 0 0;
 	line-height: 35px;
 	font-size: 16px;
 	font-family: 'OpenSans-SemiboldItalic';
-
 }
 div.col-middle-header a{
 	color: #30036d;
@@ -159,9 +162,16 @@
 	display: inline-block;
 	min-width: 210px;
 	height: 35px;
-	background: url(../img/bg-segmenter.jpg) repeat-x 0 0;
+	background: url(../img/bg-segmenter.png) repeat-x 0 0;
 }
+div.col-middle-header a.segmenter.disable,
+div.col-middle-header a.previsualiser.disable,
+div.col-middle-header.disable {
+	background-position:  0 -35px;
+}
+
 div.col-middle-header a.previsualiser{
+	background: url(../img/bg-previsualiser.png) repeat-x 0 0;
 	float: right;
 	padding-right: 10px;
 }
@@ -179,10 +189,7 @@
 	top: 10px;
 }
 div.col-middle div.video a.publier-button:hover{
-	background-color: #666;
-	 -webkit-border-radius: 2px;
-	  -moz-border-radius: 2px;
-	  border-radius: 2px;
+	background-position: 0 -67px;
 }
 div.col-middle div.video a.publier-button.disable{
 	background: url(../img/publier-button-sprite.png) 0 -67px no-repeat;
@@ -237,14 +244,127 @@
 	background: url(../img/bg-indication.png) 15px 0 no-repeat;
 	margin-left: -15px;
 }
+
+/******* bloc ******/
+div.bloc-pvw{
+	display: none;
+}
+
+
+div.bloc-segmentation{
+	position: relative;
+}
+div.popin.segmentation{
+	top: 376px;
+	width: 100%;
+}
+div.popin.segmentation img.pointer{
+	left: 222px	;
+}
+div.popin.segmentation h2{
+	font-size: 14px;
+	font-family: 'OpenSans-Semibold';
+	color:#de2500;
+	margin-bottom: 10px;
+}
+div.popin.segmentation h2 span{
+	color: #7628df;
+}
+div.popin.segmentation form{
+	overflow: hidden;
+}
+div.popin.segmentation form div.form-segment-left,
+div.popin.segmentation form div.form-segment-right{
+	float: left;
+}
+div.popin.segmentation form div.form-segment-left{
+	width: 228px;
+}
+div.popin.segmentation form p{
+	margin-bottom: 8px;
+}
+div.popin.segmentation form label{
+	display: block;
+	font-size: 12px;
+	font-family: 'OpenSans-Semibold';
+	margin-bottom: 4px;
+}
+div.popin.segmentation form textarea{
+	width: 200px;
+	height: 66px;
+	max-width: 200px;
+	font-size: 12px;
+}
+div.popin.segmentation form input[type=text]{
+	font-size: 12px;
+	width: 200px;
+	height: 20px;
+}
+div.bloc-segmentation div.existant{
+	margin-top: 190px;
+
+}
+div.bloc-segmentation div.existant h2{
+	color: #30036d;
+	font-size: 14px;
+	font-family: 'OpenSans-Semibold';
+	padding-left: 8px;
+	margin-bottom: 8px;
+}
+div.bloc-segmentation div.segment{
+	width: 100%;
+	height: 8px;
+	background-color: #b6b8b8;
+	margin-bottom: 5px;
+	position: relative;
+}
+div.bloc-segmentation div.segment div.section{
+	background-color: #ff7f0e;
+	height: 6px;
+	border:1px solid #999999;
+	position: absolute;
+}
+div.bloc-segmentation div.segment div.popin.segment-section{
+	top: 8px;
+}
+div.bloc-segmentation div.segment div.popin.segment-section h2{
+	padding: 0;
+	color: #de2500;
+	margin-bottom: 4px;
+}
+div.bloc-segmentation div.segment div.popin.segment-section p{
+	font-size: 12px;
+}
+div.bloc-segmentation div.segment div.popin.segment-section p span{
+	color: #7628df;
+}
+
+div.bloc-segmentation div.segment div.popin.segment-section a.reprendre-segment{
+	float: right;
+	display: block;
+	height: 20px;
+	line-height: 20px;
+}
+div.bloc-segmentation div.segment div.popin.segment-section div.instant-description{
+	float: left;
+	margin-right: 16px;
+}
+
+
+
+
+
+
+
+
 /* col-left */
 div.col-left, div.col-right{
 	width: 250px;
 	min-height: 750px;
-	background: url(../img/bg-col.jpg) repeat-x 0 0 #e6e6e6;
+	background: url(../img/bg-col.png) repeat-x 0 0 #e6e6e6;
 }
 div.col-left form{
-	background: url(../img/bg-video-search.jpg) 0 0 repeat-x #906ebe;
+	background: url(../img/bg-video-search.png) 0 0 repeat-x #906ebe;
 	height: 70px;
 	padding-left: 10px;
 	margin-bottom: 1px;
@@ -282,8 +402,10 @@
 	position: absolute;
 	right: 2px;
 	width: 20px;
+	top: 0;
 	height: 20px;
 	border: none;
+	z-index: 2;
 	background: #FFF url(../img/zoom-icon.png) 2px 3px no-repeat;
 }
 div.col-left ul.list-video li a:hover,div.col-left  ul.list-video li a.active{
@@ -298,7 +420,7 @@
 }
 div.col-right div.liste-segment{
 	height: 70px;
-	background: url(../img/bg-liste-segment.jpg) repeat-x 0 0;
+	background: url(../img/bg-liste-segment.png) repeat-x 0 0;
 	padding: 0 10px;
 	width: 230px;
 }
@@ -347,7 +469,7 @@
 div.popin div.popin-content{
 	padding: 8px;
 	border: 1px solid #867a97;
-	background: url(../img/bg-jaune.jpg);
+	background: url(../img/bg-jaune.png);
 }
 div.popin input[type=text],div.popin input[type=password], div.popin textarea{
 	padding: 0 6px;
@@ -444,36 +566,97 @@
 
 }
 
-div.user.popin.signup div.popin-content h2{
+div.user.popin.signup div.popin-content h2,
+div.user.popin.login div.popin-content h2{
 	color: #de2500;
 	font-size: 14px;
 	margin-bottom: 12px;
 }
-div.user.popin.signup div.popin-content form label{
+div.user.popin.signup div.popin-content form label,
+div.user.popin.login div.popin-content form label{
 	width: 84px;
 	font-size: 12px;
 	display: inline-block;
 	float: left;
-	vertical-align: middle;
+	line-height: 12px;
 
 }
-div.user.popin.signup div.popin-content form p{
+div.user.popin.signup div.popin-content form p,
+div.user.popin.login div.popin-content form p{
 	display: block;
 	line-height: 18px;
-	margin-bottom: 6px;
-	overflow: auto;
-	
+	margin-bottom: 8px;
+	overflow: hidden;
 }
 div.user.popin.signup div.popin-content form input[type=text],
-div.user.popin.signup div.popin-content form input[type=password]{
+div.user.popin.signup div.popin-content form input[type=password],
+div.user.popin.login div.popin-content form input[type=text],
+div.user.popin.login div.popin-content form input[type=password]{
 	float: left;
 	position: relative;
 	width: 110px;
 	padding: 0 5px;
 	height: 18px;
 	display: inline-block;
-	vertical-align: middle;
+}
+div.user.popin.login div.popin-content a.signup-button{
+	background-color: #de2500;
+}
+
+
+div.user.popin.signup div.popin-content form input[type=submit],
+div.user.popin.login div.popin-content form input[type=submit],
+div.user.popin.login a.signup-button ,
+div.popin.segmentation form input[type=submit],
+div.popin.segment-section a.reprendre-segment{
+	margin-top: 2px;
+	font-family: 'OpenSans-Regular';
+	display: block;
+	font-size: 12px;
+	border: 0;
+	width: 150px;
+	padding: 1px 0;
+	background-color: #30036D;
+	color: #FFF;
+	text-align: center;
+	-webkit-border-radius: 4px;
+  	-moz-border-radius: 4px;
+  	border-radius: 4px;
+  	float: right;
+  	cursor: pointer;
 }
+
+
+div.user.popin.signup div.popin-content form input[type=submit]:hover,
+div.user.popin.login div.popin-content form input[type=submit]:hover,
+div.user.popin.login div.popin-content a.signup-button:hover,
+div.popin.segmentation form input[type=submit]:hover,
+div.popin.segment-section a.reprendre-segment:hover{
+	background-color: #FF00FC
+}
+
+
+
+
+
+
+div.user.popin.signup {
+	display: none;
+}
+div.user.popin.info {
+	display: none;
+}
+div.user.popin.login {
+	display: none;
+}
+
+
+
+
+
+
+
+
 	/* frise-description */
 div.frise-description.popin{
 	top: 26px;
@@ -634,7 +817,6 @@
 }
 div.footer ul.links-left{
 	float: left;
-	
 }
 div.footer ul.links-left li{
 	margin-bottom: 4px;
diff -r 25e1f60979ae -r 338f10af79dd integration/edition.html
--- a/integration/edition.html	Wed Oct 17 18:24:00 2012 +0200
+++ b/integration/edition.html	Tue Oct 23 18:39:37 2012 +0200
@@ -15,7 +15,7 @@
     <body>
         <div class="wrap">
             <div class="wrap-header">
-                <a title="Bibliothèque centre Pompidou" href="#"><img src="img/pompidou-logo.jpg" alt="Bibliothèque centre Pompidou" /></a>
+                <a title="Bibliothèque centre Pompidou" href="#"><img src="img/pompidou-logo.png" alt="Bibliothèque centre Pompidou" /></a>
             </div>
             <div class="header">
                 <!-- popin header -->
@@ -72,13 +72,40 @@
                                 <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.jpg" alt="Hashcut" />
+                    <img src="img/hashcut-logo.png" alt="Hashcut" />
                     <span>Le Mashup<br />Cliquable</span>
                 </a></h1>
                 <div class="title-video-wrap">
@@ -137,6 +164,75 @@
                 </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.png" 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">
@@ -277,8 +373,8 @@
                     <li><a href="#">Contacts</a></li>
                 </ul>
                 <ul class="links-right">
-                    <li><a title="IRI" href="#"> <img src="img/logo-iri.png" alt="iri" /></a></li>
-                    <li><a title="cinecast" href="#"><img src="img/logo-cinecast.png" alt="cinecast" /></a></li>
+                    <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>
diff -r 25e1f60979ae -r 338f10af79dd integration/img/publier-button-sprite.png
Binary file integration/img/publier-button-sprite.png has changed