Skip to content

Интерактивный HTML-киоск для клиники с фоновым видео, стеклянным UI и встроенной навигацией. Оптимизирован для touch-устройств и режима браузера "Kiosk".

License

Notifications You must be signed in to change notification settings

gr33njj/html-kiosk-mode

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🏥 Интерактивный Web-киоск для клиентов через ваш сайт

Этот проект специально подготовлен для ООО "Мой Доктор" — HTML/CSS/JS-приложение в режиме киоска, созданное для сенсорной панели в клинике. Киоск позволяет пользователям:

  • Ознакомиться с услугами
  • Перейти в личный кабинет для распечатки результатов
  • Получить доступ к социальным сетям
  • Работает в полноэкранном режиме без клавиатуры и масштабирования

🚀 Особенности

  • 🎞️ Фоновое видео на главном экране
  • 🧊 Дизайн в стиле Glassmorphism
  • 📱 Поддержка сенсорных экранов
  • 🖥️ Kiosk-friendly (работает в Chrome/Edge Kiosk Mode)
  • ↩️ Кнопка «Назад» при переходе в iframe
  • 🔒 Блокировка масштабирования и сторонней навигации

📁 Структура проекта

📂 kiosk/
├── index.html          # Главная страница киоска
├── style.css           # Стилизация, включая эффекты стекла и сетку кнопок
├── script.js           # Логика открытия/закрытия iframe и экранов
├── media/
│   ├── video.mp4  # Фоновое видео
│   └── social.webp         # Скриншоты для последнего пункта в меню

📦 Установка

  1. Разместите содержимое на локальном или удалённом веб-сервере.
  2. Установите Chrome или Edge в режиме киоска:
    chrome.exe --kiosk http://localhost/index.html
    
  3. Отключите масштабирование и клавиатуру на устройстве (например, через настройки браузера или сторонний Kiosk Manager).

🔧 Дополнительные настройки

  • 🔙 Кнопка "Назад" появляется при открытии внешнего сайта внутри iframe.
  • 📄 Скачивание PDF возможно только через «Версию для печати», рекомендуется настроить автопечать или PDF viewer в kiosk-браузере.
  • 🧼 Авто-логаут из Личного Кабинета можно реализовать через таймер неактивности (опционально).

💡 Идеи для будущих улучшений

  • ⏳ Таймер авто-возврата на главный экран
  • 🌐 Многоязычная поддержка
  • 🧠 Интеграция с API клиники для живых данных

🛠️ Автор

Разработка и поддержка — @gr33njj


📄 Лицензия

MIT License. Используйте свободно с указанием автора.

About

Интерактивный HTML-киоск для клиники с фоновым видео, стеклянным UI и встроенной навигацией. Оптимизирован для touch-устройств и режима браузера "Kiosk".

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published