Commit 5d585f19b362bd60a30697bf204dedda55d465eb

Authored by Geoffrey Frogeye
2 parents 403eda2b 3ad816b7

Merge pull request #9 from GeoffreyFrogeye/mockup

Récupération du mockup
.gitignore 0 → 100644
... ... @@ -0,0 +1,2 @@
  1 +*materialize*
  2 +fonts
... ...
README.md
1 1 # 10p5-server
2 2 Serveur et client web pour le système de paiment de 10⁵
  3 +
  4 +##Installation
  5 +Installer [Materialize](http://materializecss.com/getting-started.html).
... ...
css/style.css 0 → 100644
... ... @@ -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 +}
... ...
footer.php 0 → 100644
... ... @@ -0,0 +1,17 @@
  1 + <footer class="page-footer red">
  2 + <div class="footer-copyright">
  3 + <div class="container">
  4 + 10p5 v0.0.0 - © Copyright 2016, <a href="http://clubinfo.plil.net">Le Club Info Polytech Lille</a>
  5 + </div>
  6 + </div>
  7 + </footer>
  8 +
  9 +
  10 + <!-- Scripts-->
  11 + <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  12 + <script src="js/materialize.js"></script>
  13 + <script src="js/init.js"></script>
  14 +
  15 + </body>
  16 +</html>
  17 +
... ...
header.php 0 → 100644
... ... @@ -0,0 +1,14 @@
  1 +<!DOCTYPE html>
  2 +<html lang="fr">
  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 +
... ...
index.php 0 → 100644
... ... @@ -0,0 +1,44 @@
  1 +<?php
  2 +include("header.php");
  3 +?>
  4 + <!-- Réutilisable -->
  5 + <!-- Page -->
  6 + <nav class="red" role="navigation">
  7 + <div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo">10⁵</a>
  8 + <ul class="right">
  9 + </ul>
  10 + </div>
  11 + </nav>
  12 +
  13 + <div class="section no-pad-bot" id="main">
  14 + <div class="container">
  15 + <br><br><br>
  16 + <h4>Se connecter</h4>
  17 + <h5>Avec votre identifiant et votre mot de passe</h4>
  18 + <div class="row">
  19 + <form class="col s12">
  20 + <div class="row">
  21 + <div class="input-field col s12">
  22 + <input type="text" id="login">
  23 + <label for="login">Identifiant</label>
  24 + </div>
  25 + </div>
  26 + <div class="row">
  27 + <div class="input-field col s12">
  28 + <input type="password" id="mdp">
  29 + <label for="mdp">Mot de passe</label>
  30 + </div>
  31 + </div>
  32 + <div class="row">
  33 + <a href="main.php" id="connecter" class="btn-large waves-effect waves-light">Se connecter</a>
  34 + </div>
  35 + </form>
  36 + </div>
  37 + <h5>Avec votre carte étudiant</h5>
  38 + <p>Passez-la simplement devant le lecteur</p>
  39 + </div>
  40 + </div>
  41 + </div>
  42 +<?php
  43 +include "footer.php"
  44 +?>
... ...
js/init.js 0 → 100644
... ... @@ -0,0 +1,16 @@
  1 +$(function(){
  2 + $('.button-collapse').sideNav();
  3 + $('.modal-trigger').leanModal()
  4 + Materialize.toast("Connecté en tant que vigou", 4000);
  5 +}); // end of document ready
  6 +
  7 +function vendu() {
  8 + var interieur = $("<span>").text("Vendu 1 bière à KAE1EET2YI (15,30 € → 13,50 €) ").append(
  9 + $("<a>").attr("href", "#!").text("Annuler")
  10 + );
  11 + Materialize.toast(interieur, 4000);
  12 +}
  13 +
  14 +function soldeInsuffisant() {
  15 + $("#soldeInsuffisant").openModal();
  16 +}
