-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgender.html
60 lines (58 loc) · 3.35 KB
/
gender.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
<html>
<head>
<title>Gender Selection</title>
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"></link>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Poppins', sans-serif;
}
</style>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
<div id="root"></div>
<script type="text/babel">
function App() {
const [selectedGender, setSelectedGender] = React.useState(null);
return (
<div className="bg-white rounded-lg shadow-lg p-6 max-w-2xl mx-auto">
<h1 className="text-2xl font-bold text-center mb-4">What's Your Gender</h1>
<p className="text-center text-sm text-gray-600 mb-6 bg-red-100 p-4 rounded-lg">
Please select your gender to help us personalize your experience. Your choice will help us provide content and recommendations tailored just for you. You can always update this preference later in your profile settings.
</p>
<div className="flex flex-col items-center space-y-6">
<div className="flex flex-col items-center cursor-pointer" onClick={() => setSelectedGender('Male')}>
<div className={`rounded-full p-6 shadow-lg transition-transform transform ${selectedGender === 'Male' ? 'bg-blue-700 scale-110' : 'bg-blue-500'}`}>
<i className="fas fa-mars text-white text-4xl"></i>
</div>
<p className={`mt-2 ${selectedGender === 'Male' ? 'text-gray-700' : 'text-gray-300'}`}>Male</p>
</div>
<div className="flex flex-col items-center cursor-pointer" onClick={() => setSelectedGender('Female')}>
<div className={`rounded-full p-6 shadow-lg transition-transform transform ${selectedGender === 'Female' ? 'bg-pink-700 scale-110' : 'bg-pink-500'}`}>
<i className="fas fa-venus text-white text-4xl"></i>
</div>
<p className={`mt-2 ${selectedGender === 'Female' ? 'text-gray-700' : 'text-gray-300'}`}>Female</p>
</div>
</div>
<button
className={`mt-8 py-2 px-6 rounded-full shadow-lg w-full transition-colors ${selectedGender ? 'bg-red-500 text-white' : 'bg-gray-300 text-gray-500'}`}
disabled={!selectedGender}
onClick={() => {
if (selectedGender) {
window.location.href = 'age.html'; // Redirect to age.html
}
}}
>
Continue
</button>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'));
</script>
</body>
</html>