jonmagic / webapp_gui
watch download tarball
public
Forks0Right
Watchers3Right
Description: An osx styled gui for web apps, credit goes to famfamfam for icons.
Homepage:
Clone URL: git://github.com/jonmagic/webapp_gui.git
webapp_gui / index.html
100644 161 lines (148 sloc) 8.371 kb
raw blame history 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
	  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	  <title>Web GUI Framework</title>
	  <script type="text/javascript" charset="utf-8" src="javascripts/jquery.js"></script>
    <script type="text/javascript" charset="utf-8" src="javascripts/jquery-ui.js"></script>
    <script type="text/javascript" charset="utf-8" src="javascripts/common.js"></script>
	  <link rel="stylesheet" href="stylesheets/blueprint/screen.css" type="text/css" media="screen, projection">
    <link rel="stylesheet" href="stylesheets/blueprint/print.css" type="text/css" media="print">    
    <!--[if IE]><link rel="stylesheet" href="/stylesheets/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
	  <link rel="stylesheet" href="stylesheets/jquery-theme.css" type="text/css" media="screen, projection">
	  <link rel="stylesheet" href="stylesheets/common.css" type="text/css" media="screen, projection">
  </head>
  <body class="container">
    
    <div id="header">
      <h1>Web GUI Framework</h1>
      <ul>
        <li><a href="#">Section 1</a></li>
        <li><a href="#">Section 2</a></li>
        <li><a href="#">Section 3</a></li>
      </ul>
    </div>
 
    <div id="center">
      <table class="itu">
        <tr>
          <th>Description</th>
          <th>Detail</th>
          <th>Stuff</th>
          <th>Updated</th>
        </tr>
        <tr><td><a href="#">Stuff that should be in a description</a></td><td><a href="#">Because details is good</a></td><td><a href="#">filler stuff</a></td><td><a href="#">Yesterday</a></td></tr>
        <tr><td><a href="#">Stuff that should be in a description</a></td><td><a href="#">Because details is good</a></td><td><a href="#">filler stuff</a></td><td><a href="#">Yesterday</a></td></tr>
        <tr><td><a href="#">Stuff that should be in a description</a></td><td><a href="#">Because details is good</a></td><td><a href="#">filler stuff</a></td><td><a href="#">Yesterday</a></td></tr>
        <tr><td><a href="#">Stuff that should be in a description</a></td><td><a href="#">Because details is good</a></td><td><a href="#">filler stuff</a></td><td><a href="#">Yesterday</a></td></tr>
        <tr><td><a href="#">Stuff that should be in a description</a></td><td><a href="#">Because details is good</a></td><td><a href="#">filler stuff</a></td><td><a href="#">Yesterday</a></td></tr>
        <tr><td><a href="#">Stuff that should be in a description</a></td><td><a href="#">Because details is good</a></td><td><a href="#">filler stuff</a></td><td><a href="#">Yesterday</a></td></tr>
        <tr><td><a href="#">Stuff that should be in a description</a></td><td><a href="#">Because details is good</a></td><td><a href="#">filler stuff</a></td><td><a href="#">Yesterday</a></td></tr>
      </table>
      
      <h2>Content Header H2</h2>
      <p>This is why the blue monkeys don't let panda's into their playground. It just doesn't work on a day to day basis.</p>
      
      <ul class="toolbar">
        <li><a href="#">New Thing</a></li>
        <li><a href="#">Add Stuff</a></li>
      </ul>
      
      <h3>Content Header H3</h3>
      <ul class="align"><li>stuff 1</li><li>stuff 2</li><li>stuff 3</li></ul>
      
      <h4>Content Header H4</h4>
      <ol class="align"><li>stuff 1</li><li>stuff 2</li><li>stuff 3</li></ol>
      
      <h2>email header style table</h2>
      <table class="m">
        <tr><td>Thing:</td><td><a href="#">Ball</a></td></tr>
        <tr><td>Stuff:</td><td><a href="#">Garbage</a></td></tr>
        <tr><td>Place:</td><td><a href="#">NoWhere</a></td></tr>
      </table>
      
      <h3>Some Tab ideas</h3>
      <div id="some_stuff">
        <ul>
          <li class="ui-tabs-nav-item"><a href="#stuff1" title="stuff1">Stuff One</a></li>
          <li class="ui-tabs-nav-item"><a href="#stuff2" title="stuff2">Stuff Two</a></li>
          <li class="ui-tabs-nav-item"><a href="#stuff3" title="stuff3">Stuff Three</a></li>
        </ul>
      
        <div id="stuff1">
          <h2>Header 2 inside a tab</h2>
          <p>This is some stuff</p>
          <h3>Content Header H3</h3>
          <ul class="align"><li>stuff 1</li><li>stuff 2</li><li>stuff 3</li></ul>
          <h4>Content Header H4</h4>
          <ol class="align"><li>stuff 1</li><li>stuff 2</li><li>stuff 3</li></ol>
        </div>
        <div id="stuff2"
          <table class="m">
            <tr><td>Thing:</td><td><a href="#">Ball</a></td></tr>
            <tr><td>Stuff:</td><td><a href="#">Garbage</a></td></tr>
            <tr><td>Place:</td><td><a href="#">NoWhere</a></td></tr>
          </table>
          <h3>Header 3 inside a tab</h3>
        </div>
        <div id="stuff3">
          <ul class="toolbar">
            <li><a href="#">New Thing</a></li>
            <li><a href="#">Add Stuff</a></li>
          </ul>
          <h3>table of stuff</h3>
          <ul class="toolbar">
            <li><a href="#">New Thing</a></li>
            <li><a href="#">Add Stuff</a></li>
          </ul>
          <table class="itu">
            <tr>
              <th>Description</th>
              <th>Detail</th>
              <th>Stuff</th>
              <th>Updated</th>
            </tr>
            <tr><td><a href="#">Stuff that should be in a description</a></td><td><a href="#">Because details is good</a></td><td><a href="#">filler stuff</a></td><td><a href="#">Yesterday</a></td></tr>
            <tr><td><a href="#">Stuff that should be in a description</a></td><td><a href="#">Because details is good</a></td><td><a href="#">filler stuff</a></td><td><a href="#">Yesterday</a></td></tr>
            <tr><td><a href="#">Stuff that should be in a description</a></td><td><a href="#">Because details is good</a></td><td><a href="#">filler stuff</a></td><td><a href="#">Yesterday</a></td></tr>
            <tr><td><a href="#">Stuff that should be in a description</a></td><td><a href="#">Because details is good</a></td><td><a href="#">filler stuff</a></td><td><a href="#">Yesterday</a></td></tr>
            <tr><td><a href="#">Stuff that should be in a description</a></td><td><a href="#">Because details is good</a></td><td><a href="#">filler stuff</a></td><td><a href="#">Yesterday</a></td></tr>
            <tr><td><a href="#">Stuff that should be in a description</a></td><td><a href="#">Because details is good</a></td><td><a href="#">filler stuff</a></td><td><a href="#">Yesterday</a></td></tr>
            <tr><td><a href="#">Stuff that should be in a description</a></td><td><a href="#">Because details is good</a></td><td><a href="#">filler stuff</a></td><td><a href="#">Yesterday</a></td></tr>
          </table>
        </div>
      </div>
      
    </div>
 
    <div id="sidebar">
      <h2>DEVICES</h2>
      <ul class="itu">
        <li><a href="#" class="device">Computer</a></li>
        <li><a href="#" class="device">Computer</a></li>
        <li><a href="#" class="device">Computer</a></li>
        <li><a href="#" class="device">Computer</a></li>
        <li><a href="#" class="device">Computer</a></li>
        <li><a href="#" class="device">Computer</a></li>
      </ul>
      <h2>CLIENTS</h2>
      <ul class="itu">
        <li><a href="#" class="person">Client Smith</a></li>
        <li><a href="#" class="person">Client Smith</a></li>
        <li><a href="#" class="person">Client Smith</a></li>
        <li><a href="#" class="person">Client Smith</a></li>
        <li><a href="#" class="person">Client Smith</a></li>
        <li><a href="#" class="person">Client Smith</a></li>
      </ul>
      <h2>BY STATUS</h2>
      <ul class="m">
        <li><a href="#" class="red_tag">Open</a><span>5</span></li>
        <li><a href="#" class="yellow_tag">Closed</a></li>
        <li><a href="#" class="orange_tag">Under</a><span>2</span></li>
        <li><a href="#" class="green_tag">Above</a><span>1</span></li>
      </ul>
      <br />
    </div>
    
    <div id="footer">
      <div class="col1">
        <a href="#">Sidebar Action</a>
      </div>
      <div class="col2">
        <a href="#">Center Action</a>
      </div>
      <div class="col3">
        <a href="#">App Action, like Logout</a>
      </div>
    </div>
    
  </body>
</html>