<!-- Note: The elements in this UI can be broken apart and spread around your page, as long as you keep the IDs intact. Elements can also be dropped without Dojo Offline's default UI breaking. --> <div id="dot-widget-container" style="visibility: hidden;"> <div id="dot-widget-title-bar"> <span id="dot-widget-network-indicator"> <img id="dot-widget-network-indicator-online" /> <img id="dot-widget-network-indicator-offline" /> </span> <span id="dot-widget-title-text"></span> </div> <div id="dot-widget-contents"> <div id="dot-widget-browser-restart"> Please restart your browser to use <span id="dot-widget-browser-restart-app-name"></span> Offline </div> <div id="dot-sync-status"> <img id="dot-roller" /> <img id="dot-success-checkmark" /> <span id="dot-sync-messages"></span> <span id="dot-sync-details"> (<a id="dot-sync-details-button" href="#">details</a>) </span> <span id="dot-sync-cancel"> (<a id="dot-sync-cancel-button" href="#">cancel</a>) </span> </div> <div id="dot-widget-learn-how"> <a id="dot-widget-learn-how-link" target="_blank" href="#">Learn How</a> to use <span id="dot-widget-learn-how-app-name"></span> Offline! </div> </div> </div>