${i.tabPanel}
${row(i.language, `
`)}
${row(i.guiTheme, `
${[['light', i.guiLight], ['dark', i.guiDark], ['black', i.guiBlack]].map(([k, lbl]) => `
`).join('')}
`)}
${i.tabBtn}
${row(i.theme, `
${Object.entries(THEMES).map(([k,v]) => `
`).join('')}
`)}
${row(i.customColor, `
${i.btnColor} / ${i.textColor}
`)}
${row(i.btnSize, `
${['S','M','L'].map(s => `
`).join('')}
`)}
${row(i.btnPosition, `
${[['TL','top:10px;left:10px'],['TR','top:10px;right:10px'],['BL','bottom:10px;left:10px'],['BR','bottom:10px;right:10px']].map(([pos, s], idx) => `
`).join('')}
`)}
${row(`${i.borderRadius}:
${cfg.btnRadius}px`, `
`)}
${row(`${i.opacity}:
${cfg.btnOpacity}%`, `
`)}
${toggle('sq-autohide', cfg.autoHide, i.autoHide, i.autoHideDesc)}
${row(i.customText, `
`)}
${i.tabOther}
${toggle('sq-autoskip', cfg.autoSkip, i.autoSkip, i.autoSkipDesc)}
${row(`${i.autoSkipDelay}:
${cfg.autoSkipDelay}${i.seconds}`, `
`)}
${row(`${i.notifyDuration}:
${cfg.notifyDuration}${i.seconds}`, `
`)}
${row(`${i.dragDelay}:
${cfg.dragDelay}${i.ms}`, `
0${i.ms}500${i.ms}1000${i.ms}
`)}
${i.aboutSection}
`;
// 關閉
panel.querySelector('#sq-close').onclick = () => panel.style.display = 'none';
// 語言
panel.querySelector('#sq-lang').onchange = (e) => {
cfg.lang = e.target.value;
save('lang', cfg.lang);
buildPanel();
// 同步更新主按鈕文字跟隨語言
if (!cfg.customText.trim()) {
btn.innerText = getBtnText();
}
};
// GUI主題
panel.querySelectorAll('[data-guitheme]').forEach(guiBtn => {
guiBtn.onclick = (e) => {
e.stopPropagation();
cfg.guiTheme = guiBtn.dataset.guitheme;
save('guiTheme', cfg.guiTheme);
applyPanelTheme();
buildPanel();
};
});
// 主題色
panel.querySelectorAll('[data-theme]').forEach(div => {
div.onclick = (e) => {
e.stopPropagation();
cfg.theme = div.dataset.theme;
cfg.btnColor = THEMES[cfg.theme].bg;
cfg.btnTextColor = THEMES[cfg.theme].text;
save('theme', cfg.theme);
save('btnColor', cfg.btnColor);
save('btnTextColor', cfg.btnTextColor);
applyBtn();
buildPanel();
};
});
// 自訂顏色
const btnColor = panel.querySelector('#sq-btncolor');
const txtColor = panel.querySelector('#sq-txtcolor');
btnColor.onchange = (e) => {
cfg.btnColor = e.target.value;
save('btnColor', cfg.btnColor);
applyBtn();
};
txtColor.onchange = (e) => {
cfg.btnTextColor = e.target.value;
save('btnTextColor', cfg.btnTextColor);
applyBtn();
};
// 按鈕大小
panel.querySelectorAll('[data-size]').forEach(sizeBtn => {
sizeBtn.onclick = (e) => {
e.stopPropagation();
cfg.btnSize = sizeBtn.dataset.size;
save('btnSize', cfg.btnSize);
applyBtn();
buildPanel();
};
});
// 快速定位
panel.querySelectorAll('[data-pos]').forEach(posBtn => {
posBtn.onclick = (e) => {
e.stopPropagation();
posBtn.dataset.pos.split(';').forEach(p => {
const [k, v] = p.split(':');
if (k && v) { btn.style[k] = v; }
});
btn.style.right = 'auto';
btn.style.bottom = 'auto';
};
});
// 圓角
panel.querySelector('#sq-radius').oninput = (e) => {
cfg.btnRadius = e.target.value;
panel.querySelector('#sq-radius-val').innerText = e.target.value;
applyBtn();
};
panel.querySelector('#sq-radius').onchange = (e) => {
cfg.btnRadius = e.target.value;
save('btnRadius', cfg.btnRadius);
};
// 透明度
panel.querySelector('#sq-opacity').oninput = (e) => {
cfg.btnOpacity = e.target.value;
panel.querySelector('#sq-opacity-val').innerText = e.target.value;
applyBtn();
};
panel.querySelector('#sq-opacity').onchange = (e) => {
cfg.btnOpacity = e.target.value;
save('btnOpacity', cfg.btnOpacity);
};
// 自動隱藏
panel.querySelector('#sq-autohide').onchange = (e) => {
cfg.autoHide = e.target.checked;
save('autoHide', cfg.autoHide);
applyBtn();
};
// 自訂文字
panel.querySelector('#sq-customtext').onchange = (e) => {
cfg.customText = e.target.value;
save('customText', cfg.customText);
btn.innerText = getBtnText();
};
// 自動跳過
panel.querySelector('#sq-autoskip').onchange = (e) => {
cfg.autoSkip = e.target.checked;
save('autoSkip', cfg.autoSkip);
setupAutoSkip();
};
// 自動跳過延遲
panel.querySelector('#sq-delay').oninput = (e) => {
panel.querySelector('#sq-delay-val').innerText = e.target.value;
};
panel.querySelector('#sq-delay').onchange = (e) => {
cfg.autoSkipDelay = e.target.value;
save('autoSkipDelay', cfg.autoSkipDelay);
};
// 通知時間
panel.querySelector('#sq-notify').oninput = (e) => {
panel.querySelector('#sq-notify-val').innerText = e.target.value;
};
panel.querySelector('#sq-notify').onchange = (e) => {
cfg.notifyDuration = e.target.value;
save('notifyDuration', cfg.notifyDuration);
};
// 拖曳延遲
panel.querySelector('#sq-dragdelay').oninput = (e) => {
panel.querySelector('#sq-dragdelay-val').innerText = e.target.value;
};
panel.querySelector('#sq-dragdelay').onchange = (e) => {
cfg.dragDelay = e.target.value;
save('dragDelay', cfg.dragDelay);
};
// 匯出
panel.querySelector('#sq-export').onclick = () => {
const data = JSON.stringify(cfg);
const blob = new Blob([data], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `discord-orbs-skip-settings-${Date.now()}.json`;
a.click();
};
// 匯入
panel.querySelector('#sq-import').onclick = () => {
const input = document.createElement('input');
input.type = 'file';
input.accept = '.json';
input.onchange = (evFile) => {
const file = evFile.target.files[0];
const reader = new FileReader();
reader.onload = (evRead) => {
try {
const imported = JSON.parse(evRead.target.result);
Object.keys(DEFAULTS).forEach(k => { if (k in imported) { cfg[k] = imported[k]; save(k, cfg[k]); } });
applyBtn(); applyPanelTheme(); buildPanel();
panel.style.display = 'block';
btn.innerText = t().importSuccess;
setTimeout(() => { btn.innerText = getBtnText(); }, 2000);
} catch {
btn.innerText = t().importFail;
setTimeout(() => { btn.innerText = getBtnText(); }, 2000);
}
};
reader.readAsText(file);
};
input.click();
};
// 重設
panel.querySelector('#sq-reset').onclick = () => {
if (!confirm(t().resetConfirm)) return;
Object.keys(DEFAULTS).forEach(k => { cfg[k] = DEFAULTS[k]; save(k, DEFAULTS[k]); });
applyBtn(); applyPanelTheme(); buildPanel();
panel.style.display = 'block';
btn.innerText = getBtnText();
};
};
buildPanel();
// ── 面板定位 ──
const positionPanel = () => {
panel.style.display = 'block';
const rect = btn.getBoundingClientRect();
const pw = Math.min(310, window.innerWidth - 20);
const ph = Math.min(panel.scrollHeight || 500, window.innerHeight * 0.85);
panel.style.width = pw + 'px';
let left = rect.left - pw + btn.offsetWidth;
let top = rect.top - ph - 10;
if (left < 10) left = 10;
if (top < 10) top = rect.bottom + 10;
if (left + pw > window.innerWidth - 10) left = window.innerWidth - pw - 10;
if (top + ph > window.innerHeight - 10) top = window.innerHeight - ph - 10;
panel.style.left = left + 'px';
panel.style.top = top + 'px';
};
// ── 長按拖曳模式 ──
let isDragging = false;
let dragReady = false;
let longPressTimer = null;
let startX, startY, startLeft, startTop;
const ring = document.createElement('div');
ring.style.cssText = `
position: fixed; z-index: 9999998; pointer-events: none;
width: 0; height: 0; border-radius: 50%;
border: 3px solid transparent;
transition: none; display: none;
`;
document.body.appendChild(ring);
const showRing = (x, y) => {
const size = 54;
ring.style.display = 'block';
ring.style.left = (x - size / 2) + 'px';
ring.style.top = (y - size / 2) + 'px';
ring.style.width = size + 'px';
ring.style.height = size + 'px';
ring.style.border = `3px solid ${cfg.btnColor}`;
ring.style.boxShadow = `0 0 0 0 ${cfg.btnColor}44`;
ring.style.animation = 'sq-ring-spin 1s linear forwards';
};
const hideRing = () => {
ring.style.display = 'none';
ring.style.animation = 'none';
};
const styleEl = document.createElement('style');
styleEl.textContent = `
@keyframes sq-ring-spin {
0% { clip-path: inset(0 100% 0 0); opacity: 1; }
100% { clip-path: inset(0 0% 0 0); opacity: 1; }
}
@keyframes sq-ring-pulse {
0% { box-shadow: 0 0 0 0px rgba(88,101,242,0.5); }
100% { box-shadow: 0 0 0 10px rgba(88,101,242,0); }
}
`;
document.head.appendChild(styleEl);
btn.addEventListener('mousedown', (e) => {
if (e.button !== 0) return;
isDragging = false;
dragReady = false;
const rect = btn.getBoundingClientRect();
startX = e.clientX; startY = e.clientY;
startLeft = rect.left; startTop = rect.top;
showRing(e.clientX, e.clientY);
btn.style.transition = 'transform 0.1s';
btn.style.transform = 'scale(0.92)';
longPressTimer = setTimeout(() => {
dragReady = true;
hideRing();
btn.style.transform = 'scale(1.1)';
btn.style.cursor = 'grabbing';
btn.style.boxShadow = `0 0 0 4px ${cfg.btnColor}66, 0 6px 20px rgba(0,0,0,0.4)`;
btn.style.right = 'auto'; btn.style.bottom = 'auto';
btn.style.left = startLeft + 'px'; btn.style.top = startTop + 'px';
}, Number(cfg.dragDelay));
const onMouseMove = (e) => {
if (!dragReady) return;
isDragging = true;
const dx = e.clientX - startX, dy = e.clientY - startY;
btn.style.left = Math.max(10, Math.min(startLeft + dx, window.innerWidth - btn.offsetWidth - 10)) + 'px';
btn.style.top = Math.max(10, Math.min(startTop + dy, window.innerHeight - btn.offsetHeight - 10)) + 'px';
};
const onMouseUp = () => {
clearTimeout(longPressTimer);
hideRing();
btn.style.cursor = 'grab';
btn.style.transform = 'scale(1)';
btn.style.boxShadow = '0 4px 12px rgba(0,0,0,0.3)';
dragReady = false;
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp);
};
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);
e.preventDefault();
});
btn.addEventListener('click', () => {
if (isDragging) { isDragging = false; return; }
doSkip();
});
btn.addEventListener('contextmenu', (e) => {
e.preventDefault();
if (panel.style.display === 'block') { panel.style.display = 'none'; } else { buildPanel(); positionPanel(); }
});
btn.addEventListener('mouseenter', () => {
btn.style.opacity = '1'; btn.style.background = adjustColor(cfg.btnColor, -20);
});
btn.addEventListener('mouseleave', () => {
btn.style.background = cfg.btnColor;
btn.style.opacity = cfg.autoHide ? '0.2' : String(Number(cfg.btnOpacity) / 100);
});
document.addEventListener('click', (e) => {
if (!panel.contains(e.target) && e.target !== btn) panel.style.display = 'none';
});
function adjustColor(hex, amount) {
try {
const n = parseInt(hex.slice(1), 16);
const r = Math.max(0, Math.min(255, (n >> 16) + amount));
const g = Math.max(0, Math.min(255, ((n >> 8) & 0xff) + amount));
const b = Math.max(0, Math.min(255, (n & 0xff) + amount));
return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
} catch { return hex; }
}
document.body.appendChild(btn);
document.body.appendChild(panel);
// 【修復】最後確認一次按鈕可見
setTimeout(() => {
btn.style.cssText += 'z-index: 9999999 !important; visibility: visible !important; display: block !important;';
console.log('✅ Skip Button Initialized Successfully!');
}, 500);
})();