`;
// 添加到页面
document.body.appendChild(dialog);
// 添加关闭事件
dialog.querySelectorAll('.dialog-close').forEach(btn => {
btn.addEventListener('click', function() {
document.body.removeChild(dialog);
});
});
// 提交反馈
dialog.querySelector('#submit-feedback').addEventListener('click', function() {
// 这里可以添加实际的提交逻辑
document.body.removeChild(dialog);
// 显示成功消息
const messageDiv = document.createElement('div');
messageDiv.className = 'fixed bottom-4 right-4 p-4 rounded-md shadow-lg z-50 bg-green-500 text-white';
messageDiv.innerHTML = '感谢您的反馈！我们将尽快处理。';
document.body.appendChild(messageDiv);
// 3秒后移除
setTimeout(() => {
messageDiv.style.opacity = '0';
messageDiv.style.transition = 'opacity 0.3s';
setTimeout(() => {
document.body.removeChild(messageDiv);
}, 300);
}, 3000);
});
// 点击背景关闭
dialog.addEventListener('click', function(e) {
if (e.target === dialog) {
document.body.removeChild(dialog);
}
});
}
function openSettingsPanel() {
const settingsPanel = document.getElementById('settings-panel');
if (settingsPanel) {
settingsPanel.classList.remove('hidden');
}
}
function openAboutPanel() {
const aboutPanel = document.getElementById('about-panel');
if (aboutPanel) {
aboutPanel.classList.remove('hidden');
}
}
// 暗黑模式切换按钮
const darkModeToggles = document.querySelectorAll('#dark-mode-toggle, #dark-mode-toggle-sidebar');
if (darkModeToggles.length) {
darkModeToggles.forEach(toggle => {
toggle.addEventListener('click', function() {
console.log('暗黑模式切换按钮被点击');
document.body.classList.toggle('dark-mode');
const isDarkMode = document.body.classList.contains('dark-mode');
localStorage.setItem('darkMode', isDarkMode);
// 更改所有图标
const icons = document.querySelectorAll('#dark-mode-toggle i, #dark-mode-toggle-sidebar i');
icons.forEach(icon => {
if (isDarkMode) {
icon.classList.remove('fa-moon');
icon.classList.add('fa-sun');
} else {
icon.classList.remove('fa-sun');
icon.classList.add('fa-moon');
}
});
// 更新侧边栏模式文本
const themeStatus = document.getElementById('theme-status');
if (themeStatus) {
themeStatus.textContent = isDarkMode ? '当前: 深色' : '当前: 浅色';
console.log('更新暗黑模式文字为:', themeStatus.textContent);
} else {
console.log('未找到暗黑模式文字元素');
}
});
});
}
// 菜单收藏按钮交互
const favoriteButtons = document.querySelectorAll('.far.fa-heart');
favoriteButtons.forEach(btn => {
btn.addEventListener('click', function() {
this.classList.toggle('far');
this.classList.toggle('fas');
this.classList.toggle('text-red-500');
// 显示收藏提示（实际项目可添加toast提示）
console.log('收藏状态已更改');
});
});
// 添加卡片悬浮效果
const cards = document.querySelectorAll('.bg-white.rounded-lg');
cards.forEach(card => {
card.classList.add('transition-all', 'duration-300', 'hover-card-shadow');
});
// 工具卡片点击跟踪
const toolCards = document.querySelectorAll('.group.bg-white');
toolCards.forEach(card => {
card.addEventListener('click', function(e) {
if (!e.target.closest('a') && !e.target.closest('button')) {
const link = this.querySelector('a');
if (link && !link.hasAttribute('disabled')) {
link.click();
}
}
});
});
// 初始化工具提示 (Tooltip)
initTooltips();
// 为评分星星添加互动效果
const starContainers = document.querySelectorAll('.flex.items-center .flex:has(.fa-star)');
starContainers.forEach(container => {
const stars = container.querySelectorAll('i');
stars.forEach((star, index) => {
star.addEventListener('mouseover', () => {
for (let i = 0; i <= index; i++) {
stars[i].classList.add('text-yellow-500');
}
});
star.addEventListener('mouseout', () => {
stars.forEach(s => {
if (!s.classList.contains('text-yellow-400')) {
s.classList.remove('text-yellow-500');
}
});
});
});
});
// 检测当前页面并加载相应功能
const currentPath = window.location.pathname;
if (currentPath.includes('video.html')) {
initVideoParser();
} else if (currentPath.includes('image.html')) {
initImageConverter();
} else {
// 主页特定功能
initMainPageFeatures();
}
});
// 工具提示初始化
function initTooltips() {
const tooltipTriggers = document.querySelectorAll('[data-tooltip]');
tooltipTriggers.forEach(trigger => {
trigger.addEventListener('mouseenter', function() {
const tooltipText = this.getAttribute('data-tooltip');
const tooltip = document.createElement('div');
tooltip.className = 'absolute z-50 px-2 py-1 text-xs text-white bg-gray-800 rounded shadow-lg transition-opacity duration-300';
tooltip.textContent = tooltipText;
tooltip.style.opacity = '0';
tooltip.style.bottom = 'calc(100% + 5px)';
tooltip.style.left = '50%';
tooltip.style.transform = 'translateX(-50%)';
this.style.position = 'relative';
this.appendChild(tooltip);
setTimeout(() => {
tooltip.style.opacity = '1';
}, 10);
});
trigger.addEventListener('mouseleave', function() {
const tooltip = this.querySelector('div');
if (tooltip) {
tooltip.style.opacity = '0';
setTimeout(() => {
tooltip.remove();
}, 300);
}
});
});
}
// 主页特定功能
function initMainPageFeatures() {
// 添加滚动到顶部按钮
const scrollTopBtn = document.createElement('button');
scrollTopBtn.className = 'fab-button hidden';
scrollTopBtn.innerHTML = '