-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
227 lines (195 loc) · 8.97 KB
/
Copy pathindex.html
File metadata and controls
227 lines (195 loc) · 8.97 KB
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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>DevTools - 免费在线开发者工具 | JSON格式化、图片压缩、二维码生成</title>
<meta name="description" content="免费在线开发者工具集合：JSON格式化验证、图片压缩、二维码生成、密码生成、Base64编解码。无需注册，完全免费，浏览器本地处理保障隐私。">
<meta name="keywords" content="在线工具,JSON格式化,图片压缩,二维码生成,密码生成,Base64,开发者工具">
<meta property="og:title" content="DevTools - 免费在线开发者工具">
<meta property="og:description" content="JSON格式化、图片压缩、二维码生成等免费在线工具，无需注册，本地处理保障隐私。">
<meta property="og:type" content="website">
<link rel="canonical" href="https://HD1019.github.io/devtoolhub/">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="nav">
<a href="/devtoolhub/" class="nav-logo">🛠 <span>Dev</span>Tools</a>
<ul class="nav-links">
<li><a href="/devtoolhub/">首页</a></li>
<li><a href="/devtoolhub/#tools">工具</a></li>
<li><a href="/devtoolhub/#about">关于</a></li>
</ul>
</nav>
<header class="hero">
<h1>开发者<span>常用工具</span>，一个站搞定</h1>
<p>JSON格式化、图片压缩、二维码生成… 所有工具免费使用，浏览器本地处理，不上传任何数据。</p>
<div class="search-wrap">
<input type="text" class="search-input" id="search" placeholder="🔍 搜索工具…（例如：json、图片、二维码）" autocomplete="off">
</div>
</header>
<main class="section" id="tools">
<h2 class="section-title">📦 全部工具</h2>
<div class="tool-grid" id="toolGrid">
<a href="tools/json-formatter/" class="tool-card">
<div class="tool-card-icon">📋</div>
<h3>JSON 格式化 & 验证</h3>
<p>格式化压缩JSON、语法校验、一键美化或压缩。开发者日常必备。</p>
</a>
<a href="tools/image-compressor/" class="tool-card">
<div class="tool-card-icon">🖼</div>
<h3>图片压缩</h3>
<p>拖拽图片即可压缩，可调质量。纯浏览器本地处理，图片不会上传到服务器。</p>
</a>
<a href="tools/qr-code/" class="tool-card">
<div class="tool-card-icon">📱</div>
<h3>二维码生成器</h3>
<p>输入文本或网址，一键生成二维码。支持下载PNG，可调尺寸。</p>
</a>
<a href="tools/password-generator/" class="tool-card">
<div class="tool-card-icon">🔐</div>
<h3>密码生成器</h3>
<p>生成强密码：可调长度、字符类型。支持一键复制，安全随机。</p>
</a>
<a href="tools/base64/" class="tool-card">
<div class="tool-card-icon">🔣</div>
<h3>Base64 编解码</h3>
<p>文本与Base64互转、文件转Base64。支持一键复制结果。</p>
</a>
<a href="tools/uuid-generator/" class="tool-card">
<div class="tool-card-icon">🆔</div>
<h3>UUID 生成器</h3>
<p>一键生成UUID v4标识符，支持批量生成。数据库主键、Token必备。</p>
</a>
<a href="tools/url-encoder/" class="tool-card">
<div class="tool-card-icon">🔗</div>
<h3>URL 编解码</h3>
<p>URL Encode/Decode一键转换，支持完整URI组件编码。</p>
</a>
<a href="tools/color-converter/" class="tool-card">
<div class="tool-card-icon">🎨</div>
<h3>颜色转换器</h3>
<p>HEX/RGB/HSL三种格式互转，支持取色器和实时预览。</p>
</a>
<a href="tools/markdown-preview/" class="tool-card">
<div class="tool-card-icon">📝</div>
<h3>Markdown 预览器</h3>
<p>实时预览Markdown渲染效果，支持GitHub风格语法。</p>
</a>
<a href="tools/text-diff/" class="tool-card">
<div class="tool-card-icon">📊</div>
<h3>文本差异对比</h3>
<p>逐行比对两段文本差异，高亮增删改。代码审查、版本对比。</p>
</a>
<a href="tools/word-counter/" class="tool-card">
<div class="tool-card-icon">📊</div>
<h3>字数统计</h3>
<p>中英文混合数字数、字符数、行数、段落数。实时统计，写作必备。</p>
</a>
<a href="tools/timestamp-converter/" class="tool-card">
<div class="tool-card-icon">⏱</div>
<h3>时间戳转换</h3>
<p>Unix时间戳↔日期互转，支持秒/毫秒。实时显示当前时间戳。</p>
</a>
<a href="tools/html-encoder/" class="tool-card">
<div class="tool-card-icon">🏷</div>
<h3>HTML实体编码</h3>
<p>HTML特殊字符转义/反转义。<>&一键转换，防XSS。</p>
</a>
<a href="tools/json-to-csv/" class="tool-card">
<div class="tool-card-icon">📄</div>
<h3>JSON 转 CSV</h3>
<p>JSON对象数组一键转CSV表格，支持下载。可直接导入Excel。</p>
</a>
<a href="tools/lorem-ipsum/" class="tool-card">
<div class="tool-card-icon">📝</div>
<h3>Lorem Ipsum 生成器</h3>
<p>生成占位文本，支持拉丁文和中文乱数假文。设计稿填充必备。</p>
</a>
<a href="tools/css-minifier/" class="tool-card">
<div class="tool-card-icon">🎨</div>
<h3>CSS 压缩 & 格式化</h3>
<p>CSS代码一键压缩去除空格注释，或格式化美化。部署前优化必备。</p>
</a>
<a href="tools/js-minifier/" class="tool-card">
<div class="tool-card-icon">⚡</div>
<h3>JS 压缩 & 格式化</h3>
<p>JavaScript代码压缩与美化。去除注释空格，优化加载速度。</p>
</a>
<a href="tools/color-palette/" class="tool-card">
<div class="tool-card-icon">🌈</div>
<h3>调色板生成器</h3>
<p>选一个颜色，自动生成互补色、类似色等5种配色方案。UI设计必备。</p>
</a>
<a href="tools/cron-parser/" class="tool-card">
<div class="tool-card-icon">⏰</div>
<h3>Cron 表达式解析</h3>
<p>输入Cron表达式，查看人类可读描述和未来执行时间。</p>
</a>
<a href="tools/http-status-checker/" class="tool-card">
<div class="tool-card-icon">📡</div>
<h3>HTTP 状态码参考</h3>
<p>1xx-5xx全部状态码含义速查。SEO相关状态码特别标注。</p>
</a>
<a href="tools/regex-tester/" class="tool-card">
<div class="tool-card-icon">🔍</div>
<h3>正则表达式测试器</h3>
<p>输入正则和测试文本，实时高亮匹配结果。支持分组捕获和替换。</p>
</a>
<a href="tools/hash-generator/" class="tool-card">
<div class="tool-card-icon">🔐</div>
<h3>哈希生成器</h3>
<p>MD5/SHA-1/SHA-256/SHA-512一键生成。Web Crypto API纯本地计算。</p>
</a>
<a href="tools/number-base-converter/" class="tool-card">
<div class="tool-card-icon">🔢</div>
<h3>进制转换器</h3>
<p>二进制/八进制/十进制/十六进制互转。程序员计算器必备。</p>
</a>
<a href="tools/url-parser/" class="tool-card">
<div class="tool-card-icon">🔗</div>
<h3>URL 解析器</h3>
<p>一键解析网址：协议、域名、端口、路径、参数提取。</p>
</a>
</div>
</main>
<div class="ad-slot">
<!-- AdSense placeholder - 待流量达标后接入 -->
广告位 · 流量达标后接入 Google AdSense
</div>
<section class="section" id="about">
<h2 class="section-title">💡 为什么用 DevTools？</h2>
<div class="tool-grid">
<div class="tool-card" style="cursor:default">
<div class="tool-card-icon">🔒</div>
<h3>隐私安全</h3>
<p>所有处理在浏览器本地完成，数据不上传服务器。图片、代码、文本都不会离开你的电脑。</p>
</div>
<div class="tool-card" style="cursor:default">
<div class="tool-card-icon">⚡</div>
<h3>极速加载</h3>
<p>纯静态页面，无框架开销。首次加载即用，无需等待。</p>
</div>
<div class="tool-card" style="cursor:default">
<div class="tool-card-icon">🆓</div>
<h3>完全免费</h3>
<p>所有工具永久免费，无需注册、无需登录。打开即用。</p>
</div>
</div>
</section>
<footer class="footer">
<p>© 2026 <a href="/devtoolhub/">DevTools</a> · 所有工具免费使用 · 浏览器本地处理 · 数据不上传</p>
<p style="margin-top:.5rem"><a href="/devtoolhub/blog/">博客</a> · <a href="/devtoolhub/products/developer-launch-kit/">开发者工具包</a> · <a href="/devtoolhub/sitemap.xml">Sitemap</a></p>
</footer>
<script>
// Simple client-side search filter
document.getElementById('search').addEventListener('input', function(e){
const q = e.target.value.toLowerCase();
document.querySelectorAll('.tool-card').forEach(card => {
const txt = card.textContent.toLowerCase();
card.style.display = txt.includes(q) ? '' : 'none';
});
});
</script>
</body>
</html>