<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>
