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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user