added readme and passes
This commit is contained in:
wt committed
1 parent
42186d7218
commit
cb60c74f38
2 files changed
+183
No files matched your search
@@ -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.
|
||||
@@ -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).
|
||||
Reference in new issue
Block a user