-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathage.html
121 lines (117 loc) · 4.64 KB
/
age.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
<html>
<head>
<title>How Old Are You?</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>
<style>
body {
font-family: 'Arial', sans-serif;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 12px;
background: #ef4444;
outline: none;
opacity: 0.7;
transition: opacity 0.2s;
border-radius: 25px; /* Make the slider bar roundish */
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #ffffff;
cursor: pointer;
border-radius: 50%;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Add black shadow around the thumb */
transition: transform 0.2s;
}
.slider::-webkit-slider-thumb:hover {
transform: scale(1.2);
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
background: #ffffff;
cursor: pointer;
border-radius: 50%;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Add black shadow around the thumb */
transition: transform 0.2s;
}
.slider::-moz-range-thumb:hover {
transform: scale(1.2);
}
.back-button {
position: absolute;
top: 20px;
left: 20px;
display: flex;
align-items: center;
color: black;
cursor: pointer;
transition: color 0.3s;
}
.back-button:hover {
color: #555;
}
</style>
</head>
<body class="bg-white">
<div id="root"></div>
<script type="text/babel">
function App() {
const [age, setAge] = React.useState(28);
const handleSliderChange = (event) => {
setAge(event.target.value);
};
const handleContinue = () => {
window.location.href = 'weight.html';
};
return (
<div className="flex flex-col items-center justify-center min-h-screen bg-white relative">
<div className="back-button" onClick={() => window.location.href = 'gender.html'}>
<span className="text-lg">Back</span>
</div>
<div className="w-full max-w-md p-4">
<h1 className="text-2xl font-bold text-center mb-2">How Old Are You?</h1>
<p className="text-center text-sm bg-red-100 p-2 rounded mb-4">
Please tell us your age to help us provide age-appropriate content and recommendations. This information ensures you get the most relevant features and experience on our platform. Don't worry, you can always update this information later in your profile settings.
</p>
<div className="text-center text-5xl font-bold mb-2">{age}</div>
<div className="flex justify-center mb-4">
<i className="fas fa-caret-up text-blue-500 text-2xl"></i>
</div>
<div className="flex justify-center mb-4 w-full">
<input
type="range"
min="1"
max="89"
value={age}
className="slider"
onChange={handleSliderChange}
/>
</div>
<div className="flex justify-center">
<button
className="bg-red-500 text-white text-lg font-bold py-2 px-8 rounded-full shadow-md"
onClick={handleContinue}
>
Continue
</button>
</div>
</div>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'));
</script>
</body>
</html>