{"html":"

\n \n \n \n \n

\n \n

\n \n \n \n

\n \n

\n Firefly Network\n System Online\n

\n","css":".search-container {\n position: relative;\n width: 100%;\n max-width: 380px;\n padding-top: 24px;\n padding-bottom: 22px;\n}\n\n.search-wrapper {\n position: relative;\n display: flex;\n align-items: center;\n background: linear-gradient(145deg, #18181a 0%, #0c0c0b 50%, #141413 100%);\n border: 2px solid #2a2820;\n padding: 0;\n box-shadow:\n 0 8px 30px rgba(0, 0, 0, 0.6),\n 0 0 0 1px rgba(107, 138, 58, 0.08),\n inset 0 2px 6px rgba(0, 0, 0, 0.5);\n transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);\n overflow: hidden;\n box-sizing: border-box;\n}\n\n.search-wrapper::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 2px;\n background: linear-gradient(\n 90deg,\n transparent 0%,\n #4a5a2a 15%,\n #8ba859 50%,\n #4a5a2a 85%,\n transparent 100%\n );\n opacity: 0;\n transition: opacity 0.4s ease;\n}\n\n.search-wrapper:focus-within::before {\n opacity: 1;\n animation: lineGlow 2s ease-in-out infinite;\n}\n\n@keyframes lineGlow {\n 0%,\n 100% {\n filter: brightness(1);\n }\n\n 50% {\n filter: brightness(1.5);\n }\n}\n\n.search-wrapper::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background: repeating-linear-gradient(\n 0deg,\n transparent,\n transparent 3px,\n rgba(0, 0, 0, 0.02) 3px,\n rgba(0, 0, 0, 0.02) 6px\n );\n pointer-events: none;\n}\n\n.search-wrapper:focus-within {\n border-color: #4a5a2a;\n transform: translateY(-2px);\n box-shadow:\n 0 12px 40px rgba(0, 0, 0, 0.7),\n 0 0 30px rgba(107, 138, 58, 0.1),\n 0 0 0 1px rgba(107, 138, 58, 0.3),\n inset 0 2px 6px rgba(0, 0, 0, 0.5);\n}\n\n.search-wrapper:hover {\n border-color: #3a3830;\n}\n\n.search-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 44px;\n height: 44px;\n flex-shrink: 0;\n position: relative;\n background: linear-gradient(\n 135deg,\n rgba(42, 40, 32, 0.3) 0%,\n transparent 100%\n );\n}\n\n.search-icon::after {\n content: \"\";\n position: absolute;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n width: 1px;\n height: 22px;\n background: linear-gradient(180deg, transparent, #3a3830, transparent);\n}\n\n.search-icon svg {\n width: 18px;\n height: 18px;\n color: #5a5a4a;\n transition: all 0.4s ease;\n}\n\n.search-wrapper:focus-within .search-icon svg {\n color: #8ba859;\n filter: drop-shadow(0 0 8px rgba(139, 168, 89, 0.6));\n animation: iconPulse 2s ease-in-out infinite;\n}\n\n@keyframes iconPulse {\n 0%,\n 100% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(1.06);\n }\n}\n\n.search-input {\n flex: 1;\n background: transparent;\n border: none;\n outline: none;\n color: #e0e0d0;\n font-size: 0.85rem;\n font-family: \"Consolas\", \"Courier New\", \"Lucida Console\", monospace;\n font-weight: 600;\n letter-spacing: 1px;\n padding: 14px 10px;\n box-sizing: border-box;\n text-transform: uppercase;\n}\n\n.search-input::placeholder {\n color: #3a3a2a;\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 1.5px;\n font-size: 0.75rem;\n}\n\n.search-input:focus::placeholder {\n color: #4a5a3a;\n}\n\n.search-decoration {\n display: flex;\n align-items: center;\n gap: 5px;\n margin-right: 10px;\n padding: 6px 10px;\n background: linear-gradient(\n 135deg,\n rgba(107, 138, 58, 0.12) 0%,\n rgba(107, 138, 58, 0.05) 100%\n );\n border: 1px solid rgba(107, 138, 58, 0.25);\n border-radius: 2px;\n position: relative;\n}\n\n.search-decoration::before {\n content: \"SPORE\";\n position: absolute;\n top: -7px;\n left: 6px;\n font-family: \"Consolas\", monospace;\n font-size: 0.4rem;\n color: #5a6a3a;\n letter-spacing: 1.5px;\n background: #141413;\n padding: 0 3px;\n}\n\n.spore {\n width: 6px;\n height: 6px;\n background: radial-gradient(circle, #a0c060 0%, #6b8a3a 50%, #3a4a1a 100%);\n border-radius: 50%;\n box-shadow:\n 0 0 6px rgba(139, 168, 89, 0.5),\n inset 0 -1px 3px rgba(0, 0, 0, 0.3);\n animation: sporePulse 2s ease-in-out infinite;\n}\n\n.spore:nth-child(2) {\n animation-delay: 0.3s;\n width: 4px;\n height: 4px;\n}\n\n.spore:nth-child(3) {\n animation-delay: 0.6s;\n width: 7px;\n height: 7px;\n}\n\n@keyframes sporePulse {\n 0%,\n 100% {\n opacity: 0.5;\n transform: scale(1);\n box-shadow: 0 0 6px rgba(139, 168, 89, 0.4);\n }\n\n 50% {\n opacity: 1;\n transform: scale(1.3);\n box-shadow:\n 0 0 12px rgba(139, 168, 89, 1),\n 0 0 20px rgba(139, 168, 89, 0.4);\n }\n}\n\n.search-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 44px;\n height: 44px;\n background: linear-gradient(145deg, #3a4a1a 0%, #2a3a10 50%, #1a2a08 100%);\n border: none;\n border-left: 1px solid #4a5a2a;\n cursor: pointer;\n transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n flex-shrink: 0;\n box-sizing: border-box;\n position: relative;\n overflow: hidden;\n}\n\n.search-btn::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 90deg,\n transparent,\n rgba(139, 168, 89, 0.2),\n transparent\n );\n transition: left 0.5s ease;\n}\n\n.search-btn:hover::before {\n left: 100%;\n}\n\n.search-btn::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background: radial-gradient(\n circle at center,\n rgba(139, 168, 89, 0.2) 0%,\n transparent 70%\n );\n opacity: 0;\n transition: opacity 0.3s ease;\n}\n\n.search-btn:hover::after {\n opacity: 1;\n}\n\n.search-btn svg {\n width: 18px;\n height: 18px;\n color: #8ba859;\n transition: all 0.3s ease;\n position: relative;\n z-index: 1;\n}\n\n.search-btn:hover {\n background: linear-gradient(145deg, #4a5a2a 0%, #3a4a1a 50%, #2a3a10 100%);\n box-shadow: inset 0 0 20px rgba(139, 168, 89, 0.12);\n}\n\n.search-btn:hover svg {\n color: #c0d080;\n transform: translateX(3px) scale(1.05);\n filter: drop-shadow(0 0 5px rgba(192, 208, 128, 0.5));\n}\n\n.search-btn:active {\n transform: scale(0.96);\n}\n\n.search-glow {\n position: absolute;\n bottom: -6px;\n left: 50%;\n transform: translateX(-50%);\n width: 85%;\n height: 30px;\n background: radial-gradient(\n ellipse,\n rgba(139, 168, 89, 0.15) 0%,\n transparent 60%\n );\n pointer-events: none;\n opacity: 0;\n transition: opacity 0.5s ease;\n filter: blur(6px);\n}\n\n.search-wrapper:focus-within + .search-glow {\n opacity: 1;\n}\n\n.search-label {\n position: absolute;\n top: 0;\n left: 0;\n font-family: \"Consolas\", monospace;\n font-size: 0.55rem;\n color: #4a4a3a;\n text-transform: uppercase;\n letter-spacing: 3px;\n display: flex;\n align-items: center;\n gap: 6px;\n transition: all 0.4s ease;\n}\n\n.search-label::before {\n content: \"◆\";\n font-size: 0.45rem;\n color: #3a4a2a;\n transition: color 0.4s ease;\n}\n\n.search-wrapper:focus-within ~ .search-label {\n color: #8ba859;\n}\n\n.search-wrapper:focus-within ~ .search-label::before {\n color: #8ba859;\n text-shadow: 0 0 8px rgba(139, 168, 89, 0.8);\n}\n\n.search-status {\n position: absolute;\n bottom: 0;\n right: 0;\n font-family: \"Consolas\", monospace;\n font-size: 0.5rem;\n color: #3a3a2a;\n text-transform: uppercase;\n letter-spacing: 1.5px;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.search-status::before {\n content: \"\";\n width: 5px;\n height: 5px;\n background: #4a5a2a;\n border-radius: 50%;\n box-shadow: 0 0 5px rgba(139, 168, 89, 0.5);\n animation: statusBlink 1.5s ease-in-out infinite;\n}\n\n@keyframes statusBlink {\n 0%,\n 100% {\n opacity: 0.3;\n box-shadow: 0 0 4px rgba(139, 168, 89, 0.3);\n }\n\n 50% {\n opacity: 1;\n box-shadow: 0 0 8px rgba(139, 168, 89, 0.8);\n }\n}\n\n.search-corner {\n position: absolute;\n width: 10px;\n height: 10px;\n border: 1px solid #3a3830;\n pointer-events: none;\n}\n\n.search-corner-tl {\n top: 20px;\n left: -3px;\n border-right: none;\n border-bottom: none;\n}\n\n.search-corner-tr {\n top: 20px;\n right: -3px;\n border-left: none;\n border-bottom: none;\n}\n\n.search-corner-bl {\n bottom: 18px;\n left: -3px;\n border-right: none;\n border-top: none;\n}\n\n.search-corner-br {\n bottom: 18px;\n right: -3px;\n border-left: none;\n border-top: none;\n}\n"}

purple-lizard-35

👁 实时预览

📝 源代码