-
Notifications
You must be signed in to change notification settings - Fork 0
/
login.html
143 lines (136 loc) · 6.1 KB
/
login.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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!doctype html>
<html>
<head>
<title>Clinical - Profile Page</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap_4.3.1.css">
<link rel="stylesheet" href="css/bootstrap-drawer.css">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="css/fontawsome.min.css">
<!-- Google Font CSS -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800&display=swap" rel="stylesheet">
<!-- Tooltip CSS -->
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<!-- Global CSS -->
<link rel="stylesheet" href="css/animation.css" type="text/css">
<link rel="stylesheet" href="css/global.css" type="text/css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/main.css" type="text/css">
<link rel="stylesheet" href="css/media.css" type="text/css">
<!-- Jquery Libs -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap Js -->
<script src="js/popper.min.js" type="text/javascript"></script>
<script src="js/bootstrap_4.3.1.js" type="text/javascript"></script>
<script src="js/bootstrap-drawer.js" type="text/javascript"></script>
<!-- Tooltip JS -->
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Custom Js -->
<script src="js/custom.js" type="text/javascript"></script>
</head>
<body class="login_page">
<!-- loader -->
<div id="win_loader">
<div id="wl_start">
<div class="wls_dot_box">
<div class="wls_dot"></div>
<div class="wls_dot"></div>
<div class="wls_dot"></div>
<div class="wls_dot"></div>
<div class="wls_dot"></div>
<div class="wls_dot"></div>
</div>
</div>
</div>
<!-- Login Page -->
<div class="login_page height-100vh d-flex flex-wrap align-items-center justify-content-center">
<div class="login_box login_left height-100vh">
<div class="login_left_container height-100vh d-flex flex-wrap align-items-center justify-content-center">
<div class="contianer_box">
<!-- Logo image -->
<div class="box_img text-center">
<img src="image/logo.png" alt="logo" />
</div>
<!-- mobile textbox | desktop hidden -->
<div class="right_text_box d-xl-none d-lg-block d-md-block d-sm-block d-block">
<h2>A "<strong>Connected Spirometer</strong>" like no other.</h2>
<p class="m-0">Sleek. Portable. Accurate.</p>
</div>
<!-- mobile image | desktop hidden -->
<div class="box_img d-xl-none d-lg-block d-md-block d-sm-block d-block">
<img src="image/login_page/mobile_login_bg.svg" alt="login_bg_mobile" />
</div>
<!-- mobile progress word -->
<div class="right_progress_box d-xl-none d-lg-flex d-md-flex d-sm-flex d-flex flex-wrap align-items-center">
<div class="box_content">
<span class="green_text col-12 p-0 d-inline-block">99%</span>
<span class="gray_text col-12 p-0 d-inline-block">FEV1 Accuracy</span>
</div>
<div class="box_content">
<span class="green_text col-12 p-0 d-inline-block">98%</span>
<span class="gray_text col-12 p-0 d-inline-block">FVC Accuracy</span>
</div>
</div>
<!-- Login Form -->
<div class="box_login_form form_content">
<form action="" method="post">
<!-- username input -->
<div class="form_box col-12 p-0">
<label>Username</label>
<input type="text" class="input-text user-input" placeholder="Username" />
</div>
<!-- password input -->
<div class="form_box col-12 p-0">
<label>Password</label>
<input type="password" class="input-text password-input" placeholder="Password" />
</div>
<!-- rember & forget box -->
<div class="row_box col-12 p-0 d-flex flex-wrap align-items-start justify-content-between">
<!-- Checkbox -->
<div class="form_box custom_checkbox col-lg-6 col-md-6 col-sm-12 col-12 p-0 d-flex flex-wrap align-items-center position-relative">
<input type="checkbox" class="input-text checkbox-input" />
<span></span>
<label>Remember me</label>
</div>
<!-- Forget Password -->
<div class="form_box custom_forgot text-right col-lg-6 col-md-6 col-sm-12 col-12 p-0">
<a href="#">Forgot Password</a>
</div>
</div>
<!-- form btn -->
<div class="form_box submit-btn col-12 p-0">
<button type="submit" class="input-btn">Sign In</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="login_box login_right height-100vh">
<div class="login_right_container height-100vh d-flex flex-wrap align-items-center justify-content-start">
<div class="contianer_box">
<!-- login textbox -->
<div class="right_text_box">
<h2>A "<strong>Connected Spirometer</strong>" like no other.</h2>
<p class="m-0">Sleek. Portable. Accurate.</p>
</div>
<!-- progress word -->
<div class="right_progress_box d-flex flex-wrap align-items-center">
<div class="box_content">
<span class="green_text col-12 p-0 d-inline-block">99%</span>
<span class="gray_text col-12 p-0 d-inline-block">FEV1 Accuracy</span>
</div>
<div class="box_content">
<span class="green_text col-12 p-0 d-inline-block">98%</span>
<span class="gray_text col-12 p-0 d-inline-block">FVC Accuracy</span>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>