Skip to content

Commit 79327b6

Browse files
xindoosisyphus-dev-ai
xindoo
and
sisyphus-dev-ai
committed
优化其他工具页面
Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
1 parent 25787a9 commit 79327b6

16 files changed

Lines changed: 431 additions & 223 deletions

‎static/tools/audio-visualization.html‎

Lines changed: 7 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -11,21 +11,19 @@
1111
#waveform {
1212
width: 100%;
1313
height: 220px;
14-
background: rgba(255, 255, 255, 0.4);
15-
backdrop-filter: blur(8px);
16-
-webkit-backdrop-filter: blur(8px);
17-
border: 1px solid rgba(148, 163, 184, 0.3);
18-
border-radius: 12px;
14+
background: var(--surface-hover);
15+
border: 1px solid var(--border);
16+
border-radius: var(--border-radius);
1917
overflow: hidden;
2018
position: relative;
21-
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
19+
box-shadow: 0 1px 3px var(--shadow-color);
2220
}
2321

2422
#loading {
2523
text-align: center;
26-
color: #64748B;
24+
color: var(--text-secondary);
2725
margin-top: 12px;
28-
font-size: 0.95em;
26+
font-size: 0.9em;
2927
min-height: 24px;
3028
font-weight: 500;
3129
}
@@ -37,12 +35,6 @@
3735
gap: 14px;
3836
}
3937

