Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 347 lines (338 sloc) 17.511 kB
9c392b3 @jeremydurham Added XHTML 1.0 Strict
jeremydurham authored
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
78567a3 @pilu initial layout
pilu authored
3 <head>
ea5d652 @jeremydurham Added alt tags
jeremydurham authored
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6c2ddac @jeremydurham Fixed typo in title (Wep - Web)
jeremydurham authored
5 <title>Web App Theme</title>
ea5d652 @jeremydurham Added alt tags
jeremydurham authored
6 <link rel="stylesheet" href="stylesheets/base.css" type="text/css" media="screen" />
fe53a06 @pilu moved themes under stylesheets folder
pilu authored
7 <link rel="stylesheet" id="current-theme" href="stylesheets/themes/default/style.css" type="text/css" media="screen" />
934b0ff @jeremydurham Added jQuery 1.3
jeremydurham authored
8 <script type="text/javascript" charset="utf-8" src="javascripts/jquery-1.3.min.js"></script>
d7d96f0 @pilu added scroll with jquery.scrollTo
pilu authored
9 <script type="text/javascript" charset="utf-8" src="javascripts/jquery.scrollTo.js"></script>
10 <script type="text/javascript" charset="utf-8" src="javascripts/jquery.localscroll.js"></script>
34a99f8 @pilu added switch theme function
pilu authored
11 <script type="text/javascript" charset="utf-8">
bd060a5 @pilu added a green theme
pilu authored
12 var Theme = {
13 activate: function(name) {
7325124 @pilu current theme is saved in window.location.hash
pilu authored
14 window.location.hash = 'themes/' + name
15 Theme.loadCurrent();
16 },
17
18 loadCurrent: function() {
b74d740 @pilu changed in url theme check
pilu authored
19 var hash = window.location.hash;
20 if (hash.length > 0) {
21 matches = hash.match(/^#themes\/([a-z0-9\-_]+)$/);
22 if (matches && matches.length > 1) {
fe53a06 @pilu moved themes under stylesheets folder
pilu authored
23 $('#current-theme').attr('href', 'stylesheets/themes/' + matches[1] + '/style.css');
b74d740 @pilu changed in url theme check
pilu authored
24 } else {
25 alert('theme not valid');
26 }
7325124 @pilu current theme is saved in window.location.hash
pilu authored
27 }
bd060a5 @pilu added a green theme
pilu authored
28 }
d7d96f0 @pilu added scroll with jquery.scrollTo
pilu authored
29 }
7325124 @pilu current theme is saved in window.location.hash
pilu authored
30
d7d96f0 @pilu added scroll with jquery.scrollTo
pilu authored
31 $(document).ready(function() {
32 Theme.loadCurrent();
2bee3b9 @pilu added js for checkbox .toggle
pilu authored
33 $.localScroll();
34 $('.table :checkbox.toggle').each(function(i, toggle) {
35 $(toggle).change(function(e) {
36 $(toggle).parents('table:first').find(':checkbox:not(.toggle)').each(function(j, checkbox) {
37 checkbox.checked = !checkbox.checked;
38 })
39 });
40 });
d7d96f0 @pilu added scroll with jquery.scrollTo
pilu authored
41 });
34a99f8 @pilu added switch theme function
pilu authored
42 </script>
78567a3 @pilu initial layout
pilu authored
43 </head>
44 <body>
45 <div id="container">
46 <div id="header">
1474f1b @pilu moved user-navigation
pilu authored
47 <h1><a href="index.html">Wep App Theme</a></h1>
78567a3 @pilu initial layout
pilu authored
48 <div id="user-navigation">
49 <ul>
50 <li><a href="#">Profile</a></li>
51 <li><a href="#">Settings</a></li>
52 <li><a href="#">Logout</a></li>
53 </ul>
54 <div class="clear"></div>
1474f1b @pilu moved user-navigation
pilu authored
55 </div>
78567a3 @pilu initial layout
pilu authored
56 <div id="main-navigation">
57 <ul>
ed76362 @pilu changed navigation in default theme.
pilu authored
58 <li class="first"><a href="#block-text">Main Page</a></li>
59 <li class="active"><a href="#block-text">Active</a></li>
78567a3 @pilu initial layout
pilu authored
60 </ul>
61 <div class="clear"></div>
62 </div>
63 </div>
64 <div id="wrapper">
e8f047b @pilu refactoring
pilu authored
65 <div id="main">
66
2b598df @pilu added id to blocks
pilu authored
67 <div class="block" id="block-text">
e8f047b @pilu refactoring
pilu authored
68 <div class="secondary-navigation">
69 <ul>
70 <li class="active first"><a href="#block-text">Text</a></li>
71 <li><a href="#block-tables">Tables</a></li>
72 <li><a href="#block-forms">Forms</a></li>
73 <li><a href="#block-messages">Messages</a></li>
74 <li><a href="#block-forms-2">2 Columns Forms</a></li>
75 <li><a href="#block-lists">Lists</a></li>
76 </ul>
77 <div class="clear"></div>
78 </div>
79 <h2 class="title">Text</h2>
80 <div class="content">
81 <p class="first">
82 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <span class="hightlight">Excepteur sint occaecat cupidatat non proident</span>, sunt in culpa qui officia deserunt mollit anim id est laborum.
83 </p>
c07fba5 added nelson fernandez contribution
Giovanni Intini authored
84 <p> <span class="small">small text</span></p>
85 <p> <span class="gray">gray text</span></p>
e8f047b @pilu refactoring
pilu authored
86 <hr />
87 <p>
88 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <span class="hightlight">Excepteur sint occaecat cupidatat non proident</span>, sunt in culpa qui officia deserunt mollit anim id est laborum.
89 </p>
90 </div>
91 </div>
92
2b598df @pilu added id to blocks
pilu authored
93 <div class="block" id="block-tables">
e8f047b @pilu refactoring
pilu authored
94 <div class="secondary-navigation">
95 <ul>
96 <li class="first"><a href="#block-text">Text</a></li>
97 <li class="active"><a href="#block-tables">Tables</a></li>
98 <li><a href="#block-forms">Forms</a></li>
99 <li><a href="#block-messages">Messages</a></li>
100 <li><a href="#block-forms-2">2 Columns Forms</a></li>
101 <li><a href="#block-lists">Lists</a></li>
102 </ul>
103 <div class="clear"></div>
104 </div>
105 <h2 class="title">Tables</h2>
106 <div class="content">
56e4ad9 @pilu styled buttons.
pilu authored
107 <form action="#" class="form">
108 <table class="table">
109 <tr>
110 <th class="first">ID</th>
111 <th>Login</th>
112 <th>Name</th>
113 <th>Surname</th>
114 <th class="last checkbox"><input type="checkbox" class="toggle" /></th>
115 </tr>
116 <tr>
117 <td>1</td><td>hulk</td><td>Hulk</td><td>Hogan</td><td><input type="checkbox" class="checkbox" name="id" value="1" /></td>
118 </tr>
119 <tr>
120 <td>2</td><td>ultimate</td><td>Ultimate</td><td>Warrior</td><td><input type="checkbox" class="checkbox" name="id" value="1" /></td>
121 </tr>
122 <tr>
123 <td>3</td><td>andre</td><td>Andre</td><td>The Giant</td><td><input type="checkbox" class="checkbox" name="id" value="1" /></td>
124 </tr>
125 <tr>
126 <td>4</td><td>machoman</td><td>Macho Man</td><td>Randy Savage</td><td><input type="checkbox" class="checkbox" name="id" value="1" /></td>
127 </tr>
128 </table>
129 <div class="actions-bar">
130 <div class="actions">
131 <input type="submit" class="button" value="Delete" class="button">
132 </div>
133 <div class="pagination">
134 <span class="current">1</span><a href="#">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a><a href="#">6</a><a href="#">7</a><a href="#">8</a><a href="#">9</a><a href="#">10</a><a href="#">Next »</a>
135 </div>
136 <div class="clear"></div>
137 </div>
138 </form>
78567a3 @pilu initial layout
pilu authored
139 </div>
c07fba5 added nelson fernandez contribution
Giovanni Intini authored
140 </div>
78567a3 @pilu initial layout
pilu authored
141
2b598df @pilu added id to blocks
pilu authored
142 <div class="block" id="block-forms">
e8f047b @pilu refactoring
pilu authored
143 <div class="secondary-navigation">
144 <ul>
145 <li class="first"><a href="#block-text">Text</a></li>
146 <li><a href="#block-tables">Tables</a></li>
147 <li class="active"><a href="#block-forms">Forms</a></li>
148 <li><a href="#block-messages">Messages</a></li>
149 <li><a href="#block-forms-2">2 Columns Forms</a></li>
150 <li><a href="#block-lists">Lists</a></li>
151 </ul>
152 <div class="clear"></div>
153 </div>
c07fba5 added nelson fernandez contribution
Giovanni Intini authored
154 <h2 class="title">Forms</h2>
e8f047b @pilu refactoring
pilu authored
155 <div class="content">
c07fba5 added nelson fernandez contribution
Giovanni Intini authored
156 <form action="#" method="get" class="form">
78567a3 @pilu initial layout
pilu authored
157 <div class="group">
158 <label class="title">Text field</label>
159 <input type="text" class="text" />
8a99a55 @pilu added form field description
pilu authored
160 <span class="description">Ex: a simple text</span>
78567a3 @pilu initial layout
pilu authored
161 </div>
162 <div class="group">
163 <label class="title">Text area</label>
ea5d652 @jeremydurham Added alt tags
jeremydurham authored
164 <textarea class="textarea" rows="10" cols="80"></textarea>
8a99a55 @pilu added form field description
pilu authored
165 <span class="description">Write here a long text</span>
78567a3 @pilu initial layout
pilu authored
166 </div>
c07fba5 added nelson fernandez contribution
Giovanni Intini authored
167 <div class="group navform">
56e4ad9 @pilu styled buttons.
pilu authored
168 <input type="submit" class="button" value="Save &rarr;" /> or <a href="#header">Cancel</a>
78567a3 @pilu initial layout
pilu authored
169 </div>
c07fba5 added nelson fernandez contribution
Giovanni Intini authored
170 </form>
171 </div>
172 </div>
e8f047b @pilu refactoring
pilu authored
173
2b598df @pilu added id to blocks
pilu authored
174 <div class="block" id="block-messages">
e8f047b @pilu refactoring
pilu authored
175 <div class="secondary-navigation">
176 <ul>
177 <li class="first"><a href="#block-text">Text</a></li>
178 <li><a href="#block-tables">Tables</a></li>
179 <li><a href="#block-forms">Forms</a></li>
180 <li class="active"><a href="#block-messages">Messages</a></li>
181 <li><a href="#block-forms-2">2 Columns Forms</a></li>
182 <li><a href="#block-lists">Lists</a></li>
183 </ul>
184 <div class="clear"></div>
185 </div>
186 <h2 class="title">Messages</h2>
187 <div class="content">
188 <div class="flash-messages error">
189 <p>Error message</p>
190 </div>
191 <div class="flash-messages warning">
192 <p>Warning message</p>
193 </div>
194 <div class="flash-messages notice">
195 <p>Notice message</p>
196 </div>
197 </div>
198 </div>
199
2b598df @pilu added id to blocks
pilu authored
200 <div class="block" id="block-forms-2">
e8f047b @pilu refactoring
pilu authored
201 <div class="secondary-navigation">
202 <ul>
203 <li class="first"><a href="#block-text">Text</a></li>
204 <li><a href="#block-tables">Tables</a></li>
205 <li><a href="#block-forms">Forms</a></li>
206 <li><a href="#block-messages">Messages</a></li>
207 <li class="active"><a href="#block-forms-2">2 Columns Forms</a></li>
208 <li><a href="#block-lists">Lists</a></li>
209 </ul>
210 <div class="clear"></div>
211 </div>
c07fba5 added nelson fernandez contribution
Giovanni Intini authored
212 <h2 class="title">2 columns forms</h2>
e8f047b @pilu refactoring
pilu authored
213 <div class="content">
c07fba5 added nelson fernandez contribution
Giovanni Intini authored
214 <form action="#" method="get" class="form">
215 <div class="column left">
216 <div class="group">
217 <label class="title">Text field</label>
218 <input type="text" class="text" />
219 </div>
220 <div class="group">
221 <label class="title">Text area</label>
222 <textarea class="textarea" rows="10" cols="80"></textarea>
223 </div>
78567a3 @pilu initial layout
pilu authored
224 </div>
c07fba5 added nelson fernandez contribution
Giovanni Intini authored
225 <div class="column right">
226 <div class="group">
227 <label class="title">Select</label>
228 <select><option value="1">Choose...</option></select>
229 </div>
230 <div class="group">
231 <label class="title">Check box</label>
232 <div>
233 <input type="checkbox" name="checkbox" id="checkbox_1" class="checkbox" value="1" /> <label for="checkbox_1" class="checkbox">Option 1</label>
234 </div>
235 <div>
236 <input type="checkbox" name="checkbox" id="checkbox_2" class="checkbox" value="2" /> <label for="checkbox_2" class="checkbox">Option 2</label>
237 </div>
238 </div>
239 <div class="group">
240 <label class="title">Radio</label>
241 <div>
242 <input type="radio" name="radio" id="radio_1" class="checkbox" value="1" /> <label for="radio_1" class="radio">Option 1</label>
243 </div>
244 <div>
245 <input type="radio" name="radio" id="radio_2" class="checkbox" value="2" /> <label for="radio_2" class="radio">Option 2</label>
246 </div>
247 </div>
78567a3 @pilu initial layout
pilu authored
248 </div>
c07fba5 added nelson fernandez contribution
Giovanni Intini authored
249 <div class="clear"></div>
250 <div class="group navform">
56e4ad9 @pilu styled buttons.
pilu authored
251 <input type="submit" class="button" value="Save &rarr;" /> or <a href="#">Cancel</a>
c07fba5 added nelson fernandez contribution
Giovanni Intini authored
252 </div>
253 </form>
254 </div>
255 </div>
78567a3 @pilu initial layout
pilu authored
256
2b598df @pilu added id to blocks
pilu authored
257 <div class="block" id="block-lists">
e8f047b @pilu refactoring
pilu authored
258 <div class="secondary-navigation">
259 <ul>
260 <li class="first"><a href="#block-text">Text</a></li>
261 <li><a href="#block-tables">Tables</a></li>
262 <li><a href="#block-forms">Forms</a></li>
263 <li><a href="#block-messages">Messages</a></li>
264 <li><a href="#block-forms-2">2 Columns Forms</a></li>
265 <li class="active"><a href="#block-lists">Lists</a></li>
266 </ul>
267 <div class="clear"></div>
268 </div>
86aef74 @pilu removed lists with date
pilu authored
269 <h2 class="title">Lists</h2>
e8f047b @pilu refactoring
pilu authored
270 <div class="content">
c07fba5 added nelson fernandez contribution
Giovanni Intini authored
271 <ul class="list">
272 <li>
273 <div class="left">
274 <a href="#"><img class="avatar" src="images/avatar.png" alt="avatar" /></a>
275 </div>
276 <div class="item">
277 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
278 </div>
279 </li>
280 <li>
281 <div class="left">
282 <a href="#"><img class="avatar" src="images/avatar.png" alt="avatar" /></a>
283 </div>
284 <div class="item">
285 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
286 </div>
287 </li>
288 <li>
289 <div class="left">
290 <a href="#"><img class="avatar" src="images/avatar.png" alt="avatar" /></a>
291 </div>
292 <div class="item">
293 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
294 </div>
295 </li>
296 </ul>
297 </div>
86aef74 @pilu removed lists with date
pilu authored
298 </div>
c07fba5 added nelson fernandez contribution
Giovanni Intini authored
299
78567a3 @pilu initial layout
pilu authored
300 </div>
301 <div id="sidebar">
34a99f8 @pilu added switch theme function
pilu authored
302 <div class="block">
c340874 @pilu added simple block on sidebar
pilu authored
303 <h3>Simple Block</h3>
304 <div class="content">
305 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
306 </div>
307 </div>
308 <div class="block">
34a99f8 @pilu added switch theme function
pilu authored
309 <h3>Switch Theme</h3>
310 <ul class="navigation">
bd060a5 @pilu added a green theme
pilu authored
311 <li><a href="#" onclick="Theme.activate('default'); return false;">Default</a></li>
c07fba5 added nelson fernandez contribution
Giovanni Intini authored
312 <li class="last"><a href="#" onclick="Theme.activate('bec'); return false;">Bec</a></li>
e8f047b @pilu refactoring
pilu authored
313 <li><a href="#" onclick="Theme.activate('black-grey'); return false;">Black &amp; Grey</a></li>
34a99f8 @pilu added switch theme function
pilu authored
314 </ul>
315 </div>
316 <div class="block">
78567a3 @pilu initial layout
pilu authored
317 <h3>Sidebar</h3>
34a99f8 @pilu added switch theme function
pilu authored
318 <ul class="navigation">
d263b41 @pilu trallallero trallallà
pilu authored
319 <li><a href="#block-text">Text</a></li>
320 <li><a href="#block-tables">Tables</a></li>
321 <li><a href="#block-forms">Forms</a></li>
322 <li><a href="#block-messages">Messages</a></li>
323 <li><a href="#block-forms-2">2 Columns Forms</a></li>
324 <li><a href="#block-lists">Lists</a></li>
78567a3 @pilu initial layout
pilu authored
325 </ul>
326 </div>
c340874 @pilu added simple block on sidebar
pilu authored
327 <div class="block notice">
328 <h4>Notice Title</h4>
4a7ac72 @pilu fixed sidebar notice on bec theme
pilu authored
329 <p>Morbi posuere urna vitae nunc. Curabitur ultrices, lorem ac aliquam blandit, lectus eros hendrerit eros, at eleifend libero ipsum hendrerit urna. Suspendisse viverra. Morbi ut magna. Praesent id ipsum. Sed feugiat ipsum ut felis. Fusce vitae nibh sed risus commodo pulvinar. Duis ut dolor. Cras ac erat pulvinar tortor porta sodales. Aenean tempor venenatis dolor.</p>
c07fba5 added nelson fernandez contribution
Giovanni Intini authored
330 </div>
331 <div class="block">
332 <div class="sidebar-block">
333 <h4>Sidebar Inner block Title</h4>
334 <p>Morbi posuere urna vitae nunc. Curabitur ultrices, lorem ac <a href="#">aliquam blandit</a>, lectus eros hendrerit eros, at eleifend libero ipsum hendrerit urna. Suspendisse viverra. Morbi ut magna. Praesent id ipsum. Sed feugiat ipsum ut felis. Fusce vitae nibh sed risus commodo pulvinar. Duis ut dolor. Cras ac erat pulvinar tortor porta sodales. Aenean tempor venenatis dolor.</p>
335 </div>
336 </div>
78567a3 @pilu initial layout
pilu authored
337 </div>
338 <div class="clear"></div>
339 </div>
340 <div id="footer">
53577b2 @pilu changed footer
pilu authored
341 <div class="block">
342 <p>Copyright &copy; 2009 Your Site.</p>
343 </div>
78567a3 @pilu initial layout
pilu authored
344 </div>
345 </div>
346 </body>
d263b41 @pilu trallallero trallallà
pilu authored
347 </html>
Something went wrong with that request. Please try again.