{"html":"

\n\n

0x89F2 EXEC PROTOCOL

SYS.QUANTUM.INIT()

\n 01011010 01000001 01010000 01010101 01010011 01001011\n

HOLO-CONN INITIALIZED

\n\n \n\n

\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.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.button-container {\n position: relative;\n perspective: 1000px;\n transform-style: preserve-3d;\n z-index: 10;\n}\n\n.holo-button {\n position: relative;\n width: 280px;\n height: 80px;\n background: rgba(10, 10, 30, 0.6);\n border: none;\n color: rgba(0, 221, 255, 0.8);\n font-family: \"Orbitron\", sans-serif;\n font-size: 18px;\n font-weight: 700;\n letter-spacing: 3px;\n text-shadow: 0 0 10px rgba(0, 221, 255, 0.5);\n cursor: pointer;\n overflow: hidden;\n transform-style: preserve-3d;\n transition: all 0.3s ease;\n -webkit-tap-highlight-color: transparent;\n outline: none;\n z-index: 5;\n border-radius: 2px;\n}\n\n.holo-button::before {\n content: \"\";\n position: absolute;\n top: 2px;\n left: 2px;\n right: 2px;\n bottom: 2px;\n background: linear-gradient(\n 45deg,\n rgba(0, 0, 40, 0.8) 0%,\n rgba(0, 20, 50, 0.8) 50%,\n rgba(5, 10, 30, 0.8) 100%\n );\n z-index: -1;\n border-radius: 1px;\n}\n\n.button-border {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: 2;\n}\n\n.button-border::before,\n.button-border::after {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n border: 2px solid transparent;\n box-shadow: 0 0 10px rgba(0, 221, 255, 0.7);\n animation: border-flow 3s infinite;\n}\n\n.button-border::before {\n border-top-color: rgba(0, 221, 255, 0.8);\n border-left-color: rgba(0, 221, 255, 0.8);\n filter: drop-shadow(0 0 5px rgba(0, 221, 255, 0.7));\n}\n\n.button-border::after {\n border-bottom-color: rgba(255, 0, 222, 0.8);\n border-right-color: rgba(255, 0, 222, 0.8);\n filter: drop-shadow(0 0 5px rgba(255, 0, 222, 0.7));\n}\n\n@keyframes border-flow {\n 0%,\n 100% {\n transform: scale(1);\n opacity: 1;\n }\n 50% {\n transform: scale(1.03);\n opacity: 0.8;\n }\n}\n\n.holo-glow {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 100%;\n height: 100%;\n background: radial-gradient(\n ellipse at center,\n rgba(0, 221, 255, 0.2) 0%,\n rgba(0, 0, 0, 0) 70%\n );\n pointer-events: none;\n z-index: 1;\n opacity: 0.7;\n filter: blur(10px);\n animation: glow-pulse 3s infinite alternate;\n}\n\n@keyframes glow-pulse {\n 0% {\n opacity: 0.4;\n filter: blur(10px) brightness(0.8);\n }\n 100% {\n opacity: 0.7;\n filter: blur(15px) brightness(1.2);\n }\n}\n\n/* Световые линии */\n.holo-lines {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow: hidden;\n pointer-events: none;\n z-index: 2;\n}\n\n.holo-line {\n position: absolute;\n background: rgba(0, 221, 255, 0.5);\n filter: blur(1px);\n}\n\n.holo-line:nth-child(1) {\n top: 0;\n left: 30px;\n width: 1.5px;\n height: 100%;\n animation: line-pulse 2s infinite alternate;\n animation-delay: -0.5s;\n}\n\n.holo-line:nth-child(2) {\n top: 0;\n right: 30px;\n width: 1.5px;\n height: 100%;\n animation: line-pulse 2s infinite alternate;\n animation-delay: -1s;\n}\n\n.holo-line:nth-child(3) {\n top: 15px;\n left: 0;\n width: 100%;\n height: 1.5px;\n animation: line-pulse 2s infinite alternate;\n animation-delay: -1.5s;\n}\n\n.holo-line:nth-child(4) {\n bottom: 15px;\n left: 0;\n width: 100%;\n height: 1.5px;\n animation: line-pulse 2s infinite alternate;\n animation-delay: -2s;\n}\n\n@keyframes line-pulse {\n 0% {\n opacity: 0.3;\n background: rgba(0, 221, 255, 0.5);\n }\n 100% {\n opacity: 0.7;\n background: rgba(255, 0, 222, 0.5);\n }\n}\n\n.scan-line {\n position: absolute;\n width: 100%;\n height: 3px;\n background: linear-gradient(\n 90deg,\n rgba(0, 0, 0, 0) 0%,\n rgba(0, 221, 255, 0.5) 20%,\n rgba(255, 255, 255, 0.8) 50%,\n rgba(255, 0, 222, 0.5) 80%,\n rgba(0, 0, 0, 0) 100%\n );\n top: 0;\n left: 0;\n filter: blur(1px);\n opacity: 0;\n z-index: 2;\n pointer-events: none;\n animation: scan 2s infinite;\n}\n\n@keyframes scan {\n 0% {\n top: -5px;\n opacity: 0;\n }\n 15% {\n opacity: 0.7;\n }\n 85% {\n opacity: 0.7;\n }\n 100% {\n top: 85px;\n opacity: 0;\n }\n}\n\n/* Частицы */\n.holo-particles {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n overflow: hidden;\n pointer-events: none;\n z-index: 1;\n}\n\n.holo-particle {\n position: absolute;\n background: white;\n box-shadow: 0 0 10px rgba(0, 221, 255, 0.7);\n border-radius: 50%;\n filter: blur(1px);\n opacity: 0;\n pointer-events: none;\n animation: particle-float 3s infinite ease-out;\n}\n\n.holo-particle:nth-child(1) {\n width: 3px;\n height: 3px;\n top: 70%;\n left: 30%;\n animation-delay: 0.2s;\n}\n\n.holo-particle:nth-child(2) {\n width: 2px;\n height: 2px;\n top: 60%;\n left: 40%;\n animation-delay: 0.5s;\n}\n\n.holo-particle:nth-child(3) {\n width: 4px;\n height: 4px;\n top: 80%;\n left: 60%;\n animation-delay: 0.8s;\n}\n\n.holo-particle:nth-child(4) {\n width: 2px;\n height: 2px;\n top: 70%;\n left: 70%;\n animation-delay: 1.1s;\n}\n\n.holo-particle:nth-child(5) {\n width: 3px;\n height: 3px;\n top: 75%;\n left: 50%;\n animation-delay: 1.4s;\n}\n\n.holo-particle:nth-child(6) {\n width: 2px;\n height: 2px;\n top: 65%;\n left: 65%;\n animation-delay: 1.7s;\n}\n\n@keyframes particle-float {\n 0% {\n transform: translateY(0) rotate(0deg);\n opacity: 0;\n }\n 10% {\n opacity: 0.8;\n }\n 100% {\n transform: translateY(-40px) rotate(360deg);\n opacity: 0;\n }\n}\n\n.button-hexagons {\n position: absolute;\n width: 380px;\n height: 180px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n pointer-events: none;\n z-index: 1;\n}\n\n.hexagon {\n position: absolute;\n width: 30px;\n height: 17.32px;\n background: transparent;\n border: 1.5px solid rgba(0, 221, 255, 0.3);\n transform: rotate(30deg);\n opacity: 0;\n animation: hexagon-pulse 3s infinite;\n}\n\n.hexagon::before,\n.hexagon::after {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n background: transparent;\n border: 1.5px solid rgba(0, 221, 255, 0.3);\n}\n\n.hexagon::before {\n transform: rotate(60deg);\n}\n\n.hexagon::after {\n transform: rotate(-60deg);\n}\n\n.hexagon:nth-child(1) {\n top: 20px;\n left: 20px;\n animation-delay: 0.1s;\n}\n\n.hexagon:nth-child(2) {\n top: 20px;\n right: 20px;\n animation-delay: 0.3s;\n}\n\n.hexagon:nth-child(3) {\n bottom: 20px;\n left: 20px;\n animation-delay: 0.5s;\n}\n\n.hexagon:nth-child(4) {\n bottom: 20px;\n right: 20px;\n animation-delay: 0.7s;\n}\n\n.hexagon:nth-child(5) {\n top: 50%;\n left: 0;\n transform: translate(0, -50%) rotate(30deg);\n animation-delay: 0.9s;\n}\n\n.hexagon:nth-child(6) {\n top: 50%;\n right: 0;\n transform: translate(0, -50%) rotate(30deg);\n animation-delay: 1.1s;\n}\n\n@keyframes hexagon-pulse {\n 0% {\n opacity: 0;\n transform: rotate(30deg) scale(0.8);\n }\n 20% {\n opacity: 0.5;\n transform: rotate(30deg) scale(1);\n }\n 80% {\n opacity: 0.5;\n transform: rotate(30deg) scale(1);\n }\n 100% {\n opacity: 0;\n transform: rotate(30deg) scale(1.2);\n }\n}\n\n.digital-glyphs {\n position: absolute;\n width: 400px;\n height: 200px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n pointer-events: none;\n z-index: 1;\n}\n\n.digital-glyph {\n position: absolute;\n color: rgba(0, 221, 255, 0.5);\n font-size: 10px;\n font-family: \"Orbitron\", monospace;\n white-space: nowrap;\n opacity: 0;\n animation: glyph-fade 4s infinite;\n}\n\n.digital-glyph:nth-child(1) {\n top: -30px;\n left: 60px;\n animation-delay: 0.2s;\n}\n\n.digital-glyph:nth-child(2) {\n top: -20px;\n right: 40px;\n animation-delay: 0.6s;\n}\n\n.digital-glyph:nth-child(3) {\n bottom: -30px;\n left: 80px;\n animation-delay: 1s;\n}\n\n.digital-glyph:nth-child(4) {\n bottom: -20px;\n right: 60px;\n animation-delay: 1.4s;\n}\n\n@keyframes glyph-fade {\n 0% {\n opacity: 0;\n transform: translateY(0);\n }\n 10% {\n opacity: 0.7;\n }\n 90% {\n opacity: 0.7;\n }\n 100% {\n opacity: 0;\n transform: translateY(-10px);\n }\n}\n\n.corner-accents {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\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, 221, 255, 0.7);\n}\n\n.corner-accent:nth-child(1) {\n top: 0;\n left: 0;\n border-right: none;\n border-bottom: none;\n}\n\n.corner-accent:nth-child(2) {\n top: 0;\n right: 0;\n border-left: none;\n border-bottom: none;\n}\n\n.corner-accent:nth-child(3) {\n bottom: 0;\n left: 0;\n border-right: none;\n border-top: none;\n}\n\n.corner-accent:nth-child(4) {\n bottom: 0;\n right: 0;\n border-left: none;\n border-top: none;\n}\n\n.button-glitch {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: transparent;\n pointer-events: none;\n z-index: 3;\n opacity: 0;\n animation: button-glitch 8s infinite;\n}\n\n@keyframes button-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, -2px) skew(-5deg, 2deg);\n background: rgba(255, 0, 222, 0.2);\n }\n 95% {\n opacity: 0.8;\n transform: translate(-5px, 2px) skew(5deg, -2deg);\n background: rgba(0, 221, 255, 0.2);\n }\n 95.5% {\n opacity: 0.8;\n transform: translate(2px, 0) skew(-2deg, 0);\n background: rgba(255, 255, 255, 0.2);\n }\n}\n\n/* Звуковые волны */\n.sound-wave {\n position: absolute;\n bottom: -30px;\n left: 0;\n width: 100%;\n height: 20px;\n display: flex;\n justify-content: center;\n align-items: center;\n pointer-events: none;\n}\n\n.wave-bar {\n width: 2px;\n height: 5px;\n background: rgba(0, 221, 255, 0.5);\n margin: 0 2px;\n border-radius: 1px;\n animation: wave-animation 1.5s infinite;\n}\n\n@keyframes wave-animation {\n 0%,\n 100% {\n height: 5px;\n }\n 50% {\n height: 15px;\n }\n}\n\n.wave-bar:nth-child(1) {\n animation-delay: 0.1s;\n}\n.wave-bar:nth-child(2) {\n animation-delay: 0.2s;\n}\n.wave-bar:nth-child(3) {\n animation-delay: 0.3s;\n}\n.wave-bar:nth-child(4) {\n animation-delay: 0.4s;\n}\n.wave-bar:nth-child(5) {\n animation-delay: 0.5s;\n}\n.wave-bar:nth-child(6) {\n animation-delay: 0.6s;\n}\n.wave-bar:nth-child(7) {\n animation-delay: 0.7s;\n}\n.wave-bar:nth-child(8) {\n animation-delay: 0.8s;\n}\n.wave-bar:nth-child(9) {\n animation-delay: 0.9s;\n}\n.wave-bar:nth-child(10) {\n animation-delay: 1s;\n}\n.wave-bar:nth-child(11) {\n animation-delay: 0.9s;\n}\n.wave-bar:nth-child(12) {\n animation-delay: 0.8s;\n}\n.wave-bar:nth-child(13) {\n animation-delay: 0.7s;\n}\n.wave-bar:nth-child(14) {\n animation-delay: 0.6s;\n}\n.wave-bar:nth-child(15) {\n animation-delay: 0.5s;\n}\n\n.holo-button:hover {\n color: rgb(255, 255, 255);\n text-shadow: 0 0 15px rgba(255, 255, 255, 0.8);\n transform: scale(1.02);\n transition: all 0.2s ease;\n}\n\n.holo-button:hover .holo-glow {\n background: radial-gradient(\n ellipse at center,\n rgba(255, 255, 255, 0.3) 0%,\n rgba(0, 221, 255, 0.2) 40%,\n rgba(0, 0, 0, 0) 70%\n );\n animation: glow-pulse-hover 1.5s infinite alternate;\n}\n\n@keyframes glow-pulse-hover {\n 0% {\n opacity: 0.6;\n filter: blur(10px) brightness(1);\n }\n 100% {\n opacity: 0.9;\n filter: blur(15px) brightness(1.5);\n }\n}\n\n.holo-button:active {\n transform: scale(0.98);\n transition: all 0.1s ease;\n}\n\n.holo-button:active .holo-glow {\n opacity: 1;\n background: radial-gradient(\n ellipse at center,\n rgba(255, 255, 255, 0.5) 0%,\n rgba(255, 0, 222, 0.3) 40%,\n rgba(0, 0, 0, 0) 70%\n );\n}\n\n.button-text {\n position: relative;\n z-index: 5;\n transform-style: preserve-3d;\n text-transform: uppercase;\n}\n"}

rude-walrus-96

👁 实时预览

📝 源代码