-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
176 lines (172 loc) · 11.6 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
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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<!DOCTYPE html>
<html lang="en" class="w-full h-full">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Authentication page</title>
<!-- link to tailwind css and main auth css -->
<link rel="stylesheet" href="/dist/output.css">
<link rel="stylesheet" href="/dist/auth.css">
<!-- favicon -->
<link rel="shortcut icon" href="/dist/img/cnt.jpg" type="image/jpg">
<!-- flowbite css -->
<link rel="stylesheet" href="/dist/flowbite.css">
<script src="/dist/js/flowbite.js"></script>
</head>
<body>
<!-- back sliders -->
<div class="con_colors">
<div class="color1"></div>
<div class="color2"></div>
</div>
<!-- container -->
<div class="auth_card" id="authCard">
<div id="formcard" class="form_card flex flex-col justify-center">
<h1 class="text-center font-bold text-5xl relative mb-10">CONECKT</h1>
<!-- login section -->
<form action="#" id="login">
<h4 class="text-xl font-semibold mb-6">Welcome Back</h4>
<div class="relative mb-6">
<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
</div>
<input type="text" id="" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="Username / Email">
</div>
<div class="relative mb-6">
<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
</svg>
</div>
<input type="password" id="" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="Password">
</div>
<div class="flex items-start mb-6">
<div class="flex items-center h-5">
<input id="terms" aria-describedby="terms" type="checkbox" class="w-4 h-4 bg-gray-50 rounded border border-gray-300 focus:ring-3 focus:ring-blue-300" required>
</div>
<div class="ml-3 text-sm">
<label for="terms" class="font-medium text-gray-900 dark:text-gray-300">Remember Me</label>
</div>
</div>
<!-- link to open the home page -->
<a href=""><button type="submit" id="submit_btn"
class="text-white focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full px-5 py-2.5 text-center mb-6">Login</button></a>
<div class="text-center mb-6">
<a href="#" id="fwdbtn" class="text-sm text-red-500 hover:text-red-700">Forgot Password?</a>
</div>
<div class="extra_on_mobile text-center">
<small>Dont have an acount? <a href="#" id="signupshown1" class="text-blue-600">SignUp</a></small>
</div>
</form>
<!-- signup section -->
<form action="#" id="signup">
<h4 class="text-xl font-semibold mb-6">SignUp to continue</h4>
<div class="relative mb-6">
<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
</div>
<input type="text" id="" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="Bonnie Green">
</div>
<div class="relative mb-6">
<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</div>
<input type="text" id="" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="[email protected]">
</div>
<div class="relative mb-6">
<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
</svg>
</div>
<input type="password" id="" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="Password">
</div>
<div class="flex items-start mb-6">
<div class="flex items-center mb-4">
<input id="checkbox-1" aria-describedby="checkbox-1" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 ">
<label for="checkbox-1" class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">I
agree to the <a href="#" class="text-blue-600 hover:underline dark:text-blue-500">terms and
conditions</a></label>
</div>
</div>
<button type="submit" id="submit_btn" class="text-white mb-6 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full px-5 py-2.5 text-center">SignUp</button>
<div class="extra_on_mobile text-center">
<small>Already have an acount? <a href="#" id="signinshown2" class="text-blue-600">Signin</a></small>
</div>
</form>
<!-- forgot password section -->
<form action="#" id="forgotpwd">
<h4 class="text-xl font-semibold mb-4">Password Rest</h4>
<h6 class="text-sm mb-6">A rest email will be sent to your email address!</h6>
<div class="relative mb-6">
<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</div>
<input type="text" id="" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="[email protected]">
</div>
<button type="submit" id="submit_btn_fwd" class="text-white mb-6 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full px-5 py-2.5 text-center">Login</button>
<div class="extra_on_mobile text-center">
<small>Dont have an acount? <a href="#" id="signupshown" class="text-blue-600">SignUp</a></small>
</div>
</form>
</div>
<!-- Other slider section -->
<div id="othersec" class="other_sec flex flex-col justify-center items-center">
<!-- first section -->
<div id="it_1">
<div>
<img class="svg_img" src="/dist/img/signin.svg" alt="welcome">
</div>
<div>
<h2 class="text-center text-xl mb-2 mt-2 font-semibold">Don't have an account?</h2>
</div>
<button id="signupBtn" class="acc_change mt-6 text-black w-72 p-2.5">Sign Up</button>
</div>
<!-- fourth section -->
<div id="it_2">
<div>
<img class="svg_img" src="/dist/img/login.svg" alt="welcome">
</div>
<div>
<h2 class="text-center text-xl mb-2 mt-2 font-semibold">Already have an account?</h2>
</div>
<button id="signinBtn" class="acc_change mt-6 text-black w-72 p-2.5">Sign in</button>
</div>
<!-- third sectionn -->
<div id="it_3">
<div>
<img class="svg_img" src="/dist/img/forgotpwd.svg" alt="welcome">
</div>
<div>
<h2 class="text-center text-xl mb-2 mt-2 font-semibold">Don't have an account?</h2>
</div>
<button id="signupBtnfwd" class="acc_change mt-6 text-black w-72 p-2.5">Sign Up</button>
</div>
</div>
</div>
<!-- js links -->
<script src="/dist/js/jquery.js"></script>
<script src="/dist/js/main.js"></script>
</body>
</html>