Project

General

Profile

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

calebasse / mockups / hig.html @ 0d4bf0b4

1
<!DOCTYPE html>
2
<html lang="fr">
3
  <head>
4
    <meta charset="utf-8"/>
5
    <title>APS42 — HIG</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

    
12
    <script>
13
	$(function() {
14
		$('#tabs').tabs();
15

    
16
                $('button.blind').next().hide();
17
                $('button.blind').click(function() {
18
                        $(this).next().toggle('blind');
19
                });
20
	});
21
	</script>
22

    
23
  </head>
24
  <body>
25
  <div id="wrap-large">
26
    <div id="header">
27
      <h1><a href="accueil.html">APS 42</a></h1>
28
      <span>Section - SERVICE</span>
29
    </div>
30
    <div id="splash">
31
      <div id="user-links">
32
        <a href="connexion.html">Déconnexion</a>
33
      </div>
34
    </div>
35
    <div id="content">
36

    
37
    <div id="appbar">
38
    <h2>Titre</h2>
39
    <a href="accueil.html">Retourner à l'accueil</a>
40
    <button>Une autre action</button>
41
    <button>Une action en rapport</button>
42
    </div>
43

    
44
    <div id="extra-top-links">
45
     <a href="#">Lien vers une page en rapport</a>
46
47
     <a href="#">Autre lien</a>
48
    </div>
49

    
50

    
51
    <div id="users">
52
     <p>
53
      Une éventuelle colonne sur la droite, à utiliser pour les pages de
54
      tableau pour lesquelles il faut une zone de recherche / filtre.
55
     </p>
56
   </div>
57

    
58
   <div class="content">
59

    
60
   <table class="main">
61
    <thead>
62
    <tr>
63
     <th>Colonne 1</th>
64
     <th>Colonne 2</th>
65
     <th>Colonne 3</th>
66
    </tr>
67
    </thead>
68
    <tbody>
69
    <tr> <td>Bla bla bla</td> <td>Foo</td> <td>Bar</td> </tr>
70
    <tr> <td>Bla bla bla</td> <td>Foo</td> <td>Bar</td> </tr>
71
    <tr> <td>Bla bla bla</td> <td>Foo</td> <td>Bar</td> </tr>
72
    <tr> <td>Bla bla bla</td> <td>Foo</td> <td>Bar</td> </tr>
73
    <tr> <td>Bla bla bla</td> <td>Foo</td> <td>Bar</td> </tr>
74
    </tbody>
75
   </table>
76

    
77
   <p>
78
    Bla bla bla
79
   </p>
80

    
81
   <div class="frame">
82
   <h3>Un bloc d'informations</h3>
83
   <p>
84
    Bonjour tout le monde.
85
   </p>
86
   <ul>
87
    <li>Un résumé d'info <button class="blind">détails</button>
88
     <ul>
89
      <li>Bla bla bla</li>
90
      <li>Bla bla bla</li>
91
     </ul>
92
    </li>
93
   </ul>
94
   </div> <!-- .frame -->
95

    
96
    <div id="tabs">
97
    <ul>
98
     <li><a href="#tabs-hig-1">Premier onglet</a></li>
99
     <li><a href="#tabs-hig-2">Second onglet</a></li>
100
    </ul>
101
    <div id="tabs-hig-1">
102
     <p>
103
      Hello world.
104
     </p>
105
    </div>
106
    <div id="tabs-hig-2">
107
     <p>
108
      Lorem ipstum.
109
     </p>
110
    </div>
111
   </div> <!-- #tabs -->
112

    
113
   <p>Bla bla bla</p>
114

    
115
   </div>
116

    
117
    </div>
118

    
119
    <div id="footer">
120
121
    </div>
122
  </div>
123

    
124
  <div id="rdv" style="display: none;">
125
   <form>
126
   <p>
127
   <label for="id_date">Date:</label>
128
   <input id="id_date" class="date" name="date" value="5/7/2012"/>
129
   </p>
130
   <table><tr><td>
131
   <p>
132
    <label for="id_debut">Heure de début :</label>
133
    <input id="id_debut" type="text" name="debut" maxlength="10"/>
134
   </p>
135
   </td><td>
136
   <p>
137
    <label for="id_fin">Heure de fin :</label>
138
    <input id="id_fin" type="text" name="fin" maxlength="10"/>
139
   </p>
140
   </td></tr>
141

    
142
   <tr>
143
   <td>
144
   <h4>Intervenants</h4>
145
   <div id="intervenants">
146
    <ul>
147
     <li><input type="checkbox" value="Bob Léponge" checked="checked">Bob Léponge</input></li>
148
     <li><input type="checkbox" value="Sandy Kilo" checked="checked">Sandy Kilo</input></li>
149
    </ul>
150
    <a href="#">Ajouter</a><br/>
151
    <a href="#">Tout le monde</a>
152
   </div>
153
   </td>
154
   <td>
155
   <h4>Patient</h4>
156
   <input name="patient"/>
157
   <a href="#">rechercher</a>
158

    
159
   <h4>Type d'acte</h4>
160
   <select>
161
    <option>Analyse</option>
162
    <option>Bla bla bla bla bla bla</option>
163
   </select>
164
   </td>
165
   </tr>
166
   </table>
167

    
168
   <a class="button">Configurer la périodicité</a>
169

    
170
   </form>
171
  </div>
172

    
173

    
174
  </body>
175
</html>
(15-15/23)