{"html":"

SEARCH - PROGRAM MANAGER

□

\n \n

Query:

\n \n

Ready

NUM

CAPS

\n\n

\n","css":".win98-container {\n width: 30rem;\n margin: 2rem auto;\n font-family: \"Tahoma\", \"Pixelated MS Sans Serif\", sans-serif;\n position: relative;\n isolation: isolate;\n --win98-blue: #0a246a;\n --win98-light: #c0c0c0;\n --win98-dark: #808080;\n --win98-white: #ffffff;\n --win98-black: #000000;\n}\n\n.win98-window {\n background: var(--win98-light);\n border: 2px solid;\n border-color: var(--win98-white) var(--win98-dark) var(--win98-dark)\n var(--win98-white);\n position: relative;\n z-index: 10;\n transition: all 0.3s ease;\n}\n\n.win98-titlebar {\n background: linear-gradient(to right, var(--win98-blue), #0a248a);\n color: white;\n padding: 3px 2px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n border-bottom: 1px solid var(--win98-dark);\n position: relative;\n z-index: 20;\n}\n\n.win98-title {\n font-size: 0.8rem;\n font-weight: bold;\n margin-left: 2px;\n letter-spacing: 0.5px;\n}\n\n.win98-controls {\n display: flex;\n gap: 2px;\n margin-right: 2px;\n}\n\n.win98-button {\n width: 16px;\n height: 14px;\n background: var(--win98-light);\n border: 1px solid;\n border-color: var(--win98-white) var(--win98-dark) var(--win98-dark)\n var(--win98-white);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 0.7rem;\n font-weight: bold;\n cursor: pointer;\n user-select: none;\n}\n\n.win98-button:active {\n border-color: var(--win98-dark) var(--win98-white) var(--win98-white)\n var(--win98-dark);\n padding: 1px 0 0 1px;\n}\n\n.win98-content {\n padding: 8px;\n}\n\n.win98-menu-bar {\n display: flex;\n gap: 15px;\n margin-bottom: 10px;\n padding: 2px 5px;\n background: var(--win98-light);\n border: 1px solid;\n border-color: var(--win98-white) var(--win98-dark) var(--win98-dark)\n var(--win98-white);\n}\n\n.win98-menu-item {\n font-size: 0.8rem;\n cursor: pointer;\n padding: 1px 3px;\n}\n\n.win98-menu-item:hover {\n background: var(--win98-blue);\n color: white;\n}\n\n.win98-input-frame {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 15px;\n}\n\n.win98-input-label {\n font-size: 0.8rem;\n font-weight: bold;\n min-width: 40px;\n}\n\n.win98-input {\n flex: 1;\n height: 22px;\n background: white;\n border: 2px solid;\n border-color: var(--win98-white) var(--win98-dark) var(--win98-dark)\n var(--win98-white);\n font-family: \"Tahoma\", sans-serif;\n font-size: 0.8rem;\n padding: 0 3px;\n outline: none;\n}\n\n.win98-input:focus {\n border-color: var(--win98-white) var(--win98-dark) var(--win98-dark)\n var(--win98-white);\n background: #ffffe0;\n}\n\n.win98-status-bar {\n display: flex;\n justify-content: space-between;\n align-items: center;\n background: var(--win98-dark);\n color: white;\n padding: 2px 5px;\n font-size: 0.7rem;\n border-top: 1px solid var(--win98-white);\n min-height: 18px;\n}\n\n.win98-status-indicators {\n display: flex;\n gap: 5px;\n}\n\n.win98-indicator {\n background: var(--win98-white);\n color: var(--win98-black);\n padding: 0 3px;\n border: 1px solid;\n border-color: var(--win98-white) var(--win98-dark) var(--win98-dark)\n var(--win98-white);\n font-weight: bold;\n}\n\n.win98-resize-handle {\n position: absolute;\n bottom: 0;\n right: 0;\n width: 15px;\n height: 15px;\n background: linear-gradient(\n 135deg,\n transparent 0%,\n transparent 50%,\n var(--win98-dark) 50%,\n var(--win98-dark) 60%,\n transparent 60%\n );\n cursor: nw-resize;\n}\n\n.secret-overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: radial-gradient(\n circle at center,\n rgba(0, 255, 255, 0.1) 0%,\n transparent 70%\n );\n opacity: 0;\n transition: all 0.8s ease;\n z-index: 5;\n pointer-events: none;\n}\n\n.matrix-rain {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-image: linear-gradient(\n 0deg,\n transparent 0%,\n rgba(0, 255, 0, 0.1) 2%,\n transparent 4%\n );\n background-size: 100% 30px;\n opacity: 0;\n z-index: 6;\n pointer-events: none;\n animation: matrix-fall 2s linear infinite;\n}\n\n.glitch-effect {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n z-index: 7;\n pointer-events: none;\n transition: opacity 0.3s ease;\n}\n\n.hologram-projection {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid rgba(0, 255, 255, 0.5);\n border-radius: 0;\n opacity: 0;\n z-index: 4;\n pointer-events: none;\n box-shadow: 0 0 30px rgba(0, 255, 255, 0.3);\n}\n\n.win98-container:hover .win98-window {\n transform: translateY(-1px);\n}\n\n.win98-container:hover .win98-button {\n background: #d0d0d0;\n}\n\n.win98-container:hover .secret-overlay {\n opacity: 0.2;\n}\n\n.win98-container:focus-within .win98-window {\n background: linear-gradient(145deg, #1a1a2a, #0a0a1a);\n border: 2px solid #00ffff;\n transform: perspective(1000px) rotateX(3deg) translateY(-5px);\n position: relative;\n z-index: 100;\n}\n\n.win98-container:focus-within .win98-titlebar {\n background: linear-gradient(to right, #001122, #003344);\n border-bottom: 1px solid #00ffff;\n animation: title-glow 2s ease-in-out infinite alternate;\n}\n\n.win98-container:focus-within .win98-title {\n color: #00ffff;\n text-shadow: 0 0 10px rgba(0, 255, 255, 0.8);\n animation: text-flicker 3s ease-in-out infinite;\n}\n\n.win98-container:focus-within .win98-button {\n background: linear-gradient(145deg, #2a2a3a, #1a1a2a);\n border: 1px solid #00ffff;\n color: #00ffff;\n box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);\n}\n\n.win98-container:focus-within .win98-content {\n background: rgba(10, 10, 20, 0.8);\n backdrop-filter: blur(3px);\n -webkit-backdrop-filter: blur(3px);\n}\n\n.win98-container:focus-within .win98-menu-bar {\n background: linear-gradient(90deg, #1a1a2a, #2a2a3a);\n border: 1px solid #00ffff;\n}\n\n.win98-container:focus-within .win98-menu-item {\n color: #00ffff;\n text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);\n}\n\n.win98-container:focus-within .win98-menu-item:hover {\n background: linear-gradient(90deg, #00ffff, #0088ff);\n color: #000;\n text-shadow: none;\n}\n\n.win98-container:focus-within .win98-input-frame {\n border: 1px solid rgba(0, 255, 255, 0.2);\n padding: 8px;\n border-radius: 2px;\n background: rgba(20, 20, 30, 0.3);\n}\n\n.win98-container:focus-within .win98-input-label {\n color: #00ffff;\n text-shadow: 0 0 8px rgba(0, 255, 255, 0.6);\n}\n\n.win98-container:focus-within .win98-input {\n background: linear-gradient(145deg, #000011, #000022);\n border: 2px solid #00ffff;\n color: #00ffff;\n box-shadow:\n inset 0 0 15px rgba(0, 0, 0, 0.8),\n 0 0 10px rgba(0, 255, 255, 0.2);\n text-shadow: 0 0 8px rgba(0, 255, 255, 0.5);\n}\n\n.win98-container:focus-within .win98-input::placeholder {\n color: #4488aa;\n font-style: italic;\n}\n\n.win98-container:focus-within .win98-status-bar {\n background: linear-gradient(90deg, #0a1a2a, #0a2a3a);\n border-top: 1px solid #00ffff;\n color: #00ffff;\n text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);\n}\n\n.win98-container:focus-within .win98-indicator {\n background: linear-gradient(145deg, #00ffff, #0088ff);\n color: #000;\n border: 1px solid #00ffff;\n box-shadow: 0 0 8px rgba(0, 255, 255, 0.3);\n}\n\n.win98-container:focus-within .win98-resize-handle {\n background: linear-gradient(\n 135deg,\n transparent 0%,\n transparent 50%,\n #00ffff 50%,\n #00ffff 60%,\n transparent 60%\n );\n box-shadow: 0 0 10px #00ffff;\n}\n\n.win98-container:focus-within .secret-overlay {\n opacity: 0.6;\n animation: overlay-pulse 4s ease-in-out infinite;\n}\n\n.win98-container:focus-within .matrix-rain {\n opacity: 0.4;\n animation: matrix-fall 0.5s linear infinite;\n}\n\n.win98-container:focus-within .glitch-effect {\n opacity: 0.5;\n animation: glitch-subtle 0.3s ease-in-out infinite alternate;\n}\n\n.win98-container:focus-within .hologram-projection {\n opacity: 0.7;\n animation: projection-pulse 3s ease-in-out infinite;\n}\n\n/* Animations */\n@keyframes title-glow {\n 0% {\n box-shadow: 0 0 8px rgba(0, 255, 255, 0.4);\n }\n 100% {\n box-shadow: 0 0 20px rgba(0, 255, 255, 0.7);\n }\n}\n\n@keyframes text-flicker {\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.9;\n }\n}\n\n@keyframes matrix-fall {\n 0% {\n background-position: 0 0;\n }\n 100% {\n background-position: 0 30px;\n }\n}\n\n@keyframes overlay-pulse {\n 0%,\n 100% {\n opacity: 0.4;\n transform: scale(1);\n }\n 50% {\n opacity: 0.7;\n transform: scale(1.01);\n }\n}\n\n@keyframes glitch-subtle {\n 0% {\n transform: translate(0);\n opacity: 0.5;\n }\n 20% {\n transform: translate(-1px, 1px);\n opacity: 0.7;\n }\n 40% {\n transform: translate(1px, -1px);\n opacity: 0.5;\n }\n 60% {\n transform: translate(-0.5px, 0.5px);\n opacity: 0.6;\n }\n 80% {\n transform: translate(0.5px, -0.5px);\n opacity: 0.7;\n }\n 100% {\n transform: translate(0);\n opacity: 0.5;\n }\n}\n\n@keyframes projection-pulse {\n 0%,\n 100% {\n opacity: 0.5;\n box-shadow: 0 0 15px rgba(0, 255, 255, 0.2);\n }\n 50% {\n opacity: 0.8;\n box-shadow: 0 0 30px rgba(0, 255, 255, 0.4);\n }\n}\n"}

friendly-rabbit-86

👁 实时预览

📝 源代码