-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsignup.html
152 lines (149 loc) · 6.78 KB
/
signup.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
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ثبت نام</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="//unpkg.com/alpinejs" defer></script>
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="src/styles/signup.css">
<link rel="stylesheet" href="src/styles/scroolbar.css">
</head>
<body>
<!-- banner -->
<div class="relative isolate flex items-center gap-x-6 overflow-hidden bg-gray-50 px-6 py-2.5 sm:px-3.5 sm:before:flex-1">
<div class="absolute left-[max(-7rem,calc(50%-52rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl" aria-hidden="true">
<div class="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-[#ff80b5] to-[#9089fc] opacity-30" style="clip-path: polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)"></div>
</div>
<div class="absolute left-[max(45rem,calc(50%+8rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl" aria-hidden="true">
<div class="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-[#ff80b5] to-[#9089fc] opacity-30" style="clip-path: polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)"></div>
</div>
<div class="flex flex-wrap items-center gap-x-4 gap-y-2">
<p class="text-lg leading-6 text-gray-900 text-center">
<strong class="font-semibold"> </strong>تمام فیلد ها به درستی پر شوند
</p>
</div>
<div class="flex flex-1 justify-end">
<!-- <button type="button" class="-m-3 p-3 focus-visible:outline-offset-[-4px]">
<span class="sr-only">Dismiss</span>
<svg class="h-5 w-5 text-gray-900" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
</svg>
</button> -->
</div>
</div>
<main id="main__top"
class=" w-full h-screen flex flex-col items-center justify-center px-4"
>
<div id="content" class="load max-w-sm w-full text-gray-600 space-y-5">
<div class="text-center pb-8">
<div class="mt-5">
<h3 id="top" class="text-gray-800 text-dark text-2xl font-bold sm:text-3xl">
ثبت نام کنید
</h3>
</div>
</div>
<form name="myform" id="myform" class="space-y-5">
<div>
<label class="font-medium text-dark"> نام </label>
<input required maxlength="11" id="username"
type="text"
name="username"
class="w-full mt-2 px-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg"
/>
</div>
<div>
<label class="font-medium text-dark"> نام و نام خانوادگی </label>
<input required maxlength="11" id="username"
type="text"
name="username"
class="w-full mt-2 px-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg"
/>
</div>
<div>
<label class="font-medium text-dark"> کد ملی </label>
<input required maxlength="11" id="code-meli"
type="number"
name="codemeli"
class="w-full mt-2 px-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg"
/>
</div>
<div>
<label class="font-medium text-dark"> شماره تلفن </label>
<input required maxlength="11" id="number"
type="number"
name="number"
class="w-full mt-2 px-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg"
/>
</div>
<div class="email__eror"></div>
<div>
<label class="font-medium text-dark"> رمز ورود </label>
<input required id="password"
type="password"
name="password"
class="w-full mt-2 px-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg"
/>
<p class="error__pass"></p>
</div>
<div>
<label class="font-medium text-dark"> تکرار رمز عبور </label>
<input required id="repassword"
type="password"
name="repassword"
class="w-full mt-2 px-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg"
/>
<div class="repass__eror"></div>
</div>
<div class="flex items-center justify-between text-sm">
<div class="flex items-center gap-x-3">
<input required
name="re-password"
type="checkbox"
id="remember-me-checkbox"
class="checkbox-item peer hidden"
/>
<label
for="remember-me-checkbox"
class="relative flex w-5 h-5 bg-white peer-checked:bg-indigo-600 rounded-md border ring-offset-2 ring-indigo-600 duration-150 peer-active:ring cursor-pointer after:absolute after:inset-x-0 after:top-[3px] after:m-auto after:w-1.5 after:h-2.5 after:border-r-2 after:border-b-2 after:border-white after:rotate-45"
></label>
<span class="text-dark">من را به یاد بیاور</span>
</div>
<a
href="javascript:void(0)"
class="text-center text-dark hover:text-indigo-500"
>رمز را فراموش کرده ام?</a
>
</div>
<button type="submit"
class="w-full px-4 py-2 text-white font-medium bg-indigo-600 hover:bg-indigo-500 active:bg-indigo-600 rounded-lg duration-150"
>
ثبت نام
</button>
</form>
<button
class="w-full flex items-center justify-center gap-x-3 py-2.5 border rounded-lg text-sm font-medium hover:bg-gray-50 duration-150 active:bg-gray-100"
>
<!-- SVG for Google Sign In -->
<img
src="https://raw.githubusercontent.com/sidiDev/remote-assets/7cd06bf1d8859c578c2efbfda2c68bd6bedc66d8/google-icon.svg"
alt="Google"
class="w-5 h-5"
/>
<!-- Comment: Google Icon SVG here -->
ورود با اکانت گوگل
</button>
<p class="text-center">
اکانت ندارم?
<a
href="login.html"
class="font-medium text-indigo-600 hover:text-indigo-500"
> ورود</a
>
</p>
</div>
</main>
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
</body>
</html>