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