<?php
// Текущее время сервера
$serverTime = date('Y-m-d H:i:s');
$timestamp  = time() * 1000; // миллисекунды для JS
?>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="5">
<title>Web Project LA</title>
<style>
    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: radial-gradient(circle at 50% 40%, #1e2a4a 0%, #0a0f1e 70%);
        font-family: 'Segoe UI', Tahoma, sans-serif;
        color: #e0e6ff;
        overflow: hidden;
    }

    .clock-wrapper {
        position: relative;
        width: 320px;
        height: 320px;
        filter: drop-shadow(0 0 30px rgba(80, 140, 255, 0.35));
    }

    .clock {
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: radial-gradient(circle at 50% 35%, #2a3a63 0%, #131b30 70%, #0a0f1e 100%);
        border: 6px solid #3a4a7a;
        box-shadow:
            inset 0 0 25px rgba(0, 0, 0, 0.8),
            inset 0 0 60px rgba(80, 140, 255, 0.15),
            0 0 40px rgba(60, 110, 220, 0.4);
    }

    /* Деления */
    .tick {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 2px;
        height: 10px;
        background: #6a8ad6;
        transform-origin: 50% 0;
        border-radius: 2px;
    }
    .tick.major {
        width: 4px;
        height: 18px;
        background: #9dbcff;
        box-shadow: 0 0 8px #6fa0ff;
    }

    /* Цифры */
    .number {
        position: absolute;
        left: 50%;
        top: 50%;
        font-size: 20px;
        font-weight: 600;
        color: #bcd0ff;
        text-shadow: 0 0 10px rgba(120, 170, 255, 0.8);
        transform-origin: 50% 50%;
        user-select: none;
    }

    /* Стрелки */
    .hand {
        position: absolute;
        left: 50%;
        bottom: 50%;
        transform-origin: 50% 100%;
        border-radius: 6px;
        transition: transform 0.1s cubic-bezier(0.4, 2.4, 0.6, 1);
    }

    .hand.hour {
        width: 8px;
        height: 27%;
        background: linear-gradient(to top, #8fb0ff, #e6efff);
        box-shadow: 0 0 12px rgba(140, 180, 255, 0.8);
        z-index: 3;
    }

    .hand.minute {
        width: 5px;
        height: 37%;
        background: linear-gradient(to top, #7aa0ff, #ffffff);
        box-shadow: 0 0 10px rgba(120, 170, 255, 0.8);
        z-index: 4;
    }

    .hand.second {
        width: 2px;
        height: 42%;
        background: linear-gradient(to top, #ff6b8a, #ffb3c1);
        box-shadow: 0 0 12px rgba(255, 90, 130, 0.9);
        z-index: 5;
        transition: none;
    }

    /* Центр */
    .center-dot {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 16px;
        height: 16px;
        background: radial-gradient(circle, #ffffff 0%, #7aa0ff 60%, #3a4a7a 100%);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        box-shadow: 0 0 15px rgba(150, 190, 255, 0.9);
        z-index: 6;
    }

    /* Дата и цифровое время */
    .digital {
        margin-top: 30px;
        text-align: center;
    }

    .digital .time {
        font-size: 34px;
        font-weight: 600;
        letter-spacing: 3px;
        color: #cfe0ff;
        text-shadow: 0 0 15px rgba(120, 170, 255, 0.8);
        font-variant-numeric: tabular-nums;
    }

    .digital .date {
        margin-top: 6px;
        font-size: 16px;
        color: #8fa8dd;
        letter-spacing: 1.5px;
        text-transform: capitalize;
    }

    .digital .server {
        margin-top: 14px;
        font-size: 12px;
        color: #5a6d99;
    }

    /* Пульсация бренда */
    @keyframes pulse {
        0%, 100% { opacity: 0.55; }
        50%      { opacity: 1; }
    }
    .digital .server span {
        animation: pulse 2.5s ease-in-out infinite;
    }
</style>
</head>
<body>

<div class="clock-wrapper">
    <div class="clock" id="clock">
        <!-- Деления и цифры добавляются через JS -->
        <div class="hand hour"   id="hourHand"></div>
        <div class="hand minute" id="minuteHand"></div>
        <div class="hand second" id="secondHand"></div>
        <div class="center-dot"></div>
    </div>
</div>

<div class="digital">
    <div class="time" id="digitalTime">--:--:--</div>
    <div class="date" id="digitalDate">—</div>
    <div class="server">PHP-время сервера: <span><?= htmlspecialchars($serverTime) ?></span></div>
</div>

<script>
// ===== Начальная задержка: рассинхрон между сервером и клиентом =====
const serverTs = <?= $timestamp ?>;
const clientStart = Date.now();
const drift = serverTs - clientStart; // на сколько клиент отстаёт/спешит

function now() {
    return new Date(Date.now() + drift);
}

// ===== Построение циферблата =====
const clock = document.getElementById('clock');
const clockSize = 320;

for (let i = 0; i < 60; i++) {
    const tick = document.createElement('div');
    tick.className = 'tick' + (i % 5 === 0 ? ' major' : '');
    // Длина деления (от края внутрь)
    const offset = i % 5 === 0 ? 15 : 8;
    tick.style.transform =
        `translate(-50%, ${-clockSize/2 + 10}px) rotate(${i * 6}deg) translateY(0)`;
    tick.style.transformOrigin = '50% 100%';
    tick.style.top = '50%';
    tick.style.left = '50%';
    tick.style.height = (i % 5 === 0 ? 18 : 10) + 'px';
    tick.style.transform =
        `translate(-50%, -50%) rotate(${i * 6}deg) translateY(${-clockSize/2 + offset + 10}px)`;
    tick.style.transformOrigin = '50% 50%';
    clock.appendChild(tick);
}

// Цифры 1..12
for (let n = 1; n <= 12; n++) {
    const num = document.createElement('div');
    num.className = 'number';
    num.textContent = n;
    const angle = n * 30;
    const radius = clockSize / 2 - 50;
    num.style.transform =
        `translate(-50%, -50%) rotate(${angle}deg) translateY(${-radius}px) rotate(${-angle}deg)`;
    clock.appendChild(num);
}

// ===== Стрелки =====
const hourHand   = document.getElementById('hourHand');
const minuteHand = document.getElementById('minuteHand');
const secondHand = document.getElementById('secondHand');
const digitalTime = document.getElementById('digitalTime');
const digitalDate = document.getElementById('digitalDate');

const months = [
    'января','февраля','марта','апреля','мая','июня',
    'июля','августа','сентября','октября','ноября','декабря'
];
const weekdays = [
    'воскресенье','понедельник','вторник','среда',
    'четверг','пятница','суббота'
];

function pad(n) { return n < 10 ? '0' + n : n; }

function update() {
    const d = now();

    const ms = d.getMilliseconds();
    const s  = d.getSeconds();
    const m  = d.getMinutes();
    const h  = d.getHours();

    // Плавный ход секундной стрелки
    const secDeg  = (s + ms / 1000) * 6;
    const minDeg  = (m + s / 60) * 6;
    const hourDeg = ((h % 12) + m / 60 + s / 3600) * 30;

    secondHand.style.transform = `rotate(${secDeg}deg)`;
    minuteHand.style.transform = `rotate(${minDeg}deg)`;
    hourHand.style.transform   = `rotate(${hourDeg}deg)`;

    digitalTime.textContent =
        `${pad(h)}:${pad(m)}:${pad(s)}`;

    digitalDate.textContent =
        `${weekdays[d.getDay()]}, ${d.getDate()} ${months[d.getMonth()]} ${d.getFullYear()}`;

    requestAnimationFrame(update);
}

update();
</script>

</body>
</html>
