PASS ANY EXAM

# Система Интернационализации (i18n) для ExamPass

## Обзор

Система интернационализации позволяет переключаться между русским и английским языками на сайте ExamPass. Система автоматически сохраняет выбранный язык в localStorage и восстанавливает его при следующем посещении.

## Структура файлов

```
src/js/
├── translations.js    # Файл с переводами
├── i18n.js           # Основная логика интернационализации
└── main.js           # Основной JavaScript файл (обновлен)
```

## Как это работает

### 1. Файл переводов (`translations.js`)

Содержит объект `translations` с переводами для всех поддерживаемых языков:

```javascript
const translations = {
    en: {
        nav_about: "About",
        hero_title_line1: "PASS ANY EXAM",
        // ... другие переводы
    },
    ru: {
        nav_about: "О нас",
        hero_title_line1: "СДАЙ ЛЮБОЙ ЭКЗАМЕН",
        // ... другие переводы
    }
};
```

### 2. Основная логика (`i18n.js`)

Класс `I18n` управляет:
- Переключением языков
- Сохранением выбранного языка
- Обновлением контента на странице
- Обновлением мета-тегов

### 3. HTML разметка

Элементы, которые нужно переводить, помечаются атрибутом `data-i18n`:

```html
<a href="#about" data-i18n="nav_about">About</a>
<h1 data-i18n="hero_title_line1">PASS ANY EXAM</h1>
```

## Использование

### Переключение языков

Пользователи могут переключать язык, нажимая на кнопки "EN" или "RU" в навигации:

```html
<div class="lang-switch">
    <a href="#" class="active">EN</a>
    <a href="#">RU</a>
</div>
```

### Добавление новых переводов

1. Добавьте новый ключ в объект `translations` в файле `translations.js`:

```javascript
const translations = {
    en: {
        new_key: "English text",
        // ...
    },
    ru: {
        new_key: "Русский текст",
        // ...
    }
};
```

2. Добавьте атрибут `data-i18n` к HTML элементу:

```html
<p data-i18n="new_key">Default text</p>
```

### Специальные случаи

#### Сложные элементы

Для элементов с HTML разметкой внутри (например, с `<strong>` тегами) используется специальная обработка в методе `translateComplexElements()`.

#### Плейсхолдеры для input полей

Для input полей перевод применяется к атрибуту `placeholder`:

```html
<input type="text" data-i18n="form_name_placeholder" placeholder="Enter your name">
```

## Поддерживаемые элементы

Система автоматически переводит:

- Навигационные ссылки
- Заголовки секций
- Описания
- Кнопки и формы
- Footer ссылки
- Мета-теги (language, og:locale)

## Тестирование

Для тестирования системы интернационализации используйте файл `test.html`. Он содержит примеры всех типов переводимых элементов.

## Автоматическое сохранение

Выбранный язык автоматически сохраняется в localStorage браузера и восстанавливается при следующем посещении сайта.

## SEO оптимизация

Система автоматически обновляет:
- Атрибут `lang` у тега `<html>`
- Мета-тег `language`
- Open Graph тег `og:locale`

Это помогает поисковым системам правильно индексировать контент на разных языках.

## Совместимость

Система работает во всех современных браузерах и не требует дополнительных зависимостей.