{"html":"

\n \n\n

\n\n

L . CH

R . CH

\n\n

Volume

\n\n

\n \n

Power

\n\n

Active

\n\n

Tone

\n\n

FIDELITY 900

\n","css":".container {\n --wood-base: #3e2723;\n --wood-grain: #281510;\n --metal-face: #d8d8d8;\n --metal-shadow: #999;\n --glass-coating: rgba(200, 220, 255, 0.1);\n --filament-off: #4a3b3b;\n --filament-on: #ff8800;\n --glow-color: rgba(255, 160, 50, 0.6);\n --jewel-off: #400;\n --jewel-on: #ff0000;\n margin: 0;\n background-color: #050505;\n height: 100%;\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n font-family: \"Jura\", sans-serif;\n overflow: hidden;\n background-image: radial-gradient(circle at 50% 30%, #1a1a1a 0%, #000 100%);\n}\n.amp-unit {\n width: 380px;\n height: 500px;\n position: relative;\n display: flex;\n flex-direction: column;\n box-shadow:\n 0 50px 100px rgba(0, 0, 0, 0.9),\n 0 10px 20px rgba(0, 0, 0, 0.8);\n transform-style: preserve-3d;\n perspective: 1000px;\n}\n\n.inputs {\n display: none;\n}\n\n/* --- WOOD CASE --- */\n.wood-case {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: var(--wood-base);\n border-radius: 12px;\n z-index: 0;\n overflow: hidden;\n /* Realistic Wood Grain CSS */\n background-image: repeating-linear-gradient(\n 90deg,\n transparent 0,\n transparent 2px,\n rgba(0, 0, 0, 0.2) 3px,\n transparent 6px\n ),\n repeating-radial-gradient(\n circle at 50% 50%,\n transparent 0,\n transparent 10px,\n rgba(0, 0, 0, 0.1) 12px\n ),\n linear-gradient(to right, #2a1810, #5d4037 10%, #3e2723 90%, #1a0f0a);\n box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.8);\n}\n\n/* Dovetail Joints Detail */\n.wood-case::after {\n content: \"\";\n position: absolute;\n top: 0;\n bottom: 0;\n width: 100%;\n background: repeating-linear-gradient(\n 0deg,\n rgba(0, 0, 0, 0.3) 0,\n rgba(0, 0, 0, 0.3) 2px,\n transparent 2px,\n transparent 40px\n );\n mix-blend-mode: multiply;\n opacity: 0.5;\n}\n\n/* --- TUBE BAY --- */\n.tube-bay {\n height: 240px;\n background: #080808;\n position: relative;\n margin: 15px 15px 0 15px;\n border-radius: 4px 4px 0 0;\n box-shadow: inset 0 0 40px #000;\n display: flex;\n justify-content: center;\n align-items: flex-end;\n padding-bottom: 25px;\n gap: 25px;\n z-index: 2;\n overflow: hidden;\n}\n\n/* Reflection on Bay Floor */\n.tube-bay::before {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 60px;\n background: linear-gradient(\n to bottom,\n rgba(255, 255, 255, 0.05),\n transparent\n );\n z-index: 0;\n}\n\n/* VACUUM TUBE DESIGN */\n.tube {\n width: 70px;\n height: 140px;\n position: relative;\n z-index: 5;\n}\n\n.glass-envelope {\n width: 100%;\n height: 100%;\n background: radial-gradient(\n circle at 30% 30%,\n rgba(255, 255, 255, 0.15),\n var(--glass-coating) 40%,\n rgba(20, 20, 20, 0.4) 95%\n );\n border-radius: 35px 35px 5px 5px;\n border: 1px solid rgba(255, 255, 255, 0.15);\n position: relative;\n overflow: hidden;\n box-shadow:\n inset 0 0 15px rgba(0, 0, 0, 0.9),\n 0 10px 20px rgba(0, 0, 0, 0.5);\n}\n\n/* Getter Flash (Silver top) */\n.glass-envelope::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 40px;\n background: radial-gradient(at 40% 20%, #888, #222 70%);\n opacity: 0.8;\n mask-image: linear-gradient(to bottom, black, transparent);\n -webkit-mask-image: linear-gradient(to bottom, black, transparent);\n}\n\n/* Internal Metal Plate */\n.plate {\n position: absolute;\n top: 25px;\n left: 15px;\n right: 15px;\n bottom: 15px;\n background: linear-gradient(90deg, #222, #444, #222);\n border-radius: 4px;\n border: 1px solid #555;\n box-shadow: inset 0 0 5px #000;\n}\n/* Plate Holes */\n.plate::after {\n content: \"\";\n position: absolute;\n top: 10%;\n left: 30%;\n width: 40%;\n height: 60%;\n background: repeating-linear-gradient(\n 0deg,\n #111 0,\n #111 2px,\n transparent 2px,\n transparent 6px\n );\n}\n\n/* Heater Filament */\n.heater {\n position: absolute;\n bottom: 30px;\n left: 50%;\n transform: translateX(-50%);\n width: 2px;\n height: 60px;\n background-color: var(--filament-off);\n box-shadow: 0 0 0 var(--glow-color);\n transition:\n background-color 3s ease-in,\n box-shadow 3s ease-in;\n z-index: 10;\n}\n.heater::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: -3px;\n width: 8px;\n height: 8px;\n background: inherit;\n border-radius: 50%;\n box-shadow: inherit;\n}\n.heater::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: -3px;\n width: 8px;\n height: 8px;\n background: inherit;\n border-radius: 50%;\n box-shadow: inherit;\n}\n\n/* Ambient Glow Container */\n.glow-aura {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 150%;\n height: 100%;\n background: radial-gradient(circle, var(--glow-color) 0%, transparent 60%);\n opacity: 0;\n transition: opacity 3s ease-in-out;\n mix-blend-mode: color-dodge;\n pointer-events: none;\n}\n\n/* --- BRUSHED METAL FACEPLATE --- */\n.faceplate {\n flex-grow: 1;\n margin: 0 15px 15px 15px;\n background: linear-gradient(180deg, #e0e0e0 0%, #b0b0b0 100%);\n position: relative;\n z-index: 2;\n display: flex;\n flex-direction: column;\n padding: 20px;\n box-shadow:\n inset 0 1px 0 rgba(255, 255, 255, 0.8),\n 0 -2px 10px rgba(0, 0, 0, 0.5);\n}\n/* Brushed Texture */\n.faceplate::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-image: repeating-linear-gradient(\n 90deg,\n transparent 0,\n transparent 1px,\n rgba(0, 0, 0, 0.05) 2px\n );\n pointer-events: none;\n}\n\n/* Screws */\n.bolt {\n position: absolute;\n width: 12px;\n height: 12px;\n background: radial-gradient(circle, #eee, #888);\n border-radius: 50%;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);\n border: 1px solid #777;\n}\n.bolt::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 15%;\n width: 70%;\n height: 1px;\n background: #444;\n}\n.tl {\n top: 10px;\n left: 10px;\n transform: rotate(45deg);\n}\n.tr {\n top: 10px;\n right: 10px;\n transform: rotate(15deg);\n}\n.bl {\n bottom: 10px;\n left: 10px;\n transform: rotate(90deg);\n}\n.br {\n bottom: 10px;\n right: 10px;\n transform: rotate(30deg);\n}\n\n/* --- METERS --- */\n.meters-wrapper {\n display: flex;\n justify-content: center;\n gap: 20px;\n margin-bottom: 30px;\n position: relative;\n}\n\n.vu-meter {\n width: 100px;\n height: 80px;\n background: #fdf6e3;\n border: 2px solid #555;\n border-radius: 4px;\n position: relative;\n box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);\n overflow: hidden;\n}\n\n/* Backlight Layer */\n.backlight {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: radial-gradient(circle, #fffacd 20%, transparent 80%);\n opacity: 0;\n transition: opacity 1s 1s; /* Delayed turn on */\n mix-blend-mode: multiply;\n}\n\n.vu-scale {\n position: absolute;\n top: 10px;\n left: 10px;\n right: 10px;\n bottom: 0;\n border-top: 1px solid #333;\n border-radius: 50% 50% 0 0;\n}\n.vu-text {\n position: absolute;\n bottom: 25px;\n width: 100%;\n text-align: center;\n font-size: 0.6rem;\n color: #444;\n font-weight: bold;\n letter-spacing: 1px;\n}\n\n.needle {\n position: absolute;\n bottom: 10px;\n left: 50%;\n width: 1px;\n height: 60px;\n background: #d00;\n transform-origin: bottom center;\n transform: rotate(-45deg);\n transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n z-index: 5;\n filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));\n}\n\n/* Glass Glare */\n.vu-meter::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: linear-gradient(\n 135deg,\n rgba(255, 255, 255, 0.4) 0%,\n transparent 50%\n );\n pointer-events: none;\n}\n\n/* --- CONTROLS SECTION --- */\n.controls-deck {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0 10px;\n position: relative;\n z-index: 5;\n}\n\n/* Knurled Knob */\n.knob-group {\n text-align: center;\n}\n.knob-label {\n font-size: 0.7rem;\n color: #333;\n text-transform: uppercase;\n margin-top: 5px;\n}\n\n.knob {\n width: 60px;\n height: 60px;\n border-radius: 50%;\n background: conic-gradient(\n #999 0deg,\n #ccc 10deg,\n #999 20deg,\n #ccc 30deg,\n #999 40deg,\n #ccc 50deg,\n #999 60deg,\n #ccc 70deg,\n #999 80deg,\n #ccc 90deg,\n #999 100deg,\n #ccc 110deg,\n #999 120deg,\n #ccc 130deg,\n #999 140deg,\n #ccc 150deg,\n #999 160deg,\n #ccc 170deg,\n #999 180deg,\n #ccc 190deg,\n #999 200deg,\n #ccc 210deg,\n #999 220deg,\n #ccc 230deg,\n #999 240deg,\n #ccc 250deg,\n #999 260deg,\n #ccc 270deg,\n #999 280deg,\n #ccc 290deg,\n #999 300deg,\n #ccc 310deg,\n #999 320deg,\n #ccc 330deg,\n #999 340deg,\n #ccc 350deg\n );\n box-shadow:\n 0 5px 10px rgba(0, 0, 0, 0.5),\n inset 0 0 5px rgba(0, 0, 0, 0.5);\n position: relative;\n cursor: pointer;\n transition: transform 0.2s;\n}\n\n/* Knob Cap */\n.knob::after {\n content: \"\";\n position: absolute;\n top: 5px;\n left: 5px;\n right: 5px;\n bottom: 5px;\n background: radial-gradient(circle, #ddd, #aaa);\n border-radius: 50%;\n border: 1px solid #888;\n}\n/* Indicator Line */\n.knob::before {\n content: \"\";\n position: absolute;\n top: 10px;\n left: 50%;\n width: 2px;\n height: 20px;\n background: #333;\n transform: translateX(-50%);\n z-index: 2;\n}\n\n.knob:hover {\n transform: rotate(20deg);\n}\n\n/* Heavy Switch */\n.switch-housing {\n width: 50px;\n height: 80px;\n background: #bbb;\n border: 1px solid #888;\n border-radius: 4px;\n position: relative;\n box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);\n}\n\n.switch-lever {\n position: absolute;\n left: 50%;\n top: 50%;\n width: 14px;\n height: 40px;\n background: linear-gradient(90deg, #ccc, #fff, #999);\n border-radius: 3px;\n transform: translate(-50%, -50%) rotateX(-45deg);\n transform-origin: center bottom;\n box-shadow: 0 10px 10px rgba(0, 0, 0, 0.4);\n transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Snap effect */\n cursor: pointer;\n}\n\n/* Jewel Pilot Light */\n.jewel-light {\n width: 24px;\n height: 24px;\n background: var(--jewel-off);\n border-radius: 50%;\n border: 2px solid #888;\n position: relative;\n box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);\n transition: background-color 0.2s;\n overflow: hidden;\n}\n/* Facets */\n.jewel-light::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 45deg,\n transparent 40%,\n rgba(255, 255, 255, 0.4) 50%,\n transparent 60%\n ),\n linear-gradient(\n -45deg,\n transparent 40%,\n rgba(255, 255, 255, 0.4) 50%,\n transparent 60%\n );\n}\n\n.brand {\n text-align: center;\n margin-top: auto;\n padding-bottom: 10px;\n font-size: 1.2rem;\n color: #333;\n letter-spacing: 4px;\n text-transform: uppercase;\n text-shadow: 0 1px 0 #fff;\n}\n\n/* --- INTERACTIONS --- */\n\n/* Power ON State */\n#pwr:checked ~ .amp-unit .tube-bay .tube .heater {\n background-color: #fff; /* Hot center */\n box-shadow:\n 0 0 5px #fff,\n 0 0 10px var(--filament-on),\n 0 0 20px var(--filament-on);\n}\n\n#pwr:checked ~ .amp-unit .tube-bay .tube .glow-aura {\n opacity: 0.8;\n}\n\n#pwr:checked\n ~ .amp-unit\n .faceplate\n .controls-deck\n .switch-housing\n .switch-lever {\n transform: translate(-50%, -50%) rotateX(45deg); /* Flip up */\n box-shadow: 0 -5px 5px rgba(0, 0, 0, 0.4);\n}\n\n#pwr:checked ~ .amp-unit .faceplate .controls-deck .knob-group .jewel-light {\n background-color: var(--jewel-on);\n box-shadow: 0 0 15px var(--jewel-on);\n}\n\n#pwr:checked ~ .amp-unit .faceplate .meters-wrapper .vu-meter .backlight {\n opacity: 1;\n}\n\n/* Needle Physics - Only animates when on */\n#pwr:checked\n ~ .amp-unit\n .faceplate\n .meters-wrapper\n .vu-meter:nth-child(1)\n .needle {\n animation: bounce 0.5s infinite alternate ease-in-out;\n animation-delay: 2s; /* Wait for warm up */\n}\n#pwr:checked\n ~ .amp-unit\n .faceplate\n .meters-wrapper\n .vu-meter:nth-child(2)\n .needle {\n animation: bounce 0.6s infinite alternate ease-in-out;\n animation-delay: 2.1s;\n}\n\n@keyframes bounce {\n 0% {\n transform: rotate(-45deg);\n }\n 20% {\n transform: rotate(-10deg);\n }\n 40% {\n transform: rotate(-30deg);\n }\n 60% {\n transform: rotate(10deg);\n }\n 80% {\n transform: rotate(-5deg);\n }\n 100% {\n transform: rotate(20deg);\n }\n}\n"}

thin-earwig-61

👁 实时预览

📝 源代码