Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"/> | |
| <style> | |
| /* ── Reset ── */ | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| /* ── Page ── */ | |
| @page { | |
| size: A4; | |
| margin: 0; | |
| } | |
| body { | |
| font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
| font-size: 11pt; | |
| color: #1a1a1a; | |
| background: #ffffff; | |
| line-height: 1.6; | |
| } | |
| /* ── Cover page ── */ | |
| .cover { | |
| width: 100%; | |
| height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| padding: 60pt 56pt; | |
| page-break-after: always; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .cover-accent { | |
| position: absolute; | |
| top: 0; right: 0; | |
| width: 280pt; | |
| height: 280pt; | |
| background: #2563eb; | |
| border-radius: 0 0 0 100%; | |
| opacity: .06; | |
| } | |
| .cover-accent-2 { | |
| position: absolute; | |
| bottom: 0; left: 0; | |
| width: 180pt; | |
| height: 180pt; | |
| background: #2563eb; | |
| border-radius: 0 100% 0 0; | |
| opacity: .04; | |
| } | |
| .cover-top { | |
| display: flex; | |
| align-items: center; | |
| gap: 10pt; | |
| margin-bottom: auto; | |
| } | |
| .cover-mark { | |
| width: 32pt; | |
| height: 32pt; | |
| background: #2563eb; | |
| border-radius: 8pt; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .cover-mark-inner { | |
| width: 14pt; | |
| height: 14pt; | |
| border: 2.5pt solid #ffffff; | |
| border-radius: 50%; | |
| } | |
| .cover-brand { | |
| font-size: 13pt; | |
| font-weight: 600; | |
| color: #374151; | |
| letter-spacing: -.01em; | |
| } | |
| .cover-body { | |
| margin-top: auto; | |
| margin-bottom: 60pt; | |
| } | |
| .cover-eyebrow { | |
| font-size: 9pt; | |
| font-weight: 600; | |
| letter-spacing: .12em; | |
| text-transform: uppercase; | |
| color: #2563eb; | |
| margin-bottom: 16pt; | |
| } | |
| .cover-title { | |
| font-size: 32pt; | |
| font-weight: 700; | |
| color: #0f172a; | |
| letter-spacing: -.03em; | |
| line-height: 1.15; | |
| margin-bottom: 20pt; | |
| } | |
| .cover-divider { | |
| width: 40pt; | |
| height: 3pt; | |
| background: #2563eb; | |
| border-radius: 2pt; | |
| margin-bottom: 24pt; | |
| } | |
| .cover-meta { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8pt; | |
| } | |
| .cover-meta-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 10pt; | |
| } | |
| .cover-meta-label { | |
| font-size: 9pt; | |
| font-weight: 600; | |
| letter-spacing: .08em; | |
| text-transform: uppercase; | |
| color: #9ca3af; | |
| width: 50pt; | |
| flex-shrink: 0; | |
| } | |
| .cover-meta-value { | |
| font-size: 11pt; | |
| color: #374151; | |
| font-weight: 500; | |
| } | |
| .cover-footer { | |
| border-top: 1pt solid #e5e7eb; | |
| padding-top: 16pt; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .cover-footer-left { | |
| font-size: 9pt; | |
| color: #9ca3af; | |
| } | |
| .cover-step-pills { | |
| display: flex; | |
| gap: 6pt; | |
| } | |
| .cover-pill { | |
| font-size: 8pt; | |
| font-weight: 600; | |
| color: #6b7280; | |
| background: #f3f4f6; | |
| border-radius: 3pt; | |
| padding: 3pt 7pt; | |
| letter-spacing: .03em; | |
| } | |
| /* ── Content pages ── */ | |
| .content { | |
| padding: 48pt 56pt; | |
| } | |
| /* ── Section ── */ | |
| .section { | |
| page-break-inside: avoid; | |
| margin-bottom: 36pt; | |
| } | |
| .section-header { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 14pt; | |
| margin-bottom: 16pt; | |
| padding-bottom: 14pt; | |
| border-bottom: 1pt solid #e5e7eb; | |
| } | |
| .section-number { | |
| font-size: 9pt; | |
| font-weight: 700; | |
| color: #2563eb; | |
| background: #eff6ff; | |
| border: 1pt solid #bfdbfe; | |
| border-radius: 4pt; | |
| padding: 3pt 7pt; | |
| letter-spacing: .06em; | |
| flex-shrink: 0; | |
| margin-top: 2pt; | |
| } | |
| .section-title { | |
| font-size: 15pt; | |
| font-weight: 700; | |
| color: #0f172a; | |
| letter-spacing: -.02em; | |
| line-height: 1.25; | |
| } | |
| /* ── Prose content ── */ | |
| .prose { color: #374151; } | |
| .prose h2 { | |
| font-size: 11pt; | |
| font-weight: 700; | |
| color: #111827; | |
| margin: 14pt 0 6pt; | |
| letter-spacing: -.01em; | |
| } | |
| .prose h2:first-child { margin-top: 0; } | |
| .prose h3 { | |
| font-size: 10.5pt; | |
| font-weight: 600; | |
| color: #374151; | |
| margin: 10pt 0 4pt; | |
| } | |
| .prose p { | |
| margin-bottom: 7pt; | |
| line-height: 1.7; | |
| } | |
| .prose ul { | |
| margin: 5pt 0 10pt 14pt; | |
| padding: 0; | |
| } | |
| .prose li { | |
| margin-bottom: 4pt; | |
| line-height: 1.65; | |
| list-style: none; | |
| padding-left: 12pt; | |
| position: relative; | |
| } | |
| .prose li::before { | |
| content: '–'; | |
| position: absolute; | |
| left: 0; | |
| color: #9ca3af; | |
| } | |
| .prose strong { font-weight: 600; color: #111827; } | |
| /* ── Page footer ── */ | |
| .page-footer { | |
| position: fixed; | |
| bottom: 0; left: 0; right: 0; | |
| height: 32pt; | |
| padding: 0 56pt; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| border-top: 1pt solid #f3f4f6; | |
| background: #ffffff; | |
| } | |
| .page-footer-brand { | |
| font-size: 8pt; | |
| color: #d1d5db; | |
| font-weight: 500; | |
| letter-spacing: .04em; | |
| } | |
| .page-footer-date { | |
| font-size: 8pt; | |
| color: #d1d5db; | |
| } | |
| /* ── Utility ── */ | |
| .page-break { page-break-before: always; } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- ── Cover ── --> | |
| <div class="cover"> | |
| <div class="cover-accent"></div> | |
| <div class="cover-accent-2"></div> | |
| <div class="cover-top"> | |
| <div class="cover-mark"><div class="cover-mark-inner"></div></div> | |
| <span class="cover-brand">Problem Solver</span> | |
| </div> | |
| <div class="cover-body"> | |
| <div class="cover-eyebrow">Analysis Report</div> | |
| <div class="cover-title">Problem<br>Analysis</div> | |
| <div class="cover-divider"></div> | |
| <div class="cover-meta"> | |
| {% if user_name and user_name != 'Anonymous' %} | |
| <div class="cover-meta-row"> | |
| <span class="cover-meta-label">Name</span> | |
| <span class="cover-meta-value">{{ user_name }}</span> | |
| </div> | |
| {% endif %} | |
| <div class="cover-meta-row"> | |
| <span class="cover-meta-label">Date</span> | |
| <span class="cover-meta-value">{{ date }}</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="cover-footer"> | |
| <span class="cover-footer-left">Confidential</span> | |
| <div class="cover-step-pills"> | |
| <span class="cover-pill">Problem Analysis</span> | |
| <span class="cover-pill">Root Cause</span> | |
| <span class="cover-pill">Solutions</span> | |
| <span class="cover-pill">Action Plan</span> | |
| <span class="cover-pill">Reflection</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ── Content ── --> | |
| <div class="page-footer"> | |
| <span class="page-footer-brand">PROBLEM SOLVER</span> | |
| <span class="page-footer-date">{{ date }}</span> | |
| </div> | |
| <div class="content"> | |
| {% for section in sections %} | |
| <div class="section {% if not loop.first and loop.index in page_breaks %}page-break{% endif %}"> | |
| <div class="section-header"> | |
| <span class="section-number">0{{ loop.index }}</span> | |
| <span class="section-title">{{ section.title }}</span> | |
| </div> | |
| <div class="prose"> | |
| {{ section.html | safe }} | |
| </div> | |
| </div> | |
| {% endfor %} | |
| </div> | |
| </body> | |
| </html> |