Commit bf26706cb5fc0dfecf5f313a9f37b414688d3342

Authored by Geoffrey PREUD'HOMME
1 parent 4c00e1e3

Écran principal

Showing 3 changed files with 211 additions and 0 deletions   Show diff stats
css/style.css 0 → 100644
@@ -0,0 +1,45 @@ @@ -0,0 +1,45 @@
  1 +body {
  2 + display: flex;
  3 + min-height: 100vh;
  4 + flex-direction: column;
  5 +}
  6 +
  7 +#main {
  8 + flex: 1 0 auto;
  9 +}
  10 +
  11 +nav i.material-icons {
  12 + display: inline;
  13 + font-size: 1rem;
  14 +}
  15 +
  16 +nav .tabs .tab a {
  17 + color: white;
  18 +}
  19 +
  20 +nav .tabs .indicator {
  21 + background-color: #fff59d;
  22 +}
  23 +
  24 +#toast-container {
  25 + top: inherit;
  26 + bottom: 10%;
  27 +
  28 +}
  29 +
  30 +#toast a {
  31 + text-transform: uppercase;
  32 +}
  33 +
  34 +#grilleBieres a {
  35 + width: 90%;
  36 + padding: 25px;
  37 + height: 100px;
  38 + font-size: 3em;
  39 +}
  40 +
  41 +footer.page-footer {
  42 + margin-top: 0;
  43 + padding-top: 0;
  44 +
  45 +}
