163 lines
5.9 KiB
Markdown
163 lines
5.9 KiB
Markdown
# Цифровые пропуски (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).
|