[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>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
       
        body {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
            color: #fff;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
       
        .container {
            width: 100%;
            max-width: 400px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 12px;
            padding: 20px;
            border: 1px solid #8d524e;
        }
       
        .input-group {
            margin-bottom: 15px;
        }
       
        label {
            display: block;
            margin-bottom: 6px;
            font-weight: 500;
            color: #f8f9fa;
            font-size: 14px;
        }
       
        input[type="date"] {
            width: 100%;
            padding: 10px 12px;
            border: none;
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.15);
            color: #fff;
            font-size: 14px;
            outline: none;
            transition: all 0.3s ease;
        }
       
        input[type="date"]:focus {
            background: rgba(255, 255, 255, 0.25);
        }
       
        input[type="date"]::-webkit-calendar-picker-indicator {
            filter: invert(1);
            cursor: pointer;
        }
       
        button {
            width: 100%;
            padding: 12px;
            background-color: #8d524e;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 8px;
        }
       
        button:hover {
            background-color: #a06560;
        }
       
        .result {
            margin-top: 20px;
            padding: 15px;
            background: #bababa;
            border-radius: 10px;
            text-align: center;
            display: none;
            animation: fadeIn 0.5s ease;
        }
       
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
       
        .result h3 {
            margin-bottom: 15px;
            color: #8d524e;
            font-size: 18px;
        }
       
        .result p {
            margin: 10px 0;
            font-size: 16px;
            line-height: 1.4;
            text-align: center;
            color: #333;
        }
       
        .current-date {
            text-align: center;
            margin-top: 15px;
            font-size: 12px;
            color: rgba(255, 255, 255, 0.6);
        }
       
        @media (max-width: 600px) {
            .container {
                padding: 15px;
            }
           
            button {
                font-size: 16px;
                padding: 10px;
            }
           
            .result p {
                font-size: 14px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="input-group">
            <label for="birthdate">Дата рождения:</label>
            <input type="date" id="birthdate">
        </div>
       
        <div class="input-group">
            <label for="targetdate">Выбери текущую дату:</label>
            <input type="date" id="targetdate">
        </div>
       
        <button onclick="calculate()">Рассчитать</button>
       
        <div class="result" id="result">
            <h3>Результаты расчета</h3>
            <p id="ageResult"></p>
            <p id="educationResult"></p>
            <p id="startYear"></p>
            <p id="endYear"></p>
        </div>
       
        <div class="current-date" id="currentDate"></div>
    </div>

    <script>
        // Установить текущую дату по умолчанию для целевой даты
        document.addEventListener('DOMContentLoaded', function() {
            const today = new Date();
            const formattedToday = formatDate(today);
            document.getElementById('targetdate').value = formattedToday;
           
            // Обновление отображения текущей даты
            document.getElementById('currentDate').textContent = `Сегодня: ${formattedToday.split('-').reverse().join('.')}`;
        });
       
        // Форматирование даты в формат YYYY-MM-DD
        function formatDate(date) {
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
        }
       
        // Основная функция расчета
        function calculate() {
            const birthdateInput = document.getElementById('birthdate').value;
            const targetdateInput = document.getElementById('targetdate').value;
           
            if (!birthdateInput) {
                alert('Пожалуйста, введите дату рождения');
                return;
            }
           
            const birthdate = new Date(birthdateInput);
            const targetdate = new Date(targetdateInput);
           
            if (birthdate > targetdate) {
                alert('Дата рождения не может быть позже текущей даты');
                return;
            }
           
            // Расчет возраста
            let age = targetdate.getFullYear() - birthdate.getFullYear();
            const monthDiff = targetdate.getMonth() - birthdate.getMonth();
           
            if (monthDiff < 0 || (monthDiff === 0 && targetdate.getDate() < birthdate.getDate())) {
                age--;
            }
           
            // Расчет годов обучения в Хогвартсе
            const hogwartsStartAge = 11;
            const hogwartsDuration = 7;
           
            const startYear = birthdate.getFullYear() + hogwartsStartAge;
            const endYear = startYear + hogwartsDuration - 1;
           
            // Определение статуса обучения
            let educationStatus = '';
            const currentYear = targetdate.getFullYear();
           
            if (currentYear < startYear) {
                educationStatus = 'Ты ещё не начал(а) обучение в Хогвартсе';
            } else if (currentYear >= startYear && currentYear <= endYear) {
                const currentCourse = currentYear - startYear + 1;
                educationStatus = `Ты сейчас на ${currentCourse} курсе Хогвартса`;
            } else {
                educationStatus = 'Ты уже окончил(а) Хогвартс';
            }
           
            // Отображение результатов
            document.getElementById('ageResult').textContent = `Тебе ${age} лет`;
            document.getElementById('educationResult').textContent = educationStatus;
            document.getElementById('startYear').textContent = `Год начала обучения: ${startYear}`;
            document.getElementById('endYear').textContent = `Год окончания обучения: ${endYear}`;
           
            // Показать результат с анимацией
            const resultElement = document.getElementById('result');
            resultElement.style.display = 'block';
        }
    </script>
</body>
</html>[/html]