LUMIERE

Comunidad Inteligente

<!-- MODAL CALCULADORA XVR --> <div id="modal-xvr" class="fixed inset-0 z-[6000] hidden flex items-center justify-center p-4"> <div class="absolute inset-0 modal-backdrop" onclick="cerrarModalXvr()"></div> <div class="bg-white rounded-2xl p-6 w-full max-w-sm relative z-10 shadow-2xl animate-[fadeIn_0.2s_ease-out]"> <div class="flex justify-between items-center mb-4"> <h3 class="text-lg font-bold text-gray-900 flex items-center gap-2"> <i data-lucide="clock" class="w-5 h-5 text-blue-600"></i> Calculadora XVR </h3> <button onclick="cerrarModalXvr()" class="p-1 text-gray-400 hover:bg-gray-100 rounded-full"><i data-lucide="x" class="w-5 h-5"></i></button> </div> <div class="space-y-4"> <div> <label class="block text-xs font-bold text-gray-500 uppercase mb-1">1. Hora en Pantalla (XVR)</label> <input type="datetime-local" id="xvr-h-actual" class="w-full border border-gray-300 rounded-lg p-2 text-sm outline-none focus:border-blue-500"> </div> <div> <div class="bg-gray-50 border border-gray-100 rounded-lg p-2 text-center text-xs text-gray-400" id="xvr-diff"> Diferencia: -- </div> </div> <div> <label class="block text-xs font-bold text-gray-500 uppercase mb-1">2. Hora Real del Evento</label> <input type="datetime-local" id="xvr-h-evento" class="w-full border border-gray-300 rounded-lg p-2 text-sm outline-none focus:border-blue-500"> </div> <div class="bg-green-50 border border-green-100 rounded-xl p-4 text-center"> <p class="text-xs text-green-600 font-bold uppercase mb-1">Hora a Buscar</p> <h2 class="text-2xl font-black text-green-700" id="xvr-result">--:--</h2> </div> </div> </div> </div> <!-- MODAL CALCULADORA DISCOS --> <div id="modal-calc-disk" class="fixed inset-0 z-[6000] hidden flex items-center justify-center p-2"> <div class="absolute inset-0 modal-backdrop" onclick="cerrarModalDisk()"></div> <div class="bg-white rounded-2xl w-full max-w-2xl relative z-10 shadow-2xl flex flex-col max-h-[90vh] animate-[fadeIn_0.2s_ease-out]"> <div class="p-4 border-b border-gray-100 flex justify-between items-center shrink-0"> <h3 class="text-lg font-bold text-gray-900 flex items-center gap-2"> <i data-lucide="hard-drive" class="w-5 h-5 text-indigo-600"></i> Calculadora CCTV </h3> <button onclick="cerrarModalDisk()" class="p-1 text-gray-400 hover:bg-gray-100 rounded-full"><i data-lucide="x" class="w-5 h-5"></i></button> </div> <div class="p-4 flex-1 overflow-y-auto"> <div class="flex gap-2 mb-3"> <button onclick="calcDiskAddRow()" class="bg-green-600 text-white px-3 py-1.5 rounded-lg text-xs font-bold shadow hover:bg-green-700 active:scale-95 transition flex items-center gap-1"> <i data-lucide="plus" class="w-3 h-3"></i> Agregar C��mara </button> <button onclick="calcDiskClear()" class="bg-white border border-gray-200 text-gray-600 px-3 py-1.5 rounded-lg text-xs font-bold shadow-sm hover:bg-gray-50 transition"> Limpiar </button> </div> <div class="border border-gray-200 rounded-xl overflow-hidden mb-4"> <table class="w-full text-xs text-left"> <thead class="bg-gray-50 text-gray-500 font-bold uppercase"> <tr> <th class="p-2">Cant</th> <th class="p-2">Codec</th> <th class="p-2">Res</th> <th class="p-2">FPS</th> <th class="p-2">Audio</th> <th class="p-2 w-10"></th> </tr> </thead> <tbody id="calc-disk-rows" class="divide-y divide-gray-100 bg-white"> <!-- Rows --> </tbody> </table> </div> <div class="grid grid-cols-2 gap-4 bg-gray-50 p-4 rounded-xl border border-gray-100"> <div> <label class="block text-xs font-bold text-gray-400 uppercase mb-1">Disco R��gido</label> <select id="calc-disk-cap" class="w-full border border-gray-200 rounded-lg p-2 text-sm outline-none bg-white" onchange="calcDiskRun()"> <option value="1000000">1 TB</option> <option value="2000000">2 TB</option> <option value="4000000">4 TB</option> <option value="6000000">6 TB</option> <option value="8000000">8 TB</option> <option value="10000000">10 TB</option> </select> </div> <div> <label class="block text-xs font-bold text-gray-400 uppercase mb-1">Horas/D��a</label> <input type="number" id="calc-disk-hours" value="24" class="w-full border border-gray-200 rounded-lg p-2 text-sm outline-none bg-white" onchange="calcDiskRun()"> </div> </div> </div> <div class="p-4 bg-indigo-50 border-t border-indigo-100 shrink-0 rounded-b-2xl flex justify-between items-center"> <span class="text-xs font-bold text-indigo-800 uppercase">Estimaci��n:</span> <span id="calc-disk-result" class="text-2xl font-black text-indigo-700">-- D��as</span> </div> </div> </div>