814 lines
58 KiB
HTML
814 lines
58 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>IT工具合集 - 专业在线工具箱</title>
|
||
<link rel="icon" href="favicon.svg" type="image/svg+xml">
|
||
<link rel="shortcut icon" href="favicon.svg" type="image/svg+xml">
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
<link rel="stylesheet" href="styles.css">
|
||
</head>
|
||
<body class="bg-gray-50 text-gray-900">
|
||
<!-- 侧边栏 -->
|
||
<div id="sidebar" class="fixed top-0 left-0 h-full w-64 bg-white shadow-lg transform -translate-x-full transition-transform duration-300 ease-in-out z-30 md:translate-x-0">
|
||
<div class="flex items-center justify-between p-4 border-b border-gray-200">
|
||
<h1 class="text-xl font-bold">IT工具合集</h1>
|
||
<button id="close-sidebar" class="md:hidden text-gray-500 hover:text-gray-700">
|
||
<i class="fas fa-times"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<nav class="mt-2 overflow-y-auto" style="max-height: calc(100vh - 130px);">
|
||
<div class="px-4 py-2 text-xs font-semibold text-gray-500 uppercase">主要分类</div>
|
||
|
||
<a href="#media-tools" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100 active-nav-item">
|
||
<i class="fas fa-photo-video w-6 text-gray-500"></i>
|
||
<span class="ml-2">媒体工具</span>
|
||
<span class="ml-auto bg-gray-200 text-gray-700 text-xs font-medium px-2 py-0.5 rounded-full">2</span>
|
||
</a>
|
||
|
||
<a href="#dev-tools" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100"> <i class="fas fa-code w-6 text-gray-500"></i> <span class="ml-2">开发工具</span> <span class="ml-auto bg-gray-200 text-gray-700 text-xs font-medium px-2 py-0.5 rounded-full">1</span> </a>
|
||
|
||
<a href="#format-tools" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100">
|
||
<i class="fas fa-file-alt w-6 text-gray-500"></i>
|
||
<span class="ml-2">格式转换</span>
|
||
<span class="ml-auto bg-gray-200 text-gray-700 text-xs font-medium px-2 py-0.5 rounded-full">0</span>
|
||
</a>
|
||
|
||
<a href="#network-tools" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100">
|
||
<i class="fas fa-network-wired w-6 text-gray-500"></i>
|
||
<span class="ml-2">网络工具</span>
|
||
<span class="ml-auto bg-gray-200 text-gray-700 text-xs font-medium px-2 py-0.5 rounded-full">0</span>
|
||
</a>
|
||
|
||
<a href="#ai-tools" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100">
|
||
<i class="fas fa-robot w-6 text-gray-500"></i>
|
||
<span class="ml-2">AI工具</span>
|
||
<span class="ml-auto bg-purple-200 text-purple-700 text-xs font-medium px-2 py-0.5 rounded-full">新</span>
|
||
</a>
|
||
|
||
<a href="#security-tools" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100">
|
||
<i class="fas fa-shield-alt w-6 text-gray-500"></i>
|
||
<span class="ml-2">安全工具</span>
|
||
<span class="ml-auto bg-gray-200 text-gray-700 text-xs font-medium px-2 py-0.5 rounded-full">0</span>
|
||
</a>
|
||
|
||
<a href="#sys-tools" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100">
|
||
<i class="fas fa-desktop w-6 text-gray-500"></i>
|
||
<span class="ml-2">系统工具</span>
|
||
<span class="ml-auto bg-gray-200 text-gray-700 text-xs font-medium px-2 py-0.5 rounded-full">0</span>
|
||
</a>
|
||
|
||
<div class="px-4 pt-4 pb-2 mt-2 text-xs font-semibold text-gray-500 uppercase border-t border-gray-200">个人</div>
|
||
|
||
<a href="#favorites" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100">
|
||
<i class="fas fa-star w-6 text-gray-500"></i>
|
||
<span class="ml-2">收藏夹</span>
|
||
</a>
|
||
|
||
<a href="#history" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100">
|
||
<i class="fas fa-history w-6 text-gray-500"></i>
|
||
<span class="ml-2">最近使用</span>
|
||
</a>
|
||
|
||
<a href="#settings" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100">
|
||
<i class="fas fa-cog w-6 text-gray-500"></i>
|
||
<span class="ml-2">设置</span>
|
||
</a>
|
||
|
||
<a href="#about" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100">
|
||
<i class="fas fa-info-circle w-6 text-gray-500"></i>
|
||
<span class="ml-2">关于</span>
|
||
</a>
|
||
|
||
<a href="#feedback" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100">
|
||
<i class="fas fa-comment-alt w-6 text-gray-500"></i>
|
||
<span class="ml-2">反馈建议</span>
|
||
</a>
|
||
</nav>
|
||
|
||
<div class="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-200 bg-gray-50">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<button id="dark-mode-toggle-sidebar" class="p-2 rounded-full hover:bg-gray-200">
|
||
<i class="fas fa-moon"></i>
|
||
</button>
|
||
<div class="ml-3">
|
||
<div class="text-sm font-medium">主题切换</div>
|
||
<div class="text-xs text-gray-500" id="theme-status">当前: 浅色</div>
|
||
</div>
|
||
</div>
|
||
<button class="p-2 rounded-full hover:bg-gray-200" id="open-settings">
|
||
<i class="fas fa-cog"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 主内容区 -->
|
||
<div id="content" class="min-h-screen md:ml-64 flex flex-col">
|
||
<!-- 顶部导航栏 -->
|
||
<nav class="bg-white shadow-sm border-b border-gray-200 sticky top-0 z-20">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="flex justify-between h-16">
|
||
<div class="flex items-center">
|
||
<button id="toggle-sidebar" class="p-2 rounded-md text-gray-500 hover:text-gray-700 md:hidden">
|
||
<i class="fas fa-bars"></i>
|
||
</button>
|
||
<span class="text-xl font-bold ml-2 md:hidden">IT工具合集</span>
|
||
</div>
|
||
|
||
<!-- 中央搜索框，宽度增加3倍 -->
|
||
<div class="flex-1 flex items-center justify-center px-4">
|
||
<div class="relative w-full max-w-2xl">
|
||
<input type="text" placeholder="搜索工具..." class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-500">
|
||
<i class="fas fa-search absolute left-3 top-2.5 text-gray-400"></i>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-center space-x-4">
|
||
<button id="dark-mode-toggle" class="p-2 rounded-full hover:bg-gray-200">
|
||
<i class="fas fa-moon"></i>
|
||
</button>
|
||
<div class="relative group">
|
||
<button class="flex items-center justify-center h-8 w-8 rounded-full bg-gray-200 text-gray-700 hover:bg-gray-300">
|
||
<i class="fas fa-user"></i>
|
||
</button>
|
||
<div class="absolute right-0 w-48 mt-2 py-2 bg-white rounded-lg shadow-xl border border-gray-200 invisible opacity-0 group-hover:visible group-hover:opacity-100 transition-all duration-300">
|
||
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">
|
||
<i class="fas fa-user-circle mr-2"></i>个人中心
|
||
</a>
|
||
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">
|
||
<i class="fas fa-cog mr-2"></i>设置
|
||
</a>
|
||
<div class="border-t border-gray-200 my-1"></div>
|
||
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">
|
||
<i class="fas fa-sign-out-alt mr-2"></i>退出
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 主要内容 -->
|
||
<main class="flex-grow container mx-auto px-4 py-8">
|
||
<!-- 顶部信息卡片 -->
|
||
<div class="relative bg-gradient-to-r from-gray-800 to-gray-900 rounded-lg shadow-lg mb-10 overflow-hidden">
|
||
<div class="absolute right-0 top-0 h-full w-1/3 hidden lg:block">
|
||
<div class="absolute inset-0 bg-black opacity-30"></div>
|
||
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center">
|
||
<i class="fas fa-tools text-white text-9xl opacity-10"></i>
|
||
</div>
|
||
</div>
|
||
<div class="relative p-6 md:p-8 lg:w-2/3">
|
||
<h2 class="text-2xl md:text-3xl font-bold text-white mb-3">专业IT工具合集</h2>
|
||
<p class="text-gray-300 mb-6">集成各类实用工具，提高工作效率，解决技术难题</p>
|
||
<div class="flex flex-wrap gap-3">
|
||
<a href="#media-tools" class="inline-flex items-center px-4 py-2 bg-white bg-opacity-20 hover:bg-opacity-30 rounded-md text-white transition-colors">
|
||
<i class="fas fa-chevron-down mr-2"></i>浏览工具
|
||
</a>
|
||
<button class="inline-flex items-center px-4 py-2 bg-white text-gray-800 rounded-md hover:bg-gray-100 transition-colors">
|
||
<i class="fas fa-star mr-2"></i>收藏工具
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="absolute bottom-0 left-0 w-full h-1 bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500"></div>
|
||
</div>
|
||
|
||
<!-- 标签选择器 -->
|
||
<div class="mb-8 overflow-hidden">
|
||
<h3 class="text-lg font-medium mb-4">工具标签</h3>
|
||
<div class="flex flex-wrap gap-2 pb-2 overflow-x-auto tags-container">
|
||
<button class="px-3 py-1.5 bg-gray-800 text-white rounded-full text-sm font-medium">
|
||
全部
|
||
</button>
|
||
<button class="px-3 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-800 rounded-full text-sm font-medium transition-colors">
|
||
视频处理
|
||
</button>
|
||
<button class="px-3 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-800 rounded-full text-sm font-medium transition-colors">
|
||
图片编辑
|
||
</button>
|
||
<button class="px-3 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-800 rounded-full text-sm font-medium transition-colors">
|
||
格式转换
|
||
</button>
|
||
<button class="px-3 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-800 rounded-full text-sm font-medium transition-colors">
|
||
开发工具
|
||
</button>
|
||
<button class="px-3 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-800 rounded-full text-sm font-medium transition-colors">
|
||
网络工具
|
||
</button>
|
||
<button class="px-3 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-800 rounded-full text-sm font-medium transition-colors">
|
||
AI辅助
|
||
</button>
|
||
<button class="px-3 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-800 rounded-full text-sm font-medium transition-colors">
|
||
文件处理
|
||
</button>
|
||
<button class="px-3 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-800 rounded-full text-sm font-medium transition-colors">
|
||
系统工具
|
||
</button>
|
||
<button class="px-3 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-800 rounded-full text-sm font-medium transition-colors">
|
||
文本工具
|
||
</button>
|
||
<button class="px-3 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-800 rounded-full text-sm font-medium transition-colors">
|
||
数据分析
|
||
</button>
|
||
<button class="px-3 py-1.5 bg-purple-100 hover:bg-purple-200 text-purple-800 rounded-full text-sm font-medium transition-colors flex items-center">
|
||
<i class="fas fa-bolt mr-1 text-xs"></i>新功能
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 统计卡片行 -->
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-10">
|
||
<div class="bg-white rounded-lg shadow-sm overflow-hidden border border-gray-200 hover:shadow-md transition-shadow">
|
||
<div class="p-5">
|
||
<div class="flex items-center">
|
||
<div class="flex-shrink-0 bg-blue-500 bg-opacity-10 p-3 rounded-lg">
|
||
<i class="fas fa-tools text-blue-500 text-2xl"></i>
|
||
</div>
|
||
<div class="ml-5">
|
||
<h3 class="text-gray-500 text-sm">总工具数</h3> <div class="flex items-end"> <span class="text-2xl font-bold">3</span> <span class="text-xs text-green-500 ml-2">+2 新增</span> </div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-white rounded-lg shadow-sm overflow-hidden border border-gray-200 hover:shadow-md transition-shadow">
|
||
<div class="p-5">
|
||
<div class="flex items-center">
|
||
<div class="flex-shrink-0 bg-green-500 bg-opacity-10 p-3 rounded-lg">
|
||
<i class="fas fa-user-friends text-green-500 text-2xl"></i>
|
||
</div>
|
||
<div class="ml-5">
|
||
<h3 class="text-gray-500 text-sm">访问人数</h3>
|
||
<div class="flex items-end">
|
||
<span class="text-2xl font-bold">1,254</span>
|
||
<span class="text-xs text-green-500 ml-2">+12% 增长</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-white rounded-lg shadow-sm overflow-hidden border border-gray-200 hover:shadow-md transition-shadow">
|
||
<div class="p-5">
|
||
<div class="flex items-center">
|
||
<div class="flex-shrink-0 bg-yellow-500 bg-opacity-10 p-3 rounded-lg">
|
||
<i class="fas fa-chart-line text-yellow-500 text-2xl"></i>
|
||
</div>
|
||
<div class="ml-5">
|
||
<h3 class="text-gray-500 text-sm">使用次数</h3>
|
||
<div class="flex items-end">
|
||
<span class="text-2xl font-bold">5,840</span>
|
||
<span class="text-xs text-green-500 ml-2">+5% 增长</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-white rounded-lg shadow-sm overflow-hidden border border-gray-200 hover:shadow-md transition-shadow">
|
||
<div class="p-5">
|
||
<div class="flex items-center">
|
||
<div class="flex-shrink-0 bg-red-500 bg-opacity-10 p-3 rounded-lg">
|
||
<i class="fas fa-heart text-red-500 text-2xl"></i>
|
||
</div>
|
||
<div class="ml-5">
|
||
<h3 class="text-gray-500 text-sm">工具评分</h3>
|
||
<div class="flex items-end">
|
||
<span class="text-2xl font-bold">4.8</span>
|
||
<div class="flex items-center ml-2">
|
||
<i class="fas fa-star text-yellow-400 text-xs"></i>
|
||
<i class="fas fa-star text-yellow-400 text-xs"></i>
|
||
<i class="fas fa-star text-yellow-400 text-xs"></i>
|
||
<i class="fas fa-star text-yellow-400 text-xs"></i>
|
||
<i class="fas fa-star-half-alt text-yellow-400 text-xs"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 媒体工具分类 -->
|
||
<div id="media-tools" class="mb-12">
|
||
<div class="flex items-center justify-between mb-6">
|
||
<div class="flex items-center">
|
||
<i class="fas fa-photo-video text-2xl text-gray-700 mr-3"></i>
|
||
<h2 class="text-2xl font-bold">媒体工具</h2>
|
||
</div>
|
||
<a href="#" class="text-gray-500 hover:text-black">
|
||
查看全部 <i class="fas fa-chevron-right ml-1"></i>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
<!-- VIP视频解析 -->
|
||
<div class="group bg-white rounded-lg shadow-sm overflow-hidden border border-gray-200 hover:shadow-lg transition-all">
|
||
<div class="h-40 bg-gradient-to-r from-gray-700 to-gray-900 relative overflow-hidden">
|
||
<div class="absolute inset-0 flex items-center justify-center">
|
||
<i class="fas fa-play-circle text-white text-5xl opacity-20 group-hover:opacity-30 transition-opacity"></i>
|
||
</div>
|
||
<div class="absolute top-3 right-3 flex space-x-1">
|
||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-900 bg-opacity-60 text-white">
|
||
热门
|
||
</span>
|
||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-500 bg-opacity-60 text-white">
|
||
视频
|
||
</span>
|
||
</div>
|
||
<div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black to-transparent">
|
||
<h3 class="text-lg font-bold text-white">VIP视频解析</h3>
|
||
<p class="text-gray-300 text-sm">解析各大视频网站VIP视频</p>
|
||
</div>
|
||
</div>
|
||
<div class="p-5">
|
||
<div class="flex items-center mb-4">
|
||
<div class="flex-1">
|
||
<div class="flex items-center">
|
||
<div class="flex">
|
||
<i class="fas fa-star text-yellow-400"></i>
|
||
<i class="fas fa-star text-yellow-400"></i>
|
||
<i class="fas fa-star text-yellow-400"></i>
|
||
<i class="fas fa-star text-yellow-400"></i>
|
||
<i class="fas fa-star text-yellow-400"></i>
|
||
</div>
|
||
<span class="text-xs text-gray-500 ml-2">5.0 (120)</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center text-gray-500">
|
||
<i class="fas fa-eye mr-1"></i>
|
||
<span class="text-xs">3,240</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex flex-wrap mb-4 gap-1">
|
||
<span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">视频处理</span>
|
||
<span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">影视</span>
|
||
<span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">VIP资源</span>
|
||
</div>
|
||
<p class="text-gray-600 text-sm mb-4">解析各大视频网站的VIP视频，无需会员即可观看各种平台的付费视频内容</p>
|
||
<div class="flex justify-between items-center">
|
||
<a href="media-tools/video-parser/index.html" target="_blank" class="inline-flex items-center bg-gray-800 hover:bg-black text-white font-medium py-2 px-4 rounded-md transition-colors">
|
||
<i class="fas fa-play-circle mr-2"></i>立即使用
|
||
</a>
|
||
<button class="p-2 text-gray-400 hover:text-red-500 transition-colors">
|
||
<i class="far fa-heart"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 图片格式转换 -->
|
||
<div class="group bg-white rounded-lg shadow-sm overflow-hidden border border-gray-200 hover:shadow-lg transition-all">
|
||
<div class="h-40 bg-gradient-to-r from-gray-700 to-gray-900 relative overflow-hidden">
|
||
<div class="absolute inset-0 flex items-center justify-center">
|
||
<i class="fas fa-images text-white text-5xl opacity-20 group-hover:opacity-30 transition-opacity"></i>
|
||
</div>
|
||
<div class="absolute top-3 right-3 flex space-x-1">
|
||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-500 bg-opacity-80 text-white">
|
||
<i class="fas fa-bolt mr-1"></i>新功能
|
||
</span>
|
||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-500 bg-opacity-60 text-white">
|
||
图片
|
||
</span>
|
||
</div>
|
||
<div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black to-transparent">
|
||
<h3 class="text-lg font-bold text-white">图片格式转换</h3>
|
||
<p class="text-gray-300 text-sm">支持多种图片格式互转</p>
|
||
</div>
|
||
</div>
|
||
<div class="p-5">
|
||
<div class="flex items-center mb-4">
|
||
<div class="flex-1">
|
||
<div class="flex items-center">
|
||
<div class="flex">
|
||
<i class="fas fa-star text-yellow-400"></i>
|
||
<i class="fas fa-star text-yellow-400"></i>
|
||
<i class="fas fa-star text-yellow-400"></i>
|
||
<i class="fas fa-star text-yellow-400"></i>
|
||
<i class="fas fa-star-half-alt text-yellow-400"></i>
|
||
</div>
|
||
<span class="text-xs text-gray-500 ml-2">4.5 (85)</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center text-gray-500">
|
||
<i class="fas fa-eye mr-1"></i>
|
||
<span class="text-xs">2,600</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex flex-wrap mb-4 gap-1">
|
||
<span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">图片编辑</span>
|
||
<span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">格式转换</span>
|
||
<span class="px-2 py-1 bg-blue-100 text-blue-600 rounded text-xs">新增</span>
|
||
</div>
|
||
<p class="text-gray-600 text-sm mb-4">轻松转换各种图片格式，支持JPG、PNG、WEBP等格式互转，还可调整质量和尺寸</p>
|
||
<div class="flex justify-between items-center">
|
||
<a href="media-tools/image-converter/index.html" target="_blank" class="inline-flex items-center bg-gray-800 hover:bg-black text-white font-medium py-2 px-4 rounded-md transition-colors">
|
||
<i class="fas fa-exchange-alt mr-2"></i>立即转换
|
||
</a>
|
||
<button class="p-2 text-gray-400 hover:text-red-500 transition-colors">
|
||
<i class="far fa-heart"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 视频压缩工具 -->
|
||
<div class="group bg-white rounded-lg shadow-sm overflow-hidden border border-gray-200 hover:shadow-lg transition-all opacity-75">
|
||
<div class="h-40 bg-gradient-to-r from-gray-700 to-gray-900 relative overflow-hidden">
|
||
<div class="absolute inset-0 flex items-center justify-center">
|
||
<i class="fas fa-film text-white text-5xl opacity-20 group-hover:opacity-30 transition-opacity"></i>
|
||
</div>
|
||
<div class="absolute top-3 right-3 flex space-x-1">
|
||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-500 bg-opacity-80 text-white">
|
||
<i class="fas fa-clock mr-1"></i>即将推出
|
||
</span>
|
||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-500 bg-opacity-60 text-white">
|
||
视频
|
||
</span>
|
||
</div>
|
||
<div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black to-transparent">
|
||
<h3 class="text-lg font-bold text-white">视频压缩工具</h3>
|
||
<p class="text-gray-300 text-sm">高效压缩视频文件</p>
|
||
</div>
|
||
</div>
|
||
<div class="p-5">
|
||
<div class="flex items-center mb-4">
|
||
<div class="flex-1">
|
||
<div class="flex items-center">
|
||
<div class="flex text-gray-300">
|
||
<i class="fas fa-star"></i>
|
||
<i class="fas fa-star"></i>
|
||
<i class="fas fa-star"></i>
|
||
<i class="fas fa-star"></i>
|
||
<i class="fas fa-star"></i>
|
||
</div>
|
||
<span class="text-xs text-gray-400 ml-2">暂无评分</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center text-gray-400">
|
||
<i class="fas fa-eye mr-1"></i>
|
||
<span class="text-xs">-</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex flex-wrap mb-4 gap-1">
|
||
<span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">视频处理</span>
|
||
<span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">文件优化</span>
|
||
<span class="px-2 py-1 bg-purple-100 text-purple-600 rounded text-xs">开发中</span>
|
||
</div>
|
||
<p class="text-gray-500 text-sm mb-4">高效压缩视频文件大小，保持画质清晰度，适用于上传分享或存储</p>
|
||
<div class="flex justify-between items-center">
|
||
<button disabled class="inline-flex items-center bg-gray-300 text-gray-500 font-medium py-2 px-4 rounded-md cursor-not-allowed">
|
||
<i class="fas fa-hourglass-half mr-2"></i>开发中
|
||
</button>
|
||
<button class="p-2 text-gray-300 cursor-not-allowed">
|
||
<i class="far fa-bell"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 开发工具分类 --> <div id="dev-tools" class="mb-12"> <div class="flex items-center justify-between mb-6"> <div class="flex items-center"> <i class="fas fa-code text-2xl text-gray-700 mr-3"></i> <h2 class="text-2xl font-bold">开发工具</h2> </div> <a href="#" class="text-gray-500 hover:text-black"> 查看全部 <i class="fas fa-chevron-right ml-1"></i> </a> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <!-- 代码格式化工具 --> <div class="group bg-white rounded-lg shadow-sm overflow-hidden border border-gray-200 hover:shadow-lg transition-all"> <div class="h-40 bg-gradient-to-r from-gray-700 to-gray-900 relative overflow-hidden"> <div class="absolute inset-0 flex items-center justify-center"> <i class="fas fa-code text-white text-5xl opacity-20 group-hover:opacity-30 transition-opacity"></i> </div> <div class="absolute top-3 right-3 flex space-x-1"> <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-500 bg-opacity-80 text-white"> <i class="fas fa-bolt mr-1"></i>新功能 </span> <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-500 bg-opacity-60 text-white"> 开发 </span> </div> <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black to-transparent"> <h3 class="text-lg font-bold text-white">代码格式化工具</h3> <p class="text-gray-300 text-sm">美化并格式化各种编程语言代码</p> </div> </div> <div class="p-5"> <div class="flex items-center mb-4"> <div class="flex-1"> <div class="flex items-center"> <div class="flex"> <i class="fas fa-star text-yellow-400"></i> <i class="fas fa-star text-yellow-400"></i> <i class="fas fa-star text-yellow-400"></i> <i class="fas fa-star text-yellow-400"></i> <i class="fas fa-star-half-alt text-yellow-400"></i> </div> <span class="text-xs text-gray-500 ml-2">4.5 (60)</span> </div> </div> <div class="flex items-center text-gray-500"> <i class="fas fa-eye mr-1"></i> <span class="text-xs">1,800</span> </div> </div> <div class="flex flex-wrap mb-4 gap-1"> <span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">代码处理</span> <span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">开发工具</span> <span class="px-2 py-1 bg-blue-100 text-blue-600 rounded text-xs">新增</span> </div> <p class="text-gray-600 text-sm mb-4">美化并格式化各种编程语言代码，支持JavaScript、HTML、CSS、JSON等多种格式</p> <div class="flex justify-between items-center"> <a href="dev-tools/code-formatter/index.html" class="inline-flex items-center bg-gray-800 hover:bg-black text-white font-medium py-2 px-4 rounded-md transition-colors"> <i class="fas fa-magic mr-2"></i>开始格式化 </a> <button class="p-2 text-gray-400 hover:text-red-500 transition-colors"> <i class="far fa-heart"></i> </button> </div> </div> </div> <!-- 更多开发工具开发中提示 --> <div class="group bg-white rounded-lg shadow-sm overflow-hidden border border-gray-200 hover:shadow-lg transition-all opacity-75"> <div class="h-40 bg-gradient-to-r from-gray-700 to-gray-900 relative overflow-hidden"> <div class="absolute inset-0 flex items-center justify-center"> <i class="fas fa-laptop-code text-white text-5xl opacity-20 group-hover:opacity-30 transition-opacity"></i> </div> <div class="absolute top-3 right-3 flex space-x-1"> <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-500 bg-opacity-80 text-white"> <i class="fas fa-clock mr-1"></i>即将推出 </span> </div> <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black to-transparent"> <h3 class="text-lg font-bold text-white">JSON校验工具</h3> <p class="text-gray-300 text-sm">验证和格式化JSON数据</p> </div> </div> <div class="p-5"> <div class="flex items-center mb-4"> <div class="flex-1"> <div class="flex items-center"> <div class="flex text-gray-300"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> <span class="text-xs text-gray-400 ml-2">暂无评分</span> </div> </div> <div class="flex items-center text-gray-400"> <i class="fas fa-eye mr-1"></i> <span class="text-xs">-</span> </div> </div> <div class="flex flex-wrap mb-4 gap-1"> <span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">JSON</span> <span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">开发工具</span> <span class="px-2 py-1 bg-purple-100 text-purple-600 rounded text-xs">开发中</span> </div> <p class="text-gray-500 text-sm mb-4">验证JSON数据的有效性，格式化展示，并提供错误提示和修复建议</p> <div class="flex justify-between items-center"> <button disabled class="inline-flex items-center bg-gray-300 text-gray-500 font-medium py-2 px-4 rounded-md cursor-not-allowed"> <i class="fas fa-hourglass-half mr-2"></i>开发中 </button> <button class="p-2 text-gray-300 cursor-not-allowed"> <i class="far fa-bell"></i> </button> </div> </div> </div> </div> </div>
|
||
|
||
<!-- 推荐工具 -->
|
||
<div id="recommended-tools" class="mb-12">
|
||
<div class="flex items-center justify-between mb-6">
|
||
<div class="flex items-center">
|
||
<i class="fas fa-thumbs-up text-2xl text-gray-700 mr-3"></i>
|
||
<h2 class="text-2xl font-bold">推荐工具</h2>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-white rounded-lg border border-gray-200 p-6 shadow-sm">
|
||
<h3 class="text-lg font-semibold mb-4">根据您的使用习惯，我们为您推荐以下工具</h3>
|
||
|
||
<div class="flex flex-col md:flex-row gap-4 mt-6">
|
||
<!-- 推荐工具1 -->
|
||
<div class="flex-1 flex items-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
|
||
<div class="flex-shrink-0 w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-4">
|
||
<i class="fas fa-file-alt text-blue-500 text-xl"></i>
|
||
</div>
|
||
<div class="flex-grow">
|
||
<h4 class="font-medium">文本内容对比工具</h4>
|
||
<p class="text-gray-500 text-sm">对比两段文本的差异，高亮显示变更部分</p>
|
||
</div>
|
||
<div class="ml-2">
|
||
<button class="px-3 py-1 text-sm bg-gray-100 text-gray-800 rounded-md hover:bg-gray-200">
|
||
<i class="fas fa-external-link-alt"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 推荐工具2 -->
|
||
<div class="flex-1 flex items-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
|
||
<div class="flex-shrink-0 w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mr-4">
|
||
<i class="fas fa-globe text-green-500 text-xl"></i>
|
||
</div>
|
||
<div class="flex-grow">
|
||
<h4 class="font-medium">网站访问检测</h4>
|
||
<p class="text-gray-500 text-sm">检测网站是否可访问，查看响应状态和加载时间</p>
|
||
</div>
|
||
<div class="ml-2">
|
||
<button class="px-3 py-1 text-sm bg-gray-100 text-gray-800 rounded-md hover:bg-gray-200">
|
||
<i class="fas fa-external-link-alt"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<!-- 页脚 -->
|
||
<footer class="bg-white border-t border-gray-200 py-8 mt-auto">
|
||
<div class="container mx-auto px-4">
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||
<div>
|
||
<h3 class="text-lg font-semibold mb-4">IT工具合集</h3>
|
||
<p class="text-gray-500 text-sm">提供多种实用工具，帮助您提高效率，解决问题。所有工具完全免费使用，无需注册。</p>
|
||
<div class="flex space-x-4 mt-4 social-links">
|
||
<a href="javascript:void(0)" class="text-gray-400 hover:text-gray-800 cursor-pointer" data-platform="github">
|
||
<i class="fab fa-github text-xl"></i>
|
||
</a>
|
||
<a href="javascript:void(0)" class="text-gray-400 hover:text-gray-800 cursor-pointer" data-platform="twitter">
|
||
<i class="fab fa-twitter text-xl"></i>
|
||
</a>
|
||
<a href="javascript:void(0)" class="text-gray-400 hover:text-gray-800 cursor-pointer" data-platform="wechat">
|
||
<i class="fab fa-weixin text-xl"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-lg font-semibold mb-4">快速链接</h3>
|
||
<ul class="space-y-2 text-sm text-gray-500 quick-links">
|
||
<li><a href="#" class="hover:text-black" data-link-type="about">关于我们</a></li>
|
||
<li><a href="#" class="hover:text-black" data-link-type="terms">使用条款</a></li>
|
||
<li><a href="#" class="hover:text-black" data-link-type="privacy">隐私政策</a></li>
|
||
<li><a href="#" class="hover:text-black" data-link-type="faq">常见问题</a></li>
|
||
<li><a href="#" class="hover:text-black" data-link-type="contact">联系我们</a></li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-lg font-semibold mb-4">订阅更新</h3>
|
||
<p class="text-gray-500 text-sm mb-4">订阅我们的更新，获取最新工具资讯</p>
|
||
<form id="subscribe-form" class="flex">
|
||
<input type="email" placeholder="输入您的邮箱" required class="flex-1 px-4 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-gray-500">
|
||
<button type="submit" class="px-4 py-2 bg-gray-800 text-white rounded-r-md hover:bg-black">
|
||
订阅
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
<div class="border-t border-gray-200 mt-8 pt-6 text-center text-gray-500 text-sm">
|
||
<p>© 2025 IT工具合集 | 一站式实用工具网站</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
|
||
<!-- 移动端菜单遮罩 -->
|
||
<div id="sidebar-backdrop" class="fixed inset-0 bg-black bg-opacity-50 z-20 hidden md:hidden"></div>
|
||
|
||
<!-- 设置面板 -->
|
||
<div id="settings-panel" class="fixed inset-0 z-50 bg-black bg-opacity-50 flex items-center justify-center hidden">
|
||
<div class="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">
|
||
<div class="flex items-center justify-between p-4 border-b border-gray-200">
|
||
<h2 class="text-xl font-bold">设置</h2>
|
||
<button id="close-settings" class="text-gray-500 hover:text-gray-700">
|
||
<i class="fas fa-times"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="p-6">
|
||
<!-- 主题设置 -->
|
||
<div class="mb-8">
|
||
<h3 class="text-lg font-semibold mb-4">主题设置</h3>
|
||
<div class="flex items-center justify-between py-3 border-b border-gray-200">
|
||
<div>
|
||
<span class="font-medium">暗黑模式</span>
|
||
<p class="text-sm text-gray-500">切换浅色/深色主题</p>
|
||
</div>
|
||
<label class="relative inline-flex items-center cursor-pointer">
|
||
<input type="checkbox" class="sr-only peer" id="theme-toggle-setting">
|
||
<div class="w-11 h-6 bg-gray-200 rounded-full peer peer-checked:bg-gray-600"></div>
|
||
<div class="absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-all peer-checked:translate-x-5"></div>
|
||
</label>
|
||
</div>
|
||
|
||
<div class="flex items-center justify-between py-3 border-b border-gray-200">
|
||
<div>
|
||
<span class="font-medium">字体大小</span>
|
||
<p class="text-sm text-gray-500">调整界面文字大小</p>
|
||
</div>
|
||
<div class="flex space-x-2">
|
||
<button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium">小</button>
|
||
<button class="px-3 py-1 bg-gray-800 text-white rounded-md text-sm font-medium">中</button>
|
||
<button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium">大</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 通用设置 -->
|
||
<div class="mb-8">
|
||
<h3 class="text-lg font-semibold mb-4">通用设置</h3>
|
||
<div class="flex items-center justify-between py-3 border-b border-gray-200">
|
||
<div>
|
||
<span class="font-medium">自动保存历史记录</span>
|
||
<p class="text-sm text-gray-500">记录您使用过的工具</p>
|
||
</div>
|
||
<label class="relative inline-flex items-center cursor-pointer">
|
||
<input type="checkbox" class="sr-only peer" checked>
|
||
<div class="w-11 h-6 bg-gray-200 rounded-full peer peer-checked:bg-gray-600"></div>
|
||
<div class="absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-all peer-checked:translate-x-5"></div>
|
||
</label>
|
||
</div>
|
||
|
||
<div class="flex items-center justify-between py-3 border-b border-gray-200">
|
||
<div>
|
||
<span class="font-medium">显示工具使用次数</span>
|
||
<p class="text-sm text-gray-500">在工具卡片上显示使用统计</p>
|
||
</div>
|
||
<label class="relative inline-flex items-center cursor-pointer">
|
||
<input type="checkbox" class="sr-only peer" checked>
|
||
<div class="w-11 h-6 bg-gray-200 rounded-full peer peer-checked:bg-gray-600"></div>
|
||
<div class="absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-all peer-checked:translate-x-5"></div>
|
||
</label>
|
||
</div>
|
||
|
||
<div class="flex items-center justify-between py-3 border-b border-gray-200">
|
||
<div>
|
||
<span class="font-medium">默认工具排序</span>
|
||
<p class="text-sm text-gray-500">选择工具列表的排序方式</p>
|
||
</div>
|
||
<select class="px-3 py-2 border border-gray-300 rounded-md text-sm">
|
||
<option>热门程度</option>
|
||
<option>最近使用</option>
|
||
<option>字母顺序</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 高级设置 -->
|
||
<div class="mb-8">
|
||
<h3 class="text-lg font-semibold mb-4">高级设置</h3>
|
||
<div class="flex items-center justify-between py-3 border-b border-gray-200">
|
||
<div>
|
||
<span class="font-medium">数据缓存</span>
|
||
<p class="text-sm text-gray-500">清除本地缓存数据</p>
|
||
</div>
|
||
<button class="px-3 py-1 text-sm bg-red-100 text-red-700 rounded-md hover:bg-red-200 transition-colors">
|
||
清除缓存
|
||
</button>
|
||
</div>
|
||
|
||
<div class="flex items-center justify-between py-3 border-b border-gray-200">
|
||
<div>
|
||
<span class="font-medium">导出设置</span>
|
||
<p class="text-sm text-gray-500">导出您的个人设置</p>
|
||
</div>
|
||
<button class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors">
|
||
导出
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex justify-end space-x-3">
|
||
<button class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium" id="cancel-settings">
|
||
取消
|
||
</button>
|
||
<button class="px-4 py-2 bg-gray-800 text-white rounded-md text-sm font-medium hover:bg-gray-700">
|
||
保存设置
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 关于面板 -->
|
||
<div id="about-panel" class="fixed inset-0 z-50 bg-black bg-opacity-50 flex items-center justify-center hidden">
|
||
<div class="bg-white rounded-lg shadow-xl w-full max-w-2xl">
|
||
<div class="flex items-center justify-between p-4 border-b border-gray-200">
|
||
<h2 class="text-xl font-bold">关于</h2>
|
||
<button id="close-about" class="text-gray-500 hover:text-gray-700">
|
||
<i class="fas fa-times"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="p-6">
|
||
<div class="flex justify-center mb-6">
|
||
<div class="w-20 h-20 bg-gray-900 rounded-lg flex items-center justify-center">
|
||
<i class="fas fa-tools text-white text-3xl"></i>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 class="text-center text-2xl font-bold mb-2">IT工具合集</h3>
|
||
<p class="text-center text-gray-500 mb-6">版本 1.0.0</p>
|
||
|
||
<div class="text-gray-700 mb-6">
|
||
<p class="mb-4">
|
||
IT工具合集是一个集成各类实用工具的在线平台，旨在帮助用户提高工作效率，解决技术难题。
|
||
我们提供多种工具，包括媒体处理、格式转换、开发辅助、网络工具等。
|
||
</p>
|
||
<p>
|
||
所有工具均免费使用，无需注册。如有建议或发现问题，请通过"反馈建议"功能与我们联系。
|
||
</p>
|
||
</div>
|
||
|
||
<div class="border-t border-gray-200 pt-6 mb-6">
|
||
<h4 class="font-semibold mb-3">团队成员</h4>
|
||
<div class="grid grid-cols-2 gap-4">
|
||
<div class="flex items-center">
|
||
<div class="flex-shrink-0 w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
|
||
<i class="fas fa-code text-blue-500"></i>
|
||
</div>
|
||
<div class="ml-3">
|
||
<p class="text-sm font-medium">Cursor生成</p>
|
||
<p class="text-xs text-gray-500">前端开发</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<div class="flex-shrink-0 w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
|
||
<i class="fas fa-server text-green-500"></i>
|
||
</div>
|
||
<div class="ml-3">
|
||
<p class="text-sm font-medium">Cursor生成</p>
|
||
<p class="text-xs text-gray-500">后端开发</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<div class="flex-shrink-0 w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center">
|
||
<i class="fas fa-paint-brush text-purple-500"></i>
|
||
</div>
|
||
<div class="ml-3">
|
||
<p class="text-sm font-medium">Cursor生成</p>
|
||
<p class="text-xs text-gray-500">UI/UX设计</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<div class="flex-shrink-0 w-8 h-8 bg-yellow-100 rounded-full flex items-center justify-center">
|
||
<i class="fas fa-tasks text-yellow-500"></i>
|
||
</div>
|
||
<div class="ml-3">
|
||
<p class="text-sm font-medium">Cursor生成</p>
|
||
<p class="text-xs text-gray-500">项目管理</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="border-t border-gray-200 pt-6 flex justify-center space-x-6">
|
||
<a href="#" class="text-gray-400 hover:text-gray-600">
|
||
<i class="fab fa-github text-xl"></i>
|
||
</a>
|
||
<a href="#" class="text-gray-400 hover:text-gray-600">
|
||
<i class="fab fa-weixin text-xl"></i>
|
||
</a>
|
||
<a href="#" class="text-gray-400 hover:text-gray-600">
|
||
<i class="fas fa-envelope text-xl"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-gray-50 px-6 py-4 text-center text-gray-500 text-sm rounded-b-lg">
|
||
© 2025 IT工具合集 | 版权所有
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="script.js"></script>
|
||
<script src="footer.js"></script>
|
||
<script>
|
||
// 侧边栏控制
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const sidebar = document.getElementById('sidebar');
|
||
const backdrop = document.getElementById('sidebar-backdrop');
|
||
const toggleBtn = document.getElementById('toggle-sidebar');
|
||
const closeBtn = document.getElementById('close-sidebar');
|
||
|
||
// 显示侧边栏
|
||
toggleBtn.addEventListener('click', function() {
|
||
sidebar.classList.remove('-translate-x-full');
|
||
backdrop.classList.remove('hidden');
|
||
document.body.classList.add('overflow-hidden');
|
||
});
|
||
|
||
// 隐藏侧边栏
|
||
function closeSidebar() {
|
||
sidebar.classList.add('-translate-x-full');
|
||
backdrop.classList.add('hidden');
|
||
document.body.classList.remove('overflow-hidden');
|
||
}
|
||
|
||
closeBtn.addEventListener('click', closeSidebar);
|
||
backdrop.addEventListener('click', closeSidebar);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |