diff --git a/templates/phase_z2/families/app_sw_package_vs_solution.html b/templates/phase_z2/families/app_sw_package_vs_solution.html new file mode 100644 index 0000000..5057fd5 --- /dev/null +++ b/templates/phase_z2/families/app_sw_package_vs_solution.html @@ -0,0 +1,242 @@ + +{# +───────────────────────────────────────────────────────────────────────────── +Visual Provenance — figma_to_html_agent/blocks/1171281203/ (frame 23) +───────────────────────────────────────────────────────────────────────────── +Frame 23 = "Application S/W 의 구분". +구조 (figma 1:1) : + ① title gradient (Application S/W = orange→brown, 의 구분 = green→black) + ② CSS Grid table (label col + col_a + col_b) + ③ header row : + - col 1 (label) = teal #589e8d + - col 2 (Package) = teal #589e8d + - col 3 (Solution) = orange #ef7a26 + ④ N data rows : zebra (odd 흰 0.85 / even peach rgba(253,198,158,0.2)) + - 각 row : 좌측 label cell + 좌 data + 우 data + - cell border : 1.5px solid #888 + ⑤ bullet (•) + accent (.hl orange #a14101, .big 50px 강조) + +slots (bim_dx_comparison_table 와 동일 — builder = process_product_pair) : + - title : section.title (zone 중목차) + - col_a_label / col_b_label : h3 title (Package / Solution 또는 mdx h3 title) + - col_a_body.sections[].title : subsection title (= row label) + - col_a_body.sections[].text_lines / transforms + - col_b_body : same + +Axis A+B fit — container query (cqh) + jinja line count 산식. +───────────────────────────────────────────────────────────────────────────── +#} + + + +
+ +
{{ slot_payload.title }}
+ +
+ {# header row — 2 col (label col 제거, 사용자 lock 2026-05-15) #} +
{{ slot_payload.col_a_label | safe }}
+
{{ slot_payload.col_b_label | safe }}
+ + {# data rows — col_a_body.sections 와 col_b_body.sections 를 row 별 페어 #} + {% set a_secs = slot_payload.col_a_body.sections or [] %} + {% set b_secs = slot_payload.col_b_body.sections or [] %} + {% set row_count = [a_secs | length, b_secs | length] | max %} + {% for i in range(row_count) %} + {% set a = a_secs[i] if i < (a_secs | length) else none %} + {% set b = b_secs[i] if i < (b_secs | length) else none %} + {% set row_class = 'f23b__row--' ~ ('odd' if loop.index0 % 2 == 0 else 'even') %} + + {# col_a cell #} +
+ {% if a %} + {% if a.title %}
{{ a.title | safe }}
{% endif %} + {% if a.transforms %} +
+
+ AS-IS + + TO-BE +
+ {% for t in a.transforms %} +
+
{{ t.from | safe }}
+
➜
+
{{ t.to | safe }}
+
+ {% endfor %} +
+ {% elif a.text_lines %} + {% for line in a.text_lines %}
{{ line.text | safe }}
{% endfor %} + {% endif %} + {% endif %} +
+ + {# col_b cell #} +
+ {% if b %} + {% if b.title %}
{{ b.title | safe }}
{% endif %} + {% if b.transforms %} +
+
+ AS-IS + + TO-BE +
+ {% for t in b.transforms %} +
+
{{ t.from | safe }}
+
➜
+
{{ t.to | safe }}
+
+ {% endfor %} +
+ {% elif b.text_lines %} + {% for line in b.text_lines %}
{{ line.text | safe }}
{% endfor %} + {% endif %} + {% endif %} +
+ {% endfor %} +
+
diff --git a/templates/phase_z2/families/pre_construction_model_info_stacked.html b/templates/phase_z2/families/pre_construction_model_info_stacked.html new file mode 100644 index 0000000..b48c917 --- /dev/null +++ b/templates/phase_z2/families/pre_construction_model_info_stacked.html @@ -0,0 +1,194 @@ + +{# +───────────────────────────────────────────────────────────────────────────── +Visual Provenance — figma_to_html_agent/blocks/1171281180/index.html +───────────────────────────────────────────────────────────────────────────── +PROMOTED (Figma 1:1): + - title-bar background : #fbd5b9 (line 43) + box-shadow + - title text gradient : #cc5200 (line 128) 강조부 + - vertical label color : #144838 (line 68) + text-shadow drop + - pill background : rgba(255,255,255,0.5) (line 88) + - pill border-radius : 30px (line 89) + - pill box-shadow : 2px 4px 5px rgba(0,0,0,0.5) (line 90) + - 5 pill border-bottom 색상 (line 141, 147, 153, 159, 165): + 1: #fb5915, 2: #e79000, 3: #e9a804, 4: #919f00, 5: #0d6361 + +ADAPTED (zone flex 재구성): + - 1153×592 absolute → flex column layout + - pill height 70px hardcode → dynamic (콘텐츠 양에 따라 auto) + - 계단 배치 (width/margin-left hardcode) → 가운데 정렬 + width 100% + (계단은 1 라인 짧은 텍스트 전제, multi-line 콘텐츠엔 부적합) + - 1 pill 1 라인 → pill_N_label (title) + pill_N_body (text_lines) + (사용자 룰 = frame 구조를 콘텐츠에 맞춰 보완) + +NOT PROMOTED: + - 좌측 arc-deco SVG (장식 — 공간 절약 위해 단순화) + - arrow PNG (CSS triangle 대체 가능, 일단 ▶ 문자 사용) + +slots : title + pill_N_label / pill_N_body (N = 1.._slot_count) — dynamic. +#} + + + +
+
{{ slot_payload.title }}
+
+ {# vertical label — slot_payload.vlabel 있을 때만 표시 (현재 v0 미사용) #} + {% if slot_payload.vlabel %} +
{{ slot_payload.vlabel | safe }}
+ {% endif %} + +
+ {% set slot_count = slot_payload._slot_count or 5 %} + {% for n in range(1, slot_count + 1) %} + {% set label = slot_payload['pill_' ~ n ~ '_label'] %} + {% set body = slot_payload['pill_' ~ n ~ '_body'] %} + {% if label or body %} +
+ {% if label %} +
{{ label | safe }}
+ {% endif %} + {% if body %} +
+ {% for line in body %}
{{ line.text | safe }}
{% endfor %} +
+ {% endif %} +
+ {% endif %} + {% endfor %} +
+
+