Мне необходимо написать код на HTML. 
У меня есть код

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Дембель</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
            flex-direction: column;
            position: relative;
        }
        .container {
            text-align: center;
        }
        .progress-bar {
            width: 100%;
            background-color: #e0e0e0;
            border-radius: 5px;
            margin-top: 10px;
        }
        .progress {
            height: 30px;
            background-color: #76c7c0;
            border-radius: 5px;
            transition: width 0.5s;
        }
        #clock {
            width: 150px;  /* Задайте ширину вашего изображения */
            height: 150px; /* Задайте высоту вашего изображения */
            background-image: url('Chas.png'); /* Путь к вашему изображению */
            background-size: cover;
            background-position: center;
            animation: swing 2s infinite alternate;
        }
        @keyframes swing {
            0% { transform: rotate(-5deg); }
            100% { transform: rotate(5deg); }
        }
        #scrolling-text {
            position: absolute;
            top: 20px;  /* Расстояние от верхней грани */
            width: 100%;
            text-align: center;
            overflow: hidden;
            white-space: nowrap;
            box-sizing: border-box;
            animation: scroll 10s linear infinite;
            font-weight: bold;
            font-size: 20px;
        }
        @keyframes scroll {
            0% { transform: translateX(100%); }
            100% { transform: translateX(-100%); }
        }
        #match-date {
            margin-top: 20px;
            font-weight: bold;
            font-size: 22px;
        }
    </style>
</head>
<body>

<div id="scrolling-text"></div>

<div class="container">
    <h2>До дембеля 6.12.2025</h2>
    <div id="time-remaining-1"></div>
    <div id="served-time-1"></div>
    <div class="progress-bar">
        <div id="progress-1" class="progress"></div>
    </div>
</div>

<div id="clock"></div>

<div class="container">
    <h2>До дембеля 4.07.2025</h2>
    <div id="time-remaining-2"></div>
    <div id="served-time-2"></div>
    <div class="progress-bar">
        <div id="progress-2" class="progress"></div>
    </div>
</div>

<div id="match-date"></div>

