// ==UserScript== // @name iPhone 17 Pro Custom Color Palette // @namespace http://tampermonkey.net/ // @version 0.3 // @description iPhone 3D model with full color palette // @author karminski-牙医 // @match https://www.apple.com.cn/iphone-17-pro/ // @grant none // ==/UserScript== (function () { 'use strict'; console.log('🎯 iPhone Color Palette Script Loaded'); // 调试工具 const debug = { log: (type, ...args) => { console.log(`🔍 [${type}]`, ...args); } }; // 当前选中的颜色 let currentCustomColor = null; // 1. 网络请求拦截（保持原有功能） function interceptAllRequests() { const originalFetch = window.fetch; window.fetch = function (...args) { const url = typeof args[0] === 'string' ? args[0] : args[0].url; if (url && (url.includes('.avif') || url.includes('.jpg') || url.includes('.png'))) { debug.log('Texture', '🎨 Found asset:', url); } return originalFetch.apply(this, args); }; } // 2. 监听颜色选择变化（保持原有功能） function monitorColorChanges() { document.addEventListener('change', function (e) { if (e.target && e.target.name === 'colornav-variant-default') { const selectedColor = e.target.value; debug.log('Color', '🎨 Color changed to:', selectedColor); setTimeout(() => applyCustomColorLogic(selectedColor), 100); } }); } // 3. 颜色转换工具 const ColorUtils = { // HEX转HSL hexToHsl(hex) { const r = parseInt(hex.slice(1, 3), 16) / 255; const g = parseInt(hex.slice(3, 5), 16) / 255; const b = parseInt(hex.slice(5, 7), 16) / 255; const max = Math.max(r, g, b); const min = Math.min(r, g, b); let h, s, l = (max + min) / 2; if (max === min) { h = s = 0; } else { const d = max - min; s = l > 0.5 ? d / (2 - max - min) : d / (max + min); switch (max) { case r: h = (g - b) / d + (g < b ? 6 : 0); break; case g: h = (b - r) / d + 2; break; case b: h = (r - g) / d + 4; break; } h /= 6; } return [h * 360, s * 100, l * 100]; }, // 根据颜色生成CSS滤镜 colorToFilter(hex) { const [h, s, l] = this.hexToHsl(hex); // 基于HSL值计算滤镜参数 const hueRotate = Math.round(h); const saturate = Math.round((s / 50) * 100) / 100; const brightness = Math.round((l / 50) * 100) / 100; const contrast = saturate > 1 ? saturate * 0.8 : 1; return `hue-rotate(${hueRotate}deg) saturate(${saturate}) brightness(${brightness}) contrast(${contrast})`; }, // 预设颜色配置 presets: { '曼巴': '#2a4ba7', '桃花运': '#c1a9b7', '死亡芭比': '#c1498f', 'SU7': '#5cc7a3', '辐射': '#a4ce64', '老冰种': '#9fb3bc', '月壤': '#6b6b6b', '黄金精神': '#fdbb49', '茄子': '#865997', } }; // 4. 应用自定义颜色 function applyCustomColorLogic(color, isHex = false) { debug.log('Custom', '🎯 Applying color:', color); const viewer = document.querySelector('.product-viewer-enhanced'); const canvas = document.querySelector('.product-viewer-enhanced-container'); if (viewer || canvas) { let filterValue; if (isHex) { // 自定义十六进制颜色 filterValue = ColorUtils.colorToFilter(color); currentCustomColor = color; } else { // 预设颜色或原始颜色 if (ColorUtils.presets[color]) { filterValue = ColorUtils.colorToFilter(ColorUtils.presets[color]); currentCustomColor = ColorUtils.presets[color]; } else { // 原始苹果颜色的滤镜 const originalFilters = { 'Orange': 'none', 'Blue': 'hue-rotate(200deg) saturate(1.2)', 'Silver': 'saturate(0.2) brightness(1.2)', }; filterValue = originalFilters[color] || 'none'; currentCustomColor = null; } } // 应用滤镜到3D模型容器 if (canvas) { canvas.style.filter = filterValue; debug.log('Filter', '🎨 Applied filter:', filterValue); } // 更新调色盘的当前颜色显示 updateColorDisplay(currentCustomColor || (ColorUtils.presets[color] || '#ff8c00')); } } // 5. 更新颜色显示 function updateColorDisplay(color) { const currentColorDiv = document.getElementById('current-color'); const colorInput = document.getElementById('color-picker'); if (currentColorDiv) { currentColorDiv.style.backgroundColor = color; } if (colorInput) { colorInput.value = color; } } // 6. 创建完整的调色盘界面 function createColorPalette() { const paletteHTML = `

