Figma-to-HTML 에이전트 초기 커밋
- 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>
This commit is contained in:
171
block-tests/bim-info-products.html
Normal file
171
block-tests/bim-info-products.html
Normal file
@@ -0,0 +1,171 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1280">
|
||||
<title>시공상세 정보물 (Frame 1171281180)</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; }
|
||||
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;
|
||||
}
|
||||
.slide {
|
||||
width: 1280px; height: 657px;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,.15);
|
||||
}
|
||||
.block {
|
||||
width: 1280px; height: 657px;
|
||||
position: relative; overflow: hidden;
|
||||
}
|
||||
/* Scale UP: 원본이 1153로 1280보다 작음. 확대. */
|
||||
.inner {
|
||||
position: absolute; left: 0; top: 0;
|
||||
width: 1153px; height: 591.92px;
|
||||
transform: scale(1.11014);
|
||||
transform-origin: top left;
|
||||
}
|
||||
|
||||
/* 타이틀 배경 bar */
|
||||
.title-bar {
|
||||
position: absolute;
|
||||
left: 12px; top: 47px;
|
||||
width: 1141px; height: 29px;
|
||||
background: #fbd5b9;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 4px 4px rgba(0,0,0,0.25);
|
||||
}
|
||||
|
||||
/* 타이틀 텍스트 */
|
||||
.title-text {
|
||||
position: absolute;
|
||||
left: 53px; top: 0;
|
||||
width: 1078px; height: 76px;
|
||||
font-weight: 700;
|
||||
font-size: 43px;
|
||||
line-height: 76px;
|
||||
color: #144838;
|
||||
text-align: center;
|
||||
letter-spacing: -2.25px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.title-text .hl {
|
||||
font-weight: 900;
|
||||
font-size: 50px;
|
||||
background-image: linear-gradient(90deg, #cc5200 0%, #cc5200 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
/* 좌측 원호 장식 */
|
||||
.left-arc {
|
||||
position: absolute;
|
||||
left: 12px; top: 117px;
|
||||
width: 200.7px; height: 474.92px;
|
||||
}
|
||||
.left-arc img { width: 105%; height: 103%; display: block; }
|
||||
|
||||
/* 좌측 세로 라벨 */
|
||||
.left-label {
|
||||
position: absolute;
|
||||
left: 0; top: 228px;
|
||||
width: 125px; height: 228px;
|
||||
font-weight: 700;
|
||||
font-size: 45px;
|
||||
line-height: 76px;
|
||||
color: #144838;
|
||||
text-align: center;
|
||||
text-shadow: 0 4px 4px rgba(0,0,0,0.25);
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 아이템 rows */
|
||||
.item-row {
|
||||
position: absolute;
|
||||
height: 70px;
|
||||
background: rgba(255,255,255,0.5);
|
||||
border-radius: 30px;
|
||||
box-shadow: 2px 4px 5px rgba(0,0,0,0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
padding: 10px 20px;
|
||||
border-bottom-width: 3px;
|
||||
border-bottom-style: solid;
|
||||
}
|
||||
.item-row .arrow {
|
||||
flex: none;
|
||||
width: 16.8px; height: 22.4px;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
.item-row .arrow img { width: 100%; height: 100%; }
|
||||
.item-row .text {
|
||||
font-weight: 500;
|
||||
font-size: 38px;
|
||||
line-height: 75px;
|
||||
color: #000;
|
||||
letter-spacing: -1.14px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 각 row 위치 + border 색 (Figma 좌표 그대로) */
|
||||
.item-1 { left: 65px; top: 128.89px; width: 1088px; border-bottom-color: #fb5915; }
|
||||
.item-2 { left: 137px; top: 220.89px; width: 1016px; border-bottom-color: #e79000; }
|
||||
.item-3 { left: 166px; top: 318.89px; width: 987px; border-bottom-color: #e9a804; }
|
||||
.item-4 { left: 137px; top: 420.89px; width: 1016px; border-bottom-color: #919f00; }
|
||||
.item-5 { left: 65px; top: 508.89px; width: 1088px; border-bottom-color: #0d6361; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="slide">
|
||||
<div class="block">
|
||||
<div class="inner">
|
||||
|
||||
<div class="title-bar"></div>
|
||||
<div class="title-text">시공 전 모델 기반 <span class="hl">시공상세 정보물</span> 이용한 시공계획 작성 지원</div>
|
||||
|
||||
<div class="left-arc"><img src="assets/shared/ff649c28fd98518d6b48b9e5451fe1da4c1e95d5.svg" alt=""></div>
|
||||
<div class="left-label">시공<br>상세<br>정보물</div>
|
||||
|
||||
<div class="item-row item-1">
|
||||
<div class="arrow"><img src="assets/shared/29c778b566aca6778f505874f21670de129351f8.svg" alt=""></div>
|
||||
<div class="text">3차원 형상의 정보 모델과 Data Base (D/B)</div>
|
||||
</div>
|
||||
|
||||
<div class="item-row item-2">
|
||||
<div class="arrow"><img src="assets/shared/29c778b566aca6778f505874f21670de129351f8.svg" alt=""></div>
|
||||
<div class="text">목적물, 가시설 등의 단계별 시공 시뮬레이션</div>
|
||||
</div>
|
||||
|
||||
<div class="item-row item-3">
|
||||
<div class="arrow"><img src="assets/shared/29c778b566aca6778f505874f21670de129351f8.svg" alt=""></div>
|
||||
<div class="text">시공 및 안전교육에 도움이 되는 영상물 등 성과물</div>
|
||||
</div>
|
||||
|
||||
<div class="item-row item-4">
|
||||
<div class="arrow"><img src="assets/shared/29c778b566aca6778f505874f21670de129351f8.svg" alt=""></div>
|
||||
<div class="text">모델 또는 D/B, 시뮬레이션으로 부터 추출한 도면</div>
|
||||
</div>
|
||||
|
||||
<div class="item-row item-5">
|
||||
<div class="arrow"><img src="assets/shared/29c778b566aca6778f505874f21670de129351f8.svg" alt=""></div>
|
||||
<div class="text">모델에서 추출이 곤란한 안전, 유의사항, 개념도 등 상세 표현 도면</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user