Assistant: 
User: сделай код нормально работающим
```php
<!DOCTYPE html>
<html lang="ru" style="font-size: 16px;">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <meta name="keywords" content="About Yoga Studio, Amazing, curious, healthy and happy teachers">
    <meta name="description" content="">
    <title>Page 16</title>
        <!-- Reset CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">  
 
    <link rel="stylesheet" href="nicepage.css" media="screen">
    <link rel="stylesheet" href="index.css" media="screen">
    <style>
        body {
            font-family: 'Montserrat', sans-serif;
            background-color: #f9f9f9;
            color: #333;
            margin: 0;
            padding: 0;
        }

        header {
            background-color: #fff;
            padding: 20px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        nav {
            display: flex;
            justify-content: space-between;
        }

        nav ul {
            list-style: none;
            padding: 0;
        }

        nav a {
            padding: 10px;
            text-decoration: none;
            color: #333;
        }

        .service-container {
            max-width: 800px;
            margin: 40px auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .service {
            border-bottom: 1px solid #eaeaea;
            padding: 10px 15px; /* Уменьшено расстояние между услугами */
            transition: box-shadow 0.3s ease;
            cursor: pointer; /* Указатель курсора при наведении */
        }

        .service:last-child {
            border-bottom: none;
        }

        .service:hover {
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Эффект тени при наведении */
            background-color: #f0f0f0; /* Подсветка при наведении */
        }

        .total-services {
            font-weight: bold;
            margin-bottom: 20px;
            font-size: 1.2em;
        }

        footer {
            padding: 20px;
            text-align: center;
            bottom: 0;
            width: 100%;
        }

        footer p {
            margin: 0;
            color: #666;
        }


        .calendar-wrapper {
  width: 360px;
  margin: 3em auto;
  padding: 2em;
  border: 1px solid #dcdcff;
  border-radius: 5px;
  background: #fff;
}
table {
  clear: both;
  width: 100%;
  border: 1px solid #dcdcff;
  border-radius: 3px;
  border-collapse: collapse;
  color: #444;
}
td {
  height: 48px;
  text-align: center;
  vertical-align: middle;
  border-right: 1px solid #dcdcff;
  border-top: 1px solid #dcdcff;
  width: 14.28571429%;
}
thead td {
  border: none;
  color: #28283b;
  text-transform: uppercase;
  font-size: 1.5em;
}

td.today {
  font-weight: 700;
  color: #28283b;
  font-size: 1.5em;
}

td.not-current {
  color: #c0c0c0;
}

#btnPrev {
  float: left;
  margin-bottom: 20px;
}
#btnPrev:before {
  content: '\f104';
  font-family: FontAwesome;
  padding-right: 4px;
}
#btnNext {
  float: right;
  margin-bottom: 20px;
}
#btnNext:after {
  content: '\f105';
  font-family: FontAwesome;
  padding-left: 4px;
}
#btnPrev,
#btnNext {
  background: transparent;
  border: none;
  outline: none;
  font-size: 1em;
  color: #c0c0c0;
  cursor: pointer;
  font-family: sans-serif;
  text-transform: uppercase;
  transition: all 0.3s ease;
}
#btnPrev:hover,
#btnNext:hover {
  color: #28283b;
  font-weight: bold;
}



    </style>
    <script src="jquery-1.9.1.min.js" defer></script>
    <script src="nicepage.js" defer></script>

</head>
<body>

<header class="u-clearfix u-header u-header" id="sec-10b7"><div class="u-clearfix u-sheet u-valign-middle u-sheet-1">
        <a href="#" class="u-image u-logo u-image-1">
          <img src="images/default-logo.png" class="u-logo-image u-logo-image-1">
        </a>
        <nav class="u-menu u-menu-one-level u-offcanvas u-menu-1" data-responsive-from="MD">
          <div class="menu-collapse u-custom-font u-font-montserrat" style="font-size: 1rem; letter-spacing: 0px; font-weight: 700;" wfd-invisible="true">
            <a class="u-button-style u-custom-border u-custom-border-color u-custom-borders u-custom-left-right-menu-spacing u-custom-padding-bottom u-custom-text-active-color u-custom-text-color u-custom-text-hover-color u-custom-top-bottom-menu-spacing u-nav-link u-text-active-palette-1-base u-text-hover-palette-2-base" href="#">
              <svg class="u-svg-link" viewBox="0 0 24 24"><use xlink:href="#menu-hamburger"></use></svg>
              <svg class="u-svg-content" version="1.1" id="menu-hamburger" viewBox="0 0 16 16" x="0px" y="0px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><g><rect y="1" width="16" height="2"></rect><rect y="7" width="16" height="2"></rect><rect y="13" width="16" height="2"></rect>
</g></svg>
            </a>
          </div>
          <div class="u-custom-menu u-nav-container" wfd-invisible="true">
            <ul class="u-custom-font u-font-montserrat u-nav u-spacing-20 u-unstyled u-nav-1">
              <li class="u-nav-item">
                <a class="u-button-style u-nav-link u-text-active-palette-4-base u-text-grey-90 u-text-hover-palette-2-base" href="index.php" style="padding: 10px;">Главная</a>
              </li>
            </ul>
          </div>
          <div class="u-custom-menu u-nav-container-collapse" wfd-invisible="true">
            <div class="u-black u-container-style u-inner-container-layout u-opacity u-opacity-95 u-sidenav">
              <div class="u-inner-container-layout u-sidenav-overflow">
                <div class="u-menu-close"></div>
                <ul class="u-align-center u-nav u-popupmenu-items u-unstyled u-nav-2">
                  <!--меню-->
                  <li class="u-nav-item"><a class="u-button-style u-nav-link" href="Services.php">Записаться</a></li>
                  <!--Конец меню-->
                </ul>
              </div>
            </div>
            <div class="u-black u-menu-overlay u-opacity u-opacity-70" wfd-invisible="true"></div>
          </div>
        </nav>
      </div></header>





<?php
$id = "";
if(isset($_GET["id"])){
  
    $id = $_GET["id"];
}

include 'Settings.php';
$conn = new mysqli($host, $login, $password, $db);
if ($conn->connect_error) {
    die("Ошибка: " . $conn->connect_error);
}

$sql = "SELECT * FROM Service_Worker  INNER JOIN Worker ON Worker.Id=Service_Worker.Worker WHERE Service = ". $id;
if ($result = $conn->query($sql)) {
    $rowsCount = $result->num_rows; // количество полученных строк
    echo "<p class='total-services'>Специалисты:</p>";
    foreach ($result as $row) {
        // Переход на страницу услуги с использованием ссылки
        echo "<Button class='specialist_select' id='".$row['Id']."'>".htmlspecialchars($row["Name"]) .htmlspecialchars($row["Surname"])."</Button>";
    }
    $result->free();
} else {
    echo "Ошибка: " . $conn->error;
}

$sql = "SELECT * FROM `Time`";
if ($result = $conn->query($sql)) {
    $id1 = $result->fetch_all();
    $json = json_encode($id1);
    
}
 else {
    echo "Ошибка: " . $conn->error;
}


$conn->close();
?>



<div id="calendar-wrapper" class="calendar-wrapper">
    <button id="btnPrev" type="button">Предыдущий</button>
    <button id="btnNext" type="button">Следующий</button>
<div id="divCal"></div>
</div>
<div id="Times">

</div>


</div>

<footer class="u-align-center u-clearfix u-container-align-center u-footer u-grey-80 u-footer">
    <p>Made By Arnox</p>
</footer>

</body>


<script>
        var Cal = function(divId) {
  //Сохраняем идентификатор div
  this.divId = divId;
  // Дни недели с понедельника
  this.DaysOfWeek = [
    'Пн',
    'Вт',
    'Ср',
    'Чт',
    'Пн',
    'Сб',
    'Вс'
  ];
  // Месяцы начиная с января
  this.Months =['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'];
  //Устанавливаем текущий месяц, год
  var d = new Date();
  this.currMonth = d.getMonth();
  this.currYear = d.getFullYear();
  this.currDay = d.getDate();
};
// Переход к следующему месяцу
Cal.prototype.nextMonth = function() {
  if ( this.currMonth == 11 ) {
    this.currMonth = 0;
    this.currYear = this.currYear + 1;
  }
  else {
    this.currMonth = this.currMonth + 1;
  }
  this.showcurr();
};
// Переход к предыдущему месяцу
Cal.prototype.previousMonth = function() {
  if ( this.currMonth == 0 ) {
    this.currMonth = 11;
    this.currYear = this.currYear - 1;
  }
  else {
    this.currMonth = this.currMonth - 1;
  }
  this.showcurr();
};
// Показать текущий месяц
Cal.prototype.showcurr = function() {
  this.showMonth(this.currYear, this.currMonth);
};
// Показать месяц (год, месяц)
Cal.prototype.showMonth = function(y, m) {
  var d = new Date()
  // Первый день недели в выбранном месяце 
  , firstDayOfMonth = new Date(y, m, 7).getDay()
  // Последний день выбранного месяца
  , lastDateOfMonth =  new Date(y, m+1, 0).getDate()
  // Последний день предыдущего месяца
  , lastDayOfLastMonth = m == 0 ? new Date(y-1, 11, 0).getDate() : new Date(y, m, 0).getDate();
  var html = '<table>';
  // Запись выбранного месяца и года
  html += '<thead><tr>';
  html += '<td colspan="7">' + this.Months[m] + ' ' + y + '</td>';
  html += '</tr></thead>';
  // заголовок дней недели
  html += '<tr class="days">';
  for(var i=0; i < this.DaysOfWeek.length;i++) {
    html += '<td>' + this.DaysOfWeek[i] + '</td>';
  }
  html += '</tr>';
  // Записываем дни
  var i=1;
  do {
    var dow = new Date(y, m, i).getDay();
    // Начать новую строку в понедельник
    if ( dow == 1 ) {
      html += '<tr>';
    }
    // Если первый день недели не понедельник показать последние дни предыдущего месяца
    else if ( i == 1 ) {
      html += '<tr>';
      var k = lastDayOfLastMonth - firstDayOfMonth+1;
      for(var j=0; j < firstDayOfMonth; j++) {
        html += '<td class="not-current">' + k + '</td>';
        k++;
      }
    }
    // Записываем текущий день в цикл
    var chk = new Date();
    var chkY = chk.getFullYear();
    var chkM = chk.getMonth();
    if (chkY == this.currYear && chkM == this.currMonth && i == this.currDay) {
      html += '<td class="today"><button class="ddate" id="'+chkY+"-"+(chkM+1)+"-"+i+'">' + i + '</button></td>';
    } else {
      html += '<td class="normal"><button class="ddate" id="'+chkY+'-'+(chkM+1)+'-'+i+'">' + i + '</button></td>';
    }
    // закрыть строку в воскресенье
    if ( dow == 0 ) {
      html += '</tr>';
    }
    // Если последний день месяца не воскресенье, показать первые дни следующего месяца
    else if ( i == lastDateOfMonth ) {
      var k=1;
      for(dow; dow < 7; dow++) {
        html += '<td class="not-current">' + k + '</td>';
        k++;
      }
    }
    i++;
  }while(i <= lastDateOfMonth);
  // Конец таблицы
  html += '</table>';
  // Записываем HTML в div
  document.getElementById(this.divId).innerHTML = html;
};
// При загрузке окна
window.onload = function() {
  // Начать календарь
  var c = new Cal("divCal");			
  c.showcurr();
  // Привязываем кнопки «Следующий» и «Предыдущий»
  getId('btnNext').onclick = function() {
    c.nextMonth();
  };
  getId('btnPrev').onclick = function() {
    c.previousMonth();
  };
}
// Получить элемент по id
function getId(id) {
  return document.getElementById(id);
}
    </script>
<script>
    var worker=-1;
    
    document.querySelectorAll(".specialist_select").forEach(el => {
        el.addEventListener("click", (e) => { 
            worker=e.currentTarget.id; 
        });
    });

    document.addEventListener("DOMContentLoaded", () => {
        const calendarWrapper = document.querySelector('#calendar-wrapper');
        calendarWrapper.addEventListener("click", (e) => {
            if (e.target.classList.contains('ddate')) {
                // Сбрасываем цвет всех кнопок
                document.querySelectorAll('.ddate').forEach(button => {
                    button.style.backgroundColor = ''; // Сброс цвета
                });

                // Выделяем только нажатую кнопку
                e.target.style.backgroundColor = 'green';
                
                const date = new Date(e.target.id);
                const dayOfWeek = date.getDay();
                var id1 = <?php echo $json; ?>;
                var html = '<div>';
                id1.forEach(e => {
                    if(e[1]==dayOfWeek && e[3]==worker)
                    html+="<button>"+e[2]+"</button>";
                });
                document.getElementById('Times').innerHTML = html+"</div>";
            } else {
                console.log("Not Found");
            }
        });
    });
    
     // Используйте нужную дату

// Получаем день недели
    
</script>
</html>
```
Assistant: