🌱✨ ナスの光合成速度アプリ 🍆💨
🌡️ 気温: 20°C
☀️ 照度: 500 W
🌀 CO₂濃度: 500 ppm
💡 結果がここに表示されます！
🐞✨🌟🍀🎉
🌼🦋🐝🌈🍄
```html
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-30px); }
60% { transform: translateY(-15px); }
}
@keyframes sparkle {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.animated {
animation: bounce 2s infinite;
}
.sparkle {
animation: sparkle 1.5s infinite;
}
</style>
</head>
<body>
<div style="width: 400px; height: 400px; background: linear-gradient(to top right, #a8e6cf, #dcedc1); display: flex; flex-direction: column; align-items: center; justify-content: space-around; font-family: Arial, sans-serif;">
<div style="font-size: 24px;">
🌱✨ ナスの光合成速度アプリ 🍆💨
</div>
<div style="display: flex; flex-direction: column; align-items: center;">
<div style="margin: 5px;">
🌡️ 気温: <span id="tempValue">20</span>°C
</div>
<input type="range" id="temperature" min="5" max="35" value="20" style="width: 200px;" oninput="document.getElementById('tempValue').innerText = this.value">
</div>
<div style="display: flex; flex-direction: column; align-items: center;">
<div style="margin: 5px;">
☀️ 照度: <span id="lightValue">500</span> W
</div>
<input type="range" id="light" min="0" max="1000" value="500" style="width: 200px;" oninput="document.getElementById('lightValue').innerText = this.value">
</div>
<div style="display: flex; flex-direction: column; align-items: center;">
<div style="margin: 5px;">
🌀 CO₂濃度: <span id="co2Value">500</span> ppm
</div>
<input type="range" id="co2" min="250" max="1000" value="500" style="width: 200px;" oninput="document.getElementById('co2Value').innerText = this.value">
</div>
<button onclick="calculate()" style="padding: 10px 20px; font-size: 18px; border: none; border-radius: 10px; background-color: #ffcc5c; cursor: pointer;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'">
🧮 計算する 🔍
</button>
<div id="result" style="font-size: 20px; margin-top: 10px; min-height: 30px;">💡 結果がここに表示されます！</div>
<div style="position: absolute; top: 10px; right: 10px;">
🐞✨🌟🍀🎉
</div>
<div style="position: absolute; bottom: 10px; left: 10px;">
🌼🦋🐝🌈🍄
</div>
</div>
<script>
function calculate() {
const temp = parseFloat(document.getElementById('temperature').value);
const light = parseFloat(document.getElementById('light').value);
const co2 = parseFloat(document.getElementById('co2').value);
let rate = 0;
if (temp >=25 && temp <=28) {
rate = 10;
} else if (temp <25 && temp >=5) {
rate = 10 - (25 - temp) * 0.2;
} else if (temp >28 && temp <=35) {
rate = 10 - (temp - 28) * 0.2;
}
// Normalize light and CO2
rate *= (light / 500) * (co2 / 500);
rate = rate.toFixed(2);
const resultDiv = document.getElementById('result');
resultDiv.innerText = `🌿 光合成速度: ${rate} μmol/m/s 💨`;
resultDiv.classList.add('sparkle');
setTimeout(() => {
resultDiv.classList.remove('sparkle');
}, 1500);
}
</script>
</body>
</html>
```