| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>app-sk demo</title> |
| <meta charset="utf-8" /> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <script type="text/javascript" charset="utf-8"> |
| // This bit of script loads the custom elements v1 polyfill, but only if required. |
| if (!window.customElements) { |
| var newScript = document.createElement('script'); |
| newScript.src = "https://cdnjs.cloudflare.com/ajax/libs/custom-elements/1.0.8/custom-elements.min.js"; |
| document.write(newScript.outerHTML); |
| } |
| </script> |
| </head> |
| <body> |
| <app-sk> |
| <header> |
| <h1>app-sk Demo</h1> |
| <div class=spacer></div> |
| <login-sk></login-sk> |
| </header> |
| <!-- W3 Schools suggests the aside content could be a side bar. |
| So that's what we do with it.--> |
| <aside> |
| <h2>This is the side bar</h2> |
| <ul class=no-decorate> |
| <li>Do you like items?</li> |
| <li>We have items</li> |
| <li>and <a href="skia.org">links to places</a></li> |
| <li><create-icon-sk></create-icon-sk> Icons too!</li> |
| </ul> |
| |
| <h2>Hopefully the side bar handles really wide text well.</h2> |
| </aside> |
| |
| <main> |
| <h1>The main content!</h1> |
| This is the main reason you are here. |
| <br> |
| |
| <img class=small-image src="https://i.redd.it/o1bum7xjoi8y.gif"> |
| |
| <h2>Lots of text to test scrolling</h2> |
| <div class=narrow> |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod |
| tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, |
| quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo |
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse |
| cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non |
| proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> |
| |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod |
| tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, |
| quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo |
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse |
| cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non |
| proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> |
| |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod |
| tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, |
| quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo |
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse |
| cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non |
| proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> |
| |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod |
| tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, |
| quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo |
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse |
| cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non |
| proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> |
| |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod |
| tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, |
| quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo |
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse |
| cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non |
| proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> |
| |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod |
| tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, |
| quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo |
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse |
| cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non |
| proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> |
| |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod |
| tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, |
| quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo |
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse |
| cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non |
| proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> |
| |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod |
| tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, |
| quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo |
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse |
| cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non |
| proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> |
| </div> |
| </main> |
| |
| <footer><error-toast-sk></error-toast-sk></footer> |
| </app-sk> |
| </body> |
| </html> |
