222 lines
8.9 KiB
JavaScript
222 lines
8.9 KiB
JavaScript
// 页脚交互功能脚本
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 社交媒体链接交互
|
||
const socialLinks = document.querySelectorAll('footer .social-links a');
|
||
socialLinks.forEach(link => {
|
||
link.addEventListener('click', function(e) {
|
||
const platform = this.getAttribute('data-platform');
|
||
if (platform) {
|
||
e.preventDefault();
|
||
handleSocialClick(platform);
|
||
}
|
||
});
|
||
});
|
||
|
||
// 快速链接交互
|
||
const quickLinks = document.querySelectorAll('footer .quick-links a');
|
||
quickLinks.forEach(link => {
|
||
link.addEventListener('click', function(e) {
|
||
if (this.getAttribute('href') === '#') {
|
||
e.preventDefault();
|
||
const linkType = this.getAttribute('data-link-type');
|
||
handleQuickLink(linkType);
|
||
}
|
||
});
|
||
});
|
||
|
||
// 订阅表单提交
|
||
const subscribeForm = document.getElementById('subscribe-form');
|
||
if (subscribeForm) {
|
||
subscribeForm.addEventListener('submit', function(e) {
|
||
e.preventDefault();
|
||
const emailInput = this.querySelector('input[type="email"]');
|
||
if (emailInput && emailInput.value) {
|
||
handleSubscribe(emailInput.value);
|
||
} else {
|
||
showMessage('请输入有效的邮箱地址', 'error');
|
||
}
|
||
});
|
||
}
|
||
|
||
// 处理社交媒体点击
|
||
function handleSocialClick(platform) {
|
||
let url = '';
|
||
console.log('社交媒体点击:', platform);
|
||
|
||
switch (platform) {
|
||
case 'github':
|
||
url = 'https://github.com/ITtools-collection/tools';
|
||
break;
|
||
case 'twitter':
|
||
url = 'https://twitter.com/ITtools_collection';
|
||
break;
|
||
case 'wechat':
|
||
showWeChatQRCode();
|
||
return;
|
||
default:
|
||
console.log('未知平台:', platform);
|
||
return;
|
||
}
|
||
|
||
if (url) {
|
||
console.log('打开URL:', url);
|
||
window.open(url, '_blank');
|
||
}
|
||
}
|
||
|
||
// 处理快速链接点击
|
||
function handleQuickLink(type) {
|
||
switch (type) {
|
||
case 'about':
|
||
showDialog('关于我们', `<div class="p-4">
|
||
<p class="mb-3">IT工具合集是一个集成各类实用工具的在线平台，旨在帮助用户提高工作效率，解决技术难题。</p>
|
||
<p>我们提供多种工具，包括媒体处理、格式转换、开发辅助、网络工具等，所有工具均免费使用。</p>
|
||
</div>`);
|
||
break;
|
||
case 'terms':
|
||
showDialog('使用条款', `<div class="p-4">
|
||
<p class="mb-3">欢迎使用IT工具合集。使用本网站即表示您同意以下条款：</p>
|
||
<ul class="list-disc pl-5 space-y-1 mb-3">
|
||
<li>本网站提供的工具仅供学习和参考</li>
|
||
<li>用户需对自己的行为负责</li>
|
||
<li>禁止将本站工具用于非法用途</li>
|
||
</ul>
|
||
<p>我们保留随时修改这些条款的权利。</p>
|
||
</div>`);
|
||
break;
|
||
case 'privacy':
|
||
showDialog('隐私政策', `<div class="p-4">
|
||
<p class="mb-3">保护您的隐私是我们的首要任务。本隐私政策说明：</p>
|
||
<ul class="list-disc pl-5 space-y-1 mb-3">
|
||
<li>我们不会收集您的个人身份信息</li>
|
||
<li>您上传的文件和数据只会用于提供服务</li>
|
||
<li>我们不会向第三方出售您的任何数据</li>
|
||
</ul>
|
||
<p>如有任何隐私相关疑问，请联系我们。</p>
|
||
</div>`);
|
||
break;
|
||
case 'faq':
|
||
showDialog('常见问题', `<div class="p-4">
|
||
<div class="mb-4">
|
||
<h3 class="font-medium mb-1">1. 使用这些工具需要付费吗？</h3>
|
||
<p>不需要，所有工具均免费使用，无需注册。</p>
|
||
</div>
|
||
<div class="mb-4">
|
||
<h3 class="font-medium mb-1">2. 上传的文件会保存在服务器上吗？</h3>
|
||
<p>不会，您上传的文件仅在浏览器中处理，不会上传到我们的服务器。</p>
|
||
</div>
|
||
<div>
|
||
<h3 class="font-medium mb-1">3. 如何反馈问题或建议？</h3>
|
||
<p>您可以通过"联系我们"页面或反馈表单向我们提供建议。</p>
|
||
</div>
|
||
</div>`);
|
||
break;
|
||
case 'contact':
|
||
showDialog('联系我们', `<div class="p-4">
|
||
<p class="mb-4">如有任何问题、建议或合作意向，请通过以下方式联系我们：</p>
|
||
<div class="mb-3">
|
||
<p class="font-medium">电子邮件：</p>
|
||
<p>contact@ittools-collection.com</p>
|
||
</div>
|
||
<div>
|
||
<p class="font-medium">微信公众号：</p>
|
||
<p>IT工具合集</p>
|
||
</div>
|
||
</div>`);
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
}
|
||
|
||
// 处理订阅
|
||
function handleSubscribe(email) {
|
||
// 这里可以添加实际的订阅逻辑，比如发送到后端API
|
||
// 当前仅显示成功消息
|
||
showMessage('订阅成功！感谢您的关注', 'success');
|
||
|
||
// 清空输入框
|
||
const emailInput = document.querySelector('#subscribe-form input[type="email"]');
|
||
if (emailInput) {
|
||
emailInput.value = '';
|
||
}
|
||
}
|
||
|
||
// 显示微信二维码
|
||
function showWeChatQRCode() {
|
||
showDialog('关注我们的微信', `<div class="p-4 text-center">
|
||
<div class="w-48 h-48 mx-auto bg-gray-200 flex items-center justify-center mb-3">
|
||
<i class="fas fa-qrcode text-gray-400 text-6xl"></i>
|
||
</div>
|
||
<p>扫描二维码关注我们的公众号</p>
|
||
</div>`);
|
||
}
|
||
|
||
// 显示对话框
|
||
function showDialog(title, content) {
|
||
// 检查是否已存在对话框
|
||
let dialog = document.getElementById('footer-dialog');
|
||
if (dialog) {
|
||
document.body.removeChild(dialog);
|
||
}
|
||
|
||
// 创建对话框
|
||
dialog = document.createElement('div');
|
||
dialog.id = 'footer-dialog';
|
||
dialog.className = 'fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50';
|
||
dialog.innerHTML = `
|
||
<div class="bg-white rounded-lg shadow-xl w-full max-w-md">
|
||
<div class="flex items-center justify-between p-4 border-b border-gray-200">
|
||
<h2 class="text-xl font-bold">${title}</h2>
|
||
<button class="dialog-close text-gray-500 hover:text-gray-700">
|
||
<i class="fas fa-times"></i>
|
||
</button>
|
||
</div>
|
||
<div class="max-h-96 overflow-y-auto">
|
||
${content}
|
||
</div>
|
||
<div class="bg-gray-50 p-4 rounded-b-lg text-right">
|
||
<button class="dialog-close px-4 py-2 bg-gray-800 text-white rounded-md hover:bg-black transition-colors">
|
||
关闭
|
||
</button>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
// 添加到页面
|
||
document.body.appendChild(dialog);
|
||
|
||
// 添加关闭事件
|
||
dialog.querySelectorAll('.dialog-close').forEach(btn => {
|
||
btn.addEventListener('click', function() {
|
||
document.body.removeChild(dialog);
|
||
});
|
||
});
|
||
|
||
// 点击背景关闭
|
||
dialog.addEventListener('click', function(e) {
|
||
if (e.target === dialog) {
|
||
document.body.removeChild(dialog);
|
||
}
|
||
});
|
||
}
|
||
|
||
// 显示消息提示
|
||
function showMessage(message, type = 'success') {
|
||
const messageDiv = document.createElement('div');
|
||
messageDiv.className = `fixed bottom-4 right-4 p-4 rounded-md shadow-lg z-50 transition-all duration-300 transform translate-y-0 ${
|
||
type === 'success' ? 'bg-green-500' : 'bg-red-500'
|
||
} text-white`;
|
||
messageDiv.innerHTML = message;
|
||
|
||
document.body.appendChild(messageDiv);
|
||
|
||
// 3秒后移除
|
||
setTimeout(() => {
|
||
messageDiv.style.transform = 'translateY(100%)';
|
||
setTimeout(() => {
|
||
document.body.removeChild(messageDiv);
|
||
}, 300);
|
||
}, 3000);
|
||
}
|
||
});
|