<script>
    const dembelDate1 = new Date('2025-12-06');
    const dembelDate2 = new Date('2025-07-04');
    const enlistmentDate1 = new Date('2024-12-06'); // Дата призыва для молодых
    const enlistmentDate2 = new Date('2024-07-04'); // Дата призыва для дедов

    function updateProgress() {
        const now = new Date();
        
        // Расчет времени до первого дембеля
        const timeRemaining1 = dembelDate1 - now;
        const totalTime1 = dembelDate1 - enlistmentDate1;
        const progress1 = Math.max(0, (totalTime1 - timeRemaining1) / totalTime1) * 100;

        // Расчет времени до второго дембеля
        const timeRemaining2 = dembelDate2 - now;
        const totalTime2 = dembelDate2 - enlistmentDate2;
        const progress2 = Math.max(0, (totalTime2 - timeRemaining2) / totalTime2) * 100;

        // Расчет времени службы
        const servedTime1 = now - enlistmentDate1;
        const servedTime2 = now - enlistmentDate2;

        // Обновление текста
        document.getElementById('time-remaining-1').textContent = formatTime(timeRemaining1);
        document.getElementById('served-time-1').textContent = `Уже отслужил: ${formatTime(servedTime1)}`;
        document.getElementById('progress-1').style.width = progress1 + '%';

        document.getElementById('time-remaining-2').textContent = formatTime(timeRemaining2);
        document.getElementById('served-time-2').textContent = `Уже отслужил: ${formatTime(servedTime2)}`;
        document.getElementById('progress-2').style.width = progress2 + '%';

        // Проверка, когда сойдутся даты
        checkMatchDate(servedTime1, timeRemaining2);
    }

    function checkMatchDate(servedTime1, remainingTime2) {
        const servedDays1 = Math.floor(servedTime1 / (1000 * 60 * 60 * 24));
        const remainingDays2 = Math.floor(remainingTime2 / (1000 * 60 * 60 * 24));

        const matchDays = remainingDays2 - servedDays1; // Сколько дней до совпадения

        if (matchDays > 0) {
            const matchDate = new Date();
            matchDate.setDate(matchDate.getDate() + matchDays);
            document.getElementById('scrolling-text').textContent = `Молодые отслужат столько же через ${matchDays} дн.`;
            document.getElementById('match-date').textContent = `Совпадение: ${formatDate(matchDate)}`;
        } else if (matchDays === 0) {
            document.getElementById('scrolling-text').textContent = "Молодые отслужат столько же, сколько осталось дедам!";
            document.getElementById('match-date').textContent = "Сегодня совпадение!";
        } else {
            // Если молодые уже отслужили больше, чем осталось дедам
            document.getElementById('scrolling-text').textContent = `Молодые никогда не отслужат столько же!`;
            document.getElementById('match-date').textContent = "";
        }
    }

    function formatTime(milliseconds) {
        const days = Math.floor(milliseconds / (1000 * 60 * 60 * 24));
        const hours = Math.floor((milliseconds % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((milliseconds % (1000 * 60 * 60)) / (1000 * 60));
        return `${days} дн. ${hours} ч. ${minutes} мин.`;
    }

    function formatDate(date) {
        const options = { year: 'numeric', month: '2-digit', day: '2-digit' };
        return date.toLocaleDateString('ru-RU', options);
    }

    setInterval(updateProgress, 1000);
    updateProgress();
</script>

</body>
</html>

Необходимо, мне нужно чтобы справа и слева были даты. А снизу я сделаю поезд который едет по рельсам. и чтобы поезд можно было брать мышкой и прередвигать вперед и назад.
The server is busy. Please try again later.

Мне необходимо написать код на HTML. 
У меня есть код

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Дембель</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
            flex-direction: column;
            position: relative;
        }
        .container {
            text-align: center;
        }
        .progress-bar {
            width: 100%;
            background-color: #e0e0e0;
            border-radius: 5px;
            margin-top: 10px;
        }
        .progress {
            height: 30px;
            background-color: #76c7c0;
            border-radius: 5px;
            transition: width 0.5s;
        }
        #clock {
            width: 150px;  /* Задайте ширину вашего изображения */
            height: 150px; /* Задайте высоту вашего изображения */
            background-image: url('Chas.png'); /* Путь к вашему изображению */
            background-size: cover;
            background-position: center;
            animation: swing 2s infinite alternate;
        }
        @keyframes swing {
            0% { transform: rotate(-5deg); }
            100% { transform: rotate(5deg); }
        }
        #scrolling-text {
            position: absolute;
            top: 20px;  /* Расстояние от верхней грани */
            width: 100%;
            text-align: center;
            overflow: hidden;
            white-space: nowrap;
            box-sizing: border-box;
            animation: scroll 10s linear infinite;
            font-weight: bold;
            font-size: 20px;
        }
        @keyframes scroll {
            0% { transform: translateX(100%); }
            100% { transform: translateX(-100%); }
        }
        #match-date {
            margin-top: 20px;
            font-weight: bold;
            font-size: 22px;
        }
    </style>
</head>
<body>

<div id="scrolling-text"></div>

<div class="container">
    <h2>До дембеля 6.12.2025</h2>
    <div id="time-remaining-1"></div>
    <div id="served-time-1"></div>
    <div class="progress-bar">
        <div id="progress-1" class="progress"></div>
    </div>
</div>

<div id="clock"></div>

<div class="container">
    <h2>До дембеля 4.07.2025</h2>
    <div id="time-remaining-2"></div>
    <div id="served-time-2"></div>
    <div class="progress-bar">
        <div id="progress-2" class="progress"></div>
    </div>
</div>

<div id="match-date"></div>

