<!DOCTYPE html> <html lang="fr" > <head> <meta charset="UTF-8"> <title>Livre de donnés</title> <link rel="icon" href="favicon.ico" /> <style> /* Basé sur le travail de Ondřej Bárta (https://codepen.io/bartaxyz/pen/nCfAj) */ html, body { height: 100%; } body { font-family: 'Roboto', sans-serif; font-weight: 100; font-size: 14px; margin: 0 auto; background: #c7bcad; } .right { float: right; position: relative; top: 25px; color:#3388cc; } .left { float: left; position: relative; top: 6px; } .left img { max-width: 100px; height: auto; position: relative; top: 15px; left: -10px; } .top { margin-top: -30px; } #notebooks { background: whitesmoke; position: absolute; left: 25%; margin-top: 30px; width: 650px; height: 750px; padding: 15px; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 5px; box-shadow: inset 1px 1px 0 white; } ul { margin: 0 auto; padding: 0; max-height: 700px; overflow-y: auto; border: 1px solid rgba(0, 0, 0, 0.1); padding: 5px 5px 0 5px; border-left: none; border-right: none; } li { list-style: none; background-color: rgba(0, 0, 0, 0.05); background-image: linear-gradient( 90deg, #3388cc 10px, #EEE 10px, #EEE 11px, transparent 11px); padding: 10px 15px 10px 25px; border: 1px solid #CCC; box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.5); margin-bottom: 5px; width: 100%; box-sizing: border-box; cursor: pointer; border-radius: 3px; } #query { width: 450px; box-sizing: border-box; font-size: 19px; padding: 5px; font-family: calibri light; margin-bottom: 10px; margin-left: 200px; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 3px; box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1); } #notebooks span { display: block; position: absolute; background: #3388cc; color: #fff; bottom: -35px; left: -1px; width: 660px; border-radius: 0 0 5px 5px; border: 1px solid rgba(0, 0, 0, 0.1); padding: 10px; border-top: 1px solid rgba(0, 0, 0, 0.1); box-shadow: inset 1px 1px rgba(255, 255, 255, 0.5); } #notebooks span a { color: #fff; } #notebooks select { width: 180px; margin-top: -45px; border-radius: 0 3px 3px 0; border: 1px solid rgba(0, 0, 0, 0.2); border-left: 1px solid rgba(0, 0, 0, 0.1); position: absolute; padding: 7.5px; box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1); } #notebooks select:focus, #query:focus { border: 1px solid #3388cc; box-shadow: 0 0 10px rgba(255, 255, 0, 0.1); outline: none; } #aisling { position: absolute; left: 60%; top: 15%; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> </head> <body> <div id="notebooks" ng-app="notebooks" ng-controller="NotebookListCtrl"> <input type="text" id="query" ng-model="query"/> <select ng-model="orderList"> <option value="niveau">Niveau croissant</option> <option value="-niveau">Niveau décroissant</option> <option value="donjon">Nom du donjon</option> <option value="boss">Nom du boss</option> <option value="zone">Zone</option> </select> <ul id="notebook_ul"> <li ng-repeat="notebook in notebooks | filter:query | orderBy: orderList"> <div class="left top"><img src="{{notebook.imageSource}}"/></div> Donjon : <b>{{notebook.donjon}}</b><br/> Boss : <b>{{notebook.boss}}</b><br/> {{notebook.clef}}<br/> Zone : <b>{{notebook.zone}}</b><br/> Succès : <b>{{notebook.succes}}</b><br/> <div class="right top">{{notebook.niveau}}</div> </li> </ul> <span>Nombre de donjons dans la base : {{notebooks.length}}. <a href="index.html">Revenir à l'accueil</a></span> </div> <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js'></script> <script src='https://pxtrack.herokuapp.com/embed/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyIjoxLCJ0aXRsZSI6ImNvZGVwZW4uaW8gaGl0cyIsImlhdCI6MTQ1ODYwMzAzNX0.iveKvifh0UE3q-1ym6_nvyQ_4cJu_ewGPhrt5eTCicQ/pxtrack.js'></script> <div id="aisling"><img src="img/aisling.png"></div> <script src="js/livre.js"></script> </body> </html>