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>
98 lines
2.8 KiB
Django/Jinja
98 lines
2.8 KiB
Django/Jinja
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=1280">
|
|
<title>{{ title|default("statement-pill-highlight") }}</title>
|
|
<!--
|
|
Pattern: statement-pill-highlight
|
|
Origin: 51:170 / Frame 1171281207
|
|
Single-line statement banner with optional inline highlighted segments.
|
|
pill 모양 (border-radius = height/2) + 배경 이미지(또는 단색) + 텍스트 + highlight 색
|
|
-->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
:root {
|
|
--block-w: {{ block_w|default(1280) }}px;
|
|
--block-h: {{ block_h|default(60) }}px;
|
|
--slide-h: {{ slide_h|default(720) }}px;
|
|
--font-size: {{ font_size|default("1.6rem") }};
|
|
--font-weight: {{ font_weight|default(700) }};
|
|
--text-color: {{ text_color|default("#ffffff") }};
|
|
--highlight-color: {{ highlight_color|default("#fe3") }};
|
|
--bg-color: {{ bg_color|default("#3a4a2f") }};
|
|
--text-shadow-color: {{ text_shadow_color|default("rgba(0,0,0,0.5)") }};
|
|
--text-shadow-blur: {{ text_shadow_blur|default("4px") }};
|
|
--inner-padding-x: {{ inner_padding_x|default("3.5%") }};
|
|
}
|
|
body {
|
|
font-family: 'Noto Sans KR', sans-serif;
|
|
background: #e8ecf0;
|
|
display: flex; justify-content: center; align-items: center;
|
|
min-height: 100vh;
|
|
padding: 20px;
|
|
}
|
|
.slide {
|
|
width: var(--block-w);
|
|
height: var(--slide-h);
|
|
background: #ffffff;
|
|
position: relative;
|
|
display: flex; justify-content: center; align-items: center;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, .15);
|
|
}
|
|
.banner-pill {
|
|
width: var(--block-w);
|
|
height: var(--block-h);
|
|
border-radius: calc(var(--block-h) / 2); /* 완전 캡슐 */
|
|
background: var(--bg-color);
|
|
position: relative;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 var(--inner-padding-x);
|
|
}
|
|
{% if bg_image %}
|
|
.banner-pill .bg {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%; height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
{% endif %}
|
|
.banner-pill .text {
|
|
position: relative;
|
|
z-index: 2;
|
|
font-weight: var(--font-weight);
|
|
font-size: var(--font-size);
|
|
color: var(--text-color);
|
|
letter-spacing: -0.01em;
|
|
text-shadow: 0 0 var(--text-shadow-blur) var(--text-shadow-color);
|
|
white-space: nowrap;
|
|
text-align: center;
|
|
}
|
|
.banner-pill .highlight {
|
|
color: var(--highlight-color);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="slide">
|
|
<div class="banner-pill">
|
|
{% if bg_image %}<img class="bg" src="{{ bg_image }}" alt="">{% endif %}
|
|
<div class="text">{% for seg in text_segments -%}
|
|
{%- if seg.highlight -%}
|
|
<span class="highlight">{{ seg.text }}</span>
|
|
{%- else -%}
|
|
<span>{{ seg.text }}</span>
|
|
{%- endif -%}
|
|
{%- endfor %}</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|