GithubBackup/gemini-balance
1
0
Fork 0
mirror of https://github.com/snailyp/gemini-balance.git synced 2026-09-08 09:26:36 +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
app/templates/keys_status.html
+87 -6
View File
@@ -18,6 +18,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 20px; padding: 20px;
position: relative;
} }
.container { .container {
max-width: 900px; max-width: 900px;
@@ -27,6 +28,14 @@
border-radius: 20px; border-radius: 20px;
box-shadow: 0 15px 35px rgba(0,0,0,0.2); box-shadow: 0 15px 35px rgba(0,0,0,0.2);
backdrop-filter: blur(10px); 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 { h1 {
color: #2c3e50; color: #2c3e50;
@@ -151,18 +160,21 @@
} }
#copyStatus { #copyStatus {
position: fixed; position: fixed;
bottom: 20px; top: 50%;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translate(-50%, -50%);
background: rgba(39, 174, 96, 0.9); background: rgba(39, 174, 96, 0.95);
color: white; color: white;
padding: 12px 25px; padding: 15px 30px;
border-radius: 25px; border-radius: 25px;
font-weight: bold; font-weight: bold;
opacity: 0; opacity: 0;
transition: opacity 0.3s ease; transition: all 0.3s ease;
backdrop-filter: blur(5px); backdrop-filter: blur(5px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2); box-shadow: 0 5px 15px rgba(0,0,0,0.2);
z-index: 1000;
text-align: center;
min-width: 200px;
} }
.status-badge { .status-badge {
padding: 4px 12px; padding: 4px 12px;
@@ -189,6 +201,38 @@
.key-list:nth-child(2) { .key-list:nth-child(2) {
animation-delay: 0.2s; 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> </style>
</head> </head>
<body> <body>
@@ -261,9 +305,19 @@
<div class="total"> <div class="total">
<i class="fas fa-key"></i> 总密钥数：{{ total }} <i class="fas fa-key"></i> 总密钥数：{{ total }}
</div> </div>
<div id="copyStatus"></div>
</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> <script>
function copyToClipboard(text) { function copyToClipboard(text) {
if (navigator.clipboard && navigator.clipboard.writeText) { if (navigator.clipboard && navigator.clipboard.writeText) {
@@ -325,6 +379,33 @@
statusElement.style.opacity = 0; statusElement.style.opacity = 0;
}, 2000); }, 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> </script>
</body> </body>
</html> </html>