login.html
3.77 KB
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
<section>
<div class="help-content">
<h3 class="info-title smaller" data-id="#pages/login">Login</h3>
<!-- #section:pages/login -->
<div class="info-section">
<ul class="info-list list-unstyled">
<li>
Login page has a more compact structure and generally needs fewer scripts and stylesheets unless
you want to include some extra plugins for some form fields.
<br />
For more info about this please see <a href="#basics/layout.login" class="help-more">Login Layout</a>
</li>
<li>
Basically it consists of three optional widget boxes for login, signup and password sections.
</li>
<li>
You should add <code>.login-layout</code> class to <body>body</code> element:
<pre data-language="html">
<body class="login-layout">
or
<body class="login-layout blur-login">
or
<body class="login-layout light-login">
</pre>
</li>
<li>
There are three optional background styles:
<ol>
<li><code>.login-layout</code> default login background</li>
<li><code>.login-layout.blur-login</code> blurred image background</li>
<li><code>.login-layout.light-login</code> light login background</li>
</ol>
</li>
<li>
The (optionally) three boxes are inside <code>.login-container</code>:
<pre data-language="html">
<div class="login-container">
<div class="center">
<!-- page header and text -->
</div>
<div class="space-6"></div><!-- optional space -->
<div class="pos-rel"><!-- a position relative container -->
<div class="login-box visible widget-box no-border" id="login-box">
<!-- login area -->
</div>
<div class="forgot-box widget-box no-border" id="forgot-box">
<!-- forgot area -->
</div>
<div class="signup-box widget-box no-border" id="signup-box">
<!-- signup area -->
</div>
</div>
</div>
</pre>
</li>
<li>
Inside login box, there are the optional social login buttons inside
<code>.social-or-login</code> and <code>.social-login</code> container:
<pre data-language="html">
<div class="social-or-login center">
<span class="bigger-110">Or Login Using</span>
</div>
<div class="space-6"></div>
<div class="social-login center">
<a class="btn btn-primary"><i class="ace-icon fa fa-facebook"></i></a>
<a class="btn btn-info"><i class="ace-icon fa fa-twitter"></i></a>
<a class="btn btn-danger"><i class="ace-icon fa fa-google-plus"></i></a>
</div>
</pre>
</li>
<li>
The bottom links that are used to move between boxes
and are inside <code>.toolbar</code> which have a class only used to color them:
<pre data-language="html">
<div class="toolbar center">
<a class="back-to-login-link" data-target='#login-box' href="#">
<i class="ace-icon fa fa-arrow-left"></i>
Back to login
</a>
</div>
or
<div class="toolbar clearfix">
<div>
<a class="forgot-password-link" data-target="#forgot-box" href="#">
<i class="ace-icon fa fa-arrow-left"></i>
I forgot my password
</a>
</div>
<div>
<a class="user-signup-link" data-target="#signup-box" href="#">
I want to register
<i class="ace-icon fa fa-arrow-right"></i>
</a>
</div>
</div>
</pre>
Each link has a <code>data-target</code> attribute.
<br />
</li>
<li>
<code>data-target</code> is the selector of target.
The following code should also be included in your page for switching between pages:
<pre data-language="javascript">
jQuery(function($) {
$(document).on('click', '.toolbar a[data-target]', function(e) {
e.preventDefault();
var target = $(this).data('target');
$('.widget-box.visible').removeClass('visible');//hide others
$(target).addClass('visible');//show target
})
})
</pre>
</li>
</ul>
</div>
<!-- /section:pages/login -->
</div>
</section>