integration/gabarit.html
changeset 20 c86141a8570d
parent 19 81a605180745
child 21 c2dd00471b2d
--- a/integration/gabarit.html	Tue Oct 30 18:04:28 2012 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,412 +0,0 @@
-<!DOCTYPE html>
-<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
-<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
-<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
-<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
-    <head>
-        <meta charset="utf-8">
-        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-        <title>Gabarit</title>
-        <link rel="stylesheet" href="css/reset.css" />
-        <link rel="stylesheet" href="css/common.css" />
-        <link rel="stylesheet" href="css/article.css" />
-        <link rel="stylesheet" href="css/ui-red/jquery-ui.css">
-        <script src="js/vendor/modernizr-2.6.1.min.js"></script>
-    </head>
-    <body>
-
-
-
-        <div class="wrap">
-            <div class="header">
-                <div class="logo">
-                  <div class="date">
-                      <span class="year">5</span>
-                      <span class="text">années archivées</span>
-                  </div>
-                </div>
-
-                <div class="recherche-wrap">
-                    <h1><img src="img/mediapart-by-periplus.jpg" alt="" /></h1>
-                    <form action="#">
-                        <p >
-                            <a href="#" class="photo"></a>
-                            <input name="recherche" placeholder="Rechercher" class="input-recherche" type="text" />
-                            <input type="submit" title="Rechercher"  value="" class="recherche-submit"/>
-                            <a class="plus-button" title="Annoter" href="#"> </a>
-                        </p>
-                    </form>
-                </div>
-
-                <ul class="header-menu">
-                    <li><a href="#"><img src="img/home-button.jpg" alt="" /> </a></li>
-                    <li><a href="#">INTERNATIONAL</a></li>
-                    <li><a href="#">FRANCE</a></li>
-                    <li><a href="#">ECONOMIE</a></li>
-                    <li><a href="#">CULTURE</a></li>
-                    <li><a href="#">CLUSTER X</a></li>
-                </ul>
-
-                <div class="login-wrap">
-                    <h2>CONNECTER VOUS</h2>
-                    <form action="#">
-                        <p><input type="text" name="identifiant" placeholder="Identifiant" /></p> 
-                        <p class="submit-wrap">
-                            <input class="password" type="password" name="password"/>
-                            <input class="submit-button" type="submit" value="OK" />
-                        </p>
-                    </form>
-                    <p class="password-lost"><a  href="">Mot de passe oublié ?</a> </p>
-
-
-                </div>
-                <a href="#" class="dossier-button">DOSSIERS DOCUMENTAIRES</a>
-
-                <div class="dossier-documentaire">
-                    <div class="dossier-documentaire-inner">
-                        <h2>MES DOSSIERS</h2>
-                        <ul>
-                            <li class="clearfix">
-                                <a title="Voir le dossier" href="#">
-                                <img src="img/documentaire-visuel.jpg" alt="" />
-                                <span class="documentaire-texte">
-                                    <h3>Terrorisme</h3>
-                                    <p>relation entre elation entre</p>
-                                </span>
-                                </a>
-                            </li>
-                            <li class="clearfix">
-                                <a title="Voir le dossier" href="#">
-                                <img src="img/documentaire-visuel.jpg" alt="" />
-                                <span class="documentaire-texte">
-                                    <h3>Terrorisme</h3>
-                                    <p>relation entre elation entre</p>
-                                </span>
-                                </a>
-                            </li>
-                            <li class="clearfix">
-                                <a title="Voir le dossier" href="#">
-                                <img src="img/documentaire-visuel.jpg" alt="" />
-                                <span class="documentaire-texte">
-                                    <h3>Terrorisme</h3>
-                                    <p>relation entre elation entre</p>
-                                </span>
-                                </a>
-                            </li>
-                            <li class="clearfix">
-                                <a title="Nouveau dossier documentaire" href="#">
-                                <img src="img/documentaire-nouveau-dossier.jpg" alt="" />
-                                <span class="documentaire-texte">
-                                    <h3>NOUVEAU DOSSIER</h3>
-                                    <p>Creér un dossier documentaire</p>
-                                </span>
-                                </a>
-                            </li>
-
-                        </ul>
-                        <a class="documentaire-lien" title="Voir les dossiers"  href="#"></a>
-                        <h2></h2>
-                        <ul>
-                            <li class="clearfix">
-                                <atitle="Voir le dossier"  href="#">
-                                <img src="img/documentaire-visuel.jpg" alt="" />
-                                <span class="documentaire-texte">
-                                    <h3>Terrorisme</h3>
-                                    <p>relation entre elation entre</p>
-                                </span>
-                                </a>
-                            </li>
-                            <li class="clearfix">
-                                <a title="Voir le dossier" href="#">
-                                <img src="img/documentaire-visuel.jpg" alt="" />
-                                <span class="documentaire-texte">
-                                    <h3>Terrorisme</h3>
-                                    <p>relation entre elation entre</p>
-                                </span>
-                                </a>
-                            </li>
-                        </ul>
-                        <a class="documentaire-lien" title="Voir les dossiers" href="#"></a>
-                    </div>
-                </div><!--dossier-documentaire-->
-            </div><!-- header -->
-
-            <div class="content-wrap clearfix">
-                <div class="frise">
-                    <div class="streamgraph"></div>
-                    <div id="slider-range"></div>
-                </div><!-- frise -->
-
-
-                <div class="content clearfix">
-                    
-
-                    <div class="content-left">
-                        <div class="widget-wrapper">
-                            <div class="widget-wrap">
-
-                                <div class="widget affichage">
-                                    <h3><a href="#">AFFICHAGE</a></h3>
-                                    <div class="widget-inner">
-                                        
-                                        <ul class="clearfix">
-                                            <li><a  title="Passer en vue Treemap" class="treemap active" href="#"><span class="visuel"></span><span class="fonction">Treemap</span> </a></li>
-                                            <li><a  title="Passer en vue Liste" class="liste" href="#"><span class="visuel"></span><span class="fonction">Liste</span> </a></li>
-                                        </ul>
-                                    </div>
-                                </div><!-- affichage -->
-                            </div><!-- widget-wrap -->
-                        </div>
-                    </div>
-
-                    <div class="content-right ">
-                        
-                        <div class="articles">
-                            <div class="article">
-                                <div class="inner-article clearfix">
-                                    <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
-                                    <p class="number-article">
-                                        <a href="#">48 articles | 320 annotations </a>
-                                        <a title="ajouter une annotation" class="add-annotation" href="#"></a>
-                                    </p>
-
-                                    <div class="article-annotations">
-                                        <a title="title" class="blue" href="#" style="width:20%;"></a>
-                                        <a title="title" class="green" href="#" style="width:20%;"></a>
-                                        <a title="title" class="red" href="#" style="width:40%;"></a>
-                                        <a title="title" class="empty" href="#" style="width:20%;"></a>
-                                    </div>
-                                    <div class="article-content">
-                                        <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-                                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-                       
-                                        </p>
-
-                                        <ul class="links">
-                                            <ul>
-                                                <li><a href="#">Karachi crise</a></li>
-                                                <li><a href="#">Karachi crise</a></li>
-                                                <li><a href="#">Karachi crise</a></li>
-                                            </ul>
-                                        </ul>
-                                    </div>
-                                </div>
-                            </div><!--article -->
-
-                            <div class="article">
-                                <div class="inner-article clearfix">
-                                    <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
-                                    <p class="number-article">
-                                        <a href="#">48 articles | 320 annotations </a>
-                                        <a title="ajouter une annotation" class="add-annotation" href="#"></a>
-                                    </p>
-
-                                    <div class="article-annotations">
-                                        <a title="title" class="blue" href="#" style="width:20%;"></a>
-                                        <a title="title" class="green" href="#" style="width:20%;"></a>
-                                        <a title="title" class="red" href="#" style="width:40%;"></a>
-                                        <a title="title" class="empty" href="#" style="width:20%;"></a>
-                                    </div>
-                                    <div class="article-content">
-                                        <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
-                                        <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-                                    tempor incididunt ut labore et dolore magna aliqua. 
-                       
-                                        </p>
-
-                                        <ul class="links">
-                                            <ul>
-                                                <li><a href="#">Karachi crise</a></li>
-                                                <li><a href="#">Karachi crise</a></li>
-                                                <li><a href="#">Karachi crise</a></li>
-                                            </ul>
-                                        </ul>
-                                    </div>
-                                </div>
-                            </div><!--article -->
-                            <div class="article">
-                                <div class="inner-article clearfix">
-                                    <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
-                                    <p class="number-article">
-                                        <a href="#">48 articles | 320 annotations </a>
-                                        <a title="ajouter une annotation" class="add-annotation" href="#"></a>
-                                    </p>
-
-                                    <div class="article-annotations">
-                                        <a title="title" class="blue" href="#" style="width:20%;"></a>
-                                        <a title="title" class="green" href="#" style="width:20%;"></a>
-                                        <a title="title" class="red" href="#" style="width:40%;"></a>
-                                        <a title="title" class="empty" href="#" style="width:20%;"></a>
-                                    </div>
-                                    <div class="article-content">
-                                        <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-                                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-                       
-                                        </p>
-
-                                        <ul class="links">
-                                            <ul>
-                                                <li><a href="#">Karachi crise</a></li>
-                                                <li><a href="#">Karachi crise</a></li>
-                                                <li><a href="#">Karachi crise</a></li>
-                                            </ul>
-                                        </ul>
-                                    </div>
-                                </div>
-                            </div><!--article -->
-
-                            <div class="article">
-                                <div class="inner-article clearfix">
-                                    <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
-                                    <p class="number-article">
-                                        <a href="#">48 articles | 320 annotations </a>
-                                        <a title="ajouter une annotation" class="add-annotation" href="#"></a>
-                                    </p>
-
-                                    <div class="article-annotations">
-                                        <a title="title" class="blue" href="#" style="width:20%;"></a>
-                                        <a title="title" class="green" href="#" style="width:20%;"></a>
-                                        <a title="title" class="red" href="#" style="width:40%;"></a>
-                                        <a title="title" class="empty" href="#" style="width:20%;"></a>
-                                    </div>
-                                    <div class="article-content">
-                                        <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
-                                        <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-                                    tempor incididunt ut labore et dolore magna aliqua. 
-                       
-                                        </p>
-
-                                        <ul class="links">
-                                            <ul>
-                                                <li><a href="#">Karachi crise</a></li>
-                                                <li><a href="#">Karachi crise</a></li>
-                                                <li><a href="#">Karachi crise</a></li>
-                                            </ul>
-                                        </ul>
-                                    </div>
-                                </div>
-                            </div><!--article -->
-                            <div class="article">
-                                <div class="inner-article clearfix">
-                                    <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
-                                    <p class="number-article">
-                                        <a href="#">48 articles | 320 annotations </a>
-                                        <a title="ajouter une annotation" class="add-annotation" href="#"></a>
-                                    </p>
-
-                                    <div class="article-annotations">
-                                        <a title="title" class="blue" href="#" style="width:20%;"></a>
-                                        <a title="title" class="green" href="#" style="width:20%;"></a>
-                                        <a title="title" class="red" href="#" style="width:40%;"></a>
-                                        <a title="title" class="empty" href="#" style="width:20%;"></a>
-                                    </div>
-                                    <div class="article-content">
-                                        <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-                                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-                       
-                                        </p>
-
-                                        <ul class="links">
-                                            <ul>
-                                                <li><a href="#">Karachi crise</a></li>
-                                                <li><a href="#">Karachi crise</a></li>
-                                                <li><a href="#">Karachi crise</a></li>
-                                            </ul>
-                                        </ul>
-                                    </div>
-                                </div>
-                            </div><!--article -->
-
-                            <div class="article">
-                                <div class="inner-article clearfix">
-                                    <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
-                                    <p class="number-article">
-                                        <a href="#">48 articles | 320 annotations </a>
-                                        <a title="ajouter une annotation" class="add-annotation" href="#"></a>
-                                    </p>
-
-                                    <div class="article-annotations">
-                                        <a title="title" class="blue" href="#" style="width:20%;"></a>
-                                        <a title="title" class="green" href="#" style="width:20%;"></a>
-                                        <a title="title" class="red" href="#" style="width:40%;"></a>
-                                        <a title="title" class="empty" href="#" style="width:20%;"></a>
-                                    </div>
-                                    <div class="article-content">
-                                        <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
-                                        <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-                                    tempor incididunt ut labore et dolore magna aliqua. 
-                       
-                                        </p>
-
-                                        <ul class="links">
-                                            <ul>
-                                                <li><a href="#">Karachi crise</a></li>
-                                                <li><a href="#">Karachi crise</a></li>
-                                                <li><a href="#">Karachi crise</a></li>
-                                            </ul>
-                                        </ul>
-                                    </div>
-                                </div>
-                            </div><!--article -->
-                            
-                          
-                           
-                        </div><!-- articles -->
-
-                        <div class="pagination">
-                            <a href="#" class="active">1</a>.<a href="#">2</a>.<a href="#">3</a>.<a href="#">Suivants »</a>
-                        </div>
-                        
-                    </div><!-- content-right -->
-                </div>
-                <div class="footer clearfix">
-                    <div class="footer-information">
-                        <h2>Information utiles</h2>
-                        <ul>
-                            <li>- <a href="#">Mentions légales</a></li>
-                            <li>- <a href="#">Mentions légales</a></li>
-                            <li>- <a href="#">Conditions d'utilisations générale</a></li>
-                            <li>- <a href="#">Le projet Periplus</a></li>
-                        </ul>
-                    </div>
-                    <div class="footer-raccourci">
-                        <h2>Raccourcis</h2>
-                        <ul>
-                            <li>- Année <a href="#">2009</a>, <a href="#">2009</a>, <a href="#">2009</a></li>
-                            <li>- <a href="#">International</a>, <a href="#">International</a>, <a href="#">International</a></li>
-                            <li>- <a href="#">Conditions d'utilisations générale</a>
-                        </ul>
-                    </div>
-                    <div class="footer-partenaire">
-                        <h2>Partenaires</h2>
-                        <ul>
-                            <li><a title="iri" href="http://www.iri.centrepompidou.fr/" class="iri"></a></li>
-                            <li><a title="cea" href="http://www.cea.fr/" class="cea"></a></li>
-                            <li><a title="Alcatel" href="http://www.alcatel-lucent.com" class="alcatel"></a></li>
-                        </ul>
-                    </div>
-                    <div class="footer-texte">
-                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-                        quis nostrud exercitation ullamco.
-                    </p>
-                    </div>
-                </div><!-- footer -->
-                
-            </div><!-- content-wrap -->
-            <div class="copyright">
-                &copy; Mediapart &copy; Periplus | <a href="#">Mention légales</a> | <a href="#">Chartes éditoriale | <a href="#">CGV | <a href="#">Mediapart.fr</a>
-            </div>
-        </div>
-        <!-- JavaScript -->
-        <script src="js/vendor/jquery-1.8.0.min.js"></script>
-        <script src="js/vendor/jquery-ui-1.8.24.custom.min.js"></script>
-        <script src="js/vendor/dragslider.js"></script>
-        <script src="js/lib/raphael-min.js"></script>
-        <script src="js/lib/underscore-min.js"></script>
-        <script src="js/plugins.js"></script>
-        <script src="js/main.js"></script>
-        <script src="js/streamgraph.js"></script>
-
-    </body>
-</html>