added readme and passes

2025-07-16 16:51:34 +07:00
1 parent 42186d7218
commit cb60c74f38
@@ -0,0 +1,162 @@
+# Цифровые пропуски (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).