Improve chat UI for secure channel creation pages

Fix iOS PWA installation and improve cross-platform compatibility

- Fix manifest.json paths (use relative paths with ./ for iOS)
- Update Apple Touch Icons structure to use organized folders
- Add missing 180x180px icon requirement for iOS
- Fix apple-mobile-web-app meta tags configuration
- Add viewport-fit=cover for iPhone X+ notch support

- Fix missing showInstallButton() method causing TypeError
- Add complete showInstallBanner() and createInstallBanner() methods
- Implement proper hideInstallPrompts() functionality
- Add iOS-specific installation instructions modal
- Fix event handling for install prompt dismissal

- Restructure PWA icons into platform-specific folders:
  - ./logo/pwa/ios/ for Apple Touch Icons
  - ./logo/pwa/android/ for Android launcher icons
  - ./logo/pwa/windows11/ for Microsoft Tiles
- Update manifest.json to reference correct icon paths
- Add browserconfig.xml for Windows 11 tile configuration

- Improve PWA registration script without conflicts
- Add proper error handling for offline functionality
- Integrate with existing PWA modules (install prompt, offline manager)
- Add update notifications for new app versions

- Enhanced detection for iOS Safari vs other browsers
- Improved installation flow for different platforms
- Better user feedback for unsupported installation methods
- Added fallback instructions for manual installation

- Add comprehensive PWA support detection
- Implement proper iOS standalone mode detection
- Add console logging for installation status tracking
- Include developer utilities for PWA management

Tested on: iOS Safari, Chrome, Edge, Firefox
Resolves iOS PWA installation issues and improves overall PWA experience."
This commit is contained in:
lockbitchat
2025-08-19 21:54:17 -04:00
parent 91ea88503e
commit 94ca53f6ca
18 changed files with 460 additions and 257 deletions

View File

@@ -164,11 +164,11 @@ main {
border: 1px solid rgba(75, 85, 99, 0.2);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.card-minimal:hover {
/* .card-minimal:hover {
border-color: rgba(249, 115, 22, 0.3);
transform: translateY(-1px);
transition: all 0.2s ease;
}
} */
.status-dot {
width: 8px;