<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>Đăng nhập |Violet Space</title>

		<meta name="description" content="User login page" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />

		<!-- basic styles -->
		<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="assets/css/font-awesome.min.css" />

		<link rel="stylesheet" href="assets/css/ace-fonts.css" />

		<!-- ace styles -->

		<link rel="stylesheet" href="assets/css/ace.min.css" />
		<link rel="stylesheet" href="assets/css/ace-rtl.min.css" />

		<!--[if lte IE 8]>
		  <link rel="stylesheet" href="assets/css/ace-ie.min.css" />
		<![endif]-->

		<!-- inline styles related to this page -->

		<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->

		<!--[if lt IE 9]>
		<script src="assets/js/html5shiv.js"></script>
		<script src="assets/js/respond.min.js"></script>
		<![endif]-->
	</head>

	<body class="login-layout">
		<div class="main-container">
			<div class="main-content">
				<div class="row">
					<div class="space-6"></div>
					<div class="col-sm-8">
						<div class="title-box">
							<h1>Violet <small>Space</small></h1>
						</div>
						<div class="title-box">
							<h3>Dịch vụ lưu trữ trực tuyến dữ liệu bài giảng của <a href="violet.vn">Violet.vn</a></h3>
						</div>
						<iframe src="https://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FthuvienViolet.vn&amp;width=800&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false&amp;appId=742161799178550" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:800px; height:140px;" allowTransparency="true"></iframe>
					</div>
					<div class="col-sm-4">
						<div class="login-container">
							<div class="position-relative">
								<div id="login-box" class="login-box visible widget-box no-border" style="background: transparent">
									<div class="widget-body" style="background:transparent">
										<div class="widget-main" style="background:transparent">
											<h4 class="header blue lighter bigger">
												<i class="icon-cloud-upload green"></i>
												VIOLET SPACE |<small>Đăng nhập</small>
											</h4>

											<form action="index-user.html" id="validation-form" method="get">
												<fieldset>
													<label class="block clearfix has-error">
														<span class="block input-icon input-icon-right">
															<input type="text" class="form-control" name="account" placeholder="Tài khoản | Số điện thoại" />
															<i class="icon-user"></i>
														</span>
														<div class="help-block">help! </div>
													</label>

													<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input type="password" class="form-control" name="password" placeholder="Mật khẩu" />
															<i class="icon-lock"></i>
														</span>
														<div class="help-block"> </div>
													</label>

													<div class="space"></div>

													<div class="clearfix">
														<label class="inline">
															<input type="checkbox" class="ace" />
															<span class="lbl"> Ghi nhớ</span>
														</label>

														<a href="index-user.html" title="">
															<button type="submit" id="login-button" class="pull-right btn btn-sm btn-primary">
																<i class="icon-key"></i>
																Đăng nhập
															</button>
														</a>
													</div>

													<div class="space-4"></div>
												</fieldset>
											</form>
										</div><!-- /widget-main -->

										<div class="toolbar clearfix">
											<div>
												<a href="#" onclick="show_box('forgot-box'); return false;" class="forgot-password-link">
													<i class="icon-arrow-left"></i>
													Quên mật khẩu
												</a>
											</div>

											<div>
												<a href="#" onclick="show_box('signup-box'); return false;" class="user-signup-link">
													Đăng ký tài khoản
													<i class="icon-arrow-right"></i>
												</a>
											</div>
										</div>
									</div><!-- /widget-body -->
								</div><!-- /login-box -->

								<div id="forgot-box" class="forgot-box widget-box no-border" style="background: transparent">
									<div class="widget-body" style="background:transparent">
										<div class="widget-main" style="background:transparent">
											<h4 class="header red lighter bigger">
												<i class="icon-key"></i>
												Nhận lại mật khẩu
											</h4>

											<div class="space-6"></div>
											<p>
												Điền số điện thoại đăng ký tài khoản của bạn
											</p>

											<form>
												<fieldset>
													<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input type="email" class="form-control" placeholder="Số điện thoại" />
															<i class="icon-phone"></i>
														</span>
														<div class="help-block"> </div>
													</label>

													<div class="clearfix">
														<button type="button" class="pull-right btn btn-sm btn-danger">
															<i class="icon-lightbulb"></i>
															Gửi!
														</button>
													</div>
												</fieldset>
											</form>
										</div><!-- /widget-main -->

										<div class="toolbar center">
											<a href="#" onclick="show_box('login-box'); return false;" class="back-to-login-link">
												Đăng nhập
												<i class="icon-arrow-right"></i>
											</a>
										</div>
									</div><!-- /widget-body -->
								</div><!-- /forgot-box -->

								<div id="signup-box" class="signup-box widget-box no-border" style="background: transparent">
									<div class="widget-body" style="background:transparent">
										<div class="widget-main" style="background:transparent">
											<h4 class="header green lighter bigger">
												<i class="icon-group blue"></i>
												Đăng ký thành viên
											</h4>

											<div class="space-6"></div>
											<p> Điền đầy đủ thông tin sau: </p>

											<form>
												<fieldset>

													<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input type="text" class="form-control" name="account" placeholder="Số điện thoại" />
															<i class="icon-user"></i>
														</span>
														<div class="help-block"> </div>
													</label>

													<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input type="text" class="form-control" name="codeCTV" placeholder="Mã CTV" />
															<i class="icon-male"></i>
														</span>
														<div class="help-block"> </div>
													</label>

													<label class="block">
														<input type="checkbox" class="ace" />
														<span class="lbl">
															Tôi đồng ý với
															<a href="#">Điều khoản sử dụng của Violet</a>
														</span>
													</label>

													<div class="space-24"></div>

													<div class="clearfix">
														<button type="reset" class="width-30 pull-left btn btn-sm">
															<i class="icon-refresh"></i>
															Xóa hết
														</button>

														<button type="button" id="register-button" class="width-65 pull-right btn btn-sm btn-success">
															Hoàn tất
															<i class="icon-arrow-right icon-on-right"></i>
														</button>
													</div>
												</fieldset>
											</form>
										</div>

										<div class="toolbar center">
											<a href="#" onclick="show_box('login-box'); return false;" class="back-to-login-link">
												<i class="icon-arrow-left"></i>
												Đăng nhập
											</a>
										</div>
									</div><!-- /widget-body -->
								</div><!-- /signup-box -->
							</div><!-- /position-relative -->
						</div>
					</div><!-- /.col -->
				</div><!-- /.row -->

			</div>
		</div><!-- /.main-container -->

		<div class="modal fade" id="modal-login" tabindex="-1" role="dialog"aria-hidden="true">
		  <div class="modal-dialog">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
		        <h4 class="modal-title">Đăng nhập hệ thống</h4>
		      </div>
		      <div class="modal-body">
		      	<div class="alert alert-block alert-success">
							<button type="button" class="close" data-dismiss="alert">
								<i class="icon-remove"></i>
							</button>
							<strong>
								<i class="icon-ok"></i>
								Đăng ký tài khoản thành công !
							</strong>
							<p>
								Hệ thống đã gửi mật khẩu vào số điện thoại đăng ký của bạn.
							</p>
						</div>
		        <form>
							<fieldset>
								<label class="block clearfix">
									<span class="block input-icon input-icon-right">
										<input type="text" class="form-control" placeholder="Tài khoản | Số điện thoại" />
										<i class="icon-user"></i>
									</span>
								</label>

								<label class="block clearfix">
									<span class="block input-icon input-icon-right">
										<input type="password" class="form-control" placeholder="Mật khẩu" />
										<i class="icon-lock"></i>
									</span>
								</label>

								<div class="space"></div>

								<div class="clearfix">
									<label class="inline">
										<input type="checkbox" class="ace" />
										<span class="lbl"> Ghi nhớ</span>
									</label>

									<a href="index-user.html" title="">
										<button type="button" class="pull-right btn btn-sm btn-primary">
											<i class="icon-key"></i>
											Đăng nhập
										</button>
									</a>
								</div>

								<div class="space-4"></div>
							</fieldset>
						</form>
		      </div>
		    </div>
		  </div>
		</div>
		<!-- basic scripts -->

		<!--[if !IE]> -->

		<script type="text/javascript">
			window.jQuery || document.write("<script src='assets/js/jquery-2.0.3.min.js'>"+"<"+"/script>");
		</script>
		<script src="assets/js/bootstrap.min.js"></script>
		<script src="assets/js/jquery.validate.min.js"></script>

		<script src="assets/js/ace-elements.min.js"></script>
		<script src="assets/js/ace.min.js"></script>
		<!-- <![endif]-->

		<!--[if IE]>
<script type="text/javascript">
 window.jQuery || document.write("<script src='assets/js/jquery-1.10.2.min.js'>"+"<"+"/script>");
</script>
<![endif]-->

		<script type="text/javascript">
			if("ontouchend" in document) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
		</script>

		<!-- inline scripts related to this page -->

		<script type="text/javascript">
			function show_box(id) {
			 jQuery('.widget-box.visible').removeClass('visible');
			 jQuery('#'+id).addClass('visible');
			}

			$('#register-button').click(function(){
					$('#modal-login').modal('show')
			})

			$('#validation-form').validate({
				errorElement: 'label',
				errorClass: 'help-block',
				focusInvalid: true,
				rules: {
					password: {
						required: true,
						minlength: 5
					},
					account: {
						required: true
					}
				},
		
				messages: {
					account: {
						required: "Please provide a valid email.",
					},
					password: {
						required: "Please specify a password.",
						minlength: "Please specify a secure password."
					}
				},

				highlight: function (e) {
					$(e).closest('label').removeClass('has-info').addClass('has-error');
				},
		
				success: function (e) {
					$(e).closest('label').removeClass('has-error').addClass('has-info');
					$(e).remove();
				},
			});
		</script>
	</body>
</html>
