{"html":"

\n \n \n

\n\n

\n \n\n

\n\n

STATUS: IDLE [0x4F]

QUANTUM VERIFY: 82.6%

SYNCH: PENDING

0x7A2C8B9F

\n","css":".stars-container {\n position: absolute;\n width: 100%;\n height: 100%;\n perspective: 500px;\n transform-style: preserve-3d;\n}\n\n.star-layer {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n opacity: 0.8;\n}\n\n.star-layer:nth-child(1) {\n transform: translateZ(-50px);\n animation: star-drift 150s linear infinite;\n}\n\n.star-layer:nth-child(2) {\n transform: translateZ(-100px);\n animation: star-drift 200s linear infinite reverse;\n opacity: 0.6;\n}\n\n.star-layer:nth-child(3) {\n transform: translateZ(-200px);\n animation: star-drift 250s linear infinite;\n opacity: 0.4;\n}\n\n@keyframes star-drift {\n 0% {\n transform: translateZ(-50px) translateY(0);\n }\n 100% {\n transform: translateZ(-50px) translateY(100%);\n }\n}\n\n.star-layer::before,\n.star-layer::after {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n}\n\n.star-layer:nth-child(1)::before {\n background-image: radial-gradient(1px 1px at 10% 10%, white 100%, transparent),\n radial-gradient(1px 1px at 20% 20%, white 100%, transparent),\n radial-gradient(2px 2px at 30% 30%, white 100%, transparent),\n radial-gradient(1px 1px at 40% 40%, white 100%, transparent),\n radial-gradient(2px 2px at 50% 50%, white 100%, transparent),\n radial-gradient(1px 1px at 60% 60%, white 100%, transparent),\n radial-gradient(2px 2px at 70% 70%, white 100%, transparent),\n radial-gradient(1px 1px at 80% 80%, white 100%, transparent),\n radial-gradient(2px 2px at 90% 90%, white 100%, transparent),\n radial-gradient(1px 1px at 15% 85%, white 100%, transparent);\n}\n\n.nebula {\n position: absolute;\n width: 120%;\n height: 120%;\n top: -10%;\n left: -10%;\n background: radial-gradient(\n ellipse at 30% 30%,\n rgba(63, 0, 113, 0.3) 0%,\n rgba(63, 0, 113, 0) 70%\n ),\n radial-gradient(\n ellipse at 70% 60%,\n rgba(0, 113, 167, 0.3) 0%,\n rgba(0, 113, 167, 0) 70%\n ),\n radial-gradient(\n ellipse at 50% 50%,\n rgba(167, 0, 157, 0.2) 0%,\n rgba(167, 0, 157, 0) 70%\n );\n filter: blur(30px);\n opacity: 0.5;\n animation: nebula-shift 30s infinite alternate ease-in-out;\n}\n\n@keyframes nebula-shift {\n 0% {\n transform: scale(1) rotate(0deg);\n opacity: 0.3;\n }\n 50% {\n opacity: 0.5;\n }\n 100% {\n transform: scale(1.2) rotate(5deg);\n opacity: 0.4;\n }\n}\n\n.grid-plane {\n position: absolute;\n width: 200%;\n height: 200%;\n top: -50%;\n left: -50%;\n background-image: linear-gradient(\n rgba(0, 162, 255, 0.15) 1px,\n transparent 1px\n ),\n linear-gradient(90deg, rgba(0, 162, 255, 0.15) 1px, transparent 1px);\n background-size: 40px 40px;\n transform: perspective(500px) rotateX(60deg);\n transform-origin: center;\n animation: grid-move 20s linear infinite;\n opacity: 0.3;\n}\n\n@keyframes grid-move {\n 0% {\n transform: perspective(500px) rotateX(60deg) translateY(0);\n }\n 100% {\n transform: perspective(500px) rotateX(60deg) translateY(40px);\n }\n}\n\n.checkbox-container {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 300px;\n height: 300px;\n z-index: 10;\n}\n\n/* Скрываем стандартный чекбокс */\n.holo-checkbox-input {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.holo-checkbox {\n position: relative;\n width: 80px;\n height: 80px;\n cursor: pointer;\n transform-style: preserve-3d;\n perspective: 1000px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.holo-box {\n position: relative;\n width: 100%;\n height: 100%;\n border: 2px solid rgba(0, 162, 255, 0.7);\n border-radius: 12px;\n background-color: rgba(0, 24, 55, 0.5);\n box-shadow:\n 0 0 10px rgba(0, 162, 255, 0.5),\n inset 0 0 15px rgba(0, 162, 255, 0.3);\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n transition: all 0.3s ease;\n transform-style: preserve-3d;\n}\n\n.holo-inner {\n position: absolute;\n width: 30%;\n height: 30%;\n background-color: rgba(0, 162, 255, 0.5);\n border-radius: 4px;\n opacity: 0;\n transform: scale(0) rotate(45deg);\n transition: all 0.3s ease;\n box-shadow: 0 0 15px rgba(0, 162, 255, 0.8);\n}\n\n.scan-effect {\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 2px;\n background: linear-gradient(\n 90deg,\n transparent,\n rgba(0, 162, 255, 0.8),\n transparent\n );\n animation: scan-off 4s infinite;\n opacity: 0.3;\n transition: all 0.3s ease;\n}\n\n@keyframes scan-off {\n 0% {\n left: -100%;\n opacity: 0.3;\n }\n 100% {\n left: 100%;\n opacity: 0.3;\n }\n}\n\n@keyframes scan-on {\n 0% {\n left: -100%;\n opacity: 1;\n }\n 100% {\n left: 100%;\n opacity: 1;\n }\n}\n\n.holo-checkbox-input:checked + .holo-checkbox .holo-box {\n border-color: rgba(0, 255, 136, 0.7);\n box-shadow:\n 0 0 10px rgba(0, 255, 136, 0.6),\n inset 0 0 15px rgba(0, 255, 136, 0.4);\n}\n\n.holo-checkbox-input:checked + .holo-checkbox .holo-inner {\n background-color: rgba(0, 255, 136, 0.7);\n box-shadow: 0 0 15px rgba(0, 255, 136, 1);\n opacity: 1;\n transform: scale(1) rotate(45deg);\n}\n\n.holo-checkbox-input:checked + .holo-checkbox .scan-effect {\n animation: scan-on 2s infinite;\n opacity: 1;\n background: linear-gradient(\n 90deg,\n transparent,\n rgba(0, 255, 136, 0.8),\n transparent\n );\n}\n\n.holo-glow {\n position: absolute;\n width: 200%;\n height: 200%;\n left: -50%;\n top: -50%;\n background: radial-gradient(\n ellipse at center,\n rgba(0, 162, 255, 0.2) 0%,\n rgba(0, 162, 255, 0.1) 40%,\n rgba(0, 0, 0, 0) 70%\n );\n pointer-events: none;\n filter: blur(10px);\n opacity: 0.5;\n z-index: -1;\n animation: glow-pulse 4s infinite alternate;\n transition: all 0.5s ease;\n}\n\n@keyframes glow-pulse {\n 0% {\n opacity: 0.3;\n filter: blur(10px) brightness(0.8);\n }\n 100% {\n opacity: 0.6;\n filter: blur(15px) brightness(1.2);\n }\n}\n\n.holo-checkbox-input:checked + .holo-checkbox .holo-glow {\n background: radial-gradient(\n ellipse at center,\n rgba(0, 255, 136, 0.2) 0%,\n rgba(0, 255, 136, 0.1) 40%,\n rgba(0, 0, 0, 0) 70%\n );\n animation: active-glow-pulse 2s infinite alternate;\n}\n\n@keyframes active-glow-pulse {\n 0% {\n opacity: 0.4;\n filter: blur(10px) brightness(1);\n }\n 100% {\n opacity: 0.8;\n filter: blur(20px) brightness(1.5);\n }\n}\n\n.corner-accent {\n position: absolute;\n width: 15px;\n height: 15px;\n border-style: solid;\n border-width: 2px;\n border-color: rgba(0, 162, 255, 0.5);\n transition: all 0.3s ease;\n}\n\n.corner-accent:nth-child(1) {\n top: -5px;\n left: -5px;\n border-right: none;\n border-bottom: none;\n border-radius: 5px 0 0 0;\n}\n\n.corner-accent:nth-child(2) {\n top: -5px;\n right: -5px;\n border-left: none;\n border-bottom: none;\n border-radius: 0 5px 0 0;\n}\n\n.corner-accent:nth-child(3) {\n bottom: -5px;\n left: -5px;\n border-right: none;\n border-top: none;\n border-radius: 0 0 0 5px;\n}\n\n.corner-accent:nth-child(4) {\n bottom: -5px;\n right: -5px;\n border-left: none;\n border-top: none;\n border-radius: 0 0 5px 0;\n}\n\n.holo-checkbox-input:checked + .holo-checkbox .corner-accent {\n width: 20px;\n height: 20px;\n border-color: rgba(0, 255, 136, 0.7);\n}\n\n.status-text {\n margin-top: 30px;\n font-size: 16px;\n font-weight: 500;\n color: rgba(0, 162, 255, 0.8);\n text-shadow: 0 0 5px rgba(0, 162, 255, 0.5);\n position: relative;\n transition: all 0.3s ease;\n}\n\n.status-text::before {\n content: \"SYSTEM DEACTIVATED\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n\n.holo-checkbox-input:checked ~ .status-text::before {\n content: \"SYSTEM ACTIVATED\";\n color: rgba(0, 255, 136, 0.8);\n text-shadow: 0 0 5px rgba(0, 255, 136, 0.5);\n}\n\n.activation-rings {\n position: absolute;\n width: 100%;\n height: 100%;\n pointer-events: none;\n}\n\n.activation-ring {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 40%;\n height: 40%;\n border: 1px solid rgba(0, 255, 136, 0);\n border-radius: 50%;\n transform: translate(-50%, -50%) scale(0);\n opacity: 0;\n transition: all 0.3s ease;\n}\n\n.holo-checkbox-input:checked + .holo-checkbox .activation-ring {\n animation: ring-expand 2s ease-out forwards;\n border-color: rgba(0, 255, 136, 0.7);\n}\n\n.holo-checkbox-input:checked + .holo-checkbox .activation-ring:nth-child(1) {\n animation-delay: 0s;\n}\n\n.holo-checkbox-input:checked + .holo-checkbox .activation-ring:nth-child(2) {\n animation-delay: 0.3s;\n}\n\n.holo-checkbox-input:checked + .holo-checkbox .activation-ring:nth-child(3) {\n animation-delay: 0.6s;\n}\n\n@keyframes ring-expand {\n 0% {\n transform: translate(-50%, -50%) scale(0);\n opacity: 1;\n }\n 100% {\n transform: translate(-50%, -50%) scale(2.5);\n opacity: 0;\n }\n}\n\n.holo-particles {\n position: absolute;\n width: 100%;\n height: 100%;\n pointer-events: none;\n}\n\n.holo-particle {\n position: absolute;\n background-color: rgba(0, 162, 255, 0.7);\n border-radius: 50%;\n width: 3px;\n height: 3px;\n opacity: 0;\n filter: blur(1px);\n transition: all 0.3s ease;\n}\n\n.holo-checkbox-input:checked + .holo-checkbox .holo-particle {\n background-color: rgba(0, 255, 136, 0.7);\n animation: particle-float 3s infinite ease-in-out;\n}\n\n.holo-checkbox-input:checked + .holo-checkbox .holo-particle:nth-child(1) {\n top: 20%;\n left: 30%;\n animation-delay: 0.1s;\n}\n\n.holo-checkbox-input:checked + .holo-checkbox .holo-particle:nth-child(2) {\n top: 70%;\n left: 20%;\n animation-delay: 0.7s;\n}\n\n.holo-checkbox-input:checked + .holo-checkbox .holo-particle:nth-child(3) {\n top: 40%;\n left: 80%;\n animation-delay: 1.3s;\n}\n\n.holo-checkbox-input:checked + .holo-checkbox .holo-particle:nth-child(4) {\n top: 60%;\n left: 60%;\n animation-delay: 1.9s;\n}\n\n.holo-checkbox-input:checked + .holo-checkbox .holo-particle:nth-child(5) {\n top: 30%;\n left: 45%;\n animation-delay: 2.5s;\n}\n\n.holo-checkbox-input:checked + .holo-checkbox .holo-particle:nth-child(6) {\n top: 60%;\n left: 40%;\n animation-delay: 3.1s;\n}\n\n@keyframes particle-float {\n 0% {\n transform: translateY(0) scale(1);\n opacity: 0;\n }\n 20% {\n opacity: 1;\n }\n 80% {\n opacity: 1;\n }\n 100% {\n transform: translateY(-20px) scale(0);\n opacity: 0;\n }\n}\n\n.cube-transform {\n position: absolute;\n width: 30%;\n height: 30%;\n transform-style: preserve-3d;\n opacity: 0;\n transition: opacity 0.3s ease;\n}\n\n.cube-face {\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 162, 255, 0.3);\n border: 1px solid rgba(0, 162, 255, 0.5);\n box-shadow: 0 0 5px rgba(0, 162, 255, 0.3);\n transition: all 0.3s ease;\n}\n\n.holo-checkbox-input:checked + .holo-checkbox .cube-transform {\n opacity: 1;\n animation: cube-rotate 5s infinite linear;\n}\n\n.holo-checkbox-input:checked + .holo-checkbox .cube-face {\n background-color: rgba(0, 255, 136, 0.3);\n border-color: rgba(0, 255, 136, 0.5);\n box-shadow: 0 0 5px rgba(0, 255, 136, 0.3);\n}\n\n.holo-checkbox-input:checked + .holo-checkbox .cube-face:nth-child(1) {\n transform: translateZ(15px);\n}\n\n.holo-checkbox-input:checked + .holo-checkbox .cube-face:nth-child(2) {\n transform: rotateY(180deg) translateZ(15px);\n}\n\n.holo-checkbox-input:checked + .holo-checkbox .cube-face:nth-child(3) {\n transform: rotateY(90deg) translateZ(15px);\n}\n\n.holo-checkbox-input:checked + .holo-checkbox .cube-face:nth-child(4) {\n transform: rotateY(-90deg) translateZ(15px);\n}\n\n.holo-checkbox-input:checked + .holo-checkbox .cube-face:nth-child(5) {\n transform: rotateX(90deg) translateZ(15px);\n}\n\n.holo-checkbox-input:checked + .holo-checkbox .cube-face:nth-child(6) {\n transform: rotateX(-90deg) translateZ(15px);\n}\n\n@keyframes cube-rotate {\n 0% {\n transform: rotateX(0) rotateY(0) rotateZ(0);\n }\n 100% {\n transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);\n }\n}\n\n.frequency-spectrum {\n display: flex;\n justify-content: center;\n align-items: flex-end;\n height: 40px;\n width: 260px;\n margin-top: 30px;\n gap: 3px;\n}\n\n.frequency-bar {\n width: 4px;\n height: 5px;\n background: rgba(0, 162, 255, 0.5);\n border-radius: 2px 2px 0 0;\n transition:\n height 0.3s ease,\n background 0.3s ease;\n}\n\n.holo-checkbox-input:checked ~ .frequency-spectrum .frequency-bar {\n background: rgba(0, 255, 136, 0.5);\n animation: frequency-animation 1.5s infinite ease;\n}\n\n.holo-checkbox-input:checked ~ .frequency-spectrum .frequency-bar:nth-child(1) {\n animation-delay: 0.1s;\n}\n.holo-checkbox-input:checked ~ .frequency-spectrum .frequency-bar:nth-child(2) {\n animation-delay: 0.2s;\n}\n.holo-checkbox-input:checked ~ .frequency-spectrum .frequency-bar:nth-child(3) {\n animation-delay: 0.1s;\n}\n.holo-checkbox-input:checked ~ .frequency-spectrum .frequency-bar:nth-child(4) {\n animation-delay: 0.3s;\n}\n.holo-checkbox-input:checked ~ .frequency-spectrum .frequency-bar:nth-child(5) {\n animation-delay: 0.5s;\n}\n.holo-checkbox-input:checked ~ .frequency-spectrum .frequency-bar:nth-child(6) {\n animation-delay: 0.2s;\n}\n.holo-checkbox-input:checked ~ .frequency-spectrum .frequency-bar:nth-child(7) {\n animation-delay: 0.4s;\n}\n.holo-checkbox-input:checked ~ .frequency-spectrum .frequency-bar:nth-child(8) {\n animation-delay: 0.1s;\n}\n.holo-checkbox-input:checked ~ .frequency-spectrum .frequency-bar:nth-child(9) {\n animation-delay: 0.3s;\n}\n.holo-checkbox-input:checked\n ~ .frequency-spectrum\n .frequency-bar:nth-child(10) {\n animation-delay: 0.2s;\n}\n.holo-checkbox-input:checked\n ~ .frequency-spectrum\n .frequency-bar:nth-child(11) {\n animation-delay: 0.5s;\n}\n.holo-checkbox-input:checked\n ~ .frequency-spectrum\n .frequency-bar:nth-child(12) {\n animation-delay: 0.3s;\n}\n.holo-checkbox-input:checked\n ~ .frequency-spectrum\n .frequency-bar:nth-child(13) {\n animation-delay: 0.1s;\n}\n.holo-checkbox-input:checked\n ~ .frequency-spectrum\n .frequency-bar:nth-child(14) {\n animation-delay: 0.4s;\n}\n.holo-checkbox-input:checked\n ~ .frequency-spectrum\n .frequency-bar:nth-child(15) {\n animation-delay: 0.2s;\n}\n.holo-checkbox-input:checked\n ~ .frequency-spectrum\n .frequency-bar:nth-child(16) {\n animation-delay: 0.3s;\n}\n.holo-checkbox-input:checked\n ~ .frequency-spectrum\n .frequency-bar:nth-child(17) {\n animation-delay: 0.1s;\n}\n.holo-checkbox-input:checked\n ~ .frequency-spectrum\n .frequency-bar:nth-child(18) {\n animation-delay: 0.5s;\n}\n.holo-checkbox-input:checked\n ~ .frequency-spectrum\n .frequency-bar:nth-child(19) {\n animation-delay: 0.2s;\n}\n.holo-checkbox-input:checked\n ~ .frequency-spectrum\n .frequency-bar:nth-child(20) {\n animation-delay: 0.4s;\n}\n\n@keyframes frequency-animation {\n 0% {\n height: 5px;\n }\n 50% {\n height: 35px;\n }\n 100% {\n height: 5px;\n }\n}\n\n.holo-label {\n position: absolute;\n bottom: -60px;\n font-size: 12px;\n font-weight: 700;\n color: rgba(0, 162, 255, 0.8);\n letter-spacing: 1px;\n text-shadow: 0 0 5px rgba(0, 162, 255, 0.5);\n transition: all 0.3s ease;\n}\n\n.holo-checkbox-input:checked ~ .holo-label {\n color: rgba(0, 255, 136, 0.8);\n text-shadow: 0 0 5px rgba(0, 255, 136, 0.5);\n}\n\n.data-chips {\n position: absolute;\n width: 100%;\n height: 100%;\n pointer-events: none;\n color: white;\n}\n\n.data-chip {\n position: absolute;\n padding: 5px 8px;\n background-color: rgba(0, 24, 55, 0.7);\n border: 1px solid rgba(0, 162, 255, 0.5);\n border-radius: 4px;\n font-size: 10px;\n opacity: 0;\n transform: scale(0);\n transition: all 0.3s ease;\n}\n\n.holo-checkbox-input:checked ~ .data-chips .data-chip {\n animation: chip-appear 0.5s ease forwards;\n border-color: rgba(0, 255, 136, 0.5);\n}\n\n@keyframes chip-appear {\n 0% {\n opacity: 0;\n transform: scale(0);\n }\n 100% {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n.data-chip:nth-child(1) {\n top: -60px;\n left: 50px;\n animation-delay: 0.5s;\n}\n\n.data-chip:nth-child(2) {\n top: 40px;\n left: -120px;\n animation-delay: 1.2s;\n}\n\n.data-chip:nth-child(3) {\n top: 120px;\n left: 60px;\n animation-delay: 1.8s;\n}\n\n.data-chip:nth-child(4) {\n top: 20px;\n left: 120px;\n animation-delay: 2.3s;\n}\n"}

evil-snail-36

👁 实时预览

📝 源代码