{"html":"

\n Media Player\n

\n \n \n \n

\n Track_01.wav\n 00:42 / 03:17\n

\n \n

\n \n \n \n \n

\n Playing\n Vol: 75%\n

\n","css":".win95-card {\n --card-bg: #c0c0c0;\n --card-border-light: #ffffff;\n --card-border-dark: #808080;\n --card-border-darker: #404040;\n --card-titlebar: linear-gradient(90deg, #000080, #1084d0);\n --card-title-text: #ffffff;\n --card-text: #000000;\n --card-display-bg: #000000;\n --card-display-text: #00ff00;\n\n font-family: \"Segoe UI\", Tahoma, sans-serif;\n font-size: 1em;\n width: 18em;\n background: var(--card-bg);\n border: 0.0625em solid;\n border-color: var(--card-border-light) var(--card-border-darker)\n var(--card-border-darker) var(--card-border-light);\n box-shadow:\n inset 0.0625em 0.0625em 0 var(--card-border-light),\n inset -0.0625em -0.0625em 0 var(--card-border-dark);\n}\n\n.card-titlebar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0.25em 0.25em 0.25em 0.5em;\n background: var(--card-titlebar);\n color: var(--card-title-text);\n}\n\n.card-title-text {\n font-size: 0.8125em;\n font-weight: 700;\n letter-spacing: 0.01em;\n}\n\n.card-controls {\n display: flex;\n gap: 0.125em;\n}\n\n.card-btn {\n width: 1em;\n height: 0.875em;\n background: var(--card-bg);\n border: 0.0625em solid;\n border-color: var(--card-border-light) var(--card-border-darker)\n var(--card-border-darker) var(--card-border-light);\n cursor: pointer;\n position: relative;\n padding: 0;\n outline: none;\n}\n\n.card-btn:active {\n border-color: var(--card-border-darker) var(--card-border-light)\n var(--card-border-light) var(--card-border-darker);\n}\n\n.card-btn:focus {\n outline: 0.0625em dotted var(--card-text);\n outline-offset: -0.1875em;\n}\n\n.card-btn-min::after {\n content: \"\";\n position: absolute;\n bottom: 0.125em;\n left: 50%;\n transform: translateX(-50%);\n width: 0.375em;\n height: 0.125em;\n background: var(--card-text);\n}\n\n.card-btn-max::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 0.4375em;\n height: 0.375em;\n border: 0.0625em solid var(--card-text);\n border-top-width: 0.125em;\n background: transparent;\n}\n\n.card-btn-close::before,\n.card-btn-close::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0.5em;\n height: 0.0625em;\n background: var(--card-text);\n}\n\n.card-btn-close::before {\n transform: translate(-50%, -50%) rotate(45deg);\n}\n\n.card-btn-close::after {\n transform: translate(-50%, -50%) rotate(-45deg);\n}\n\n.card-menubar {\n display: flex;\n gap: 0.125em;\n padding: 0.25em 0.375em;\n border-bottom: 0.0625em solid var(--card-border-dark);\n}\n\n.menu-item {\n font-size: 0.75em;\n padding: 0.125em 0.5em;\n color: var(--card-text);\n cursor: pointer;\n}\n\n.menu-item:hover {\n background: #000080;\n color: #ffffff;\n}\n\n.card-body {\n padding: 0.75em;\n}\n\n.player-display {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0.5em;\n margin-bottom: 0.5em;\n background: var(--card-display-bg);\n border: 0.0625em solid;\n border-color: var(--card-border-dark) var(--card-border-light)\n var(--card-border-light) var(--card-border-dark);\n box-shadow: inset 0.0625em 0.0625em 0 var(--card-border-darker);\n}\n\n.track-name {\n font-size: 0.6875em;\n font-family: monospace;\n color: var(--card-display-text);\n animation: blink-text 1s step-end infinite;\n}\n\n@keyframes blink-text {\n 50% {\n opacity: 0.7;\n }\n}\n\n.track-time {\n font-size: 0.625em;\n font-family: monospace;\n color: var(--card-display-text);\n}\n\n.player-progress {\n position: relative;\n height: 0.75em;\n margin-bottom: 0.625em;\n background: var(--card-bg);\n border: 0.0625em solid;\n border-color: var(--card-border-dark) var(--card-border-light)\n var(--card-border-light) var(--card-border-dark);\n box-shadow: inset 0.0625em 0.0625em 0 var(--card-border-darker);\n}\n\n.progress-fill {\n width: 21%;\n height: 100%;\n background: #000080;\n}\n\n.progress-thumb {\n position: absolute;\n top: -0.0625em;\n left: 21%;\n width: 0.5em;\n height: 0.875em;\n background: var(--card-bg);\n border: 0.0625em solid;\n border-color: var(--card-border-light) var(--card-border-darker)\n var(--card-border-darker) var(--card-border-light);\n transform: translateX(-50%);\n}\n\n.player-controls {\n display: flex;\n justify-content: center;\n gap: 0.25em;\n}\n\n.ctrl-btn {\n width: 2em;\n height: 1.5em;\n background: var(--card-bg);\n border: 0.125em solid;\n border-color: var(--card-border-light) var(--card-border-darker)\n var(--card-border-darker) var(--card-border-light);\n cursor: pointer;\n position: relative;\n outline: none;\n}\n\n.ctrl-btn:hover {\n background: #d4d4d4;\n}\n\n.ctrl-btn:active {\n border-color: var(--card-border-darker) var(--card-border-light)\n var(--card-border-light) var(--card-border-darker);\n}\n\n.ctrl-btn:focus {\n outline: 0.0625em dotted var(--card-text);\n outline-offset: -0.25em;\n}\n\n.ctrl-prev::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 40%;\n border: 0.25em solid transparent;\n border-right: 0.3125em solid var(--card-text);\n transform: translate(-50%, -50%);\n}\n\n.ctrl-prev::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 30%;\n width: 0.125em;\n height: 0.5em;\n background: var(--card-text);\n transform: translate(-50%, -50%);\n}\n\n.ctrl-play::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 55%;\n border: 0.3125em solid transparent;\n border-left: 0.375em solid var(--card-text);\n transform: translate(-50%, -50%);\n}\n\n.ctrl-stop::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0.5em;\n height: 0.5em;\n background: var(--card-text);\n transform: translate(-50%, -50%);\n}\n\n.ctrl-next::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 60%;\n border: 0.25em solid transparent;\n border-left: 0.3125em solid var(--card-text);\n transform: translate(-50%, -50%);\n}\n\n.ctrl-next::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 70%;\n width: 0.125em;\n height: 0.5em;\n background: var(--card-text);\n transform: translate(-50%, -50%);\n}\n\n.card-statusbar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0.25em 0.375em;\n background: var(--card-bg);\n border-top: 0.0625em solid var(--card-border-light);\n box-shadow: inset 0 0.0625em 0 var(--card-border-dark);\n}\n\n.status-text {\n font-size: 0.6875em;\n color: var(--card-text);\n padding: 0.125em 0.25em;\n border: 0.0625em solid;\n border-color: var(--card-border-dark) var(--card-border-light)\n var(--card-border-light) var(--card-border-dark);\n flex: 1;\n}\n\n.status-vol {\n font-size: 0.625em;\n padding: 0.125em 0.375em;\n margin-left: 0.25em;\n background: var(--card-bg);\n border: 0.0625em solid;\n border-color: var(--card-border-dark) var(--card-border-light)\n var(--card-border-light) var(--card-border-dark);\n color: var(--card-text);\n}\n"}

brown-elephant-4

👁 实时预览

📝 源代码