# Цифровые пропуски (Digital Passes)

Веб-приложение для отображения цифровых пропусков в стиле паспортов или ID-карт с настраиваемым дизайном и содержимым.

## Описание

Это простое веб-приложение позволяет создавать и отображать цифровые пропуски на основе данных из JSON файла. Каждый пропуск может иметь уникальный дизайн, цвета и содержимое.

## Структура проекта

```
passes/
├── index.html              # Основная HTML страница
├── index.css              # Стили для пропусков
├── index.js               # JavaScript логика
├── pass.json              # Данные пропусков
├── pass-example.json      # Пример структуры данных
├── communityIcon_h3cvittvupi91.png  # Пример изображения
├── LICENSE                # Лицензия MIT
└── README.md              # Документация
```

## Возможности

- ✅ Настраиваемый фон пропуска
- ✅ Заголовок с изображением и текстом
- ✅ Дополнительная секция в заголовке с изображением
- ✅ Основное содержимое в две колонки
- ✅ Подвал с изображениями
- ✅ Настраиваемые цвета для всех текстовых элементов
- ✅ Поддержка прямоугольных и квадратных изображений
- ✅ Адаптивный дизайн

## Запуск

1. Разместите файлы на веб-сервере
2. Откройте `index.html` в браузере
3. Пропуски будут загружены автоматически из `pass.json`

### Локальный запуск

```bash
# Используйте любой простой HTTP сервер, например:
python -m http.server 8000
# или
npx serve .
```

Затем откройте `http://localhost:8000`

## Структура данных

Файл `pass.json` содержит массив объектов пропусков. Каждый пропуск имеет следующую структуру:

### Основные поля

```json
{
  "background": "black",  // Цвет фона пропуска
  "header": {             // Заголовок пропуска
    "img": {              // Изображение в заголовке
      "src": "image.png",
      "alt": "Описание"
    },
    "desc": {             // Описание (например, "PASSPORT")
      "color": "white",
      "data": "PASSPORT"
    },
    "data": {             // Основной текст заголовка
      "color": "white",
      "data": "Имя пользователя"
    },
    "body": {             // Дополнительная секция в заголовке
      "img": {            // Опционально: изображение
        "src": "image.png",
        "alt": "Описание"
      },
      "desc": {           // Описание
        "color": "white",
        "data": "Описание"
      },
      "data": {           // Данные
        "color": "white",
        "data": "Значение"
      }
    }
  },
  "body": [               // Основное содержимое (массив строк)
    {
      "left": {           // Левая колонка
        "desc": {
          "color": "white",
          "data": "Поле"
        },
        "data": {
          "color": "white",
          "data": "Значение"
        }
      },
      "right": {          // Правая колонка
        "desc": {
          "color": "white",
          "data": "Поле"
        },
        "data": {
          "color": "white",
          "data": "Значение"
        }
      }
    }
  ],
  "footer": {             // Подвал пропуска
    "img": {              // Основное изображение
      "src": "image.png",
      "alt": "Описание",
      "type": "rectangle"  // "rectangle" или "square"
    },
    "subimg": {           // Малое изображение в углу
      "src": "image.png",
      "alt": "Описание"
    }
  }
}
```

## Кастомизация

### Изменение стилей

Отредактируйте `index.css` для изменения:
- Размеров пропусков (`.pass`)
- Шрифтов и размеров текста
- Отступов и промежутков
- Анимаций и эффектов

### Добавление новых пропусков

1. Добавьте новый объект в массив `pass.json`
2. Укажите необходимые изображения
3. Настройте цвета и содержимое

### Типы изображений

- **Заголовок**: 50x50px, автоматически закругляется
- **Тело заголовка**: 100% ширины, 130px высоты
- **Подвал основное**: настраиваемый размер (rectangle/square)
- **Подвал малое**: 20x20px, в левом нижнем углу

## Пример использования

Смотрите `pass-example.json` для примера полной структуры данных пропуска.

## Технические детaли

- **Фронтенд**: Vanilla JavaScript, HTML5, CSS3
- **Формат данных**: JSON
- **Совместимость**: Современные браузеры
- **Зависимости**: Нет

## Лицензия

Этот проект лицензирован под MIT License. Подробности смотрите в файле [LICENSE](LICENSE).