309 lines
16 KiB
HTML
Executable File
309 lines
16 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>实用工具导航</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: '#165DFF',
|
|
secondary: '#00B42A',
|
|
accent: '#FF7D00',
|
|
neutral: '#1D2129',
|
|
'neutral-light': '#F2F3F5',
|
|
},
|
|
fontFamily: {
|
|
inter: ['Inter', 'system-ui', 'sans-serif'],
|
|
},
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style type="text/tailwindcss">
|
|
@layer utilities {
|
|
.content-auto {
|
|
content-visibility: auto;
|
|
}
|
|
.card-hover {
|
|
@apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
|
|
}
|
|
.category-title {
|
|
@apply text-xl font-bold mb-4 flex items-center text-neutral;
|
|
}
|
|
.tool-card {
|
|
@apply bg-white rounded-lg p-4 card-hover border border-gray-100;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50 font-inter min-h-screen">
|
|
<header class="bg-white shadow-sm sticky top-0 z-50">
|
|
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
|
|
<div class="flex items-center space-x-2">
|
|
<i class="fa fa-th-large text-primary text-2xl"></i>
|
|
<h1 class="text-xl font-bold text-neutral">实用工具导航</h1>
|
|
</div>
|
|
<div class="relative">
|
|
<input type="text" placeholder="搜索工具..." class="pl-10 pr-4 py-2 rounded-full border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/20 w-64 transition-all duration-300">
|
|
<i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="container mx-auto px-4 py-8">
|
|
<!-- 开发工具 -->
|
|
<section class="mb-12">
|
|
<h2 class="category-title">
|
|
<i class="fa fa-code text-primary mr-2"></i>
|
|
开发工具
|
|
</h2>
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
|
<a href="https://github.com" class="tool-card" target="_blank">
|
|
<div class="flex items-center mb-3">
|
|
<div class="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center text-primary">
|
|
<i class="fa fa-github"></i>
|
|
</div>
|
|
<h3 class="ml-3 font-semibold">GitHub</h3>
|
|
</div>
|
|
<p class="text-sm text-gray-600">代码托管与协作平台</p>
|
|
</a>
|
|
|
|
<a href="https://code.visualstudio.com" class="tool-card" target="_blank">
|
|
<div class="flex items-center mb-3">
|
|
<div class="w-10 h-10 rounded-lg bg-orange-100 flex items-center justify-center text-accent">
|
|
<i class="fa fa-terminal"></i>
|
|
</div>
|
|
<h3 class="ml-3 font-semibold">VS Code</h3>
|
|
</div>
|
|
<p class="text-sm text-gray-600">强大的开源代码编辑器</p>
|
|
</a>
|
|
|
|
<a href="https://www.mongodb.com" class="tool-card" target="_blank">
|
|
<div class="flex items-center mb-3">
|
|
<div class="w-10 h-10 rounded-lg bg-green-100 flex items-center justify-center text-secondary">
|
|
<i class="fa fa-database"></i>
|
|
</div>
|
|
<h3 class="ml-3 font-semibold">MongoDB</h3>
|
|
</div>
|
|
<p class="text-sm text-gray-600">NoSQL 数据库</p>
|
|
</a>
|
|
|
|
<a href="https://apifox.com/" class="tool-card" target="_blank">
|
|
<div class="flex items-center mb-3">
|
|
<div class="w-10 h-10 rounded-lg bg-purple-100 flex items-center justify-center text-purple-600">
|
|
<i class="fa fa-flask"></i>
|
|
</div>
|
|
<h3 class="ml-3 font-semibold">Apifox</h3>
|
|
</div>
|
|
<p class="text-sm text-gray-600">API 开发与测试工具</p>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 安全工具 -->
|
|
<section class="mb-12">
|
|
<h2 class="category-title">
|
|
<i class="fa fa-shield text-red-500 mr-2"></i>
|
|
安全工具
|
|
</h2>
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
|
<a href="https://www.virustotal.com" class="tool-card" target="_blank">
|
|
<div class="flex items-center mb-3">
|
|
<div class="w-10 h-10 rounded-lg bg-red-100 flex items-center justify-center text-red-600">
|
|
<i class="fa fa-bug"></i>
|
|
</div>
|
|
<h3 class="ml-3 font-semibold">VirusTotal</h3>
|
|
</div>
|
|
<p class="text-sm text-gray-600">多引擎文件安全扫描</p>
|
|
</a>
|
|
|
|
<a href="https://www.nmap.org" class="tool-card" target="_blank">
|
|
<div class="flex items-center mb-3">
|
|
<div class="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center text-primary">
|
|
<i class="fa fa-search"></i>
|
|
</div>
|
|
<h3 class="ml-3 font-semibold">Nmap</h3>
|
|
</div>
|
|
<p class="text-sm text-gray-600">网络扫描与安全审计</p>
|
|
</a>
|
|
|
|
<a href="https://www.wireshark.org" class="tool-card" target="_blank">
|
|
<div class="flex items-center mb-3">
|
|
<div class="w-10 h-10 rounded-lg bg-green-100 flex items-center justify-center text-secondary">
|
|
<i class="fa fa-wifi"></i>
|
|
</div>
|
|
<h3 class="ml-3 font-semibold">Wireshark</h3>
|
|
</div>
|
|
<p class="text-sm text-gray-600">网络协议分析工具</p>
|
|
</a>
|
|
|
|
<a href="https://haveibeenpwned.com" class="tool-card" target="_blank">
|
|
<div class="flex items-center mb-3">
|
|
<div class="w-10 h-10 rounded-lg bg-purple-100 flex items-center justify-center text-purple-600">
|
|
<i class="fa fa-lock"></i>
|
|
</div>
|
|
<h3 class="ml-3 font-semibold">Have I Been Pwned</h3>
|
|
</div>
|
|
<p class="text-sm text-gray-600">账号泄露查询</p>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 设计工具 -->
|
|
<section class="mb-12">
|
|
<h2 class="category-title">
|
|
<i class="fa fa-paint-brush text-accent mr-2"></i>
|
|
设计工具
|
|
</h2>
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
|
<a href="https://www.figma.com" class="tool-card" target="_blank">
|
|
<div class="flex items-center mb-3">
|
|
<div class="w-10 h-10 rounded-lg bg-red-100 flex items-center justify-center text-red-600">
|
|
<i class="fa fa-picture-o"></i>
|
|
</div>
|
|
<h3 class="ml-3 font-semibold">Figma</h3>
|
|
</div>
|
|
<p class="text-sm text-gray-600">矢量图形设计工具</p>
|
|
</a>
|
|
|
|
<a href="https://www.adobe.com/products/photoshop.html" class="tool-card" target="_blank">
|
|
<div class="flex items-center mb-3">
|
|
<div class="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center text-primary">
|
|
<i class="fa fa-image"></i>
|
|
</div>
|
|
<h3 class="ml-3 font-semibold">Adobe Photoshop</h3>
|
|
</div>
|
|
<p class="text-sm text-gray-600">专业图像处理软件</p>
|
|
</a>
|
|
|
|
<a href="https://www.canva.com" class="tool-card" target="_blank">
|
|
<div class="flex items-center mb-3">
|
|
<div class="w-10 h-10 rounded-lg bg-green-100 flex items-center justify-center text-secondary">
|
|
<i class="fa fa-font"></i>
|
|
</div>
|
|
<h3 class="ml-3 font-semibold">Canva</h3>
|
|
</div>
|
|
<p class="text-sm text-gray-600">在线设计平台</p>
|
|
</a>
|
|
|
|
<a href="https://www.sketch.com" class="tool-card" target="_blank">
|
|
<div class="flex items-center mb-3">
|
|
<div class="w-10 h-10 rounded-lg bg-purple-100 flex items-center justify-center text-purple-600">
|
|
<i class="fa fa-object-group"></i>
|
|
</div>
|
|
<h3 class="ml-3 font-semibold">Sketch</h3>
|
|
</div>
|
|
<p class="text-sm text-gray-600">界面设计工具</p>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 效率工具 -->
|
|
<section class="mb-12">
|
|
<h2 class="category-title">
|
|
<i class="fa fa-bolt text-secondary mr-2"></i>
|
|
效率工具
|
|
</h2>
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
|
<a href="https://trello.com" class="tool-card" target="_blank">
|
|
<div class="flex items-center mb-3">
|
|
<div class="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center text-primary">
|
|
<i class="fa fa-tasks"></i>
|
|
</div>
|
|
<h3 class="ml-3 font-semibold">Trello</h3>
|
|
</div>
|
|
<p class="text-sm text-gray-600">看板任务管理工具</p>
|
|
</a>
|
|
|
|
<a href="https://www.notion.so" class="tool-card" target="_blank">
|
|
<div class="flex items-center mb-3">
|
|
<div class="w-10 h-10 rounded-lg bg-orange-100 flex items-center justify-center text-accent">
|
|
<i class="fa fa-calendar"></i>
|
|
</div>
|
|
<h3 class="ml-3 font-semibold">Notion</h3>
|
|
</div>
|
|
<p class="text-sm text-gray-600">一体化工作空间</p>
|
|
</a>
|
|
|
|
<a href="https://slack.com" class="tool-card" target="_blank">
|
|
<div class="flex items-center mb-3">
|
|
<div class="w-10 h-10 rounded-lg bg-green-100 flex items-center justify-center text-secondary">
|
|
<i class="fa fa-users"></i>
|
|
</div>
|
|
<h3 class="ml-3 font-semibold">Slack</h3>
|
|
</div>
|
|
<p class="text-sm text-gray-600">团队沟通协作平台</p>
|
|
</a>
|
|
|
|
<a href="https://www.rescuetime.com" class="tool-card" target="_blank">
|
|
<div class="flex items-center mb-3">
|
|
<div class="w-10 h-10 rounded-lg bg-purple-100 flex items-center justify-center text-purple-600">
|
|
<i class="fa fa-clock-o"></i>
|
|
</div>
|
|
<h3 class="ml-3 font-semibold">RescueTime</h3>
|
|
</div>
|
|
<p class="text-sm text-gray-600">时间管理与效率追踪</p>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="footer py-12 border-t border-primary/20">
|
|
<div class="container mx-auto px-4">
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
|
|
<div>
|
|
<div class="flex items-center space-x-2 mb-4">
|
|
<span class="text-xl font-bold text-black">圆周云境</span>
|
|
</div>
|
|
<p class="text-gray-400 text-sm" >一切，为了梦，为了你</p>
|
|
<p class="text-gray-400 text-sm">本站由:<a href="rainyun.com" class="text-gray-400 text-sm"> 雨云 提供技术支持</a></p>
|
|
</div>
|
|
<div>
|
|
<h4 class="text-black font-bold mb-4">使用协议</h4>
|
|
<ul class="space-y-2">
|
|
<li><a href="./console/cookie.html" class="text-gray-400 hover:text-primary transition-colors">cookies政策</a></li>
|
|
<li><a href="./console/terms.html" class="text-gray-400 hover:text-primary transition-colors">隐私政策</a></li>
|
|
<li><a href="https://gitea.ccsnetwork.cn/CCSIT/ccswebsite/commits/branch/main" class="text-gray-400 hover:text-primary transition-colors">更新日志</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 class="text-black font-bold mb-4">社区</h4>
|
|
<ul class="space-y-2">
|
|
<li><a href="https://qm.qq.com/cgi-bin/qm/qr?k=GFwl1pDbLeeUGOh3kuVH0664EIdI-N5w&jump_from=webapi&authKey=UzTFWTWasv6xxgl7aU+kHAb80/Ps/gA4AWoJ3v5r4hfj07iDIXBl/sMfY+teTnf3" class="text-gray-400 hover:text-blue-400 transition-colors">QQ群</a></li>
|
|
<li><a href="https://space.bilibili.com/1382004137?spm_id_from=333.1007.0.0" class="text-gray-400 hover:text-blue-400 transition-colors">Bilibili</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="pt-8 border-t border-primary/10 text-center text-gray-500 text-sm">
|
|
Copyright © 2023-2025 CCSIT Network.All rights reserved.
|
|
© 圆周云境信息技术 保留所有权利。| 版本:2.8.9(submitID:NULL(未开源))<br>请遵守国家法律,本站可能与某些老旧浏览器不兼容 | 背景图片来源:《蔚蓝档案》侵权请联系删除
|
|
<br />ICP备案/许可证号：<a href="https://beian.miit.gov.cn/" target="_blank">赣ICP备2025065357号</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// 添加卡片悬停效果的交互逻辑
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const toolCards = document.querySelectorAll('.tool-card');
|
|
|
|
toolCards.forEach(card => {
|
|
card.addEventListener('mouseenter', function() {
|
|
this.classList.add('shadow-lg', '-translate-y-1');
|
|
});
|
|
|
|
card.addEventListener('mouseleave', function() {
|
|
this.classList.remove('shadow-lg', '-translate-y-1');
|
|
});
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|