Hugging Face's logo

Spaces:
banao-tech
/
problem-decoder
Sleeping

App Files Community
banao-tech commited on
Commit
14e8462
·
verified ·
1 Parent(s): 5824aee

Create report_template.html

Browse files
Files changed (1) hide show
  1. report_template.html +355 -0
report_template.html ADDED
@@ -0,0 +1,355 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8"/>
5
+ <style>
6
+ /* ── Reset ── */
7
+ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
8
+
9
+ /* ── Page ── */
10
+ @page {
11
+ size: A4;
12
+ margin: 0;
13
+ }
14
+
15
+ body {
16
+ font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
17
+ font-size: 11pt;
18
+ color: #1a1a1a;
19
+ background: #ffffff;
20
+ line-height: 1.6;
21
+ }
22
+
23
+ /* ── Cover page ── */
24
+ .cover {
25
+ width: 100%;
26
+ height: 100vh;
27
+ display: flex;
28
+ flex-direction: column;
29
+ padding: 60pt 56pt;
30
+ page-break-after: always;
31
+ position: relative;
32
+ overflow: hidden;
33
+ }
34
+
35
+ .cover-accent {
36
+ position: absolute;
37
+ top: 0; right: 0;
38
+ width: 280pt;
39
+ height: 280pt;
40
+ background: #2563eb;
41
+ border-radius: 0 0 0 100%;
42
+ opacity: .06;
43
+ }
44
+
45
+ .cover-accent-2 {
46
+ position: absolute;
47
+ bottom: 0; left: 0;
48
+ width: 180pt;
49
+ height: 180pt;
50
+ background: #2563eb;
51
+ border-radius: 0 100% 0 0;
52
+ opacity: .04;
53
+ }
54
+
55
+ .cover-top {
56
+ display: flex;
57
+ align-items: center;
58
+ gap: 10pt;
59
+ margin-bottom: auto;
60
+ }
61
+
62
+ .cover-mark {
63
+ width: 32pt;
64
+ height: 32pt;
65
+ background: #2563eb;
66
+ border-radius: 8pt;
67
+ display: flex;
68
+ align-items: center;
69
+ justify-content: center;
70
+ }
71
+
72
+ .cover-mark-inner {
73
+ width: 14pt;
74
+ height: 14pt;
75
+ border: 2.5pt solid #ffffff;
76
+ border-radius: 50%;
77
+ }
78
+
79
+ .cover-brand {
80
+ font-size: 13pt;
81
+ font-weight: 600;
82
+ color: #374151;
83
+ letter-spacing: -.01em;
84
+ }
85
+
86
+ .cover-body {
87
+ margin-top: auto;
88
+ margin-bottom: 60pt;
89
+ }
90
+
91
+ .cover-eyebrow {
92
+ font-size: 9pt;
93
+ font-weight: 600;
94
+ letter-spacing: .12em;
95
+ text-transform: uppercase;
96
+ color: #2563eb;
97
+ margin-bottom: 16pt;
98
+ }
99
+
100
+ .cover-title {
101
+ font-size: 32pt;
102
+ font-weight: 700;
103
+ color: #0f172a;
104
+ letter-spacing: -.03em;
105
+ line-height: 1.15;
106
+ margin-bottom: 20pt;
107
+ }
108
+
109
+ .cover-divider {
110
+ width: 40pt;
111
+ height: 3pt;
112
+ background: #2563eb;
113
+ border-radius: 2pt;
114
+ margin-bottom: 24pt;
115
+ }
116
+
117
+ .cover-meta {
118
+ display: flex;
119
+ flex-direction: column;
120
+ gap: 8pt;
121
+ }
122
+
123
+ .cover-meta-row {
124
+ display: flex;
125
+ align-items: center;
126
+ gap: 10pt;
127
+ }
128
+
129
+ .cover-meta-label {
130
+ font-size: 9pt;
131
+ font-weight: 600;
132
+ letter-spacing: .08em;
133
+ text-transform: uppercase;
134
+ color: #9ca3af;
135
+ width: 50pt;
136
+ flex-shrink: 0;
137
+ }
138
+
139
+ .cover-meta-value {
140
+ font-size: 11pt;
141
+ color: #374151;
142
+ font-weight: 500;
143
+ }
144
+
145
+ .cover-footer {
146
+ border-top: 1pt solid #e5e7eb;
147
+ padding-top: 16pt;
148
+ display: flex;
149
+ justify-content: space-between;
150
+ align-items: center;
151
+ }
152
+
153
+ .cover-footer-left {
154
+ font-size: 9pt;
155
+ color: #9ca3af;
156
+ }
157
+
158
+ .cover-step-pills {
159
+ display: flex;
160
+ gap: 6pt;
161
+ }
162
+
163
+ .cover-pill {
164
+ font-size: 8pt;
165
+ font-weight: 600;
166
+ color: #6b7280;
167
+ background: #f3f4f6;
168
+ border-radius: 3pt;
169
+ padding: 3pt 7pt;
170
+ letter-spacing: .03em;
171
+ }
172
+
173
+ /* ── Content pages ── */
174
+ .content {
175
+ padding: 48pt 56pt;
176
+ }
177
+
178
+ /* ── Section ── */
179
+ .section {
180
+ page-break-inside: avoid;
181
+ margin-bottom: 36pt;
182
+ }
183
+
184
+ .section-header {
185
+ display: flex;
186
+ align-items: flex-start;
187
+ gap: 14pt;
188
+ margin-bottom: 16pt;
189
+ padding-bottom: 14pt;
190
+ border-bottom: 1pt solid #e5e7eb;
191
+ }
192
+
193
+ .section-number {
194
+ font-size: 9pt;
195
+ font-weight: 700;
196
+ color: #2563eb;
197
+ background: #eff6ff;
198
+ border: 1pt solid #bfdbfe;
199
+ border-radius: 4pt;
200
+ padding: 3pt 7pt;
201
+ letter-spacing: .06em;
202
+ flex-shrink: 0;
203
+ margin-top: 2pt;
204
+ }
205
+
206
+ .section-title {
207
+ font-size: 15pt;
208
+ font-weight: 700;
209
+ color: #0f172a;
210
+ letter-spacing: -.02em;
211
+ line-height: 1.25;
212
+ }
213
+
214
+ /* ── Prose content ── */
215
+ .prose { color: #374151; }
216
+
217
+ .prose h2 {
218
+ font-size: 11pt;
219
+ font-weight: 700;
220
+ color: #111827;
221
+ margin: 14pt 0 6pt;
222
+ letter-spacing: -.01em;
223
+ }
224
+
225
+ .prose h2:first-child { margin-top: 0; }
226
+
227
+ .prose h3 {
228
+ font-size: 10.5pt;
229
+ font-weight: 600;
230
+ color: #374151;
231
+ margin: 10pt 0 4pt;
232
+ }
233
+
234
+ .prose p {
235
+ margin-bottom: 7pt;
236
+ line-height: 1.7;
237
+ }
238
+
239
+ .prose ul {
240
+ margin: 5pt 0 10pt 14pt;
241
+ padding: 0;
242
+ }
243
+
244
+ .prose li {
245
+ margin-bottom: 4pt;
246
+ line-height: 1.65;
247
+ list-style: none;
248
+ padding-left: 12pt;
249
+ position: relative;
250
+ }
251
+
252
+ .prose li::before {
253
+ content: '–';
254
+ position: absolute;
255
+ left: 0;
256
+ color: #9ca3af;
257
+ }
258
+
259
+ .prose strong { font-weight: 600; color: #111827; }
260
+
261
+ /* ── Page footer ── */
262
+ .page-footer {
263
+ position: fixed;
264
+ bottom: 0; left: 0; right: 0;
265
+ height: 32pt;
266
+ padding: 0 56pt;
267
+ display: flex;
268
+ align-items: center;
269
+ justify-content: space-between;
270
+ border-top: 1pt solid #f3f4f6;
271
+ background: #ffffff;
272
+ }
273
+
274
+ .page-footer-brand {
275
+ font-size: 8pt;
276
+ color: #d1d5db;
277
+ font-weight: 500;
278
+ letter-spacing: .04em;
279
+ }
280
+
281
+ .page-footer-date {
282
+ font-size: 8pt;
283
+ color: #d1d5db;
284
+ }
285
+
286
+ /* ── Utility ── */
287
+ .page-break { page-break-before: always; }
288
+ </style>
289
+ </head>
290
+ <body>
291
+
292
+ <!-- ── Cover ── -->
293
+ <div class="cover">
294
+ <div class="cover-accent"></div>
295
+ <div class="cover-accent-2"></div>
296
+
297
+ <div class="cover-top">
298
+ <div class="cover-mark"><div class="cover-mark-inner"></div></div>
299
+ <span class="cover-brand">Problem Solver</span>
300
+ </div>
301
+
302
+ <div class="cover-body">
303
+ <div class="cover-eyebrow">Analysis Report</div>
304
+ <div class="cover-title">Problem<br>Analysis</div>
305
+ <div class="cover-divider"></div>
306
+ <div class="cover-meta">
307
+ {% if user_name and user_name != 'Anonymous' %}
308
+ <div class="cover-meta-row">
309
+ <span class="cover-meta-label">Name</span>
310
+ <span class="cover-meta-value">{{ user_name }}</span>
311
+ </div>
312
+ {% endif %}
313
+ <div class="cover-meta-row">
314
+ <span class="cover-meta-label">Date</span>
315
+ <span class="cover-meta-value">{{ date }}</span>
316
+ </div>
317
+ </div>
318
+ </div>
319
+
320
+ <div class="cover-footer">
321
+ <span class="cover-footer-left">Confidential</span>
322
+ <div class="cover-step-pills">
323
+ <span class="cover-pill">Problem Analysis</span>
324
+ <span class="cover-pill">Root Cause</span>
325
+ <span class="cover-pill">Solutions</span>
326
+ <span class="cover-pill">Action Plan</span>
327
+ <span class="cover-pill">Reflection</span>
328
+ </div>
329
+ </div>
330
+ </div>
331
+
332
+ <!-- ── Content ── -->
333
+ <div class="page-footer">
334
+ <span class="page-footer-brand">PROBLEM SOLVER</span>
335
+ <span class="page-footer-date">{{ date }}</span>
336
+ </div>
337
+
338
+ <div class="content">
339
+
340
+ {% for section in sections %}
341
+ <div class="section {% if not loop.first and loop.index in page_breaks %}page-break{% endif %}">
342
+ <div class="section-header">
343
+ <span class="section-number">0{{ loop.index }}</span>
344
+ <span class="section-title">{{ section.title }}</span>
345
+ </div>
346
+ <div class="prose">
347
+ {{ section.html | safe }}
348
+ </div>
349
+ </div>
350
+ {% endfor %}
351
+
352
+ </div>
353
+
354
+ </body>
355
+ </html>