| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <pstm-name>main</pstm-name>
- <pstm-title>{{APP_NAME}}</pstm-title>
- <script pstm-res-src="statum.js"></script>
- <style>
- body { font-family: system-ui, sans-serif; margin: 0 auto; max-width: 46rem; padding: 0 1rem; }
- header { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-bottom: 1px solid #8884; padding: 1rem 0; }
- header h1 { font-size: 1.2rem; margin: 0; }
- header nav { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.75rem; }
- main { padding: 1rem 0 3rem; }
- footer { border-top: 1px solid #8884; color: #888; font-size: 0.85rem; padding: 1rem 0; }
- input, button { font: inherit; }
- input[type="text"], input[type="password"], input[type="email"], input[type="date"] { padding: 0.3rem 0.4rem; }
- .form-row { display: flex; align-items: center; gap: 0.6rem; margin: 0.6rem 0; }
- .form-row label { flex: none; width: 16ch; margin: 0; }
- .form-row input { flex: 1 1 12ch; max-width: 28ch; }
- form.inline { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0.2rem 0; }
- table { border-collapse: collapse; }
- th, td { border: 1px solid #8884; padding: 0.4rem 0.6rem; text-align: left; vertical-align: top; }
- .error { color: #b00020; }
- [hidden] { display: none; }
- </style>
- </head>
- <body>
- <header>
- <h1>{{APP_NAME}}</h1>
- <nav>
- <a href="/">Home</a>
- <!-- spry:nav-begin -->
- <!-- spry:nav-end -->
- <span stm-if="auth != null"><strong stm-text="auth.username">user</strong>
- <!-- spry:nav-auth-begin -->
- <!-- spry:nav-auth-end -->
- </span>
- </nav>
- </header>
- <main>
- <div stm-preloader>Loading…</div>
- <div stm-content hidden>
- <pstm-content></pstm-content>
- </div>
- </main>
- <footer><p>Served by Statum + Spry.</p></footer>
- </body>
- </html>
|
