<!DOCTYPE html>
<html>
<head>
<title>トレーニングメニュー生成アプリ</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #eee;
}
h1 {
text-align: center;
}
form {
background-color: #fff;
padding: 20px;
margin: 0 auto;
max-width: 500px;
border-radius: 10px;
box-shadow: 0px 0px 10px #aaa;
}
fieldset {
border: none;
margin: 0;
padding: 0;
}
input[type='number'] {
width: 70px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
button {
margin-top: 10px;
padding: 8px 16px;
background-color: #2ecc71;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #27ae60;
}
p {
margin-top: 20px;
font-size: 18px;
}
</style>
</head>
<body>
<h1>トレーニングメニュー生成アプリ</h1>
<form onsubmit="generateMenu(); return false;">
<fieldset>
<legend>トレーニングメニュー設定</legend>
<label>トレーニング時間（分）：<input type="number" min="1" max="120" value="30" id="timeInput"></label>
<label>トレーニング強度（1〜10）：<input type="number" min="1" max="10" value="5" id="intensityInput"></label>
</fieldset>
<button type="submit">メニューを生成する</button>
</form>
<p id="menu"></p>
<p id="message"></p>
<script>
function generateMenu() {
let time = document.getElementById("timeInput").value;
let intensity = document.getElementById("intensityInput").value;
// ダイエットメニューの生成
let options = ["腕立て伏せ", "スクワット", "ランニング", "腹筋", "腕のストレッチ", "腿のストレッチ", "胸のストレッチ"];
let menu = [];
for (let i = 0; i < 3; i++) {
menu.push(options[Math.floor(Math.random() * options.length)]);
}
// メッセージの生成
let message = "";
if (intensity >= 8) {
message = "がんばれ！きみはヒーローだ！";
} else if (intensity >= 6) {
message = "偉大なる健康オタクよ、今日も地獄のようなトレーニングをこなしてくれるのだ！";
} else {
message = "頑張ってるね！継続は力なり！";
}
// 表示の更新
document.getElementById("menu").textContent = `${time}分間のダイエットメニューは、${menu[0]}、${menu[1]}、${menu[2]}だよ！`;
document.getElementById("message").textContent = message;
}
</script>
</body>
</html>
