Added some earlier mockups to git, but not to the tarball dist.
[online-glom:gwt-glom.git] / mockups / details-contacts.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
4
5 <head>
6         <title>Database: Table</title>
7         <link href="style.css" rel="stylesheet" type="text/css" />
8 </head>
9
10 <body>
11
12         <div id="headbox">
13                 <div class="backlink">
14                         <a href="listview-contacts.html">Back to List</a>
15                 </div>
16                 
17                 <form  class="tablechooser" action="">
18                         <label>Table: </label>
19                         <select>
20                                 <option selected="selected">Contacts</option>
21                                 <option>Projects</option>
22                                 <option>Teams</option>
23                         </select>
24                         <input class="tablechooser-submit" type="submit" value="Go"/>
25                 </form>
26                 
27                 <div style="clear: both"></div>
28         </div>
29
30         <div class="group">
31                 <h2 class="group-title">Overview</h2>
32                 <div class="group-contents">
33                         <table class="columns"><tr>
34                                 <td>
35                                         <p class="details-cell">
36                                                 <span class="details-label">Contact ID:</span>
37                                                 <span class="details-data">0</span>
38                                         </p>
39                                 </td>
40                                 <td>
41                                         <p class="details-cell">
42                                                 <span class="details-label">Full Name:</span>
43                                                 <span class="details-data">Murray Cumming</span>
44                                         </p>
45                                 </td>
46                         </tr></table>
47                 </div>
48         </div>
49         
50         <div class="group">
51                 <div class="group-contents">
52                         <table class="columns"><tr>
53                                 <td>
54                                         <!-- notebook here -->
55                                 
56                                         <h2 class="group-title">Team Membership</h2>
57                                         <div class="group-contents">
58                                                 <table class="data-list">
59                                                         <tr class="header-row">
60                                                                 <th>Team ID</th>
61                                                                 <th>Name</th>
62                                                                 <th>Role</th>
63                                                         </tr>
64                                                         <tr class="data-row">
65                                                                 <td>0</td>
66                                                                 <td>Quality Assurance</td>
67                                                                 <td>Tester</td>
68                                                         </tr>
69                                                 </table>
70                                         </div>
71                                         
72                                         <p class="details-cell">
73                                                 <span class="details-label">Birthday:</span>
74                                                 <span class="details-data">05/11/1973</span>
75                                         </p>
76                                 </td>
77                                 <td>
78                                         <p class="details-cell">
79                                                 <span class="details-label">Picture</span><br />
80                                                 <span class="details-data"><img src="lion_toy.jpg" width="200" alt="lion toy"/></span>
81                                         </p>
82                                 
83                                         <p class="details-cell">
84                                                 <span class="details-label">Comments:</span>
85                                                 <span class="details-data"></span>
86                                         </p>
87                                         
88                                         <p class="details-cell">
89                                                 <span class="details-label">Web Site:</span>
90                                                 <span class="details-data"><a href="http://www.murrayc.com">www.murrayc.com</a></span>
91                                         </p>
92                                         
93                                         <p class="details-cell">
94                                                 <span class="details-label">Email Address:</span>
95                                                 <span class="details-data"></span>
96                                         </p>
97                                 </td>
98                         </tr></table>
99                 </div>
100         </div>
101         
102         <div id="footbox">
103                 <span class="records">Displaying record 1 of 8</span>
104         
105                 <span class="details-navigation">
106                         <a href="">First</a>
107                         <a href="">Back</a>
108                         <a href="">Forward</a>
109                         <a href="">Last</a>
110                 </span>
111                 
112                 <div style="clear: both"></div>
113         </div>
114 </body>
115
116 </html>