index.html
html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Паспортные данные</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="background-pattern"></div>
    <nav class="main-nav">
        <a href="index.html" class="active"><i class="fas fa-passport"></i> Ввод данных</a>
        <a href="passports.html"><i class="fas fa-list"></i> Мои паспорта</a>
    </nav>
    
    <div id="container">
        <h1 id="main-heading"><i class="fas fa-passport"></i> Ввод паспортных данных</h1>
        <div id="decorative-line"></div>
        
        <div class="country-selector">
            <button id="openCountryModal" class="btn-primary">
                <i class="fas fa-globe"></i> Выбрать страну
            </button>
            <div id="selected-country-display"></div>
        </div>
        
        <div id="passport-form-container"></div>
    </div>

    <div id="countryModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2><i class="fas fa-globe-americas"></i> Выберите страну</h2>
            <form id="countryForm">
                <div class="form-group">
                    <label for="country"><i class="fas fa-flag"></i> Страна:</label>
                    <select id="country" name="country" class="form-control">
                        <option value="">Выберите страну</option>
                        <option value="russia">Россия</option>
                        <option value="usa">США</option>
                        <option value="canada">Канада</option>
                        <option value="uk">Великобритания</option>
                        <option value="germany">Германия</option>
                        <option value="france">Франция</option>
                        <option value="southkorea">Южная Корея</option>
                        <option value="japan">Япония</option>
                        <option value="china">Китай</option>
                        <option value="spain">Испания</option>
                    </select>
                </div>
                <button type="button" id="selectCountry" class="btn-primary">
                    <i class="fas fa-check"></i> Выбрать
                </button>
            </form>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>
Новый passports.html (страница просмотра паспортов)
html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Мои паспорта</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="background-pattern"></div>
    <nav class="main-nav">
        <a href="index.html"><i class="fas fa-passport"></i> Ввод данных</a>
        <a href="passports.html" class="active"><i class="fas fa-list"></i> Мои паспорта</a>
    </nav>
    
    <div id="container">
        <h1 id="main-heading"><i class="fas fa-address-book"></i> Мои паспорта</h1>
        <div id="decorative-line"></div>
        
        <div id="passports-list">
            <div class="empty-state">
                <i class="fas fa-passport"></i>
                <p>У вас пока нет сохраненных паспортов</p>
                <a href="index.html" class="btn-primary">
                    <i class="fas fa-plus"></i> Добавить паспорт
                </a>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>
Обновленный style.css
css
/* Основные стили */
:root {
    --primary-color: #990000;
    --secondary-color: #cc5500;
    --light-color: #fdf3f3;
    --dark-color: #422c2c;
    --success-color: #28a745;
    --info-color: #17a2b8;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--dark-color);
    color: #333;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

.background-pattern {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    z-index: -1;
    opacity: 0.3;
}

.main-nav {
    background-color: rgba(0, 0, 0, 0.7);
    padding: 15px 20px;
    display: flex;
    justify-content: center;
    gap: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.main-nav a {
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 5px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.main-nav a:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.main-nav a.active {
    background-color: var(--primary-color);
}

#container {
    background-color: var(--light-color);
    padding: 30px 40px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    width: 90%;
    max-width: 800px;
    margin: 30px auto;
    position: relative;
    overflow: hidden;
}

#container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 100%;
    background: linear-gradient(to bottom, var(--primary-color), var(--secondary-color));
}

#main-heading {
    color: var(--primary-color);
    text-align: center;
    margin-bottom: 25px;
    font-size: 1.8em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

#main-heading i {
    color: var(--secondary-color);
}

#decorative-line {
    height: 2px;
    background: linear-gradient(to right, var(--secondary-color), var(--primary-color));
    margin-bottom: 30px;
    border: none;
}

