Implement floating notification for update alerts

- Created an entirely new floating notification system independent of the main UI
- Positioned notification as fixed element attached directly to the body
- Used bright red styling with high contrast to ensure visibility
- Added redundant notification alongside original update alert
- Implemented try/catch blocks for robust error handling
- Added event listeners for update button in floating notification
- Enhanced force show function to handle both notification types
- Applied fixed position and high z-index to ensure visibility
- Added console logging for better debugging

🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-03-10 18:24:29 +00:00
parent dc4131f04c
commit 5ce348d61e
2 changed files with 178 additions and 58 deletions
+38
View File
@@ -687,8 +687,46 @@
color: #004085 !important;
font-weight: bold !important;
}
/* Floating update notification that's impossible to miss */
#floating-update-notification {
display: none;
position: fixed;
top: 20px;
right: 20px;
width: 300px;
padding: 15px;
background-color: #ff5555;
color: white;
border: 3px solid #cc0000;
border-radius: 5px;
box-shadow: 0 0 20px rgba(0,0,0,0.5);
z-index: 10000;
font-weight: bold;
text-align: center;
}
#floating-update-notification button {
margin-top: 10px;
padding: 5px 10px;
background-color: white;
color: #cc0000;
border: none;
border-radius: 3px;
font-weight: bold;
cursor: pointer;
}
#floating-update-notification button:hover {
background-color: #eeeeee;
}
</style>
<!-- Floating update notification (outside normal document flow) -->
<div id="floating-update-notification">
<div>Update Available!</div>
<div id="floating-update-version">New version available</div>
<button id="floating-update-button">Update Now</button>
</div>
<!-- JavaScript Files -->
<script src="/js/system-status.js"></script>
<script src="/js/app.js"></script>