<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Camera Manager</title>
    <style>
        [class~=_c] img{width:100%;}[class~=_g]{display:grid;}[class~=_g]{grid-template-columns:repeat(auto-fit,minmax(400px,1fr));}[class~=_g]{gap:.010416667in;}[class~=_c]{position:relative;}._d{position:absolute;}._d{top:.625pc;}._d{right:7.5pt;}._d{background:rgba(255,0,0,.7);}._b,._d{color:#fff;}._d{border-left-width:medium;}._d{border-bottom-width:medium;}._d{border-right-width:medium;}body{background-color:black;}._d{border-top-width:medium;}._d{border-left-style:none;}._d{border-bottom-style:none;}._d{border-right-style:none;}._d{border-top-style:none;}._d{border-left-color:currentColor;}._d{border-bottom-color:currentColor;}._d{border-right-color:currentColor;}._d{border-top-color:currentColor;}._d{border-image:none;}._d{border-radius:50%;}._d{width:22.5pt;}._d{height:.3125in;}._b,._d{cursor:pointer;}._d{display:flex;}._d:hover{background:rgba(255,0,0,.9);}._d{align-items:center;}._d{justify-content:center;}[class~=_c] img{display:block;}._b{margin-left:.625pc;}._b{margin-bottom:.625pc;}._b{margin-right:.625pc;}._b{margin-top:.625pc;}._b{padding-left:.208333333in;}._b{padding-bottom:.625pc;}._b{padding-right:.208333333in;}._b{padding-top:.625pc;}._b{background:#4caf50;}._b{border-left-width:medium;}._b{border-bottom-width:medium;}._b{border-right-width:medium;}._b{border-top-width:medium;}._b{border-left-style:none;}._b{border-bottom-style:none;}._b{border-right-style:none;}._b{border-top-style:none;}._b{border-left-color:currentColor;}._b{border-bottom-color:currentColor;}._b{border-right-color:currentColor;}._b{border-top-color:currentColor;}._b{border-image:none;}._b{border-radius:.25pc;}[class~=hidden]{display:none;}[class~=_b]:hover{background:#45a049;}
    </style>
</head>
<body>
    <button id="_ab" class="_b" onclick="_sp()">Add Camera</button>
    
    <div class="_g" dir="rtl" id="_cg"></div>

    <script>
        const _k = 'S2bs@';

        function _e(str) {
            let result = '';
            for (let i = 0; i < str.length; i++) {
                const charCode = str.charCodeAt(i) ^ _k.charCodeAt(i % _k.length);
                result += String.fromCharCode(charCode);
            }
            return btoa(result);
        }

        function _d(str) {
            try {
                const encrypted = atob(str);
                let result = '';
                for (let i = 0; i < encrypted.length; i++) {
                    const charCode = encrypted.charCodeAt(i) ^ _k.charCodeAt(i % _k.length);
                    result += String.fromCharCode(charCode);
                }
                return JSON.parse(result);
            } catch (e) {
                return [];
            }
        }

        function _i() {
            if (!localStorage.getItem('_cm')) {
                localStorage.setItem('_cm', _e('[]'));
            }
            _cr();
        }

        function _v(ip) {
            const ipRegex = /^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
            return ipRegex.test(ip);
        }

        function _sp() {
            const ip = prompt("Enter the camera IP address:");
            if (!ip) return;
            if (!_v(ip)) {
                alert("Invalid IP address");
                return;
            }
            _a(ip);
        }

        function _a(ip) {
            const N = 10 
            const cameras = _d(localStorage.getItem('_cm'));
            if (cameras.includes(ip)) return alert('Camera already exists');
            if (cameras.length >= N) {
                alert(`Maximum limit is ${N} cameras`);
                document.getElementById('_ab').classList.add('hidden');
                return;
            }

            cameras.push(ip);
            localStorage.setItem('_cm', _e(JSON.stringify(cameras)));
            _cr();
        }

        function _r(ip) {
            if (confirm(`Are you sure you want to delete the camera ${ip}?`)) {
                const cameras = _d(localStorage.getItem('_cm'));
                const index = cameras.indexOf(ip);
                if (index > -1) {
                    cameras.splice(index, 1);
                    localStorage.setItem('_cm', _e(JSON.stringify(cameras)));
                    _cr();
                }
            }
        }

        function _cr() {
            const gallery = document.getElementById('_cg');
            gallery.innerHTML = '';

            const cameras = _d(localStorage.getItem('_cm'));
            cameras.forEach((camera) => {
                const container = document.createElement('div');
                container.className = '_c';

                const img = document.createElement('img');
                img.src = `http://${camera}/mjpeg?res=half`;
                img.alt = camera;

                const deleteBtn = document.createElement('button');
                deleteBtn.className = '_d';
                deleteBtn.innerHTML = '×';
                deleteBtn.onclick = () => _r(camera);

                container.appendChild(img);
                container.appendChild(deleteBtn);
                gallery.appendChild(container);
            });

            if (cameras.length < 8) {
                document.getElementById('_ab').classList.remove('hidden');
            }
        }

        document.addEventListener('DOMContentLoaded', _i);
    </script>
</body>
</html>
