-
Notifications
You must be signed in to change notification settings - Fork 0
/
signup.html
168 lines (147 loc) · 8.12 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
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Signup</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
<div class="flex justify-end bg-indigo-600 px-4 py-3 text-white">
<a href="tel:9820746266">
<span style="color: #ffffff;">
</span>
+91-9820746266
</a> /
<a href="tel:9833146266">
+91-9833146266
</a>
</div>
<section class="bg-gray-100">
<div class="lg:grid lg:min-h-screen lg:grid-cols-12">
<section class="relative flex h-32 items-end bg-gray-900 lg:col-span-5 lg:h-full xl:col-span-6 hidden sm:flex">
<img
alt=""
src="https://cdn.pixabay.com/photo/2023/12/01/07/23/ai-generated-8423032_640.jpg"
class="absolute inset-0 h-full w-full object-cover opacity-80"
/>
<div class="hidden lg:relative lg:block lg:p-12">
<a class="block text-white" href="#">
<span class="sr-only">Home</span>
</a>
<h1 class="mt-2 text-2xl font-bold text-white sm:text-3xl md:text-4xl">
The Artist
</h1>
<p class="mt-4 leading-relaxed text-white/90">
At Artist, we specialize in connecting clients with top-tier artists for unforgettable events. Our streamlined booking process ensures a hassle-free experience, allowing you to secure the perfect talent for any occasion with just a few simple steps.
</p>
</div>
</section>
<main class="flex items-center justify-center px-8 py-4 sm:px-12 lg:col-span-7 lg:px-16 lg:py-12 xl:col-span-6">
<div class="max-w-xl lg:max-w-3xl">
<form>
<div class="flex items-center space-x-6">
<div class="shrink-0">
<h1 class="block text-md font-medium text-gray-700 mb-2">Profile Photo</h1>
<img id='preview_img' class="h-16 w-16 object-cover rounded-full" src="https://lh3.googleusercontent.com/a-/AFdZucpC_6WFBIfaAbPHBwGM9z8SxyM1oV4wB4Ngwp_UyQ=s96-c" alt="Current profile photo" />
</div>
<label class="block">
<span class="sr-only">Choose profile photo</span>
<input type="file" onchange="loadFile(event)" class="block w-full text-sm text-slate-500
file:mr-4 file:py-2 file:px-4
file:rounded-full file:border-0
file:text-sm file:font-semibold
file:bg-violet-50 file:text-indigo-800
hover:file:bg-violet-100
"/>
</label>
</div>
</form>
<form action="#" class="mt-8 grid grid-cols-6 gap-6">
<div class="col-span-6 sm:col-span-3">
<label for="FirstName" class="block text-md font-medium text-gray-700">First Name</label>
<input type="text" id="FirstName" name="first_name" class="pl-3 mt-1 h-10 w-full rounded-md border-gray-200 bg-white text-lg text-gray-700 shadow-sm"/>
</div>
<div class="col-span-6 sm:col-span-3">
<label for="LastName" class="block text-md font-medium text-gray-700">Last Name</label>
<input type="text" id="LastName" name="last_name" class="pl-3 mt-1 h-10 w-full rounded-md border-gray-200 bg-white text-lg text-gray-700 shadow-sm"/>
</div>
<div class="col-span-6">
<label for="Email" class="block text-md font-medium text-gray-700">Email</label>
<input type="email" id="Email" name="email" class="pl-3 mt-1 w-full h-10 rounded-md border-gray-200 bg-white text-lg text-gray-700 shadow-sm"/>
</div>
<div class="col-span-6 sm:col-span-3">
<label for="Password" class="block text-md font-medium text-gray-700">Password</label>
<input type="password" id="Password" name="password" class="pl-3 mt-1 h-10 w-full rounded-md border-gray-200 bg-white text-lg text-gray-700 shadow-sm"/>
</div>
<div class="col-span-6 sm:col-span-3">
<label for="PasswordConfirmation" class="block text-md font-medium text-gray-700">Password Confirmation</label>
<input type="password" id="PasswordConfirmation" name="password_confirmation" class="pl-3 mt-1 h-10 w-full rounded-md border-gray-200 bg-white text-lg text-gray-700 shadow-sm"/>
</div>
<div class="col-span-6">
<label for="VideoLink1" class="block text-md font-medium text-gray-700">Video Link 1</label>
<input type="text" id="VideoLink1" name="video_link1" class="pl-3 mt-1 w-full h-10 rounded-md border-gray-200 bg-white text-lg text-gray-700 shadow-sm" placeholder="Enter video link 1"/>
</div>
<div class="col-span-6">
<label for="VideoLink2" class="block text-md font-medium text-gray-700">Video Link 2</label>
<input type="text" id="VideoLink2" name="video_link2" class="pl-3 mt-1 w-full h-10 rounded-md border-gray-200 bg-white text-lg text-gray-700 shadow-sm" placeholder="Enter video link 2"/>
</div>
<div class="col-span-6">
<label for="VideoLink3" class="block text-md font-medium text-gray-700">Video Link 3</label>
<input type="text" id="VideoLink3" name="video_link3" class="pl-3 mt-1 w-full h-10 rounded-md border-gray-200 bg-white text-lg text-gray-700 shadow-sm" placeholder="Enter video link 3"/>
</div>
<div class="col-span-6">
<label for="About" class="block text-md font-medium text-gray-700">Description</label>
<textarea id="About" name="about" rows="4" class="pl-3 mt-1 w-full rounded-md border-gray-200 bg-white text-lg text-gray-700 shadow-sm"></textarea>
</div>
<div class="col-span-6">
<label for="Category" class="block text-md font-medium text-gray-700">Category</label>
<select id="Category" name="category" class="pl-3 mt-1 w-full h-10 rounded-md border-gray-200 bg-white text-lg text-gray-700 shadow-sm">
<option>Category 1</option>
<option>Category 2</option>
<option>Category 3</option>
<option>Category 4</option>
</select>
</div>
<div class="col-span-6">
<label for="MarketingAccept" class="flex gap-4">
<input type="checkbox" id="MarketingAccept" name="marketing_accept" class="size-5 rounded-md border-gray-200 bg-white shadow-sm"/>
<span class="text-sm text-gray-700">I want to receive emails about events, product updates and company announcements.</span>
</label>
</div>
<div class="col-span-6">
<p class="text-sm text-gray-500">
By creating an account, you agree to our
<a href="#" class="text-gray-700 underline">terms and conditions</a>
and
<a href="#" class="text-gray-700 underline">privacy policy</a>.
</p>
</div>
<div class="col-span-6 sm:flex sm:items-center sm:gap-4">
<button class="inline-block shrink-0 rounded-md border border-indigo-600 bg-indigo-600 px-12 py-3 text-sm font-medium text-white transition hover:bg-transparent hover:text-indigo-600 focus:outline-none focus:ring active:text-blue-500">
Create an account
</button>
<p class="mt-4 text-sm text-gray-500 sm:mt-0">
Already have an account?
<a href="signin.html" class="text-gray-700 underline">Log in</a>.
</p>
</div>
</form>
</div>
</main>
</div>
</section>
<script>
var loadFile = function(event) {
var input = event.target;
var file = input.files[0];
var type = file.type;
var output = document.getElementById('preview_img');
output.src = URL.createObjectURL(event.target.files[0]);
output.onload = function() {
URL.revokeObjectURL(output.src) // free memory
}
};
</script>
</body>
</html>