{"html":"

\n \n \n \n

\n","css":"/* HUD Component + Grid + Frame remain unchanged */\n\n.ai-hud-component {\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100%;\n min-width: 100%;\n background: #050a1a;\n position: relative;\n overflow: hidden;\n}\n\n.ai-hud-grid {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: repeating-linear-gradient(\n 0deg,\n rgba(0, 255, 255, 0.05) 0px,\n rgba(0, 255, 255, 0.05) 1px,\n transparent 1px,\n transparent 20px\n ),\n repeating-linear-gradient(\n 90deg,\n rgba(0, 255, 255, 0.05) 0px,\n rgba(0, 255, 255, 0.05) 1px,\n transparent 1px,\n transparent 20px\n );\n animation: grid-move 2s linear infinite;\n z-index: 0;\n}\n\n.ai-hud-frame {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n position: relative;\n padding: 1.5rem;\n width: 24em;\n background: rgba(0, 255, 255, 0.05);\n border: 1px solid rgba(0, 255, 255, 0.2);\n box-shadow: 0 0 30px rgba(0, 255, 255, 0.1);\n backdrop-filter: blur(5px);\n z-index: 2;\n animation: frame-pulse 5s infinite ease-in-out;\n}\n\n.ai-hud-input-wrapper {\n position: relative;\n display: flex;\n align-items: center;\n z-index: 3;\n}\n\n.ai-hud-input {\n flex: 1;\n background: transparent;\n border: 1px solid rgba(0, 255, 255, 0.2);\n outline: none;\n color: #00ffff;\n font-family: \"Orbitron\", sans-serif;\n font-size: 1rem;\n letter-spacing: 0.1em;\n padding: 0.5rem 0.75rem;\n caret-color: #00ffff;\n transition:\n border 0.3s,\n box-shadow 0.3s;\n}\n\n.ai-hud-input:hover {\n border: 1px solid rgba(0, 255, 255, 0.5);\n box-shadow: 0 0 12px rgba(0, 255, 255, 0.3);\n}\n\n.ai-hud-input::placeholder {\n color: rgba(0, 255, 255, 0.4);\n}\n\n.ai-hud-btn {\n background: rgba(0, 255, 255, 0.05);\n border: 1px solid rgba(0, 255, 255, 0.4);\n padding: 0.5rem 1rem;\n cursor: pointer;\n margin-left: 0.75rem;\n transition: all 0.4s ease;\n clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);\n box-shadow: 0 0 8px rgba(0, 255, 255, 0.3);\n transform: rotate(-1deg);\n}\n\n.ai-hud-btn:hover {\n clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);\n box-shadow:\n 0 0 25px rgba(0, 255, 255, 0.8),\n 0 0 40px rgba(0, 255, 255, 0.5);\n background: rgba(0, 255, 255, 0.08);\n transform: rotate(-1deg) scale(1.1);\n}\n\n.ai-hud-btn:active {\n clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);\n box-shadow:\n 0 0 25px rgba(0, 255, 255, 0.8),\n 0 0 40px rgba(0, 255, 255, 0.5);\n background: rgba(0, 255, 255, 0.08);\n transform: rotate(-2deg) scale(1);\n}\n\n.ai-hud-icon {\n width: 1rem;\n height: 1rem;\n stroke: #00ffff;\n}\n\n/* Keep grid-move + frame-pulse since they’re still used */\n@keyframes grid-move {\n 0% {\n background-position:\n 0 0,\n 0 0;\n }\n 100% {\n background-position:\n 40px 40px,\n 40px 40px;\n }\n}\n\n@keyframes frame-pulse {\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.95;\n }\n}\n"}

dry-skunk-54

👁 实时预览

📝 源代码