Цифровые пропуски (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

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

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

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

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

Файл pass.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.