UNPKG

fomantic-ui/examples/login.html

Version:

1<!DOCTYPE html>
2<html>
3<head>
<!-- Standard Meta -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
8
<!-- Site Properties -->
<title>Login Example - Semantic</title>
<link rel="stylesheet" type="text/css" href="../dist/components/reset.css">
<link rel="stylesheet" type="text/css" href="../dist/components/site.css">
13
<link rel="stylesheet" type="text/css" href="../dist/components/container.css">
<link rel="stylesheet" type="text/css" href="../dist/components/grid.css">
<link rel="stylesheet" type="text/css" href="../dist/components/header.css">
<link rel="stylesheet" type="text/css" href="../dist/components/image.css">
<link rel="stylesheet" type="text/css" href="../dist/components/menu.css">
19
<link rel="stylesheet" type="text/css" href="../dist/components/divider.css">
<link rel="stylesheet" type="text/css" href="../dist/components/segment.css">
<link rel="stylesheet" type="text/css" href="../dist/components/form.css">
<link rel="stylesheet" type="text/css" href="../dist/components/input.css">
<link rel="stylesheet" type="text/css" href="../dist/components/button.css">
<link rel="stylesheet" type="text/css" href="../dist/components/list.css">
<link rel="stylesheet" type="text/css" href="../dist/components/message.css">
<link rel="stylesheet" type="text/css" href="../dist/components/icon.css">
28
<script src="assets/library/jquery.min.js"></script>
<script src="../dist/components/form.js"></script>
<script src="../dist/components/transition.js"></script>
32
<style type="text/css">
  body {
    background-color: #DADADA;
  }
  body > .grid {
    height: 100%;
  }
  .image {
    margin-top: -100px;
  }
  .column {
    max-width: 450px;
  }
</style>
<script>
$(document)
  .ready(function() {
    $('.ui.form')
      .form({
        fields: {
          email: {
            identifier  : 'email',
            rules: [
              {
                type   : 'empty',
                prompt : 'Please enter your e-mail'
              },
              {
                type   : 'email',
                prompt : 'Please enter a valid e-mail'
              }
            ]
          },
          password: {
            identifier  : 'password',
            rules: [
              {
                type   : 'empty',
                prompt : 'Please enter your password'
              },
              {
                type   : 'length[6]',
                prompt : 'Your password must be at least 6 characters'
              }
            ]
          }
        }
      })
    ;
  })
;
</script>
85</head>
86<body>
87
88<div class="ui middle aligned center aligned grid">
<div class="column">
  <h2 class="ui teal image header">
    <img src="assets/images/logo.png" class="image">
    <div class="content">
      Log-in to your account
    </div>
  </h2>
  <form class="ui large form">
    <div class="ui stacked segment">
      <div class="field">
        <div class="ui left icon input">
          <i class="user icon"></i>
          <input type="text" name="email" placeholder="E-mail address">
        </div>
      </div>
      <div class="field">
        <div class="ui left icon input">
          <i class="lock icon"></i>
          <input type="password" name="password" placeholder="Password">
        </div>
      </div>
      <div class="ui fluid large teal submit button">Login</div>
    </div>
112
    <div class="ui error message"></div>
114
  </form>
116
  <div class="ui message">
    New to us? <a href="#">Sign Up</a>
  </div>
</div>
121</div>
122
123</body>
124
125</html>

1	`<!DOCTYPE html>`
2	`<html>`
3	`<head>`
4	`<!-- Standard Meta -->`
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	`<!-- Site Properties -->`
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>`