-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathheight.html
127 lines (122 loc) · 4.83 KB
/
height.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
<!DOCTYPE html>
<html>
<head>
<title>What Is Your Height?</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" />
<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 [height, setHeight] = React.useState(165);
const handleSliderChange = (event) => {
setHeight(event.target.value);
};
const handleContinue = () => {
// Redirect to purpose.html
window.location.href = 'purpose.html';
};
return (
<div className="flex flex-col items-center justify-center min-h-screen bg-white relative">
{/* Back Button */}
<div className="back-button" onClick={() => window.location.href = 'weight.html'}>
<i className="fas fa-arrow-left mr-2"></i>
<span className="text-lg">Back</span>
</div>
{/* Main Content */}
<div className="w-full max-w-md p-4">
<h1 className="text-2xl font-bold text-center mb-2">What Is Your Height?</h1>
<p className="text-center text-sm bg-red-100 p-2 rounded mb-4">
Please tell us your height to help us provide personalized health recommendations and track your wellness journey. Your data is kept private and can be updated anytime to maintain accurate progress tracking.
</p>
<div className="text-center text-5xl font-bold mb-2">{height} cm</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="150"
max="200"
value={height}
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 hover:bg-red-600 transition"
onClick={handleContinue}
>
Continue
</button>
</div>
</div>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'));
</script>
</body>
</html>