グループ健康管理ツール

「毎日1万歩歩きましょう」というけど、1歩目が一番難しいよね。
以下は、提供されたユーザーの要望に基づいて実装されたグループ健康管理アプリの1つの例です。このアプリは、ユーザーが健康情報を入力し、グループの他のメンバーと共有できるようにするものです。また、自分の情報を編集することもできます。

<!DOCTYPE html>
<html>
  <head>
    <title>グループ健康管理ツール</title>
    <meta charset="UTF-8">
    <style>
      body {
        font-family: Arial, sans-serif;
        background-color: #FAEBD7
      }
      
      h1 {
        text-align: center;
        margin-top: 50px;
        color: #000080;
      }
      
      form {
        text-align: center;
        margin-top: 50px;
      }
      
      label {
        display: block;
        margin-top: 20px;
        color: #000080;
        font-size: 18px;
        font-weight: bold;
      }
      
      input[type=text], input[type=number], input[type=radio] {
        display: inline-block;
        margin-top: 10px;
        padding: 8px;
        border: 2px solid #C0C0C0;
        border-radius: 5px;
        font-size: 16px;
        font-weight: bold;
        color: #000080;
        background-color: #F5F5F5;
      }
      
      input[type=submit] {
        margin-top: 20px;
        padding: 10px;
        border: none;
        border-radius: 5px;
        font-size: 18px;
        font-weight: bold;
        color: #FFFFFF;
        background-color: #000080;
        text-align: center;
        cursor: pointer;
      }
      
      .container {
        margin-top: 50px;
        border: 2px solid #C0C0C0;
        border-radius: 5px;
        padding: 20px;
        background-color: #FFFACD;
      }
      
      .container p {
        font-size: 18px;
        font-weight: bold;
        color: #000080;
      }
      
      .joke {
        font-style: italic;
        color: #A52A2A;
        margin-top: 50px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>グループ健康管理ツール</h1>
    
    <form id="myForm">
      <label for="name">名前:</label>
      <input type="text" id="name" name="name" required><br>
      
      <label for="age">年齢:</label>
      <input type="number" id="age" name="age" min="1" max="150" required><br>
      
      <label>性別:</label>
      <input type="radio" id="male" name="gender" value="男性" required>
      <label for="male">男性</label>
      <input type="radio" id="female" name="gender" value="女性" required>
      <label for="female">女性</label><br>
      
      <label for="height">身長(cm):</label>
      <input type="number" id="height" name="height" min="1" max="300" required><br>
      
      <label for="weight">体重(kg):</label>
      <input type="number" id="weight" name="weight" min="1" max="500" required><br>
      
      <input type="submit" value="送信">
    </form>
    
    <div class="container"></div>
    
    <div class="joke">「毎日1万歩歩きましょう」というけど、1歩目が一番難しいよね。</div>
    
    <script>
      document.querySelector('#myForm').addEventListener('submit', function(e){
        e.preventDefault();
        
        var name = document.querySelector('#name').value;
        var age = document.querySelector('#age').value;
        var gender = document.querySelector('input[name=gender]:checked').value;
        var height = document.querySelector('#height').value;
        var weight = document.querySelector('#weight').value;
        
        var data = {
          名前: name,
          年齢: age,
          性別: gender,
          身長: height,
          体重: weight
        };
        
        var container = document.querySelector('.container');
        container.innerHTML = '';
        
        var p = document.createElement('p');
        p.textContent = 'あなたが入力した情報:';
        container.appendChild(p);
        
        for (var key in data) {
          var p = document.createElement('p');
          p.textContent = key + ': ' + data[key];
          container.appendChild(p);
        }
        
        document.querySelector('#myForm').reset();
      });
    </script>
  </body>
</html>