-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
111 lines (109 loc) · 5.32 KB
/
index.html
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
<!DOCTYPE html>
<!--[if lt IE 7 ]>
<html lang="en" class="no-js ie6 lt8"> <![endif]-->
<!--[if IE 7 ]>
<html lang="en" class="no-js ie7 lt8"> <![endif]-->
<!--[if IE 8 ]>
<html lang="en" class="no-js ie8 lt8"> <![endif]-->
<!--[if IE 9 ]>
<html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en" class="no-js"> <!--<![endif]-->
<head>
<meta charset="UTF-8"/>
<title>云端通讯录</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="这是一个具有云同步功能的通讯录,通过它你可以轻松备份,管理和使用手机里的通讯录"/>
<meta name="keywords" content="通讯录,云通讯录,联系人"/>
<meta name="author" content="Codrops"/>
<link rel="shortcut icon" href="img/favicon.ico">
<link rel="stylesheet" type="text/css" href="css/login.css"/>
<link rel="stylesheet" type="text/css" href="css/animate-custom.css"/>
</head>
<body>
<div class="container">
<header>
<h1>云端通讯录</h1>
<nav class="codrops-demos">
让您的工作更为高效，生活更加便捷
</nav>
</header>
<section>
<div id="container_demo">
<!--隐藏链接,做切换登录注册用-->
<a class="hiddenanchor" id="toregister"></a>
<a class="hiddenanchor" id="tologin"></a>
<div id="wrapper">
<!--登录页-->
<div id="login" class="animate form">
<form autocomplete="on" id="login-form">
<h1>登录平台</h1>
<div class="a-line">
<label for="phone" class="icon-phone"> 手机号 </label>
<input id="phone" name="phone" required="required" type="text"
placeholder="my phone number"/>
</div>
<div class="a-line">
<label for="password" class="icon-key"> 密码 </label>
<input id="password" name="password" required="required" type="password"
placeholder="my password"/>
</div>
<p class="login button">
<input type="submit" value="登录"/>
</p>
<p class="change_link">
还没有帐号?
<a href="#toregister" class="to_register">注册</a>
</p>
</form>
</div>
<!--注册页-->
<div id="register" class="animate form">
<form autocomplete="on" id="register-form">
<h1> 注册帐号 </h1>
<div class="a-line">
<label for="usernamesignup" class="icon-user">用户名</label>
<input id="usernamesignup" name="usernamesignup" required="required" type="text"
placeholder="真实姓名或常用昵称"/>
</div>
<div class="a-line">
<label for="phonesignup" class="icon-phone"> 手机号 </label>
<input id="phonesignup" name="phonesignup" required="required" type="text"
placeholder="仅支持中国大陆手机号"/>
</div>
<div class="a-line">
<label for="verifycode"> 验证码 </label>
<div class="input-wrapper">
<button type="button" class="send-code-button">获取验证码</button>
<input id="verifycode" name="verifycode" required="required" type="text"
placeholder="请输入手机收到的验证码"/>
</div>
</div>
<div class="a-line">
<label for="passwordsignup" class="icon-key"> 密码 </label>
<input id="passwordsignup" name="passwordsignup" required="required" type="password"
placeholder="不少于6位"/>
</div>
<div class="a-line">
<label for="passwordsignup_confirm" class="icon-key"> 请再次确认密码 </label>
<input id="passwordsignup_confirm" name="passwordsignup_confirm" required="required"
type="password" placeholder="不少于6位"/>
</div>
<p class="signin button">
<input type="submit" value="注册"/>
</p>
<p class="change_link">
已有帐号 ?
<a href="#tologin" class="to_register"> 登录 </a>
</p>
</form>
</div>
</div>
</div>
</section>
</div>
<script src="lib/jquery-1.11.1.min.js"></script>
<script src="lib/jquery.validate.min.js"></script>
<script src="js/login.js"></script>
</body>
</html>