{"html":"

\n PREFERENCES // AUDIO_MODE\n

\n\n

\n \n \n

\n WINAMP CLASSIC\n 128kbps\n

\n \n\n \n \n

\n XMMS RETRO\n 192kbps\n

\n \n\n \n \n

\n MEDIA PLAYER\n 320kbps\n

\n \n

\n\n

\n","css":"/* Component Scoped Variables & Base */\n.winamp-player-container {\n --base-metal: #2a2a2e;\n --base-dark: #1a1a1d;\n --accent-gold: #ffb700;\n --neon-green: #00ff00;\n --neon-green-dim: #004d00;\n --glass-reflection: rgba(255, 255, 255, 0.15);\n --font-main: \"Courier New\", monospace;\n\n position: relative;\n width: 320px;\n background-color: var(--base-metal);\n background-image: linear-gradient(\n 90deg,\n transparent 50%,\n rgba(0, 0, 0, 0.2) 50%\n ),\n linear-gradient(0deg, #333 0%, #222 100%);\n background-size:\n 4px 4px,\n 100% 100%;\n border: 2px solid #555;\n border-bottom: 2px solid #111;\n border-right: 2px solid #111;\n border-radius: 6px;\n padding: 6px;\n box-shadow:\n inset 1px 1px 0 rgba(255, 255, 255, 0.2),\n 0 10px 20px rgba(0, 0, 0, 0.5);\n font-family: var(--font-main);\n overflow: hidden;\n user-select: none;\n}\n\n/* Header Section */\n.player-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n background: #000;\n padding: 4px 8px;\n margin-bottom: 8px;\n border-radius: 2px;\n border: 1px solid #444;\n}\n\n.header-bars {\n width: 12px;\n height: 8px;\n background: repeating-linear-gradient(\n 90deg,\n #666 0,\n #666 2px,\n transparent 2px,\n transparent 4px\n );\n}\n\n.header-title {\n font-size: 10px;\n color: #888;\n letter-spacing: 1px;\n font-weight: bold;\n}\n\n/* Radio Stack Layout */\n.radio-stack {\n display: flex;\n flex-direction: column;\n gap: 4px;\n background: #111;\n padding: 4px;\n border-radius: 2px;\n box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8);\n}\n\n/* Individual Track (Label) */\n.track-select {\n position: relative;\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 8px 10px;\n cursor: pointer;\n background: linear-gradient(180deg, #222 0%, #1a1a1a 100%);\n border: 1px solid #333;\n transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n}\n\n.track-select:hover {\n background: linear-gradient(180deg, #2a2a2a 0%, #202020 100%);\n border-color: #555;\n}\n\n.track-select:active {\n transform: translateY(1px);\n box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5);\n border-top-color: #111;\n}\n\n/* Hidden Input */\n.track-select input {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n/* LED Indicator Design */\n.led-indicator {\n position: relative;\n width: 16px;\n height: 16px;\n background: #000;\n border-radius: 50%;\n box-shadow:\n inset 0 1px 3px rgba(0, 0, 0, 1),\n 0 1px 0 rgba(255, 255, 255, 0.1);\n border: 1px solid #333;\n}\n\n.led-light {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 8px;\n height: 8px;\n background-color: var(--neon-green-dim);\n border-radius: 50%;\n transition: all 0.3s ease;\n box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);\n}\n\n.led-glass {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-radius: 50%;\n background: radial-gradient(\n circle at 30% 30%,\n rgba(255, 255, 255, 0.2),\n transparent 60%\n );\n z-index: 2;\n}\n\n/* Checked State for LED */\n.track-select input:checked ~ .led-indicator .led-light {\n background-color: var(--neon-green);\n box-shadow:\n 0 0 5px var(--neon-green),\n 0 0 10px var(--neon-green),\n inset 0 0 2px rgba(255, 255, 255, 0.5);\n animation: led-flicker 0.4s ease-out forwards;\n}\n\n/* Track Info Typography */\n.track-info {\n flex: 1;\n display: flex;\n flex-direction: column;\n line-height: 1.2;\n}\n\n.track-title {\n color: #666;\n font-size: 12px;\n font-weight: 700;\n letter-spacing: 0.5px;\n text-shadow: 1px 1px 0 #000;\n transition: color 0.3s;\n}\n\n.track-kbps {\n font-size: 9px;\n color: #444;\n}\n\n/* Checked State for Text */\n.track-select input:checked ~ .track-info .track-title {\n color: var(--neon-green);\n text-shadow: 0 0 8px rgba(0, 255, 0, 0.4);\n}\n\n.track-select input:checked ~ .track-info .track-title::after {\n content: \"_\";\n display: inline-block;\n animation: cursor-blink 1s step-end infinite;\n}\n\n.track-select input:checked ~ .track-info .track-kbps {\n color: var(--accent-gold);\n}\n\n/* Mini Equalizer Animation */\n.equalizer-mini {\n display: flex;\n gap: 2px;\n align-items: flex-end;\n height: 12px;\n opacity: 0.2;\n transition: opacity 0.3s;\n}\n\n.bar {\n width: 3px;\n background: var(--neon-green);\n height: 20%;\n}\n\n.track-select input:checked ~ .equalizer-mini {\n opacity: 1;\n}\n\n.track-select input:checked ~ .equalizer-mini .bar:nth-child(1) {\n animation: eq-bounce 0.8s infinite ease-in-out;\n}\n.track-select input:checked ~ .equalizer-mini .bar:nth-child(2) {\n animation: eq-bounce 1.1s infinite ease-in-out 0.2s;\n}\n.track-select input:checked ~ .equalizer-mini .bar:nth-child(3) {\n animation: eq-bounce 0.9s infinite ease-in-out 0.4s;\n}\n\n/* Focus State Accessibility */\n.track-select:has(input:focus-visible) {\n outline: 2px solid var(--accent-gold);\n outline-offset: -2px;\n z-index: 10;\n}\n\n/* Overlay Effects */\n.screen-overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%);\n background-size: 100% 4px;\n z-index: 50;\n opacity: 0.6;\n}\n\n.winamp-player-container::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: radial-gradient(\n circle,\n rgba(255, 255, 255, 0) 60%,\n rgba(0, 0, 0, 0.4) 100%\n );\n pointer-events: none;\n z-index: 51;\n}\n\n/* Keyframe Animations */\n@keyframes cursor-blink {\n 0%,\n 100% {\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n}\n\n@keyframes led-flicker {\n 0% {\n opacity: 0.5;\n transform: translate(-50%, -50%) scale(0.8);\n }\n 20% {\n opacity: 1;\n }\n 40% {\n opacity: 0.2;\n }\n 60% {\n opacity: 1;\n transform: translate(-50%, -50%) scale(1.1);\n }\n 100% {\n opacity: 1;\n transform: translate(-50%, -50%) scale(1);\n }\n}\n\n@keyframes eq-bounce {\n 0%,\n 100% {\n height: 20%;\n }\n 50% {\n height: 100%;\n background: var(--accent-gold);\n }\n}\n"}

fluffy-chicken-82

👁 实时预览

📝 源代码