{"html":"

\n \n \n \n \n \n \n\n

\n\n

$ system.boot()\n[ OK ] Kernel loaded\n[ OK ] Network ready\n$ echo \"hello uiverse\"\nhello uiverse\n

\n\n

\n \n \n \n \n \n \n

\n","css":"/* main wrapper */\n.wrapper {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 22px;\n font-family: monospace;\n}\n/* hide radios input's */\n.wrapper input[type=\"radio\"] {\n display: none;\n}\n/* terminal */\n.wrapper .terminal {\n width: 300px;\n height: 200px;\n border-radius: 9px;\n background: linear-gradient(120deg, #022c22, #065f46, #022c22, #0f5132);\n background-size: 400% 400%;\n animation: terminalGradient 10s ease infinite;\n background-image: repeating-linear-gradient(\n to bottom,\n rgba(255, 255, 255, 0.03) 0px,\n rgba(255, 255, 255, 0.03) 1px,\n transparent 2px,\n transparent 4px\n ),\n linear-gradient(120deg, #022c22, #065f46, #022c22, #0f5132);\n\n border: 1px solid rgba(255, 255, 255, 0.1);\n overflow: hidden;\n transition: transform 0.3s ease;\n box-shadow: inset 0 0 60px rgba(0, 255, 180, 0.15);\n}\n\n@keyframes terminalGradient {\n 0% {\n background-position: 0% 50%;\n }\n 50% {\n background-position: 100% 50%;\n }\n 100% {\n background-position: 0% 50%;\n }\n}\n.wrapper .terminal:hover {\n transform: translateY(-6px) rotateX(2deg) rotateY(2deg);\n}\n\n/* terminal header */\n.wrapper .terminal-header {\n display: flex;\n gap: 8px;\n padding: 10px;\n background: linear-gradient(\n to bottom,\n rgba(255, 255, 255, 0.08),\n rgba(255, 255, 255, 0.02)\n );\n}\n.wrapper .terminal-header span {\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background: currentColor;\n}\n.wrapper .terminal-header span:nth-child(1) {\n color: #ff5f56;\n}\n.wrapper .terminal-header span:nth-child(2) {\n color: #ffbd2e;\n}\n.wrapper .terminal-header span:nth-child(3) {\n color: #27c93f;\n}\n\n/* terminal body */\n.wrapper .terminal-body {\n padding: 14px;\n font-size: 13px;\n line-height: 1.5;\n color: #a7f3d0;\n position: relative;\n}\n.wrapper .terminal-body::after {\n content: \"_\";\n position: absolute;\n animation: blink 1s step-start infinite;\n color: #5eead4;\n font-weight: bold;\n}\n@keyframes blink {\n 0%,\n 50% {\n opacity: 1;\n }\n 51%,\n 100% {\n opacity: 0;\n }\n}\n.wrapper .cmd {\n color: #5eead4;\n}\n.wrapper .out {\n display: block;\n color: #d1fae5;\n}\n\n/* glass panel */\n.wrapper .glass-panel {\n display: flex;\n flex-direction: row;\n gap: 16px;\n padding: 16px 14px;\n border-radius: 16px;\n background: linear-gradient(\n 145deg,\n rgba(255, 255, 255, 0.65),\n rgba(255, 255, 255, 0.55)\n );\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n border: 1px solid rgba(255, 255, 255, 0.25);\n}\n\n/* color dots */\n.wrapper .c {\n width: 18px;\n height: 18px;\n border-radius: 50%;\n cursor: pointer;\n position: relative;\n}\n.wrapper .c::after {\n content: \"\";\n position: absolute;\n inset: -5px;\n border-radius: 50%;\n border: 1px solid transparent;\n transition: border-color 0.25s ease;\n}\n.wrapper .c:hover::after {\n border-color: rgba(255, 255, 255, 0.6);\n}\n\n/* indicator */\n.wrapper #t-green:checked ~ .glass-panel .green::after,\n.wrapper #t-blue:checked ~ .glass-panel .blue::after,\n.wrapper #t-amber:checked ~ .glass-panel .amber::after,\n.wrapper #t-red:checked ~ .glass-panel .red::after,\n.wrapper #t-purple:checked ~ .glass-panel .purple::after,\n.wrapper #t-black:checked ~ .glass-panel .black::after {\n border-color: rgba(255, 255, 255, 1);\n}\n\n/* colors */\n.wrapper .green {\n background: #22c55e;\n}\n.wrapper .blue {\n background: #38bdf8;\n}\n.wrapper .amber {\n background: #fbbf24;\n}\n.wrapper .red {\n background: #ef4444;\n}\n.wrapper .purple {\n background: #a855f7;\n}\n.wrapper .black {\n background: #000000;\n}\n\n/* theme logic */\n.wrapper #t-green:checked ~ .terminal {\n background: linear-gradient(120deg, #022c22, #065f46, #022c22);\n border-color: rgba(34, 197, 94, 0.4);\n}\n.wrapper #t-blue:checked ~ .terminal {\n background: linear-gradient(120deg, #020617, #0c4a6e, #020617);\n border-color: rgba(56, 189, 248, 0.4);\n}\n.wrapper #t-amber:checked ~ .terminal {\n background: linear-gradient(120deg, #2e1b00, #78350f, #2e1b00);\n border-color: rgba(251, 191, 36, 0.4);\n}\n.wrapper #t-red:checked ~ .terminal {\n background: linear-gradient(120deg, #2a0606, #9b111e, #2a0606);\n border-color: rgba(239, 68, 68, 0.4);\n}\n.wrapper #t-purple:checked ~ .terminal {\n background: linear-gradient(120deg, #1e062a, #6b21a8, #1e062a);\n border-color: rgba(168, 85, 247, 0.4);\n}\n.wrapper #t-black:checked ~ .terminal {\n background: linear-gradient(120deg, #000000, #0a0a0a, #111111, #000000);\n background-size: 400% 400%;\n background-image: repeating-linear-gradient(\n to bottom,\n rgba(255, 255, 255, 0.03) 0px,\n rgba(255, 255, 255, 0.03) 1px,\n transparent 2px,\n transparent 4px\n ),\n linear-gradient(120deg, #000000, #0a0a0a, #111111, #000000);\n\n border: 1px solid #fff;\n box-shadow: inset 0 0 50px rgba(0, 255, 255, 0.15);\n transition: transform 0.3s ease;\n}\n"}

unlucky-dragonfly-72

👁 实时预览

📝 源代码