<style>
 html, body { height:100%; }

 /* Плавное появление контента */
 .fade-in {
 opacity: 0;
 animation: fadeIn 1s ease-in-out forwards;
 animation-delay: .4s;
 }

 @keyframes fadeIn {
 to { opacity: 1; }
 }

 /* Прелоадер */
 #loader {
 position: fixed;
 left: 0; top: 0;
 width: 100%; height: 100%;
 background: #d9e1f2;
 display: flex;
 justify-content: center;
 align-items: center;
 z-index: 9999;
 }

 .spinner {
 width: 60px;
 height: 60px;
 border: 6px solid #fff;
 border-top-color: #4a6ea9;
 border-radius: 50%;
 animation: spin 0.9s linear infinite;
 }

 @keyframes spin {
 to { transform: rotate(360deg); }
 }
</style>

<!-- Прелоадер -->
<div id="loader">
 <div class="spinner"></div>
</div>

<!-- Основной экран -->
<a href="?cat=main" style="text-decoration:none; color:inherit;">
 <div class="d-flex justify-content-center align-items-center fade-in"
 style="min-height:100vh; background:#d9e1f2; cursor:pointer;">

 <div class="text-center px-3">

 <!-- ЛОГОТИП -->
 <img src="/assets/img/logo.png" alt="Логотип" style="height:110px;" class="mb-4">

 <!-- НАЗВАНИЕ УЧРЕЖДЕНИЯ -->
 <div style="font-size:32px; font-weight:700; line-height:1.2; color:#000;">
 Психоневрологический<br>
 диспансер №8
 </div>

 <!-- Заголовок страницы -->
 <h1 class="mt-4" style="font-size:42px; font-weight:600; color:#000;">
 Расписание приема врачей<br>и участков
 </h1>

 <div class="mt-3" style="font-size:20px; color:#333;">
 (поиск по адресу проживания)
 </div>

 </div>
 </div>
</a>

<script>
 // Скрываем прелоадер после загрузки страницы
 window.addEventListener('load', function() {
 document.getElementById('loader').style.opacity = '0';
 setTimeout(() => {
 document.getElementById('loader').style.display = 'none';
 }, 400);
 });
</script>