/* Кнопки */
.btn {
    padding: 12px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1em;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-primary {
    background-color: var(--secondary-color);
    color: white;
}

.btn-primary:hover {
    background-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.btn-secondary {
    background-color: #6c757d;
    color: white;
}

.btn-secondary:hover {
    background-color: #5a6268;
}

/* Формы */
.form-group {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 8px;
    color: #555;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.input-wrapper {
    position: relative;
    margin-bottom: 15px;
}

.input-wrapper i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    z-index: 2;
}

input[type="text"],
input[type="date"],
input[type="password"],
input[type="email"],
select,
textarea {
    width: 100%;
    padding: 12px 12px 12px 40px;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 1em;
    background-color: #fafafa;
    transition: all 0.3s ease;
    position: relative;
}

input[type="text"]:focus,
input[type="date"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
select:focus,
textarea:focus {
    border-color: var(--secondary-color);
    box-shadow: 0 0 5px rgba(204, 85, 0, 0.3);
    outline: none;
    background-color: white;
}

/* Модальное окно */
.modal {
    display: none;
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5);
    backdrop-filter: blur(3px);
}

.modal-content {
    background-color: #fefefe;
    margin: 10% auto;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    width: 90%;
    max-width: 500px;
    position: relative;
    animation: modalopen 0.4s;
}

@keyframes modalopen {
    from {opacity: 0; transform: translateY(-50px);}
    to {opacity: 1; transform: translateY(0);}
}

.modal-content h2 {
    margin-bottom: 20px;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 10px;
}

.close {
    color: #aaa;
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s;
}

.close:hover {
    color: #333;
}

/* Страница списка паспортов */
#passports-list {
    margin-top: 20px;
}

.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #666;
}

.empty-state i {
    font-size: 50px;
    color: #ccc;
    margin-bottom: 20px;
}

.empty-state p {
    margin-bottom: 20px;
    font-size: 1.1em;
}

.passport-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 20px;
    margin-bottom: 20px;
    border-left: 4px solid var(--secondary-color);
    transition: transform 0.3s ease;
}

.passport-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

.passport-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.passport-country {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    color: var(--primary-color);
}

.passport-flag {
    width: 30px;
    height: 20px;
    border-radius: 3px;
    object-fit: cover;
}

.passport-details {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
}

.passport-field {
    margin-bottom: 10px;
}

.passport-field-label {
    font-size: 0.85em;
    color: #666;
    margin-bottom: 3px;
}

.passport-field-value {
    font-weight: 500;
    word-break: break-word;
}

.passport-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 15px;
}

/* Адаптивность */
@media (max-width: 768px) {
    #container {
        padding: 20px;
        width: 95%;
    }
    
    .modal-content {
        width: 95%;
        margin: 20% auto;
    }
    
    .passport-details {
        grid-template-columns: 1fr;
    }
}

/* Анимации */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fade-in {
    animation: fadeIn 0.5s ease-in;
}
Обновленный script.js
javascript
document.addEventListener('DOMContentLoaded', function() {
    // Проверяем, на какой странице мы находимся
    if (window.location.pathname.endsWith('passports.html')) {
        initPassportsPage();
    } else {
        initInputPage();
    }
});

