Kyeongmin/C.E.L._slide_test
1
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

Vendor templates and prefer local template assets

Browse Source
This commit is contained in:
이경민
2026-04-03 08:44:55 +09:00
parent 81b6289f80
commit adef735228
80 changed files with 5077 additions and 267 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
templates/blocks/emphasis/banner-gradient.html Normal file
View File

@@ -0,0 +1,33 @@
<!-- 그라데이션 배너 바: 전체 너비 파란 그라데이션 + 중앙 텍스트 -->
<!--
📋 banner-gradient
─────────────────
용도: 섹션 구분, 핵심 선언, 강조 문구를 전체 너비 배너로
슬롯: text (필수), sub_text (선택)
Figma 원본: 2-2_01 하단, 2-2_03 분류 바
-->
<div class="block-banner-grad">
<div class="bg-text">{{ text }}</div>
{% if sub_text %}<div class="bg-sub">{{ sub_text }}</div>{% endif %}
</div>
<style>
.block-banner-grad {
background: linear-gradient(135deg, #006aff 0%, #00aaff 100%);
border-radius: 8px;
padding: 16px 30px;
text-align: center;
color: #ffffff;
}
.bg-text {
font-size: 16px;
font-weight: 700;
line-height: 1.5;
}
.bg-sub {
font-size: 12px;
font-weight: 400;
opacity: 0.85;
margin-top: 4px;
}
</style>

55
templates/blocks/emphasis/callout-solution.html Normal file
View File

@@ -0,0 +1,55 @@
<!-- 솔루션 콜아웃: 강조 배경 + 아이콘 + 제목 + 설명 -->
<!--
📋 callout-solution
─────────────────
용도: 핵심 해결책/솔루션/방향성 강조. 눈에 띄는 콜아웃 박스.
슬롯: icon (선택), title (필수), description (필수), source (선택)
Figma 원본: 2-3_05 "Solution 제시 포인트"
-->
<div class="block-callout-sol">
{% if icon %}<div class="cs-icon">{{ icon }}</div>{% endif %}
<div class="cs-body">
<div class="cs-title">{{ title }}</div>
<div class="cs-desc">{{ description }}</div>
{% if source %}<div class="cs-source">{{ source }}</div>{% endif %}
</div>
</div>
<style>
.block-callout-sol {
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
border: 2px solid #93c5fd;
border-radius: var(--radius);
padding: 20px 24px;
display: flex;
gap: 16px;
align-items: flex-start;
}
.cs-icon {
font-size: 2rem;
flex-shrink: 0;
margin-top: 2px;
}
.cs-body {
flex: 1;
}
.cs-title {
font-size: 17px;
font-weight: 800;
color: #1e40af;
margin-bottom: 6px;
}
.cs-desc {
font-size: 14px;
color: #334155;
line-height: 1.7;
white-space: pre-line;
word-break: keep-all;
}
.cs-source {
font-size: 11px;
color: #64748b;
font-style: italic;
margin-top: 8px;
}
</style>

45
templates/blocks/emphasis/callout-warning.html Normal file
View File

@@ -0,0 +1,45 @@
<!-- 경고 콜아웃: 주의/경고/문제점 강조 -->
<!--
📋 callout-warning
─────────────────
용도: 문제점 지적, 주의사항, 잘못된 접근 경고
슬롯: title (필수), description (필수), icon (선택)
callout-solution과 다른 점: 경고 톤 (빨간/주황), 문제 지적용
-->
<div class="block-callout-warn">
{% if icon %}<div class="cw-icon">{{ icon }}</div>{% endif %}
<div class="cw-body">
<div class="cw-title">{{ title }}</div>
<div class="cw-desc">{{ description }}</div>
</div>
</div>
<style>
.block-callout-warn {
background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
border: 2px solid #fca5a5;
border-radius: var(--radius);
padding: 20px 24px;
display: flex;
gap: 16px;
align-items: flex-start;
}
.cw-icon {
font-size: 2rem;
flex-shrink: 0;
}
.cw-body { flex: 1; }
.cw-title {
font-size: 17px;
font-weight: 800;
color: #991b1b;
margin-bottom: 6px;
}
.cw-desc {
font-size: 14px;
color: #7f1d1d;
line-height: 1.7;
white-space: pre-line;
word-break: keep-all;
}
</style>

97
templates/blocks/emphasis/comparison-2col--cards-in-container.html Normal file
View File

@@ -0,0 +1,97 @@
<!-- comparison-2col variant: cards-in-container -->
<!--
📋 comparison-2col--cards-in-container
─────────────────
용도: 포함 관계 시각화 (A 안에 B, C, D가 포함됨)
슬롯: container_label, container_desc, cards[] (각 카드에 letter, label, description)
기존 comparison-2col의 색상 계열 활용
-->
<div class="block-container-cards">
<div class="cc-outer">
<div class="cc-badge">{{ container_label }}</div>
{% if container_desc %}<div class="cc-desc">{{ container_desc }}</div>{% endif %}
<div class="cc-grid" style="--cc-count: {{ cards|length }}">
{% for card in cards %}
<div class="cc-card">
{% if card.letter %}
<div class="cc-icon">{{ card.letter }}</div>
{% endif %}
<div class="cc-label">{{ card.label }}</div>
{% if card.description %}<div class="cc-text">{{ card.description }}</div>{% endif %}
</div>
{% endfor %}
</div>
</div>
</div>
<style>
.block-container-cards {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.cc-outer {
width: 100%;
border: 3px solid #2563eb;
border-radius: 14px;
padding: 16px 14px 12px;
background: linear-gradient(180deg, #eff6ff, #dbeafe);
position: relative;
}
.cc-badge {
position: absolute;
top: -11px;
left: 50%;
transform: translateX(-50%);
background: #2563eb;
color: #ffffff;
font-size: 12px;
font-weight: 900;
padding: 3px 18px;
border-radius: 10px;
white-space: nowrap;
}
.cc-desc {
text-align: center;
font-size: 11px;
color: #1e40af;
margin-bottom: 10px;
}
.cc-grid {
display: grid;
grid-template-columns: repeat(var(--cc-count, 3), 1fr);
gap: 10px;
}
.cc-card {
background: #ffffff;
border: 2px solid #93c5fd;
border-radius: 8px;
padding: 10px;
text-align: center;
}
.cc-icon {
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, #93c5fd, #2563eb);
color: #ffffff;
font-size: 16px;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 6px;
}
.cc-label {
font-size: 13px;
font-weight: 700;
color: #1e293b;
margin-bottom: 3px;
}
.cc-text {
font-size: 10px;
color: #64748b;
line-height: 1.5;
}
</style>

52
templates/blocks/emphasis/comparison-2col.html Normal file
View File

@@ -0,0 +1,52 @@
<!-- 비교 블록: 2단 병렬 레이아웃 -->
<div class="block-comparison">
<div class="comparison-left">
<div class="comparison-header comparison-header--left">{{ left_title }}</div>
{% if left_subtitle %}<div class="comparison-subtitle">{{ left_subtitle }}</div>{% endif %}
<div class="comparison-content">{{ left_content }}</div>
</div>
<div class="comparison-divider"></div>
<div class="comparison-right">
<div class="comparison-header comparison-header--right">{{ right_title }}</div>
{% if right_subtitle %}<div class="comparison-subtitle">{{ right_subtitle }}</div>{% endif %}
<div class="comparison-content">{{ right_content }}</div>
</div>
</div>
<style>
.block-comparison {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: var(--spacing-inner);
height: 100%;
}
.comparison-divider {
width: 1px;
background: var(--color-border);
}
.comparison-header {
font-size: var(--font-subtitle);
font-weight: var(--weight-bold);
padding-bottom: var(--spacing-small);
margin-bottom: var(--spacing-small);
border-bottom: var(--accent-border) solid;
}
.comparison-header--left {
border-color: var(--color-accent);
color: var(--color-accent);
}
.comparison-header--right {
border-color: var(--color-danger);
color: var(--color-danger);
}
.comparison-subtitle {
font-size: var(--font-caption);
color: var(--color-text-secondary);
margin-bottom: var(--spacing-small);
}
.comparison-content {
white-space: pre-line;
font-size: var(--font-body);
line-height: var(--line-height-ko);
}
</style>

65
templates/blocks/emphasis/dark-bullet-list--before-after.html Normal file
View File

@@ -0,0 +1,65 @@
<!-- dark-bullet-list variant: before-after -->
<!--
📋 dark-bullet-list--before-after
─────────────────
용도: 기존 방식 → 새 방식 전환/변화를 보여줄 때
슬롯: title (선택), changes[] (각 항목에 label, before, after)
기존 dark-bullet-list의 색상/배경/radius 그대로 사용
-->
<div class="block-dark-bullets">
{% if title %}<div class="db-title">{{ title }}</div>{% endif %}
<div class="db-changes">
{% for item in changes %}
<div class="db-change">
<div class="db-change-label">{{ item.label }}</div>
<div class="db-change-before">{{ item.before }}</div>
<div class="db-change-after">→ {{ item.after }}</div>
</div>
{% endfor %}
</div>
</div>
<style>
/* 기존 dark-bullet-list CSS 재사용 */
.block-dark-bullets {
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
border-radius: 8px;
padding: 14px 20px;
color: #ffffff;
}
.db-title {
font-size: 13px;
font-weight: 700;
margin-bottom: 8px;
color: #93c5fd;
}
/* variant: before-after 2열 구조 */
.db-changes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 6px;
}
.db-change {
background: rgba(255,255,255,0.06);
border-radius: 6px;
padding: 8px 10px;
border-left: 3px solid #60a5fa;
}
.db-change-label {
font-size: 11px;
font-weight: 700;
color: #93c5fd;
margin-bottom: 3px;
}
.db-change-before {
font-size: 10px;
color: #94a3b8;
text-decoration: line-through;
}
.db-change-after {
font-size: 11px;
color: #e2e8f0;
font-weight: 500;
margin-top: 2px;
}
</style>

48
templates/blocks/emphasis/dark-bullet-list.html Normal file
View File

@@ -0,0 +1,48 @@
<!-- 다크 배경 불릿 리스트: 짙은 배경 + 흰 텍스트 불릿 목록 -->
<!--
📋 dark-bullet-list
─────────────────
용도: 핵심 포인트를 짙은 배경 위에 강조. 시각적 무게감.
슬롯: title (선택), bullets[] (필수)
Figma 원본: 2-2_01 하단, 2-3_01 하단 다크 섹션
-->
<div class="block-dark-bullets">
{% if title %}<div class="db-title">{{ title }}</div>{% endif %}
<ul class="db-list">
{% for item in bullets %}
<li>{{ item }}</li>
{% endfor %}
</ul>
</div>
<style>
.block-dark-bullets {
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
border-radius: 8px;
padding: 20px 28px;
color: #ffffff;
}
.db-title {
font-size: 16px;
font-weight: 700;
margin-bottom: 12px;
color: #93c5fd;
}
.db-list {
list-style: none;
padding: 0;
}
.db-list li {
font-size: 14px;
line-height: 1.8;
padding-left: 16px;
position: relative;
margin-bottom: 4px;
}
.db-list li::before {
content: '•';
position: absolute;
left: 0;
color: #60a5fa;
}
</style>

32
templates/blocks/emphasis/divider-text.html Normal file
View File

@@ -0,0 +1,32 @@
<!-- 텍스트 구분선: 좌우 선 + 중앙 텍스트 -->
<!--
📋 divider-text
─────────────────
용도: 섹션 구분, 주제 전환, 시각적 휴식점
슬롯: text (필수)
-->
<div class="block-divider-text">
<div class="dt-line"></div>
<div class="dt-text">{{ text }}</div>
<div class="dt-line"></div>
</div>
<style>
.block-divider-text {
display: flex;
align-items: center;
gap: 16px;
padding: 8px 0;
}
.dt-line {
flex: 1;
height: 1px;
background: #cbd5e1;
}
.dt-text {
font-size: 13px;
font-weight: 600;
color: #64748b;
white-space: nowrap;
}
</style>

31
templates/blocks/emphasis/highlight-strip.html Normal file
View File

@@ -0,0 +1,31 @@
<!-- 강조 스트립: 3구간 색상 분류 바 -->
<!--
📋 highlight-strip
─────────────────
용도: 카테고리별 색상 분류 (예: 상용/범용/전문), 비교 카드 상단 헤더
슬롯: segments[] (각 구간에 label, color)
Figma 원본: 2-2_03 "상용 | 3rd Party(범용) | 전문·전용 S/W" 색상 바
-->
<div class="block-strip">
{% for seg in segments %}
<div class="strip-seg" style="background: {{ seg.color | default('#2563eb') }}; flex: {{ seg.flex | default(1) }}">
{{ seg.label }}
</div>
{% endfor %}
</div>
<style>
.block-strip {
display: flex;
border-radius: 6px;
overflow: hidden;
}
.strip-seg {
padding: 10px 16px;
color: #ffffff;
font-size: 14px;
font-weight: 700;
text-align: center;
white-space: nowrap;
}
</style>

59
templates/blocks/emphasis/quote-big-mark.html Normal file
View File

@@ -0,0 +1,59 @@
<!-- 큰따옴표 장식 인용: ❝❞ 큰따옴표 + 인용 텍스트 -->
<!--
📋 quote-big-mark
─────────────────
용도: 문제 제기, 핵심 발언, 임팩트 있는 인용
슬롯: quote_text (필수), source (선택)
Figma 원본: DX와 BIM 슬라이드 상단 인용 박스 (큰따옴표 장식)
-->
<div class="block-quote-big">
<div class="qb-mark qb-open">❝</div>
<div class="qb-content">
<div class="qb-text">{{ quote_text }}</div>
{% if source %}<div class="qb-source">— {{ source }}</div>{% endif %}
</div>
<div class="qb-mark qb-close">❞</div>
</div>
<style>
.block-quote-big {
background: #f8fafc;
border-radius: var(--radius);
padding: 24px 28px;
position: relative;
border: 1px solid #e2e8f0;
}
.qb-mark {
font-size: 3rem;
color: #cbd5e1;
font-weight: 900;
line-height: 1;
position: absolute;
}
.qb-open {
top: 8px;
left: 12px;
}
.qb-close {
bottom: -8px;
right: 16px;
}
.qb-content {
padding: 10px 30px 0;
}
.qb-text {
font-size: 15px;
font-weight: 500;
color: #1e293b;
line-height: 1.8;
word-break: keep-all;
white-space: pre-line;
}
.qb-source {
font-size: 12px;
color: #64748b;
font-style: italic;
margin-top: 10px;
text-align: right;
}
</style>

37
templates/blocks/emphasis/quote-question.html Normal file
View File

@@ -0,0 +1,37 @@
<!-- 질문형 강조 박스: 큰 질문 텍스트 + 부연 설명 -->
<!--
📋 quote-question
─────────────────
용도: 독자에게 질문 던지기, 문제 인식 유도, 전환점 강조
슬롯: question (필수), description (선택)
Figma 원본: 2-3_05 "지금의 방식으로도 가능할까?"
-->
<div class="block-quote-q">
<div class="qq-question">{{ question }}</div>
{% if description %}<div class="qq-desc">{{ description }}</div>{% endif %}
</div>
<style>
.block-quote-q {
background: linear-gradient(135deg, #f0f7ff 0%, #e8f1fb 100%);
border: 2px solid #b8d4f0;
border-radius: var(--radius);
padding: 28px 36px;
text-align: center;
}
.qq-question {
font-size: 22px;
font-weight: 800;
color: #1e3a5f;
line-height: 1.5;
word-break: keep-all;
}
.qq-desc {
white-space: pre-line;
font-size: 14px;
color: #4a6b8a;
margin-top: 10px;
line-height: 1.7;
word-break: keep-all;
}
</style>

39
templates/blocks/emphasis/tab-label-row.html Normal file
View File

@@ -0,0 +1,39 @@
<!-- 탭 라벨 행: 가로로 나열된 탭 버튼 형태 -->
<!--
📋 tab-label-row
─────────────────
용도: 카테고리 전환, 분류 표시, 선택된 항목 강조
슬롯: tabs[] (각 탭에 label, active, color)
Figma 원본: 2-3_02 상단 "건축과 인프라의 건설프로세스 특성" 탭, 2-2_01 탭
-->
<div class="block-tab-row">
{% for tab in tabs %}
<div class="tr-tab {% if tab.active %}tr-active{% endif %}" style="{% if tab.active %}background: {{ tab.color | default('#2563eb') }}{% endif %}">
{{ tab.label }}
</div>
{% endfor %}
</div>
<style>
.block-tab-row {
display: flex;
gap: 4px;
background: #f1f5f9;
border-radius: 8px;
padding: 4px;
}
.tr-tab {
flex: 1;
padding: 10px 16px;
text-align: center;
font-size: 14px;
font-weight: 600;
color: #64748b;
border-radius: 6px;
cursor: default;
}
.tr-active {
color: #ffffff;
font-weight: 700;
}
</style>