{"html":"

\n \n \n

\n PROTOCOL_TCP\n \n\n \n \n

\n PROTOCOL_UDP\n \n\n \n \n

\n [LEGACY_SYSTEM]\n \n

\n","css":"/* --- Root Variables & Wrapper --- */\n.glitch-radio-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.4s;\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/* --- Radio Container --- */\n.glitch-radio-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-radio-container input[type=\"radio\"] {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n/* --- Radio Circle Visual --- */\n.radio-circle {\n width: 1.5em;\n height: 1.5em;\n border: 2px solid var(--primary-color);\n border-radius: 50%;\n position: relative;\n transition: all 0.3s ease;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.radio-dot {\n width: 60%;\n height: 60%;\n background-color: var(--primary-color);\n border-radius: 50%;\n transform: scale(0);\n opacity: 0;\n transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);\n}\n\n.radio-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}\n\n/* --- Pulse Element --- */\n.pulse {\n position: absolute;\n inset: 0;\n border: 2px solid var(--primary-color);\n border-radius: 50%;\n opacity: 0;\n}\n\n/* --- Checked State --- */\n.glitch-radio-container input:checked + .radio-circle .radio-dot {\n transform: scale(1);\n opacity: 1;\n}\n\n.glitch-radio-container input:checked ~ .radio-label {\n color: var(--primary-color);\n text-shadow: 0 0 8px rgba(0, 242, 234, 0.7);\n}\n\n.glitch-radio-container input:checked + .radio-circle .pulse {\n animation: pulse-wave 1.2s cubic-bezier(0, 0, 0.2, 1) infinite;\n animation-delay: var(--d);\n}\n\n/* --- Hover State --- */\n.glitch-radio-container:hover .radio-circle {\n box-shadow: 0 0 10px var(--primary-color);\n}\n\n.glitch-radio-container:hover .radio-label::before,\n.glitch-radio-container:hover .radio-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-radio-container:hover .radio-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-radio-container:hover .radio-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 State --- */\n.glitch-radio-container:has(input:disabled) {\n cursor: not-allowed;\n}\n.glitch-radio-container input:disabled + .radio-circle {\n border-color: var(--disabled-color);\n opacity: 0.5;\n}\n.glitch-radio-container input:disabled ~ .radio-label {\n color: var(--disabled-color);\n}\n.glitch-radio-container:has(input:disabled):hover .radio-circle {\n box-shadow: none;\n}\n.glitch-radio-container:has(input:disabled):hover .radio-label::before,\n.glitch-radio-container:has(input:disabled):hover .radio-label::after {\n content: none;\n}\n\n/* Keyframes */\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\n/* Keyframes for Pulse Wave */\n@keyframes pulse-wave {\n from {\n transform: scale(1);\n opacity: 0.7;\n }\n to {\n transform: scale(2.5);\n opacity: 0;\n }\n}\n"}

silent-chipmunk-98

👁 实时预览

📝 源代码