信号待ちアプリ

<html>
  <head>
    <title>信号待ちアプリ</title>
    <meta charset="utf-8"/>
    <style>
      body{
        background-color: #f7cac9;
      }
      
      h1{
        text-align: center;
        font-size: 48px;
        margin-top: 60px;
      }
      
      button{
        font-size: 36px;
        width: 200px;
        height: 80px;
        background-color: #ff6b6b;
        border-radius: 10px;
        color: white;
        margin: 60px;
        
      }
      
      #timer {
        font-size: 128px;
        text-align: center;
        margin-top: 80px;
      }
      
      #instruction {
        font-size: 36px;
        text-align: center;
        margin-top: 40px;
      }
    </style>
  </head>
  <body>
    <h1>信号待ちアプリ</h1>
    <button onclick="startTimer()">スタート</button>
    <div id="timer"></div>
    <div id="instruction">信号待ち時間が表示されます</div>
    <script>
      function startTimer() {
        var time = Math.floor(Math.random() * 60) + 30;
        var timer = setInterval(function() {
          time--;
          document.getElementById('timer').innerHTML = time;
          if (time == 0) {
            clearInterval(timer);
            document.getElementById('instruction').innerHTML = "信号が青になりました！";
            setTimeout(function() {
              document.getElementById('instruction').innerHTML = "信号待ち時間が表示されます";
              document.getElementById('timer').innerHTML = "";
            }, 3000);
          }
        }, 1000);
      }
    </script>
  </body>
</html>

<!-- ジョーク：
Q: 雷電って信号待ちできるの？
A: 雷は待たない、走る！ -->