{"html":"

\n\n

\n 01001001 01001110 01001001 01010100 01001001 01000001 01001100 01001001\n 01011010 01001001 01001110 01000111\n

\n function initHolographicMatrix() { connectNodes(); renderQuantumState(); }\n

\n 01010011 01011001 01010011 01010100 01000101 01001101 00100000 01001100\n 01001111 01000001 01000100 01001001 01001110 01000111\n

\n class QuantumProcessor { constructor() { this.entanglement = new Map(); }}\n

\n 01010010 01000101 01001110 01000100 01000101 01010010 01001001 01001110\n 01000111 00100000 01001000 01001111 01001100 01001111\n

\n const matrix = [1.2, 0.8, 3.1, 2.7, 5.9, 4.3, 7.2, 9.0];\n

\n 01010000 01010010 01001111 01000011 01000101 01010011 01010011 01001001\n 01001110 01000111 00100000 01000100 01000001 01010100 01000001\n

\n async function loadHolographicData() { await fetch('/api/quantum'); }\n

\n\n

\n 0xFF\n

\n 0x0A\n

\n 0xB4\n

\n 0x3D\n

\n 0xC2\n

\n 0x19\n

\n\n

SYSTEM IITIALIZATION

\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 {\n position: absolute;\n background: white;\n border-radius: 50%;\n filter: blur(1px);\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.loader-container {\n position: relative;\n width: 400px;\n height: 400px;\n display: flex;\n justify-content: center;\n align-items: center;\n perspective: 800px;\n transform-style: preserve-3d;\n z-index: 10;\n}\n\n.hologram-platform {\n position: absolute;\n width: 300px;\n height: 60px;\n bottom: -80px;\n border-radius: 50%;\n background: radial-gradient(\n ellipse,\n rgba(0, 221, 255, 0.3) 0%,\n rgba(0, 0, 0, 0) 70%\n );\n box-shadow: 0 0 30px rgba(0, 221, 255, 0.4);\n transform: rotateX(60deg);\n filter: blur(8px);\n animation: platform-glow 4s infinite alternate;\n}\n\n.platform-rings {\n position: absolute;\n width: 300px;\n height: 60px;\n bottom: -80px;\n transform: rotateX(60deg);\n}\n\n.platform-ring {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n border: 2px solid transparent;\n opacity: 0.4;\n animation: platform-ring-pulse 4s infinite alternate;\n}\n\n.platform-ring:nth-child(1) {\n border-color: rgba(0, 221, 255, 0.4);\n animation-delay: -1s;\n}\n\n.platform-ring:nth-child(2) {\n width: 85%;\n height: 85%;\n top: 7.5%;\n left: 7.5%;\n border-color: rgba(255, 0, 255, 0.4);\n animation-delay: -2s;\n}\n\n.platform-ring:nth-child(3) {\n width: 70%;\n height: 70%;\n top: 15%;\n left: 15%;\n border-color: rgba(0, 221, 255, 0.4);\n animation-delay: -3s;\n}\n\n@keyframes platform-ring-pulse {\n 0% {\n transform: scale(1);\n opacity: 0.2;\n }\n 100% {\n transform: scale(1.05);\n opacity: 0.6;\n }\n}\n\n@keyframes platform-glow {\n 0% {\n box-shadow: 0 0 30px rgba(0, 221, 255, 0.4);\n background: radial-gradient(\n ellipse,\n rgba(0, 221, 255, 0.3) 0%,\n rgba(0, 0, 0, 0) 70%\n );\n }\n 100% {\n box-shadow: 0 0 50px rgba(255, 0, 255, 0.6);\n background: radial-gradient(\n ellipse,\n rgba(255, 0, 255, 0.3) 0%,\n rgba(0, 0, 0, 0) 70%\n );\n }\n}\n\n.holo-container {\n position: relative;\n width: 200px;\n height: 200px;\n transform-style: preserve-3d;\n animation: float-container 6s infinite ease-in-out;\n}\n\n@keyframes float-container {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(-20px);\n }\n}\n\n.holo-sphere {\n position: relative;\n width: 180px;\n height: 180px;\n left: 15px;\n top: 15px;\n transform-style: preserve-3d;\n animation: rotate 15s infinite linear;\n}\n\n.holo-ring {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n border: 2px solid transparent;\n box-shadow:\n 0 0 20px rgba(255, 0, 222, 0.5),\n 0 0 20px rgba(0, 221, 255, 0.5);\n filter: blur(1px);\n animation: pulse 3s infinite ease-in-out alternate;\n transform-style: preserve-3d;\n}\n\n.holo-ring:nth-child(1) {\n border-top-color: #ff00de;\n border-bottom-color: #00ddff;\n animation-delay: -0.5s;\n}\n\n.holo-ring:nth-child(2) {\n border-top-color: #00ddff;\n border-bottom-color: #ff00de;\n animation-delay: -1s;\n transform: rotateX(60deg);\n}\n\n.holo-ring:nth-child(3) {\n border-top-color: #ff00de;\n border-bottom-color: #00ddff;\n animation-delay: -1.5s;\n transform: rotateY(60deg);\n}\n\n.holo-ring:nth-child(4) {\n width: 90%;\n height: 90%;\n top: 5%;\n left: 5%;\n border-left-color: #00ff77;\n border-right-color: #ff5500;\n animation-delay: -2s;\n transform: rotateZ(45deg);\n}\n\n.holo-ring:nth-child(5) {\n width: 110%;\n height: 110%;\n top: -5%;\n left: -5%;\n border-left-color: #ff00b3;\n border-right-color: #3300ff;\n animation-delay: -2.5s;\n transform: rotateX(30deg) rotateY(30deg);\n}\n\n.energy-ring {\n position: absolute;\n width: 120%;\n height: 120%;\n top: -10%;\n left: -10%;\n border-radius: 50%;\n border: none;\n opacity: 0.5;\n transform-style: preserve-3d;\n animation: energy-rotation 10s infinite linear;\n}\n\n.energy-ring::before,\n.energy-ring::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background: conic-gradient(\n transparent 0deg,\n rgba(0, 221, 255, 0.8) 20deg,\n transparent 40deg,\n transparent 140deg,\n rgba(255, 0, 222, 0.8) 160deg,\n transparent 180deg,\n transparent 280deg,\n rgba(0, 221, 255, 0.8) 300deg,\n transparent 320deg\n );\n filter: blur(2px);\n animation: energy-pulse 6s infinite alternate;\n}\n\n.energy-ring::after {\n transform: rotate(60deg);\n animation-delay: -3s;\n}\n\n@keyframes energy-rotation {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes energy-pulse {\n 0% {\n opacity: 0.3;\n }\n 100% {\n opacity: 0.7;\n }\n}\n\n.holo-particles {\n position: absolute;\n width: 100%;\n height: 100%;\n transform-style: preserve-3d;\n}\n\n.holo-particle {\n position: absolute;\n background: radial-gradient(\n circle,\n rgba(255, 255, 255, 0.9) 0%,\n rgba(255, 255, 255, 0) 70%\n );\n border-radius: 50%;\n filter: blur(1px);\n opacity: 0;\n transform-style: preserve-3d;\n animation: particle-float 4s infinite ease-in-out;\n}\n\n.holo-particle:nth-child(1) {\n width: 8px;\n height: 8px;\n top: 20%;\n left: 30%;\n animation-delay: 0.1s;\n}\n\n.holo-particle:nth-child(2) {\n width: 6px;\n height: 6px;\n top: 70%;\n left: 60%;\n animation-delay: 0.7s;\n}\n\n.holo-particle:nth-child(3) {\n width: 10px;\n height: 10px;\n top: 40%;\n left: 80%;\n animation-delay: 1.3s;\n}\n\n.holo-particle:nth-child(4) {\n width: 5px;\n height: 5px;\n top: 80%;\n left: 25%;\n animation-delay: 1.9s;\n}\n\n.holo-particle:nth-child(5) {\n width: 7px;\n height: 7px;\n top: 30%;\n left: 50%;\n animation-delay: 2.5s;\n}\n\n.holo-particle:nth-child(6) {\n width: 9px;\n height: 9px;\n top: 60%;\n left: 40%;\n animation-delay: 3.1s;\n}\n\n.holo-particle:nth-child(7) {\n width: 4px;\n height: 4px;\n top: 50%;\n left: 75%;\n animation-delay: 3.7s;\n}\n\n.holo-particle:nth-child(8) {\n width: 8px;\n height: 8px;\n top: 25%;\n left: 85%;\n animation-delay: 4.3s;\n}\n\n@keyframes particle-float {\n 0%,\n 100% {\n transform: translateZ(0) translateX(0) translateY(0) scale(0.8);\n opacity: 0;\n }\n 25% {\n opacity: 1;\n transform: translateZ(30px) translateX(10px) translateY(-10px) scale(1);\n }\n 50% {\n transform: translateZ(60px) translateX(20px) translateY(-20px) scale(1.2);\n opacity: 0.8;\n }\n 75% {\n opacity: 0.4;\n transform: translateZ(30px) translateX(10px) translateY(-10px) scale(1);\n }\n}\n\n.core {\n position: absolute;\n width: 50px;\n height: 50px;\n background: radial-gradient(\n circle,\n #ffffff 0%,\n rgba(255, 255, 255, 0.8) 30%,\n rgba(255, 255, 255, 0) 100%\n );\n border-radius: 50%;\n filter: blur(5px);\n animation: core-pulse 1.5s infinite ease-in-out alternate;\n z-index: 5;\n box-shadow:\n 0 0 20px rgba(255, 255, 255, 0.8),\n 0 0 40px rgba(0, 221, 255, 0.6),\n 0 0 60px rgba(255, 0, 222, 0.4);\n}\n\n.core::before {\n content: \"\";\n position: absolute;\n width: 60px;\n height: 60px;\n top: -5px;\n left: -5px;\n border-radius: 50%;\n background: transparent;\n border: 2px solid rgba(255, 255, 255, 0.2);\n box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.6);\n animation: core-rotate 3s infinite linear;\n}\n\n.core::after {\n content: \"\";\n position: absolute;\n width: 70px;\n height: 70px;\n top: -10px;\n left: -10px;\n border-radius: 50%;\n background: transparent;\n border: 1px solid rgba(255, 255, 255, 0.1);\n box-shadow: inset 0 0 10px rgba(0, 221, 255, 0.6);\n animation: core-rotate 5s infinite linear reverse;\n}\n\n@keyframes core-rotate {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes core-pulse {\n 0%,\n 100% {\n transform: scale(0.8);\n opacity: 0.8;\n filter: blur(5px);\n }\n 50% {\n transform: scale(1.3);\n opacity: 1;\n filter: blur(7px);\n }\n}\n\n.scan-line-horizontal {\n position: absolute;\n width: 100%;\n height: 3px;\n background: linear-gradient(\n 90deg,\n rgba(0, 0, 0, 0) 0%,\n rgba(255, 0, 222, 0.8) 20%,\n rgba(255, 255, 255, 1) 50%,\n rgba(0, 221, 255, 0.8) 80%,\n rgba(0, 0, 0, 0) 100%\n );\n animation: scan-horizontal 3s infinite linear;\n z-index: 10;\n box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);\n}\n\n.scan-line-vertical {\n position: absolute;\n height: 100%;\n width: 3px;\n background: linear-gradient(\n 180deg,\n rgba(0, 0, 0, 0) 0%,\n rgba(255, 0, 222, 0.8) 20%,\n rgba(255, 255, 255, 1) 50%,\n rgba(0, 221, 255, 0.8) 80%,\n rgba(0, 0, 0, 0) 100%\n );\n animation: scan-vertical 3.5s infinite linear;\n z-index: 10;\n box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);\n}\n\n@keyframes scan-horizontal {\n 0% {\n transform: translateY(-100px);\n opacity: 0;\n }\n 20% {\n opacity: 0.8;\n }\n 80% {\n opacity: 0.8;\n }\n 100% {\n transform: translateY(100px);\n opacity: 0;\n }\n}\n\n@keyframes scan-vertical {\n 0% {\n transform: translateX(-100px);\n opacity: 0;\n }\n 20% {\n opacity: 0.8;\n }\n 80% {\n opacity: 0.8;\n }\n 100% {\n transform: translateX(100px);\n opacity: 0;\n }\n}\n\n.scan-data {\n position: absolute;\n font-size: 8px;\n color: rgba(0, 221, 255, 0.7);\n text-transform: uppercase;\n letter-spacing: 1px;\n opacity: 0;\n animation: scan-data 3s infinite linear;\n z-index: 10;\n transform-style: preserve-3d;\n text-shadow: 0 0 5px rgba(0, 221, 255, 0.5);\n}\n\n.scan-data:nth-child(1) {\n top: 30%;\n left: 65%;\n animation-delay: -0.5s;\n}\n\n.scan-data:nth-child(2) {\n top: 65%;\n left: 35%;\n animation-delay: -1.5s;\n}\n\n.scan-data:nth-child(3) {\n top: 20%;\n left: 40%;\n animation-delay: -2.5s;\n}\n\n@keyframes scan-data {\n 0% {\n opacity: 0;\n transform: scale(0.8);\n }\n 10%,\n 90% {\n opacity: 0.8;\n }\n 100% {\n opacity: 0;\n transform: scale(1.2);\n }\n}\n\n.hex-grid {\n position: absolute;\n width: 100%;\n height: 100%;\n opacity: 0.3;\n background-image: linear-gradient(\n 30deg,\n rgba(0, 221, 255, 0.5) 12%,\n transparent 12.5%,\n transparent 87%,\n rgba(0, 221, 255, 0.5) 87.5%,\n rgba(0, 221, 255, 0.5)\n ),\n linear-gradient(\n 150deg,\n rgba(0, 221, 255, 0.5) 12%,\n transparent 12.5%,\n transparent 87%,\n rgba(0, 221, 255, 0.5) 87.5%,\n rgba(0, 221, 255, 0.5)\n ),\n linear-gradient(\n 30deg,\n rgba(0, 221, 255, 0.5) 12%,\n transparent 12.5%,\n transparent 87%,\n rgba(0, 221, 255, 0.5) 87.5%,\n rgba(0, 221, 255, 0.5)\n ),\n linear-gradient(\n 150deg,\n rgba(0, 221, 255, 0.5) 12%,\n transparent 12.5%,\n transparent 87%,\n rgba(0, 221, 255, 0.5) 87.5%,\n rgba(0, 221, 255, 0.5)\n ),\n linear-gradient(\n 60deg,\n rgba(0, 221, 255, 0.2) 25%,\n transparent 25.5%,\n transparent 75%,\n rgba(0, 221, 255, 0.2) 75%,\n rgba(0, 221, 255, 0.2)\n ),\n linear-gradient(\n 60deg,\n rgba(0, 221, 255, 0.2) 25%,\n transparent 25.5%,\n transparent 75%,\n rgba(0, 221, 255, 0.2) 75%,\n rgba(0, 221, 255, 0.2)\n );\n background-size: 20px 35px;\n background-position:\n 0 0,\n 0 0,\n 10px 17.5px,\n 10px 17.5px,\n 0 0,\n 10px 17.5px;\n animation: hex-pulse 4s infinite alternate;\n filter: drop-shadow(0 0 2px rgba(0, 221, 255, 0.5));\n}\n\n@keyframes hex-pulse {\n 0% {\n opacity: 0.2;\n transform: scale(1);\n }\n 100% {\n opacity: 0.4;\n transform: scale(1.1);\n }\n}\n\n.lightning {\n position: absolute;\n width: 100%;\n height: 100%;\n filter: blur(1px);\n transform-style: preserve-3d;\n opacity: 0;\n animation: lightning 5s infinite;\n z-index: 11;\n}\n\n@keyframes lightning {\n 0%,\n 100% {\n opacity: 0;\n }\n 98% {\n opacity: 0;\n }\n 99% {\n opacity: 0.8;\n filter: brightness(3);\n }\n}\n\n.lightning::before,\n.lightning::after {\n content: \"\";\n position: absolute;\n background: white;\n filter: blur(1px);\n box-shadow:\n 0 0 10px #00ddff,\n 0 0 20px rgba(255, 255, 255, 0.8);\n}\n\n.lightning::before {\n width: 3px;\n height: 100%;\n left: 50%;\n transform: translateX(-50%) rotateY(90deg);\n background: linear-gradient(\n 180deg,\n rgba(0, 255, 255, 0) 0%,\n rgba(0, 255, 255, 1) 40%,\n white 50%,\n rgba(255, 0, 255, 1) 60%,\n rgba(255, 0, 255, 0) 100%\n );\n}\n\n.lightning::after {\n width: 100%;\n height: 3px;\n top: 50%;\n transform: translateY(-50%) rotateX(90deg);\n background: linear-gradient(\n 90deg,\n rgba(0, 255, 255, 0) 0%,\n rgba(0, 255, 255, 1) 40%,\n white 50%,\n rgba(255, 0, 255, 1) 60%,\n rgba(255, 0, 255, 0) 100%\n );\n}\n\n.glitch-effect {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n opacity: 0;\n animation: glitch 7s infinite;\n pointer-events: none;\n z-index: 12;\n background: linear-gradient(\n 45deg,\n rgba(255, 0, 222, 0.3) 0%,\n transparent 20%,\n rgba(0, 221, 255, 0.3) 40%,\n transparent 60%,\n rgba(255, 0, 222, 0.3) 80%,\n transparent 100%\n );\n}\n\n@keyframes glitch {\n 0%,\n 100% {\n opacity: 0;\n }\n 94%,\n 96% {\n opacity: 0;\n }\n 94.5% {\n opacity: 0.8;\n transform: translate(5px, -5px) skew(-5deg, 5deg);\n }\n 95% {\n opacity: 0.8;\n transform: translate(-5px, 5px) skew(5deg, -5deg);\n }\n 95.5% {\n opacity: 0.8;\n transform: translate(5px, 0) skew(-5deg, 0);\n }\n}\n\n.data-circle {\n position: absolute;\n width: 200px;\n height: 200px;\n border-radius: 50%;\n border: 1px solid rgba(0, 221, 255, 0.2);\n opacity: 0.7;\n transform-style: preserve-3d;\n}\n\n.data-circle::before {\n content: \"\";\n position: absolute;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background: rgba(0, 221, 255, 0.7);\n filter: blur(2px);\n animation: data-blip 5s infinite linear;\n}\n\n@keyframes data-blip {\n 0% {\n transform: rotate(0deg) translateX(100px);\n opacity: 0;\n }\n 10% {\n opacity: 1;\n }\n 50% {\n opacity: 0.5;\n }\n 90% {\n opacity: 1;\n }\n 100% {\n transform: rotate(360deg) translateX(100px);\n opacity: 0;\n }\n}\n\n@keyframes rotate {\n 0% {\n transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);\n }\n 100% {\n transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);\n }\n}\n\n.code-lines {\n position: absolute;\n width: 200%;\n height: 200%;\n top: -50%;\n left: -50%;\n pointer-events: none;\n perspective: 500px;\n transform-style: preserve-3d;\n z-index: 8;\n}\n\n.code-line {\n position: absolute;\n font-size: 10px;\n color: rgba(0, 221, 255, 0.7);\n white-space: nowrap;\n text-shadow: 0 0 5px rgba(0, 221, 255, 0.3);\n animation: code-scroll 15s infinite linear;\n opacity: 0;\n}\n\n.code-line:nth-child(1) {\n top: 10%;\n animation-duration: 14s;\n color: #00ddff;\n}\n\n.code-line:nth-child(2) {\n top: 20%;\n animation-duration: 15s;\n animation-delay: -1s;\n}\n\n.code-line:nth-child(3) {\n top: 30%;\n animation-duration: 16s;\n animation-delay: -2s;\n color: #ff00de;\n}\n\n.code-line:nth-child(4) {\n top: 40%;\n animation-duration: 14s;\n animation-delay: -3s;\n}\n\n.code-line:nth-child(5) {\n top: 50%;\n animation-duration: 10s;\n animation-delay: -3s;\n}\n\n.code-line:nth-child(6) {\n top: 60%;\n animation-duration: 13s;\n animation-delay: -7s;\n color: #ff00de;\n}\n\n.code-line:nth-child(7) {\n top: 70%;\n animation-duration: 11s;\n animation-delay: -4s;\n}\n\n.code-line:nth-child(8) {\n top: 80%;\n animation-duration: 16s;\n animation-delay: -9s;\n color: #ff00de;\n}\n\n@keyframes code-scroll {\n 0% {\n transform: translateX(200px) rotateY(20deg);\n opacity: 0;\n }\n 10% {\n opacity: 0.7;\n }\n 90% {\n opacity: 0.7;\n }\n 100% {\n transform: translateX(-500px) rotateY(20deg);\n opacity: 0;\n }\n}\n\n.loading-text {\n position: absolute;\n bottom: -85px;\n text-align: center;\n font-size: 14px;\n letter-spacing: 2px;\n color: rgba(255, 255, 255, 0.8);\n text-shadow: 0 0 10px rgba(0, 221, 255, 0.6);\n animation: text-flicker 2s infinite;\n}\n\n@keyframes text-flicker {\n 0%,\n 100% {\n opacity: 1;\n }\n 8%,\n 10% {\n opacity: 0.6;\n }\n 9% {\n opacity: 0.9;\n }\n 52%,\n 54% {\n opacity: 0.6;\n }\n 53% {\n opacity: 0.9;\n }\n}\n\n.progress-container {\n position: absolute;\n bottom: -110px;\n width: 200px;\n height: 4px;\n background: rgba(255, 255, 255, 0.1);\n border-radius: 2px;\n overflow: hidden;\n}\n\n.progress-bar {\n height: 100%;\n width: 0;\n background: linear-gradient(90deg, #00ddff, #ff00de);\n box-shadow: 0 0 10px rgba(0, 221, 255, 0.7);\n animation: progress 5s linear infinite;\n}\n\n@keyframes progress {\n 0% {\n width: 0;\n }\n 20% {\n width: 20%;\n }\n 40% {\n width: 38%;\n }\n 50% {\n width: 52%;\n }\n 60% {\n width: 65%;\n }\n 75% {\n width: 82%;\n }\n 100% {\n width: 100%;\n }\n}\n\n.corner-decorations {\n position: absolute;\n width: 300px;\n height: 300px;\n pointer-events: none;\n}\n\n.corner {\n position: absolute;\n width: 20px;\n height: 20px;\n border-style: solid;\n border-width: 2px;\n border-color: rgba(0, 221, 255, 0.5);\n animation: corner-pulse 3s infinite alternate;\n}\n\n.corner:nth-child(1) {\n top: 0;\n left: 0;\n border-right: none;\n border-bottom: none;\n}\n\n.corner:nth-child(2) {\n top: 0;\n right: 0;\n border-left: none;\n border-bottom: none;\n}\n\n.corner:nth-child(3) {\n bottom: 0;\n left: 0;\n border-right: none;\n border-top: none;\n}\n\n.corner:nth-child(4) {\n bottom: 0;\n right: 0;\n border-left: none;\n border-top: none;\n}\n\n@keyframes corner-pulse {\n 0% {\n border-color: rgba(0, 221, 255, 0.5);\n width: 20px;\n height: 20px;\n }\n 100% {\n border-color: rgba(255, 0, 222, 0.5);\n width: 30px;\n height: 30px;\n }\n}\n\n.projection-beams {\n position: absolute;\n width: 300px;\n height: 300px;\n bottom: -80px;\n transform-style: preserve-3d;\n opacity: 0.3;\n pointer-events: none;\n}\n\n.beam {\n position: absolute;\n width: 1px;\n height: 250px;\n background: linear-gradient(\n 0deg,\n rgba(0, 221, 255, 0.8) 0%,\n rgba(255, 255, 255, 0.4) 40%,\n rgba(0, 0, 0, 0) 100%\n );\n bottom: 0;\n transform-origin: bottom;\n filter: blur(1px);\n opacity: 0.7;\n}\n\n.beam:nth-child(1) {\n left: 30%;\n transform: rotateY(10deg) rotateX(-30deg);\n animation: beam-flicker 4s infinite alternate;\n animation-delay: 0.5s;\n}\n\n.beam:nth-child(2) {\n left: 45%;\n transform: rotateY(-5deg) rotateX(-25deg);\n animation: beam-flicker 3s infinite alternate;\n animation-delay: 1.5s;\n}\n\n.beam:nth-child(3) {\n left: 55%;\n transform: rotateY(5deg) rotateX(-25deg);\n animation: beam-flicker 4s infinite alternate;\n animation-delay: 0.7s;\n}\n\n.beam:nth-child(4) {\n left: 70%;\n transform: rotateY(-10deg) rotateX(-30deg);\n animation: beam-flicker 3.5s infinite alternate;\n animation-delay: 2s;\n}\n\n@keyframes beam-flicker {\n 0%,\n 100% {\n opacity: 0.3;\n }\n 50% {\n opacity: 0.7;\n }\n}\n\n.holo-ui {\n position: absolute;\n top: -150px;\n left: -350px;\n width: 200px;\n height: 300px;\n transform: rotateY(30deg);\n opacity: 0.7;\n pointer-events: none;\n}\n\n.ui-element {\n position: absolute;\n background: rgba(0, 221, 255, 0.2);\n border: 1px solid rgba(0, 221, 255, 0.5);\n border-radius: 4px;\n animation: ui-fade 3s infinite alternate;\n}\n\n.ui-element:nth-child(1) {\n top: 20px;\n left: 20px;\n width: 150px;\n height: 20px;\n animation-delay: 0.2s;\n}\n\n.ui-element:nth-child(2) {\n top: 50px;\n left: 20px;\n width: 100px;\n height: 100px;\n animation-delay: 0.4s;\n}\n\n.ui-element:nth-child(3) {\n top: 160px;\n left: 20px;\n width: 120px;\n height: 30px;\n animation-delay: 0.6s;\n}\n\n.ui-element:nth-child(4) {\n top: 200px;\n left: 20px;\n width: 80px;\n height: 80px;\n animation-delay: 0.8s;\n}\n\n@keyframes ui-fade {\n 0% {\n opacity: 0.5;\n border-color: rgba(0, 221, 255, 0.5);\n }\n 100% {\n opacity: 0.8;\n border-color: rgba(255, 0, 222, 0.5);\n }\n}\n\n.holo-ui-right {\n position: absolute;\n top: -150px;\n right: -350px;\n width: 200px;\n height: 300px;\n transform: rotateY(-30deg) scaleX(-1);\n opacity: 0.7;\n pointer-events: none;\n}\n\n.holo-numbers {\n position: absolute;\n width: 400px;\n height: 400px;\n transform-style: preserve-3d;\n perspective: 1000px;\n pointer-events: none;\n}\n\n.number {\n position: absolute;\n font-size: 10px;\n color: rgba(0, 221, 255, 0.8);\n text-shadow: 0 0 5px rgba(0, 221, 255, 0.6);\n animation: float-number 8s infinite linear;\n opacity: 0;\n}\n\n@keyframes float-number {\n 0% {\n opacity: 0;\n transform: translateZ(100px) translateY(0);\n }\n 10% {\n opacity: 0.7;\n }\n 90% {\n opacity: 0.7;\n }\n 100% {\n opacity: 0;\n transform: translateZ(-100px) translateY(-50px);\n }\n}\n\n.data-cube {\n position: absolute;\n width: 40px;\n height: 40px;\n transform-style: preserve-3d;\n animation: cube-rotate 10s infinite linear;\n top: -100px;\n right: -100px;\n}\n\n.cube-face {\n position: absolute;\n width: 40px;\n height: 40px;\n background: rgba(0, 221, 255, 0.1);\n border: 1px solid rgba(0, 221, 255, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 10px;\n color: rgba(0, 221, 255, 0.8);\n}\n\n.cube-face:nth-child(1) {\n transform: translateZ(20px);\n}\n.cube-face:nth-child(2) {\n transform: rotateY(180deg) translateZ(20px);\n}\n.cube-face:nth-child(3) {\n transform: rotateY(90deg) translateZ(20px);\n}\n.cube-face:nth-child(4) {\n transform: rotateY(-90deg) translateZ(20px);\n}\n.cube-face:nth-child(5) {\n transform: rotateX(90deg) translateZ(20px);\n}\n.cube-face:nth-child(6) {\n transform: rotateX(-90deg) translateZ(20px);\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.radial-indicators {\n position: absolute;\n width: 300px;\n height: 300px;\n pointer-events: none;\n}\n\n.radial-indicator {\n position: absolute;\n border-radius: 50%;\n border: 1px dashed rgba(0, 221, 255, 0.5);\n opacity: 0.3;\n animation: radial-pulse 4s infinite alternate;\n}\n\n.radial-indicator:nth-child(1) {\n width: 50px;\n height: 50px;\n top: calc(50% - 25px);\n left: calc(50% - 25px);\n animation-delay: 0.5s;\n}\n\n.radial-indicator:nth-child(2) {\n width: 100px;\n height: 100px;\n top: calc(50% - 50px);\n left: calc(50% - 50px);\n animation-delay: 1s;\n}\n\n.radial-indicator:nth-child(3) {\n width: 150px;\n height: 150px;\n top: calc(50% - 75px);\n left: calc(50% - 75px);\n animation-delay: 1.5s;\n}\n\n.radial-indicator:nth-child(4) {\n width: 200px;\n height: 200px;\n top: calc(50% - 100px);\n left: calc(50% - 100px);\n animation-delay: 2s;\n}\n\n@keyframes radial-pulse {\n 0% {\n transform: scale(1);\n opacity: 0.2;\n border-color: rgba(0, 221, 255, 0.5);\n }\n 100% {\n transform: scale(1.05);\n opacity: 0.5;\n border-color: rgba(255, 0, 222, 0.5);\n }\n}\n"}

warm-deer-37

👁 实时预览

📝 源代码