... ...
main.php 0 → 100644
... ... @@ -0,0 +1,127 @@
  1 +<?php
  2 +include("header.php");
  3 +?>
  4 + <!-- Réutilisable -->
  5 + <ul id="menuUtilisateur" class="dropdown-content">
  6 + <li><a href="#!">Se déconnecter</a></li>
  7 + <li><a href="#!">Changer de mot de passe</a></li>
  8 + <li><a href="#!">Changer de carte</a></li>
  9 + <li class="prezSeul"><a href="#!">Gestion des utilisateurs</a></li>
  10 + </ul>
  11 + <div id="passerCarte" class="modal">
  12 + <div class="modal-content">
  13 + <h4>Passez la carte du client</h4>
  14 + <p>Veuillez passer la carte du client concerné pour finaliser l'action suivante : <strong>recharger 10 €</strong>.</p>
  15 + </div>
  16 + <div class="modal-footer">
  17 + <a href="#!" class="modal-action modal-close waves-effect waves-red btn-flat">Annuler</a>
  18 + </div>
  19 + </div>
  20 + <div id="soldeInsuffisant" class="modal">
  21 + <div class="modal-content">
  22 + <h4>Solde insuffisant</h4>
  23 + <p>
  24 + Le solde de la carte <strong>QUAELUY1RO</strong> n'est pas suffisant pour effectuer un paiement de 3,50 €.<br/>
  25 + Solde actuel : 2,70 €<br/>
  26 + Manquant : 0,80 €<br/>
  27 + </p>
  28 + </div>
  29 + <div class="modal-footer">
  30 + <a href="#rechargement" class="modal-action modal-close waves-effect waves-green btn-flat">Recharger</a>
  31 + <a href="#!" class="modal-action modal-close waves-effect waves-red btn-flat">Annuler</a>
  32 + </div>
  33 + </div>
  34 +
  35 + <!-- Page -->
  36 + <nav class="red" role="navigation">
  37 + <div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo">10⁵</a>
  38 + <ul class="right hide-on-med-and-down">
  39 + <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>
  40 + </ul>
  41 +
  42 + <ul id="nav-mobile" class="side-nav">
  43 + <li><a href="#">TODO</a></li>
  44 + </ul>
  45 + <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
  46 + </div>
  47 + <div class="col s12 red">
  48 + <ul class="tabs red">
  49 + <li class="tab col s3"><a href="#creation">Création</a></li>
  50 + <li class="tab col s3"><a href="#rechargement">Rechargement</a></li>
  51 + <li class="tab col s3"><a class="active" href="#paiement">Paiement</a></li>
  52 + <li class="tab col s3"><a href="#vidange">Vidange</a></li>
  53 + </ul>
  54 + </div>
  55 + </nav>
  56 + <div class="section no-pad-bot" id="main">
  57 + <div class="container">
  58 + <br><br><br>
  59 + <div class="row center">
  60 + <div id="creation">
  61 + <h5>Créer un nouveau client</h5>
  62 + <div class="row">
  63 + <form class="col s12">
  64 + <div class="input-field col s12">
  65 + <input type="number" id="solde">
  66 + <label for="solde">Solde initial (€)</label>
  67 + </div>
  68 + <div class="row center">
  69 + <a href="#!" id="creer" class="btn-large waves-effect waves-light">Créer</a>
  70 + </div>
  71 + </form>
  72 + </div>
  73 + </div>
  74 + <div id="rechargement">
  75 + <h5>Recharger un client</h5>
  76 + <div class="row">
  77 + <form class="col s12">
  78 + <div class="input-field col s12">
  79 + <input type="number" id="credit">
  80 + <label for="credit">Crédit (€)</label>
  81 + </div>
  82 + <div class="row center">
  83 + <a href="#passerCarte" id="recharger" class="btn-large waves-effect waves-light btn modal-trigger">Recharger</a>
  84 + </div>
  85 + </form>
  86 + </div>
  87 + </div>
  88 + <div id="paiement">
  89 + <h5>Vendre à un client</h5>
  90 + <div class="row">
  91 + <form class="col s12">
  92 + <div id="grilleBieres">
  93 + <div class="row">
  94 + <div class="col s4"><a onclick="vendu()" class="waves-effect waves-light btn">1</a></div>
  95 + <div class="col s4"><a class="waves-effect waves-light btn">2</a></div>
  96 + <div class="col s4"><a class="waves-effect waves-light btn">3</a></div>
  97 + </div>
  98 + <div class="row">
  99 + <div class="col s4"><a class="waves-effect waves-light btn">4</a></div>
  100 + <div class="col s4"><a class="waves-effect waves-light btn">5</a></div>
  101 + <div class="col s4"><a class="waves-effect waves-light btn">6</a></div>
  102 + </div>
  103 + </div>
  104 + <div class="row">
  105 + <div class="input-field col s12">
  106 + <input type="number" id="prix">
  107 + <label for="prix">Prix (€)</label>
  108 + </div>
  109 + </div>
  110 + <div class="row center">
  111 + <a href="#!" id="payer" onclick="soldeInsuffisant()" class="btn-large waves-effect waves-light">Payer</a>
  112 + </div>
  113 + </form>
  114 + </div>
  115 + </div>
  116 + <div id="vidange">
  117 + <h5>Vider le contenu de la carte d'un client</h5>
  118 + <div class="row center">
  119 + <a href="#!" id="payer" class="btn-large waves-effect waves-light">Vider</a>
  120 + </div>
  121 + </div>
  122 + </div>
  123 + </div>
  124 + </div>
  125 +<?php
  126 +include "footer.php"
  127 +?>
... ...