{"html":"

System Diagnostics

\n\n \n \n

\n \n \n \n

\n Memory Test\n \n\n \n \n

\n \n \n \n

\n Disk Integrity Check\n \n\n \n \n

\n \n \n \n

\n Network Analysis\n \n

\n","css":".main-container-styles {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n background-color: #3c3b3a;\n font-family: \"SF Mono\", \"Fira Code\", \"Fira Mono\", \"Roboto Mono\", monospace;\n}\n\n.flipdisc-list-wrapper {\n max-width: 333px;\n max-height: 444px;\n width: 100%;\n background-color: #2a2827;\n border-radius: 12px;\n padding: 24px;\n box-shadow:\n inset 0px 2px 2px rgba(0, 0, 0, 0.5),\n inset -2px -6px 8px rgba(0, 0, 0, 0.155),\n inset -4px -4px 4px rgba(199, 199, 199, 0.064),\n inset -0px -2px 1px rgba(255, 255, 255, 0.269);\n overflow-y: auto;\n border: 1px solid #403d3b;\n}\n\n.list-title {\n font-size: 20px;\n font-weight: 600;\n color: #e0ddd7;\n margin-bottom: 24px;\n}\n\n.hidden-checkbox-input {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.flipdisc-item-label {\n display: flex;\n align-items: center;\n cursor: pointer;\n padding: 12px;\n border-radius: 8px;\n margin-bottom: 12px;\n -webkit-tap-highlight-color: transparent;\n transition: background-color 0.3s ease;\n}\n\n.flipdisc-item-label:hover {\n background-color: #3a3836;\n}\n\n.visual-flipdisc-container {\n position: relative;\n width: 28px;\n height: 28px;\n flex-shrink: 0;\n margin-right: 16px;\n perspective: 800px;\n}\n\n.flipdisc-flipper {\n position: absolute;\n width: 100%;\n height: 100%;\n transform-style: preserve-3d;\n transition: transform 0.7s cubic-bezier(0.7, 0, 0.2, 1);\n}\n\n.flipdisc-front,\n.flipdisc-back {\n position: absolute;\n width: 100%;\n height: 100%;\n backface-visibility: hidden;\n -webkit-backface-visibility: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n}\n\n.flipdisc-front {\n background-color: #1c1b1a;\n box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7);\n}\n\n.front-icon {\n width: 16px;\n height: 16px;\n stroke: #52504d;\n stroke-width: 2;\n}\n\n.flipdisc-back {\n background-image: radial-gradient(circle, #ffc857, #fb923c);\n box-shadow:\n 0 0 15px rgba(251, 146, 60, 0.6),\n inset 0 1px 2px rgba(255, 255, 255, 0.3);\n transform: rotateX(180deg);\n}\n\n.back-icon {\n width: 18px;\n height: 18px;\n stroke: #4d2d00;\n stroke-width: 2.5;\n}\n\n.flipdisc-text-content {\n font-weight: 500;\n color: #9e9a94;\n transition: color 0.5s ease;\n}\n\n.hidden-checkbox-input:checked ~ .visual-flipdisc-container .flipdisc-flipper {\n transform: rotateX(-180deg);\n}\n\n.hidden-checkbox-input:checked ~ .flipdisc-text-content {\n color: #ffc857;\n text-shadow: 0 0 5px rgba(251, 146, 60, 0.5);\n}\n\n.hidden-checkbox-input:focus-visible\n ~ .visual-flipdisc-container\n .flipdisc-flipper\n .flipdisc-front {\n outline: 2px solid #fb923c;\n outline-offset: 2px;\n}\n"}

rude-goat-25

👁 实时预览

📝 源代码