kyeongmin
beb5fd0c61
- 10단계 변환 프로세스 (PROCESS.md) - 수학 공식 레퍼런스 (MATH.md, gradient_math.py) - CSS 보정 규칙 R1~R16 (RULES.md) - 작업 규율 7개 규칙 (PROCESS-CONTROL.md) - 8개 Figma 프레임 1:1 HTML 변환물 (block-tests/) - 8개 Jinja2 템플릿 staging (templates_staging/) - 변환 완료 도서관 + 디자인 인사이트 (blocks_index.md) - 사용법 가이드 (README.md) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
123 lines
4.4 KiB
Django/Jinja
123 lines
4.4 KiB
Django/Jinja
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>{{ title|default("split-panel-numbered") }}</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500;700;900&display=swap" rel="stylesheet">
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
:root {
|
|
--block-w: {{ block_w|default(1280) }}px;
|
|
--left-w: {{ left_w|default("55%") }};
|
|
--right-w: {{ right_w|default("45%") }};
|
|
}
|
|
body {
|
|
font-family: 'Noto Sans KR', sans-serif;
|
|
background: #e8ecf0;
|
|
display: flex; justify-content: center; align-items: center;
|
|
min-height: 100vh; padding: 20px;
|
|
word-break: keep-all;
|
|
}
|
|
.block {
|
|
width: var(--block-w);
|
|
background: #fff;
|
|
box-shadow: 0 4px 20px rgba(0,0,0,.15);
|
|
padding: 1.2rem 1.5rem;
|
|
}
|
|
.header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.8rem; }
|
|
.header-icon { width: 1.5rem; height: 1.5rem; flex: none; }
|
|
.header-icon img { width: 100%; height: 100%; }
|
|
.header-title { font-weight: 900; font-size: 1.5rem; }
|
|
.header-title .hl {
|
|
font-size: 2rem;
|
|
background-image: linear-gradient(180deg, #cc5200, #883700);
|
|
-webkit-background-clip: text; background-clip: text; color: transparent;
|
|
}
|
|
.header-title .sub {
|
|
background-image: linear-gradient(180deg, #296b55, #000);
|
|
-webkit-background-clip: text; background-clip: text; color: transparent;
|
|
}
|
|
.content { display: flex; gap: 0.8rem; }
|
|
.left-panel {
|
|
flex: none; width: var(--left-w);
|
|
position: relative; border-radius: 0.8rem; overflow: hidden;
|
|
min-height: 20rem;
|
|
}
|
|
.left-panel .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
|
|
.left-panel .categories { position: relative; z-index: 2; padding: 0.8rem; display: flex; flex-direction: column; gap: 0.5rem; }
|
|
.cat { }
|
|
.cat .cat-header {
|
|
font-weight: 700; font-size: 1.15rem; color: #fff;
|
|
padding: 0.3rem 0.6rem; border-radius: 0.3rem;
|
|
text-shadow: 0 0 4px rgba(0,0,0,0.5);
|
|
position: relative; overflow: hidden;
|
|
}
|
|
.cat .cat-header img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
|
|
.cat .cat-header .text { position: relative; z-index: 1; }
|
|
.cat .sw-list {
|
|
font-weight: 500; font-size: 0.95rem; line-height: 1.6;
|
|
color: #000; padding: 0.3rem 0.5rem;
|
|
text-shadow: 0 0 3px rgba(0,0,0,0.3);
|
|
}
|
|
.right-panel { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; }
|
|
.numbered-item {
|
|
display: flex; align-items: center; gap: 0.6rem;
|
|
position: relative; padding: 0.5rem 0.8rem;
|
|
border-radius: 0.4rem; overflow: hidden;
|
|
}
|
|
.numbered-item .bar-bg {
|
|
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
|
|
}
|
|
.numbered-item .badge { flex: none; width: 2.5rem; height: 2.6rem; position: relative; z-index: 1; }
|
|
.numbered-item .badge img { width: 100%; height: 100%; }
|
|
.numbered-item .desc {
|
|
flex: 1; font-weight: 500; font-size: 1.15rem;
|
|
color: #11231d; position: relative; z-index: 1;
|
|
text-shadow: 0 0 3px rgba(0,0,0,0.3);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="block">
|
|
{% if header %}
|
|
<div class="header">
|
|
{% if header.icon %}<div class="header-icon"><img src="{{ header.icon }}" alt=""></div>{% endif %}
|
|
<div class="header-title">{% for seg in header.segments -%}
|
|
{%- if seg.style == 'highlight' -%}<span class="hl">{{ seg.text }}</span>
|
|
{%- elif seg.style == 'sub' -%}<span class="sub">{{ seg.text }}</span>
|
|
{%- else -%}<span>{{ seg.text }}</span>{%- endif -%}
|
|
{%- endfor %}</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="content">
|
|
<div class="left-panel">
|
|
{% if left_bg %}<img class="bg" src="{{ left_bg }}" alt="">{% endif %}
|
|
<div class="categories">
|
|
{% for cat in left_categories %}
|
|
<div class="cat">
|
|
<div class="cat-header">
|
|
{% if cat.header_image %}<img src="{{ cat.header_image }}" alt="">{% endif %}
|
|
<span class="text">{{ cat.title }}</span>
|
|
</div>
|
|
<div class="sw-list">{{ cat.items|join('<br>')|safe }}</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="right-panel">
|
|
{% for item in right_items %}
|
|
<div class="numbered-item">
|
|
{% if item.bar_bg %}<img class="bar-bg" src="{{ item.bar_bg }}" alt="">{% endif %}
|
|
{% if item.badge %}<div class="badge"><img src="{{ item.badge }}" alt=""></div>{% endif %}
|
|
<div class="desc">{{ item.text }}</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|