{"html":"

\n \n \n

\n ENABLE_ENCRYPTION\n \n\n \n \n

\n ACTIVATE_STEALTH_MODE\n \n\n \n \n

\n [PERMISSION_DENIED]\n \n

\n","css":"/* --- Root Variables & Wrapper --- */\n.glitch-checkbox-wrapper {\n --bg-color: #0d0d0d;\n --primary-color: #00f2ea;\n --secondary-color: #a855f7;\n --text-color: #e5e5e5;\n --disabled-color: #555;\n --font-family: \"Fira Code\", Consolas, \"Courier New\", Courier, monospace;\n --glitch-anim-duration: 0.3s;\n\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n font-family: var(--font-family);\n background-color: #050505;\n padding: 2rem;\n border-radius: 1rem;\n}\n\n/* --- Container Checkbox --- */\n.glitch-checkbox-container {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n cursor: pointer;\n user-select: none;\n position: relative;\n}\n\n.glitch-checkbox-container input[type=\"checkbox\"] {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n/* --- Checkbox --- */\n.checkbox-box {\n width: 1.5em;\n height: 1.5em;\n border: 2px solid var(--primary-color);\n position: relative;\n transition: all 0.3s ease;\n\n clip-path: polygon(\n 15% 0,\n 85% 0,\n 100% 15%,\n 100% 85%,\n 85% 100%,\n 15% 100%,\n 0 85%,\n 0 15%\n );\n}\n\n.checkbox-mark {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 60%;\n height: 60%;\n background-color: var(--primary-color);\n transform: translate(-50%, -50%) scale(0);\n opacity: 0;\n transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);\n clip-path: inherit;\n}\n\n/* --- Label --- */\n.checkbox-label {\n color: var(--text-color);\n font-weight: 500;\n font-size: 1rem;\n text-transform: uppercase;\n letter-spacing: 0.1em;\n position: relative;\n transition:\n color 0.3s ease,\n text-shadow 0.3s ease;\n}\n\n/* --- Checked --- */\n.glitch-checkbox-container input:checked + .checkbox-box .checkbox-mark {\n transform: translate(-50%, -50%) scale(1);\n opacity: 1;\n animation: glitch-anim-checkbox var(--glitch-anim-duration) both;\n}\n\n.glitch-checkbox-container input:checked ~ .checkbox-label {\n color: var(--primary-color);\n text-shadow: 0 0 8px rgba(0, 242, 234, 0.7);\n}\n\n/* --- Hover --- */\n.glitch-checkbox-container:hover .checkbox-box {\n box-shadow: 0 0 10px var(--primary-color);\n}\n\n.glitch-checkbox-container:hover .checkbox-label::before,\n.glitch-checkbox-container:hover .checkbox-label::after {\n content: attr(data-text);\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: #050505;\n}\n\n.glitch-checkbox-container:hover .checkbox-label::before {\n color: var(--secondary-color);\n animation: glitch-anim-text var(--glitch-anim-duration)\n cubic-bezier(0.25, 0.46, 0.45, 0.94) both;\n}\n\n.glitch-checkbox-container:hover .checkbox-label::after {\n color: var(--primary-color);\n animation: glitch-anim-text var(--glitch-anim-duration)\n cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both;\n}\n\n/* --- Disabled --- */\n.glitch-checkbox-container:has(input:disabled) {\n cursor: not-allowed;\n}\n\n.glitch-checkbox-container input:disabled + .checkbox-box {\n border-color: var(--disabled-color);\n opacity: 0.5;\n box-shadow: none;\n}\n\n.glitch-checkbox-container input:disabled ~ .checkbox-label {\n color: var(--disabled-color);\n text-shadow: none;\n}\n\n.glitch-checkbox-container:has(input:disabled):hover .checkbox-box {\n box-shadow: none;\n}\n.glitch-checkbox-container:has(input:disabled):hover .checkbox-label::before,\n.glitch-checkbox-container:has(input:disabled):hover .checkbox-label::after {\n content: none;\n}\n\n/* --- Keyframes --- */\n@keyframes glitch-anim-checkbox {\n 0% {\n transform: translate(-50%, -50%);\n clip-path: inset(0 0 0 0);\n }\n 20% {\n transform: translate(calc(-50% - 3px), calc(-50% + 2px));\n clip-path: inset(50% 0 20% 0);\n }\n 40% {\n transform: translate(calc(-50% + 2px), calc(-50% - 1px));\n clip-path: inset(20% 0 60% 0);\n }\n 60% {\n transform: translate(calc(-50% - 2px), calc(-50% + 1px));\n clip-path: inset(80% 0 5% 0);\n }\n 80% {\n transform: translate(calc(-50% + 2px), calc(-50% - 2px));\n clip-path: inset(30% 0 45% 0);\n }\n 100% {\n transform: translate(-50%, -50%);\n clip-path: inset(0 0 0 0);\n }\n}\n\n@keyframes glitch-anim-text {\n 0% {\n transform: translate(0);\n clip-path: inset(0 0 0 0);\n }\n 20% {\n transform: translate(-3px, 2px);\n clip-path: inset(50% 0 20% 0);\n }\n 40% {\n transform: translate(2px, -1px);\n clip-path: inset(20% 0 60% 0);\n }\n 60% {\n transform: translate(-2px, 1px);\n clip-path: inset(80% 0 5% 0);\n }\n 80% {\n transform: translate(2px, -2px);\n clip-path: inset(30% 0 45% 0);\n }\n 100% {\n transform: translate(0);\n clip-path: inset(0 0 0 0);\n }\n}\n"}

great-falcon-83

👁 实时预览

📝 源代码