Skip to content

Commit a38685f

Browse files
author
ono
committed
add magic animation
1 parent 62c3250 commit a38685f

1 file changed

Lines changed: 57 additions & 79 deletions

File tree

‎login.html‎

Lines changed: 57 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -3,95 +3,73 @@
33
<head>
44
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
55
<title>Login</title>
6-
<link type="text/css" rel="stylesheet" href="assets/css/bootstrap.min.css"/>
6+
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
77
<link rel="stylesheet" href="assets/css/login.css">
8+
<link rel="stylesheet" href="assets/css/magic/magic.css">
89
</head>
910
<body>
1011
<div class="container">
11-
<div class="row">
12-
<div class="span4 offset4">
13-
<div class="signin">
14-
<div id="logo">
15-
<img src="assets/img/logo.png" alt="Metis Logo">
16-
</div>
17-
<div class="tab-content">
18-
<div id="login" class="tab-pane active">
19-
<form action="index.html" accept-charset="utf-8" method="post">
20-
<p class="muted tac">
21-
Enter your username and password
22-
</p>
23-
<div class="control-group">
24-
<div class="controls">
25-
<div class="input-prepend">
26-
<span class="add-on"><i class="icon-user"></i></span>
27-
<input type="text" placeholder="Username">
28-
</div>
29-
</div>
30-
<div class="controls">
31-
<div class="input-prepend">
32-
<span class="add-on"><i class="icon-lock"></i></span>
33-
<input type="password" placeholder="Password">
34-
</div>
35-
</div>
36-
</div>
37-
<button class="btn btn-inverse btn-block" type="submit">Sign in</button>
38-
</form>
39-
</div>
40-
<div id="forgot" class="tab-pane">
41-
<form action="index.html">
42-
<p class="muted tac">
43-
Enter your valid e-mail
44-
</p>
45-
<div class="control-group">
46-
<div class="controls">
47-
<div class="input-prepend">
48-
<span class="add-on"><i class="icon-envelope"></i></span>
49-
<input type="email" placeholder="mail@domain.com" required="required">
50-
</div>
51-
</div>
52-
</div>
53-
<button class="btn btn-inverse btn-block" type="submit">Recover Password</button>
54-
</form>
55-
</div>
56-
<div id="signup" class="tab-pane">
57-
<form action="index.html">
58-
<div class="control-group">
59-
<div class="controls">
60-
<div class="input-prepend">
61-
<span class="add-on"><i class="icon-user"></i></span>
62-
<input type="text" placeholder="username">
63-
</div>
64-
</div>
65-
<div class="controls">
66-
<div class="input-prepend">
67-
<span class="add-on"><i class="icon-envelope"></i></span>
68-
<input type="email" placeholder="mail@domain.com">
69-
</div>
70-
</div>
71-
<div class="controls">
72-
<div class="input-prepend">
73-
<span class="add-on"><i class="icon-lock"></i></span>
74-
<input type="password" placeholder="password">
75-
</div>
76-
</div>
77-
</div>
78-
<button class="btn btn-inverse btn-block" type="submit">Register</button>
79-
</form>
80-
</div>
81-
</div>
12+
<div class="text-center">
13+
<img src="assets/img/logo.png" alt="Metis Logo">
14+
</div>
15+
<div class="tab-content">
16+
<div id="login" class="tab-pane active">
17+
<form action="index.html" class="form-signin">
18+
<p class="muted text-center">
19+
Enter your username and password
20+
</p>
21+
<input type="text" placeholder="Username" class="input-block-level">
22+
<input type="password" placeholder="Password" class="input-block-level">
23+
<button class="btn btn-large btn-primary btn-block" type="submit">Sign in</button>
24+
</form>
25+
</div>
26+
<div id="forgot" class="tab-pane">
27+
<form action="index.html" class="form-signin">
28+
<p class="muted text-center">
29+
Enter your valid e-mail
30+
</p>
31+
<input type="email" placeholder="mail@domain.com" required="required" class="input-block-level">
32+
<br>
33+
<br>
34+
<button class="btn btn-large btn-danger btn-block" type="submit">Recover Password</button>
35+
</form>
36+
</div>
37+
<div id="signup" class="tab-pane">
38+
<form action="index.html" class="form-signin">
39+
<input type="text" placeholder="username" class="input-block-level">
40+
<input type="email" placeholder="mail@domain.com" class="input-block-level">
41+
<input type="password" placeholder="password" class="input-block-level">
42+
<button class="btn btn-large btn-success btn-block" type="submit">Register</button>
8243

83-
<ul class="inline">
84-
<li><a class="muted" href="#login" data-toggle="tab">Login</a></li>
85-
<li><a class="muted" href="#forgot" data-toggle="tab">Forgot Password</a></li>
86-
<li><a class="muted" href="#signup" data-toggle="tab">Signup</a></li>
87-
</ul>
88-
</div>
44+
</form>
8945
</div>
9046
</div>
91-
</div>
47+
<div class="text-center">
48+
<ul class="inline">
49+
<li><a class="muted" href="#login" data-toggle="tab">Login</a></li>
50+
<li><a class="muted" href="#forgot" data-toggle="tab">Forgot Password</a></li>
51+
<li><a class="muted" href="#signup" data-toggle="tab">Signup</a></li>
52+
</ul>
53+
</div>
54+
55+
56+
</div> <!-- /container -->
9257

9358
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
9459
<script>window.jQuery || document.write('<script src="assets/js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
9560
<script type="text/javascript" src="assets/js/vendor/bootstrap.min.js"></script>
61+
62+
<script>
63+
$('.inline li > a').click(function() {
64+
var activeForm = $(this).attr('href') + ' > form';
65+
console.log(activeForm);
66+
$(activeForm).addClass('magictime swap');
67+
//set timer to 5 seconds, after that, load the magic animation
68+
setTimeout(function() {
69+
$(activeForm).removeClass('magictime swap');
70+
}, 1000);
71+
});
72+
73+
</script>
9674
</body>
9775
</html>

0 commit comments

Comments
 (0)