1 | <!DOCTYPE html>
|
2 | <html>
|
3 | <head>
|
4 |
|
5 | <meta charset="utf-8" />
|
6 | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
7 | <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
8 |
|
9 |
|
10 | <title>Login Example - Semantic</title>
|
11 | <link rel="stylesheet" type="text/css" href="../dist/components/reset.css">
|
12 | <link rel="stylesheet" type="text/css" href="../dist/components/site.css">
|
13 |
|
14 | <link rel="stylesheet" type="text/css" href="../dist/components/container.css">
|
15 | <link rel="stylesheet" type="text/css" href="../dist/components/grid.css">
|
16 | <link rel="stylesheet" type="text/css" href="../dist/components/header.css">
|
17 | <link rel="stylesheet" type="text/css" href="../dist/components/image.css">
|
18 | <link rel="stylesheet" type="text/css" href="../dist/components/menu.css">
|
19 |
|
20 | <link rel="stylesheet" type="text/css" href="../dist/components/divider.css">
|
21 | <link rel="stylesheet" type="text/css" href="../dist/components/segment.css">
|
22 | <link rel="stylesheet" type="text/css" href="../dist/components/form.css">
|
23 | <link rel="stylesheet" type="text/css" href="../dist/components/input.css">
|
24 | <link rel="stylesheet" type="text/css" href="../dist/components/button.css">
|
25 | <link rel="stylesheet" type="text/css" href="../dist/components/list.css">
|
26 | <link rel="stylesheet" type="text/css" href="../dist/components/message.css">
|
27 | <link rel="stylesheet" type="text/css" href="../dist/components/icon.css">
|
28 |
|
29 | <script src="assets/library/jquery.min.js"></script>
|
30 | <script src="../dist/components/form.js"></script>
|
31 | <script src="../dist/components/transition.js"></script>
|
32 |
|
33 | <style type="text/css">
|
34 | body {
|
35 | background-color: #DADADA;
|
36 | }
|
37 | body > .grid {
|
38 | height: 100%;
|
39 | }
|
40 | .image {
|
41 | margin-top: -100px;
|
42 | }
|
43 | .column {
|
44 | max-width: 450px;
|
45 | }
|
46 | </style>
|
47 | <script>
|
48 | $(document)
|
49 | .ready(function() {
|
50 | $('.ui.form')
|
51 | .form({
|
52 | fields: {
|
53 | email: {
|
54 | identifier : 'email',
|
55 | rules: [
|
56 | {
|
57 | type : 'empty',
|
58 | prompt : 'Please enter your e-mail'
|
59 | },
|
60 | {
|
61 | type : 'email',
|
62 | prompt : 'Please enter a valid e-mail'
|
63 | }
|
64 | ]
|
65 | },
|
66 | password: {
|
67 | identifier : 'password',
|
68 | rules: [
|
69 | {
|
70 | type : 'empty',
|
71 | prompt : 'Please enter your password'
|
72 | },
|
73 | {
|
74 | type : 'length[6]',
|
75 | prompt : 'Your password must be at least 6 characters'
|
76 | }
|
77 | ]
|
78 | }
|
79 | }
|
80 | })
|
81 | ;
|
82 | })
|
83 | ;
|
84 | </script>
|
85 | </head>
|
86 | <body>
|
87 |
|
88 | <div class="ui middle aligned center aligned grid">
|
89 | <div class="column">
|
90 | <h2 class="ui teal image header">
|
91 | <img src="assets/images/logo.png" class="image">
|
92 | <div class="content">
|
93 | Log-in to your account
|
94 | </div>
|
95 | </h2>
|
96 | <form class="ui large form">
|
97 | <div class="ui stacked segment">
|
98 | <div class="field">
|
99 | <div class="ui left icon input">
|
100 | <i class="user icon"></i>
|
101 | <input type="text" name="email" placeholder="E-mail address">
|
102 | </div>
|
103 | </div>
|
104 | <div class="field">
|
105 | <div class="ui left icon input">
|
106 | <i class="lock icon"></i>
|
107 | <input type="password" name="password" placeholder="Password">
|
108 | </div>
|
109 | </div>
|
110 | <div class="ui fluid large teal submit button">Login</div>
|
111 | </div>
|
112 |
|
113 | <div class="ui error message"></div>
|
114 |
|
115 | </form>
|
116 |
|
117 | <div class="ui message">
|
118 | New to us? <a href="#">Sign Up</a>
|
119 | </div>
|
120 | </div>
|
121 | </div>
|
122 |
|
123 | </body>
|
124 |
|
125 | </html>
|