{"id":6,"date":"2026-04-26T14:24:06","date_gmt":"2026-04-26T14:24:06","guid":{"rendered":"https:\/\/tinbamien.com\/?page_id=6"},"modified":"2026-05-04T03:04:57","modified_gmt":"2026-05-04T03:04:57","slug":"6-2","status":"publish","type":"page","link":"https:\/\/tinbamien.com\/?page_id=6","title":{"rendered":""},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"vi\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\">\n    <title>2FA Cloud Manager v11<\/title>\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <script src=\"https:\/\/cdn.jsdelivr.net\/gh\/hectorm\/otpauth@master\/dist\/otpauth.umd.min.js\"><\/script>\n    \n    <style>\n        body { \n            -webkit-tap-highlight-color: transparent; \n            margin: 0; \n            padding: 0; \n            background-color: #f8fafc; \n            font-family: system-ui, -apple-system, sans-serif;\n            overscroll-behavior-y: contain;\n        }\n        .app-container { max-width: 480px; margin: 0 auto; padding: 16px; }\n        .card { background: white; border-radius: 1.5rem; padding: 1.25rem; border: 1px solid #e2e8f0; box-shadow: 0 4px 15px -3px rgba(0,0,0,0.05); margin-bottom: 1.25rem; }\n        .btn-primary { \n            width: 100%; \n            background: #2563eb; \n            color: white; \n            padding: 1rem; \n            border-radius: 1rem; \n            font-weight: 800; \n            cursor: pointer; \n            border: none; \n            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n            box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);\n            text-transform: uppercase;\n            letter-spacing: 0.025em;\n        }\n        .btn-primary:active { transform: scale(0.96); background: #1d4ed8; }\n        .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }\n        \n        .result-card { \n            background: #0f172a; \n            border-radius: 2rem; \n            padding: 1.5rem; \n            color: white; \n            display: none; \n            animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1);\n            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);\n            scroll-margin-top: 20px;\n        }\n        @keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }\n        \n        .otp-box { \n            background: linear-gradient(145deg, #1e293b, #0f172a); \n            border: 1px solid rgba(255,255,255,0.1); \n            border-radius: 1.25rem; \n            padding: 1.75rem 1rem; \n            text-align: center; \n            cursor: pointer; \n            margin-bottom: 1.25rem;\n            position: relative;\n            overflow: hidden;\n        }\n        .otp-code { \n            font-family: 'Monaco', 'Courier New', monospace; \n            font-size: 3rem; \n            font-weight: 900; \n            letter-spacing: 0.2em; \n            color: #38bdf8; \n            text-shadow: 0 0 25px rgba(56, 189, 248, 0.4);\n            margin-left: 0.2em;\n        }\n        .progress-container { position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background: rgba(255,255,255,0.05); }\n        .progress-bar { height: 100%; background: #38bdf8; width: 100%; transition: width 0.1s linear; }\n        \n        .info-row { \n            display: flex; \n            justify-content: space-between; \n            align-items: center; \n            background: rgba(255,255,255,0.05); \n            padding: 1rem; \n            border-radius: 1rem; \n            margin-top: 0.75rem; \n            border: 1px solid rgba(255,255,255,0.08); \n        }\n        textarea { \n            width: 100%; \n            height: 150px; \n            padding: 14px; \n            background: #f1f5f9; \n            border: 2px solid transparent; \n            border-radius: 1rem; \n            font-family: 'ui-monospace', monospace; \n            font-size: 14px; \n            outline: none; \n            margin-bottom: 12px; \n            resize: none; \n            transition: all 0.3s;\n            color: #334155;\n        }\n        textarea:focus { border-color: #2563eb; background: white; box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1); }\n        \n        .toast { \n            position: fixed; \n            bottom: 40px; \n            left: 50%; \n            transform: translateX(-50%); \n            background: rgba(15, 23, 42, 0.9); \n            backdrop-filter: blur(8px);\n            color: white; \n            padding: 12px 28px; \n            border-radius: 50px; \n            font-size: 14px; \n            font-weight: 700; \n            display: none; \n            z-index: 1000; \n            box-shadow: 0 10px 25px rgba(0,0,0,0.3);\n            border: 1px solid rgba(255,255,255,0.1);\n        }\n        .status-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 8px; }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"app-container\">\n        <!-- Header -->\n        <div class=\"flex justify-between items-end mb-6 px-1\">\n            <div class=\"flex flex-col\">\n                <span class=\"text-[11px] font-black text-slate-400 uppercase tracking-[0.2em] mb-1\">D\u1eef li\u1ec7u Cloud<\/span>\n                <div class=\"flex items-center bg-white px-3 py-1.5 rounded-full border border-slate-200 shadow-sm\">\n                    <span id=\"status-dot\" class=\"status-dot bg-slate-300\"><\/span>\n                    <span id=\"sync-text\" class=\"text-xs font-bold text-slate-500 uppercase\">\u0110ang k\u1ebft n\u1ed1i&#8230;<\/span>\n                <\/div>\n            <\/div>\n            <div class=\"text-right\">\n                <span class=\"text-[11px] font-black text-slate-400 uppercase tracking-[0.2em] mb-1\">L\u00e0m m\u1edbi sau<\/span>\n                <p id=\"timer-box\" class=\"text-lg font-black text-blue-600 font-mono leading-none\">&#8211;s<\/p>\n            <\/div>\n        <\/div>\n\n        <!-- Input Area -->\n        <div class=\"card\">\n            <div class=\"flex justify-between items-center mb-4\">\n                <h2 class=\"text-[13px] font-black text-slate-800 tracking-tight uppercase\">Danh s\u00e1ch \u0111\u1ee3i<\/h2>\n                <span id=\"line-count\" class=\"bg-blue-600 text-white px-3 py-1 rounded-lg text-[11px] font-black shadow-md\">0 D\u00d2NG<\/span>\n            <\/div>\n            <textarea id=\"input-list\" placeholder=\"\u0110\u1ecbnh d\u1ea1ng: UID|Pass|Key2FA...\"><\/textarea>\n            <button id=\"next-btn\" class=\"btn-primary flex items-center justify-center gap-3\">\n                <span>L\u1ea5y d\u00f2ng ti\u1ebfp theo<\/span>\n                <svg width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" viewBox=\"0 0 24 24\"><path d=\"M13 5l7 7-7 7M5 5l7 7-7 7\"><\/path><\/svg>\n            <\/button>\n        <\/div>\n\n        <!-- Result Area -->\n        <div id=\"result-area\" class=\"result-card\">\n            <div id=\"otp-click\" class=\"otp-box active:scale-95 transition-all\">\n                <p class=\"text-[11px] text-blue-400\/70 font-black uppercase tracking-[0.3em] mb-3\">M\u00e3 x\u00e1c th\u1ef1c 2FA<\/p>\n                <div id=\"otp-display\" class=\"otp-code\">&#8212;&#8212;<\/div>\n                <p class=\"text-[10px] text-white\/30 font-bold uppercase mt-4\">Ch\u1ea1m \u0111\u1ec3 sao ch\u00e9p nhanh<\/p>\n                <div class=\"progress-container\">\n                    <div id=\"otp-progress\" class=\"progress-bar\"><\/div>\n                <\/div>\n            <\/div>\n            \n            <div class=\"space-y-3\">\n                <div class=\"info-row\">\n                    <div class=\"overflow-hidden flex-1 mr-4\">\n                        <p class=\"text-[10px] text-white\/40 font-black uppercase tracking-wider mb-1\">T\u00e0i kho\u1ea3n (UID)<\/p>\n                        <p id=\"uid-display\" class=\"text-base font-bold font-mono truncate text-blue-100\">&#8212;<\/p>\n                    <\/div>\n                    <button id=\"copy-uid\" class=\"bg-blue-600 text-white px-5 py-2.5 rounded-xl text-[12px] font-black active:scale-90 transition-all shadow-lg\">CH\u00c9P<\/button>\n                <\/div>\n                \n                <div class=\"info-row\">\n                    <div class=\"overflow-hidden flex-1 mr-4\">\n                        <p class=\"text-[10px] text-white\/40 font-black uppercase tracking-wider mb-1\">M\u1eadt kh\u1ea9u<\/p>\n                        <p id=\"pass-display\" class=\"text-base font-bold font-mono truncate text-blue-100\">&#8212;<\/p>\n                    <\/div>\n                    <button id=\"copy-pass\" class=\"bg-blue-600 text-white px-5 py-2.5 rounded-xl text-[12px] font-black active:scale-90 transition-all shadow-lg\">CH\u00c9P<\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Help\/Error Message -->\n        <div id=\"error-help\" class=\"mt-4 p-4 bg-red-50 border border-red-100 rounded-2xl hidden\">\n            <p class=\"text-[12px] text-red-600 font-bold mb-2\">L\u1ed7i Firebase (hiep&#8211;3):<\/p>\n            <p class=\"text-[11px] text-red-500 leading-relaxed\">\n                1. M\u1edf Firebase Console d\u1ef1 \u00e1n hiep&#8211;3.<br>\n                2. Authentication -> Sign-in Method -> B\u1eadt <b>Anonymous<\/b>.<br>\n                3. Firestore -> Rules -> S\u1eeda th\u00e0nh:<br>\n                <code>allow read, write: if true;<\/code> (Ho\u1eb7c c\u1ea5u h\u00ecnh auth != null)\n            <\/p>\n        <\/div>\n    <\/div>\n\n    <div id=\"toast\" class=\"toast\">\u0110\u00c3 SAO CH\u00c9P TH\u00c0NH C\u00d4NG<\/div>\n\n    <script type=\"module\">\n        \/\/ Import Firebase t\u1eeb CDN chu\u1ea9n cho m\u00f4i tr\u01b0\u1eddng Web\n        import { initializeApp } from \"https:\/\/www.gstatic.com\/firebasejs\/11.0.1\/firebase-app.js\";\n        import { getAuth, signInAnonymously, onAuthStateChanged } from \"https:\/\/www.gstatic.com\/firebasejs\/11.0.1\/firebase-auth.js\";\n        import { getFirestore, doc, setDoc, onSnapshot } from \"https:\/\/www.gstatic.com\/firebasejs\/11.0.1\/firebase-firestore.js\";\n\n        \/\/ C\u1eadp nh\u1eadt c\u1ea5u h\u00ecnh Firebase m\u1edbi hiep--3\n        const firebaseConfig = {\n            apiKey: \"AIzaSyDUy50OlaitdvyhIqowwKZL53m4suwZxME\",\n            authDomain: \"hiep--3.firebaseapp.com\",\n            databaseURL: \"https:\/\/hiep--3-default-rtdb.firebaseio.com\",\n            projectId: \"hiep--3\",\n            storageBucket: \"hiep--3.firebasestorage.app\",\n            messagingSenderId: \"916863840087\",\n            appId: \"1:916863840087:web:b3af001ccf32b0114f5812\",\n            measurementId: \"G-R4D803046S\"\n        };\n\n        const APP_ID = 'hiep-2fa-cloud-v3';\n        let db, auth, currentUser;\n        let currentSecret = '';\n        let saveDebounce;\n\n        \/\/ --- UI Utils ---\n        function updateStatus(text, type) {\n            const dot = document.getElementById('status-dot');\n            const txt = document.getElementById('sync-text');\n            txt.innerText = text;\n            if (type === 'ok') {\n                dot.className = 'status-dot bg-emerald-500 shadow-[0_0_10px_rgba(16,185,129,0.6)]';\n                txt.className = 'text-xs font-bold text-emerald-600 uppercase tracking-tighter';\n            } else if (type === 'error') {\n                dot.className = 'status-dot bg-red-500 shadow-[0_0_10px_rgba(239,68,68,0.6)]';\n                txt.className = 'text-xs font-bold text-red-600 uppercase tracking-tighter';\n                document.getElementById('error-help').classList.remove('hidden');\n            }\n        }\n\n        function showToast(msg) {\n            const toastEl = document.getElementById('toast');\n            toastEl.innerText = msg || \"\u0110\u00c3 SAO CH\u00c9P TH\u00c0NH C\u00d4NG\";\n            toastEl.style.display = 'block';\n            setTimeout(() => toastEl.style.display = 'none', 1500);\n            if (navigator.vibrate) navigator.vibrate(30);\n        }\n\n        function copyText(elementId) {\n            const text = document.getElementById(elementId).innerText;\n            if (text.includes('-') || text === 'ERROR') return;\n            \n            navigator.clipboard.writeText(text).then(() => {\n                showToast();\n            }).catch(() => {\n                \/\/ Fallback cho tr\u00ecnh duy\u1ec7t c\u0169\n                const el = document.createElement('textarea');\n                el.value = text;\n                document.body.appendChild(el);\n                el.select();\n                document.execCommand('copy');\n                document.body.removeChild(el);\n                showToast();\n            });\n        }\n\n        function updateLineCount() {\n            const val = document.getElementById('input-list').value.trim();\n            const count = val ? val.split('\\n').length : 0;\n            document.getElementById('line-count').innerText = count + ' D\u00d2NG';\n        }\n\n        \/\/ --- OTP Logic ---\n        function generateOTP() {\n            if (!currentSecret) return;\n            try {\n                const cleanSecret = currentSecret.replace(\/\\s+\/g, '').toUpperCase();\n                const totp = new OTPAuth.TOTP({ secret: cleanSecret });\n                document.getElementById('otp-display').innerText = totp.generate();\n            } catch (e) {\n                document.getElementById('otp-display').innerText = 'ERROR';\n            }\n        }\n\n        \/\/ --- Firebase Core ---\n        const init = async () => {\n            const app = initializeApp(firebaseConfig);\n            auth = getAuth(app);\n            db = getFirestore(app);\n\n            onAuthStateChanged(auth, (user) => {\n                if (user) {\n                    currentUser = user;\n                    updateStatus(`Cloud: ${user.uid.substring(0,6)}`, 'ok');\n                    setupSync();\n                } else {\n                    updateStatus(\"\u0110ang \u0111\u0103ng nh\u1eadp...\", \"pending\");\n                    signInAnonymously(auth).catch(err => {\n                        updateStatus(\"L\u1ed7i k\u1ebft n\u1ed1i\", \"error\");\n                        console.error(err);\n                    });\n                }\n            });\n        };\n\n        function setupSync() {\n            const docRef = doc(db, 'clouds', APP_ID);\n            \n            onSnapshot(docRef, (docSnap) => {\n                const area = document.getElementById('input-list');\n                if (docSnap.exists() && document.activeElement !== area) {\n                    area.value = docSnap.data().list || '';\n                    updateLineCount();\n                }\n            }, (err) => {\n                updateStatus(\"L\u1ed7i Firestore\", \"error\");\n                console.error(err);\n            });\n        }\n\n        async function syncToCloud(content) {\n            if (!currentUser) return;\n            try {\n                const docRef = doc(db, 'clouds', APP_ID);\n                await setDoc(docRef, { list: content, updatedAt: Date.now() }, { merge: true });\n            } catch (e) { \n                console.error(\"Cloud Error:\", e); \n            }\n        }\n\n        \/\/ --- Event Listeners ---\n        document.addEventListener('DOMContentLoaded', () => {\n            init();\n\n            const area = document.getElementById('input-list');\n            const nextBtn = document.getElementById('next-btn');\n\n            setInterval(() => {\n                const now = Date.now();\n                const seconds = 30 - (Math.floor(now \/ 1000) % 30);\n                const msInCycle = now % 30000;\n                const progress = ((30000 - msInCycle) \/ 30000) * 100;\n                \n                document.getElementById('timer-box').innerText = seconds + 's';\n                document.getElementById('otp-progress').style.width = progress + '%';\n                \n                if (seconds === 30) generateOTP();\n            }, 100);\n\n            area.oninput = () => {\n                updateLineCount();\n                clearTimeout(saveDebounce);\n                saveDebounce = setTimeout(() => syncToCloud(area.value), 1000);\n            };\n\n            nextBtn.onclick = () => {\n                const raw = area.value.trim();\n                if (!raw) return;\n                \n                const lines = raw.split('\\n');\n                const current = lines.shift();\n                const remainder = lines.join('\\n');\n                \n                area.value = remainder;\n                updateLineCount();\n                syncToCloud(remainder);\n\n                const parts = current.split(\/[|\\t]+\/).map(x => x.trim());\n                if (parts.length >= 2) {\n                    document.getElementById('uid-display').innerText = parts[0];\n                    document.getElementById('pass-display').innerText = parts[1];\n                    currentSecret = parts[2] || '';\n                    \n                    const resultArea = document.getElementById('result-area');\n                    resultArea.style.display = 'block';\n                    generateOTP();\n                    resultArea.scrollIntoView({ behavior: 'smooth', block: 'start' });\n                }\n            };\n\n            document.getElementById('otp-click').onclick = () => copyText('otp-display');\n            document.getElementById('copy-uid').onclick = () => copyText('uid-display');\n            document.getElementById('copy-pass').onclick = () => copyText('pass-display');\n        });\n    <\/script>\n<\/body>\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<div class=\"mh-excerpt\"><p>2FA Cloud Manager v11 D\u1eef li\u1ec7u Cloud \u0110ang k\u1ebft n\u1ed1i&#8230; L\u00e0m m\u1edbi sau &#8211;s Danh s\u00e1ch \u0111\u1ee3i 0 D\u00d2NG L\u1ea5y d\u00f2ng ti\u1ebfp theo M\u00e3 x\u00e1c <a class=\"mh-excerpt-more\" href=\"https:\/\/tinbamien.com\/?page_id=6\" title=\"\">[&#8230;]<\/a><\/p>\n<\/div>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tinbamien.com\/index.php?rest_route=\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tinbamien.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tinbamien.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tinbamien.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tinbamien.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6"}],"version-history":[{"count":7,"href":"https:\/\/tinbamien.com\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":17,"href":"https:\/\/tinbamien.com\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions\/17"}],"wp:attachment":[{"href":"https:\/\/tinbamien.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}