Created
February 4, 2021 21:36
-
-
Save amattu2/371d7fed75feb15bebc2516f61ec9255 to your computer and use it in GitHub Desktop.
A basic internet connectivity loss notice. Designed to overlay full screen content in the event of a user losing internet connection on your webapp.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <!-- Alec M., 2021 --> | |
| <head> | |
| <title>Offline Example</title> | |
| <style> | |
| /* Standard Items */ | |
| html, body { | |
| margin: 0; | |
| padding: 0; | |
| font-family: sans-serif; | |
| } | |
| /* Custom Elements */ | |
| .offline { | |
| position: fixed; | |
| display: none; | |
| left: 0; | |
| right: 0; | |
| top: 0; | |
| bottom: 0; | |
| background: #f2f2f2; | |
| } | |
| .offline.active { | |
| display: block; | |
| } | |
| .offline[data-hidden="true"] { | |
| display: none !important; | |
| } | |
| .offline-case { | |
| margin: 0 auto; | |
| width: 750px; | |
| max-width: 95%; | |
| padding: 45px 20px; | |
| } | |
| .offline-header { | |
| border-radius: 6px; | |
| box-shadow: 0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08); | |
| padding: 35px; | |
| background: #fff; | |
| } | |
| .offline-title { | |
| font-size: 36px; | |
| color: #262626; | |
| margin-bottom: 10px; | |
| } | |
| .offline-desc { | |
| font-size: 16px; | |
| color: #3b3b3b; | |
| } | |
| .offline-exit { | |
| position: absolute; | |
| top: 25px; | |
| right: 25px; | |
| font-size: 52px; | |
| line-height: 26px; | |
| font-weight: 300; | |
| color: #3b3b3b; | |
| opacity: 0.7; | |
| cursor: pointer; | |
| transition: all 0.1s linear; | |
| } | |
| .offline-exit:hover { | |
| color: #262626; | |
| opacity: 1; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class='offline active' data-hidden="false"> | |
| <!-- Offline Item Case --> | |
| <div class='offline-case'> | |
| <!-- Notice --> | |
| <div class='offline-header'> | |
| <div class='offline-title'>You're offline...</div> | |
| <div class='offline-desc'>This application can only perform when connected to a network. The available offline utilities are linked below.</div> | |
| </div> | |
| </div> | |
| <!-- Offline Exit Btn --> | |
| <div class='offline-exit' onclick="this.parentElement.classList.remove('active'); this.parentElement.dataset.hidden = true;">×</div> | |
| </div> | |
| <script> | |
| window.onoffline = function(e) { console.log('offline', e) } | |
| window.ononline = function(e) { console.log('online', e) } | |
| </script> | |
| </body> | |
| </html> |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Preview