function initInputPage() {
    const countryPassportFields = {
        russia: [
            { name: 'issuedBy', label: 'Кем выдан', type: 'text', icon: 'fa-building' },
            { name: 'issuedPlace', label: 'Где выдан', type: 'text', icon: 'fa-map-marker-alt' },
            { name: 'issueDate', label: 'Когда выдан', type: 'date', icon: 'fa-calendar-alt' },
            { name: 'departmentCode', label: 'Код подразделения', type: 'text', icon: 'fa-hashtag' },
            { name: 'seriesNumber', label: 'Серия и номер паспорта', type: 'text', icon: 'fa-id-card' },
            { name: 'lastName', label: 'Фамилия', type: 'text', icon: 'fa-user' },
            { name: 'firstName', label: 'Имя', type: 'text', icon: 'fa-user' },
            { name: 'middleName', label: 'Отчество', type: 'text', icon: 'fa-user' },
            { name: 'gender', label: 'Пол', type: 'select', options: ['Мужской', 'Женский'], icon: 'fa-venus-mars' },
            { name: 'birthDate', label: 'Дата рождения', type: 'date', icon: 'fa-birthday-cake' },
            { name: 'birthPlace', label: 'Место рождения', type: 'text', icon: 'fa-map-marked-alt' }
        ],
        usa: [
            { name: 'lastName', label: 'Last Name', type: 'text', icon: 'fa-user' },
            { name: 'firstName', label: 'First Name', type: 'text', icon: 'fa-user' },
            { name: 'middleName', label: 'Middle Name', type: 'text', icon: 'fa-user' },
            { name: 'birthDate', label: 'Date of Birth', type: 'date', icon: 'fa-birthday-cake' },
            { name: 'passportNumber', label: 'Passport Number', type: 'text', icon: 'fa-id-card' },
            { name: 'placeOfBirth', label: 'Place of Birth', type: 'text', icon: 'fa-map-marked-alt' }
        ],
        canada: [
            { name: 'lastName', label: 'Last Name', type: 'text', icon: 'fa-user' },
            { name: 'firstName', label: 'First Name', type: 'text', icon: 'fa-user' },
            { name: 'middleName', label: 'Middle Name', type: 'text', icon: 'fa-user' },
            { name: 'birthDate', label: 'Date of Birth', type: 'date', icon: 'fa-birthday-cake' },
            { name: 'passportNumber', label: 'Passport Number', type: 'text', icon: 'fa-id-card' },
            { name: 'placeOfBirth', label: 'Place of Birth', type: 'text', icon: 'fa-map-marked-alt' }
        ],
        uk: [
            { name: 'lastName', label: 'Surname', type: 'text', icon: 'fa-user' },
            { name: 'firstName', label: 'Given Names', type: 'text', icon: 'fa-user' },
            { name: 'birthDate', label: 'Date of Birth', type: 'date', icon: 'fa-birthday-cake' },
            { name: 'passportNumber', label: 'Passport Number', type: 'text', icon: 'fa-id-card' },
            { name: 'placeOfBirth', label: 'Place of Birth', type: 'text', icon: 'fa-map-marked-alt' }
        ],
        germany: [
            { name: 'lastName', label: 'Nachname', type: 'text', icon: 'fa-user' },
            { name: 'firstName', label: 'Vorname', type: 'text', icon: 'fa-user' },
            { name: 'birthDate', label: 'Geburtsdatum', type: 'date', icon: 'fa-birthday-cake' },
            { name: 'passportNumber', label: 'Passnummer', type: 'text', icon: 'fa-id-card' },
            { name: 'placeOfBirth', label: 'Geburtsort', type: 'text', icon: 'fa-map-marked-alt' }
        ],
        france: [
            { name: 'lastName', label: 'Nom', type: 'text', icon: 'fa-user' },
            { name: 'firstName', label: 'Prénom', type: 'text', icon: 'fa-user' },
            { name: 'birthDate', label: 'Date de naissance', type: 'date', icon: 'fa-birthday-cake' },
            { name: 'placeOfBirth', label: 'Lieu de naissance', type: 'text', icon: 'fa-map-marked-alt' },
            { name: 'passportNumber', label: 'Numéro de passeport', type: 'text', icon: 'fa-id-card' },
            { name: 'nationality', label: 'Nationalité', type: 'text', icon: 'fa-globe' }
        ],
        southkorea: [
            { name: 'lastName', label: '성 (Last Name)', type: 'text', icon: 'fa-user' },
            { name: 'firstName', label: '이름 (First Name)', type: 'text', icon: 'fa-user' },
            { name: 'birthDate', label: '생년월일 (Date of Birth)', type: 'date', icon: 'fa-birthday-cake' },
            { name: 'placeOfBirth', label: '출생지 (Place of Birth)', type: 'text', icon: 'fa-map-marked-alt' },
            { name: 'passportNumber', label: '여권번호 (Passport Number)', type: 'text', icon: 'fa-id-card' },
            { name: 'registrationNumber', label: '주민등록번호 (Registration Number)', type: 'text', icon: 'fa-id-badge' }
        ],
        japan: [
            { name: 'lastName', label: '氏名 (Last Name)', type: 'text', icon: 'fa-user' },
            { name: 'firstName', label: '名前 (First Name)', type: 'text', icon: 'fa-user' },
            { name: 'birthDate', label: '生年月日 (Date of Birth)', type: 'date', icon: 'fa-birthday-cake' },
            { name: 'placeOfBirth', label: '出生地 (Place of Birth)', type: 'text', icon: 'fa-map-marked-alt' },
            { name: 'passportNumber', label: '旅券番号 (Passport Number)', type: 'text', icon: 'fa-id-card' }
        ],
        china: [
            { name: 'lastName', label: '姓 (Family Name)', type: 'text', icon: 'fa-user' },
            { name: 'firstName', label: '名 (Given Name)', type: 'text', icon: 'fa-user' },
            { name: 'birthDate', label: '出生日期 (Date of Birth)', type: 'date', icon: 'fa-birthday-cake' },
            { name: 'placeOfBirth', label: '出生地 (Place of Birth)', type: 'text', icon: 'fa-map-marked-alt' },
            { name: 'passportNumber', label: '护照号码 (Passport Number)', type: 'text', icon: 'fa-id-card' },
            { name: 'idCardNumber', label: '身份证号码 (ID Card Number)', type: 'text', icon: 'fa-address-card' }
        ],
        spain: [
            { name: 'lastName', label: 'Primer apellido', type: 'text', icon: 'fa-user' },
            { name: 'firstName', label: 'Nombre', type: 'text', icon: 'fa-user' },
            { name: 'secondLastName', label: 'Segundo apellido', type: 'text', icon: 'fa-user' },
            { name: 'birthDate', label: 'Fecha de nacimiento', type: 'date', icon: 'fa-birthday-cake' },
            { name: 'placeOfBirth', label: 'Lugar de nacimiento', type: 'text', icon: 'fa-map-marked-alt' },
            { name: 'passportNumber', label: 'Número de pasaporte', type: 'text', icon: 'fa-id-card' },
            { name: 'dni', label: 'DNI', type: 'text', icon: 'fa-id-badge' }
        ]
    };

    const countryFlags = {
        russia: 'https://upload.wikimedia.org/wikipedia/commons/f/f3/Flag_of_Russia.svg',
        usa: 'https://upload.wikimedia.org/wikipedia/commons/a/a4/Flag_of_the_United_States.svg',
        canada: 'https://s0.rbk.ru/v6_top_pics/media/img/9/64/756691574229649.png',
        uk: 'https://upload.wikimedia.org/wikipedia/en/a/ae/Flag_of_the_United_Kingdom.svg',
        germany: 'https://upload.wikimedia.org/wikipedia/commons/b/ba/Flag_of_Germany.svg',
        france: 'https://upload.wikimedia.org/wikipedia/en/c/c3/Flag_of_France.svg',
        southkorea: 'https://upload.wikimedia.org/wikipedia/commons/0/09/Flag_of_South_Korea.svg',
        japan: 'https://upload.wikimedia.org/wikipedia/commons/9/9e/Flag_of_Japan.svg',
        china: 'https://upload.wikimedia.org/wikipedia/commons/f/fa/Flag_of_the_People%27s_Republic_of_China.svg',
        spain: 'https://upload.wikimedia.org/wikipedia/commons/9/9a/Flag_of_Spain.svg'
    };

    const countryNames = {
        russia: 'Россия',
        usa: 'США',
        canada: 'Канада',
        uk: 'Великобритания',
        germany: 'Германия',
        france: 'Франция',
        southkorea: 'Южная Корея',
        japan: 'Япония',
        china: 'Китай',
        spain: 'Испания'
    };

    const openCountryModalButton = document.getElementById('openCountryModal');
    const countryModal = document.getElementById('countryModal');
    const span = document.getElementsByClassName("close")[0];
    const selectCountryButton = document.getElementById('selectCountry');
    const countrySelect = document.getElementById('country');
    const passportFormContainer = document.getElementById('passport-form-container');
    const selectedCountryDisplay = document.getElementById('selected-country-display');

    // Инициализация localStorage для хранения паспортов
    if (!localStorage.getItem('passports')) {
        localStorage.setItem('passports', JSON.stringify([]));
    }

    openCountryModalButton.onclick = function() {
        countryModal.style.display = "block";
    };

    span.onclick = function() {
        countryModal.style.display = "none";
    };

    window.onclick = function(event) {
        if (event.target == countryModal) {
            countryModal.style.display = "none";
        }
    };

    selectCountryButton.addEventListener('click', function(event) {
        event.preventDefault();
        const selectedCountry = countrySelect.value;
        
        if (!selectedCountry) {
            alert('Пожалуйста, выберите страну');
            return;
        }

        countryModal.style.display = "none";
        passportFormContainer.innerHTML = '';

        if (countryPassportFields[selectedCountry]) {
            // Отображение выбранной страны
            selectedCountryDisplay.innerHTML = `
                <div class="selected-country">
                    <img src="${countryFlags[selectedCountry]}" alt="${countryNames[selectedCountry]}" class="country-flag">
                    <span>${countryNames[selectedCountry]}</span>
                </div>
            `;

            const form = document.createElement('form');
            form.id = 'passport-form';
            
            countryPassportFields[selectedCountry].forEach(field => {
                const formGroup = document.createElement('div');
                formGroup.className = 'form-group';
                
                const label = document.createElement('label');
                label.htmlFor = field.name;
                label.innerHTML = `<i class="fas ${field.icon}"></i> ${field.label}`;
                formGroup.appendChild(label);

                const inputWrapper = document.createElement('div');
                inputWrapper.className = 'input-wrapper';
                
                let input;
                if (field.type === 'select') {
                    input = document.createElement('select');
                    field.options.forEach(optionText => {
                        const option = document.createElement('option');
                        option.value = optionText;
                        option.textContent = optionText;
                        input.appendChild(option);
                    });
                } else {
                    input = document.createElement('input');
                    input.type = field.type;
                }
                
                input.name = field.name;
                input.id = field.name;
                input.required = true;
                input.className = 'form-control';
                
                inputWrapper.innerHTML = `<i class="fas ${field.icon}"></i>`;
                inputWrapper.appendChild(input);
                formGroup.appendChild(inputWrapper);
                form.appendChild(formGroup);
            });

            const submitButton = document.createElement('button');
            submitButton.type = 'submit';
            submitButton.className = 'btn btn-primary';
            submitButton.innerHTML = '<i class="fas fa-save"></i> Сохранить паспорт';
            form.appendChild(submitButton);
            passportFormContainer.appendChild(form);

            // Обработка специальных полей
            const departmentCodeInput = document.getElementById('departmentCode');
            if (departmentCodeInput) {
                departmentCodeInput.addEventListener('input', function() {
                    let value = this.value.replace(/\D/g, '');
                    value = value.substring(0, 6);
                    value = value.replace(/(\d{3})(\d{3})/, '$1-$2');
                    this.value = value;
                });
            }

            form.addEventListener('submit', function(event) {
                event.preventDefault();
                const formData = new FormData(form);
                const data = {};
                formData.forEach((value, key) => data[key] = value);
                
                // Добавляем информацию о стране
                data.country = selectedCountry;
                data.countryName = countryNames[selectedCountry];
                data.countryFlag = countryFlags[selectedCountry];
                
                // Валидация для российского паспорта
                if (selectedCountry === 'russia') {
                    const birthDate = new Date(data.birthDate);
                    const issueDate = new Date(data.issueDate);
                    const ageDiff = issueDate.getTime() - birthDate.getTime();
                    const minAgeMillis = 14 * 365 * 24 * 60 * 60 * 1000;
                    
                    if (ageDiff < minAgeMillis) {
                        alert('Дата выдачи паспорта должна быть не менее чем через 14 лет после даты рождения.');
                        return;
                    }
                }
                
                // Сохраняем паспорт
                savePassport(data);
                
                // Оповещаем пользователя
                alert('Паспорт успешно сохранен!');
                
                // Очищаем форму
                form.reset();
                
                // Показываем кнопку для просмотра всех паспортов
                showViewPassportsButton();
            });
        } else {
            passportFormContainer.innerHTML = '<p class="error-message">Данные для этой страны отсутствуют.</p>';
        }
    });

    function savePassport(passportData) {
        const passports = JSON.parse(localStorage.getItem('passports'));
        passportData.id = Date.now(); // Добавляем уникальный ID
        passports.push(passportData);
        localStorage.setItem('passports', JSON.stringify(passports));
    }

    function showViewPassportsButton() {
        const viewPassportsBtn = document.createElement('a');
        viewPassportsBtn.href = 'passports.html';
        viewPassportsBtn.className = 'btn btn-secondary';
        viewPassportsBtn.innerHTML = '<i class="fas fa-list"></i> Просмотреть все паспорта';
        viewPassportsBtn.style.marginTop = '20px';
        viewPassportsBtn.style.display = 'inline-block';
        passportFormContainer.appendChild(viewPassportsBtn);
    }
});