<script>
    const dembelDate1 = new Date('2025-12-06');
    const dembelDate2 = new Date('2025-07-04');
    const enlistmentDate1 = new Date('2024-12-06'); // Дата призыва для молодых
    const enlistmentDate2 = new Date('2024-07-04'); // Дата призыва для дедов

    function updateProgress() {
        const now = new Date();
        
        // Расчет времени до первого дембеля
        const timeRemaining1 = dembelDate1 - now;
        const totalTime1 = dembelDate1 - enlistmentDate1;
        const progress1 = Math.max(0, (totalTime1 - timeRemaining1) / totalTime1) * 100;

        // Расчет времени до второго дембеля
        const timeRemaining2 = dembelDate2 - now;
        const totalTime2 = dembelDate2 - enlistmentDate2;
        const progress2 = Math.max(0, (totalTime2 - timeRemaining2) / totalTime2) * 100;

        // Расчет времени службы
        const servedTime1 = now - enlistmentDate1;
        const servedTime2 = now - enlistmentDate2;

        // Обновление текста
        document.getElementById('time-remaining-1').textContent = formatTime(timeRemaining1);
        document.getElementById('served-time-1').textContent = `Уже отслужил: ${formatTime(servedTime1)}`;
        document.getElementById('progress-1').style.width = progress1 + '%';

        document.getElementById('time-remaining-2').textContent = formatTime(timeRemaining2);
        document.getElementById('served-time-2').textContent = `Уже отслужил: ${formatTime(servedTime2)}`;
        document.getElementById('progress-2').style.width = progress2 + '%';

        // Проверка, когда сойдутся даты
        checkMatchDate(servedTime1, timeRemaining2);
    }

    function checkMatchDate(servedTime1, remainingTime2) {
        const servedDays1 = Math.floor(servedTime1 / (1000 * 60 * 60 * 24));
        const remainingDays2 = Math.floor(remainingTime2 / (1000 * 60 * 60 * 24));

        const matchDays = remainingDays2 - servedDays1; // Сколько дней до совпадения

        if (matchDays > 0) {
            const matchDate = new Date();
            matchDate.setDate(matchDate.getDate() + matchDays);
            document.getElementById('scrolling-text').textContent = `Молодые отслужат столько же через ${matchDays} дн.`;
            document.getElementById('match-date').textContent = `Совпадение: ${formatDate(matchDate)}`;
        } else if (matchDays === 0) {
            document.getElementById('scrolling-text').textContent = "Молодые отслужат столько же, сколько осталось дедам!";
            document.getElementById('match-date').textContent = "Сегодня совпадение!";
        } else {
            // Если молодые уже отслужили больше, чем осталось дедам
            document.getElementById('scrolling-text').textContent = `Молодые никогда не отслужат столько же!`;
            document.getElementById('match-date').textContent = "";
        }
    }

    function formatTime(milliseconds) {
        const days = Math.floor(milliseconds / (1000 * 60 * 60 * 24));
        const hours = Math.floor((milliseconds % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((milliseconds % (1000 * 60 * 60)) / (1000 * 60));
        return `${days} дн. ${hours} ч. ${minutes} мин.`;
    }

    function formatDate(date) {
        const options = { year: 'numeric', month: '2-digit', day: '2-digit' };
        return date.toLocaleDateString('ru-RU', options);
    }

    setInterval(updateProgress, 1000);
    updateProgress();
</script>

</body>
</html>

Необходимо, мне нужно чтобы справа и слева были даты. А снизу я сделаю поезд который едет по рельсам. и чтобы поезд можно было брать мышкой и прередвигать вперед и назад.

Вот код дл поезда, только сделай его горизонтальным

<svg width="50%" height="50%" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<defs>    
    <filter id="blur" x="-1" y="-1" width="5" height="5">
      <feGaussianBlur in="SourceGraphic" stdDeviation="8" />
    </filter>
      <rect id="rect" width="95" height="20" fill="#663300" />
</defs>
<g>
  <use xlink:href="#rect" x="150" y="10"/>
  <use xlink:href="#rect" x="150" y="50"/>
  <use xlink:href="#rect" x="150" y="90"/>
  <use xlink:href="#rect" x="150" y="130"/>
  <use xlink:href="#rect" x="150" y="170"/>
  <use xlink:href="#rect" x="150" y="210"/>
  <use xlink:href="#rect" x="150" y="250"/>
  <use xlink:href="#rect" x="150" y="290"/>
  <use xlink:href="#rect" x="150" y="330"/>
  <use xlink:href="#rect" x="150" y="370"/>
</g>
    <g>
      <line x1="230" y1="400" x2="230" y2="0" stroke="#232b2b" stroke-width="5" />
      <line x1="165" y1="400" x2="165" y2="0" stroke="#232b2b" stroke-width="5" />
    </g>
    <g id="train" transform="translate(-350 0)">
      <g>
        <path class="st0" d="M272.8,277.5h-56.2v-72.9c0-9.7,7.9-17.6,17.6-17.6h21c9.7,0,17.6,7.9,17.6,17.6V277.5z" />
        <line class="st1" x1="258.5" y1="187.5" x2="258.5" y2="275.5" />
        <line class="st1" x1="231.5" y1="188" x2="231.5" y2="276" />
        <rect x="200.6" y="275.9" class="st2" width="88" height="66" />
        <path class="st3" d="M252.5,275.5h-16V196c0-1.6,1.3-3,3-3h10.1c1.6,0,3,1.3,3,3V275.5z" />
        <circle class="st4" cx="244.5" cy="210.5" r="7.5" />
        <circle class="st5" cx="244.5" cy="210.5" r="4.5" />
        <rect width="5" height="20" x="212" y="210"/>
        <rect width="5" height="20" x="212" y="250"/>
        <rect width="5" height="20" x="272" y="210"/>
        <rect width="5" height="20" x="272" y="250"/>
        <g>
          <circle cx="244.5" cy="220.5" r="8.5" fill="gray" filter="url(#blur)" />
          <animateTransform attributeName="transform" type="rotate" values="0 244.5 220.5;360 246.5 220.5" dur="1s" repeatCount="indefinite"
          />
        </g>
        <g>
          <circle cx="244.5" cy="220.5" r="8.5" fill="gray" filter="url(#blur)" />
          <animateTransform attributeName="transform" type="rotate" values="0 244.5 220.5;90 244.5 220.5" dur="1s" transform="scale(1.1)" repeatCount="indefinite"
          />
        </g>
        <g>
          <circle cx="246.5" cy="230.5" r="6" fill="gray" filter="url(#blur)" />
          <animateTransform attributeName="transform" type="rotate" values="0 246.5 230.5;90 246.5 230.5" dur="1s" repeatCount="indefinite"
          />
        </g>
        <g>
          <circle cx="244.5" cy="238.5" r="7" fill="gray" filter="url(#blur)" />
          <animateTransform attributeName="transform" type="rotate" values="0 244.5 238.5;90 244.5 238.5" dur="1s" repeatCount="indefinite"
          />
        </g>
        <g>
          <circle cx="242.5" cy="245.5" r="4" fill="gray" filter="url(#blur)" />
          <animateTransform attributeName="transform" type="rotate" values="0 242.5 245.5;360 242.5 245.5" dur="1s" repeatCount="indefinite"
          />
        </g>
        <g>
          <circle cx="244.5" cy="250.5" r="9" fill="gray" filter="url(#blur)" />
          <animateTransform attributeName="transform" type="rotate" values="0 244.5 250.5;90 244.5 250.5" dur="1s" repeatCount="indefinite"
          />
        </g>
        <g>
          <circle cx="246.5" cy="260.5" r="9" fill="gray" filter="url(#blur)" />
          <animateTransform attributeName="transform" type="rotate" values="0 246.5 260.5;90 246.5 260.5" dur="1s" repeatCount="indefinite"
          />
        </g>
        <g>
          <circle cx="244.5" cy="270.5" r="8" fill="gray" filter="url(#blur)" />
          <animateTransform attributeName="transform" type="rotate" values="0 244.5 270.5;90 246.5 270.5" dur="1s" transform="scale(1.5)" repeatCount="indefinite"
          />
        </g>
        <g>
          <circle cx="242.5" cy="275.5" r="6" fill="gray" filter="url(#blur)" />
          <animateTransform attributeName="transform" type="rotate" values="0 242.5 275.5;90 242.5 275.5" dur="1s" transform="scale(1.8)" repeatCount="indefinite"
          />
        </g>
        <g>
          <circle cx="242.5" cy="280.5" r="9" fill="gray" filter="url(#blur)" />
          <animateTransform attributeName="transform" type="rotate" values="0 242.5 280.5;90 242.5 280.5" dur="1s" transform="scale(1.6)" repeatCount="indefinite"
          />
        </g>
      <g>
        <rect width="10" height="9" x="240" y="341" />
        <rect width="90" height="150" x="200" y="350" fill="gray" rx="5" />
      </g>
      <g>
        <rect width="10" height="9" x="240" y="500" />
        <rect width="90" height="150" x="200" y="509" fill="gray" rx="5" />
      </g>
    </g>
    <path id="trainPath" style="fill:none;stroke: transparent;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
      d="m 302.80952,297 c 0,-97.08928571 0,-297.08928571 0,-997.08928571" />
    <animateMotion xlink:href="#train" begin="0s" dur="18s" repeatCount="indefinite">
      <mpath xlink:href="#trainPath" />
    </animateMotion>
  </svg>