GithubBackup/gemini-balance
1
0
Fork 0
mirror of https://github.com/snailyp/gemini-balance.git synced 2026-05-11 18:09:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

Enhance UI/UX for keys_status.html

Browse Source 
- Added smooth scroll functionality with "Scroll to Top" and "Scroll to Bottom" buttons.
- Introduced a `scroll-buttons` section with styled buttons for scrolling.
- Improved `#copyStatus` styling for better visibility and alignment.
- Adjusted `.container` to support scrollable content with hidden scrollbars and a max-height.
- Ensured proper z-index for new elements to prevent overlapping issues.
- Enhanced hover and active states for scroll buttons to improve user experience.
- Added event listeners to dynamically show/hide scroll buttons based on user scroll position.
This commit is contained in:
yinpeng
2025-02-12 15:16:22 +08:00
parent 343f40476a
commit 8e77773d5a
1 changed files with 87 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
app/templates/keys_status.html
View File

@@ -18,6 +18,7 @@
justify-content: center;
align-items: center;
padding: 20px;
position: relative;
}
.container {
max-width: 900px;
@@ -27,6 +28,14 @@
border-radius: 20px;
box-shadow: 0 15px 35px rgba(0,0,0,0.2);
backdrop-filter: blur(10px);
max-height: 80vh;
overflow-y: scroll;
position: relative;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE and Edge */
}
.container::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}
h1 {
color: #2c3e50;
@@ -151,18 +160,21 @@
}
#copyStatus {
position: fixed;
bottom: 20px;
top: 50%;
left: 50%;
transform: translateX(-50%);
background: rgba(39, 174, 96, 0.9);
transform: translate(-50%, -50%);
background: rgba(39, 174, 96, 0.95);
color: white;
padding: 12px 25px;
padding: 15px 30px;
border-radius: 25px;
font-weight: bold;
opacity: 0;
transition: opacity 0.3s ease;
transition: all 0.3s ease;
backdrop-filter: blur(5px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
z-index: 1000;
text-align: center;
min-width: 200px;
}
.status-badge {
padding: 4px 12px;
@@ -189,6 +201,38 @@
.key-list:nth-child(2) {
animation-delay: 0.2s;
}
.scroll-buttons {
position: fixed;
right: 20px;
bottom: 20px;
display: flex;
flex-direction: column;
gap: 10px;
z-index: 1000;
}
.scroll-btn {
background: rgba(118, 75, 162, 0.9);
color: white;
width: 40px;
height: 40px;
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
transition: all 0.3s ease;
backdrop-filter: blur(5px);
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.scroll-btn:hover {
background: rgba(102, 126, 234, 0.9);
transform: scale(1.1);
}
.scroll-btn:active {
transform: scale(0.95);
}
</style>
</head>
<body>
@@ -261,9 +305,19 @@
<div class="total">
<i class="fas fa-key"></i> 总密钥数：{{ total }}
</div>
<div id="copyStatus"></div>
</div>
<div class="scroll-buttons">
<button class="scroll-btn" onclick="scrollToTop()" title="回到顶部">
<i class="fas fa-chevron-up"></i>
</button>
<button class="scroll-btn" onclick="scrollToBottom()" title="滚动到底部">
<i class="fas fa-chevron-down"></i>
</button>
</div>
<div id="copyStatus"></div>
<script>
function copyToClipboard(text) {
if (navigator.clipboard && navigator.clipboard.writeText) {
@@ -325,6 +379,33 @@
statusElement.style.opacity = 0;
}, 2000);
}
function scrollToTop() {
const container = document.querySelector('.container');
container.scrollTo({
top: 0,
behavior: 'smooth'
});
}
function scrollToBottom() {
const container = document.querySelector('.container');
container.scrollTo({
top: container.scrollHeight,
behavior: 'smooth'
});
}
// 监听滚动事件来显示/隐藏滚动按钮
document.querySelector('.container').addEventListener('scroll', function() {
const scrollButtons = document.querySelector('.scroll-buttons');
if (this.scrollTop > 100) {
scrollButtons.style.display = 'flex';
} else {
scrollButtons.style.display = 'none';
}
});
</script>
</body>
</html>