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.name}
${category?.icon || ''} ${category?.name || '未分类'}
+
${updatedAt}
${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 @@ + + + + + + + 颜色对比度检测 + + + +
+
+

颜色对比度检测

+

符合 WCAG 标准的对比度计算

+
+ +
+
+
+ + + +
+
+ + + +
+
+ +
示例文本 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

+

支持自定义分隔符、带表头解析

+
+ +
+
+ + +
+ +
+
+

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

+
+ +
+

关于这个工具

+

CSV 转 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 输入

+ +
+
+

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

+

导出可直接打开的表格文件

+
+ +
+

关于这个工具

+

JSON 转 CSV 工具可将数组数据导出为 CSV,方便在表格软件中使用。

+ +

功能特点

+ + +
+ 开始使用 + 查看源码 + 返回首页 +
+
+ +
+

快速预览

+
+ +
+
+
+ + 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 解析器

    +

    快速拆分协议、域名、路径和参数

    +
    + +
    +
    + + + +
    + +
    + + + + + + + + + + + +
    输入 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 解析器

    +

    拆分 URL 的各个组成部分

    +
    + +
    +

    关于这个工具

    +

    URL 解析器可帮助你快速查看协议、域名、路径、参数和锚点。

    + +

    功能特点

    + + +
    + 开始使用 + 查看源码 + 返回首页 +
    +
    + +
    +

    快速预览

    +
    + +
    +
    +
    + +