RGBCW\u706f\u5149\u63a7\u5236\u7cfb\u7edf<\/title>\n <style>\n \/* \u539f\u6709\u6837\u5f0f\u4fdd\u6301\u4e0d\u53d8 *\/\n \/* \u57fa\u7840\u6837\u5f0f\u91cd\u7f6e *\/\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n \n body {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n background: #1a1a2e;\n color: white;\n overflow-x: hidden;\n min-height: 100vh;\n }\n \n \/* \u8fb9\u6846\u5bb9\u5668\u6837\u5f0f *\/\n .rgbcw-border-container {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: 9998;\n opacity: 1;\n transition: opacity 0.3s ease;\n }\n \n \/* \u8fb9\u6846\u57fa\u7840\u6837\u5f0f *\/\n .rgbcw-border {\n position: absolute;\n background: #000;\n z-index: 9998;\n overflow: hidden;\n }\n \n \/* \u4e0a\u8fb9\u6846 *\/\n .rgbcw-top-border {\n top: 0;\n left: 0;\n width: 100%;\n height: 8px;\n }\n \n \/* \u53f3\u8fb9\u6846 *\/\n .rgbcw-right-border {\n top: 0;\n right: 0;\n width: 8px;\n height: 100%;\n }\n \n \/* \u4e0b\u8fb9\u6846 *\/\n .rgbcw-bottom-border {\n bottom: 0;\n left: 0;\n width: 100%;\n height: 8px;\n }\n \n \/* \u5de6\u8fb9\u6846 *\/\n .rgbcw-left-border {\n top: 0;\n left: 0;\n width: 8px;\n height: 100%;\n }\n \n \/* \u6d41\u52a8\u706f\u5149\u6bb5 *\/\n .rgbcw-light-segment {\n position: absolute;\n width: 30px;\n height: 8px;\n background: currentColor;\n border-radius: 4px;\n box-shadow: 0 0 10px currentColor, 0 0 20px currentColor;\n opacity: 0;\n }\n \n \/* \u5782\u76f4\u8fb9\u6846\u7684\u706f\u5149\u6bb5 *\/\n .rgbcw-right-border .rgbcw-light-segment,\n .rgbcw-left-border .rgbcw-light-segment {\n width: 8px;\n height: 30px;\n }\n \n \/* \u6d41\u52a8\u52a8\u753b *\/\n @keyframes rgbcwTopFlow {\n 0% {\n left: -30px;\n opacity: 0;\n }\n 5% {\n opacity: 1;\n }\n 95% {\n opacity: 1;\n }\n 100% {\n left: 100%;\n opacity: 0;\n }\n }\n \n @keyframes rgbcwRightFlow {\n 0% {\n top: -30px;\n opacity: 0;\n }\n 5% {\n opacity: 1;\n }\n 95% {\n opacity: 1;\n }\n 100% {\n top: 100%;\n opacity: 0;\n }\n }\n \n @keyframes rgbcwBottomFlow {\n 0% {\n right: -30px;\n opacity: 0;\n }\n 5% {\n opacity: 1;\n }\n 95% {\n opacity: 1;\n }\n 100% {\n right: 100%;\n opacity: 0;\n }\n }\n \n @keyframes rgbcwLeftFlow {\n 0% {\n bottom: -30px;\n opacity: 0;\n }\n 5% {\n opacity: 1;\n }\n 95% {\n opacity: 1;\n }\n 100% {\n bottom: 100%;\n opacity: 0;\n }\n }\n \n \/* \u95ea\u70c1\u52a8\u753b *\/\n @keyframes rgbcwBlink {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0; }\n }\n \n \/* \u547c\u5438\u52a8\u753b *\/\n @keyframes rgbcwBreathe {\n 0%, 100% { opacity: 0.3; }\n 50% { opacity: 1; }\n }\n \n \/* \u97f3\u4e50\u5f8b\u52a8\u95ea\u70c1\u6548\u679c *\/\n .rgbcw-music-blinking .rgbcw-border {\n animation: rgbcwMusicBlink 1s linear infinite;\n }\n \n @keyframes rgbcwMusicBlink {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.2; }\n }\n \n \/* \u63a7\u5236\u5668\u9762\u677f\u6837\u5f0f *\/\n .rgbcw-control-panel {\n position: fixed;\n top: 20px;\n left: 50%;\n transform: translateX(-50%);\n background: linear-gradient(145deg, rgba(30, 30, 40, 0.95) 0%, rgba(20, 20, 30, 0.95) 100%);\n color: white;\n padding: 15px;\n border-radius: 20px;\n z-index: 9999;\n font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;\n font-size: 14px;\n width: 320px;\n box-shadow: \n 0 10px 30px rgba(0, 0, 0, 0.5),\n 0 1px 0 rgba(255, 255, 255, 0.1) inset,\n 0 -1px 0 rgba(0, 0, 0, 0.5) inset;\n pointer-events: auto;\n transition: all 0.3s ease;\n border: 1px solid rgba(255, 255, 255, 0.1);\n backdrop-filter: blur(15px);\n -webkit-backdrop-filter: blur(15px);\n max-height: 80vh;\n overflow-y: auto;\n }\n \n \/* \u6700\u5c0f\u5316\u72b6\u6001\u6837\u5f0f - \u7ad6\u76f4\u653e\u7f6e\u5728\u5de6\u4fa7 *\/\n .rgbcw-control-panel.minimized {\n width: 40px;\n height: auto;\n top: 50%;\n left: 10px;\n transform: translateY(-50%);\n padding: 10px 5px;\n overflow: hidden;\n }\n \n .rgbcw-control-panel.minimized .rgbcw-control-content {\n display: none;\n }\n \n .rgbcw-control-panel.minimized .rgbcw-control-header {\n flex-direction: column;\n align-items: center;\n margin-bottom: 0;\n padding-bottom: 0;\n border-bottom: none;\n }\n \n .rgbcw-control-panel.minimized .rgbcw-control-title {\n writing-mode: vertical-rl;\n text-orientation: mixed;\n margin: 10px 0;\n transform: rotate(180deg);\n }\n \n .rgbcw-control-panel.minimized .rgbcw-control-buttons {\n position: static;\n flex-direction: column;\n gap: 5px;\n }\n \n \/* \u4fee\u6539\u63a7\u5236\u9762\u677f\u5934\u90e8\u6837\u5f0f *\/\n .rgbcw-control-header {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n margin-bottom: 10px;\n padding-bottom: 10px;\n border-bottom: 1px solid rgba(255, 255, 255, 0.2);\n position: relative;\n }\n \n \/* \u4fee\u6539\u63a7\u5236\u6309\u94ae\u6837\u5f0f *\/\n .rgbcw-control-buttons {\n position: static;\n display: flex;\n gap: 2px;\n margin-bottom: 5px;\n order: -1; \/* \u5c06\u6309\u94ae\u79fb\u5230\u6807\u9898\u4e0a\u65b9 *\/\n }\n \n .rgbcw-control-btn {\n background: rgba(255, 255, 255, 0.1);\n border: none;\n color: white;\n width: 14px;\n height: 14px;\n border-radius: 3px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 8px;\n z-index: 10000;\n opacity: 0.7;\n transition: opacity 0.3s ease;\n line-height: 1;\n }\n \n .rgbcw-control-btn:hover {\n opacity: 1;\n }\n \n .rgbcw-control-title {\n font-weight: bold;\n font-size: 16px;\n background: linear-gradient(90deg, #fff, #a0a0ff);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n text-align: center;\n width: 100%;\n }\n \n .rgbcw-control-group {\n margin-bottom: 15px;\n }\n \n \/* \u4fee\u6539\u63a7\u5236\u884c\u6837\u5f0f - \u51cf\u5c0f\u6807\u7b7e\u4e0e\u6ed1\u52a8\u6761\u95f4\u8ddd *\/\n .rgbcw-control-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 8px;\n gap: 8px; \/* \u6dfb\u52a0\u95f4\u8ddd\u63a7\u5236 *\/\n }\n \n .rgbcw-control-label {\n flex: 0 0 auto; \/* \u4e0d\u4f38\u7f29\uff0c\u81ea\u52a8\u5bbd\u5ea6 *\/\n font-weight: 600;\n width: 50px; \/* \u56fa\u5b9a\u5bbd\u5ea6 *\/\n }\n \n \/* \u4fee\u6539\u72b6\u6001\u503c\u663e\u793a - \u5de6\u53f3\u6392\u5217\u6587\u5b57 *\/\n .rgbcw-control-value {\n width: 50px; \/* \u589e\u52a0\u5bbd\u5ea6\u4ee5\u5bb9\u7eb3\u66f4\u591a\u6587\u5b57 *\/\n text-align: center;\n flex: 0 0 auto; \/* \u4e0d\u4f38\u7f29\uff0c\u81ea\u52a8\u5bbd\u5ea6 *\/\n white-space: nowrap; \/* \u9632\u6b62\u6587\u5b57\u6362\u884c *\/\n overflow: hidden;\n text-overflow: ellipsis; \/* \u6587\u5b57\u8fc7\u591a\u65f6\u663e\u793a\u7701\u7565\u53f7 *\/\n font-size: 12px;\n }\n \n .rgbcw-slider {\n flex: 0.8; \/* \u4fee\u6539\uff1a\u5360\u636e\u5269\u4f59\u7a7a\u95f4\u768480%\uff0c\u51cf\u5c0f20% *\/\n height: 6px;\n -webkit-appearance: none;\n background: linear-gradient(to right, #333, #555);\n border-radius: 3px;\n outline: none;\n box-shadow: \n 0 2px 5px rgba(0, 0, 0, 0.3) inset,\n 0 1px 0 rgba(255, 255, 255, 0.1);\n border: 1px solid rgba(0, 0, 0, 0.3);\n min-width: 48px; \/* \u4fee\u6539\uff1a\u786e\u4fdd\u6ed1\u52a8\u6761\u6709\u6700\u5c0f\u5bbd\u5ea6\uff0c\u51cf\u5c0f20% *\/\n }\n \n .rgbcw-slider::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n background: linear-gradient(145deg, #aaa, #888);\n cursor: pointer;\n box-shadow: \n 0 3px 8px rgba(0, 0, 0, 0.4),\n 0 1px 0 rgba(255, 255, 255, 0.2) inset;\n border: 1px solid rgba(0, 0, 0, 0.3);\n }\n \n .rgbcw-slider::-moz-range-thumb {\n width: 16px;\n height: 16px;\n border-radius: 50%;\n background: linear-gradient(145deg, #aaa, #888);\n cursor: pointer;\n box-shadow: \n 0 3px 8px rgba(0, 0, 0, 0.4),\n 0 1px 0 rgba(255, 255, 255, 0.2) inset;\n border: 1px solid rgba(0, 0, 0, 0.3);\n }\n \n \/* \u4fee\u6539\u8bed\u8a00\u9009\u62e9\u5668\u6837\u5f0f *\/\n .rgbcw-select {\n background: rgba(40, 40, 50, 0.9);\n border: 1px solid rgba(255, 255, 255, 0.2);\n color: white;\n padding: 6px 10px;\n border-radius: 8px;\n width: 150px;\n cursor: pointer;\n outline: none;\n }\n \n \/* \u8bed\u8a00\u9009\u62e9\u5668\u9009\u9879\u6837\u5f0f *\/\n .rgbcw-select option {\n background: rgba(40, 40, 50, 0.9);\n color: white;\n }\n \n .rgbcw-toggle {\n position: relative;\n display: inline-block;\n width: 50px;\n height: 24px;\n }\n \n .rgbcw-toggle input {\n opacity: 0;\n width: 0;\n height: 0;\n }\n \n .rgbcw-toggle-slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(255, 255, 255, 0.2);\n transition: .4s;\n border-radius: 24px;\n }\n \n .rgbcw-toggle-slider:before {\n position: absolute;\n content: \"\";\n height: 16px;\n width: 16px;\n left: 4px;\n bottom: 4px;\n background-color: white;\n transition: .4s;\n border-radius: 50%;\n }\n \n .rgbcw-toggle input:checked + .rgbcw-toggle-slider {\n background: linear-gradient(145deg, rgba(0, 150, 0, 0.8), rgba(0, 100, 0, 0.8));\n }\n \n .rgbcw-toggle input:checked + .rgbcw-toggle-slider:before {\n transform: translateX(26px);\n }\n \n .rgbcw-auto-switch {\n display: flex;\n align-items: center;\n gap: 10px;\n }\n \n \/* \u63a7\u5236\u6309\u94ae\u6837\u5f0f *\/\n .rgbcw-control-btn-group {\n display: flex;\n gap: 5px;\n margin-bottom: 10px;\n }\n \n .rgbcw-btn {\n flex: 1;\n padding: 8px;\n background: linear-gradient(145deg, rgba(50, 50, 60, 0.9), rgba(35, 35, 45, 0.9));\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 8px;\n color: white;\n cursor: pointer;\n transition: all 0.3s ease;\n text-align: center;\n }\n \n .rgbcw-btn.active {\n border: 2px solid #fff;\n transform: scale(1.05);\n box-shadow: \n 0 0 15px currentColor,\n 0 3px 10px rgba(0, 0, 0, 0.4);\n }\n \n \/* \u4fee\u6539\u5f00\/\u5173\u6309\u94ae\u5bbd\u5ea6 *\/\n .rgbcw-on-btn, .rgbcw-off-btn {\n width: 80%; \/* \u51cf\u5c0f20%\u7684\u5bbd\u5ea6 *\/\n margin: 0 auto; \/* \u5c45\u4e2d\u663e\u793a *\/\n }\n \n .rgbcw-on-btn {\n background: linear-gradient(145deg, rgba(0, 150, 0, 0.8), rgba(0, 100, 0, 0.8));\n border: 2px solid rgba(0, 255, 0, 0.3);\n }\n \n .rgbcw-off-btn {\n background: linear-gradient(145deg, rgba(150, 0, 0, 0.8), rgba(100, 0, 0, 0.8));\n border: 2px solid rgba(255, 0, 0, 0.3);\n }\n \n \/* \u4fee\u6539\u81ea\u52a8\u5207\u6362\u6309\u94ae\u6837\u5f0f *\/\n .rgbcw-auto-switch-btn.active {\n background: linear-gradient(145deg, rgba(0, 150, 0, 0.8), rgba(0, 100, 0, 0.8));\n border: 3px solid #fff; \/* \u4fee\u6539\uff1a\u52a0\u7c97\u767d\u8272\u8fb9\u6846 *\/\n box-shadow: \n 0 0 15px currentColor,\n 0 3px 10px rgba(0, 0, 0, 0.4);\n transform: scale(1.05);\n }\n \n \/* \u989c\u8272\u9009\u62e9\u5668\u6837\u5f0f *\/\n .rgbcw-color-options {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n margin-top: 6px;\n }\n \n .rgbcw-color-option {\n width: 25px;\n height: 25px;\n border-radius: 50%;\n cursor: pointer;\n border: 2px solid transparent;\n transition: all 0.3s ease;\n box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);\n flex-shrink: 0;\n }\n \n .rgbcw-color-option.active {\n border: 2px solid #fff;\n transform: scale(1.15);\n box-shadow: \n 0 0 15px currentColor,\n 0 3px 10px rgba(0, 0, 0, 0.4);\n }\n \n .rgbcw-color-red { background: #ff0000; }\n .rgbcw-color-blue { background: #0000ff; }\n .rgbcw-color-green { background: #00ff00; }\n .rgbcw-color-gold { background: #ffd700; }\n .rgbcw-color-sky-blue { background: #87CEEB; }\n .rgbcw-color-mixed { \n background: linear-gradient(45deg, \n #ff0000, #0000ff, #00ff00, #ffd700, #87CEEB); \n }\n \n \/* \u6570\u636e\u76d1\u63a7\u533a\u57df *\/\n .rgbcw-data-monitor {\n display: flex;\n gap: 8px;\n margin-top: 5px;\n }\n \n .rgbcw-monitor-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n background: rgba(30, 30, 40, 0.7);\n border-radius: 8px;\n padding: 6px;\n border: 1px solid rgba(255, 255, 255, 0.1);\n flex: 1;\n }\n \n .rgbcw-monitor-label {\n font-size: 0.75rem;\n color: #aaa;\n margin-bottom: 4px;\n }\n \n .rgbcw-volume-display {\n width: 100%;\n height: 18px;\n background: rgba(0, 0, 0, 0.3);\n border-radius: 4px;\n overflow: hidden;\n position: relative;\n }\n \n .rgbcw-volume-bar {\n height: 100%;\n width: 0%;\n background: linear-gradient(90deg, #00ff00, #ffff00, #ff0000);\n transition: width 0.1s ease;\n }\n \n .rgbcw-color-preview {\n width: 100%;\n height: 18px;\n border-radius: 4px;\n border: 1px solid rgba(255, 255, 255, 0.2);\n }\n \n \/* \u6f14\u793a\u5185\u5bb9\u6837\u5f0f *\/\n .demo-content {\n padding: 40px 20px;\n max-width: 800px;\n margin: 0 auto;\n text-align: center;\n }\n \n .demo-title {\n font-size: 2.5rem;\n margin-bottom: 20px;\n background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n \n .demo-description {\n font-size: 1.2rem;\n line-height: 1.6;\n margin-bottom: 30px;\n color: #aaa;\n }\n \n .demo-features {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 20px;\n margin-top: 40px;\n }\n \n .feature-card {\n background: rgba(255, 255, 255, 0.05);\n border-radius: 12px;\n padding: 20px;\n transition: transform 0.3s ease;\n }\n \n .feature-card:hover {\n transform: translateY(-5px);\n }\n \n .feature-icon {\n font-size: 2rem;\n margin-bottom: 15px;\n }\n \n .feature-title {\n font-size: 1.2rem;\n margin-bottom: 10px;\n color: #4ecdc4;\n }\n \n .feature-description {\n font-size: 0.9rem;\n color: #aaa;\n }\n \n \/* \u65b0\u589e\u6837\u5f0f *\/\n .rgbcw-language-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 15px;\n }\n \n .rgbcw-auto-switch-btn {\n padding: 6px 12px;\n background: linear-gradient(145deg, rgba(50, 50, 60, 0.9), rgba(35, 35, 45, 0.9));\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 8px;\n color: white;\n cursor: pointer;\n font-size: 12px;\n transition: all 0.3s ease;\n }\n \n \/* \u4fee\u6539\u6a21\u5f0f\u6807\u7b7e\u548c\u7279\u6b8a\u6a21\u5f0f\u6807\u7b7e\u5c45\u4e2d\u663e\u793a *\/\n .rgbcw-mode-label, .rgbcw-special-mode-label {\n text-align: center;\n width: 100%;\n margin-bottom: 8px;\n white-space: nowrap;\n }\n \n .rgbcw-mode-buttons {\n display: flex;\n gap: 5px;\n margin-top: 8px;\n }\n \n .rgbcw-mode-btn {\n flex: 1;\n padding: 8px;\n background: linear-gradient(145deg, rgba(50, 50, 60, 0.9), rgba(35, 35, 45, 0.9));\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 8px;\n color: white;\n cursor: pointer;\n transition: all 0.3s ease;\n text-align: center;\n font-size: 12px;\n }\n \n .rgbcw-mode-btn.active {\n border: 2px solid #fff;\n transform: scale(1.05);\n box-shadow: \n 0 0 15px currentColor,\n 0 3px 10px rgba(0, 0, 0, 0.4);\n }\n \n \/* \u4fee\u6539\u540e\u7684\u6837\u5f0f *\/\n .rgbcw-color-mode-title {\n font-weight: 600;\n font-size: 14px;\n text-align: center;\n margin-bottom: 8px;\n }\n \n \/* \u624b\u673a\u9002\u914d\u6837\u5f0f *\/\n @media (max-width: 768px) {\n .rgbcw-control-panel {\n width: 90%;\n right: auto;\n left: 50%;\n transform: translateX(-50%);\n top: 10px;\n max-height: 85vh;\n padding: 12px;\n }\n \n \/* \u624b\u673a\u7aef\u6700\u5c0f\u5316\u65f6\u4e5f\u7ad6\u76f4\u653e\u7f6e\u5728\u5de6\u4fa7 *\/\n .rgbcw-control-panel.minimized {\n width: 40px;\n height: auto;\n top: 50%;\n left: 10px;\n transform: translateY(-50%);\n padding: 10px 5px;\n overflow: hidden;\n }\n \n .rgbcw-control-panel.minimized .rgbcw-control-content {\n display: none;\n }\n \n .rgbcw-control-panel.minimized .rgbcw-control-header {\n flex-direction: column;\n align-items: center;\n margin-bottom: 0;\n padding-bottom: 0;\n border-bottom: none;\n }\n \n .rgbcw-control-panel.minimized .rgbcw-control-title {\n writing-mode: vertical-rl;\n text-orientation: mixed;\n margin: 10px 0;\n transform: rotate(180deg);\n }\n \n .rgbcw-control-panel.minimized .rgbcw-control-buttons {\n position: static;\n flex-direction: column;\n gap: 5px;\n }\n \n .rgbcw-control-content {\n max-height: calc(85vh - 60px);\n overflow-y: auto;\n }\n \n .rgbcw-control-group {\n margin-bottom: 12px;\n }\n \n .rgbcw-control-row {\n flex-wrap: wrap;\n gap: 5px; \/* \u624b\u673a\u7aef\u66f4\u5c0f\u7684\u95f4\u8ddd *\/\n }\n \n .rgbcw-control-label {\n width: 40px; \/* \u624b\u673a\u7aef\u66f4\u5c0f\u7684\u5bbd\u5ea6 *\/\n }\n \n .rgbcw-control-value {\n width: 45px; \/* \u624b\u673a\u7aef\u8c03\u6574\u5bbd\u5ea6 *\/\n font-size: 11px;\n }\n \n .rgbcw-slider {\n width: 96px; \/* \u4fee\u6539\uff1a\u624b\u673a\u7aef\u5bbd\u5ea6\u4e5f\u51cf\u5c0f20% *\/\n flex: 0.8; \/* \u4fee\u6539\uff1a\u624b\u673a\u7aef\u4e5f\u4fdd\u6301\u4e00\u81f4 *\/\n }\n \n .rgbcw-select {\n width: 130px;\n }\n \n .rgbcw-color-options {\n justify-content: space-around;\n gap: 4px;\n }\n \n .rgbcw-color-option {\n width: 22px;\n height: 22px;\n }\n \n .rgbcw-mode-buttons {\n flex-wrap: wrap;\n }\n \n .rgbcw-mode-btn {\n min-width: 70px;\n font-size: 11px;\n padding: 6px;\n }\n \n .rgbcw-control-btn-group {\n flex-wrap: wrap;\n }\n \n .rgbcw-btn {\n min-width: 80px;\n font-size: 12px;\n padding: 6px;\n }\n \n .demo-title {\n font-size: 1.8rem;\n }\n \n .demo-description {\n font-size: 1rem;\n }\n \n .demo-features {\n grid-template-columns: 1fr;\n gap: 15px;\n }\n \n .feature-card {\n padding: 15px;\n }\n }\n \n \/* \u5c0f\u5c4f\u5e55\u624b\u673a\u9002\u914d *\/\n @media (max-width: 480px) {\n .rgbcw-control-panel {\n width: 95%;\n padding: 10px;\n }\n \n \/* \u5c0f\u5c4f\u5e55\u624b\u673a\u6700\u5c0f\u5316\u65f6\u4e5f\u7ad6\u76f4\u653e\u7f6e\u5728\u5de6\u4fa7 *\/\n .rgbcw-control-panel.minimized {\n width: 40px;\n height: auto;\n top: 50%;\n left: 5px;\n transform: translateY(-50%);\n padding: 10px 5px;\n overflow: hidden;\n }\n \n .rgbcw-control-row {\n gap: 3px; \/* \u5c0f\u5c4f\u5e55\u624b\u673a\u66f4\u5c0f\u7684\u95f4\u8ddd *\/\n }\n \n .rgbcw-control-label {\n width: 35px; \/* \u5c0f\u5c4f\u5e55\u624b\u673a\u66f4\u5c0f\u7684\u5bbd\u5ea6 *\/\n font-size: 13px;\n }\n \n .rgbcw-control-value {\n width: 40px; \/* \u5c0f\u5c4f\u5e55\u624b\u673a\u8c03\u6574\u5bbd\u5ea6 *\/\n font-size: 10px;\n }\n \n .rgbcw-slider {\n width: 80px; \/* \u4fee\u6539\uff1a\u5c0f\u5c4f\u5e55\u624b\u673a\u5bbd\u5ea6\u4e5f\u51cf\u5c0f20% *\/\n flex: 0.8; \/* \u4fee\u6539\uff1a\u5c0f\u5c4f\u5e55\u624b\u673a\u4e5f\u4fdd\u6301\u4e00\u81f4 *\/\n }\n \n .rgbcw-select {\n width: 110px;\n }\n \n .rgbcw-mode-btn {\n min-width: 60px;\n font-size: 10px;\n padding: 5px;\n }\n \n .rgbcw-btn {\n min-width: 70px;\n font-size: 11px;\n padding: 5px;\n }\n \n .rgbcw-color-option {\n width: 20px;\n height: 20px;\n }\n }\n <\/style>\n<\/head>\n<body>\n \n <div class=\"rgbcw-border-container\" id=\"rgbcwBorderContainer\">\n \n <\/div>\n\n \n <div class=\"rgbcw-control-panel\" id=\"rgbcwControlPanel\">\n <div class=\"rgbcw-control-header\">\n <div class=\"rgbcw-control-buttons\">\n <button class=\"rgbcw-control-btn\" id=\"rgbcwMinimizeBtn\">\u2212<\/button>\n <button class=\"rgbcw-control-btn\" id=\"rgbcwCloseBtn\">\u00d7<\/button>\n <\/div>\n <div class=\"rgbcw-control-title\">RGBCW\u706f\u5149\u63a7\u5236<\/div>\n <\/div>\n \n <div class=\"rgbcw-control-content\" id=\"rgbcwControlContent\">\n \n <div class=\"rgbcw-language-row\">\n <div class=\"rgbcw-auto-switch-btn\" id=\"rgbcwAutoSwitchBtn\">\u81ea\u52a8\u5207\u6362<\/div>\n <select class=\"rgbcw-select\" id=\"rgbcwLanguageSelect\">\n <option value=\"ar\">\u0627\u0644\u0639\u0631\u0628\u064a\u0629<\/option>\n <option value=\"bn\">\u09ac\u09be\u0982\u09b2\u09be<\/option>\n <option value=\"de\">Deutsch<\/option>\n <option value=\"en\">English<\/option>\n <option value=\"es\">Espa\u00f1ol<\/option>\n <option value=\"fa\">\u0641\u0627\u0631\u0633\u06cc<\/option>\n <option value=\"fr\">Fran\u00e7ais<\/option>\n <option value=\"ha\">Hausa<\/option>\n <option value=\"hi\">\u0939\u093f\u0928\u094d\u0926\u0940<\/option>\n <option value=\"it\">Italiano<\/option>\n <option value=\"ja\">\u65e5\u672c\u8a9e<\/option>\n <option value=\"ko\">\ud55c\uad6d\uc5b4<\/option>\n <option value=\"ms\">Bahasa Melayu<\/option>\n <option value=\"pa\">\u0a2a\u0a70\u0a1c\u0a3e\u0a2c\u0a40<\/option>\n <option value=\"pt\">Portugu\u00eas<\/option>\n <option value=\"ru\">\u0420\u0443\u0441\u0441\u043a\u0438\u0439<\/option>\n <option value=\"sw\">Kiswahili<\/option>\n <option value=\"tr\">T\u00fcrk\u00e7e<\/option>\n <option value=\"yue\">\u4e2d\u6587-\u7ca4\u8bed<\/option>\n <option value=\"zh-Hans\" selected>\u4e2d\u6587-\u7b80\u4f53<\/option>\n <option value=\"zh-Hant\">\u4e2d\u6587-\u7e41\u4f53<\/option>\n <\/select>\n <\/div>\n \n \n <div class=\"rgbcw-control-group\">\n <div class=\"rgbcw-control-btn-group\">\n <div class=\"rgbcw-btn rgbcw-on-btn active\" id=\"rgbcwOnBtn\">\u5f00<\/div>\n <div class=\"rgbcw-btn rgbcw-off-btn\" id=\"rgbcwOffBtn\">\u5173<\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"rgbcw-control-group\">\n <div class=\"rgbcw-color-mode-title\" id=\"rgbcwColorModeStatus\">\u5355\u8272\u6a21\u5f0f – \u91d1\u9ec4\u8272<\/div>\n <div class=\"rgbcw-color-options\">\n <div class=\"rgbcw-color-option rgbcw-color-red\" data-color=\"red\"><\/div>\n <div class=\"rgbcw-color-option rgbcw-color-blue\" data-color=\"blue\"><\/div>\n <div class=\"rgbcw-color-option rgbcw-color-green\" data-color=\"green\"><\/div>\n <div class=\"rgbcw-color-option rgbcw-color-gold active\" data-color=\"gold\"><\/div>\n <div class=\"rgbcw-color-option rgbcw-color-sky-blue\" data-color=\"sky-blue\"><\/div>\n <div class=\"rgbcw-color-option rgbcw-color-mixed\" data-color=\"mixed\"><\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"rgbcw-control-group\">\n <div class=\"rgbcw-mode-label\" id=\"rgbcwModeLabel\">\u6a21\u5f0f<\/div>\n <div class=\"rgbcw-mode-buttons\">\n <div class=\"rgbcw-mode-btn active\" data-mode=\"flow\">\u6d41\u52a8<\/div>\n <div class=\"rgbcw-mode-btn\" data-mode=\"blink\">\u95ea\u70c1<\/div>\n <div class=\"rgbcw-mode-btn\" data-mode=\"breathe\">\u547c\u5438<\/div>\n <div class=\"rgbcw-mode-btn\" data-mode=\"static\">\u9759\u6001<\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"rgbcw-control-group\">\n <div class=\"rgbcw-special-mode-label\" id=\"rgbcwSpecialModeLabel\">\u7279\u6b8a\u6a21\u5f0f<\/div>\n <div class=\"rgbcw-control-btn-group\">\n <div class=\"rgbcw-btn\" id=\"rgbcwMusicMode\">\u97f3\u4e50\u5f8b\u52a8<\/div>\n <div class=\"rgbcw-btn\" id=\"rgbcwCameraMode\">\u73af\u5883\u540c\u8272<\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"rgbcw-control-group\">\n <div class=\"rgbcw-data-monitor\">\n <div class=\"rgbcw-monitor-item\">\n <div class=\"rgbcw-monitor-label\" id=\"rgbcwVolumeLabel\">\u9ea6\u514b\u98ce\u54cd\u5ea6<\/div>\n <div class=\"rgbcw-volume-display\">\n <div class=\"rgbcw-volume-bar\" id=\"rgbcwVolumeBar\"><\/div>\n <\/div>\n <\/div>\n <div class=\"rgbcw-monitor-item\">\n <div class=\"rgbcw-monitor-label\" id=\"rgbcwCameraLabel\">\u6444\u50cf\u5934\u4e3b\u989c\u8272<\/div>\n <div class=\"rgbcw-color-preview\" id=\"rgbcwColorPreview\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"rgbcw-control-group\">\n <div class=\"rgbcw-control-row\">\n <div class=\"rgbcw-control-label\" id=\"rgbcwSpeedLabel\">\u901f\u5ea6<\/div>\n <input type=\"range\" min=\"1\" max=\"10\" value=\"7\" class=\"rgbcw-slider\" id=\"rgbcwSpeedSlider\">\n <div class=\"rgbcw-control-value\" id=\"rgbcwSpeedValue\">\u4e2d\u7b49<\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"rgbcw-control-group\">\n <div class=\"rgbcw-control-row\">\n <div class=\"rgbcw-control-label\" id=\"rgbcwBrightnessLabel\">\u4eae\u5ea6<\/div>\n <input type=\"range\" min=\"1\" max=\"10\" value=\"7\" class=\"rgbcw-slider\" id=\"rgbcwBrightnessSlider\">\n <div class=\"rgbcw-control-value\" id=\"rgbcwBrightnessValue\">\u4e2d\u7b49<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"demo-content\">\n <h1 class=\"demo-title\">RGBCW\u5e7b\u5f69\u706f\u5149\u63a7\u5236\u7cfb\u7edf<\/h1>\n <p class=\"demo-description\">\n \u8fd9\u662f\u4e00\u4e2a\u5b8c\u5168\u529f\u80fd\u7684RGBCW\u706f\u5149\u63a7\u5236\u7cfb\u7edf\uff0c\u5177\u6709\u56db\u79cd\u706f\u5149\u6a21\u5f0f\u3001\u516d\u79cd\u989c\u8272\u9009\u9879\u4ee5\u53ca\u97f3\u4e50\u5f8b\u52a8\u548c\u73af\u5883\u540c\u8272\u7b49\u7279\u6b8a\u529f\u80fd\u3002\n \u63a7\u5236\u9762\u677f\u53ef\u8ba9\u60a8\u5b8c\u5168\u81ea\u5b9a\u4e49\u706f\u5149\u6548\u679c\u3002\n <\/p>\n \n <div class=\"demo-features\">\n <div class=\"feature-card\">\n <div class=\"feature-icon\">\ud83c\udfa8<\/div>\n <h3 class=\"feature-title\">\u591a\u5f69\u706f\u5149\u6548\u679c<\/h3>\n <p class=\"feature-description\">\u652f\u6301\u591a\u79cd\u989c\u8272\u6a21\u5f0f\u548c\u52a8\u6001\u6548\u679c\uff0c\u5305\u62ec\u6d41\u52a8\u3001\u95ea\u70c1\u3001\u547c\u5438\u548c\u9759\u6001\u6a21\u5f0f\u3002<\/p>\n <\/div>\n <div class=\"feature-card\">\n <div class=\"feature-icon\">\ud83c\udfb5<\/div>\n <h3 class=\"feature-title\">\u97f3\u4e50\u5f8b\u52a8\u6a21\u5f0f<\/h3>\n <p class=\"feature-description\">\u706f\u5149\u4f1a\u968f\u7740\u73af\u5883\u97f3\u4e50\u7684\u8282\u594f\u53d8\u5316\uff0c\u521b\u9020\u6c89\u6d78\u5f0f\u7684\u89c6\u542c\u4f53\u9a8c\u3002<\/p>\n <\/div>\n <div class=\"feature-card\">\n <div class=\"feature-icon\">\ud83d\udcf7<\/div>\n <h3 class=\"feature-title\">\u73af\u5883\u540c\u8272\u6a21\u5f0f<\/h3>\n <p class=\"feature-description\">\u706f\u5149\u4f1a\u81ea\u52a8\u5339\u914d\u6444\u50cf\u5934\u6355\u6349\u5230\u7684\u4e3b\u8981\u989c\u8272\uff0c\u4e0e\u73af\u5883\u878d\u4e3a\u4e00\u4f53\u3002<\/p>\n <\/div>\n <div class=\"feature-card\">\n <div class=\"feature-icon\">\u2699\ufe0f<\/div>\n <h3 class=\"feature-title\">\u5b8c\u5168\u53ef\u5b9a\u5236<\/h3>\n <p class=\"feature-description\">\u53ef\u8c03\u8282\u901f\u5ea6\u3001\u4eae\u5ea6\uff0c\u652f\u6301\u81ea\u52a8\u5207\u6362\u548c\u591a\u8bed\u8a00\u754c\u9762\u3002<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n<script src=\"\/js\/shouye.js\"><\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>RGBCW\u706f\u5149\u63a7\u5236\u7cfb\u7edf \u2212 \u00d7 RGBCW\u706f\u5149\u63a7\u5236 <span class=\"excerpt-hellip\"> [\u2026]<\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-2403","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/rgbcw.org\/index.php\/wp-json\/wp\/v2\/pages\/2403","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rgbcw.org\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/rgbcw.org\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/rgbcw.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rgbcw.org\/index.php\/wp-json\/wp\/v2\/comments?post=2403"}],"version-history":[{"count":2,"href":"https:\/\/rgbcw.org\/index.php\/wp-json\/wp\/v2\/pages\/2403\/revisions"}],"predecessor-version":[{"id":2416,"href":"https:\/\/rgbcw.org\/index.php\/wp-json\/wp\/v2\/pages\/2403\/revisions\/2416"}],"wp:attachment":[{"href":"https:\/\/rgbcw.org\/index.php\/wp-json\/wp\/v2\/media?parent=2403"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":2403,"date":"2016-10-04T08:55:33","date_gmt":"2016-10-04T08:55:33","guid":{"rendered":"http:\/\/themes.muffingroup.com\/be\/snapshot\/?page_id=2"},"modified":"2025-10-13T09:57:28","modified_gmt":"2025-10-13T01:57:28","slug":"home","status":"publish","type":"page","link":"https:\/\/rgbcw.org\/","title":{"rendered":"Home"},"content":{"rendered":"\n\n\n\n \n \n RGBCW\u706f\u5149\u63a7\u5236\u7cfb\u7edf<\/title>\n <style>\n \/* \u539f\u6709\u6837\u5f0f\u4fdd\u6301\u4e0d\u53d8 *\/\n \/* \u57fa\u7840\u6837\u5f0f\u91cd\u7f6e *\/\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n \n body {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n background: #1a1a2e;\n color: white;\n overflow-x: hidden;\n min-height: 100vh;\n }\n \n \/* \u8fb9\u6846\u5bb9\u5668\u6837\u5f0f *\/\n .rgbcw-border-container {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: 9998;\n opacity: 1;\n transition: opacity 0.3s ease;\n }\n \n \/* \u8fb9\u6846\u57fa\u7840\u6837\u5f0f *\/\n .rgbcw-border {\n position: absolute;\n background: #000;\n z-index: 9998;\n overflow: hidden;\n }\n \n \/* \u4e0a\u8fb9\u6846 *\/\n .rgbcw-top-border {\n top: 0;\n left: 0;\n width: 100%;\n height: 8px;\n }\n \n \/* \u53f3\u8fb9\u6846 *\/\n .rgbcw-right-border {\n top: 0;\n right: 0;\n width: 8px;\n height: 100%;\n }\n \n \/* \u4e0b\u8fb9\u6846 *\/\n .rgbcw-bottom-border {\n bottom: 0;\n left: 0;\n width: 100%;\n height: 8px;\n }\n \n \/* \u5de6\u8fb9\u6846 *\/\n .rgbcw-left-border {\n top: 0;\n left: 0;\n width: 8px;\n height: 100%;\n }\n \n \/* \u6d41\u52a8\u706f\u5149\u6bb5 *\/\n .rgbcw-light-segment {\n position: absolute;\n width: 30px;\n height: 8px;\n background: currentColor;\n border-radius: 4px;\n box-shadow: 0 0 10px currentColor, 0 0 20px currentColor;\n opacity: 0;\n }\n \n \/* \u5782\u76f4\u8fb9\u6846\u7684\u706f\u5149\u6bb5 *\/\n .rgbcw-right-border .rgbcw-light-segment,\n .rgbcw-left-border .rgbcw-light-segment {\n width: 8px;\n height: 30px;\n }\n \n \/* \u6d41\u52a8\u52a8\u753b *\/\n @keyframes rgbcwTopFlow {\n 0% {\n left: -30px;\n opacity: 0;\n }\n 5% {\n opacity: 1;\n }\n 95% {\n opacity: 1;\n }\n 100% {\n left: 100%;\n opacity: 0;\n }\n }\n \n @keyframes rgbcwRightFlow {\n 0% {\n top: -30px;\n opacity: 0;\n }\n 5% {\n opacity: 1;\n }\n 95% {\n opacity: 1;\n }\n 100% {\n top: 100%;\n opacity: 0;\n }\n }\n \n @keyframes rgbcwBottomFlow {\n 0% {\n right: -30px;\n opacity: 0;\n }\n 5% {\n opacity: 1;\n }\n 95% {\n opacity: 1;\n }\n 100% {\n right: 100%;\n opacity: 0;\n }\n }\n \n @keyframes rgbcwLeftFlow {\n 0% {\n bottom: -30px;\n opacity: 0;\n }\n 5% {\n opacity: 1;\n }\n 95% {\n opacity: 1;\n }\n 100% {\n bottom: 100%;\n opacity: 0;\n }\n }\n \n \/* \u95ea\u70c1\u52a8\u753b *\/\n @keyframes rgbcwBlink {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0; }\n }\n \n \/* \u547c\u5438\u52a8\u753b *\/\n @keyframes rgbcwBreathe {\n 0%, 100% { opacity: 0.3; }\n 50% { opacity: 1; }\n }\n \n \/* \u97f3\u4e50\u5f8b\u52a8\u95ea\u70c1\u6548\u679c *\/\n .rgbcw-music-blinking .rgbcw-border {\n animation: rgbcwMusicBlink 1s linear infinite;\n }\n \n @keyframes rgbcwMusicBlink {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.2; }\n }\n \n \/* \u63a7\u5236\u5668\u9762\u677f\u6837\u5f0f *\/\n .rgbcw-control-panel {\n position: fixed;\n top: 20px;\n left: 50%;\n transform: translateX(-50%);\n background: linear-gradient(145deg, rgba(30, 30, 40, 0.95) 0%, rgba(20, 20, 30, 0.95) 100%);\n color: white;\n padding: 15px;\n border-radius: 20px;\n z-index: 9999;\n font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;\n font-size: 14px;\n width: 320px;\n box-shadow: \n 0 10px 30px rgba(0, 0, 0, 0.5),\n 0 1px 0 rgba(255, 255, 255, 0.1) inset,\n 0 -1px 0 rgba(0, 0, 0, 0.5) inset;\n pointer-events: auto;\n transition: all 0.3s ease;\n border: 1px solid rgba(255, 255, 255, 0.1);\n backdrop-filter: blur(15px);\n -webkit-backdrop-filter: blur(15px);\n max-height: 80vh;\n overflow-y: auto;\n }\n \n \/* \u6700\u5c0f\u5316\u72b6\u6001\u6837\u5f0f - \u7ad6\u76f4\u653e\u7f6e\u5728\u5de6\u4fa7 *\/\n .rgbcw-control-panel.minimized {\n width: 40px;\n height: auto;\n top: 50%;\n left: 10px;\n transform: translateY(-50%);\n padding: 10px 5px;\n overflow: hidden;\n }\n \n .rgbcw-control-panel.minimized .rgbcw-control-content {\n display: none;\n }\n \n .rgbcw-control-panel.minimized .rgbcw-control-header {\n flex-direction: column;\n align-items: center;\n margin-bottom: 0;\n padding-bottom: 0;\n border-bottom: none;\n }\n \n .rgbcw-control-panel.minimized .rgbcw-control-title {\n writing-mode: vertical-rl;\n text-orientation: mixed;\n margin: 10px 0;\n transform: rotate(180deg);\n }\n \n .rgbcw-control-panel.minimized .rgbcw-control-buttons {\n position: static;\n flex-direction: column;\n gap: 5px;\n }\n \n \/* \u4fee\u6539\u63a7\u5236\u9762\u677f\u5934\u90e8\u6837\u5f0f *\/\n .rgbcw-control-header {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n margin-bottom: 10px;\n padding-bottom: 10px;\n border-bottom: 1px solid rgba(255, 255, 255, 0.2);\n position: relative;\n }\n \n \/* \u4fee\u6539\u63a7\u5236\u6309\u94ae\u6837\u5f0f *\/\n .rgbcw-control-buttons {\n position: static;\n display: flex;\n gap: 2px;\n margin-bottom: 5px;\n order: -1; \/* \u5c06\u6309\u94ae\u79fb\u5230\u6807\u9898\u4e0a\u65b9 *\/\n }\n \n .rgbcw-control-btn {\n background: rgba(255, 255, 255, 0.1);\n border: none;\n color: white;\n width: 14px;\n height: 14px;\n border-radius: 3px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 8px;\n z-index: 10000;\n opacity: 0.7;\n transition: opacity 0.3s ease;\n line-height: 1;\n }\n \n .rgbcw-control-btn:hover {\n opacity: 1;\n }\n \n .rgbcw-control-title {\n font-weight: bold;\n font-size: 16px;\n background: linear-gradient(90deg, #fff, #a0a0ff);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n text-align: center;\n width: 100%;\n }\n \n .rgbcw-control-group {\n margin-bottom: 15px;\n }\n \n \/* \u4fee\u6539\u63a7\u5236\u884c\u6837\u5f0f - \u51cf\u5c0f\u6807\u7b7e\u4e0e\u6ed1\u52a8\u6761\u95f4\u8ddd *\/\n .rgbcw-control-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 8px;\n gap: 8px; \/* \u6dfb\u52a0\u95f4\u8ddd\u63a7\u5236 *\/\n }\n \n .rgbcw-control-label {\n flex: 0 0 auto; \/* \u4e0d\u4f38\u7f29\uff0c\u81ea\u52a8\u5bbd\u5ea6 *\/\n font-weight: 600;\n width: 50px; \/* \u56fa\u5b9a\u5bbd\u5ea6 *\/\n }\n \n \/* \u4fee\u6539\u72b6\u6001\u503c\u663e\u793a - \u5de6\u53f3\u6392\u5217\u6587\u5b57 *\/\n .rgbcw-control-value {\n width: 50px; \/* \u589e\u52a0\u5bbd\u5ea6\u4ee5\u5bb9\u7eb3\u66f4\u591a\u6587\u5b57 *\/\n text-align: center;\n flex: 0 0 auto; \/* \u4e0d\u4f38\u7f29\uff0c\u81ea\u52a8\u5bbd\u5ea6 *\/\n white-space: nowrap; \/* \u9632\u6b62\u6587\u5b57\u6362\u884c *\/\n overflow: hidden;\n text-overflow: ellipsis; \/* \u6587\u5b57\u8fc7\u591a\u65f6\u663e\u793a\u7701\u7565\u53f7 *\/\n font-size: 12px;\n }\n \n .rgbcw-slider {\n flex: 0.8; \/* \u4fee\u6539\uff1a\u5360\u636e\u5269\u4f59\u7a7a\u95f4\u768480%\uff0c\u51cf\u5c0f20% *\/\n height: 6px;\n -webkit-appearance: none;\n background: linear-gradient(to right, #333, #555);\n border-radius: 3px;\n outline: none;\n box-shadow: \n 0 2px 5px rgba(0, 0, 0, 0.3) inset,\n 0 1px 0 rgba(255, 255, 255, 0.1);\n border: 1px solid rgba(0, 0, 0, 0.3);\n min-width: 48px; \/* \u4fee\u6539\uff1a\u786e\u4fdd\u6ed1\u52a8\u6761\u6709\u6700\u5c0f\u5bbd\u5ea6\uff0c\u51cf\u5c0f20% *\/\n }\n \n .rgbcw-slider::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n background: linear-gradient(145deg, #aaa, #888);\n cursor: pointer;\n box-shadow: \n 0 3px 8px rgba(0, 0, 0, 0.4),\n 0 1px 0 rgba(255, 255, 255, 0.2) inset;\n border: 1px solid rgba(0, 0, 0, 0.3);\n }\n \n .rgbcw-slider::-moz-range-thumb {\n width: 16px;\n height: 16px;\n border-radius: 50%;\n background: linear-gradient(145deg, #aaa, #888);\n cursor: pointer;\n box-shadow: \n 0 3px 8px rgba(0, 0, 0, 0.4),\n 0 1px 0 rgba(255, 255, 255, 0.2) inset;\n border: 1px solid rgba(0, 0, 0, 0.3);\n }\n \n \/* \u4fee\u6539\u8bed\u8a00\u9009\u62e9\u5668\u6837\u5f0f *\/\n .rgbcw-select {\n background: rgba(40, 40, 50, 0.9);\n border: 1px solid rgba(255, 255, 255, 0.2);\n color: white;\n padding: 6px 10px;\n border-radius: 8px;\n width: 150px;\n cursor: pointer;\n outline: none;\n }\n \n \/* \u8bed\u8a00\u9009\u62e9\u5668\u9009\u9879\u6837\u5f0f *\/\n .rgbcw-select option {\n background: rgba(40, 40, 50, 0.9);\n color: white;\n }\n \n .rgbcw-toggle {\n position: relative;\n display: inline-block;\n width: 50px;\n height: 24px;\n }\n \n .rgbcw-toggle input {\n opacity: 0;\n width: 0;\n height: 0;\n }\n \n .rgbcw-toggle-slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(255, 255, 255, 0.2);\n transition: .4s;\n border-radius: 24px;\n }\n \n .rgbcw-toggle-slider:before {\n position: absolute;\n content: \"\";\n height: 16px;\n width: 16px;\n left: 4px;\n bottom: 4px;\n background-color: white;\n transition: .4s;\n border-radius: 50%;\n }\n \n .rgbcw-toggle input:checked + .rgbcw-toggle-slider {\n background: linear-gradient(145deg, rgba(0, 150, 0, 0.8), rgba(0, 100, 0, 0.8));\n }\n \n .rgbcw-toggle input:checked + .rgbcw-toggle-slider:before {\n transform: translateX(26px);\n }\n \n .rgbcw-auto-switch {\n display: flex;\n align-items: center;\n gap: 10px;\n }\n \n \/* \u63a7\u5236\u6309\u94ae\u6837\u5f0f *\/\n .rgbcw-control-btn-group {\n display: flex;\n gap: 5px;\n margin-bottom: 10px;\n }\n \n .rgbcw-btn {\n flex: 1;\n padding: 8px;\n background: linear-gradient(145deg, rgba(50, 50, 60, 0.9), rgba(35, 35, 45, 0.9));\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 8px;\n color: white;\n cursor: pointer;\n transition: all 0.3s ease;\n text-align: center;\n }\n \n .rgbcw-btn.active {\n border: 2px solid #fff;\n transform: scale(1.05);\n box-shadow: \n 0 0 15px currentColor,\n 0 3px 10px rgba(0, 0, 0, 0.4);\n }\n \n \/* \u4fee\u6539\u5f00\/\u5173\u6309\u94ae\u5bbd\u5ea6 *\/\n .rgbcw-on-btn, .rgbcw-off-btn {\n width: 80%; \/* \u51cf\u5c0f20%\u7684\u5bbd\u5ea6 *\/\n margin: 0 auto; \/* \u5c45\u4e2d\u663e\u793a *\/\n }\n \n .rgbcw-on-btn {\n background: linear-gradient(145deg, rgba(0, 150, 0, 0.8), rgba(0, 100, 0, 0.8));\n border: 2px solid rgba(0, 255, 0, 0.3);\n }\n \n .rgbcw-off-btn {\n background: linear-gradient(145deg, rgba(150, 0, 0, 0.8), rgba(100, 0, 0, 0.8));\n border: 2px solid rgba(255, 0, 0, 0.3);\n }\n \n \/* \u4fee\u6539\u81ea\u52a8\u5207\u6362\u6309\u94ae\u6837\u5f0f *\/\n .rgbcw-auto-switch-btn.active {\n background: linear-gradient(145deg, rgba(0, 150, 0, 0.8), rgba(0, 100, 0, 0.8));\n border: 3px solid #fff; \/* \u4fee\u6539\uff1a\u52a0\u7c97\u767d\u8272\u8fb9\u6846 *\/\n box-shadow: \n 0 0 15px currentColor,\n 0 3px 10px rgba(0, 0, 0, 0.4);\n transform: scale(1.05);\n }\n \n \/* \u989c\u8272\u9009\u62e9\u5668\u6837\u5f0f *\/\n .rgbcw-color-options {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n margin-top: 6px;\n }\n \n .rgbcw-color-option {\n width: 25px;\n height: 25px;\n border-radius: 50%;\n cursor: pointer;\n border: 2px solid transparent;\n transition: all 0.3s ease;\n box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);\n flex-shrink: 0;\n }\n \n .rgbcw-color-option.active {\n border: 2px solid #fff;\n transform: scale(1.15);\n box-shadow: \n 0 0 15px currentColor,\n 0 3px 10px rgba(0, 0, 0, 0.4);\n }\n \n .rgbcw-color-red { background: #ff0000; }\n .rgbcw-color-blue { background: #0000ff; }\n .rgbcw-color-green { background: #00ff00; }\n .rgbcw-color-gold { background: #ffd700; }\n .rgbcw-color-sky-blue { background: #87CEEB; }\n .rgbcw-color-mixed { \n background: linear-gradient(45deg, \n #ff0000, #0000ff, #00ff00, #ffd700, #87CEEB); \n }\n \n \/* \u6570\u636e\u76d1\u63a7\u533a\u57df *\/\n .rgbcw-data-monitor {\n display: flex;\n gap: 8px;\n margin-top: 5px;\n }\n \n .rgbcw-monitor-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n background: rgba(30, 30, 40, 0.7);\n border-radius: 8px;\n padding: 6px;\n border: 1px solid rgba(255, 255, 255, 0.1);\n flex: 1;\n }\n \n .rgbcw-monitor-label {\n font-size: 0.75rem;\n color: #aaa;\n margin-bottom: 4px;\n }\n \n .rgbcw-volume-display {\n width: 100%;\n height: 18px;\n background: rgba(0, 0, 0, 0.3);\n border-radius: 4px;\n overflow: hidden;\n position: relative;\n }\n \n .rgbcw-volume-bar {\n height: 100%;\n width: 0%;\n background: linear-gradient(90deg, #00ff00, #ffff00, #ff0000);\n transition: width 0.1s ease;\n }\n \n .rgbcw-color-preview {\n width: 100%;\n height: 18px;\n border-radius: 4px;\n border: 1px solid rgba(255, 255, 255, 0.2);\n }\n \n \/* \u6f14\u793a\u5185\u5bb9\u6837\u5f0f *\/\n .demo-content {\n padding: 40px 20px;\n max-width: 800px;\n margin: 0 auto;\n text-align: center;\n }\n \n .demo-title {\n font-size: 2.5rem;\n margin-bottom: 20px;\n background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n \n .demo-description {\n font-size: 1.2rem;\n line-height: 1.6;\n margin-bottom: 30px;\n color: #aaa;\n }\n \n .demo-features {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 20px;\n margin-top: 40px;\n }\n \n .feature-card {\n background: rgba(255, 255, 255, 0.05);\n border-radius: 12px;\n padding: 20px;\n transition: transform 0.3s ease;\n }\n \n .feature-card:hover {\n transform: translateY(-5px);\n }\n \n .feature-icon {\n font-size: 2rem;\n margin-bottom: 15px;\n }\n \n .feature-title {\n font-size: 1.2rem;\n margin-bottom: 10px;\n color: #4ecdc4;\n }\n \n .feature-description {\n font-size: 0.9rem;\n color: #aaa;\n }\n \n \/* \u65b0\u589e\u6837\u5f0f *\/\n .rgbcw-language-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 15px;\n }\n \n .rgbcw-auto-switch-btn {\n padding: 6px 12px;\n background: linear-gradient(145deg, rgba(50, 50, 60, 0.9), rgba(35, 35, 45, 0.9));\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 8px;\n color: white;\n cursor: pointer;\n font-size: 12px;\n transition: all 0.3s ease;\n }\n \n \/* \u4fee\u6539\u6a21\u5f0f\u6807\u7b7e\u548c\u7279\u6b8a\u6a21\u5f0f\u6807\u7b7e\u5c45\u4e2d\u663e\u793a *\/\n .rgbcw-mode-label, .rgbcw-special-mode-label {\n text-align: center;\n width: 100%;\n margin-bottom: 8px;\n white-space: nowrap;\n }\n \n .rgbcw-mode-buttons {\n display: flex;\n gap: 5px;\n margin-top: 8px;\n }\n \n .rgbcw-mode-btn {\n flex: 1;\n padding: 8px;\n background: linear-gradient(145deg, rgba(50, 50, 60, 0.9), rgba(35, 35, 45, 0.9));\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 8px;\n color: white;\n cursor: pointer;\n transition: all 0.3s ease;\n text-align: center;\n font-size: 12px;\n }\n \n .rgbcw-mode-btn.active {\n border: 2px solid #fff;\n transform: scale(1.05);\n box-shadow: \n 0 0 15px currentColor,\n 0 3px 10px rgba(0, 0, 0, 0.4);\n }\n \n \/* \u4fee\u6539\u540e\u7684\u6837\u5f0f *\/\n .rgbcw-color-mode-title {\n font-weight: 600;\n font-size: 14px;\n text-align: center;\n margin-bottom: 8px;\n }\n \n \/* \u624b\u673a\u9002\u914d\u6837\u5f0f *\/\n @media (max-width: 768px) {\n .rgbcw-control-panel {\n width: 90%;\n right: auto;\n left: 50%;\n transform: translateX(-50%);\n top: 10px;\n max-height: 85vh;\n padding: 12px;\n }\n \n \/* \u624b\u673a\u7aef\u6700\u5c0f\u5316\u65f6\u4e5f\u7ad6\u76f4\u653e\u7f6e\u5728\u5de6\u4fa7 *\/\n .rgbcw-control-panel.minimized {\n width: 40px;\n height: auto;\n top: 50%;\n left: 10px;\n transform: translateY(-50%);\n padding: 10px 5px;\n overflow: hidden;\n }\n \n .rgbcw-control-panel.minimized .rgbcw-control-content {\n display: none;\n }\n \n .rgbcw-control-panel.minimized .rgbcw-control-header {\n flex-direction: column;\n align-items: center;\n margin-bottom: 0;\n padding-bottom: 0;\n border-bottom: none;\n }\n \n .rgbcw-control-panel.minimized .rgbcw-control-title {\n writing-mode: vertical-rl;\n text-orientation: mixed;\n margin: 10px 0;\n transform: rotate(180deg);\n }\n \n .rgbcw-control-panel.minimized .rgbcw-control-buttons {\n position: static;\n flex-direction: column;\n gap: 5px;\n }\n \n .rgbcw-control-content {\n max-height: calc(85vh - 60px);\n overflow-y: auto;\n }\n \n .rgbcw-control-group {\n margin-bottom: 12px;\n }\n \n .rgbcw-control-row {\n flex-wrap: wrap;\n gap: 5px; \/* \u624b\u673a\u7aef\u66f4\u5c0f\u7684\u95f4\u8ddd *\/\n }\n \n .rgbcw-control-label {\n width: 40px; \/* \u624b\u673a\u7aef\u66f4\u5c0f\u7684\u5bbd\u5ea6 *\/\n }\n \n .rgbcw-control-value {\n width: 45px; \/* \u624b\u673a\u7aef\u8c03\u6574\u5bbd\u5ea6 *\/\n font-size: 11px;\n }\n \n .rgbcw-slider {\n width: 96px; \/* \u4fee\u6539\uff1a\u624b\u673a\u7aef\u5bbd\u5ea6\u4e5f\u51cf\u5c0f20% *\/\n flex: 0.8; \/* \u4fee\u6539\uff1a\u624b\u673a\u7aef\u4e5f\u4fdd\u6301\u4e00\u81f4 *\/\n }\n \n .rgbcw-select {\n width: 130px;\n }\n \n .rgbcw-color-options {\n justify-content: space-around;\n gap: 4px;\n }\n \n .rgbcw-color-option {\n width: 22px;\n height: 22px;\n }\n \n .rgbcw-mode-buttons {\n flex-wrap: wrap;\n }\n \n .rgbcw-mode-btn {\n min-width: 70px;\n font-size: 11px;\n padding: 6px;\n }\n \n .rgbcw-control-btn-group {\n flex-wrap: wrap;\n }\n \n .rgbcw-btn {\n min-width: 80px;\n font-size: 12px;\n padding: 6px;\n }\n \n .demo-title {\n font-size: 1.8rem;\n }\n \n .demo-description {\n font-size: 1rem;\n }\n \n .demo-features {\n grid-template-columns: 1fr;\n gap: 15px;\n }\n \n .feature-card {\n padding: 15px;\n }\n }\n \n \/* \u5c0f\u5c4f\u5e55\u624b\u673a\u9002\u914d *\/\n @media (max-width: 480px) {\n .rgbcw-control-panel {\n width: 95%;\n padding: 10px;\n }\n \n \/* \u5c0f\u5c4f\u5e55\u624b\u673a\u6700\u5c0f\u5316\u65f6\u4e5f\u7ad6\u76f4\u653e\u7f6e\u5728\u5de6\u4fa7 *\/\n .rgbcw-control-panel.minimized {\n width: 40px;\n height: auto;\n top: 50%;\n left: 5px;\n transform: translateY(-50%);\n padding: 10px 5px;\n overflow: hidden;\n }\n \n .rgbcw-control-row {\n gap: 3px; \/* \u5c0f\u5c4f\u5e55\u624b\u673a\u66f4\u5c0f\u7684\u95f4\u8ddd *\/\n }\n \n .rgbcw-control-label {\n width: 35px; \/* \u5c0f\u5c4f\u5e55\u624b\u673a\u66f4\u5c0f\u7684\u5bbd\u5ea6 *\/\n font-size: 13px;\n }\n \n .rgbcw-control-value {\n width: 40px; \/* \u5c0f\u5c4f\u5e55\u624b\u673a\u8c03\u6574\u5bbd\u5ea6 *\/\n font-size: 10px;\n }\n \n .rgbcw-slider {\n width: 80px; \/* \u4fee\u6539\uff1a\u5c0f\u5c4f\u5e55\u624b\u673a\u5bbd\u5ea6\u4e5f\u51cf\u5c0f20% *\/\n flex: 0.8; \/* \u4fee\u6539\uff1a\u5c0f\u5c4f\u5e55\u624b\u673a\u4e5f\u4fdd\u6301\u4e00\u81f4 *\/\n }\n \n .rgbcw-select {\n width: 110px;\n }\n \n .rgbcw-mode-btn {\n min-width: 60px;\n font-size: 10px;\n padding: 5px;\n }\n \n .rgbcw-btn {\n min-width: 70px;\n font-size: 11px;\n padding: 5px;\n }\n \n .rgbcw-color-option {\n width: 20px;\n height: 20px;\n }\n }\n <\/style>\n<\/head>\n<body>\n \n <div class=\"rgbcw-border-container\" id=\"rgbcwBorderContainer\">\n \n <\/div>\n\n \n <div class=\"rgbcw-control-panel\" id=\"rgbcwControlPanel\">\n <div class=\"rgbcw-control-header\">\n <div class=\"rgbcw-control-buttons\">\n <button class=\"rgbcw-control-btn\" id=\"rgbcwMinimizeBtn\">\u2212<\/button>\n <button class=\"rgbcw-control-btn\" id=\"rgbcwCloseBtn\">\u00d7<\/button>\n <\/div>\n <div class=\"rgbcw-control-title\">RGBCW\u706f\u5149\u63a7\u5236<\/div>\n <\/div>\n \n <div class=\"rgbcw-control-content\" id=\"rgbcwControlContent\">\n \n <div class=\"rgbcw-language-row\">\n <div class=\"rgbcw-auto-switch-btn\" id=\"rgbcwAutoSwitchBtn\">\u81ea\u52a8\u5207\u6362<\/div>\n <select class=\"rgbcw-select\" id=\"rgbcwLanguageSelect\">\n <option value=\"ar\">\u0627\u0644\u0639\u0631\u0628\u064a\u0629<\/option>\n <option value=\"bn\">\u09ac\u09be\u0982\u09b2\u09be<\/option>\n <option value=\"de\">Deutsch<\/option>\n <option value=\"en\">English<\/option>\n <option value=\"es\">Espa\u00f1ol<\/option>\n <option value=\"fa\">\u0641\u0627\u0631\u0633\u06cc<\/option>\n <option value=\"fr\">Fran\u00e7ais<\/option>\n <option value=\"ha\">Hausa<\/option>\n <option value=\"hi\">\u0939\u093f\u0928\u094d\u0926\u0940<\/option>\n <option value=\"it\">Italiano<\/option>\n <option value=\"ja\">\u65e5\u672c\u8a9e<\/option>\n <option value=\"ko\">\ud55c\uad6d\uc5b4<\/option>\n <option value=\"ms\">Bahasa Melayu<\/option>\n <option value=\"pa\">\u0a2a\u0a70\u0a1c\u0a3e\u0a2c\u0a40<\/option>\n <option value=\"pt\">Portugu\u00eas<\/option>\n <option value=\"ru\">\u0420\u0443\u0441\u0441\u043a\u0438\u0439<\/option>\n <option value=\"sw\">Kiswahili<\/option>\n <option value=\"tr\">T\u00fcrk\u00e7e<\/option>\n <option value=\"yue\">\u4e2d\u6587-\u7ca4\u8bed<\/option>\n <option value=\"zh-Hans\" selected>\u4e2d\u6587-\u7b80\u4f53<\/option>\n <option value=\"zh-Hant\">\u4e2d\u6587-\u7e41\u4f53<\/option>\n <\/select>\n <\/div>\n \n \n <div class=\"rgbcw-control-group\">\n <div class=\"rgbcw-control-btn-group\">\n <div class=\"rgbcw-btn rgbcw-on-btn active\" id=\"rgbcwOnBtn\">\u5f00<\/div>\n <div class=\"rgbcw-btn rgbcw-off-btn\" id=\"rgbcwOffBtn\">\u5173<\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"rgbcw-control-group\">\n <div class=\"rgbcw-color-mode-title\" id=\"rgbcwColorModeStatus\">\u5355\u8272\u6a21\u5f0f – \u91d1\u9ec4\u8272<\/div>\n <div class=\"rgbcw-color-options\">\n <div class=\"rgbcw-color-option rgbcw-color-red\" data-color=\"red\"><\/div>\n <div class=\"rgbcw-color-option rgbcw-color-blue\" data-color=\"blue\"><\/div>\n <div class=\"rgbcw-color-option rgbcw-color-green\" data-color=\"green\"><\/div>\n <div class=\"rgbcw-color-option rgbcw-color-gold active\" data-color=\"gold\"><\/div>\n <div class=\"rgbcw-color-option rgbcw-color-sky-blue\" data-color=\"sky-blue\"><\/div>\n <div class=\"rgbcw-color-option rgbcw-color-mixed\" data-color=\"mixed\"><\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"rgbcw-control-group\">\n <div class=\"rgbcw-mode-label\" id=\"rgbcwModeLabel\">\u6a21\u5f0f<\/div>\n <div class=\"rgbcw-mode-buttons\">\n <div class=\"rgbcw-mode-btn active\" data-mode=\"flow\">\u6d41\u52a8<\/div>\n <div class=\"rgbcw-mode-btn\" data-mode=\"blink\">\u95ea\u70c1<\/div>\n <div class=\"rgbcw-mode-btn\" data-mode=\"breathe\">\u547c\u5438<\/div>\n <div class=\"rgbcw-mode-btn\" data-mode=\"static\">\u9759\u6001<\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"rgbcw-control-group\">\n <div class=\"rgbcw-special-mode-label\" id=\"rgbcwSpecialModeLabel\">\u7279\u6b8a\u6a21\u5f0f<\/div>\n <div class=\"rgbcw-control-btn-group\">\n <div class=\"rgbcw-btn\" id=\"rgbcwMusicMode\">\u97f3\u4e50\u5f8b\u52a8<\/div>\n <div class=\"rgbcw-btn\" id=\"rgbcwCameraMode\">\u73af\u5883\u540c\u8272<\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"rgbcw-control-group\">\n <div class=\"rgbcw-data-monitor\">\n <div class=\"rgbcw-monitor-item\">\n <div class=\"rgbcw-monitor-label\" id=\"rgbcwVolumeLabel\">\u9ea6\u514b\u98ce\u54cd\u5ea6<\/div>\n <div class=\"rgbcw-volume-display\">\n <div class=\"rgbcw-volume-bar\" id=\"rgbcwVolumeBar\"><\/div>\n <\/div>\n <\/div>\n <div class=\"rgbcw-monitor-item\">\n <div class=\"rgbcw-monitor-label\" id=\"rgbcwCameraLabel\">\u6444\u50cf\u5934\u4e3b\u989c\u8272<\/div>\n <div class=\"rgbcw-color-preview\" id=\"rgbcwColorPreview\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"rgbcw-control-group\">\n <div class=\"rgbcw-control-row\">\n <div class=\"rgbcw-control-label\" id=\"rgbcwSpeedLabel\">\u901f\u5ea6<\/div>\n <input type=\"range\" min=\"1\" max=\"10\" value=\"7\" class=\"rgbcw-slider\" id=\"rgbcwSpeedSlider\">\n <div class=\"rgbcw-control-value\" id=\"rgbcwSpeedValue\">\u4e2d\u7b49<\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"rgbcw-control-group\">\n <div class=\"rgbcw-control-row\">\n <div class=\"rgbcw-control-label\" id=\"rgbcwBrightnessLabel\">\u4eae\u5ea6<\/div>\n <input type=\"range\" min=\"1\" max=\"10\" value=\"7\" class=\"rgbcw-slider\" id=\"rgbcwBrightnessSlider\">\n <div class=\"rgbcw-control-value\" id=\"rgbcwBrightnessValue\">\u4e2d\u7b49<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"demo-content\">\n <h1 class=\"demo-title\">RGBCW\u5e7b\u5f69\u706f\u5149\u63a7\u5236\u7cfb\u7edf<\/h1>\n <p class=\"demo-description\">\n \u8fd9\u662f\u4e00\u4e2a\u5b8c\u5168\u529f\u80fd\u7684RGBCW\u706f\u5149\u63a7\u5236\u7cfb\u7edf\uff0c\u5177\u6709\u56db\u79cd\u706f\u5149\u6a21\u5f0f\u3001\u516d\u79cd\u989c\u8272\u9009\u9879\u4ee5\u53ca\u97f3\u4e50\u5f8b\u52a8\u548c\u73af\u5883\u540c\u8272\u7b49\u7279\u6b8a\u529f\u80fd\u3002\n \u63a7\u5236\u9762\u677f\u53ef\u8ba9\u60a8\u5b8c\u5168\u81ea\u5b9a\u4e49\u706f\u5149\u6548\u679c\u3002\n <\/p>\n \n <div class=\"demo-features\">\n <div class=\"feature-card\">\n <div class=\"feature-icon\">\ud83c\udfa8<\/div>\n <h3 class=\"feature-title\">\u591a\u5f69\u706f\u5149\u6548\u679c<\/h3>\n <p class=\"feature-description\">\u652f\u6301\u591a\u79cd\u989c\u8272\u6a21\u5f0f\u548c\u52a8\u6001\u6548\u679c\uff0c\u5305\u62ec\u6d41\u52a8\u3001\u95ea\u70c1\u3001\u547c\u5438\u548c\u9759\u6001\u6a21\u5f0f\u3002<\/p>\n <\/div>\n <div class=\"feature-card\">\n <div class=\"feature-icon\">\ud83c\udfb5<\/div>\n <h3 class=\"feature-title\">\u97f3\u4e50\u5f8b\u52a8\u6a21\u5f0f<\/h3>\n <p class=\"feature-description\">\u706f\u5149\u4f1a\u968f\u7740\u73af\u5883\u97f3\u4e50\u7684\u8282\u594f\u53d8\u5316\uff0c\u521b\u9020\u6c89\u6d78\u5f0f\u7684\u89c6\u542c\u4f53\u9a8c\u3002<\/p>\n <\/div>\n <div class=\"feature-card\">\n <div class=\"feature-icon\">\ud83d\udcf7<\/div>\n <h3 class=\"feature-title\">\u73af\u5883\u540c\u8272\u6a21\u5f0f<\/h3>\n <p class=\"feature-description\">\u706f\u5149\u4f1a\u81ea\u52a8\u5339\u914d\u6444\u50cf\u5934\u6355\u6349\u5230\u7684\u4e3b\u8981\u989c\u8272\uff0c\u4e0e\u73af\u5883\u878d\u4e3a\u4e00\u4f53\u3002<\/p>\n <\/div>\n <div class=\"feature-card\">\n <div class=\"feature-icon\">\u2699\ufe0f<\/div>\n <h3 class=\"feature-title\">\u5b8c\u5168\u53ef\u5b9a\u5236<\/h3>\n <p class=\"feature-description\">\u53ef\u8c03\u8282\u901f\u5ea6\u3001\u4eae\u5ea6\uff0c\u652f\u6301\u81ea\u52a8\u5207\u6362\u548c\u591a\u8bed\u8a00\u754c\u9762\u3002<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n<script src=\"\/js\/shouye.js\"><\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>RGBCW\u706f\u5149\u63a7\u5236\u7cfb\u7edf \u2212 \u00d7 RGBCW\u706f\u5149\u63a7\u5236 <span class=\"excerpt-hellip\"> [\u2026]<\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-2403","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/rgbcw.org\/index.php\/wp-json\/wp\/v2\/pages\/2403","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rgbcw.org\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/rgbcw.org\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/rgbcw.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rgbcw.org\/index.php\/wp-json\/wp\/v2\/comments?post=2403"}],"version-history":[{"count":2,"href":"https:\/\/rgbcw.org\/index.php\/wp-json\/wp\/v2\/pages\/2403\/revisions"}],"predecessor-version":[{"id":2416,"href":"https:\/\/rgbcw.org\/index.php\/wp-json\/wp\/v2\/pages\/2403\/revisions\/2416"}],"wp:attachment":[{"href":"https:\/\/rgbcw.org\/index.php\/wp-json\/wp\/v2\/media?parent=2403"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}