<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thermometer</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
margin: 0;
}
.thermometer {
position: relative;
width: 60px;
height: 300px;
background-color: #ddd;
border-radius: 30px;
overflow: hidden;
margin-bottom: 20px;
border: 2px solid #333;
}
.mercury {
position: absolute;
bottom: 0;
width: 100%;
height: 0;
background: linear-gradient(to top, #ff0000, #ff9900, #ffff00, #00ff00);
transition: height 0.5s ease-in-out;
}
.temperature-display {
position: absolute;
bottom: -40px;
width: 100%;
text-align: center;
font-size: 20px;
font-weight: bold;
}
#temperature-range {
width: 300px;
}
.label {
position: absolute;
left: 70px;
width: 100px;
text-align: left;
font-size: 14px;
font-weight: bold;
}
.label.normal { bottom: 0; color: #00ff00; }
.label.medium { bottom: 40%; color: #ffff00; }
.label.risky { bottom: 70%; color: #ff0000; }
.message {
font-size: 20px;
font-weight: bold;
margin-top: 20px;
}
.digital-scale {
position: relative;
width: 300px;
height: 50px;
background-color: #333;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
margin-top: 20px;
border-radius: 10px;
}
.doctor-emoji {
font-size: 50px;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="thermometer">
<div class="mercury"></div>
<div class="temperature-display">
<span id="temperature-value">0</span> °C
</div>
<div class="label normal">Normal</div>
<div class="label medium">Medium</div>
<div class="label risky">Risky</div>
</div>
<input type="range" id="temperature-range" min="0" max="50" step="1" value="0">
<div class="digital-scale" id="digital-scale">0 °C</div>
<div class="message" id="message"></div>
<div class="doctor-emoji">👨⚕️</div>
<script>
const temperatureRange = document.getElementById('temperature-range');
const temperatureValue = document.getElementById('temperature-value');
const mercury = document.querySelector('.mercury');
const message = document.getElementById('message');
const digitalScale = document.getElementById('digital-scale');
temperatureRange.addEventListener('input', function() {
const temperature = temperatureRange.value;
temperatureValue.textContent = temperature;
digitalScale.textContent = `${temperature} °C`;
const height = (temperature / 50) * 100;
mercury.style.height = `${height}%`;
if (temperature < 36) {
mercury.style.background = '#00ff00';
message.textContent = 'Normal Temperature';
message.style.color = '#00ff00';
} else if (temperature >= 36 && temperature <= 38) {
mercury.style.background = '#ffff00';
message.textContent = 'Medium Temperature';
message.style.color = '#ffff00';
} else {
mercury.style.background = '#ff0000';
message.textContent = 'Risky Temperature';
message.style.color = '#ff0000';
}
});
</script>
</body>
</html>