- Mounted static files directory to serve PWA assets like manifest.json and ServiceWorker scripts.
- Updated `auth.html` and `keys_status.html` templates:
- Added `<link>` for manifest and icons to support Progressive Web App (PWA) features.
- Added meta tags for theme color and Apple web app capabilities.
- Integrated ServiceWorker registration script for offline capabilities.
- Implement media queries to improve layout and UI for smaller screen sizes on `auth.html` and `keys_status.html`.
- Adjust container widths, font sizes, padding, and other styles for screen widths below 768px and 480px.
- Enhance mobile usability by making elements stack vertically, resizing fonts, and optimizing spacing for better readability and interaction.
- Removed duplicated padding and simplified CSS for `body`, ensuring proper spacing with 20px padding.
- Adjusted `.container` styles:
- Removed custom scrollbar styles and overflow-related attributes.
- Centered the element with `margin: 20px auto`.
- Updated scroll behavior:
- Changed scroll functions to operate on `window` instead of `.container`.
- Modified event listeners to use `window` for detecting scroll events.
- Cleaned up redundant or unused styles and improved readability.
- 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.
- Updated the overall design aesthetics of the authentication page.
- Added `fadeIn`, `slideDown`, `slideUp`, and `shake` animations for better user interaction.
- Improved error message styling with a subtle background, padding, and animation.
- Enhanced "API Key Status" page:
- Implemented new theme with gradient backgrounds and glassmorphism effect.
- Redesigned headings with underlines and improved hierarchy.
- Added FontAwesome icons to improve the visual appeal and clarity (e.g., checkmarks, warnings, keys).
- Applied better spacing, padding, and hover effects to list items and buttons.
- Introduced animations for key lists to create fluid transitions on page load.
- Differentiated valid and invalid keys using badges with appropriate colors and icons.
- Copy Key Interaction:
- Improved key copying functionality:
- Added animations and hover effects to "Copy" buttons.
- Updated the copied key selector logic to target `.key-text` for cleaner code.
- Changed copy confirmation message for better clarity.
- Styled the copy success message (`#copyStatus`) to appear fixed at the bottom with a blur effect.
- Key List Enhancements:
- Added fail count badges for individual keys with red warning styles.
- Styled buttons for batch copying to display icons alongside text, matching the overall design.
- Accessibility and Readability:
- Refactored text sizes, weights, and alignments for smoother readability.
- Enhanced color contrast and alignment for better accessibility.
Notes:
- New CSS animations have been smoothly integrated with no breaking changes.
- All changes prioritize maintaining current functionality while enhancing user experience.
snaily