🎨 库克, 我们需要这个

当前颜色
预设颜色
${Object.entries(ColorUtils.presets).map(([name, color]) => `
${name}
`).join('')}
✅ 调色盘已激活
`; document.body.insertAdjacentHTML('beforeend', paletteHTML); // 添加样式增强 const style = document.createElement('style'); style.textContent = ` #preset-colors button:hover .color-tooltip { opacity: 1 !important; } #preset-colors::-webkit-scrollbar { width: 4px; } #preset-colors::-webkit-scrollbar-track { background: rgba(248, 249, 250, 0.5); border-radius: 2px; } #preset-colors::-webkit-scrollbar-thumb { background: rgba(108, 117, 125, 0.3); border-radius: 2px; } #color-palette-panel::-webkit-scrollbar { width: 6px; } #color-palette-panel::-webkit-scrollbar-track { background: rgba(248, 249, 250, 0.5); border-radius: 3px; } #color-palette-panel::-webkit-scrollbar-thumb { background: rgba(108, 117, 125, 0.3); border-radius: 3px; } #color-palette-panel::-webkit-scrollbar-thumb:hover { background: rgba(108, 117, 125, 0.5); } `; document.head.appendChild(style); } // 7. 全局函数 window.applyPresetColor = function (colorName) { debug.log('Preset', '🎨 Applying preset:', colorName); applyCustomColorLogic(colorName); updateDebugMini(`应用预设颜色: ${colorName}`); }; window.togglePalette = function () { const panel = document.getElementById('color-palette-panel'); if (panel) { panel.style.display = panel.style.display === 'none' ? 'block' : 'none'; } }; window.resetToOriginal = function () { debug.log('Reset', '🔄 Resetting to original'); const canvas = document.querySelector('.product-viewer-enhanced-container'); if (canvas) { canvas.style.filter = 'none'; } updateColorDisplay('#ff8c00'); updateDebugMini('已重置为原始颜色'); }; window.randomColor = function () { const randomHex = '#' + Math.floor(Math.random() * 16777215).toString(16); debug.log('Random', '🎲 Random color:', randomHex); applyCustomColorLogic(randomHex, true); updateDebugMini(`随机颜色: ${randomHex}`); }; function updateDebugMini(message) { const debugDiv = document.getElementById('debug-mini'); if (debugDiv) { const time = new Date().toLocaleTimeString(); debugDiv.innerHTML += `
[${time}] ${message}
`; debugDiv.scrollTop = debugDiv.scrollHeight; } } // 8. 设置颜色选择器事件 function setupColorPicker() { setTimeout(() => { const colorInput = document.getElementById('color-picker'); if (colorInput) { colorInput.addEventListener('input', function (e) { const color = e.target.value; debug.log('ColorPicker', '🎨 Custom color selected:', color); applyCustomColorLogic(color, true); updateDebugMini(`自定义颜色: ${color}`); }); } }, 1000); } // 9. 启动函数 function init() { debug.log('Init', '🚀 Starting iPhone Color Palette'); interceptAllRequests(); monitorColorChanges(); // 创建调色盘界面 if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', () => { createColorPalette(); setupColorPicker(); }); } else { createColorPalette(); setupColorPicker(); } debug.log('Init', '✅ Color palette ready'); } // 启动 init(); })();