Spaces:
Running
Running
| <html lang="uk"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>FirePROtector KIT-22 - Дашборд</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap'); | |
| body { | |
| font-family: 'Roboto', sans-serif; | |
| background-color: #f8fafc; | |
| } | |
| .alert-pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); } | |
| 70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } | |
| } | |
| .circular-progress { | |
| position: relative; | |
| width: 120px; | |
| height: 120px; | |
| border-radius: 50%; | |
| background: conic-gradient(#3b82f6 0deg, #e5e7eb 0deg); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .circular-progress::before { | |
| content: ""; | |
| position: absolute; | |
| width: 90px; | |
| height: 90px; | |
| border-radius: 50%; | |
| background-color: white; | |
| } | |
| .sensor-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| .flame-animation { | |
| animation: flame 1.5s ease-in-out infinite alternate; | |
| } | |
| @keyframes flame { | |
| 0% { opacity: 0.8; transform: scale(1); } | |
| 100% { opacity: 1; transform: scale(1.1); } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen bg-gray-50"> | |
| <div class="flex"> | |
| <!-- Бічна панель --> | |
| <div class="w-64 bg-white shadow-md h-screen sticky top-0"> | |
| <div class="p-4 border-b border-gray-200"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-fire-extinguisher text-red-600 text-2xl"></i> | |
| <h1 class="text-xl font-bold">FirePROtector KIT-22</h1> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">Версія 2.1.4</p> | |
| </div> | |
| <nav class="p-4"> | |
| <ul class="space-y-2"> | |
| <li> | |
| <a href="#" class="flex items-center space-x-2 p-2 bg-blue-50 text-blue-600 rounded-lg"> | |
| <i class="fas fa-tachometer-alt"></i> | |
| <span>Дашборд</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center space-x-2 p-2 text-gray-600 hover:bg-gray-100 rounded-lg"> | |
| <i class="fas fa-fire"></i> | |
| <span>Датчики</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center space-x-2 p-2 text-gray-600 hover:bg-gray-100 rounded-lg"> | |
| <i class="fas fa-history"></i> | |
| <span>Журнал подій</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center space-x-2 p-2 text-gray-600 hover:bg-gray-100 rounded-lg"> | |
| <i class="fas fa-map-marked-alt"></i> | |
| <span>Карта приміщення</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center space-x-2 p-2 text-gray-600 hover:bg-gray-100 rounded-lg"> | |
| <i class="fas fa-cog"></i> | |
| <span>Налаштування</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center space-x-2 p-2 text-gray-600 hover:bg-gray-100 rounded-lg"> | |
| <i class="fas fa-question-circle"></i> | |
| <span>Довідка</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </nav> | |
| <div class="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-200"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| <span class="text-sm">Система активна</span> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-2">Остання перевірка: <span id="sidebar-last-check">сьогодні, 09:24</span></p> | |
| </div> | |
| </div> | |
| <!-- Основний вміст --> | |
| <div class="flex-1 p-8"> | |
| <!-- Заголовок та швидкі дії --> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h1 class="text-2xl font-bold text-gray-800">Дашборд протипожежної системи</h1> | |
| <div class="flex space-x-2"> | |
| <button id="quick-test" class="bg-blue-50 text-blue-600 px-4 py-2 rounded-lg flex items-center space-x-2"> | |
| <i class="fas fa-vial"></i> | |
| <span>Швидкий тест</span> | |
| </button> | |
| <button id="emergency-call" class="bg-red-50 text-red-600 px-4 py-2 rounded-lg flex items-center space-x-2"> | |
| <i class="fas fa-phone-alt"></i> | |
| <span>Аварійний виклик</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Статусні картки --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> | |
| <div class="bg-white p-6 rounded-xl shadow-sm border-l-4 border-green-500"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-sm text-gray-500">Загальний статус</p> | |
| <h3 class="text-xl font-bold mt-1">Норма</h3> | |
| </div> | |
| <div class="bg-green-100 p-2 rounded-full"> | |
| <i class="fas fa-check-circle text-green-500 text-xl"></i> | |
| </div> | |
| </div> | |
| <p class="text-xs text-gray-400 mt-4">Оновлено: <span class="text-gray-500">1 хв. тому</span></p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm border-l-4 border-blue-500"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-sm text-gray-500">Датчики диму</p> | |
| <h3 class="text-xl font-bold mt-1">12/12</h3> | |
| <p class="text-xs text-blue-500">Активні</p> | |
| </div> | |
| <div class="bg-blue-100 p-2 rounded-full"> | |
| <i class="fas fa-smog text-blue-500 text-xl"></i> | |
| </div> | |
| </div> | |
| <p class="text-xs text-gray-400 mt-4">Остання перевірка: <span class="text-gray-500">2 хв. тому</span></p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm border-l-4 border-orange-500"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-sm text-gray-500">Датчики температури</p> | |
| <h3 class="text-xl font-bold mt-1">12/12</h3> | |
| <p class="text-xs text-orange-500">Активні</p> | |
| </div> | |
| <div class="bg-orange-100 p-2 rounded-full"> | |
| <i class="fas fa-thermometer-half text-orange-500 text-xl"></i> | |
| </div> | |
| </div> | |
| <p class="text-xs text-gray-400 mt-4">Середня температура: <span class="text-gray-500">23.4°C</span></p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm border-l-4 border-purple-500"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-sm text-gray-500">Система гасіння</p> | |
| <h3 class="text-xl font-bold mt-1">Готова</h3> | |
| <p class="text-xs text-purple-500">100% заряд</p> | |
| </div> | |
| <div class="bg-purple-100 p-2 rounded-full"> | |
| <i class="fas fa-spray-can text-purple-500 text-xl"></i> | |
| </div> | |
| </div> | |
| <p class="text-xs text-gray-400 mt-4">Остання перевірка: <span class="text-gray-500">5 хв. тому</span></p> | |
| </div> | |
| </div> | |
| <!-- Графіки та основні показники --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8"> | |
| <!-- Графік температури --> | |
| <div class="bg-white p-6 rounded-xl shadow-sm col-span-2"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-lg font-semibold flex items-center"> | |
| <i class="fas fa-thermometer-half text-orange-500 mr-2"></i> | |
| Температура в приміщенні | |
| </h2> | |
| <div class="flex space-x-2"> | |
| <button class="text-xs bg-gray-100 px-2 py-1 rounded">24 год</button> | |
| <button class="text-xs bg-blue-50 text-blue-500 px-2 py-1 rounded">Тиждень</button> | |
| <button class="text-xs bg-gray-100 px-2 py-1 rounded">Місяць</button> | |
| </div> | |
| </div> | |
| <div class="h-64"> | |
| <!-- Тут буде графік температури (імітований) --> | |
| <div class="w-full h-full bg-gray-100 rounded-lg flex items-center justify-center text-gray-400"> | |
| <i class="fas fa-chart-line text-4xl"></i> | |
| <p class="ml-2">Графік температури</p> | |
| </div> | |
| </div> | |
| <div class="mt-4 grid grid-cols-3 gap-4"> | |
| <div class="bg-orange-50 p-3 rounded-lg"> | |
| <p class="text-xs text-orange-500">Максимальна</p> | |
| <p class="font-bold">26.7°C</p> | |
| <p class="text-xs text-gray-400">Кабінет 3</p> | |
| </div> | |
| <div class="bg-blue-50 p-3 rounded-lg"> | |
| <p class="text-xs text-blue-500">Середня</p> | |
| <p class="font-bold">23.4°C</p> | |
| <p class="text-xs text-gray-400">По всьому офісу</p> | |
| </div> | |
| <div class="bg-green-50 p-3 rounded-lg"> | |
| <p class="text-xs text-green-500">Мінімальна</p> | |
| <p class="font-bold">21.2°C</p> | |
| <p class="text-xs text-gray-400">Хол</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Статус датчиків --> | |
| <div class="bg-white p-6 rounded-xl shadow-sm"> | |
| <h2 class="text-lg font-semibold mb-4 flex items-center"> | |
| <i class="fas fa-fire text-red-500 mr-2"></i> | |
| Статус датчиків | |
| </h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium">Кабінет 1</span> | |
| <span class="text-sm font-medium">23.5°C</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 45%"></div> | |
| </div> | |
| <div class="flex justify-between text-xs text-gray-500 mt-1"> | |
| <span>Дим: 0.2%</span> | |
| <span>Норма</span> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium">Кабінет 2</span> | |
| <span class="text-sm font-medium">24.1°C</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 48%"></div> | |
| </div> | |
| <div class="flex justify-between text-xs text-gray-500 mt-1"> | |
| <span>Дим: 0.3%</span> | |
| <span>Норма</span> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium">Кухня</span> | |
| <span class="text-sm font-medium">26.7°C</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-yellow-500 h-2 rounded-full" style="width: 67%"></div> | |
| </div> | |
| <div class="flex justify-between text-xs text-gray-500 mt-1"> | |
| <span>Дим: 0.8%</span> | |
| <span>Попередження</span> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium">Хол</span> | |
| <span class="text-sm font-medium">21.2°C</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 32%"></div> | |
| </div> | |
| <div class="flex justify-between text-xs text-gray-500 mt-1"> | |
| <span>Дим: 0.1%</span> | |
| <span>Норма</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm font-medium">Завантаження системи</span> | |
| <span class="text-sm font-medium">12%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2 mt-1"> | |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 12%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Датчики та карта --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8"> | |
| <!-- Карта приміщення --> | |
| <div class="bg-white p-6 rounded-xl shadow-sm lg:col-span-2"> | |
| <h2 class="text-lg font-semibold mb-4 flex items-center"> | |
| <i class="fas fa-map-marked-alt text-green-500 mr-2"></i> | |
| Карта приміщення | |
| </h2> | |
| <div class="relative bg-gray-100 rounded-lg overflow-hidden" style="padding-bottom: 60%;"> | |
| <div class="absolute inset-0 p-4"> | |
| <!-- Схема офісу --> | |
| <div class="relative w-full h-full border-2 border-gray-300 rounded-lg bg-blue-50"> | |
| <!-- Кімнати --> | |
| <div class="absolute w-1/3 h-1/3 top-0 left-0 border-r border-b border-gray-300 p-2"> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-xs font-medium">Кабінет 1</span> | |
| <div class="w-2 h-2 rounded-full bg-green-500"></div> | |
| </div> | |
| </div> | |
| <div class="absolute w-1/3 h-1/3 top-0 left-1/3 border-l border-r border-b border-gray-300 p-2"> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-xs font-medium">Кабінет 2</span> | |
| <div class="w-2 h-2 rounded-full bg-green-500"></div> | |
| </div> | |
| </div> | |
| <div class="absolute w-1/3 h-1/3 top-0 right-0 border-l border-b border-gray-300 p-2"> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-xs font-medium">Кабінет 3</span> | |
| <div class="w-2 h-2 rounded-full bg-green-500"></div> | |
| </div> | |
| </div> | |
| <div class="absolute w-1/3 h-1/3 top-1/3 left-0 border-t border-r border-b border-gray-300 p-2"> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-xs font-medium">Кабінет 4</span> | |
| <div class="w-2 h-2 rounded-full bg-green-500"></div> | |
| </div> | |
| </div> | |
| <div class="absolute w-1/3 h-1/3 top-1/3 left-1/3 border border-gray-300 p-2"> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-xs font-medium">Кабінет 5</span> | |
| <div class="w-2 h-2 rounded-full bg-green-500"></div> | |
| </div> | |
| </div> | |
| <div class="absolute w-1/3 h-1/3 top-1/3 right-0 border-t border-l border-b border-gray-300 p-2"> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-xs font-medium">Кабінет 6</span> | |
| <div class="w-2 h-2 rounded-full bg-green-500"></div> | |
| </div> | |
| </div> | |
| <div class="absolute w-1/3 h-1/3 bottom-1/3 left-0 border-t border-r border-gray-300 p-2"> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-xs font-medium">Кухня</span> | |
| <div class="w-2 h-2 rounded-full bg-yellow-500"></div> | |
| </div> | |
| </div> | |
| <div class="absolute w-1/3 h-1/3 bottom-1/3 left-1/3 border-t border-l border-r border-gray-300 p-2"> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-xs font-medium">Переговорна</span> | |
| <div class="w-2 h-2 rounded-full bg-green-500"></div> | |
| </div> | |
| </div> | |
| <div class="absolute w-1/3 h-1/3 bottom-1/3 right-0 border-t border-l border-gray-300 p-2"> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-xs font-medium">Серверна</span> | |
| <div class="w-2 h-2 rounded-full bg-green-500"></div> | |
| </div> | |
| </div> | |
| <div class="absolute w-full h-1/3 bottom-0 left-0 border-t border-gray-300 p-2"> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-xs font-medium">Хол</span> | |
| <div class="w-2 h-2 rounded-full bg-green-500"></div> | |
| </div> | |
| </div> | |
| <!-- Вогнегасники --> | |
| <div class="absolute top-1/4 left-1/4"> | |
| <i class="fas fa-fire-extinguisher text-red-500"></i> | |
| </div> | |
| <div class="absolute top-1/4 right-1/4"> | |
| <i class="fas fa-fire-extinguisher text-red-500"></i> | |
| </div> | |
| <div class="absolute bottom-1/4 left-1/4"> | |
| <i class="fas fa-fire-extinguisher text-red-500"></i> | |
| </div> | |
| <div class="absolute bottom-1/4 right-1/4"> | |
| <i class="fas fa-fire-extinguisher text-red-500"></i> | |
| </div> | |
| <!-- Вихід --> | |
| <div class="absolute bottom-4 right-4 bg-gray-200 px-2 py-1 text-xs rounded"> | |
| Вихід | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 grid grid-cols-4 gap-2"> | |
| <div class="flex items-center"> | |
| <div class="w-2 h-2 rounded-full bg-green-500 mr-2"></div> | |
| <span class="text-xs">Норма</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-2 h-2 rounded-full bg-yellow-500 mr-2"></div> | |
| <span class="text-xs">Попередження</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-2 h-2 rounded-full bg-red-500 mr-2"></div> | |
| <span class="text-xs">Небезпека</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-2 h-2 rounded-full bg-gray-500 mr-2"></div> | |
| <span class="text-xs">Неактивний</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Останні події --> | |
| <div class="bg-white p-6 rounded-xl shadow-sm"> | |
| <h2 class="text-lg font-semibold mb-4 flex items-center"> | |
| <i class="fas fa-bell text-yellow-500 mr-2"></i> | |
| Останні події | |
| </h2> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="bg-green-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-check text-green-500"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Щоденна перевірка системи</p> | |
| <p class="text-xs text-gray-500">Сьогодні, 09:24</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-yellow-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-exclamation text-yellow-500"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Підвищена температура в кухні</p> | |
| <p class="text-xs text-gray-500">Сьогодні, 08:45</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-green-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-check text-green-500"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Тест сигналізації</p> | |
| <p class="text-xs text-gray-500">Вчора, 16:30</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-green-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-check text-green-500"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Оновлення програмного забезпечення</p> | |
| <p class="text-xs text-gray-500">Вчора, 15:12</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-info text-blue-500"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Ручний запуск тесту</p> | |
| <p class="text-xs text-gray-500">Вчора, 14:05</p> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full mt-4 text-sm text-blue-500 hover:text-blue-700 flex items-center justify-center"> | |
| <span>Переглянути всі події</span> | |
| <i class="fas fa-chevron-right ml-1 text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Аварійне сповіщення --> | |
| <div id="emergency-alert" class="fixed bottom-4 right-4 hidden"> | |
| <div class="bg-red-500 text-white p-4 rounded-lg shadow-xl max-w-md alert-pulse"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 pt-1"> | |
| <i class="fas fa-exclamation-triangle text-2xl flame-animation"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <h3 class="text-lg font-bold">УВАГА! ВИЯВЛЕНО ЗАДИМЛЕННЯ!</h3> | |
| <p class="mt-1" id="emergency-location">Локація: Кухня</p> | |
| <div class="mt-3 grid grid-cols-2 gap-2"> | |
| <button id="silence-btn" class="bg-white text-red-500 px-3 py-2 rounded font-medium text-sm flex items-center justify-center"> | |
| <i class="fas fa-volume-mute mr-1"></i> | |
| <span>Вимкнути сирену</span> | |
| </button> | |
| <button id="evacuate-btn" class="bg-white text-red-500 px-3 py-2 rounded font-medium text-sm flex items-center justify-center"> | |
| <i class="fas fa-door-open mr-1"></i> | |
| <span>Евакуювати</span> | |
| </button> | |
| <button id="false-alarm-btn" class="bg-white text-red-500 px-3 py-2 rounded font-medium text-sm col-span-2"> | |
| <i class="fas fa-times-circle mr-1"></i> | |
| <span>Помилкова тривога</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Оновлення часу останньої перевірки | |
| function updateLastCheckTime() { | |
| const now = new Date(); | |
| const timeStr = now.toLocaleTimeString('uk-UA', { hour: '2-digit', minute: '2-digit' }); | |
| document.getElementById('sidebar-last-check').textContent = `сьогодні, ${timeStr}`; | |
| } | |
| // Імітація тесту системи | |
| document.getElementById('quick-test').addEventListener('click', function() { | |
| // Змінюємо статус на бічній панелі | |
| const sidebarStatus = document.querySelector('.w-64 nav + div .w-3'); | |
| sidebarStatus.classList.remove('bg-green-500'); | |
| sidebarStatus.classList.add('bg-yellow-500'); | |
| // Додаємо подію в журнал | |
| const eventsContainer = document.querySelector('.bg-white.p-6.rounded-xl.shadow-sm .space-y-4'); | |
| const newEvent = document.createElement('div'); | |
| newEvent.className = 'flex items-start'; | |
| newEvent.innerHTML = ` | |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-vial text-blue-500"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Запущено швидкий тест системи</p> | |
| <p class="text-xs text-gray-500">Щойно</p> | |
| </div> | |
| `; | |
| eventsContainer.prepend(newEvent); | |
| // Оновлюємо час останньої перевірки | |
| updateLastCheckTime(); | |
| // Через 3 секунди повертаємо нормальний статус | |
| setTimeout(() => { | |
| sidebarStatus.classList.remove('bg-yellow-500'); | |
| sidebarStatus.classList.add('bg-green-500'); | |
| }, 3000); | |
| }); | |
| // Аварійний виклик | |
| document.getElementById('emergency-call').addEventListener('click', function() { | |
| document.getElementById('emergency-location').textContent = 'Ручний виклик пожежної служби'; | |
| document.getElementById('emergency-alert').classList.remove('hidden'); | |
| // Додаємо подію в журнал | |
| const eventsContainer = document.querySelector('.bg-white.p-6.rounded-xl.shadow-sm .space-y-4'); | |
| const newEvent = document.createElement('div'); | |
| newEvent.className = 'flex items-start'; | |
| newEvent.innerHTML = ` | |
| <div class="bg-red-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-phone-alt text-red-500"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Ручний виклик пожежної служби</p> | |
| <p class="text-xs text-gray-500">Щойно</p> | |
| </div> | |
| `; | |
| eventsContainer.prepend(newEvent); | |
| }); | |
| // Кнопки аварійного сповіщення | |
| document.getElementById('silence-btn').addEventListener('click', function() { | |
| document.getElementById('emergency-alert').classList.add('hidden'); | |
| // Додаємо подію в журнал | |
| const eventsContainer = document.querySelector('.bg-white.p-6.rounded-xl.shadow-sm .space-y-4'); | |
| const newEvent = document.createElement('div'); | |
| newEvent.className = 'flex items-start'; | |
| newEvent.innerHTML = ` | |
| <div class="bg-yellow-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-volume-mute text-yellow-500"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Сирену вимкнено вручну</p> | |
| <p class="text-xs text-gray-500">Щойно</p> | |
| </div> | |
| `; | |
| eventsContainer.prepend(newEvent); | |
| }); | |
| document.getElementById('evacuate-btn').addEventListener('click', function() { | |
| document.getElementById('emergency-alert').classList.add('hidden'); | |
| alert('УВАГА! ПОЧИНАЄТЬСЯ ЕВАКУАЦІЯ! ЗАЛИШІТЬ ПРИМІЩЕННЯ ЗА ВСТАНОВЛЕНИМИ ВИХОДАМИ!'); | |
| // Додаємо подію в журнал | |
| const eventsContainer = document.querySelector('.bg-white.p-6.rounded-xl.shadow-sm .space-y-4'); | |
| const newEvent = document.createElement('div'); | |
| newEvent.className = 'flex items-start'; | |
| newEvent.innerHTML = ` | |
| <div class="bg-red-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-door-open text-red-500"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Запущено процедуру евакуації</p> | |
| <p class="text-xs text-gray-500">Щойно</p> | |
| </div> | |
| `; | |
| eventsContainer.prepend(newEvent); | |
| }); | |
| document.getElementById('false-alarm-btn').addEventListener('click', function() { | |
| document.getElementById('emergency-alert').classList.add('hidden'); | |
| // Додаємо подію в журнал | |
| const eventsContainer = document.querySelector('.bg-white.p-6.rounded-xl.shadow-sm .space-y-4'); | |
| const newEvent = document.createElement('div'); | |
| newEvent.className = 'flex items-start'; | |
| newEvent.innerHTML = ` | |
| <div class="bg-green-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-check text-green-500"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Помилкову тривогу скасовано</p> | |
| <p class="text-xs text-gray-500">Щойно</p> | |
| </div> | |
| `; | |
| eventsContainer.prepend(newEvent); | |
| }); | |
| // Імітація випадкових подій | |
| function simulateRandomEvents() { | |
| if (Math.random() > 0.9) { // 10% шанс на подію | |
| const events = [ | |
| { type: 'warning', icon: 'exclamation', color: 'yellow', title: 'Підвищена температура в кухні', time: 'Щойно' }, | |
| { type: 'info', icon: 'info', color: 'blue', title: 'Автоматичне оновлення даних', time: 'Щойно' }, | |
| { type: 'normal', icon: 'check', color: 'green', title: 'Фонова перевірка датчиків', time: 'Щойно' } | |
| ]; | |
| const randomEvent = events[Math.floor(Math.random() * events.length)]; | |
| // Додаємо подію в журнал | |
| const eventsContainer = document.querySelector('.bg-white.p-6.rounded-xl.shadow-sm .space-y-4'); | |
| const newEvent = document.createElement('div'); | |
| newEvent.className = 'flex items-start'; | |
| newEvent.innerHTML = ` | |
| <div class="bg-${randomEvent.color}-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-${randomEvent.icon} text-${randomEvent.color}-500"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">${randomEvent.title}</p> | |
| <p class="text-xs text-gray-500">${randomEvent.time}</p> | |
| </div> | |
| `; | |
| eventsContainer.prepend(newEvent); | |
| // Якщо це попередження, оновлюємо відповідний датчик на карті | |
| if (randomEvent.type === 'warning') { | |
| const kitchenSensor = document.querySelector('.absolute.w-1\\/3.h-1\\/3.bottom-1\\/3.left-0 .w-2'); | |
| kitchenSensor.classList.remove('bg-green-500'); | |
| kitchenSensor.classList.add('bg-yellow-500'); | |
| setTimeout(() => { | |
| kitchenSensor.classList.remove('bg-yellow-500'); | |
| kitchenSensor.classList.add('bg-green-500'); | |
| }, 10000); | |
| } | |
| } | |
| } | |
| // Ініціалізація | |
| updateLastCheckTime(); | |
| // Запускаємо імітацію випадкових подій кожні 30 секунд | |
| setInterval(simulateRandomEvents, 30000); | |
| // Імітуємо перше оновлення через 5 секунд | |
| setTimeout(simulateRandomEvents, 5000); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=azdk94/firepro-azdk94" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |