Spaces:
Running
Running
| <html lang="vi"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Cấu Hình Camera IP - ONVIF</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> | |
| .hierarchy-item { | |
| transition: all 0.3s ease; | |
| } | |
| .hierarchy-item:hover { | |
| transform: translateX(5px); | |
| } | |
| .config-card { | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
| transition: all 0.3s ease; | |
| } | |
| .config-card:hover { | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); | |
| } | |
| .slider-thumb::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| background: #3b82f6; | |
| cursor: pointer; | |
| } | |
| .preview-box { | |
| background: linear-gradient(45deg, #f3f4f6 25%, transparent 25%) -50px 0, | |
| linear-gradient(-45deg, #f3f4f6 25%, transparent 25%) -50px 0, | |
| linear-gradient(45deg, transparent 75%, #f3f4f6 75%), | |
| linear-gradient(-45deg, transparent 75%, #f3f4f6 75%); | |
| background-size: 100px 100px; | |
| } | |
| .tab-active { | |
| border-bottom: 3px solid #3b82f6; | |
| color: #3b82f6; | |
| font-weight: 600; | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h1 class="text-3xl font-bold text-gray-800"> | |
| <i class="fas fa-camera mr-2 text-blue-500"></i> Cấu Hình Camera IP | |
| </h1> | |
| <div class="flex space-x-4"> | |
| <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg flex items-center"> | |
| <i class="fas fa-save mr-2"></i> Lưu Cấu Hình | |
| </button> | |
| <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg flex items-center"> | |
| <i class="fas fa-redo mr-2"></i> Mặc Định | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="grid grid-cols-1 lg:grid-cols-4 gap-6"> | |
| <!-- Left Sidebar - Hierarchy --> | |
| <div class="lg:col-span-1 bg-white rounded-xl shadow p-4"> | |
| <h2 class="text-xl font-semibold mb-4 text-gray-700"> | |
| <i class="fas fa-sitemap mr-2 text-blue-500"></i> Phân Cấp Thiết Bị | |
| </h2> | |
| <div class="mb-4"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="font-medium">Chế Độ Cấu Hình:</span> | |
| <select class="border rounded px-2 py-1 text-sm"> | |
| <option>Kế Thừa Từ Cấp Trên</option> | |
| <option>Áp Dụng Cho Cấp Này</option> | |
| <option>Tùy Chỉnh Thiết Bị</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="space-y-2"> | |
| <div class="hierarchy-item bg-blue-50 p-3 rounded-lg cursor-pointer flex items-center"> | |
| <i class="fas fa-building mr-2 text-blue-500"></i> | |
| <span class="font-medium">Tòa Nhà A</span> | |
| <i class="fas fa-chevron-down ml-auto text-gray-500"></i> | |
| </div> | |
| <div class="ml-4 space-y-2"> | |
| <div class="hierarchy-item bg-blue-50 p-3 rounded-lg cursor-pointer flex items-center"> | |
| <i class="fas fa-layer-group mr-2 text-blue-400"></i> | |
| <span>Tầng 1</span> | |
| <i class="fas fa-chevron-down ml-auto text-gray-500"></i> | |
| </div> | |
| <div class="ml-4 space-y-2"> | |
| <div class="hierarchy-item bg-blue-50 p-3 rounded-lg cursor-pointer flex items-center"> | |
| <i class="fas fa-door-open mr-2 text-blue-300"></i> | |
| <span>Khu Vực Lễ Tân</span> | |
| <i class="fas fa-chevron-down ml-auto text-gray-500"></i> | |
| </div> | |
| <div class="ml-4 space-y-2"> | |
| <div class="hierarchy-item bg-blue-100 p-3 rounded-lg cursor-pointer flex items-center border border-blue-300"> | |
| <i class="fas fa-video mr-2 text-blue-600"></i> | |
| <span class="font-medium">Camera 01</span> | |
| <span class="ml-auto bg-blue-500 text-white text-xs px-2 py-1 rounded-full">ONVIF</span> | |
| </div> | |
| <div class="hierarchy-item bg-gray-100 p-3 rounded-lg cursor-pointer flex items-center"> | |
| <i class="fas fa-video mr-2 text-gray-600"></i> | |
| <span>Camera 02</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hierarchy-item bg-gray-100 p-3 rounded-lg cursor-pointer flex items-center"> | |
| <i class="fas fa-building mr-2 text-gray-500"></i> | |
| <span>Tòa Nhà B</span> | |
| <i class="fas fa-chevron-right ml-auto text-gray-500"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Content - Configuration --> | |
| <div class="lg:col-span-3 space-y-6"> | |
| <!-- Device Info --> | |
| <div class="bg-white rounded-xl shadow p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-xl font-semibold text-gray-800"> | |
| <i class="fas fa-info-circle mr-2 text-blue-500"></i> Thông Tin Thiết Bị | |
| </h2> | |
| <span class="bg-green-100 text-green-800 text-sm px-3 py-1 rounded-full"> | |
| <i class="fas fa-check-circle mr-1"></i> ONVIF Profile T | |
| </span> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Tên Thiết Bị</label> | |
| <input type="text" value="Camera 01 - Lễ Tân" class="w-full border rounded px-3 py-2"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Model</label> | |
| <input type="text" value="Hikvision DS-2CD2342WD-I" class="w-full border rounded px-3 py-2" readonly> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Địa Chỉ IP</label> | |
| <input type="text" value="192.168.1.100" class="w-full border rounded px-3 py-2" readonly> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Configuration Tabs --> | |
| <div class="bg-white rounded-xl shadow overflow-hidden"> | |
| <div class="border-b border-gray-200"> | |
| <nav class="flex -mb-px"> | |
| <button data-tab="video" class="mr-8 py-4 px-1 text-center border-b-2 font-medium text-sm tab-active text-blue-500 border-blue-500"> | |
| <i class="fas fa-video mr-2"></i> Cấu Hình Video | |
| </button> | |
| <button data-tab="audio" class="mr-8 py-4 px-1 text-center border-b-2 font-medium text-sm text-gray-500 hover:text-gray-700 border-transparent"> | |
| <i class="fas fa-volume-up mr-2"></i> Cấu Hình Âm Thanh | |
| </button> | |
| <button data-tab="image" class="mr-8 py-4 px-1 text-center border-b-2 font-medium text-sm text-gray-500 hover:text-gray-700 border-transparent"> | |
| <i class="fas fa-sliders-h mr-2"></i> Cấu Hình Hình Ảnh | |
| </button> | |
| <button data-tab="stream" class="py-4 px-1 text-center border-b-2 font-medium text-sm text-gray-500 hover:text-gray-700 border-transparent"> | |
| <i class="fas fa-network-wired mr-2"></i> Cấu Hình Stream | |
| </button> | |
| </nav> | |
| </div> | |
| <!-- Video Configuration Content --> | |
| <div id="video-tab" class="tab-content active p-6"> | |
| <!-- Stream Profile Selection --> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Profile Video</label> | |
| <div class="flex space-x-4"> | |
| <button class="px-4 py-2 bg-blue-500 text-white rounded-lg">Main Stream</button> | |
| <button class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300">Sub Stream</button> | |
| <button class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300">Third Stream</button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Video Settings --> | |
| <div class="lg:col-span-2 space-y-6"> | |
| <!-- Encoding --> | |
| <div class="config-card bg-white p-4 rounded-lg border border-gray-200"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Chuẩn Mã Hóa</label> | |
| <select class="w-full border rounded px-3 py-2"> | |
| <option>H.264</option> | |
| <option>H.265</option> | |
| <option>MJPEG</option> | |
| </select> | |
| <div class="mt-2 text-xs text-gray-500"> | |
| <i class="fas fa-info-circle mr-1"></i> H.265 tiết kiệm 50% băng thông so với H.264 | |
| </div> | |
| </div> | |
| <!-- Resolution & FPS --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="config-card bg-white p-4 rounded-lg border border-gray-200"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Độ Phân Giải</label> | |
| <select class="w-full border rounded px-3 py-2"> | |
| <option>3840x2160 (4K)</option> | |
| <option>2560x1440 (2K)</option> | |
| <option selected>1920x1080 (1080p)</option> | |
| <option>1280x720 (720p)</option> | |
| <option>640x480 (VGA)</option> | |
| </select> | |
| </div> | |
| <div class="config-card bg-white p-4 rounded-lg border border-gray-200"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">FPS (Frame Rate)</label> | |
| <select class="w-full border rounded px-3 py-2"> | |
| <option>60</option> | |
| <option>30</option> | |
| <option selected>25</option> | |
| <option>20</option> | |
| <option>15</option> | |
| <option>10</option> | |
| </select> | |
| </div> | |
| </div> | |
| <!-- Quality & Bitrate --> | |
| <div class="config-card bg-white p-4 rounded-lg border border-gray-200"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Chất Lượng Video (1-10)</label> | |
| <input type="range" min="1" max="10" value="7" class="w-full slider-thumb"> | |
| <div class="flex justify-between text-xs text-gray-500 mt-1"> | |
| <span>Thấp</span> | |
| <span>Trung Bình</span> | |
| <span>Cao</span> | |
| </div> | |
| </div> | |
| <div class="config-card bg-white p-4 rounded-lg border border-gray-200"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Bitrate (Kbps)</label> | |
| <div class="flex items-center space-x-4"> | |
| <input type="range" min="512" max="8192" value="2048" step="128" class="flex-1 slider-thumb"> | |
| <input type="number" value="2048" class="w-20 border rounded px-2 py-1 text-sm"> | |
| </div> | |
| <div class="mt-2 text-xs text-gray-500"> | |
| <i class="fas fa-info-circle mr-1"></i> Bitrate hiện tại: ~2Mbps - Dự kiến lưu trữ: 7.2GB/ngày | |
| </div> | |
| </div> | |
| <!-- GOP & Profile --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="config-card bg-white p-4 rounded-lg border border-gray-200"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">GOP Length</label> | |
| <select class="w-full border rounded px-3 py-2"> | |
| <option>10</option> | |
| <option>25</option> | |
| <option selected>30</option> | |
| <option>50</option> | |
| <option>100</option> | |
| </select> | |
| </div> | |
| <div class="config-card bg-white p-4 rounded-lg border border-gray-200"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Profile</label> | |
| <select class="w-full border rounded px-3 py-2"> | |
| <option>Baseline</option> | |
| <option selected>Main</option> | |
| <option>High</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Preview & Advanced --> | |
| <div class="space-y-6"> | |
| <!-- Preview --> | |
| <div class="config-card bg-white p-4 rounded-lg border border-gray-200"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Xem Trước</label> | |
| <div class="preview-box w-full h-48 rounded-lg bg-gray-100 flex items-center justify-center"> | |
| <div class="text-center"> | |
| <i class="fas fa-video text-gray-400 text-3xl mb-2"></i> | |
| <p class="text-gray-500 text-sm">Xem trước video</p> | |
| </div> | |
| </div> | |
| <button class="mt-3 w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded-lg text-sm"> | |
| <i class="fas fa-sync-alt mr-2"></i> Làm Mới Xem Trước | |
| </button> | |
| </div> | |
| <!-- Advanced Settings --> | |
| <div class="config-card bg-white p-4 rounded-lg border border-gray-200"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Cài Đặt Nâng Cao</label> | |
| <div class="flex items-center justify-between mb-3"> | |
| <span class="text-sm">Multicast</span> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer"> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-500"></div> | |
| </label> | |
| </div> | |
| <div class="flex items-center justify-between mb-3"> | |
| <span class="text-sm">Bộ Lọc Hồng Ngoại</span> | |
| <select class="border rounded px-2 py-1 text-sm"> | |
| <option>Auto</option> | |
| <option>On</option> | |
| <option>Off</option> | |
| </select> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm">Session Timeout</span> | |
| <input type="text" value="00:10:00" class="w-20 border rounded px-2 py-1 text-sm"> | |
| </div> | |
| </div> | |
| <!-- Recommendations --> | |
| <div class="config-card bg-blue-50 p-4 rounded-lg border border-blue-200"> | |
| <h3 class="font-medium text-blue-800 mb-2"> | |
| <i class="fas fa-lightbulb mr-2"></i> Gợi Ý Tối Ưu | |
| </h3> | |
| <p class="text-sm text-blue-700"> | |
| Dựa trên băng thông hiện tại, hệ thống đề xuất giảm FPS xuống 20 để tiết kiệm lưu trữ. | |
| </p> | |
| <button class="mt-3 w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded-lg text-sm"> | |
| <i class="fas fa-magic mr-2"></i> Áp Dụng Tối Ưu | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Audio Configuration Content --> | |
| <div id="audio-tab" class="tab-content p-6"> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <div class="lg:col-span-2 space-y-6"> | |
| <!-- Audio Settings --> | |
| <div class="config-card bg-white p-4 rounded-lg border border-gray-200"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <span class="text-sm font-medium">Kích Hoạt Âm Thanh</span> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-500"></div> | |
| </label> | |
| </div> | |
| <div class="config-card bg-white p-4 rounded-lg border border-gray-200 mt-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Chuẩn Mã Hóa Âm Thanh</label> | |
| <select class="w-full border rounded px-3 py-2"> | |
| <option>G.711</option> | |
| <option>AAC</option> | |
| <option>G.726</option> | |
| <option>PCM</option> | |
| </select> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4"> | |
| <div class="config-card bg-white p-4 rounded-lg border border-gray-200"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Bitrate Âm Thanh</label> | |
| <select class="w-full border rounded px-3 py-2"> | |
| <option>64 Kbps</option> | |
| <option>128 Kbps</option> | |
| <option selected>256 Kbps</option> | |
| <option>512 Kbps</option> | |
| </select> | |
| </div> | |
| <div class="config-card bg-white p-4 rounded-lg border border-gray-200"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Tần Số Mẫu</label> | |
| <select class="w-full border rounded px-3 py-2"> | |
| <option>8 kHz</option> | |
| <option>16 kHz</option> | |
| <option selected>44.1 kHz</option> | |
| <option>48 kHz</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="config-card bg-white p-4 rounded-lg border border-gray-200 mt-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Độ Nhạy Micro</label> | |
| <input type="range" min="0" max="100" value="70" class="w-full slider-thumb"> | |
| <div class="flex justify-between text-xs text-gray-500 mt-1"> | |
| <span>Thấp</span> | |
| <span>Trung Bình</span> | |
| <span>Cao</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="space-y-6"> | |
| <!-- Audio Preview --> | |
| <div class="config-card bg-white p-4 rounded-lg border border-gray-200"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Kiểm Tra Âm Thanh</label> | |
| <div class="preview-box w-full h-48 rounded-lg bg-gray-100 flex items-center justify-center"> | |
| <div class="text-center"> | |
| <i class="fas fa-microphone text-gray-400 text-3xl mb-2"></i> | |
| <p class="text-gray-500 text-sm">Âm thanh sẽ hiển thị tại đây</p> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5 mt-4"> | |
| <div class="bg-blue-500 h-2.5 rounded-full" style="width: 45%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="mt-3 w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded-lg text-sm"> | |
| <i class="fas fa-microphone-alt mr-2"></i> Kiểm Tra Micro | |
| </button> | |
| </div> | |
| <!-- Audio Advanced --> | |
| <div class="config-card bg-white p-4 rounded-lg border border-gray-200"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Cài Đặt Nâng Cao</label> | |
| <div class="flex items-center justify-between mb-3"> | |
| <span class="text-sm">Giảm Tiếng Ồn</span> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-500"></div> | |
| </label> | |
| </div> | |
| <div class="flex items-center justify-between mb-3"> | |
| <span class="text-sm">Tự Động Điều Chỉnh Âm Lượng</span> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer"> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-500"></div> | |
| </label> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm">Độ Trễ Âm Thanh</span> | |
| <input type="text" value="200ms" class="w-20 border rounded px-2 py-1 text-sm"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Image Configuration Content --> | |
| <div id="image-tab" class="tab-content p-6"> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <div class="lg:col-span-2 space-y-6"> | |
| <!-- Image Settings --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="config-card bg-white p-4 rounded-lg border border-gray-200"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Độ Sáng</label> | |
| <input type="range" min="0" max="100" value="50" class="w-full slider-thumb"> | |
| </div> | |
| <div class="config-card bg-white p-4 rounded-lg border border-gray-200"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Độ Tương Phản</label> | |
| <input type="range" min="0" max="100" value="50" class="w-full slider-thumb"> | |
| </div> | |
| <div class="config-card bg-white p-4 rounded-lg border border-gray-200"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Độ Bão Hòa Màu</label> | |
| <input type="range" min="0" max="100" value="50" class="w-full slider-thumb"> | |
| </div> | |
| <div class="config-card bg-white p-4 rounded-lg border border-gray-200"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Độ Sắc Nét</label> | |
| <input type="range" min="0" max="100" value="50" class="w-full slider-thumb"> | |
| </div> | |
| </div> | |
| <!-- White Balance --> | |
| <div class="config-card bg-white p-4 rounded-lg border border-gray-200"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Cân Bằng Trắng</label> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-3 mt-3"> | |
| <button class="px-3 py-2 bg-blue-500 text-white rounded-lg text-sm">Auto</button> | |
| <button class="px-3 py-2 bg-gray-200 text-gray-700 rounded-lg text-sm">Sunny</button> | |
| <button class="px-3 py-2 bg-gray-200 text-gray-700 rounded-lg text-sm">Cloudy</button> | |
| <button class="px-3 py-2 bg-gray-200 text-gray-700 rounded-lg text-sm">Fluorescent</button> | |
| </div> | |
| </div> | |
| <!-- Exposure Settings --> | |
| <div class="config-card bg-white p-4 rounded-lg border border-gray-200"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Phơi Sáng</label> | |
| <div class="flex items-center justify-between mb-3"> | |
| <span class="text-sm">Chế Độ</span> | |
| <select class="border rounded px-2 py-1 text-sm"> | |
| <option selected>Auto</option> | |
| <option>Manual</option> | |
| </select> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-3"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Thời Gian Phơi Sáng</label> | |
| <select class="w-full border rounded px-3 py-2 text-sm"> | |
| <option>1/30s</option> | |
| <option>1/60s</option> | |
| <option>1/120s</option> | |
| <option>1/250s</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Độ Nhạy Sáng (Gain)</label> | |
| <input type="range" min="0" max="100" value="50" class="w-full slider-thumb"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="space-y-6"> | |
| <!-- Image Preview --> | |
| <div class="config-card bg-white p-4 rounded-lg border border-gray-200"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Xem Trước Hình Ảnh</label> | |
| <div class="preview-box w-full h-64 rounded-lg bg-gray-100 flex items-center justify-center"> | |
| <div class="text-center"> | |
| <i class="fas fa-image text-gray-400 text-3xl mb-2"></i> | |
| <p class="text-gray-500 text-sm">Hình ảnh sẽ hiển thị tại đây</p> | |
| </div> | |
| </div> | |
| <button class="mt-3 w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded-lg text-sm"> | |
| <i class="fas fa-sync-alt mr-2"></i> Làm Mới Xem Trước | |
| </button> | |
| </div> | |
| <!-- Image Presets --> | |
| <div class="config-card bg-white p-4 rounded-lg border border-gray-200"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Cài Đặt Trước</label> | |
| <select class="w-full border rounded px-3 py-2 mb-3"> | |
| <option selected>Chọn cài đặt trước...</option> | |
| <option>Trong Nhà</option> | |
| <option>Ngoài Trời</option> | |
| <option>Ban Đêm</option> | |
| <option>Ánh Sáng Yếu</option> | |
| </select> | |
| <button class="w-full bg-gray-200 hover:bg-gray-300 text-gray-800 py-2 rounded-lg text-sm"> | |
| <i class="fas fa-save mr-2"></i> Lưu Cài Đặt Hiện Tại | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Stream Configuration Content --> | |
| <div id="stream-tab" class="tab-content p-6"> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <div class="lg:col-span-2 space-y-6"> | |
| <!-- Stream Type --> | |
| <div class="config-card bg-white p-4 rounded-lg border border-gray-200"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Loại Stream</label> | |
| <div class="flex space-x-4"> | |
| <button class="px-4 py-2 bg-blue-500 text-white rounded-lg">Unicast</button> | |
| <button class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300">Multicast</button> | |
| </div> | |
| </div> | |
| <!-- Protocol Settings --> | |
| <div class="config-card bg-white p-4 rounded-lg border border-gray-200"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Giao Thức</label> | |
| <select class="w-full border rounded px-3 py-2"> | |
| <option selected>RTSP</option> | |
| <option>RTP-UDP</option> | |
| <option>RTP-TCP</option> | |
| <option>HTTP</option> | |
| </select> | |
| </div> | |
| <!-- Port Settings --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="config-card bg-white p-4 rounded-lg border border-gray-200"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Cổng RTSP</label> | |
| <input type="number" value="554" class="w-full border rounded px-3 py-2"> | |
| </div> | |
| <div class="config-card bg-white p-4 rounded-lg border border-gray-200"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Cổng HTTP</label> | |
| <input type="number" value="80" class="w-full border rounded px-3 py-2"> | |
| </div> | |
| </div> | |
| <!-- Multicast Settings --> | |
| <div class="config-card bg-white p-4 rounded-lg border border-gray-200"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Cài Đặt Multicast</label> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-3"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Địa Chỉ IP</label> | |
| <input type="text" value="239.255.0.1" class="w-full border rounded px-3 py-2"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Cổng</label> | |
| <input type="number" value="5004" class="w-full border rounded px-3 py-2"> | |
| </div> | |
| </div> | |
| <div class="mt-3"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">TTL</label> | |
| <input type="range" min="1" max="255" value="32" class="w-full slider-thumb"> | |
| </div> | |
| </div> | |
| <!-- Authentication --> | |
| <div class="config-card bg-white p-4 rounded-lg border border-gray-200"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Xác Thực</label> | |
| <div class="flex items-center justify-between mb-3"> | |
| <span class="text-sm">Bật Xác Thực</span> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-500"></div> | |
| </label> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-3"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Tên Đăng Nhập</label> | |
| <input type="text" value="admin" class="w-full border rounded px-3 py-2"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Mật Khẩu</label> | |
| <input type="password" value="password" class="w-full border rounded px-3 py-2"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="space-y-6"> | |
| <!-- Stream Info --> | |
| <div class="config-card bg-white p-4 rounded-lg border border-gray-200"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Thông Tin Stream</label> | |
| <div class="bg-gray-100 p-3 rounded-lg"> | |
| <p class="text-sm font-mono break-all"> | |
| rtsp://admin:password@192.168.1.100:554/Streaming/Channels/101 | |
| </p> | |
| </div> | |
| <button class="mt-3 w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded-lg text-sm"> | |
| <i class="fas fa-copy mr-2"></i> Sao Chép URL | |
| </button> | |
| </div> | |
| <!-- Stream Status --> | |
| <div class="config-card bg-white p-4 rounded-lg border border-gray-200"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Trạng Thái Stream</label> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between"> | |
| <span class="text-sm">Trạng Thái:</span> | |
| <span class="text-sm font-medium text-green-600">Đang Hoạt Động</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-sm">Băng Thông:</span> | |
| <span class="text-sm font-medium">2.1 Mbps</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-sm">Độ Trễ:</span> | |
| <span class="text-sm font-medium">120ms</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-sm">Gói Tin Mất:</span> | |
| <span class="text-sm font-medium">0.2%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Stream Test --> | |
| <div class="config-card bg-white p-4 rounded-lg border border-gray-200"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Kiểm Tra Stream</label> | |
| <button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded-lg text-sm mb-2"> | |
| <i class="fas fa-play mr-2"></i> Phát Stream | |
| </button> | |
| <button class="w-full bg-gray-200 hover:bg-gray-300 text-gray-800 py-2 rounded-lg text-sm"> | |
| <i class="fas fa-stop mr-2"></i> Dừng Stream | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Comparison & Actions --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="bg-white rounded-xl shadow p-6"> | |
| <h2 class="text-lg font-semibold mb-4 text-gray-800"> | |
| <i class="fas fa-balance-scale mr-2 text-blue-500"></i> So Sánh Cấu Hình | |
| </h2> | |
| <table class="w-full text-sm"> | |
| <thead> | |
| <tr class="border-b"> | |
| <th class="text-left py-2">Thông Số</th> | |
| <th class="text-left py-2">Hiện Tại</th> | |
| <th class="text-left py-2">Đề Xuất</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="border-b"> | |
| <td class="py-2">Độ Phân Giải</td> | |
| <td class="py-2">1920x1080</td> | |
| <td class="py-2 text-green-600">1920x1080</td> | |
| </tr> | |
| <tr class="border-b"> | |
| <td class="py-2">FPS</td> | |
| <td class="py-2">25</td> | |
| <td class="py-2 text-green-600">20</td> | |
| </tr> | |
| <tr class="border-b"> | |
| <td class="py-2">Bitrate</td> | |
| <td class="py-2">2048 Kbps</td> | |
| <td class="py-2 text-green-600">1536 Kbps</td> | |
| </tr> | |
| <tr> | |
| <td class="py-2">Lưu Trữ/ngày</td> | |
| <td class="py-2">7.2 GB</td> | |
| <td class="py-2 text-green-600">5.5 GB</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="bg-white rounded-xl shadow p-6"> | |
| <h2 class="text-lg font-semibold mb-4 text-gray-800"> | |
| <i class="fas fa-tasks mr-2 text-blue-500"></i> Hành Động | |
| </h2> | |
| <div class="space-y-3"> | |
| <button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-check-circle mr-2"></i> Áp Dụng Cho Thiết Bị Này | |
| </button> | |
| <button class="w-full bg-green-500 hover:bg-green-600 text-white py-2 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-layer-group mr-2"></i> Áp Dụng Cho Toàn Khu Vực | |
| </button> | |
| <button class="w-full bg-gray-200 hover:bg-gray-300 text-gray-800 py-2 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-file-export mr-2"></i> Xuất Cấu Hình | |
| </button> | |
| <button class="w-full bg-gray-200 hover:bg-gray-300 text-gray-800 py-2 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-file-import mr-2"></i> Nhập Cấu Hình | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Tab switching functionality | |
| const tabs = document.querySelectorAll('nav button[data-tab]'); | |
| tabs.forEach(tab => { | |
| tab.addEventListener('click', () => { | |
| // Update tab styling | |
| tabs.forEach(t => { | |
| t.classList.remove('tab-active', 'text-blue-500', 'border-blue-500'); | |
| t.classList.add('text-gray-500', 'border-transparent'); | |
| }); | |
| tab.classList.add('tab-active', 'text-blue-500', 'border-blue-500'); | |
| tab.classList.remove('text-gray-500', 'border-transparent'); | |
| // Show corresponding content | |
| const tabId = tab.getAttribute('data-tab'); | |
| document.querySelectorAll('.tab-content').forEach(content => { | |
| content.classList.remove('active'); | |
| }); | |
| document.getElementById(`${tabId}-tab`).classList.add('active'); | |
| }); | |
| }); | |
| // Slider value display | |
| const sliders = document.querySelectorAll('input[type="range"]'); | |
| sliders.forEach(slider => { | |
| const valueDisplay = slider.nextElementSibling?.querySelector('input[type="number"]'); | |
| if (valueDisplay) { | |
| slider.addEventListener('input', () => { | |
| valueDisplay.value = slider.value; | |
| }); | |
| valueDisplay.addEventListener('input', () => { | |
| slider.value = valueDisplay.value; | |
| }); | |
| } | |
| }); | |
| // Hierarchy item click | |
| const hierarchyItems = document.querySelectorAll('.hierarchy-item'); | |
| hierarchyItems.forEach(item => { | |
| item.addEventListener('click', () => { | |
| // In a real app, this would load the configuration for the selected item | |
| console.log('Selected:', item.textContent.trim()); | |
| }); | |
| }); | |
| // Toggle switches | |
| const toggleSwitches = document.querySelectorAll('input[type="checkbox"].peer'); | |
| toggleSwitches.forEach(switchEl => { | |
| switchEl.addEventListener('change', (e) => { | |
| console.log('Toggle changed:', e.target.checked); | |
| }); | |
| }); | |
| </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=daoan1412/camera-conf" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |