{"html":"

SEQ-04 LAUNCH CTRL

HYD-IND | 04-SEP-2025 16:44

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

\n POWER\n

\n ARMED\n

\n LAUNCH\n

\n ON\n \n

\n \n OFF\n

\n \n \n

\n","css":"@keyframes pulse-red {\n 0%,\n 100% {\n background: var(--launch-red);\n box-shadow: 0 0 10px var(--launch-red);\n }\n 50% {\n background: #ff1f4e;\n box-shadow: 0 0 20px 5px #ff1f4e;\n }\n}\n\n.body {\n --panel-color: #d1d1c8;\n --panel-shadow: #b0b0a8;\n --dark-grey: #4a4a4a;\n --text-color: #2a2a2a;\n --safe-green: #29a329;\n --armed-amber: #ffc107;\n --launch-red: #d90429;\n display: grid;\n place-content: center;\n width: 100%;\n height: 100%;\n background: #3a3a3a;\n font-family: \"Roboto Condensed\", sans-serif;\n}\n.launch-console {\n width: 310px;\n background: var(--panel-color);\n border: 3px solid #1a1a1a;\n border-radius: 10px;\n padding: 20px;\n box-shadow:\n 0 15px 25px rgba(0, 0, 0, 0.4),\n inset 0 3px 5px rgba(255, 255, 255, 0.4);\n display: grid;\n grid-template-rows: auto 1fr;\n gap: 20px;\n background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXVpaWl5eXlscHB6enp4eHhwcHCFhoaAgIB+fn53d3dLS0soKChPT09DQ0Nvb29zc3NwcHB9fX14eHhmZmb0VsS5AAAAFElEQVR42mP8/x8BEwMTAxMBcwATFGCAkP8P8xQAAAAASUVORK5CYII=\");\n background-blend-mode: multiply;\n}\n\n.console-header {\n text-align: center;\n border-bottom: 2px solid var(--dark-grey);\n padding-bottom: 15px;\n}\n.console-header h2 {\n font-family: \"Orbitron\", sans-serif;\n margin: 0 0 5px 0;\n color: var(--text-color);\n font-size: 20px;\n letter-spacing: 1px;\n}\n.console-header p {\n margin: 0;\n font-size: 12px;\n color: #666;\n}\n\n.interface {\n display: grid;\n grid-template-columns: 100px 1fr;\n gap: 20px;\n}\n\n.status-panel {\n background: #c1c1b8;\n border-radius: 5px;\n padding: 10px;\n box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n}\n.light {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.light-indicator {\n width: 15px;\n height: 15px;\n background: radial-gradient(circle at 30% 30%, #888, #444);\n border-radius: 50%;\n border: 2px solid #2a2a2a;\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);\n transition: all 0.3s ease;\n}\n.light-label {\n font-size: 14px;\n font-weight: 700;\n color: var(--dark-grey);\n}\n\n.action-panel {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n}\n\n.arm-switch-container {\n text-align: center;\n position: relative;\n width: 60px;\n height: 80px;\n background: var(--dark-grey);\n border-radius: 5px;\n padding-top: 5px;\n box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.4);\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.arm-switch-container span {\n font-size: 10px;\n color: #ccc;\n font-weight: 700;\n}\n.arm-switch-container span.on {\n margin-bottom: 33px;\n}\n\n.toggle-switch-label {\n position: absolute;\n top: 25px;\n left: 5px;\n width: 50px;\n height: 50px;\n cursor: pointer;\n perspective: 200px;\n}\n\n.toggle-lever {\n position: absolute;\n width: 20px;\n height: 40px;\n background: linear-gradient(#e0e0e0, #b0b0b0);\n border-radius: 3px;\n left: 15px;\n bottom: 0;\n box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);\n transform-origin: bottom center;\n transition: transform 0.3s ease-in-out;\n}\n\n.launch-assembly {\n position: relative;\n width: 100px;\n height: 100px;\n display: grid;\n place-items: center;\n perspective: 500px;\n}\n\n.launch-button {\n width: 80px;\n height: 80px;\n background: #999;\n border-radius: 50%;\n cursor: not-allowed;\n border: 5px solid #777;\n box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.4);\n}\n\n.safety-cover {\n position: absolute;\n width: 90px;\n height: 90px;\n background: repeating-linear-gradient(\n 45deg,\n #ffc107,\n #ffc107 15px,\n #2a2a2a 15px,\n #2a2a2a 30px\n );\n border-radius: 5px;\n border: 3px solid #1a1a1a;\n border-top: none;\n transform-origin: top center;\n transition: transform 0.4s ease-in-out;\n cursor: not-allowed;\n}\n.safety-cover::before {\n content: \"\";\n position: absolute;\n top: -10px;\n left: 50%;\n transform: translateX(-50%);\n width: 40px;\n height: 10px;\n background: #333;\n border-radius: 2px;\n border: 2px solid #1a1a1a;\n}\n\n.launch-console input[type=\"checkbox\"] {\n display: none;\n}\n\n#arm-switch:checked ~ .interface .status-panel #power-light .light-indicator {\n background: var(--safe-green);\n box-shadow: 0 0 10px var(--safe-green);\n}\n#arm-switch:checked ~ .interface .action-panel .toggle-lever {\n transform: rotateX(180deg);\n}\n#arm-switch:checked ~ .interface .action-panel .safety-cover {\n cursor: pointer;\n}\n#arm-switch:checked ~ .interface .status-panel #armed-light .light-indicator {\n background: var(--armed-amber);\n box-shadow: 0 0 10px var(--armed-amber);\n}\n\n#arm-switch:checked\n + #cover-switch:checked\n ~ .interface\n .action-panel\n .safety-cover {\n transform: rotateX(-160deg);\n}\n#arm-switch:checked\n + #cover-switch:checked\n ~ .interface\n .action-panel\n .launch-button {\n background: var(--launch-red);\n border-color: #a1031d;\n cursor: pointer;\n}\n\n.launch-button:active {\n transform: scale(0.95);\n box-shadow: inset 0 8px 12px rgba(0, 0, 0, 0.5);\n}\n#arm-switch:checked\n + #cover-switch:checked\n + #launch-btn:checked\n ~ .interface\n .status-panel\n #launch-light\n .light-indicator {\n animation: pulse-red 1s infinite;\n}\n"}

soft-kangaroo-99

👁 实时预览

📝 源代码