| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081 |
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="utf-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1" />
- <title>{{ app_title }}</title>
- <style>
- :root {
- --bg: #f4f7f8;
- --panel: #ffffff;
- --ink: #102a43;
- --accent: #00798c;
- --accent-dark: #005f6b;
- }
- * {
- box-sizing: border-box;
- }
- body {
- margin: 0;
- font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
- color: var(--ink);
- background: radial-gradient(circle at top right, #dff3ff, var(--bg));
- }
- .page {
- max-width: 1100px;
- margin: 0 auto;
- padding: 2rem;
- }
- .hero {
- display: grid;
- grid-template-columns: 2fr 1fr;
- gap: 1.5rem;
- align-items: center;
- }
- .card {
- background: var(--panel);
- border-radius: 14px;
- padding: 1.5rem;
- box-shadow: 0 10px 30px rgba(16, 42, 67, 0.08);
- }
- .badge {
- display: inline-block;
- padding: 0.3rem 0.7rem;
- border-radius: 999px;
- background: #e0f2f1;
- color: var(--accent-dark);
- font-size: 0.8rem;
- font-weight: 600;
- }
- h1 {
- margin: 0.8rem 0;
- line-height: 1.15;
- }
- p {
- line-height: 1.6;
- }
- code {
- background: #f0f4f8;
- border-radius: 6px;
- padding: 0.15rem 0.35rem;
- }
- .check {
- margin-top: 1rem;
- padding: 0.8rem 1rem;
- border-left: 4px solid var(--accent);
- background: #f7fbff;
- }
- @media (max-width: 900px) {
- .page {
- padding: 1rem;
- }
- .hero {
- grid-template-columns: 1fr;
- }
- }
- </style>
- </head>
- <body>
- <main class="page">{% block content %}{% endblock %}</main>
- </body>
- </html>
|