40-
.play-button {
41-
width: 100%;
42-
padding: 16px;
43-
font-size: 1.05em;
44-
}
45-
4638
.tool-input-with-button {
4739
display: flex;
4840
gap: 12px;
@@ -76,7 +68,7 @@ <h1>音频波形可视化</h1>
7668

7769
<!-- 播放按钮 -->
7870
<div class="tool-controls">
79-
<button id="playBtn" class="tool-button play-button" onclick="togglePlay()" disabled>播放 / 暂停</button>
71+
<button id="playBtn" class="tool-button" onclick="togglePlay()" disabled style="width:100%;">播放 / 暂停</button>
8072
</div>
8173
</div>
8274

‎static/tools/color-picker.html‎

Lines changed: 23 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<html lang="zh-CN">
33
<head>
44
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
56
<title>颜色选择器与转换器</title>
67
<link rel="stylesheet" href="../css/style.css">
78
<style>
@@ -16,28 +17,36 @@
1617
.color-input-group {
1718
display: flex;
1819
gap: 10px;
19-
margin-bottom: 15px;
20+
margin-bottom: 12px;
2021
align-items: center;
2122
}
22-
.color-input-group label {
23-
min-width: 80px;
24-
font-weight: 500;
23+
.color-input-group .color-format-label {
24+
min-width: 50px;
25+
font-weight: 600;
26+
font-size: 0.9em;
27+
font-family: 'Inter', sans-serif;
28+
color: var(--text-primary);
29+
letter-spacing: 0.2px;
30+
margin-bottom: 0;
2531
}
2632
.copy-icon {
2733
cursor: pointer;
2834
width: 28px;
2935
height: 28px;
30-
fill: #3B82F6;
36+
fill: var(--primary);
3137
padding: 6px;
32-
background: rgba(255, 255, 255, 0.9);
33-
border-radius: 8px;
34-
transition: all 150ms ease;
35-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
38+
background: var(--surface);
39+
border: 1px solid var(--border);
40+
border-radius: var(--border-radius-sm);
41+
transition: all var(--transition-fast);
42+
box-shadow: 0 1px 2px var(--shadow-color);
43+
box-sizing: border-box;
44+
flex-shrink: 0;
3645
}
3746
.copy-icon:hover {
38-
fill: #2563EB;
47+
fill: var(--primary-dark);
3948
transform: scale(1.1);
40-
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
49+
box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
4150
}
4251
#color-picker {
4352
width: 100%;
@@ -64,23 +73,23 @@ <h1>颜色选择器与转换器</h1>
6473
<div class="color-preview" id="color-preview"></div>
6574

6675
<div class="color-input-group">
67-
<label>HEX:</label>
76+
<label class="color-format-label">HEX:</label>
6877
<input type="text" id="hex-input" class="tool-input" placeholder="#000000">
6978
<svg class="copy-icon" onclick="copyToClipboard('hex-input')" viewBox="0 0 24 24">
7079
<path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
7180
</svg>
7281
</div>
7382

7483
<div class="color-input-group">
75-
<label>RGB:</label>
84+
<label class="color-format-label">RGB:</label>
7685
<input type="text" id="rgb-input" class="tool-input" placeholder="rgb(0, 0, 0)">
7786
<svg class="copy-icon" onclick="copyToClipboard('rgb-input')" viewBox="0 0 24 24">
7887
<path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
7988
</svg>
8089
</div>
8190

8291
<div class="color-input-group">
83-
<label>HSL:</label>
92+
<label class="color-format-label">HSL:</label>
8493
<input type="text" id="hsl-input" class="tool-input" placeholder="hsl(0, 0%, 0%)">
8594
<svg class="copy-icon" onclick="copyToClipboard('hsl-input')" viewBox="0 0 24 24">
8695
<path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>

‎static/tools/file-to-base64.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ <h1>文件转Base64</h1>
2020
</div>
2121

2222
<div class="tool-section" id="file-info-section" style="display: none;">
23-
<h3>文件信息</h3>
23+
<label class="tool-label">文件信息</label>
2424
<div id="file-info" class="tool-result">
2525
<!-- File info will be displayed here -->
2626
</div>
@@ -187,7 +187,7 @@ <h3>文件信息</h3>
187187
// Show temporary success message
188188
const originalText = copyButton.textContent;
189189
copyButton.textContent = '已复制!';
190-
copyButton.style.backgroundColor = '#28a745';
190+
copyButton.style.backgroundColor = '#10B981';
191191

192192
setTimeout(() => {
193193
copyButton.textContent = originalText;

‎static/tools/image-compressor.html‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,21 @@
66
<link rel="stylesheet" href="../css/style.css">
77
<style>
88
.preview-container {
9-
margin-top: 15px;
9+
flex: 1;
1010
}
1111
.preview-container img {
1212
max-width: 100%;
1313
height: auto;
14-
border: 1px solid #ccc;
14+
border: 1px solid var(--border);
1515
margin-top: 10px;
1616
display: block;
17-
background-color: #f8f9fa;
17+
background-color: var(--surface-hover);
18+
border-radius: var(--border-radius-sm);
1819
}
19-
.info {
20-
font-size: 0.9em;
21-
color: #555;
22-
margin-top: 5px;
20+
.preview-row {
21+
display: flex;
22+
flex-direction: row;
23+
gap: 20px;
2324
}
2425
#download-link {
2526
display: none;
@@ -67,16 +68,16 @@ <h1>图片压缩</h1>
6768
<button onclick="compressImage()" class="tool-button">压缩图片</button>
6869
</div>
6970

70-
<div class="tool-section" style="display: flex; flex-direction: row; gap: 20px;">
71-
<div class="preview-container" style="flex: 1;">
71+
<div class="tool-section preview-row">
72+
<div class="preview-container">
7273
<label class="tool-label">原图预览:</label>
7374
<img id="original-preview" src="" alt="原图">
74-
<div id="original-info" class="info"></div>
75+
<div id="original-info" class="tool-help"></div>
7576
</div>
76-
<div class="preview-container" style="flex: 1;">
77+
<div class="preview-container">
7778
<label class="tool-label">压缩后预览:</label>
7879
<img id="compressed-preview" src="" alt="压缩后图片">
79-
<div id="compressed-info" class="info"></div>
80+
<div id="compressed-info" class="tool-help"></div>
8081
<a id="download-link" class="tool-button" download="compressed_image.jpg">下载压缩图片</a>
8182
</div>
8283
</div>

‎static/tools/image-format-converter.html‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,17 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>图片格式转换</title>
77
<link rel="stylesheet" href="../css/style.css">
8+
<style>
9+
.converted-image {
10+
max-width: 100%;
11+
height: auto;
12+
display: block;
13+
border: 1px solid var(--border);
14+
border-radius: var(--border-radius-sm);
15+
background-color: var(--surface-hover);
16+
margin-bottom: 12px;
17+
}
18+
</style>
819
<script src="../js/tool-theme-helper.js"></script>
920
</head>
1021
<body>
@@ -33,7 +44,7 @@ <h1>图片格式转换</h1>
3344
<button id="convertBtn" class="tool-button">转换</button>
3445
</div>
3546
<div class="tool-section">
36-
<h2>转换后的图片:</h2>
47+
<label class="tool-label">转换后的图片:</label>
3748
<div id="output"></div>
3849
</div>
3950
</div>
@@ -74,7 +85,7 @@ <h2>转换后的图片:</h2>
7485
outputDiv.innerHTML = '';
7586
const newImg = document.createElement('img');
7687
newImg.src = dataUrl;
77-
newImg.style.maxWidth = '100%';
88+
newImg.className = 'converted-image';
7889
outputDiv.appendChild(newImg);
7990

8091
const downloadLink = document.createElement('a');

‎static/tools/jwt-decoder.html‎

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,22 @@
22
<html lang="zh-CN">
33
<head>
44
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
56
<title>JWT 解码器</title>
67
<link rel="stylesheet" href="../css/style.css">
78
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.15/codemirror.min.css">
89
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.15/theme/material-palenight.min.css">
910
<style>
1011
.CodeMirror {
11-
border: 1px solid rgba(148, 163, 184, 0.3);
12+
border: 1px solid var(--border);
1213
font-size: 14px;
1314
flex-grow: 1;
14-
border-radius: 12px;
15-
background: rgba(255, 255, 255, 0.4);
16-
backdrop-filter: blur(8px);
17-
-webkit-backdrop-filter: blur(8px);
15+
border-radius: var(--border-radius-sm);
1816
height: 150px;
1917
}
2018

2119
.CodeMirror-gutters {
22-
background: rgba(255, 255, 255, 0.3);
23-
border-right: 1px solid rgba(148, 163, 184, 0.2);
20+
border-right: 1px solid var(--border);
2421
}
2522

2623
.editor-container {
@@ -36,24 +33,26 @@
3633

3734
.copy-icon {
3835
position: absolute;
39-
top: 10px;
40-
right: 20px;
36+
top: 8px;
37+
right: 8px;
4138
cursor: pointer;
4239
width: 28px;
4340
height: 28px;
44-
fill: #3B82F6;
41+
fill: var(--primary);
4542
z-index: 10;
4643
padding: 6px;
47-
background: rgba(255, 255, 255, 0.9);
48-
border-radius: 8px;
49-
transition: all 150ms ease;
50-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
44+
background: var(--surface);
45+
border: 1px solid var(--border);
46+
border-radius: var(--border-radius-sm);
47+
transition: all var(--transition-fast);
48+
box-shadow: 0 1px 2px var(--shadow-color);
49+
box-sizing: border-box;
5150
}
5251

5352
.copy-icon:hover {
54-
fill: #2563EB;
53+
fill: var(--primary-dark);
5554
transform: scale(1.1);
56-
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
55+
box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
5756
}
5857
</style>
5958
<script src="../js/tool-theme-helper.js"></script>
@@ -67,7 +66,7 @@ <h1>JWT 解码器</h1>
6766
<div class="tool-section">
6867
<label class="tool-label" for="jwt-input">JWT Token</label>
6968
<div class="editor-container">
70-
<textarea id="jwt-input" placeholder="在此粘贴 JWT Token..."></textarea>
69+
<textarea id="jwt-input" class="tool-textarea" placeholder="在此粘贴 JWT Token..."></textarea>
7170
</div>
7271
</div>
7372
<div class="tool-controls">

0 commit comments

Comments
 (0)