index.html 0 → 100644
@@ -0,0 +1,151 @@ @@ -0,0 +1,151 @@
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  5 + <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
  6 + <title>10⁵</title>
  7 +
  8 + <!-- CSS -->
  9 + <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  10 + <link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
  11 + <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
  12 +</head>
  13 +<body>
  14 + <!-- Réutilisable -->
  15 + <ul id="menuUtilisateur" class="dropdown-content">
  16 + <li><a href="#!">Se déconnecter</a></li>
  17 + <li><a href="#!">Changer de mot de passe</a></li>
  18 + <li><a href="#!">Changer de carte</a></li>
  19 + <li class="prezSeul"><a href="#!">Gestion des utilisateurs</a></li>
  20 + </ul>
  21 + <div id="passerCarte" class="modal">
  22 + <div class="modal-content">
  23 + <h4>Passez la carte du client</h4>
  24 + <p>Veuillez passer la carte du client concerné pour finaliser l'action suivante : <strong>recharger 10 €</strong>.</p>
  25 + </div>
  26 + <div class="modal-footer">
  27 + <a href="#!" class="modal-action modal-close waves-effect waves-red btn-flat">Annuler</a>
  28 + </div>
  29 + </div>
  30 + <div id="soldeInsuffisant" class="modal">
  31 + <div class="modal-content">
  32 + <h4>Solde insuffisant</h4>
  33 + <p>
  34 + Le solde de la carte <strong>QUAELUY1RO</strong> n'est pas suffisant pour effectuer un paiement de 3,50 €.<br/>
  35 + Solde actuel : 2,70 €<br/>
  36 + Manquant : 0,80 €<br/>
  37 + </p>
  38 + </div>
  39 + <div class="modal-footer">
  40 + <a href="#rechargement" class="modal-action modal-close waves-effect waves-green btn-flat">Recharger</a>
  41 + <a href="#!" class="modal-action modal-close waves-effect waves-red btn-flat">Annuler</a>
  42 + </div>
  43 + </div>
  44 +
  45 + <!-- Page -->
  46 + <nav class="red" role="navigation">
  47 + <div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo">10⁵</a>
  48 + <ul class="right hide-on-med-and-down">
  49 + <li><a class="dropdown-button" href="#!" data-activates="menuUtilisateur"><i class="material-icons">perm_identity</i> vigou (<i class="material-icons">timer</i> 3:12)</a></li>
  50 + </ul>
  51 +
  52 + <ul id="nav-mobile" class="side-nav">
  53 + <li><a href="#">TODO</a></li>
  54 + </ul>
  55 + <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
  56 + </div>
  57 + <div class="col s12 red">
  58 + <ul class="tabs red">
  59 + <li class="tab col s3"><a href="#creation">Création</a></li>
  60 + <li class="tab col s3"><a href="#rechargement">Rechargement</a></li>
  61 + <li class="tab col s3"><a class="active" href="#paiement">Paiement</a></li>
  62 + <li class="tab col s3"><a href="#vidange">Vidange</a></li>
  63 + </ul>
  64 + </div>
  65 + </nav>
  66 + <div class="section no-pad-bot" id="main">
  67 + <div class="container">
  68 + <br><br><br>
  69 + <div class="row center">
  70 + <div id="creation">
  71 + <h5>Créer un nouveau client</h5>
  72 + <div class="row">
  73 + <form class="col s12">
  74 + <div class="input-field col s12">
  75 + <input type="number" id="solde">
  76 + <label for="solde">Solde initial (€)</label>
  77 + </div>
  78 + <div class="row center">
  79 + <a href="#!" id="creer" class="btn-large waves-effect waves-light">Créer</a>
  80 + </div>
  81 + </form>
  82 + </div>
  83 + </div>
  84 + <div id="rechargement">
  85 + <h5>Recharger un client</h5>
  86 + <div class="row">
  87 + <form class="col s12">
  88 + <div class="input-field col s12">
  89 + <input type="number" id="credit">
  90 + <label for="credit">Crédit (€)</label>
  91 + </div>
  92 + <div class="row center">
  93 + <a href="#passerCarte" id="recharger" class="btn-large waves-effect waves-light btn modal-trigger">Recharger</a>
  94 + </div>
  95 + </form>
  96 + </div>
  97 + </div>
  98 + <div id="paiement">
  99 + <h5>Vendre à un client</h5>
  100 + <div class="row">
  101 + <form class="col s12">
  102 + <div id="grilleBieres">
  103 + <div class="row">
  104 + <div class="col s4"><a onclick="vendu()" class="waves-effect waves-light btn">1</a></div>
  105 + <div class="col s4"><a class="waves-effect waves-light btn">2</a></div>
  106 + <div class="col s4"><a class="waves-effect waves-light btn">3</a></div>
  107 + </div>
  108 + <div class="row">
  109 + <div class="col s4"><a class="waves-effect waves-light btn">4</a></div>
  110 + <div class="col s4"><a class="waves-effect waves-light btn">5</a></div>
  111 + <div class="col s4"><a class="waves-effect waves-light btn">6</a></div>
  112 + </div>
  113 + </div>
  114 + <div class="row">
  115 + <div class="input-field col s12">
  116 + <input type="number" id="prix">
  117 + <label for="prix">Prix (€)</label>
  118 + </div>
  119 + </div>
  120 + <div class="row center">
  121 + <a href="#!" id="payer" onclick="soldeInsuffisant()" class="btn-large waves-effect waves-light">Payer</a>
  122 + </div>
  123 + </form>
  124 + </div>
  125 + </div>
  126 + <div id="vidange">
  127 + <h5>Vider le contenu de la carte d'un client</h5>
  128 + <div class="row center">
  129 + <a href="#!" id="payer" class="btn-large waves-effect waves-light">Vider</a>
  130 + </div>
  131 + </div>
  132 + </div>
  133 + </div>
  134 + </div>
  135 +
  136 + <footer class="page-footer red">
  137 + <div class="footer-copyright">
  138 + <div class="container">
  139 + 10p5 v0.0.0 - © Copyright 2016, <a href="http://clubinfo.plil.net">Le Club Info Polytech Lille</a>
  140 + </div>
  141 + </div>
  142 + </footer>
  143 +
  144 +
  145 + <!-- Scripts-->
  146 + <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  147 + <script src="js/materialize.js"></script>
  148 + <script src="js/init.js"></script>
  149 +
  150 + </body>
  151 +</html>
js/init.js 0 → 100644
@@ -0,0 +1,15 @@ @@ -0,0 +1,15 @@
  1 +$(function(){
  2 + $('.button-collapse').sideNav();
  3 + $('.modal-trigger').leanModal()
  4 +}); // end of document ready
  5 +
  6 +function vendu() {
  7 + var interieur = $("<span>").text("Vendu 1 bière à KAE1EET2YI (15,30 € → 13,50 €) ").append(
  8 + $("<a>").attr("href", "#!").text("Annuler")
  9 + );
  10 + Materialize.toast(interieur, 4000);
  11 +}
  12 +
  13 +function soldeInsuffisant() {
  14 + $("#soldeInsuffisant").openModal();
  15 +}