<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SmartEye — Configuration Caméra</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body { background: #0a0e1a; }
        .flux-1 { border-left: 3px solid #ef4444; }
        .flux-2 { border-left: 3px solid #3b82f6; }
        .badge-flux1 { background: #ef444422; color: #f87171; border: 1px solid #ef444444; }
        .badge-flux2 { background: #3b82f622; color: #60a5fa; border: 1px solid #3b82f644; }
    </style>
</head>
<body class="min-h-screen text-slate-200">

    <!-- HEADER -->
    <nav class="bg-slate-900/80 backdrop-blur border-b border-slate-800 px-6 py-4 sticky top-0 z-50">
        <div class="max-w-5xl mx-auto flex justify-between items-center">
            <div class="flex items-center gap-4">
                <div class="w-3 h-3 rounded-full bg-red-500"></div>
                <span class="font-bold text-xl tracking-wider text-white">CONFIG <span class="text-slate-500 text-sm font-normal">CAM&Eacute;RA</span></span>
            </div>
            <div class="flex gap-3">
                <a href="checklist.php" class="text-slate-400 hover:text-white text-sm border border-slate-700 px-3 py-2 rounded transition">Checklist</a>
                <a href="admin.php" class="text-slate-400 hover:text-white text-sm border border-slate-700 px-3 py-2 rounded transition">Admin</a>
            </div>
        </div>
    </nav>

    <div class="max-w-5xl mx-auto px-6 py-8 space-y-8">

        <!-- CONCEPT : LES 2 FLUX -->
        <div class="bg-slate-900 rounded-xl border border-slate-800 overflow-hidden">
            <div class="px-6 py-4 bg-slate-800/50 border-b border-slate-800">
                <h2 class="font-bold text-white text-lg">Comprendre les 2 flux vid&eacute;o</h2>
                <p class="text-slate-400 text-sm mt-1">Chaque cam&eacute;ra IP diffuse 2 flux RTSP simultan&eacute;s, utilis&eacute;s pour des besoins diff&eacute;rents.</p>
            </div>
            <div class="p-6 grid grid-cols-2 gap-6">
                <!-- FLUX 2 = Détection -->
                <div class="bg-slate-950 rounded-lg border border-blue-500/30 p-5 space-y-3">
                    <div class="flex items-center gap-3">
                        <span class="badge-flux2 px-3 py-1 rounded font-bold text-sm">Flux 2 — D&eacute;tection</span>
                        <span class="font-mono text-xs text-slate-500">/cam/realmonitor?channel=1&subtype=<span class="text-blue-400 font-bold">1</span></span>
                    </div>
                    <div class="text-sm text-slate-300 space-y-2">
                        <p><span class="text-blue-400 font-bold">Usage :</span> Flux analys&eacute; en continu par YOLO sur le Jetson pour d&eacute;tecter les chutes.</p>
                        <p><span class="text-blue-400 font-bold">Pourquoi basse r&eacute;solution ?</span> YOLO n'a pas besoin de HD pour d&eacute;tecter une personne. Un flux l&eacute;ger (800x448) permet :</p>
                        <ul class="list-disc list-inside text-slate-400 text-xs space-y-1 ml-2">
                            <li>Moins de charge GPU sur le Jetson</li>
                            <li>Analyse plus rapide (+ de FPS trait&eacute;s)</li>
                            <li>Plusieurs cam&eacute;ras en parall&egrave;le</li>
                        </ul>
                    </div>
                    <div class="bg-blue-950/30 rounded p-3 text-xs font-mono text-blue-300 flex items-center gap-2">
                        <span class="text-blue-500">CAM</span> &rarr; <span class="text-blue-400">Flux 2 (SD)</span> &rarr; <span class="text-slate-400">Jetson YOLO</span> &rarr; <span class="text-red-400">Chute ?</span>
                    </div>
                </div>

                <!-- FLUX 1 = Preuve HD -->
                <div class="bg-slate-950 rounded-lg border border-red-500/30 p-5 space-y-3">
                    <div class="flex items-center gap-3">
                        <span class="badge-flux1 px-3 py-1 rounded font-bold text-sm">Flux 1 — Preuve HD</span>
                        <span class="font-mono text-xs text-slate-500">/cam/realmonitor?channel=1&subtype=<span class="text-red-400 font-bold">0</span></span>
                    </div>
                    <div class="text-sm text-slate-300 space-y-2">
                        <p><span class="text-red-400 font-bold">Usage :</span> Quand YOLO d&eacute;tecte une chute, SmartEye capture une image <strong>HD</strong> depuis ce flux et l'envoie au serveur Lucas.</p>
                        <p><span class="text-red-400 font-bold">Pourquoi haute r&eacute;solution ?</span> L'image de preuve doit &ecirc;tre nette pour :</p>
                        <ul class="list-disc list-inside text-slate-400 text-xs space-y-1 ml-2">
                            <li>Analyse pr&eacute;cise par Gemini (position, visage, contexte)</li>
                            <li>Preuve visuelle pour la famille dans l'app AVA</li>
                            <li>Archivage en qualit&eacute;</li>
                        </ul>
                    </div>
                    <div class="bg-red-950/30 rounded p-3 text-xs font-mono text-red-300 flex items-center gap-2">
                        <span class="text-red-500">CHUTE</span> &rarr; <span class="text-red-400">Capture HD</span> &rarr; <span class="text-emerald-400">Lucas (Gemini)</span> &rarr; <span class="text-indigo-400">AVA</span>
                    </div>
                </div>
            </div>

            <!-- Schéma résumé -->
            <div class="px-6 pb-6">
                <div class="bg-slate-950 rounded-lg border border-slate-700 p-4">
                    <pre class="text-xs text-slate-400 font-mono leading-relaxed">
  CAM&Eacute;RA IP (ex: 192.168.1.196)
  &boxv;
  &boxvr;&HorizontalLine;&HorizontalLine; <span class="text-blue-400">Flux 2 (subtype=1)</span> &mdash; 800x448, 15fps, 300kbps &mdash;&rarr; <span class="text-amber-400">Jetson YOLO</span> (d&eacute;tection continue 24/7)
  &boxv;                                                            &boxv;
  &boxv;                                                    <span class="text-red-400">Chute d&eacute;tect&eacute;e !</span>
  &boxv;                                                            &boxv;
  &boxur;&HorizontalLine;&HorizontalLine; <span class="text-red-400">Flux 1 (subtype=0)</span> &mdash; 2880x1620, 20fps, 6Mbps &mdash;&rarr; <span class="text-amber-400">Capture screenshot HD</span>
                                                                    &boxv;
                                                           POST image &rarr; <span class="text-emerald-400">Lucas api.php</span>
                                                                    &boxv;
                                                           <span class="text-emerald-400">Gemini analyse</span> &rarr; <span class="text-indigo-400">Push AVA</span></pre>
                </div>
            </div>
        </div>

        <!-- PARAMÈTRES RECOMMANDÉS -->
        <div class="bg-slate-900 rounded-xl border border-slate-800 overflow-hidden">
            <div class="px-6 py-4 bg-slate-800/50 border-b border-slate-800">
                <h2 class="font-bold text-white text-lg">Param&egrave;tres recommand&eacute;s</h2>
                <p class="text-slate-400 text-sm mt-1">Configuration optimale pour le syst&egrave;me SmartEye. Accessible via l'interface web de la cam&eacute;ra.</p>
            </div>

            <!-- Paramètres généraux -->
            <div class="p-6 space-y-6">
                <div>
                    <h3 class="text-sm font-bold text-slate-300 uppercase tracking-wider mb-3">Param&egrave;tres g&eacute;n&eacute;raux</h3>
                    <div class="grid grid-cols-2 gap-4">
                        <div class="bg-slate-950 rounded border border-slate-700 p-4">
                            <table class="w-full text-sm">
                                <tr class="border-b border-slate-800">
                                    <td class="py-2 text-slate-500">Format vid&eacute;o</td>
                                    <td class="py-2 text-white font-bold text-right">50Hz</td>
                                </tr>
                                <tr>
                                    <td class="py-2 text-slate-500">Codage vid&eacute;o</td>
                                    <td class="py-2 text-white font-bold text-right">H.264 Main Profile</td>
                                </tr>
                            </table>
                        </div>
                        <div class="bg-slate-950 rounded border border-slate-700 p-4 flex items-center">
                            <p class="text-xs text-slate-500"><span class="text-amber-400 font-bold">H.264</span> est indispensable. Le H.265 n'est pas support&eacute; par tous les lecteurs RTSP. Le Main Profile offre le meilleur compromis qualit&eacute;/compatibilit&eacute;.</p>
                        </div>
                    </div>
                </div>

                <!-- FLUX 1 : HD -->
                <div>
                    <div class="flex items-center gap-3 mb-3">
                        <h3 class="text-sm font-bold text-red-400 uppercase tracking-wider">Premier flux — Preuve HD</h3>
                        <span class="badge-flux1 px-2 py-0.5 rounded text-xs font-bold">subtype=0</span>
                    </div>
                    <div class="bg-slate-950 rounded border border-red-500/20 overflow-hidden">
                        <table class="w-full text-sm">
                            <thead class="bg-red-950/30 text-xs text-red-300 uppercase">
                                <tr>
                                    <th class="px-4 py-2 text-left">Param&egrave;tre</th>
                                    <th class="px-4 py-2 text-left">Valeur</th>
                                    <th class="px-4 py-2 text-left">Explication</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-800">
                                <tr>
                                    <td class="px-4 py-3 text-slate-400">R&eacute;solution</td>
                                    <td class="px-4 py-3 text-white font-bold font-mono">2880 x 1620</td>
                                    <td class="px-4 py-3 text-xs text-slate-500">R&eacute;solution max de la cam&eacute;ra. Image nette pour Gemini et la famille.</td>
                                </tr>
                                <tr>
                                    <td class="px-4 py-3 text-slate-400">D&eacute;bit binaire</td>
                                    <td class="px-4 py-3 text-white font-bold font-mono">6144 kbps</td>
                                    <td class="px-4 py-3 text-xs text-slate-500">D&eacute;bit max. Qualit&eacute; optimale pour la capture de preuve.</td>
                                </tr>
                                <tr>
                                    <td class="px-4 py-3 text-slate-400">Fr&eacute;quence</td>
                                    <td class="px-4 py-3 text-white font-bold font-mono">20 fps</td>
                                    <td class="px-4 py-3 text-xs text-slate-500">Suffisant pour capturer un screenshot net. Pas besoin de 25fps.</td>
                                </tr>
                                <tr>
                                    <td class="px-4 py-3 text-slate-400">Intervalle image cl&eacute;</td>
                                    <td class="px-4 py-3 text-white font-bold font-mono">20</td>
                                    <td class="px-4 py-3 text-xs text-slate-500">1 image cl&eacute; par seconde (= intervalle / fps). Capture plus rapide.</td>
                                </tr>
                                <tr>
                                    <td class="px-4 py-3 text-slate-400">Contr&ocirc;le d&eacute;bit</td>
                                    <td class="px-4 py-3 text-white font-bold">CBR</td>
                                    <td class="px-4 py-3 text-xs text-slate-500">D&eacute;bit constant. Qualit&eacute; stable m&ecirc;me en mouvement.</td>
                                </tr>
                                <tr>
                                    <td class="px-4 py-3 text-slate-400">Qualit&eacute; image</td>
                                    <td class="px-4 py-3 text-white font-bold font-mono">1 <span class="text-xs text-slate-500 font-normal">(meilleure)</span></td>
                                    <td class="px-4 py-3 text-xs text-slate-500">Valeur la plus basse = qualit&eacute; max.</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- FLUX 2 : Détection -->
                <div>
                    <div class="flex items-center gap-3 mb-3">
                        <h3 class="text-sm font-bold text-blue-400 uppercase tracking-wider">Deuxi&egrave;me flux — D&eacute;tection YOLO</h3>
                        <span class="badge-flux2 px-2 py-0.5 rounded text-xs font-bold">subtype=1</span>
                    </div>
                    <div class="bg-slate-950 rounded border border-blue-500/20 overflow-hidden">
                        <table class="w-full text-sm">
                            <thead class="bg-blue-950/30 text-xs text-blue-300 uppercase">
                                <tr>
                                    <th class="px-4 py-2 text-left">Param&egrave;tre</th>
                                    <th class="px-4 py-2 text-left">Valeur</th>
                                    <th class="px-4 py-2 text-left">Explication</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-800">
                                <tr>
                                    <td class="px-4 py-3 text-slate-400">R&eacute;solution</td>
                                    <td class="px-4 py-3 text-white font-bold font-mono">800 x 448</td>
                                    <td class="px-4 py-3 text-xs text-slate-500">YOLO d&eacute;tecte tr&egrave;s bien en basse r&eacute;solution. &Eacute;conomise le GPU.</td>
                                </tr>
                                <tr>
                                    <td class="px-4 py-3 text-slate-400">D&eacute;bit binaire</td>
                                    <td class="px-4 py-3 text-white font-bold font-mono">300 kbps</td>
                                    <td class="px-4 py-3 text-xs text-slate-500">20x moins que le flux HD. Bande passante n&eacute;gligeable.</td>
                                </tr>
                                <tr>
                                    <td class="px-4 py-3 text-slate-400">Fr&eacute;quence</td>
                                    <td class="px-4 py-3 text-white font-bold font-mono">15 fps</td>
                                    <td class="px-4 py-3 text-xs text-slate-500">Suffisant pour d&eacute;tecter un mouvement. Plus = plus de charge GPU inutile.</td>
                                </tr>
                                <tr>
                                    <td class="px-4 py-3 text-slate-400">Intervalle image cl&eacute;</td>
                                    <td class="px-4 py-3 text-white font-bold font-mono">30</td>
                                    <td class="px-4 py-3 text-xs text-slate-500">1 image cl&eacute; toutes les 2 secondes. Acceptable pour la d&eacute;tection.</td>
                                </tr>
                                <tr>
                                    <td class="px-4 py-3 text-slate-400">Contr&ocirc;le d&eacute;bit</td>
                                    <td class="px-4 py-3 text-white font-bold">VBR</td>
                                    <td class="px-4 py-3 text-xs text-slate-500">D&eacute;bit variable. &Eacute;conomise la bande passante quand rien ne bouge.</td>
                                </tr>
                                <tr>
                                    <td class="px-4 py-3 text-slate-400">Qualit&eacute; image</td>
                                    <td class="px-4 py-3 text-white font-bold font-mono">1 <span class="text-xs text-slate-500 font-normal">(meilleure)</span></td>
                                    <td class="px-4 py-3 text-xs text-slate-500">On garde la meilleure qualit&eacute; m&ecirc;me en SD pour la d&eacute;tection.</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- URLs RTSP -->
        <div class="bg-slate-900 rounded-xl border border-slate-800 overflow-hidden">
            <div class="px-6 py-4 bg-slate-800/50 border-b border-slate-800">
                <h2 class="font-bold text-white text-lg">URLs RTSP</h2>
                <p class="text-slate-400 text-sm mt-1">Format des URLs pour cam&eacute;ras Dahua. Remplacer l'IP par celle de la cam&eacute;ra.</p>
            </div>
            <div class="p-6 space-y-4">
                <div class="bg-slate-950 rounded border border-red-500/20 p-4">
                    <div class="flex items-center gap-2 mb-2">
                        <span class="badge-flux1 px-2 py-0.5 rounded text-xs font-bold">Flux 1 — HD</span>
                        <span class="text-xs text-slate-500">Capture de preuve</span>
                    </div>
                    <code class="text-sm text-red-300 font-mono">rtsp://admin:password@192.168.1.196/cam/realmonitor?channel=1&subtype=0</code>
                </div>
                <div class="bg-slate-950 rounded border border-blue-500/20 p-4">
                    <div class="flex items-center gap-2 mb-2">
                        <span class="badge-flux2 px-2 py-0.5 rounded text-xs font-bold">Flux 2 — SD</span>
                        <span class="text-xs text-slate-500">D&eacute;tection YOLO 24/7</span>
                    </div>
                    <code class="text-sm text-blue-300 font-mono">rtsp://admin:password@192.168.1.196/cam/realmonitor?channel=1&subtype=1</code>
                </div>
                <div class="bg-amber-950/20 border border-amber-500/30 rounded p-3 text-xs text-amber-300">
                    <strong>Note :</strong> Le <span class="font-mono">channel</span> correspond au num&eacute;ro de canal de la cam&eacute;ra (1 pour une cam&eacute;ra mono-objectif). Le <span class="font-mono">subtype</span> s&eacute;lectionne le flux : <strong>0</strong> = principal (HD), <strong>1</strong> = secondaire (SD).
                </div>
            </div>
        </div>

        <!-- CHECKLIST RAPIDE -->
        <div class="bg-slate-900 rounded-xl border border-slate-800 overflow-hidden">
            <div class="px-6 py-4 bg-slate-800/50 border-b border-slate-800">
                <h2 class="font-bold text-white text-lg">Checklist configuration cam&eacute;ra</h2>
            </div>
            <div class="p-6">
                <ol class="space-y-3 text-sm text-slate-300">
                    <li class="flex gap-3"><span class="text-slate-600 font-bold w-6">1.</span> Acc&eacute;der &agrave; l'interface web de la cam&eacute;ra <span class="font-mono text-xs text-slate-500">(http://IP_CAM)</span></li>
                    <li class="flex gap-3"><span class="text-slate-600 font-bold w-6">2.</span> Aller dans <strong>Param&egrave;tres &rarr; Cam&eacute;ra &rarr; Vid&eacute;o</strong></li>
                    <li class="flex gap-3"><span class="text-slate-600 font-bold w-6">3.</span> Configurer le <span class="text-red-400 font-bold">Premier flux</span> (HD) selon le tableau ci-dessus</li>
                    <li class="flex gap-3"><span class="text-slate-600 font-bold w-6">4.</span> Configurer le <span class="text-blue-400 font-bold">Deuxi&egrave;me flux</span> (SD) selon le tableau ci-dessus</li>
                    <li class="flex gap-3"><span class="text-slate-600 font-bold w-6">5.</span> Cliquer <strong>Appliquer</strong></li>
                    <li class="flex gap-3"><span class="text-slate-600 font-bold w-6">6.</span> Tester les 2 flux RTSP avec VLC <span class="font-mono text-xs text-slate-500">(vlc rtsp://...)</span></li>
                    <li class="flex gap-3"><span class="text-slate-600 font-bold w-6">7.</span> V&eacute;rifier que SmartEye re&ccedil;oit le flux 2 et d&eacute;tecte correctement</li>
                </ol>
            </div>
        </div>

    </div>
</body>
</html>
