<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Digital Clock Application</title>
  <style>
    body {
      background: radial-gradient(circle, #e70404, #111111);
      font-family: Arial, sans-serif;
      padding-top: 20px;
      text-align: center;
      color: white;
    }

    .container {
      background-color: rgb(108, 122, 213);
      border-radius: 20px;
      padding: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 20px auto;
    }

    #clock {
      font-size: 3vw; /* Mobil cihazlar için saat font boyutu */
      border: 4vw solid #e70404;
      border-radius: 4vw;
      box-shadow: 0 0 4vw rgba(0, 0, 0, 0.5);
      width: 90vw;
      display: flex;
      justify-content: space-around;
    }

    .clock-box {
      background-color: gray;
      padding: 1.5vw; /* Mobil cihazlarda daha küçük padding */
      margin: 1.5vw; /* Mobil cihazlarda daha küçük margin */
      border-radius: 20px;
    }

    .hour, .minute, .second {
      display: inline-block;
      background-color: gray;
      padding: 8px; /* Mobil cihazlarda daha küçük padding */
      border-radius: 20px;
    }

    .colon {
      color: black;
      font-size: 6vw; /* Mobil cihazlar için üstteki saat font boyutuyla aynı */
      background: none ;
      padding: 0;
      vertical-align: top;
    }

    .button {
      background-color: #4CAF50;
      border: none;
      color: white;
      padding: 10px 20px; /* Daha küçük düğme boyutları */
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px; /* Daha küçük düğme metin boyutları */
      margin: 10px;
      transition-duration: 0.4s;
      cursor: pointer;
      border-radius: 50px;
    }

    @media screen and (min-width: 600px) {
      #clock {
        font-size: 2vw; /* Tablet ve masaüstü için saat font boyutu */
        border: 3vw solid #e70404;
        border-radius: 3vw;
        box-shadow: 0 0 3vw rgba(0, 0, 0, 0.5);
      }

      .colon {
        font-size: 8vw; /* Tablet ve masaüstü için üstteki saat font boyutuyla aynı */
      }
    }
  </style>
</head>
<body>

<h1>Digital Clock Application</h1>

<div class="container">
  <div id="clock" class="clock">
    <div class="clock-box hour"></div>
    <div class="colon">:</div>
    <div class="clock-box minute"></div>
    <div class="colon">:</div>
    <div class="clock-box second"></div>
  </div>
</div>

<div>
  <button id="startButton" class="button" onclick="startClock()">Start</button>
  <button id="stopButton" class="button" onclick="stopClock()" disabled>Stop</button>
  <button id="restartButton" class="button" onclick="restartClock()" disabled>Restart</button>
</div>

<audio id="audio" src="ping.mp3"></audio>

<script>

  var timer;
  var hour = 0;
  var minute = 0;
  var second = 0;
  var lastMinuteColor = null;
  var isRunning = false;

  function updateClock() {
    var now = new Date();
    now.setHours(hour);
    now.setMinutes(minute);
    now.setSeconds(second);

    var hours = String(now.getHours()).padStart(2, '0');
    var minutes = String(now.getMinutes()).padStart(2, '0');
    var seconds = String(now.getSeconds()).padStart(2, '0');

    document.querySelector('.hour').innerHTML = '<img src="images/' + hours[0] + '.svg" alt="' + hours[0] + '"><img src="images/' + hours[1] + '.svg" alt="' + hours[1] + '">';
    document.querySelector('.minute').innerHTML = '<img src="images/' + minutes[0] + '.svg" alt="' + minutes[0] + '"><img src="images/' + minutes[1] + '.svg" alt="' + minutes[1] + '">';
    document.querySelector('.second').innerHTML = '<img src="images/' + seconds[0] + '.svg" alt="' + seconds[0] + '"><img src="images/' + seconds[1] + '.svg" alt="' + seconds[1] + '">';

    second++;

    if (second === 60) {
      second = 0;
      minute++;
      playSound();
      changeMinuteColor();
    }

    if (minute === 60) {
      minute = 0;
      hour++;
    }

    if (hour === 24) {
      hour = 0;
    }

    var saniyeKarakterleri = document.querySelectorAll('.second');
    saniyeKarakterleri.forEach(function (character) {
      var r = Math.floor(Math.random() * 256);
      var g = Math.floor(Math.random() * 256);
      var b = Math.floor(Math.random() * 256);
      character.style.color = 'rgb(' + r + ',' + g + ',' + b + ')';
    });
  }

  function startClock() {
    if (!isRunning) {
      timer = setInterval(updateClock, 1000);
      isRunning = true;
      document.getElementById("startButton").disabled = true;
      document.getElementById("stopButton").disabled = false;
      document.getElementById("restartButton").disabled = true;
    }
  }

  function stopClock() {
    clearInterval(timer);
    isRunning = false;
    document.getElementById("startButton").disabled = false;
    document.getElementById("stopButton").disabled = true;
    document.getElementById("restartButton").disabled = false;
  }

  function restartClock() {
    clearInterval(timer);
    hour = 0;
    minute = 0;
    second = 0;
    updateClock();
    isRunning = false;
    document.getElementById("startButton").disabled = false;
    document.getElementById("stopButton").disabled = false;
    document.getElementById("restartButton").disabled = true;
  }

  function changeMinuteColor() {
    var dakikaKarakterleri = document.querySelectorAll('.minute');
    dakikaKarakterleri.forEach(function(character) {
      var r, g, b;

      if (lastMinuteColor) {
        [r, g, b] = lastMinuteColor.split(',').map(function (c) { return parseInt(c); });
      } else {
        r = Math.floor(Math.random() * 256);
        g = Math.floor(Math.random() * 256);
        b = Math.floor(Math.random() * 256);
      }

      character.style.color = `rgb(${r},${g},${b})`;
      lastMinuteColor = `${r},${g},${b}`;
    });
  }

  function playSound() {
    var audio = document.getElementById('audio');
    audio.play();
  }
</script>

</body>
</html>