ti/hereconnect
1
0
Fork 0
Code Issues 26 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

offline.html support light theme

Browse Source
This commit is contained in:
Vasilii Mikhailovskii
2024-12-08 22:38:09 +02:00
parent f273debb87
commit 9748a3c1d2
2 changed files with 51 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/frontend/public/css/offline.css
+47 -4
View File
@@ -1,11 +1,10 @@
/* Общие стили */
body { body {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100vh; height: 100vh;
margin: 0; margin: 0;
background-color: #121212;
color: #ffffff;
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
} }
@@ -16,8 +15,8 @@ body {
.spinner { .spinner {
width: 50px; width: 50px;
height: 50px; height: 50px;
border: 5px solid rgba(255, 255, 255, 0.3); border: 5px solid rgba(0, 0, 0, 0.1);
border-top-color: #ffffff; border-top-color: currentColor;
border-radius: 50%; border-radius: 50%;
animation: spin 1s linear infinite; animation: spin 1s linear infinite;
margin: 20px auto; margin: 20px auto;
@@ -41,3 +40,47 @@ button {
button:hover { button:hover {
background-color: #0056b3; background-color: #0056b3;
} }
/* Светлая тема */
@media (prefers-color-scheme: light) {
body {
background-color: #ffffff;
color: #000000;
}
.spinner {
border-color: rgba(0, 0, 0, 0.1);
border-top-color: #000000;
}
button {
background-color: #007bff;
color: white;
}
button:hover {
background-color: #0056b3;
}
}
/* Тёмная тема */
@media (prefers-color-scheme: dark) {
body {
background-color: #121212;
color: #ffffff;
}
.spinner {
border-color: rgba(255, 255, 255, 0.3);
border-top-color: #ffffff;
}
button {
background-color: #007bff;
color: white;
}
button:hover {
background-color: #0056b3;
}
}
apps/frontend/public/offline.html
+4 -5
View File
@@ -3,7 +3,8 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#121212" /> <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />
<meta name="theme-color" content="#121212" media="(prefers-color-scheme: dark)" />
<title>Загрузка… — НаСвязи</title> <title>Загрузка… — НаСвязи</title>
<link rel="stylesheet" href="/css/offline.css" /> <link rel="stylesheet" href="/css/offline.css" />
</head> </head>
@@ -85,11 +86,11 @@
checkConnectionWithServiceWorker().then((isOnline) => { checkConnectionWithServiceWorker().then((isOnline) => {
if (!isOnline) showOfflineMessage(); if (!isOnline) showOfflineMessage();
}) });
if ('serviceWorker' in navigator) { if ('serviceWorker' in navigator) {
navigator.serviceWorker.onmessage = (event) => { navigator.serviceWorker.onmessage = (event) => {
console.log('onmessage', event.data && event.data.type) console.log('onmessage', event.data && event.data.type);
if (event.data && event.data.type === 'MAIN_PAGE_READY') { if (event.data && event.data.type === 'MAIN_PAGE_READY') {
location.reload(); location.reload();
} }
@@ -104,7 +105,6 @@
window.addEventListener('online', handleOnlineStatus); window.addEventListener('online', handleOnlineStatus);
addEventListener("offline", showOfflineMessage); addEventListener("offline", showOfflineMessage);
showLoadingMessage(); showLoadingMessage();
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
@@ -118,7 +118,6 @@
console.warn('Service Worker is not available or not controlling this page.'); console.warn('Service Worker is not available or not controlling this page.');
} }
}); });
</script> </script>
</body> </body>
</html> </html>