diff --git a/index.html b/index.html
index 568da52..49ca0f3 100644
--- a/index.html
+++ b/index.html
@@ -188,6 +188,30 @@
margin-bottom: 20px;
}
+ .sort-wrapper {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 0 12px;
+ background: var(--bg-card);
+ border: 1px solid var(--border);
+ border-radius: 12px;
+ color: var(--text-muted);
+ }
+
+ .sort-select {
+ background: transparent;
+ border: none;
+ color: var(--text);
+ font-size: 14px;
+ padding: 12px 4px 12px 0;
+ cursor: pointer;
+ }
+
+ .sort-select:focus {
+ outline: none;
+ }
+
.search-input-wrapper {
flex: 1;
position: relative;
@@ -248,7 +272,7 @@
/* Tools Grid */
.tools-section {
- padding: 40px 0 80px;
+ padding: 30px 0 70px;
}
.section-header {
@@ -274,6 +298,7 @@
gap: 20px;
}
+
.tool-card {
background: var(--bg-card);
border: 1px solid var(--border);
@@ -332,6 +357,19 @@
gap: 4px;
}
+ .tool-updated {
+ font-size: 12px;
+ color: var(--text-muted);
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ margin-top: 6px;
+ }
+
+ .tool-updated i {
+ font-size: 12px;
+ }
+
.tool-description {
color: var(--text-muted);
font-size: 14px;
@@ -537,6 +575,13 @@
+
+
+
+
`;
+ const allButton = container.querySelector('[data-category="all"]');
+ allButton.addEventListener('click', () => selectCategory('all'));
toolsData.categories.forEach(cat => {
const btn = document.createElement('button');
@@ -661,7 +709,7 @@
}
function filterTools() {
- return toolsData.tools.filter(tool => {
+ const filtered = toolsData.tools.filter(tool => {
const matchesCategory = currentCategory === 'all' || tool.category === currentCategory;
const matchesSearch = !searchQuery ||
tool.name.toLowerCase().includes(searchQuery) ||
@@ -669,6 +717,11 @@
tool.tags.some(tag => tag.toLowerCase().includes(searchQuery));
return matchesCategory && matchesSearch;
});
+ const withTimestamp = (tool) => new Date(tool.updatedAt || tool.createdAt || 0).getTime();
+ if (sortOption === 'updated-asc') {
+ return filtered.sort((a, b) => withTimestamp(a) - withTimestamp(b));
+ }
+ return filtered.sort((a, b) => withTimestamp(b) - withTimestamp(a));
}
function renderTools() {
@@ -689,6 +742,7 @@
container.innerHTML = filteredTools.map(tool => {
const category = toolsData.categories.find(c => c.id === tool.category);
+ const updatedAt = tool.updatedAt || tool.createdAt || '未知';
return `
${tool.featured ? '精选' : ''}
@@ -699,6 +753,7 @@
${tool.description}
@@ -713,12 +768,18 @@
}).join('');
}
+
// Search functionality
document.getElementById('search-input').addEventListener('input', (e) => {
searchQuery = e.target.value.toLowerCase();
renderTools();
});
+ document.getElementById('sort-select').addEventListener('change', (e) => {
+ sortOption = e.target.value;
+ renderTools();
+ });
+
// Initialize
loadTools();
diff --git a/index.json b/index.json
index 73d269a..587a922 100644
--- a/index.json
+++ b/index.json
@@ -521,6 +521,206 @@
"updatedAt": "2025-12-23",
"featured": true,
"repo": "https://github.com/justhtmls/html-tools"
+ },
+ {
+ "id": "text-deduplicator",
+ "name": "文本去重工具",
+ "slug": "text-deduplicator",
+ "category": "text",
+ "tags": ["text", "dedupe", "cleanup", "list"],
+ "author": "JustHTMLs",
+ "authorUrl": "https://github.com/justhtmls",
+ "version": "1.0.0",
+ "description": "按行去重并保留原始顺序",
+ "longDescription": "文本去重工具支持按行去重、忽略大小写和移除空行,适合清理清单和名单。",
+ "icon": "🧹",
+ "color": "#10b981",
+ "entry": "tools/text-deduplicator/app.html",
+ "detail": "tools/text-deduplicator/index.html",
+ "createdAt": "2025-12-23",
+ "updatedAt": "2025-12-23",
+ "featured": true,
+ "repo": "https://github.com/justhtmls/html-tools"
+ },
+ {
+ "id": "text-sorter",
+ "name": "文本排序工具",
+ "slug": "text-sorter",
+ "category": "text",
+ "tags": ["text", "sorter", "list", "utility"],
+ "author": "JustHTMLs",
+ "authorUrl": "https://github.com/justhtmls",
+ "version": "1.0.0",
+ "description": "按行排序文本,支持数字排序",
+ "longDescription": "文本排序工具支持升序/降序、数字排序和去重,适合整理清单和列表。",
+ "icon": "📑",
+ "color": "#f59e0b",
+ "entry": "tools/text-sorter/app.html",
+ "detail": "tools/text-sorter/index.html",
+ "createdAt": "2025-12-23",
+ "updatedAt": "2025-12-23",
+ "featured": true,
+ "repo": "https://github.com/justhtmls/html-tools"
+ },
+ {
+ "id": "line-numberer",
+ "name": "行号添加器",
+ "slug": "line-numberer",
+ "category": "text",
+ "tags": ["text", "line", "number", "editor"],
+ "author": "JustHTMLs",
+ "authorUrl": "https://github.com/justhtmls",
+ "version": "1.0.0",
+ "description": "为文本自动添加行号",
+ "longDescription": "行号添加器可自定义起始值、步进和分隔符,适合代码与清单。",
+ "icon": "🔢",
+ "color": "#3b82f6",
+ "entry": "tools/line-numberer/app.html",
+ "detail": "tools/line-numberer/index.html",
+ "createdAt": "2025-12-23",
+ "updatedAt": "2025-12-23",
+ "featured": true,
+ "repo": "https://github.com/justhtmls/html-tools"
+ },
+ {
+ "id": "text-cleaner",
+ "name": "文本清理器",
+ "slug": "text-cleaner",
+ "category": "text",
+ "tags": ["text", "cleaner", "format", "utility"],
+ "author": "JustHTMLs",
+ "authorUrl": "https://github.com/justhtmls",
+ "version": "1.0.0",
+ "description": "清理文本中的空格与空行",
+ "longDescription": "文本清理器支持合并空格、删除空行并规范换行格式。",
+ "icon": "🧽",
+ "color": "#14b8a6",
+ "entry": "tools/text-cleaner/app.html",
+ "detail": "tools/text-cleaner/index.html",
+ "createdAt": "2025-12-23",
+ "updatedAt": "2025-12-23",
+ "featured": true,
+ "repo": "https://github.com/justhtmls/html-tools"
+ },
+ {
+ "id": "csv-to-json",
+ "name": "CSV 转 JSON",
+ "slug": "csv-to-json",
+ "category": "converter",
+ "tags": ["csv", "json", "converter", "table"],
+ "author": "JustHTMLs",
+ "authorUrl": "https://github.com/justhtmls",
+ "version": "1.0.0",
+ "description": "将 CSV 表格转换为 JSON",
+ "longDescription": "CSV 转 JSON 工具支持表头解析、分隔符设置和引号字段。",
+ "icon": "📄",
+ "color": "#6366f1",
+ "entry": "tools/csv-to-json/app.html",
+ "detail": "tools/csv-to-json/index.html",
+ "createdAt": "2025-12-23",
+ "updatedAt": "2025-12-23",
+ "featured": true,
+ "repo": "https://github.com/justhtmls/html-tools"
+ },
+ {
+ "id": "json-to-csv",
+ "name": "JSON 转 CSV",
+ "slug": "json-to-csv",
+ "category": "converter",
+ "tags": ["json", "csv", "converter", "export"],
+ "author": "JustHTMLs",
+ "authorUrl": "https://github.com/justhtmls",
+ "version": "1.0.0",
+ "description": "将 JSON 数组导出为 CSV",
+ "longDescription": "JSON 转 CSV 工具可自动生成表头并处理引号转义。",
+ "icon": "🧾",
+ "color": "#ec4899",
+ "entry": "tools/json-to-csv/app.html",
+ "detail": "tools/json-to-csv/index.html",
+ "createdAt": "2025-12-23",
+ "updatedAt": "2025-12-23",
+ "featured": true,
+ "repo": "https://github.com/justhtmls/html-tools"
+ },
+ {
+ "id": "url-parser",
+ "name": "URL 解析器",
+ "slug": "url-parser",
+ "category": "developer",
+ "tags": ["url", "parser", "developer", "web"],
+ "author": "JustHTMLs",
+ "authorUrl": "https://github.com/justhtmls",
+ "version": "1.0.0",
+ "description": "解析 URL 的各个组成部分",
+ "longDescription": "URL 解析器可拆分协议、域名、路径、参数和锚点。",
+ "icon": "🌐",
+ "color": "#0ea5e9",
+ "entry": "tools/url-parser/app.html",
+ "detail": "tools/url-parser/index.html",
+ "createdAt": "2025-12-23",
+ "updatedAt": "2025-12-23",
+ "featured": true,
+ "repo": "https://github.com/justhtmls/html-tools"
+ },
+ {
+ "id": "contrast-checker",
+ "name": "颜色对比度检测",
+ "slug": "contrast-checker",
+ "category": "developer",
+ "tags": ["color", "contrast", "accessibility", "design"],
+ "author": "JustHTMLs",
+ "authorUrl": "https://github.com/justhtmls",
+ "version": "1.0.0",
+ "description": "检测前景与背景颜色对比度",
+ "longDescription": "颜色对比度检测基于 WCAG 标准并给出 AA/AAA 结果。",
+ "icon": "🌓",
+ "color": "#8b5cf6",
+ "entry": "tools/contrast-checker/app.html",
+ "detail": "tools/contrast-checker/index.html",
+ "createdAt": "2025-12-23",
+ "updatedAt": "2025-12-23",
+ "featured": true,
+ "repo": "https://github.com/justhtmls/html-tools"
+ },
+ {
+ "id": "password-strength",
+ "name": "密码强度检测",
+ "slug": "password-strength",
+ "category": "utility",
+ "tags": ["password", "security", "checker", "utility"],
+ "author": "JustHTMLs",
+ "authorUrl": "https://github.com/justhtmls",
+ "version": "1.0.0",
+ "description": "检测密码强度和安全性",
+ "longDescription": "密码强度检测统计长度与字符类型并给出改进建议。",
+ "icon": "🛡️",
+ "color": "#ef4444",
+ "entry": "tools/password-strength/app.html",
+ "detail": "tools/password-strength/index.html",
+ "createdAt": "2025-12-23",
+ "updatedAt": "2025-12-23",
+ "featured": true,
+ "repo": "https://github.com/justhtmls/html-tools"
+ },
+ {
+ "id": "date-diff",
+ "name": "日期差值计算器",
+ "slug": "date-diff",
+ "category": "utility",
+ "tags": ["date", "time", "calculator", "utility"],
+ "author": "JustHTMLs",
+ "authorUrl": "https://github.com/justhtmls",
+ "version": "1.0.0",
+ "description": "计算两个日期之间的差值",
+ "longDescription": "日期差值计算器输出天、小时、分钟和秒等多维度结果。",
+ "icon": "📆",
+ "color": "#22c55e",
+ "entry": "tools/date-diff/app.html",
+ "detail": "tools/date-diff/index.html",
+ "createdAt": "2025-12-23",
+ "updatedAt": "2025-12-23",
+ "featured": true,
+ "repo": "https://github.com/justhtmls/html-tools"
}
],
"categories": [
diff --git a/tools/contrast-checker/app.html b/tools/contrast-checker/app.html
new file mode 100644
index 0000000..545f736
--- /dev/null
+++ b/tools/contrast-checker/app.html
@@ -0,0 +1,256 @@
+
+
+
+
+
+
+ 颜色对比度检测
+
+
+
+
+
+
+
+
+
+
示例文本 ABC 123
+
对比度:--
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/tools/contrast-checker/index.html b/tools/contrast-checker/index.html
new file mode 100644
index 0000000..f6658fb
--- /dev/null
+++ b/tools/contrast-checker/index.html
@@ -0,0 +1,145 @@
+
+
+
+
+
+
+ 颜色对比度检测 - JustHTMLs
+
+
+
+
+
+
+
+
关于这个工具
+
颜色对比度检测基于 WCAG 标准,适合设计师和前端开发者。
+
+
功能特点
+
+ - 计算 WCAG 对比度
+ - 显示 AA/AAA 通过情况
+ - 实时预览前景/背景
+ - 一键交换颜色
+
+
+
+
+
+
+
+
+
diff --git a/tools/csv-to-json/app.html b/tools/csv-to-json/app.html
new file mode 100644
index 0000000..8d15267
--- /dev/null
+++ b/tools/csv-to-json/app.html
@@ -0,0 +1,281 @@
+
+
+
+
+
+
+ CSV 转 JSON
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
CSV 输入
+
+
+
+
JSON 输出
+
+
+
+
+
+
+
+
+
+
+
支持双引号字段和换行。
+
+
+
+
+
+
diff --git a/tools/csv-to-json/index.html b/tools/csv-to-json/index.html
new file mode 100644
index 0000000..4bea274
--- /dev/null
+++ b/tools/csv-to-json/index.html
@@ -0,0 +1,145 @@
+
+
+
+
+
+
+ CSV 转 JSON - JustHTMLs
+
+
+
+
+
+
+
+
关于这个工具
+
CSV 转 JSON 工具支持表头解析,适合快速把表格数据转换为结构化 JSON。
+
+
功能特点
+
+ - 支持表头解析
+ - 自定义分隔符
+ - 兼容双引号字段
+ - 输出格式化 JSON
+
+
+
+
+
+
+
+
+
diff --git a/tools/date-diff/app.html b/tools/date-diff/app.html
new file mode 100644
index 0000000..ce96237
--- /dev/null
+++ b/tools/date-diff/app.html
@@ -0,0 +1,217 @@
+
+
+
+
+
+
+ 日期差值计算器
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
请选择开始和结束时间。
+
+
+
+
+
+
diff --git a/tools/date-diff/index.html b/tools/date-diff/index.html
new file mode 100644
index 0000000..0222e39
--- /dev/null
+++ b/tools/date-diff/index.html
@@ -0,0 +1,145 @@
+
+
+
+
+
+
+ 日期差值计算器 - JustHTMLs
+
+
+
+
+
+
+
+
关于这个工具
+
日期差值计算器支持日期与时间计算,输出多种维度的结果。
+
+
功能特点
+
+ - 计算天/小时/分钟/秒
+ - 支持时间交换
+ - 显示差值方向
+ - 本地计算无需上传
+
+
+
+
+
+
+
+
+
diff --git a/tools/json-to-csv/app.html b/tools/json-to-csv/app.html
new file mode 100644
index 0000000..5159f6c
--- /dev/null
+++ b/tools/json-to-csv/app.html
@@ -0,0 +1,248 @@
+
+
+
+
+
+
+ JSON 转 CSV
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
JSON 输入
+
+
+
+
CSV 输出
+
+
+
+
+
+
+
+
+
+
+
输入 JSON 数组即可转换。
+
+
+
+
+
+
diff --git a/tools/json-to-csv/index.html b/tools/json-to-csv/index.html
new file mode 100644
index 0000000..3967545
--- /dev/null
+++ b/tools/json-to-csv/index.html
@@ -0,0 +1,145 @@
+
+
+
+
+
+
+ JSON 转 CSV - JustHTMLs
+
+
+
+
+
+
+
+
关于这个工具
+
JSON 转 CSV 工具可将数组数据导出为 CSV,方便在表格软件中使用。
+
+
功能特点
+
+ - 解析 JSON 数组
+ - 自动生成表头
+ - 支持自定义分隔符
+ - 自动处理引号转义
+
+
+
+
+
+
+
+
+
diff --git a/tools/line-numberer/app.html b/tools/line-numberer/app.html
new file mode 100644
index 0000000..5232b74
--- /dev/null
+++ b/tools/line-numberer/app.html
@@ -0,0 +1,220 @@
+
+
+
+
+
+
+ 行号添加器
+
+
+
+
+
+
+
+
diff --git a/tools/line-numberer/index.html b/tools/line-numberer/index.html
new file mode 100644
index 0000000..9697f17
--- /dev/null
+++ b/tools/line-numberer/index.html
@@ -0,0 +1,145 @@
+
+
+
+
+
+
+ 行号添加器 - JustHTMLs
+
+
+
+
+
+
+
+
关于这个工具
+
行号添加器让文本阅读与引用更清晰,适合代码片段和长文清单。
+
+
功能特点
+
+ - 自定义起始行号与步进
+ - 支持补零位数
+ - 可跳过空行
+ - 分隔符可自定义
+
+
+
+
+
+
+
+
+
diff --git a/tools/password-strength/app.html b/tools/password-strength/app.html
new file mode 100644
index 0000000..4faf83c
--- /dev/null
+++ b/tools/password-strength/app.html
@@ -0,0 +1,224 @@
+
+
+
+
+
+
+ 密码强度检测
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
请先输入密码
+
+
+
+
+
+
+
+
+
+
diff --git a/tools/password-strength/index.html b/tools/password-strength/index.html
new file mode 100644
index 0000000..172b0c5
--- /dev/null
+++ b/tools/password-strength/index.html
@@ -0,0 +1,145 @@
+
+
+
+
+
+
+ 密码强度检测 - JustHTMLs
+
+
+
+
+
+
+
+
关于这个工具
+
密码强度检测在本地完成分析,帮助你优化密码强度。
+
+
功能特点
+
+ - 检测长度与字符类型
+ - 估算熵值
+ - 强度等级提示
+ - 给出改进建议
+
+
+
+
+
+
+
+
+
diff --git a/tools/text-cleaner/app.html b/tools/text-cleaner/app.html
new file mode 100644
index 0000000..06fe024
--- /dev/null
+++ b/tools/text-cleaner/app.html
@@ -0,0 +1,206 @@
+
+
+
+
+
+
+ 文本清理器
+
+
+
+
+
+
+
+
diff --git a/tools/text-cleaner/index.html b/tools/text-cleaner/index.html
new file mode 100644
index 0000000..9a6aafa
--- /dev/null
+++ b/tools/text-cleaner/index.html
@@ -0,0 +1,145 @@
+
+
+
+
+
+
+ 文本清理器 - JustHTMLs
+
+
+
+
+
+
+
+
关于这个工具
+
文本清理器帮助你快速整理粘贴的内容,减少格式噪音。
+
+
功能特点
+
+ - 合并多余空格
+ - 删除空行或合并空行
+ - 统一换行格式
+ - 适合清洗杂乱文本
+
+
+
+
+
+
+
+
+
diff --git a/tools/text-deduplicator/app.html b/tools/text-deduplicator/app.html
new file mode 100644
index 0000000..a4e66f7
--- /dev/null
+++ b/tools/text-deduplicator/app.html
@@ -0,0 +1,222 @@
+
+
+
+
+
+
+ 文本去重工具
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
原始文本
+
+
+
+
去重结果
+
+
+
+
+
+
+
+
+
+
+
+ 总行数:0
+ 唯一行数:0
+ 已移除:0
+
+
+
+
+
+
+
diff --git a/tools/text-deduplicator/index.html b/tools/text-deduplicator/index.html
new file mode 100644
index 0000000..65e3a6f
--- /dev/null
+++ b/tools/text-deduplicator/index.html
@@ -0,0 +1,145 @@
+
+
+
+
+
+
+ 文本去重工具 - JustHTMLs
+
+
+
+
+
+
+
+
关于这个工具
+
文本去重工具可以帮助你快速清理重复内容,适合名单、关键词、清单等场景。
+
+
功能特点
+
+ - 按行去重保持顺序
+ - 支持忽略大小写
+ - 可移除空行与空格
+ - 一键复制结果
+
+
+
+
+
+
+
+
+
diff --git a/tools/text-sorter/app.html b/tools/text-sorter/app.html
new file mode 100644
index 0000000..86301d1
--- /dev/null
+++ b/tools/text-sorter/app.html
@@ -0,0 +1,217 @@
+
+
+
+
+
+
+ 文本排序工具
+
+
+
+
+
+
+
+
diff --git a/tools/text-sorter/index.html b/tools/text-sorter/index.html
new file mode 100644
index 0000000..1990850
--- /dev/null
+++ b/tools/text-sorter/index.html
@@ -0,0 +1,145 @@
+
+
+
+
+
+
+ 文本排序工具 - JustHTMLs
+
+
+
+
+
+
+
+
关于这个工具
+
文本排序工具支持按行排序,可用于整理名单、选项、数据等。
+
+
功能特点
+
+ - 升序/降序排序
+ - 支持数字排序
+ - 可去重与移除空行
+ - 适用于各种清单
+
+
+
+
+
+
+
+
+
diff --git a/tools/timestamp-converter/app.html b/tools/timestamp-converter/app.html
index 731c394..c2fd076 100644
--- a/tools/timestamp-converter/app.html
+++ b/tools/timestamp-converter/app.html
@@ -268,7 +268,7 @@
const timestampMs = now;
document.getElementById('current-timestamp').textContent = timestampSeconds;
- document.getElementById('current-datetime').textContent = formatDateTime(now);
+ document.getElementById('current-datetime').textContent = formatDateTime(timestampMs, true);
}
// 格式化日期时间
diff --git a/tools/url-parser/app.html b/tools/url-parser/app.html
new file mode 100644
index 0000000..10f2f2d
--- /dev/null
+++ b/tools/url-parser/app.html
@@ -0,0 +1,229 @@
+
+
+
+
+
+
+ URL 解析器
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
输入 URL 后点击解析。
+
+
+
+
+
+
diff --git a/tools/url-parser/index.html b/tools/url-parser/index.html
new file mode 100644
index 0000000..7a7b3c2
--- /dev/null
+++ b/tools/url-parser/index.html
@@ -0,0 +1,145 @@
+
+
+
+
+
+
+ URL 解析器 - JustHTMLs
+
+
+
+
+
+
+
+
关于这个工具
+
URL 解析器可帮助你快速查看协议、域名、路径、参数和锚点。
+
+
功能特点
+
+ - 解析协议、域名、端口
+ - 展示路径与参数
+ - 自动补全协议
+ - 参数表格展示
+
+
+
+
+
+
+
+
+