-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
238 lines (228 loc) · 10.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
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="google-signin-client_id" content="601094146400-4miksovj358gn8lg5a897ft9ibf99p7v.apps.googleusercontent.com">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title> Sm Tech register | Register</title>
<link
href="https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;600;700;900&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="/Assets/css/style.css"/>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
</head>
<body>
<div x-data="setup()" x-init="$refs.loading.classList.add('hidden'); setColors(color);" :class="{ 'dark': isDark}">
<!-- Loading screen -->
<div
x-ref="loading"
class="fixed inset-0 z-50 flex items-center justify-center text-2xl font-semibold text-white bg-primary-darker"
>
Loading.....
</div>
<div
class="flex flex-col items-center justify-center h-screen p-4 space-y-4 antialiased text-gray-900 bg-gray-100 dark:bg-dark dark:text-light"
>
<!-- Brand -->
<a
href="../index.html"
class="inline-block mb-6 text-3xl font-bold tracking-wider uppercase text-primary-dark dark:text-light"
>
K-WD
</a>
<main>
<div class="w-full max-w-sm px-4 py-6 space-y-6 bg-white rounded-md dark:bg-darker">
<h1 class="text-xl font-semibold text-center">Register</h1>
<form action="#" class="space-y-6">
<input
class="w-full px-4 py-2 border rounded-md dark:bg-darker dark:border-gray-700 focus:outline-none focus:ring focus:ring-primary-100 dark:focus:ring-primary-darker"
type="text"
name="username"
placeholder="Username"
required
/>
<input
class="w-full px-4 py-2 border rounded-md dark:bg-darker dark:border-gray-700 focus:outline-none focus:ring focus:ring-primary-100 dark:focus:ring-primary-darker"
type="email"
name="email"
placeholder="Email address"
required
/>
<input
class="w-full px-4 py-2 border rounded-md dark:bg-darker dark:border-gray-700 focus:outline-none focus:ring focus:ring-primary-100 dark:focus:ring-primary-darker"
type="password"
name="password"
placeholder="Password"
required
/>
<input
class="w-full px-4 py-2 border rounded-md dark:bg-darker dark:border-gray-700 focus:outline-none focus:ring focus:ring-primary-100 dark:focus:ring-primary-darker"
type="password"
name="password_confirmation"
placeholder="Confirm Password"
required
/>
<div class="flex items-center justify-between">
<!-- Remember me toggle -->
<label class="flex items-center">
<div class="relative inline-flex items-center">
<input
type="checkbox"
name="accept_terms"
class="w-10 h-4 transition bg-gray-200 border-none rounded-full shadow-inner outline-none appearance-none toggle checked:bg-primary-light disabled:bg-gray-200 focus:outline-none"
/>
<span
class="absolute top-0 left-0 w-4 h-4 transition-all transform scale-150 bg-white rounded-full shadow-sm"
></span>
</div>
<span class="ml-3 text-sm font-normal text-gray-500 dark:text-gray-400">
I accept the
<a href="#" class="text-sm text-blue-600 hover:underline">Terms and Conditions</a>
</span>
</label>
</div>
<div>
<button
type="submit"
class="w-full px-4 py-2 font-medium text-center text-white transition-colors duration-200 rounded-md bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 dark:focus:ring-offset-darker"
>
Register
</button>
</div>
</form>
<div class="g-signin2" data-onsuccess="onSignIn"></div>
<!-- Or -->
<div class="flex items-center justify-center space-x-2 flex-nowrap">
<span class="w-20 h-px bg-gray-300"></span>
<span>OR</span>
<span class="w-20 h-px bg-gray-300"></span>
</div>
<!-- Social login links -->
<!-- Brand icons src https://boxicons.com -->
<a
href="#"
class="flex items-center justify-center px-4 py-2 space-x-2 text-white transition-all duration-200 bg-black rounded-md hover:bg-opacity-80 focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-1 dark:focus:ring-offset-darker"
>
<svg
aria-hidden="true"
class="w-6 h-6 text-white"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M12.026,2c-5.509,0-9.974,4.465-9.974,9.974c0,4.406,2.857,8.145,6.821,9.465 c0.499,0.09,0.679-0.217,0.679-0.481c0-0.237-0.008-0.865-0.011-1.696c-2.775,0.602-3.361-1.338-3.361-1.338 c-0.452-1.152-1.107-1.459-1.107-1.459c-0.905-0.619,0.069-0.605,0.069-0.605c1.002,0.07,1.527,1.028,1.527,1.028 c0.89,1.524,2.336,1.084,2.902,0.829c0.091-0.645,0.351-1.085,0.635-1.334c-2.214-0.251-4.542-1.107-4.542-4.93 c0-1.087,0.389-1.979,1.024-2.675c-0.101-0.253-0.446-1.268,0.099-2.64c0,0,0.837-0.269,2.742,1.021 c0.798-0.221,1.649-0.332,2.496-0.336c0.849,0.004,1.701,0.115,2.496,0.336c1.906-1.291,2.742-1.021,2.742-1.021 c0.545,1.372,0.203,2.387,0.099,2.64c0.64,0.696,1.024,1.587,1.024,2.675c0,3.833-2.33,4.675-4.552,4.922 c0.355,0.308,0.675,0.916,0.675,1.846c0,1.334-0.012,2.41-0.012,2.737c0,0.267,0.178,0.577,0.687,0.479 C19.146,20.115,22,16.379,22,11.974C22,6.465,17.535,2,12.026,2z"
></path>
</svg>
<span> Register using github </span>
</a>
<!-- Login link -->
<div class="text-sm text-gray-600 dark:text-gray-400">
Already have an account? <a href="login.html" class="text-blue-600 hover:underline">Login</a>
</div>
</div>
</main>
</div>
<!-- Toggle dark mode button -->
<div class="fixed bottom-5 left-5">
<button
aria-hidden="true"
@click="toggleTheme"
class="p-2 transition-colors duration-200 rounded-full shadow-md bg-primary hover:bg-primary-darker focus:outline-none focus:ring focus:ring-primary"
>
<svg
x-show="isDark"
class="w-8 h-8 text-white"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"
/>
</svg>
<svg
x-show="!isDark"
class="w-8 h-8 text-white"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
/>
</svg>
</button>
</div>
</div>
<script>
const setup = () => {
const getTheme = () => {
if (window.localStorage.getItem('dark')) {
return JSON.parse(window.localStorage.getItem('dark'))
}
return !!window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
}
const setTheme = (value) => {
window.localStorage.setItem('dark', value)
}
const getColor = () => {
if (window.localStorage.getItem('color')) {
return window.localStorage.getItem('color')
}
return 'cyan'
}
const setColors = (color) => {
const root = document.documentElement
root.style.setProperty('--color-primary', `var(--color-${color})`)
root.style.setProperty('--color-primary-50', `var(--color-${color}-50)`)
root.style.setProperty('--color-primary-100', `var(--color-${color}-100)`)
root.style.setProperty('--color-primary-light', `var(--color-${color}-light)`)
root.style.setProperty('--color-primary-lighter', `var(--color-${color}-lighter)`)
root.style.setProperty('--color-primary-dark', `var(--color-${color}-dark)`)
root.style.setProperty('--color-primary-darker', `var(--color-${color}-darker)`)
this.selectedColor = color
window.localStorage.setItem('color', color)
}
function onSignIn(googleUser) {
var profile = googleUser.getBasicProfile();
console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
console.log('Name: ' + profile.getName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
}
function signOut() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
console.log('User signed out.');
});
}
return {
loading: true,
isDark: getTheme(),
color: getColor(),
selectedColor: 'cyan',
toggleTheme() {
this.isDark = !this.isDark
setTheme(this.isDark)
},
setColors,
}
}
</script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
</body>
</html>