hatter/tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨 Update styling and layout in index.html for better UI/UX

Browse Source
This commit is contained in:
Hatter Jiang
2026-04-15 00:37:19 +08:00
parent 447d65a28c
commit 45b218a635
1 changed files with 35 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
parse-qr/index.html
View File

@@ -20,6 +20,7 @@
height: 100%;
overscroll-behavior: auto;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
overflow-x: hidden;
}
body {
@@ -33,17 +34,20 @@
padding: calc(env(safe-area-inset-top) + 20px) env(safe-area-inset-right) calc(env(safe-area-inset-bottom) + 20px) env(safe-area-inset-left);
margin: 0;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
max-width: 100%;
}
.container {
background: white;
border-radius: 16px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
padding: 40px;
padding: 20px;
max-width: 600px;
width: 100%;
margin: 20px;
box-sizing: border-box;
}
h1 {
@@ -56,8 +60,8 @@
.refresh-btn {
position: absolute;
top: -30px;
right: -30px;
top: -20px;
right: -20px;
background: transparent;
border: none;
font-size: 20px;
@@ -140,6 +144,8 @@
justify-content: center;
align-items: center;
flex-direction: column;
padding: 20px;
box-sizing: border-box;
}
.camera-modal.visible {
@@ -292,20 +298,19 @@
}
.history-list {
max-height: 300px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overflow-y: visible;
}
.history-item {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-direction: column;
padding: 12px;
background: #f8f9ff;
border-radius: 8px;
margin-bottom: 10px;
transition: transform 0.2s;
max-width: 100%;
overflow-wrap: break-word;
}
.history-item:hover {
@@ -313,32 +318,40 @@
}
.history-text {
flex: 1;
word-break: break-all;
color: #333;
font-size: 14px;
line-height: 1.5;
margin-right: 10px;
margin-bottom: 4px;
width: 100%;
}
.history-footer {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
margin-top: 4px;
padding-right: 0px;
}
.history-time {
font-size: 12px;
font-size: 10px;
color: #999;
margin-top: 4px;
}
.history-actions {
display: flex;
gap: 6px;
flex-shrink: 0;
gap: 4px;
align-self: flex-end;
}
.delete-btn, .copy-history-btn {
padding: 6px 10px;
padding: 4px 8px;
background: #fff;
border: 1px solid #ffe6e6;
border-radius: 4px;
font-size: 12px;
font-size: 11px;
cursor: pointer;
transition: all 0.2s;
flex-shrink: 0;
@@ -490,13 +503,13 @@
const displayText = item.text.length > 100 ? item.text.substring(0, 100) + '...' : item.text;
return `
<div class="history-item">
<div class="history-text">
<div>${escapeHtml(displayText)}</div>
<div class="history-text">${escapeHtml(displayText)}</div>
<div class="history-footer">
<div class="history-time">${timeStr}</div>
</div>
<div class="history-actions">
<button class="copy-history-btn" data-index="${index}">📋 Copy</button>
<button class="delete-btn" data-index="${index}">🗑️ Delete</button>
<div class="history-actions">
<button class="copy-history-btn" data-index="${index}">📋 Copy</button>
<button class="delete-btn" data-index="${index}">🗑️ Delete</button>
</div>
</div>
</div>
`;