Skip to content

Commit 2398f68

Browse files
TobiasMue91TobiasMue91
committed
- fix small styling error
1 parent 19c8e40 commit 2398f68

File tree

1 file changed

+303
-1
lines changed

1 file changed

+303
-1
lines changed

‎tools/bmi_calculator.html‎

Lines changed: 303 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,309 @@
66
<title>BMI Calculator</title>
77
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📊</text></svg>">
88
<style>
9-
:root{--primary:#4285f4;--primary-dark:#2a66c8;--success:#34a853;--warning:#fbbc05;--danger:#ea4335;--light:#f8f9fa;--dark:#212121;--gray:#e0e0e0;--gray-dark:#757575;--radius:8px;--shadow:0 3px 6px rgba(0,0,0,0.1);--transition:all 0.3s ease;}*{margin:0;padding:0;box-sizing:border-box;}body{font-family:'Segoe UI',Roboto,system-ui,sans-serif;background-color:var(--light);color:var(--dark);line-height:1.6;padding:20px;display:flex;flex-direction:column;min-height:100vh;}.container{max-width:550px;margin:0 auto;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;width:100%;}header{background:var(--primary);color:white;padding:20px;text-align:center;}header h1{margin:0;font-size:1.8rem;font-weight:500;}.unit-toggle{display:flex;justify-content:center;margin-top:12px;}.unit-toggle-btn{background:rgba(255,255,255,0.2);border:none;color:white;padding:5px 15px;font-size:0.9rem;cursor:pointer;transition:var(--transition);}.unit-toggle-btn:first-child{border-radius:20px 0 0 20px;}.unit-toggle-btn:last-child{border-radius:0 20px 20px 0;}.unit-toggle-btn.active{background:white;color:var(--primary);}.calculator-form{padding:24px;}.input-group{margin-bottom:20px;}.input-group label{display:block;margin-bottom:8px;font-weight:500;color:var(--gray-dark);font-size:0.9rem;}.input-row{display:flex;gap:10px;}.input-field{position:relative;flex:1;}.input-field input{width:100%;padding:12px 15px;border:1px solid var(--gray);border-radius:var(--radius);font-size:1rem;transition:var(--transition);}.input-field input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px rgba(66,133,244,0.2);}.input-field .unit{position:absolute;right:15px;top:50%;transform:translateY(-50%);color:var(--gray-dark);font-size:0.9rem;pointer-events:none;}.error-message{color:var(--danger);font-size:0.8rem;margin-top:5px;display:none;}.btn-row{display:flex;gap:10px;margin-top:25px;}.btn{flex:1;padding:12px;border:none;border-radius:var(--radius);font-size:1rem;cursor:pointer;transition:var(--transition);font-weight:500;}.btn-primary{background:var(--primary);color:white;}.btn-primary:hover{background:var(--primary-dark);}.btn-secondary{background:var(--gray);color:var(--dark);}.btn-secondary:hover{background:var(--gray-dark);color:white;}.results{background:var(--light);padding:24px;border-top:1px solid var(--gray);display:none;}.result-header{text-align:center;margin-bottom:20px;}.bmi-value{font-size:2.5rem;font-weight:700;color:var(--primary);margin:0;}.bmi-category{font-size:1.2rem;color:var(--gray-dark);}.bmi-scale{height:15px;background:linear-gradient(to right,#3498db 0%,#2ecc71 18.5%,#27ae60 25%,#f1c40f 30%,#e67e22 35%,#e74c3c 100%);border-radius:10px;margin:30px 0 10px;position:relative;}.bmi-marker{width:2px;height:20px;background:var(--dark);position:absolute;top:-10px;transform:translateX(-50%);}.bmi-marker::after{content:'';position:absolute;bottom:-5px;left:-4px;width:10px;height:10px;background:var(--dark);border-radius:50%;}.scale-labels{display:flex;justify-content:space-between;margin-top:5px;color:var(--gray-dark);font-size:0.8rem;}.bmi-description{margin-top:20px;line-height:1.6;}.about-section{padding:24px;border-top:1px solid var(--gray);}.about-section h2{font-size:1.2rem;margin-bottom:10px;}.about-section p{font-size:0.9rem;color:var(--gray-dark);line-height:1.6;}footer{text-align:center;margin-top:20px;font-size:0.8rem;color:var(--gray-dark);}@media (max-width:600px){body{padding:10px;}.calculator-form,.results,.about-section{padding:15px;}.bmi-value{font-size:2rem;}.input-row{flex-direction:column;}}button:focus,input:focus{outline:2px solid var(--primary);outline-offset:2px;}@keyframes fadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}.fade-in{animation:fadeIn 0.3s ease-out forwards;}
9+
:root {
10+
--primary: #4285f4;
11+
--primary-dark: #2a66c8;
12+
--success: #34a853;
13+
--warning: #fbbc05;
14+
--danger: #ea4335;
15+
--light: #f8f9fa;
16+
--dark: #212121;
17+
--gray: #e0e0e0;
18+
--gray-dark: #757575;
19+
--radius: 8px;
20+
--shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
21+
--transition: all 0.3s ease;
22+
}
23+
24+
* {
25+
margin: 0;
26+
padding: 0;
27+
box-sizing: border-box;
28+
}
29+
30+
body {
31+
font-family: 'Segoe UI', Roboto, system-ui, sans-serif;
32+
background-color: var(--light);
33+
color: var(--dark);
34+
line-height: 1.6;
35+
padding: 20px;
36+
display: flex;
37+
flex-direction: column;
38+
min-height: 100vh;
39+
}
40+
41+
.container {
42+
max-width: 550px;
43+
margin: 0 auto;
44+
background: #fff;
45+
border-radius: var(--radius);
46+
box-shadow: var(--shadow);
47+
overflow: hidden;
48+
width: 100%;
49+
}
50+
51+
header {
52+
background: var(--primary);
53+
color: white;
54+
padding: 20px;
55+
text-align: center;
56+
}
57+
58+
header h1 {
59+
margin: 0;
60+
font-size: 1.8rem;
61+
font-weight: 500;
62+
}
63+
64+
.unit-toggle {
65+
display: flex;
66+
justify-content: center;
67+
margin-top: 12px;
68+
}
69+
70+
.unit-toggle-btn {
71+
background: rgba(255, 255, 255, 0.2);
72+
border: none;
73+
color: white;
74+
padding: 5px 15px;
75+
font-size: 0.9rem;
76+
cursor: pointer;
77+
transition: var(--transition);
78+
}
79+
80+
.unit-toggle-btn:first-child {
81+
border-radius: 20px 0 0 20px;
82+
}
83+
84+
.unit-toggle-btn:last-child {
85+
border-radius: 0 20px 20px 0;
86+
}
87+
88+
.unit-toggle-btn.active {
89+
background: white;
90+
color: var(--primary);
91+
}
92+
93+
.calculator-form {
94+
padding: 24px;
95+
}
96+
97+
.input-group {
98+
margin-bottom: 20px;
99+
}
100+
101+
.input-group label {
102+
display: block;
103+
margin-bottom: 8px;
104+
font-weight: 500;
105+
color: var(--gray-dark);
106+
font-size: 0.9rem;
107+
}
108+
109+
.input-row {
110+
display: flex;
111+
gap: 10px;
112+
}
113+
114+
.input-field {
115+
position: relative;
116+
flex: 1;
117+
}
118+
119+
.input-field input {
120+
width: 100%;
121+
padding: 12px 15px;
122+
border: 1px solid var(--gray);
123+
border-radius: var(--radius);
124+
font-size: 1rem;
125+
transition: var(--transition);
126+
}
127+
128+
.input-field input:focus {
129+
outline: none;
130+
border-color: var(--primary);
131+
box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2);
132+
}
133+
134+
.input-field .unit {
135+
position: absolute;
136+
right: 38px;
137+
top: 50%;
138+
transform: translateY(-50%);
139+
color: var(--gray-dark);
140+
font-size: 0.9rem;
141+
pointer-events: none;
142+
}
143+
144+
.error-message {
145+
color: var(--danger);
146+
font-size: 0.8rem;
147+
margin-top: 5px;
148+
display: none;
149+
}
150+
151+
.btn-row {
152+
display: flex;
153+
gap: 10px;
154+
margin-top: 25px;
155+
}
156+
157+
.btn {
158+
flex: 1;
159+
padding: 12px;
160+
border: none;
161+
border-radius: var(--radius);
162+
font-size: 1rem;
163+
cursor: pointer;
164+
transition: var(--transition);
165+
font-weight: 500;
166+
}
167+
168+
.btn-primary {
169+
background: var(--primary);
170+
color: white;
171+
}
172+
173+
.btn-primary:hover {
174+
background: var(--primary-dark);
175+
}
176+
177+
.btn-secondary {
178+
background: var(--gray);
179+
color: var(--dark);
180+
}
181+
182+
.btn-secondary:hover {
183+
background: var(--gray-dark);
184+
color: white;
185+
}
186+
187+
.results {
188+
background: var(--light);
189+
padding: 24px;
190+
border-top: 1px solid var(--gray);
191+
display: none;
192+
}
193+
194+
.result-header {
195+
text-align: center;
196+
margin-bottom: 20px;
197+
}
198+
199+
.bmi-value {
200+
font-size: 2.5rem;
201+
font-weight: 700;
202+
color: var(--primary);
203+
margin: 0;
204+
}
205+
206+
.bmi-category {
207+
font-size: 1.2rem;
208+
color: var(--gray-dark);
209+
}
210+
211+
.bmi-scale {
212+
height: 15px;
213+
background: linear-gradient(to right, #3498db 0%, #2ecc71 18.5%, #27ae60 25%, #f1c40f 30%, #e67e22 35%, #e74c3c 100%);
214+
border-radius: 10px;
215+
margin: 30px 0 10px;
216+
position: relative;
217+
}
218+
219+
.bmi-marker {
220+
width: 2px;
221+
height: 20px;
222+
background: var(--dark);
223+
position: absolute;
224+
top: -10px;
225+
transform: translateX(-50%);
226+
}
227+
228+
.bmi-marker::after {
229+
content: '';
230+
position: absolute;
231+
bottom: -5px;
232+
left: -4px;
233+
width: 10px;
234+
height: 10px;
235+
background: var(--dark);
236+
border-radius: 50%;
237+
}
238+
239+
.scale-labels {
240+
display: flex;
241+
justify-content: space-between;
242+
margin-top: 5px;
243+
color: var(--gray-dark);
244+
font-size: 0.8rem;
245+
}
246+
247+
.bmi-description {
248+
margin-top: 20px;
249+
line-height: 1.6;
250+
}
251+
252+
.about-section {
253+
padding: 24px;
254+
border-top: 1px solid var(--gray);
255+
}
256+
257+
.about-section h2 {
258+
font-size: 1.2rem;
259+
margin-bottom: 10px;
260+
}
261+
262+
.about-section p {
263+
font-size: 0.9rem;
264+
color: var(--gray-dark);
265+
line-height: 1.6;
266+
}
267+
268+
footer {
269+
text-align: center;
270+
margin-top: 20px;
271+
font-size: 0.8rem;
272+
color: var(--gray-dark);
273+
}
274+
275+
@media (max-width: 600px) {
276+
body {
277+
padding: 10px;
278+
}
279+
280+
.calculator-form, .results, .about-section {
281+
padding: 15px;
282+
}
283+
284+
.bmi-value {
285+
font-size: 2rem;
286+
}
287+
288+
.input-row {
289+
flex-direction: column;
290+
}
291+
}
292+
293+
button:focus, input:focus {
294+
outline: 2px solid var(--primary);
295+
outline-offset: 2px;
296+
}
297+
298+
@keyframes fadeIn {
299+
from {
300+
opacity: 0;
301+
transform: translateY(10px);
302+
}
303+
to {
304+
opacity: 1;
305+
transform: translateY(0);
306+
}
307+
}
308+
309+
.fade-in {
310+
animation: fadeIn 0.3s ease-out forwards;
311+
}
10312
</style>
11313
</head>
12314
<body>

0 commit comments

Comments
 (0)