-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
64 lines (62 loc) · 3.83 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>工具站导航</title>
<link href="./assets/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
<div id="app" class="container mx-auto py-8">
<h1 class="text-3xl font-semibold text-center mb-8">工具站导航</h1>
<div class="mb-8">
<input type="text" v-model="searchTerm" placeholder="输入关键字搜索" class="w-full p-3 border border-gray-300 rounded-md">
</div>
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-8 gap-4">
<div v-for="(tool, index) in filteredTools" :key="index" class="group relative overflow-hidden bg-white rounded-md shadow-md hover:shadow-lg transition duration-300 ease-in-out">
<a :href="tool.link">
<img :src="tool.image" :alt="tool.name" class="w-full h-32 object-cover group-hover:scale-105 transition duration-300 ease-in-out">
<div class="p-1 bg-white bg-opacity-90 absolute bottom-0 left-0 w-full">
<p class="font-semibold text-gray-800 truncate flex items-center justify-center" >{{ tool.name }}</p>
</div>
</a>
</div>
</div>
<p v-if="filteredTools.length === 0" class="text-center mt-8 text-gray-500">未找到匹配的工具</p>
</div>
<script src="./assets/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
searchTerm: '',
tools: [
{ name: "爱心树", image: "assets/image.png", link: "love1.html" },
{ name: "表白爱心", image: "assets/image.png", link: "love2.html" },
{ name: "关键字匹配校验工具", image: "assets/image.png", link: "Log_keyword_hit.html" },
{ name: "日志多色过滤高亮工具", image: "assets/image.png", link: "Log_Multi-Keyword_Filtering_Highlighting_Script_Generator.html" },
{ name: "字母匹配游戏", image: "assets/image.png", link: "Alphabet_matching.html" },
{ name: "点击红框游戏", image: "assets/image.png", link: "Red_square.html" },
{ name: "舒尔特方格游戏", image: "assets/image.png", link: "Schulte_square.html" },
{ name: "Ctool开发工具箱", image: "https://ctool.dev/icon/icon_512.png", link: "https://ctool.dev/tool.html#/tool/hash?category=encryption" },
{ name: "Wifi连接卡", image: "https://wificard.io/images/wifi.ico", link: "https://wificard.io/" },
{ name: "离线二维码生成", image: "assets/image.png", link: "qrCode.html" },
{ name: "根据地址获取街道名称", image: "assets/image.png", link: "https://scorpionfree98.github.io/fetch_address_detail/Geocoder.html" },
{ name: "在线图片压缩", image: "https://tinypng.com/images/apple-touch-icon.png", link: "https://tinypng.com/" },
{ name: "Nginx在线配置工具", image: "https://www.digitalocean.com/_next/static/media/android-chrome-192x192.f09059d8.png", link: "https://www.digitalocean.com/community/tools/nginx" },
{ name: "算法可视化", image: "https://algorithm-visualizer.org/favicon.png", link: "https://algorithm-visualizer.org/" },
{ name: "Yaml转Properties", image: "assets/image.png", link: "https://upendra-thunuguntla.github.io/mule-yaml-tools/index.html" },
{ name: "PDF转Markdown", image: "https://pdf2md.morethan.io/favicons/favicon.ico", link: "https://pdf2md.morethan.io/" },
{ name: "CyberChef", image: "https://gchq.github.io/CyberChef/assets/aecc661b69309290f600.ico", link: "https://gchq.github.io/CyberChef" },
{ name: "特殊符号", image: "https://cn.piliapp.com/favicon.ico", link: "https://cn.piliapp.com/symbol/" },
]
},
computed: {
filteredTools() {
return this.tools.filter(tool => tool.name.toLowerCase().includes(this.searchTerm.toLowerCase()));
}
}
});
</script>
</body>
</html>