kyeongmin
51548fdc41
figma_to_html_agent/: - Figma MCP 기반 블록 추출 에이전트 (CLAUDE.md, PLAN.md, PROCESS.md 등) - block-tests/: Figma→HTML 변환 결과물 (bim-3roles-cards 등) - templates_staging/: Jinja2 템플릿 + meta.yaml + example.yaml - figma-analysis/, figma-assets/: Figma 분석 데이터 + 에셋 - scripts/: gradient_math.py 등 유틸리티 설정: - .mcp.json: Figma MCP 서버 연결 설정 - .claude/settings.json: Claude Code 프로젝트 설정 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
106 lines
2.8 KiB
HTML
106 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=1280">
|
||
<title>BIM 미래 선언 (Frame 1171281207)</title>
|
||
<!--
|
||
============================================================
|
||
Figma → HTML 1:1 변환
|
||
원본: 3547 × 163 px (node 51:170, Frame 1171281207)
|
||
Scale: × 0.36088 → 1280 × 58.8 px
|
||
|
||
패턴: statement-pill-highlight
|
||
단일 메시지 + 일부 span highlighted + pill 배경 PNG
|
||
============================================================
|
||
-->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@700&display=swap" rel="stylesheet">
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
||
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: 1280px; height: 720px;
|
||
background: #ffffff;
|
||
position: relative;
|
||
display: flex; justify-content: center; align-items: center;
|
||
box-shadow: 0 4px 20px rgba(0, 0, 0, .15);
|
||
}
|
||
|
||
.block {
|
||
width: 1280px;
|
||
height: 58.8px; /* 163 × 0.36088 */
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.inner {
|
||
position: absolute;
|
||
left: 0; top: 0;
|
||
width: 3547px;
|
||
height: 163px;
|
||
transform: scale(0.360869);
|
||
transform-origin: top left;
|
||
}
|
||
|
||
/* 배경 pill (CSS gradient, border-radius 97 = 완전 캡슐)
|
||
원본 이미지 픽셀 분석:
|
||
x=5%: #3b3523, x=50%: #263a2a, x=95%: #113f31
|
||
수직: 균일 (수평 gradient만)
|
||
→ linear-gradient(90deg, ...)
|
||
원본에 미세한 네트워크 텍스처 패턴 있었으나 CSS gradient로 대체
|
||
*/
|
||
.banner-bg {
|
||
position: absolute;
|
||
left: 0; top: 0;
|
||
width: 3547px;
|
||
height: 163px;
|
||
border-radius: 97px;
|
||
background: linear-gradient(90deg, #3b3523 5%, #263a2a 50%, #113f31 95%);
|
||
}
|
||
|
||
/* 텍스트: center (1671.5, 78), font 80 Bold White, line-height 90 */
|
||
.banner-text {
|
||
position: absolute;
|
||
/* translate-x-1/2 translate-y-1/2 → top-left = (center - w/2, center - h/2) */
|
||
left: 205px; /* 1671.5 - 2933/2 = 205 */
|
||
top: 33px; /* 78 - 90/2 = 33 */
|
||
width: 2933px;
|
||
height: 90px;
|
||
font-weight: 700;
|
||
font-size: 80px;
|
||
line-height: 90px;
|
||
color: #ffffff;
|
||
text-align: center;
|
||
letter-spacing: -0.16px;
|
||
text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
|
||
white-space: nowrap;
|
||
word-break: keep-all;
|
||
}
|
||
.banner-text .highlight {
|
||
color: #fe3; /* highlighted span (yellow) */
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="slide">
|
||
<div class="block">
|
||
<div class="inner">
|
||
<div class="banner-bg"></div>
|
||
<div class="banner-text">수행과정 연속화와 관리체계 일원화된 형태의 <span class="highlight">전용ㆍ전문 S/W 개발</span> 없이는 미래가 없다.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|