Like 0
Fork 0

Last active 1 month ago

arechta's Avatar arechta revised this gist 1 month ago. Go to revision

1 file changed, 795 insertions

export_template.html(file created)

@@ -0,0 +1,795 @@
1 + <!DOCTYPE html>
2 + <html lang="en">
3 +
4 + <head>
5 + <meta charset="UTF-8">
6 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 + <title>3D Coordination Issue Report</title>
8 + <style>
9 + /* ─── RESET & DEFAULTS ───────────────────────────────────── */
10 + *,
11 + *::before,
12 + *::after {
13 + box-sizing: border-box;
14 + margin: 0;
15 + padding: 0;
16 + }
17 +
18 + @page {
19 + size: A4;
20 + margin: 0;
21 + }
22 +
23 + html,
24 + body {
25 + height: 100%;
26 + }
27 +
28 + body {
29 + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
30 + font-size: 9.5pt;
31 + color: #333333;
32 + background: #e8e8e8;
33 + line-height: 1.5;
34 + -webkit-print-color-adjust: exact;
35 + print-color-adjust: exact;
36 + }
37 +
38 + /* ─── PAGE WRAPPER ────────────────────────────────────────── */
39 + .page {
40 + width: 210mm;
41 + min-height: 280mm;
42 +
43 + margin: 32px auto;
44 + padding: 24px;
45 +
46 + display: flex;
47 + flex-direction: column;
48 +
49 + background: #fff;
50 + border: 1px solid #d0d0d0;
51 +
52 + page-break-after: always;
53 + break-after: page;
54 + }
55 +
56 + /* ─── REPORT HEADER ──────────────────────────────────────── */
57 + .report-header {
58 + text-align: center;
59 + padding-bottom: 20px;
60 + margin-bottom: 20px;
61 + }
62 +
63 + .report-title {
64 + font-size: 17pt;
65 + font-weight: 700;
66 + color: #1a1a1a;
67 + text-transform: uppercase;
68 + letter-spacing: 0.5px;
69 + }
70 +
71 + .report-path {
72 + font-size: 9pt;
73 + color: #888888;
74 + margin-top: 5px;
75 + }
76 +
77 + /* ─── PROJECT INFO TABLE ─────────────────────────────────── */
78 + .project-info {
79 + margin-bottom: 28px;
80 + }
81 +
82 + .project-info table {
83 + width: 100%;
84 + border-collapse: collapse;
85 + font-size: 9pt;
86 + border: 1px solid #cccccc;
87 + }
88 +
89 + .project-info td {
90 + padding: 8px 12px;
91 + border: 1px solid #cccccc;
92 + vertical-align: middle;
93 + color: #333333;
94 + }
95 +
96 + .project-info .lbl {
97 + font-weight: 400;
98 + color: #555555;
99 + width: 14%;
100 + background: #ffffff;
101 + }
102 +
103 + .project-info .val {
104 + color: #1a1a1a;
105 + width: 36%;
106 + font-weight: 400;
107 + }
108 +
109 + /* ─── SECTION HEADING ────────────────────────────────────── */
110 + .section-heading {
111 + font-size: 11pt;
112 + font-weight: 700;
113 + color: #1a1a1a;
114 + margin-bottom: 10px;
115 + }
116 +
117 + /* ─── SUMMARY TABLE ──────────────────────────────────────── */
118 + .summary-table {
119 + width: 100%;
120 + border-collapse: collapse;
121 + font-size: 9pt;
122 + margin-bottom: 16px;
123 + border: 1px solid #cccccc;
124 + }
125 +
126 + .summary-table thead tr {
127 + background: #eeeeee;
128 + }
129 +
130 + .summary-table thead th {
131 + padding: 9px 12px;
132 + text-align: center;
133 + font-size: 9pt;
134 + font-weight: 500;
135 + color: #333333;
136 + border: 1px solid #cccccc;
137 + }
138 +
139 + .summary-table tbody tr {
140 + border-bottom: 1px solid #cccccc;
141 + }
142 +
143 + .summary-table tbody td {
144 + padding: 8px 12px;
145 + color: #333333;
146 + vertical-align: middle;
147 + border: 1px solid #cccccc;
148 + text-align: center;
149 + }
150 +
151 + .summary-table tbody td:nth-child(2) {
152 + text-align: left;
153 + }
154 +
155 + /* Status Dot in Table */
156 + .tbl-status {
157 + display: inline-flex;
158 + align-items: center;
159 + justify-content: center;
160 + gap: 6px;
161 + font-weight: 400;
162 + font-size: 9pt;
163 + }
164 +
165 + .dot {
166 + display: inline-block;
167 + width: 8px;
168 + height: 8px;
169 + border-radius: 50%;
170 + flex-shrink: 0;
171 + }
172 +
173 + .dot-open {
174 + background: #22c55e;
175 + }
176 +
177 + .dot-closed {
178 + background: #f97316;
179 + }
180 +
181 + /* ─── DETAIL PAGE HEADING ────────────────────────────────── */
182 + .detail-heading {
183 + font-size: 12pt;
184 + font-weight: 700;
185 + color: #1a1a1a;
186 + margin-bottom: 18px;
187 + }
188 +
189 + /* ─── ISSUE BLOCK CARD ───────────────────────────────────── */
190 + .issue-block {
191 + padding: 16px 18px;
192 + margin-bottom: 18px;
193 + border: 1px solid #dddddd;
194 + border-radius: 4px;
195 + background: #ffffff;
196 + page-break-inside: avoid;
197 + break-inside: avoid;
198 + /* modern syntax */
199 + }
200 +
201 + .before-after,
202 + .meta-box,
203 + .comments-title {
204 + page-break-inside: avoid;
205 + break-inside: avoid;
206 + }
207 +
208 + .iss-header {
209 + display: flex;
210 + align-items: flex-start;
211 + justify-content: space-between;
212 + margin-bottom: 2px;
213 + }
214 +
215 + .iss-id {
216 + font-size: 8.5pt;
217 + font-weight: 400;
218 + color: #888888;
219 + }
220 +
221 + /* ─── STATUS BADGE ───────────────────────────────────────── */
222 + .badge {
223 + display: inline-flex;
224 + align-items: center;
225 + gap: 5px;
226 + padding: 3px 10px;
227 + border-radius: 4px;
228 + font-size: 8.5pt;
229 + font-weight: 500;
230 + border: 1px solid #cccccc;
231 + background: #f9f9f9;
232 + color: #333333;
233 + }
234 +
235 + .badge-open {
236 + background: #f9f9f9;
237 + color: #333333;
238 + border: 1px solid #cccccc;
239 + }
240 +
241 + .badge-open .dot {
242 + background: #22c55e;
243 + }
244 +
245 + .badge-closed {
246 + background: #f9f9f9;
247 + color: #333333;
248 + border: 1px solid #cccccc;
249 + }
250 +
251 + .badge-closed .dot {
252 + background: #f97316;
253 + }
254 +
255 + .iss-title {
256 + font-size: 11pt;
257 + font-weight: 700;
258 + color: #1a1a1a;
259 + margin-bottom: 12px;
260 + }
261 +
262 + /* ─── BEFORE/AFTER IMAGES ────────────────────────────────── */
263 + .before-after {
264 + display: table;
265 + width: 100%;
266 + table-layout: fixed;
267 + border-spacing: 12px 0;
268 + margin-left: -12px;
269 + margin-right: -12px;
270 + margin-bottom: 12px;
271 + }
272 +
273 + .img-col {
274 + display: table-cell;
275 + vertical-align: top;
276 + }
277 +
278 + .img-lbl {
279 + font-size: 8.5pt;
280 + font-weight: 400;
281 + color: #555555;
282 + margin-bottom: 5px;
283 + }
284 +
285 + .issue-img {
286 + width: 100%;
287 + height: 140px;
288 + object-fit: cover;
289 + border-radius: 3px;
290 + border: 1px solid #cccccc;
291 + display: block;
292 + background: #f5f5f5;
293 + }
294 +
295 + .img-empty {
296 + width: 100%;
297 + height: 140px;
298 + background: #f5f5f5;
299 + border: 1px dashed #cccccc;
300 + border-radius: 3px;
301 + display: flex;
302 + align-items: center;
303 + justify-content: center;
304 + color: #aaaaaa;
305 + font-size: 8.5pt;
306 + }
307 +
308 + /* ─── DESCRIPTION ────────────────────────────────────────── */
309 + .iss-desc {
310 + font-size: 9pt;
311 + color: #444444;
312 + line-height: 1.55;
313 + margin-bottom: 12px;
314 + }
315 +
316 + /* ─── METADATA GRID ──────────────────────────────────────── */
317 + .meta-box {
318 + border: 1px solid #dddddd;
319 + border-radius: 3px;
320 + overflow: hidden;
321 + margin-bottom: 12px;
322 + background: #ffffff;
323 + }
324 +
325 + .meta-row {
326 + display: flex;
327 + flex-wrap: wrap;
328 + }
329 +
330 + .meta-row+.meta-row {
331 + border-top: 1px solid #dddddd;
332 + }
333 +
334 + .meta-cell {
335 + padding: 7px 12px;
336 + flex: 1;
337 + min-width: 120px;
338 + }
339 +
340 + .meta-row.cols-4 .meta-cell {
341 + flex: 1;
342 + max-width: 25%;
343 + }
344 +
345 + .meta-row.cols-2 .meta-cell {
346 + flex: 1;
347 + max-width: 50%;
348 + }
349 +
350 + .meta-cell+.meta-cell {
351 + border-left: 1px solid #dddddd;
352 + }
353 +
354 + .meta-key {
355 + display: block;
356 + font-size: 8pt;
357 + font-weight: 400;
358 + color: #777777;
359 + margin-bottom: 1px;
360 + }
361 +
362 + .meta-val {
363 + font-size: 9pt;
364 + color: #1a1a1a;
365 + font-weight: 400;
366 + }
367 +
368 + /* ─── COMMENTS ───────────────────────────────────────────── */
369 + .comments-wrap {
370 + margin-top: 12px;
371 + padding-top: 10px;
372 + border-top: 1px solid #eeeeee;
373 + }
374 +
375 + .comments-title {
376 + font-size: 9pt;
377 + font-weight: 400;
378 + color: #777777;
379 + margin-bottom: 8px;
380 + }
381 +
382 + .comment {
383 + padding: 0;
384 + margin-bottom: 8px;
385 + }
386 +
387 + .comment:last-child {
388 + margin-bottom: 0;
389 + }
390 +
391 + .comment-top {
392 + display: flex;
393 + justify-content: space-between;
394 + align-items: baseline;
395 + margin-bottom: 1px;
396 + }
397 +
398 + .comment-author {
399 + font-size: 9pt;
400 + font-weight: 700;
401 + color: #1a1a1a;
402 + }
403 +
404 + .comment-date {
405 + font-size: 8.5pt;
406 + color: #888888;
407 + }
408 +
409 + .comment-text {
410 + font-size: 9pt;
411 + color: #444444;
412 + line-height: 1.5;
413 + }
414 +
415 + @media print {
416 + @page {
417 + size: A4;
418 + margin: 0;
419 + }
420 +
421 + .page {
422 + page-break-after: always;
423 + break-after: page;
424 + }
425 +
426 + .issue-block {
427 + page-break-inside: avoid;
428 + break-inside: avoid;
429 + /* modern syntax */
430 + }
431 + }
432 + </style>
433 +
434 + </head>
435 +
436 + <body>
437 + <div class="page">
438 +
439 + <div class="report-header">
440 + <h1 class="report-title">3D COORDINATION ISSUE REPORT</h1>
441 + </div>
442 +
443 + <div class="project-info">
444 + <table>
445 + <tr>
446 + <td class="lbl">Project:</td>
447 + <td class="val">Desain Rumah</td>
448 + <td class="lbl">Total issue:</td>
449 + <td class="val">2 Issue</td>
450 + </tr>
451 + <tr>
452 + <td class="lbl">Generate at:</td>
453 + <td class="val">11 June 2026</td>
454 + <td class="lbl">Doc name:</td>
455 + <td class="val">architectural_-_annotation_scaling_and_multileaders</td>
456 + </tr>
457 + <tr>
458 + <td class="lbl">Generate by:</td>
459 + <td class="val">RE Nur</td>
460 + <td></td>
461 + <td></td>
462 + </tr>
463 + </table>
464 + </div>
465 +
466 + <h2 class="section-heading">Issue Summary</h2>
467 + <table class="summary-table">
468 + <thead>
469 + <tr>
470 + <th>Issue ID</th>
471 + <th>Title</th>
472 + <th>Location</th>
473 + <th>Create by</th>
474 + <th>Status</th>
475 + </tr>
476 + </thead>
477 + <tbody>
478 + <tr>
479 + <td>ISS-TT-002</td>
480 + <td>Test</td>
481 + <td>test</td>
482 + <td>Contractor</td>
483 + <td>
484 + <div class="tbl-status">
485 + <span class="dot dot-open"></span>
486 + <span>Open</span>
487 + </div>
488 + </td>
489 + </tr>
490 + <tr>
491 + <td>ISS-MG-001</td>
492 + <td>Yes</td>
493 + <td>Gambar</td>
494 + <td>Contractor</td>
495 + <td>
496 + <div class="tbl-status">
497 + <span class="dot dot-open"></span>
498 + <span>Open</span>
499 + </div>
500 + </td>
501 + </tr>
502 + </tbody>
503 + </table>
504 +
505 + </div>
506 +
507 + <div class="page">
508 +
509 + <div class="report-header">
510 + <h1 class="report-title">3D COORDINATION ISSUE REPORT</h1>
511 + </div>
512 +
513 + <h2 class="detail-heading">Detailed Issue Report</h2>
514 +
515 + <div class="issue-block">
516 +
517 + <div class="iss-header">
518 + <span class="iss-id">ISS-TT-002</span>
519 + <span class="badge badge-open">
520 + <span class="dot"></span>
521 + Open
522 + </span>
523 + </div>
524 +
525 + <h3 class="iss-title">Test</h3>
526 +
527 + <div class="before-after">
528 + <div class="img-col">
529 + <p class="img-lbl">Before</p>
530 + <img src="https://consdoc-staging-c9df4324-fc51-4201-bae8-244943ac62cf.s3.ap-southeast-1.amazonaws.com/projects/93f542ad-9bf6-4e61-8a70-fc4e38b8ca64/documents/DOC-260611-QLAF8V/markups/MKP-260611-B8ZFZS/VER-260611-K55KV1_REV-260611-51083R_b7b47d83-1927-4e70-b6a8-6fe409899e27.png" alt="Before" class="issue-img" />
531 +
532 + </div>
533 + <div class="img-col">
534 + <p class="img-lbl">After</p>
535 + <div class="img-empty">No image</div>
536 +
537 + </div>
538 + </div>
539 +
540 + <p class="iss-desc">aaa</p>
541 +
542 + <div class="meta-box">
543 + <div class="meta-row cols-4">
544 + <div class="meta-cell">
545 + <span class="meta-key">Location</span>
546 + <span class="meta-val">test</span>
547 + </div>
548 + <div class="meta-cell">
549 + <span class="meta-key">Category</span>
550 + <span class="meta-val">test</span>
551 + </div>
552 + <div class="meta-cell">
553 + <span class="meta-key">Created at</span>
554 + <span class="meta-val">—</span>
555 + </div>
556 + <div class="meta-cell">
557 + <span class="meta-key">Created by</span>
558 + <span class="meta-val">Contractor</span>
559 +
560 + </div>
561 + </div>
562 + <div class="meta-row cols-2">
563 + <div class="meta-cell">
564 + <span class="meta-key">Resolve by</span>
565 + <span class="meta-val"></span>
566 +
567 + </div>
568 + <div class="meta-cell">
569 + <span class="meta-key">Resolve at</span>
570 + <span class="meta-val"></span>
571 +
572 + </div>
573 + </div>
574 + </div>
575 +
576 + <div class="comments-wrap">
577 + <p class="comments-title">Comment (15):</p>
578 + <div class="comment">
579 + <div class="comment-top">
580 + <strong class="comment-author">Contractor</strong>
581 + <span class="comment-date">11 Jun 2026, 11:54</span>
582 + </div>
583 + <p class="comment-text">a</p>
584 + </div>
585 + <div class="comment">
586 + <div class="comment-top">
587 + <strong class="comment-author">Contractor</strong>
588 + <span class="comment-date">11 Jun 2026, 11:54</span>
589 + </div>
590 + <p class="comment-text">b</p>
591 + </div>
592 + <div class="comment">
593 + <div class="comment-top">
594 + <strong class="comment-author">Contractor</strong>
595 + <span class="comment-date">11 Jun 2026, 11:54</span>
596 + </div>
597 + <p class="comment-text">c</p>
598 + </div>
599 + <div class="comment">
600 + <div class="comment-top">
601 + <strong class="comment-author">Contractor</strong>
602 + <span class="comment-date">11 Jun 2026, 11:54</span>
603 + </div>
604 + <p class="comment-text">d</p>
605 + </div>
606 + <div class="comment">
607 + <div class="comment-top">
608 + <strong class="comment-author">Contractor</strong>
609 + <span class="comment-date">11 Jun 2026, 11:54</span>
610 + </div>
611 + <p class="comment-text">e</p>
612 + </div>
613 + <div class="comment">
614 + <div class="comment-top">
615 + <strong class="comment-author">Contractor</strong>
616 + <span class="comment-date">11 Jun 2026, 11:54</span>
617 + </div>
618 + <p class="comment-text">f</p>
619 + </div>
620 + <div class="comment">
621 + <div class="comment-top">
622 + <strong class="comment-author">Contractor</strong>
623 + <span class="comment-date">11 Jun 2026, 11:54</span>
624 + </div>
625 + <p class="comment-text">g</p>
626 + </div>
627 + <div class="comment">
628 + <div class="comment-top">
629 + <strong class="comment-author">Contractor</strong>
630 + <span class="comment-date">11 Jun 2026, 11:54</span>
631 + </div>
632 + <p class="comment-text">h</p>
633 + </div>
634 + <div class="comment">
635 + <div class="comment-top">
636 + <strong class="comment-author">Contractor</strong>
637 + <span class="comment-date">11 Jun 2026, 11:54</span>
638 + </div>
639 + <p class="comment-text">i</p>
640 + </div>
641 + <div class="comment">
642 + <div class="comment-top">
643 + <strong class="comment-author">Contractor</strong>
644 + <span class="comment-date">11 Jun 2026, 11:54</span>
645 + </div>
646 + <p class="comment-text">j</p>
647 + </div>
648 + <div class="comment">
649 + <div class="comment-top">
650 + <strong class="comment-author">Contractor</strong>
651 + <span class="comment-date">11 Jun 2026, 11:55</span>
652 + </div>
653 + <p class="comment-text">k</p>
654 + </div>
655 + <div class="comment">
656 + <div class="comment-top">
657 + <strong class="comment-author">Contractor</strong>
658 + <span class="comment-date">11 Jun 2026, 11:55</span>
659 + </div>
660 + <p class="comment-text">l</p>
661 + </div>
662 + <div class="comment">
663 + <div class="comment-top">
664 + <strong class="comment-author">Contractor</strong>
665 + <span class="comment-date">11 Jun 2026, 11:55</span>
666 + </div>
667 + <p class="comment-text">m</p>
668 + </div>
669 + <div class="comment">
670 + <div class="comment-top">
671 + <strong class="comment-author">Contractor</strong>
672 + <span class="comment-date">11 Jun 2026, 11:55</span>
673 + </div>
674 + <p class="comment-text">n</p>
675 + </div>
676 + <div class="comment">
677 + <div class="comment-top">
678 + <strong class="comment-author">Contractor</strong>
679 + <span class="comment-date">11 Jun 2026, 11:55</span>
680 + </div>
681 + <p class="comment-text">o</p>
682 + </div>
683 + </div>
684 +
685 + </div>
686 + </div>
687 + <div class="page">
688 +
689 +
690 + <div class="issue-block">
691 +
692 + <div class="iss-header">
693 + <span class="iss-id">ISS-MG-001</span>
694 + <span class="badge badge-open">
695 + <span class="dot"></span>
696 + Open
697 + </span>
698 + </div>
699 +
700 + <h3 class="iss-title">Yes</h3>
701 +
702 + <div class="before-after">
703 + <div class="img-col">
704 + <p class="img-lbl">Before</p>
705 + <img src="https://consdoc-staging-c9df4324-fc51-4201-bae8-244943ac62cf.s3.ap-southeast-1.amazonaws.com/projects/93f542ad-9bf6-4e61-8a70-fc4e38b8ca64/documents/DOC-260611-QLAF8V/markups/MKP-260611-JND145/VER-260611-K55KV1_REV-260611-51083R_b7b47d83-1927-4e70-b6a8-6fe409899e27.png" alt="Before" class="issue-img" />
706 +
707 + </div>
708 + <div class="img-col">
709 + <p class="img-lbl">After</p>
710 + <div class="img-empty">No image</div>
711 +
712 + </div>
713 + </div>
714 +
715 + <p class="iss-desc">tesy</p>
716 +
717 + <div class="meta-box">
718 + <div class="meta-row cols-4">
719 + <div class="meta-cell">
720 + <span class="meta-key">Location</span>
721 + <span class="meta-val">Gambar</span>
722 + </div>
723 + <div class="meta-cell">
724 + <span class="meta-key">Category</span>
725 + <span class="meta-val">Media</span>
726 + </div>
727 + <div class="meta-cell">
728 + <span class="meta-key">Created at</span>
729 + <span class="meta-val">—</span>
730 + </div>
731 + <div class="meta-cell">
732 + <span class="meta-key">Created by</span>
733 + <span class="meta-val">Contractor</span>
734 +
735 + </div>
736 + </div>
737 + <div class="meta-row cols-2">
738 + <div class="meta-cell">
739 + <span class="meta-key">Resolve by</span>
740 + <span class="meta-val"></span>
741 +
742 + </div>
743 + <div class="meta-cell">
744 + <span class="meta-key">Resolve at</span>
745 + <span class="meta-val"></span>
746 +
747 + </div>
748 + </div>
749 + </div>
750 +
751 + <div class="comments-wrap">
752 + <p class="comments-title">Comment (5):</p>
753 + <div class="comment">
754 + <div class="comment-top">
755 + <strong class="comment-author">Contractor</strong>
756 + <span class="comment-date">11 Jun 2026, 11:54</span>
757 + </div>
758 + <p class="comment-text">a</p>
759 + </div>
760 + <div class="comment">
761 + <div class="comment-top">
762 + <strong class="comment-author">Contractor</strong>
763 + <span class="comment-date">11 Jun 2026, 11:54</span>
764 + </div>
765 + <p class="comment-text">b</p>
766 + </div>
767 + <div class="comment">
768 + <div class="comment-top">
769 + <strong class="comment-author">Contractor</strong>
770 + <span class="comment-date">11 Jun 2026, 11:54</span>
771 + </div>
772 + <p class="comment-text">c</p>
773 + </div>
774 + <div class="comment">
775 + <div class="comment-top">
776 + <strong class="comment-author">Contractor</strong>
777 + <span class="comment-date">11 Jun 2026, 11:54</span>
778 + </div>
779 + <p class="comment-text">d</p>
780 + </div>
781 + <div class="comment">
782 + <div class="comment-top">
783 + <strong class="comment-author">Contractor</strong>
784 + <span class="comment-date">11 Jun 2026, 11:54</span>
785 + </div>
786 + <p class="comment-text">e</p>
787 + </div>
788 + </div>
789 +
790 + </div>
791 + </div>
792 +
793 + </body>
794 +
795 + </html>
Newer Older

Powered by Opengist ⋅ Load: 32ms⋅

English