Project

General

Profile

Download (3.6 KB) Statistics
| Branch: | Tag: | Revision:

calebasse / mockups / acces.html @ aff120df

1
<!DOCTYPE html>
2
<html lang="fr">
3
  <head>
4
    <meta charset="utf-8"/>
5
    <title>APS42 — Accès</title>
6
    <link rel="stylesheet" type="text/css" media="all" href="css/style.css"/>
7
    <link rel="stylesheet" type="text/css" media="all" href="css/smoothness/jquery-ui-1.8.21.custom.css"/>
8

    
9
    <script src="js/jquery-1.7.2.min.js"></script>
10
    <script src="js/jquery-ui-1.8.21.custom.min.js"></script>
11
    <script src="development-bundle/ui/i18n/jquery.ui.datepicker-fr.js"></script>
12
    <script>
13
	$(function() {
14
		$('#new-membre').click(function() {
15
			$('#new-membre-dlg').dialog({title: 'Nouvel accès',
16
				  width: '300px',
17
				  buttons: [ { text: "Fermer",
18
					       click: function() { $(this).dialog("close"); } },
19
					     { text: "Ajouter",
20
					       click: function() {
21
					       $(this).dialog("close"); } } ]
22
					});
23
			});
24
	});
25
	</script>
26
  </head>
27
  <body>
28
  <div id="wrap-large">
29
    <div id="header">
30
      <h1><a href="accueil.html">APS 42</a></h1>
31
      <span>Gestion - CMPP</span>
32
    </div>
33
    <div id="splash" class="cmpp">
34
      <div id="user-links">
35
        <a href="connexion.html">Déconnexion</a>
36
      </div>
37
    </div>
38
    <div id="content">
39

    
40
    <div id="appbar">
41
    <h2>Gestion des personnes — Accès</h2>
42
    <a href="gestion-personnes.html">Retourner à la gestion des personnes</a>
43

    
44
    <button id="new-membre">Nouvel accès</button>
45
    <br/>&nbsp;
46
    </div>
47

    
48
    <div id="sidebar">
49
     <div>
50
      <h3>Rechercher dans les comptes</h3>
51
       <label>Identifiant : <input type="text"/></label>
52
       <button>Rechercher</button>
53
     </div>
54
   </div>
55

    
56
   <div class="content">
57
   <table class="main">
58
    <thead>
59
     <tr>
60
     <th>Identifiant</th>
61
     <th>Courriel</th>
62
     <th>Fiche Personnel</th>
63
     </tr>
64
    </thead>
65
    <tbody>
66

    
67
     <tr>
68
      <td>fdurant</td>
69
      <td>fdurant@example.com</td>
70
      <td><a href="un-membre.html">Durant François</a>
71
      <td><button></button> <button>-</button> <button>Histo</button></td>
72
     </tr>
73

    
74
     <tr>
75
      <td>smaurier</td>
76
      <td>smaurier@example.com</td>
77
      <td><a href="#">Maurier Stéphanie</a></td>
78
      <td><button></button> <button>-</button> <button>Histo</button></td>
79
     </tr>
80

    
81
     <tr>
82
      <td>mhosseini</td>
83
      <td>mhosseini@example.com</td>
84
      <td><a href="#">Hosseini Marcus</a></td>
85
      <td><button></button> <button>-</button> <button>Histo</button></td>
86
     </tr>
87

    
88
     <tr>
89
      <td>mates</td>
90
      <td>mates@entrouvert.com</td>
91
      <td>-</td>
92
      <td><button></button> <button>-</button> <button>Histo</button></td>
93
     </tr>
94

    
95
    </tbody>
96
   </table>
97

    
98
   <h4>Comptes déactivés</h4>
99

    
100
   <table class="main">
101
    <thead>
102
     <tr>
103
     <th>Identifiant</th>
104
     <th>Courriel</th>
105
     <th>Fiche Personnel</th>
106
     </tr>
107
    </thead>
108
    <tbody>
109

    
110
     <tr>
111
      <td>gdupont</td>
112
      <td>gdupont@example.com</td>
113
      <td><a href="#">Dupont Gloria</a></td>
114
      <td><button></button> <button>+</button> <button>Histo</button></td>
115
     </tr>
116
    </tbody>
117
   </table>
118

    
119

    
120
   </div>
121

    
122
    </div>
123

    
124
    <div id="footer">
125
126
    </div>
127
  </div>
128

    
129
  <div id="new-membre-dlg" style="display: none;">
130
   <form>
131
   <p>
132
    <label for="id_nom">Identifiant :</label>
133
    <input id="id_nom" type="text" name="nom"/>
134
   </p>
135
   <p>
136
    <label for="id_password">Mot de passe :</label>
137
    <input id="id_password" type="text" name="password"/>
138
   </p>
139
   <p>
140
    <label for="id_member">Membre du personnel associé :</label>
141
    <select id="id_member" name="member">
142
     <option>aucun</option>
143
     <option>Bob Leponge</option>
144
     <option>...</option>
145
    </select>
146
   </p>
147
   </form>
148
  </div>
149
  </body>
150
</html>
(1-1/23)