{"html":"

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

\n\n

Tape Deck

0 4 2

\n AM\n 54\n 60\n 70\n 80\n

\n\n

Signal Monitor

\n \n 98.6 MHz\n

\n FM\n 88\n 92\n 96\n 100\n

\n\n

System Config

\n Power\n \n

\n Dolby NR\n

\n Filter\n

\n SW\n 4\n 6\n 8\n 10\n

\n\n

Battery Check

\n \n

\n DC 12V\n

\n LW\n 150\n 200\n 250\n 300\n

\n \n \n \n\n

\n Play\n Tuner\n Set\n Batt\n

\n\n","css":".device-case {\n --case: #e6e6e2;\n --text-dark: #2a2a2a;\n --accent-orange: #f04e30;\n --accent-green: #4a6fa5;\n --grid-lines: #c0c0bc;\n\n width: 360px;\n height: 450px;\n background-color: var(--case);\n border-radius: 12px;\n font-family: \"Inter\", sans-serif;\n box-shadow:\n 15px 15px 30px rgba(0, 0, 0, 0.1),\n -5px -5px 15px rgba(255, 255, 255, 0.8);\n padding: 25px;\n display: flex;\n flex-direction: column;\n position: relative;\n}\n\n.inputs {\n display: none;\n}\n\n.speaker-grille {\n width: 100%;\n height: 50px;\n background-image: radial-gradient(#aaa 1.5px, transparent 1.5px);\n background-size: 6px 6px;\n margin-bottom: 15px;\n opacity: 0.6;\n}\n\n.screen-window {\n width: 100%;\n height: 270px;\n background: #f0f0f0;\n border: 1px solid #d0d0d0;\n border-radius: 4px;\n position: relative;\n overflow: hidden;\n box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.05);\n margin-bottom: 10px;\n}\n\n.glass-glare {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 120deg,\n rgba(255, 255, 255, 0) 40%,\n rgba(255, 255, 255, 0.4) 50%,\n rgba(255, 255, 255, 0) 60%\n );\n z-index: 10;\n pointer-events: none;\n}\n\n.tuner-band {\n display: flex;\n width: 400%;\n height: 100%;\n transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);\n}\n\n.panel {\n width: 25%;\n height: 100%;\n padding: 20px;\n position: relative;\n border-right: 1px solid var(--grid-lines);\n background: linear-gradient(90deg, transparent 95%, var(--grid-lines) 95%),\n linear-gradient(transparent 95%, var(--grid-lines) 95%);\n background-size: 20px 20px;\n}\n\n.label {\n font-weight: 800;\n font-size: 0.8rem;\n text-transform: uppercase;\n letter-spacing: 1px;\n margin-bottom: 10px;\n color: #666;\n}\n\n.freq-display {\n position: absolute;\n bottom: 20px;\n left: 0;\n width: 100%;\n height: 40px;\n border-top: 2px solid var(--text-dark);\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 10px;\n font-family: monospace;\n font-size: 0.9rem;\n}\n\n.freq-needle {\n position: absolute;\n bottom: 0;\n left: 50%;\n width: 2px;\n height: 100%;\n background: var(--accent-orange);\n z-index: 5;\n}\n\n.tape-mechanism {\n display: flex;\n justify-content: center;\n gap: 30px;\n margin-top: 40px;\n}\n\n.spool {\n width: 60px;\n height: 60px;\n border-radius: 50%;\n background: #ddd;\n position: relative;\n border: 1px solid #bbb;\n overflow: hidden;\n}\n\n.spool::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: conic-gradient(\n #333 0deg,\n #333 120deg,\n transparent 120deg,\n transparent 180deg,\n #333 180deg,\n #333 300deg,\n transparent 300deg\n );\n border-radius: 50%;\n}\n\n.counter-box {\n background: #222;\n color: #fff;\n padding: 5px 10px;\n font-family: monospace;\n border-radius: 2px;\n display: inline-block;\n letter-spacing: 4px;\n margin-top: 20px;\n}\n\n.waveform {\n width: 100%;\n height: 80px;\n display: flex;\n align-items: center;\n gap: 2px;\n margin-top: 20px;\n}\n\n.wave-bar {\n flex: 1;\n background: var(--text-dark);\n height: 10px;\n animation: equalize 1s ease-in-out infinite;\n}\n\n@keyframes equalize {\n 0%,\n 100% {\n height: 10px;\n }\n 50% {\n height: 60px;\n }\n}\n\n.switch-row {\n display: flex;\n flex-direction: column;\n gap: 15px;\n margin-top: 20px;\n}\n\n.toggle {\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.9rem;\n font-weight: 600;\n}\n\n.toggle-graphic {\n width: 40px;\n height: 20px;\n background: #ccc;\n border-radius: 10px;\n position: relative;\n}\n.toggle-graphic::after {\n content: \"\";\n position: absolute;\n top: 2px;\n left: 2px;\n width: 16px;\n height: 16px;\n background: #fff;\n border-radius: 50%;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);\n}\n\n.controls-strip {\n margin-top: auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0 5px;\n margin-bottom: 10px;\n}\n\n.push-btn {\n width: 50px;\n height: 50px;\n border-radius: 50%;\n background: #f5f5f5;\n border: 1px solid #ddd;\n box-shadow:\n inset 0 0 5px rgba(255, 255, 255, 1),\n 3px 3px 6px rgba(0, 0, 0, 0.1);\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all 0.1s;\n position: relative;\n}\n\n.push-btn::after {\n content: \"\";\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: #e0e0e0;\n box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1);\n}\n\n.push-btn:active {\n box-shadow:\n inset 2px 2px 5px rgba(0, 0, 0, 0.1),\n 1px 1px 2px rgba(0, 0, 0, 0.1);\n transform: translateY(1px);\n}\n\n.push-btn:active::after {\n background: var(--accent-orange);\n}\n\n.btn-label {\n position: absolute;\n bottom: -25px;\n font-size: 0.65rem;\n font-weight: 600;\n color: #888;\n text-transform: uppercase;\n}\n\n#app1:checked ~ .screen-window .tuner-band {\n transform: translateX(0%);\n}\n#app2:checked ~ .screen-window .tuner-band {\n transform: translateX(-25%);\n}\n#app3:checked ~ .screen-window .tuner-band {\n transform: translateX(-50%);\n}\n#app4:checked ~ .screen-window .tuner-band {\n transform: translateX(-75%);\n}\n\n#app1:checked ~ .controls-strip label[for=\"app1\"]::after {\n background: var(--accent-green);\n}\n#app2:checked ~ .controls-strip label[for=\"app2\"]::after {\n background: var(--accent-green);\n}\n#app3:checked ~ .controls-strip label[for=\"app3\"]::after {\n background: var(--accent-green);\n}\n#app4:checked ~ .controls-strip label[for=\"app4\"]::after {\n background: var(--accent-green);\n}\n\n#app1:checked ~ .screen-window .tuner-band .panel-1 .tape-mechanism .spool {\n animation: spin 4s linear infinite;\n}\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n"}

sour-vampirebat-67

👁 实时预览

📝 源代码