-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
90 lines (81 loc) · 5.07 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
<html>
<head>
<title>Test</title>
<script src="https://unpkg.com/alpinejs" defer></script>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 min-h-screen">
<div class="container mx-auto px-4 py-8 flex flex-col md:flex-row items-center justify-center gap-8">
<section class="w-full md:w-1/2 rounded-lg overflow-hidden shadow-2xl">
<img src="Image/5gball.jpg" alt="The Boys" class="w-full h-full object-cover">
</section>
<section class="w-full md:w-1/2 bg-white p-8 rounded-lg shadow-2xl" x-data="{
formData: {
fullName: '',
email: '',
username: '',
password: '',
repeatPassword: ''
},
agreed: false,
showPassword: false,
submitForm() {
if (this.formData.password !== this.formData.repeatPassword) {
alert('Passwords do not match!');
return;
}
if (!this.agreed) {
alert('Please agree to the Terms of Use');
return;
}
alert('Successfully signed up!');
}
}">
<div class="space-y-6">
<h2 class="text-3xl font-bold text-gray-800 mb-8">Sign Up</h2>
<div class="space-y-2">
<label class="block text-sm font-medium text-gray-700">Full Name</label>
<input type="text" x-model="formData.fullName" placeholder="Name..."
class="w-full px-3 py-2 border-b-2 border-gray-300 focus:border-pink-500 focus:outline-none transition-colors" required>
</div>
<div class="space-y-2">
<label class="block text-sm font-medium text-gray-700">Email</label>
<input type="email" x-model="formData.email" placeholder="Email address"
class="w-full px-3 py-2 border-b-2 border-gray-300 focus:border-pink-500 focus:outline-none transition-colors" required>
</div>
<div class="space-y-2">
<label class="block text-sm font-medium text-gray-700">Username</label>
<input type="text" x-model="formData.username" placeholder="Username..."
class="w-full px-3 py-2 border-b-2 border-gray-300 focus:border-pink-500 focus:outline-none transition-colors" required>
</div>
<div class="space-y-2">
<label class="block text-sm font-medium text-gray-700">Password</label>
<div class="relative">
<input :type="showPassword ? 'text' : 'password'" x-model="formData.password" placeholder="*************"
class="w-full px-3 py-2 border-b-2 border-gray-300 focus:border-pink-500 focus:outline-none transition-colors" required>
<button @click="showPassword = !showPassword" type="button" class="absolute right-2 top-2 text-gray-500">
<span x-show="!showPassword">👁️</span>
<span x-show="showPassword">🔒</span>
</button>
</div>
</div>
<div class="space-y-2">
<label class="block text-sm font-medium text-gray-700">Repeat Password</label>
<div class="relative">
<input :type="showPassword ? 'text' : 'password'" x-model="formData.repeatPassword" placeholder="*************"
class="w-full px-3 py-2 border-b-2 border-gray-300 focus:border-pink-500 focus:outline-none transition-colors" required>
</div>
</div>
<div class="flex items-center space-x-2">
<input type="checkbox" x-model="agreed" class="w-4 h-4 text-pink-500 focus:ring-pink-500 border-gray-300 rounded">
<label class="text-sm text-gray-700">I agree to the Terms of Use</label>
</div>
<button @click="submitForm()"
class="w-full py-3 px-4 bg-pink-500 hover:bg-pink-600 text-white font-semibold rounded-lg shadow-md transform transition-transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-opacity-50">
Sign Up
</button>
</div>
</section>
</div>
</body>
</html>