Shared Text

[{"role": "user", "content": "application html sous forme d'arborescence pour consulter et reporter l'\u00e9tat d'un r\u00e9seau d\u00e9tection incendie marque simplex compose de 1 TSW, 7 NDU et 25 4100es"}, {"role": "assistant", "content": "Voici une application HTML compl\u00e8te, autonome (Single Page Application) et interactive. Elle est con\u00e7ue pour \u00eatre l\u00e9g\u00e8re, rapide et facile \u00e0 modifier.\n\n### Fonctionnalit\u00e9s incluses :\n1. **Arborescence visuelle** : TSW -> NDU -> Modules 4100Ue.\n2. **\u00c9tat dynamique** : Cliquez sur les \u00e9l\u00e9ments pour changer leur \u00e9tat (Normal, Alerte, Panne, \u00c9teint).\n3. **Persistance locale** : L'\u00e9tat est sauvegard\u00e9 dans le navigateur (`localStorage`). Si vous fermez et rouvrez la page, vos modifications sont conserv\u00e9es.\n4. **Bouton R\u00e9initialiser** : Pour remettre tout le r\u00e9seau \u00e0 l'\u00e9tat \"Normal\".\n5. **Code couleur** : Vert (Normal), Rouge (Alerte), Jaune (Panne), Gris (\u00c9teint/D\u00e9connect\u00e9).\n\nCopiez le code ci-dessous et enregistrez-le dans un fichier nomm\u00e9 `reseau_incendie.html`, puis ouvrez-le avec votre navigateur.\n\n```html\n<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Moniteur R\u00e9seau Simplex</title>\n <style>\n :root {\n --bg-color: #f4f6f9;\n --panel-bg: #ffffff;\n --text-color: #333;\n --border-color: #ddd;\n \n /* Status Colors */\n --status-normal: #28a745; /* Green */\n --status-alarm: #dc3545; /* Red */\n --status-trouble: #ffc107; /* Yellow */\n --status-offline: #6c757d; /* Grey */\n --status-supervision: #17a2b8; /* Blue */\n }\n\n body {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n background-color: var(--bg-color);\n color: var(--text-color);\n margin: 0;\n padding: 20px;\n }\n\n .container {\n max-width: 1000px;\n margin: 0 auto;\n background: var(--panel-bg);\n padding: 20px;\n border-radius: 8px;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n }\n\n header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 20px;\n border-bottom: 2px solid var(--border-color);\n padding-bottom: 10px;\n }\n\n h1 { margin: 0; font-size: 1.5rem; }\n \n .legend {\n display: flex;\n gap: 15px;\n font-size: 0.85rem;\n }\n\n .legend-item { display: flex; align-items: center; gap: 5px; }\n .dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.1); }\n\n button {\n cursor: pointer;\n padding: 8px 15px;\n border: none;\n border-radius: 4px;\n font-weight: bold;\n transition: background 0.2s;\n }\n\n .btn-reset { background-color: var(--status-offline); color: white; }\n .btn-reset:hover { background-color: #5a6268; }\n\n /* Tree Structure Styles */\n ul.tree, ul.tree ul {\n list-style-type: none;\n margin: 0;\n padding: 0;\n }\n\n ul.tree ul {\n margin-left: 20px; /* Indentation for children */\n border-left: 2px solid var(--border-color);\n }\n\n ul.tree li {\n margin: 5px 0;\n position: relative;\n }\n\n /* Node Card Styling */\n .node-card {\n display: inline-block;\n padding: 8px 12px;\n background: white;\n border: 1px solid var(--border-color);\n border-radius: 4px;\n min-width: 150px;\n position: relative;\n transition: all 0.2s;\n cursor: pointer;\n }\n\n .node-card:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n }\n\n /* Status Indicators on the left of the card */\n .node-card::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 5px;\n border-radius: 4px 0 0 4px;\n }\n\n /* Specific Styles per Level */\n .level-tsw .node-card { background-color: #e8f4fd; border-color: #b8daff; font-weight: bold; }\n .level-ndu .node-card { background-color: #fff3cd; border-color: #ffeeba; font-weight: bold; }\n .level-4100 .node-card { background-color: #f8f9fa; }\n\n /* Status Classes */\n .status-normal::before { background-color: var(--status-normal); }\n .status-normal .node-card { border-left: 5px solid var(--status-normal); }\n \n .status-alarm::before { background-color: var(--status-alarm); }\n .status-alarm .node-card { background-color: #ffebee; border-color: #ffcdd2; color: #b71c1c; }\n \n .status-trouble::before { background-color: var(--status-trouble); }\n .status-trouble .node-card { background-color: #fffde7; border-color: #fff9c4; }\n \n .status-offline::before { background-color: var(--status-offline); }\n .status-offline .node-card { background-color: #eceff1; color: #90a4ae; text-decoration: line-through; }\n\n .status-supervision::before { background-color: var(--status-supervision); }\n .status-supervision .node-card { background-color: #e0f7fa; }\n\n /* Dropdown for editing status */\n select.status-select {\n margin-top: 5px;\n font-size: 0.8rem;\n padding: 2px;\n width: 100%;\n }\n\n .node-details {\n font-size: 0.9rem;\n }\n \n .node-label {\n font-weight: 600;\n display: block;\n margin-bottom: 2px;\n }\n\n .node-id {\n font-size: 0.8rem;\n color: #666;\n }\n\n /* Responsive */\n @media (max-width: 600px) {\n .legend { display: none; }\n ul.tree ul { margin-left: 10px; }\n }\n </style>\n</head>\n<body>\n\n<div class=\"container\">\n <header>\n <div>\n <h1>Moniteur R\u00e9seau Simplex</h1>\n <small>T-Signals | NDU | 4100Ue</small>\n </div>\n <div class=\"legend\">\n <div class=\"legend-item\"><div class=\"dot\" style=\"background:var(--status-normal)\"></div> Normal</div>\n <div class=\"legend-item\"><div class=\"dot\" style=\"background:var(--status-alarm)\"></div> Alerte</div>\n <div class=\"legend-item\"><div class=\"dot\" style=\"background:var(--status-trouble)\"></div> Panne</div>\n <div class=\"legend-item\"><div class=\"dot\" style=\"background:var(--status-offline)\"></div> \u00c9teint</div>\n </div>\n <button class=\"btn-reset\" onclick=\"resetNetwork()\">R\u00e9initialiser Tout</button>\n </header>\n\n <div id=\"network-tree\" class=\"tree\">\n <!-- Tree will be generated here by JS -->\n </div>\n \n <div style=\"margin-top: 20px; font-size: 0.8rem; color: #666; text-align: right;\">\n * Cliquez sur un \u00e9l\u00e9ment pour changer son \u00e9tat. Les donn\u00e9es sont sauvegard\u00e9es localement.\n </", "model": "Qwen/Qwen3-30B-A3B-Instruct"}, {"role": "user", "content": "Continue exactly where you left off. Do not repeat what you already wrote, do not restart, and do not summarise - resume from the last character."}, {"role": "assistant", "content": "t: 20px; font-size: 0.8rem; color: #666; text-align: right;\">\n * Cliquez sur un \u00e9l\u00e9ment pour changer son \u00e9tat. Les donn\u00e9es sont sauvegard\u00e9es localement.\n </div>\n</div>\n\n<script>\n // Configuration\n const CONFIG = {\n nduCount: 7,\n devicesPerNdu: 25,\n statuses: [\n { value: 'normal', label: 'Normal' },\n { value: 'alarm', label: 'ALERTE' },\n { value: 'trouble', label: 'Panne' },\n { value: 'supervision', label: 'Supervision' },\n { value: 'offline', label: '\u00c9teint' }\n ]\n };\n\n // State Management\n let networkState = {};\n\n // Initialize\n function init() {\n loadState();\n renderTree();\n }\n\n function loadState() {\n const saved = localStorage.getItem('simplex_network_state');\n if (saved) {\n networkState = JSON.parse(saved);\n } else {\n // Initialize default state\n for (let i = 1; i <= CONFIG.nduCount; i++) {\n networkState[`NDU${i}`] = { status: 'normal' };\n for (let j = 1; j <= CONFIG.devicesPerNdu; j++) {\n networkState[`NDU${i}_DEV${j}`] = { status: 'normal' };\n }\n }\n saveState();\n }\n }\n\n function saveState() {\n localStorage.setItem('simplex_network_state', JSON.stringify(networkState));\n }\n\n function setStatus(id, newStatus) {\n if (networkState[id]) {\n networkState[id].status = newStatus;\n saveState();\n renderTree(); // Re-render to update colors\n }\n }\n\n function resetNetwork() {\n if(confirm(\"Voulez-vous vraiment remettre tout le r\u00e9seau \u00e0 l'\u00e9tat Normal ?\")) {\n for (let key in networkState) {\n networkState[key].status = 'normal';\n }\n saveState();\n renderTree();\n }\n }\n\n function getStatusClass(status) {\n return `status-${status}`;\n }\n\n function createStatusDropdown(id, currentStatus) {\n let options = '';\n CONFIG.statuses.forEach(s => {\n const selected = s.value === currentStatus ? 'selected' : '';\n options += `<option value=\"${s.value}\" ${selected}>${s.label}</option>`;\n });\n return `<select class=\"status-select\" onchange=\"setStatus('${id}', this.value)\">\n ${options}\n </select>`;\n }\n\n function renderTree() {\n const container = document.getElementById('network-tree');\n let html = '<ul>';\n\n // Level 1: TSW\n html += '<li class=\"level-tsw\">';\n html += `<div class=\"node-card ${getStatusClass(networkState['TSW']?.status || 'normal')}\">\n <span class=\"node-label\">Contr\u00f4leur Principal (TSW)</span>\n <span class=\"node-id\">ID: TSW-001</span>\n ${createStatusDropdown('TSW', networkState['TSW']?.status || 'normal')}\n </div>`;\n \n // Level 2: NDUs\n for (let i = 1; i <= CONFIG.nduCount; i++) {\n const nduKey = `NDU${i}`;\n const nduStatus = networkState[nduKey]?.status || 'normal';\n \n html += `<ul>\n <li class=\"level-ndu\">\n <div class=\"node-card ${getStatusClass(nduStatus)}\">\n <span class=\"node-label\">NDU ${i}</span>\n <span class=\"node-id\">ID: NDU-${String(i).padStart(3, '0')}</span>\n ${createStatusDropdown(nduKey, nduStatus)}\n </div>`;\n \n // Level 3: 4100Ue Devices\n html += '<ul>';\n for (let j = 1; j <= CONFIG.devicesPerNdu; j++) {\n const devKey = `${nduKey}_DEV${j}`;\n const devStatus = networkState[devKey]?.status || 'normal';\n \n html += `<li class=\"level-4100\">\n <div class=\"node-card ${getStatusClass(devStatus)}\">\n <span class=\"node-label\">Module 4100Ue</span>\n <span class=\"node-id\">ID: ${nduKey}-DEV${j}</span>\n ${createStatusDropdown(devKey, devStatus)}\n </div>\n </li>`;\n }\n html += '</ul>'; // Close 4100Ue list\n html += '</li>'; // Close NDU li\n html += '</ul>'; // Close NDU ul\n }\n\n html += '</li>'; // Close TSW li\n html += '</ul>'; // Close main ul\n\n container.innerHTML = html;\n }\n\n // Start the app\n init();\n</script>\n\n</body>\n</html>\n```", "model": "Qwen/Qwen3-30B-A3B-Instruct"}]