integration/image.html
changeset 2 4354d94c6d85
child 3 3c62d8c7fb39
equal deleted inserted replaced
1:5b7616434ecd 2:4354d94c6d85
       
     1 <!DOCTYPE html>
       
     2 <html lang="fr">
       
     3     <head>
       
     4         <meta charset="utf-8" />
       
     5         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
       
     6         <title>eGonomy &raquo; Image</title>
       
     7         
       
     8         <link rel="stylesheet" type="text/css" href="css/egonomy.css" />
       
     9     </head>
       
    10 
       
    11     <body>
       
    12         <div class="header-wrap fullwidth">
       
    13             <header>
       
    14                 <h1 class="column column-third">TagItAll by eGonomy</h1>
       
    15                 <form class="column column-third">
       
    16                     <input class="search-field" type="search" placeholder="Rechercher" />
       
    17                 </form>
       
    18                 <nav class="column column-third">
       
    19                     <a href="#">Se connecter</a>
       
    20                 </nav>
       
    21             </header>
       
    22         </div>
       
    23         <div class="main-wrap fullwidth">
       
    24 
       
    25             <div class="main">
       
    26                 <div class="fullwidth">
       
    27                     <div class="column column-half">
       
    28                         <h2>Titre de l'image</h2>
       
    29                         <div class="fullphoto placeholder">
       
    30                             Photo à annoter
       
    31                         </div>
       
    32                     </div>
       
    33                     <div class="column column-half">
       
    34                         <table class="image-metadata">
       
    35                             <tr>
       
    36                                 <th>Description&nbsp;:</th>
       
    37                                 <td>Lorem Ipsum, Ceci est la description de l'&oelig;uvre représentée dans l'image.</td>
       
    38                             </tr>
       
    39                             <tr>
       
    40                                 <th>Localisation&nbsp;:</th>
       
    41                                 <td>Musée du Louvre, Paris.</td>
       
    42                             </tr>
       
    43                         </table>
       
    44                         <h2>Mots-clés</h2>
       
    45                         <table class="image-keywords">
       
    46                             <thead>
       
    47                                 <tr>
       
    48                                     <th>Mot-clé</th>
       
    49                                     <th>Relation à l'image</th>
       
    50                                     <th>Source / Annoté par</th>
       
    51                                 </tr>
       
    52                             </thead>
       
    53                             <tbody>
       
    54                                 <tr>
       
    55                                     <td>Louis XV</td>
       
    56                                     <td>est représenté(e)</td>
       
    57                                     <td>Import Base RMN</td>
       
    58                                 </tr>
       
    59                                 <tr>
       
    60                                     <td>Marcel Duchamp</td>
       
    61                                     <td>est l'auteur</td>
       
    62                                     <td>Import Base RMN</td>
       
    63                                 </tr>
       
    64                                 <tr>
       
    65                                     <td>Paris</td>
       
    66                                     <td>est représenté(e)</td>
       
    67                                     <td>Enrichissement Pertimm</td>
       
    68                                 </tr>
       
    69                                 <tr>
       
    70                                     <td>Liberté</td>
       
    71                                     <td>est symbolisé(e)</td>
       
    72                                     <td>Julien75</td>
       
    73                                 </tr>
       
    74                             </tbody>
       
    75                         </table>
       
    76                         <div class="fullwidth">
       
    77                             <a href="#" class="add-button">+ Ajouter un mot-clé</a>
       
    78                         </div>
       
    79                         <div class="fullwidth">
       
    80                             <a href="#" class="big-button">Créer un fragment</a>
       
    81                             <a href="#" class="big-button">Créer un Renkan</a>
       
    82                         </div>
       
    83                     </div>
       
    84                 </div>
       
    85                 <div class="fullwidth">
       
    86                     <div class="column column-half">
       
    87                         <h2>Fragments de cette image</h2>
       
    88                         <div class="fullwidth">
       
    89                             <div class="subcol subcol-half-fourth">
       
    90                                 <div class="img-eighth placeholder"></div>
       
    91                                 <h3>Titre du fragment</h3>
       
    92                                 <p>Annoté par <strong>Julien75</strong></p>
       
    93                             </div>
       
    94                             <div class="subcol subcol-half-fourth">
       
    95                                 <div class="img-eighth placeholder"></div>
       
    96                                 <h3>Titre du fragment</h3>
       
    97                                 <p>Annoté par <strong>Julien75</strong></p>
       
    98                             </div>
       
    99                             <div class="subcol subcol-half-fourth">
       
   100                                 <div class="img-eighth placeholder"></div>
       
   101                                 <h3>Titre du fragment</h3>
       
   102                                 <p>Annoté par <strong>Julien75</strong></p>
       
   103                             </div>
       
   104                             <div class="subcol subcol-half-fourth">
       
   105                                 <div class="img-eighth placeholder"></div>
       
   106                                 <h3>Titre du fragment</h3>
       
   107                                 <p>Annoté par <strong>Julien75</strong></p>
       
   108                             </div>
       
   109                         </div>
       
   110                     </div>
       
   111                     <div class="column column-half">
       
   112                         <h2>Renkans utilisant cette image</h2>
       
   113                         <div class="fullwidth">
       
   114                             <div class="subcol subcol-half-fourth">
       
   115                                 <div class="img-eighth placeholder"></div>
       
   116                                 <h3>Titre du Renkan</h3>
       
   117                                 <p>Créé par <strong>Julien75</strong></p>
       
   118                             </div>
       
   119                             <div class="subcol subcol-half-fourth">
       
   120                                 <div class="img-eighth placeholder"></div>
       
   121                                 <h3>Titre du Renkan</h3>
       
   122                                 <p>Créé par <strong>Julien75</strong></p>
       
   123                             </div>
       
   124                             <div class="subcol subcol-half-fourth">
       
   125                                 <div class="img-eighth placeholder"></div>
       
   126                                 <h3>Titre du Renkan</h3>
       
   127                                 <p>Créé par <strong>Julien75</strong></p>
       
   128                             </div>
       
   129                             <div class="subcol subcol-half-fourth">
       
   130                                 <div class="img-eighth placeholder"></div>
       
   131                                 <h3>Titre du Renkan</h3>
       
   132                                 <p>Créé par <strong>Julien75</strong></p>
       
   133                             </div>
       
   134                         </div>
       
   135                     </div>
       
   136                 </div>
       
   137                 
       
   138                 <footer class="fullwidth">
       
   139                     <ul class="footer-list">
       
   140                         <li>&copy; IRI 2013</li>
       
   141                     </ul>
       
   142                 </footer>
       
   143             
       
   144             </div>
       
   145 
       
   146         </div>
       
   147     </body>
       
   148 </html>