function initPassportsPage() {
    const passportsList = document.getElementById('passports-list');
    const passports = JSON.parse(localStorage.getItem('passports')) || [];
    
    if (passports.length === 0) {
        return; // Оставляем сообщение "нет паспортов"
    }
    
    // Сортируем паспорта по названию страны
    passports.sort((a, b) => a.countryName.localeCompare(b.countryName));
    
    // Группируем паспорта по странам
    const groupedPassports = {};
    passports.forEach(passport => {
        if (!groupedPassports[passport.country]) {
            groupedPassports[passport.country] = {
                countryName: passport.countryName,
                countryFlag: passport.countryFlag,
                passports: []
            };
        }
        groupedPassports[passport.country].passports.push(passport);
    });
    
    // Очищаем контейнер
    passportsList.innerHTML = '';
    
    // Создаем карточки для каждой страны
    for (const country in groupedPassports) {
        const countryGroup = groupedPassports[country];
        
        const countryHeader = document.createElement('h2');
        countryHeader.className = 'country-header';
        countryHeader.innerHTML = `
            <img src="${countryGroup.countryFlag}" alt="${countryGroup.countryName}" class="country-flag">
            ${countryGroup.countryName}
        `;
        passportsList.appendChild(countryHeader);
        
        // Добавляем паспорта для этой страны
        countryGroup.passports.forEach(passport => {
            const passportCard = document.createElement('div');
            passportCard.className = 'passport-card fade-in';
            
            // Создаем HTML для полей паспорта
            let fieldsHTML = '';
            for (const key in passport) {
                if (key !== 'id' && key !== 'country' && key !== 'countryName' && key !== 'countryFlag') {
                    fieldsHTML += `
                        <div class="passport-field">
                            <div class="passport-field-label">${getFieldLabel(key, passport.country)}</div>
                            <div class="passport-field-value">${passport[key]}</div>
                        </div>
                    `;
                }
            }
            
            passportCard.innerHTML = `
                <div class="passport-header">
                    <div class="passport-country">
                        <img src="${passport.countryFlag}" alt="${passport.countryName}" class="passport-flag">
                        <span>${passport.countryName}</span>
                    </div>
                    <div class="passport-id">#${passport.id.toString().slice(-4)}</div>
                </div>
                <div class="passport-details">
                    ${fieldsHTML}
                </div>
                <div class="passport-actions">
                    <button class="btn btn-secondary" onclick="editPassport(${passport.id})">
                        <i class="fas fa-edit"></i> Редактировать
                    </button>
                    <button class="btn btn-danger" onclick="deletePassport(${passport.id})">
                        <i class="fas fa-trash"></i> Удалить
                    </button>
                </div>
            `;
            
            passportsList.appendChild(passportCard);
        });
    }
}

function getFieldLabel(key, country) {
    // Можно расширить этот метод для возврата локализованных названий полей
    // Пока просто возвращаем ключ
    return key;
}

function editPassport(id) {
    // Реализация редактирования паспорта
    alert(`Редактирование паспорта #${id}`);
}

function deletePassport(id) {
    if (confirm('Вы уверены, что хотите удалить этот паспорт?')) {
        const passports = JSON.parse(localStorage.getItem('passports'));
        const updatedPassports = passports.filter(p => p.id !== id);
        localStorage.setItem('passports', JSON.stringify(updatedPassports));
        location.reload(); // Перезагружаем страницу для обновления списка
    }
}

// Делаем функции доступными глобально для обработчиков событий в HTML
window.editPassport = editPassport;
window.deletePassport = deletePassport; сделай флаги стран меньше по размеру и более минималестичными, чтобы они влазили в размеры блока