From cb60c74f384c703be3250fdcb380bc4b8b81b168 Mon Sep 17 00:00:00 2001
From: TolaMironcenko <mironcenkotola@gmail.com>
Date: Wed, 16 Jul 2025 16:51:34 +0700
Subject: [PATCH] added readme and passes

---
 LICENSE   |  21 +++++++
 README.md | 162 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 183 insertions(+)
 create mode 100644 LICENSE
 create mode 100644 README.md

diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..95e5379
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Passes Project
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..105f9ec
--- /dev/null
+++ b/README.md
@@ -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).