Added a sample page that contains all of the UI

Christopher Day 2 years ago
parent
commit
87ce9a7b8f
1 changed files with 136 additions and 0 deletions
  1. 136 0
      ui.html

+ 136 - 0
ui.html

@@ -0,0 +1,136 @@
1
+<!DOCTYPE html>
2
+<html>
3
+
4
+<head>
5
+    <link href="css/login.css" rel="stylesheet" />
6
+    <link href="css/style.css" rel="stylesheet" />
7
+</head>
8
+
9
+<body>
10
+    <div class="container">
11
+
12
+        <div class="header">
13
+
14
+            <div class="date-time">
15
+                Saturday, October 17<sup>th</sup>
16
+                <strong>
17
+                        15:32:54
18
+                    </strong>
19
+            </div>
20
+            <div class="round">
21
+                Round 7
22
+            </div>
23
+            <div class="login">
24
+                <div class="grid">
25
+                    <div data-tip="Wrong username" class="col-12 error">
26
+                        <input class="large" placeholder="Username" type="text" />
27
+                    </div>
28
+                </div>
29
+                <div class="grid">
30
+                    <div class="col-12">
31
+                        <input class="large" placeholder="Password" type="password" />
32
+                    </div>
33
+                </div>
34
+                <div class="grid">
35
+                    <div class="col-7">
36
+                        <small>
37
+                            <a href="#">Forgot password</a>
38
+                        </small>
39
+                    </div>
40
+                    <div class="col-5 text-right">
41
+                        <button class="large">Login</button>
42
+                    </div>
43
+                </div>
44
+            </div>
45
+
46
+        </div>
47
+        <div class="body"></div>
48
+        <div class="faux-body">
49
+            <div class="module-container">
50
+
51
+                <div class="grid">
52
+                    <div class="col-6">
53
+                        <div class="text-area">
54
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac magna mi. In et neque sit amet mauris porttitor scelerisque pellentesque vitae lacus. Sed mi nisi, convallis at nisi quis, vestibulum euismod urna. Sed velit velit, rhoncus et vestibulum eget, malesuada et nibhntesque vitae lacus. Sed mi nisi, convallis at nisi quis, vestibulum euismod urna. Sed velit velit, rhoncus et vestibulum eget, malesuada et nibh. Aenean at commodo massa. Nunc facilisis quis erat non ornare. Vestibulum vitae sodales odio, quis facilisis eros.
55
+                        </div>
56
+                    </div>
57
+                    <div class="col-6">
58
+                        <table class="table">
59
+                            <thead>
60
+                                <tr>
61
+                                    <th width="">Col 1</th>
62
+                                    <th width="">Col 2</th>
63
+                                    <th width="120px">Col 3</th>
64
+                                </tr>
65
+                            </thead>
66
+                            <tbody>
67
+                                <tr>
68
+                                    <td>Odd Col 1</td>
69
+                                    <td>Odd Col 2</td>
70
+                                    <td class="text-right">
71
+                                        <input maxlength="5" type="text" style="width:50px" />
72
+                                        <button>
73
+                                            Buy
74
+                                        </button>
75
+                                    </td>
76
+                                </tr>
77
+                                <tr>
78
+                                    <td>Even Col 1</td>
79
+                                    <td>Even Col 2</td>
80
+                                    <td class="text-right">
81
+                                        <input maxlength="5" type="text" style="width:50px" />
82
+                                        <button>
83
+                                            Buy
84
+                                        </button>
85
+                                    </td>
86
+                                </tr>
87
+                                <tr>
88
+                                    <td>Odd Col 1</td>
89
+                                    <td>Odd Col 2</td>
90
+                                    <td class="text-right">
91
+                                        <input maxlength="5" type="text" style="width:50px" />
92
+                                        <button>
93
+                                            Buy
94
+                                        </button>
95
+                                    </td>
96
+                                </tr>
97
+                                <tr>
98
+                                    <td>Even Col 1</td>
99
+                                    <td>Even Col 2</td>
100
+                                    <td class="text-right">
101
+                                        <input maxlength="5" type="text" style="width:50px" />
102
+                                        <button>
103
+                                            Buy
104
+                                        </button>
105
+                                    </td>
106
+                                </tr>
107
+                            </tbody>
108
+                        </table>
109
+                    </div>
110
+                </div>
111
+
112
+                <div class="grid">
113
+                    <div class="col-4">
114
+                        <div class="message success" data-tip="Tooltip types">Success message</div>
115
+                    </div>
116
+                    <div class="col-4">
117
+                        <div class="message error" data-tip="Tooltip types">Error message</div>
118
+                    </div>
119
+                    <div class="col-4">
120
+                        <div class="message info" data-tip="Tooltip types">Info message</div>
121
+                    </div>
122
+                </div>
123
+
124
+
125
+            </div>
126
+        </div>
127
+        <div class="footer"></div>
128
+
129
+    </div>
130
+
131
+    <script type="text/javascript" src="js/jquery.min.js"></script>
132
+    <script src="js/scroll.js" type="application/javascript"></script>
133
+
134
+</body>
135
+
136
+</html>