Customization Studio
Design your perfect mouse pad with our advanced customization tool.
26cm x 21cm
Industrial Green (#2D5A4C)
Edge: Charcoal Black
⇄ View Back
Quick Templates
No inspiration? Use our templates
22x18cm
26x21cm
45x40cm
49x42cm
90x40cm
Fabric Surface
Smooth Speed
Rough Control
Wave Balance
Waterproof Coated
Reset All
(function(){
// 初始化数据
const baseMaterialsData = [
{value:"scr_img", label:"SCR", img:"https://dgpadmatrubber.com/wp-content/uploads/2026/04/SCR.webp"},
{value:"natural_rubber_img", label:"Natural Rubber", img:"https://dgpadmatrubber.com/wp-content/uploads/2026/04/橡胶底人字纹.webp"},
{value:"domestic_poron_glossy", label:"Domestic Poron Glossy", img:"https://dgpadmatrubber.com/wp-content/uploads/2026/04/国产poron亮面小六角.webp"},
{value:"domestic_starflash", label:"Domestic Starflash", img:"https://dgpadmatrubber.com/wp-content/uploads/2026/04/国产星闪小圆点.webp"},
{value:"obsidian_poron", label:"Obsidian Poron", img:"https://dgpadmatrubber.com/wp-content/uploads/2026/04/黑曜石poron.webp"},
{value:"japan_poron", label:"Japan Poron", img:"https://dgpadmatrubber.com/wp-content/uploads/2026/04/日本poron2.webp"}
];
const selectEl = document.getElementById('advancedBaseSelect');
if(selectEl) selectEl.innerHTML = baseMaterialsData.map(m => `${m.label}`).join('');
const texMap = {};
baseMaterialsData.forEach(m => { texMap[m.value] = `url('${m.img}')`; });
const texStyles = {
smooth: `repeating-linear-gradient(0deg,rgba(0,0,0,.03)0px,rgba(0,0,0,.03)1px,transparent 1px,transparent 3px),repeating-linear-gradient(90deg,rgba(0,0,0,.03)0px,rgba(0,0,0,.03)1px,transparent 1px,transparent 3px)`,
rough: `repeating-linear-gradient(45deg,rgba(0,0,0,.12)0px,rgba(0,0,0,.12)2px,transparent 2px,transparent 6px)`,
wave: `radial-gradient(circle at 20% 30%,rgba(0,0,0,.08)2px,transparent 2px),radial-gradient(circle at 70% 60%,rgba(0,0,0,.07)2px,transparent 2px)`,
waterproof: `linear-gradient(135deg,rgba(255,255,255,.15)0%,rgba(255,255,255,.05)50%,rgba(0,0,0,.08)100%)`
};
const mainColors = ["#2D5A4C","#1B3E32","#0B1C30","#FF6B00","#4285F4","#46BDFA","#9C27B0","#E91E63","#D4AF37","#FF9800","#FF0000","#795548","#607D8B","#000000","#FFFFFF","#CDDC39"];
const mainNames = ["Industrial Green","Deep Forest","Charcoal Black","Safety Orange","Royal Blue","Sky Blue","Purple","Hot Pink","Gold","Orange","Crimson Red","Brown","Slate Gray","Jet Black","Pure White","Lime Green"];
const edgeColors = ["#0B1C30","#2D5A4C","#1B3E32","#FF6B00","#FF9800","#FF0000","#4285F4","#9C27B0","#E91E63","#000000","#FFFFFF","#607D8B","#795548","#00BCD4"];
const edgeNames = ["Charcoal Black","Industrial Green","Deep Forest","Safety Orange","Amber Orange","Bright Red","Azure Blue","Royal Purple","Rose Pink","Midnight Black","Snow White","Charcoal Gray","Walnut Brown","Cyan"];
const buildColorOptions = () => {
let h='',h2='';
mainColors.forEach((c,i)=>{ h+=`
`; });
edgeColors.forEach((c,i)=>{ h2+=`
`; });
document.getElementById('mainColorOptions').innerHTML = h;
document.getElementById('edgeColorOptions').innerHTML = h2;
};
buildColorOptions();
let rx=15,ry=25,isBack=false,useImg=null,curMain="#2D5A4C",curEdge="#0B1C30",raf=null,dragActive=false,dragStartX=0,dragStartY=0;
const mousepadPreview = document.getElementById('mousepadPreview');
const mousepadFront = document.getElementById('mousepadFront');
const mousepadBack = document.getElementById('mousepadBack');
const fabricSelect = document.getElementById('fabricSelect');
const advancedBaseSelect = document.getElementById('advancedBaseSelect');
const sizeLabel = document.getElementById('sizeLabel');
const colorLabel = document.getElementById('colorLabel');
const edgeLabel = document.getElementById('edgeLabel');
const flipSideBtn = document.getElementById('flipSideBtn');
const resetAllBtn = document.getElementById('resetAllBtn');
const randomMainColorBtn = document.getElementById('randomMainColorBtn');
const randomEdgeColorBtn = document.getElementById('randomEdgeColorBtn');
const applyMainColorBtn = document.getElementById('applyMainColorBtn');
const mainCustomColorInput = document.getElementById('mainCustomColorInput');
const colorCollapseBtn = document.getElementById('colorCollapseBtn');
const colorCollapseContent = document.getElementById('colorCollapseContent');
const updateBackTexture = () => {
const t = texMap[advancedBaseSelect.value];
if(t) mousepadBack.style.backgroundImage = t;
mousepadBack.style.backgroundSize = 'cover';
mousepadBack.style.backgroundPosition = 'center';
};
const updateTex = () => {
if(useImg) return;
mousepadFront.style.backgroundImage = texStyles[fabricSelect.value] || texStyles.smooth;
mousepadFront.style.backgroundColor = curMain;
};
const resetSolid = () => { useImg=null; updateTex(); };
const setMain = (v,n) => {
curMain=v;
if(!useImg) mousepadFront.style.backgroundColor=v;
colorLabel.textContent = `${n} (${v})`;
if(mainCustomColorInput) mainCustomColorInput.value=v;
};
const setEdge = (v,n) => {
curEdge=v;
if(mousepadPreview) mousepadPreview.style.borderColor=v;
edgeLabel.textContent = `Edge: ${n}`;
};
const toast = (msg) => {
const t=document.createElement('div');
t.style.cssText = 'position:fixed;bottom:80px;right:20px;background:#2D5A4C;color:#FF6B00;padding:10px 20px;font-size:13px;z-index:9999;border-left:4px solid #FF6B00;border-radius:0px';
t.textContent=msg;
document.body.appendChild(t);
setTimeout(()=>t.remove(),2500);
};
const applyTpl = (img,m,e) => {
setMain(m,'Template');
setEdge(e,'Template');
useImg=img;
mousepadFront.style.backgroundImage = `url('${img}')`;
mousepadFront.style.backgroundColor = 'transparent';
mousepadFront.style.backgroundSize = 'cover';
mousepadFront.style.backgroundPosition = 'center';
if(mousepadPreview) mousepadPreview.style.borderColor=e;
toast('Template applied!');
};
const setFixedSize = () => {
const w=26,h=21;
sizeLabel.textContent = w+'cm x '+h+'cm';
const scale = Math.min(1,500/(w*10));
mousepadPreview.style.width = (w*10*scale)+'px';
mousepadPreview.style.height = (h*10*scale)+'px';
};
const updateTransform = () => {
if(raf) cancelAnimationFrame(raf);
raf = requestAnimationFrame(()=>{
mousepadPreview.style.transform = `rotateX(${rx}deg) rotateY(${ry}deg) rotateY(${isBack?180:0}deg)`;
});
};
// 鼠标拖拽旋转
mousepadPreview.addEventListener('mousedown',(e)=>{ dragActive=true; dragStartX=e.clientX; dragStartY=e.clientY; mousepadPreview.style.cursor='grabbing'; e.preventDefault(); });
mousepadPreview.addEventListener('dblclick',()=>{ rx=15; ry=25; updateTransform(); toast('View angle reset'); });
window.addEventListener('mousemove',(e)=>{ if(!dragActive) return; const dx=e.clientX-dragStartX,dy=e.clientY-dragStartY; ry+=dx*0.7; rx-=dy*0.5; rx=Math.min(40,Math.max(-20,rx)); updateTransform(); dragStartX=e.clientX; dragStartY=e.clientY; });
window.addEventListener('mouseup',()=>{ dragActive=false; mousepadPreview.style.cursor='grab'; });
flipSideBtn.onclick = () => { isBack=!isBack; updateTransform(); toast(isBack?"Viewing back":"Viewing front"); };
resetAllBtn.onclick = () => { setFixedSize(); resetSolid(); setMain("#2D5A4C","Industrial Green"); setEdge("#0B1C30","Charcoal Black"); fabricSelect.value='smooth'; advancedBaseSelect.value='scr_img'; updateTex(); updateBackTexture(); isBack=false; rx=15; ry=25; updateTransform(); toast('Reset to default'); };
randomMainColorBtn.onclick = () => { const r=mainColors[Math.floor(Math.random()*mainColors.length)], idx=mainColors.indexOf(r); resetSolid(); setMain(r,mainNames[idx]); toast(`Random main color: ${mainNames[idx]}`); };
randomEdgeColorBtn.onclick = () => { const r=edgeColors[Math.floor(Math.random()*edgeColors.length)], idx=edgeColors.indexOf(r); setEdge(r,edgeNames[idx]); toast(`Random edge color: ${edgeNames[idx]}`); };
applyMainColorBtn.onclick = () => { const c=mainCustomColorInput?.value.trim(); if(/^#[0-9A-F]{6}$/i.test(c)){ resetSolid(); setMain(c,'Custom'); toast(`Custom color: ${c}`); } else toast('Enter valid hex color'); };
fabricSelect.onchange = () => { if(!useImg) updateTex(); toast('Fabric changed'); };
advancedBaseSelect.onchange = updateBackTexture;
document.querySelectorAll('.preset-size-btn').forEach(btn=>{
btn.onclick = () => {
const w=parseInt(btn.dataset.width), h=parseInt(btn.dataset.height);
sizeLabel.textContent = w+'cm x '+h+'cm';
const scale = Math.min(1,500/(w*10));
mousepadPreview.style.width = (w*10*scale)+'px';
mousepadPreview.style.height = (h*10*scale)+'px';
toast(`Size changed to ${w}x${h}cm`);
};
});
document.getElementById('mainColorOptions').onclick = (e) => {
const o = e.target.closest('.color-opt');
if(o){ resetSolid(); setMain(o.dataset.c,o.dataset.n); }
};
document.getElementById('edgeColorOptions').onclick = (e) => {
const o = e.target.closest('.color-opt-edge');
if(o) setEdge(o.dataset.c,o.dataset.n);
};
// 模板
const tplUrls=["https://dgpadmatrubber.com/wp-content/uploads/2026/04/图案4-scaled.webp","https://dgpadmatrubber.com/wp-content/uploads/2026/04/图案3-scaled.webp","https://dgpadmatrubber.com/wp-content/uploads/2026/04/图案2-scaled.webp","https://dgpadmatrubber.com/wp-content/uploads/2026/04/图案1-scaled.webp","https://dgpadmatrubber.com/wp-content/uploads/2026/04/D64FE0D5606E0BAC623B34BC701A6BBD-scaled.webp"];
const tplNames=["Abstract Wave","Geometric Flow","Nature Leaf","Urban Lines","Cosmic Dream"];
const tplMain=["#2D5A4C","#4285F4","#E91E63","#000000","#0A4D8C"];
const tplEdge=["#0B1C30","#0D47A1","#880E4F","#333333","#00BFFF"];
const templateGrid = document.getElementById('templateMiniGrid');
if(templateGrid){
for(let i=0;i<tplUrls.length;i++){
const card = document.createElement('div');
card.style.cssText = 'background:#FFFFFF;padding:8px;cursor:pointer;text-align:center;border:1px solid #C0C8C3;border-radius:0px';
card.innerHTML = `
${tplNames[i]} Apply `;
const btn = card.querySelector('.use-tpl-btn');
btn.onclick = (e) => { e.stopPropagation(); applyTpl(tplUrls[i],tplMain[i],tplEdge[i]); };
templateGrid.appendChild(card);
}
}
// More Color Options 折叠
if(colorCollapseBtn && colorCollapseContent){
colorCollapseBtn.addEventListener('click', function(e) {
e.preventDefault();
colorCollapseContent.classList.toggle('open');
colorCollapseBtn.classList.toggle('open');
if(colorCollapseContent.classList.contains('open')){
colorCollapseContent.style.maxHeight = '800px';
} else {
colorCollapseContent.style.maxHeight = '0';
}
});
}
setFixedSize(); updateTex(); updateBackTexture(); updateTransform(); setEdge("#0B1C30","Charcoal Black");
})();
