kyeongmin
9fbe3ac90c
전체 401 files (397 추가 + 4 수정), 14304 insertions.
추가:
- figma_to_html_agent/blocks/ — Figma 변환 결과 (32 frame, ~79MB).
각 frame folder = {analysis.md, flat.md, texts.md, index.html, assets/,
_renders/, _render.py, RELATIONSHIPS.md / STATUS.md / classification.md
(일부 frame)}.
Phase Z 의 *figma source layer* — runtime 에서 직접 사용 X, contract /
partial / builder adapter (미래 axis A) 의 source.
- figma_to_html_agent/DISCUSSION-SUMMARY-20260411.md — 변환 설계 회의 기록.
- figma_to_html_agent/HARNESS.md — 변환 검증 harness.
- figma_to_html_agent/scripts/fetch_figma_screenshots.py — Figma 스크린샷 자동 수집.
수정:
- figma_to_html_agent/PROCESS-CONTROL.md / PROCESS.md / RULES.md —
변환 프로세스 / 룰 갱신 (R8/R9 lock 강화 등).
- figma_to_html_agent/blocks_index.md — 32 frame 인덱스 갱신.
Phase Z 영향 0 (figma_to_html_agent/blocks/ 가 V4 catalog +
templates/phase_z2/families adapter 의 source — runtime 에서 직접 import X).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
198 lines
9.0 KiB
HTML
198 lines
9.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=1280">
|
||
<title>Solution Engn. S/W (Frame 1171281201)</title>
|
||
<!--
|
||
Frame: 145:8310, 1889×824 px
|
||
Scale: 1280 / 1889 = 0.67761
|
||
패턴: split-panel-diagram
|
||
구조: R17 (좌:absolute 이미지 / 우:flex column) + R19 zoom
|
||
1171281202와 동일 패턴
|
||
-->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;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; word-break: keep-all;
|
||
}
|
||
.slide {
|
||
width: 1280px;
|
||
background: #fff; position: relative;
|
||
box-shadow: 0 4px 20px rgba(0,0,0,.15);
|
||
}
|
||
.block { width: 1280px; position: relative; overflow: hidden; }
|
||
.inner {
|
||
width: 1889px;
|
||
height: 824px; /* 원본 Figma 프레임 높이 (min-height → height 고정) */
|
||
zoom: 0.67761; /* R19 */
|
||
position: relative;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
/* 좌측 (이미지 다이어그램, absolute) */
|
||
.left-panel {
|
||
flex: none;
|
||
width: 1100px;
|
||
position: relative;
|
||
overflow: hidden; /* diagram bg(1199px)가 panel(1100px) 밖으로 넘치는 것 차단 */
|
||
}
|
||
.left-panel .abs { position: absolute; }
|
||
.left-panel .abs img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||
.left-panel .lbl {
|
||
position: absolute; transform: translate(-50%, -50%);
|
||
font-weight: 700; font-size: 35px; line-height: 50px;
|
||
color: #fff; text-align: center;
|
||
text-shadow: 0 0 4px rgba(0,0,0,0.5);
|
||
white-space: nowrap;
|
||
}
|
||
.left-panel .lbl-dark {
|
||
color: #073b46; font-size: 50px;
|
||
}
|
||
|
||
/* 우측 (flex column, R17) */
|
||
.right-panel {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 25px;
|
||
padding: 78px 0 20px 22px;
|
||
}
|
||
.num-row {
|
||
display: flex; align-items: center;
|
||
}
|
||
.num-row .badge { flex: none; width: 88px; height: 93px; z-index: 2; }
|
||
.num-row .badge img { width: 100%; height: 100%; object-fit: cover; }
|
||
.num-row .bar-area { flex: 1; position: relative; margin-left: -40px; }
|
||
.num-row .bar-bg { width: 100%; height: 97px; overflow: hidden; }
|
||
.num-row .bar-bg img { width: 100%; height: 100%; object-fit: cover; }
|
||
.num-row .bar-text {
|
||
position: absolute; left: 80px; top: 50%; transform: translateY(-50%);
|
||
font-weight: 500; font-size: 45px; line-height: 60px;
|
||
color: #11231d; text-shadow: 0 0 4px rgba(0,0,0,0.5);
|
||
}
|
||
.num-row .arrow { flex: none; width: 48px; height: 45px; margin-left: 5px; }
|
||
.num-row .arrow img { width: 100%; height: 100%; transform: rotate(180deg); }
|
||
|
||
/* 결론 바 (전체 폭) */
|
||
.conclusion-bar {
|
||
width: 100%;
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
min-height: 109px;
|
||
}
|
||
.conclusion-bar .bar-left { flex: none; width: 191px; height: 109px; }
|
||
.conclusion-bar .bar-left img { width: 100%; height: 100%; object-fit: cover; }
|
||
.conclusion-bar .bar-center { flex: 1; height: 107px; overflow: hidden; }
|
||
.conclusion-bar .bar-center img { width: 100%; height: 100%; object-fit: cover; }
|
||
.conclusion-bar .bar-right { flex: none; width: 192px; height: 109px; }
|
||
.conclusion-bar .bar-right img { width: 100%; height: 100%; object-fit: cover; }
|
||
.conclusion-bar .bar-text {
|
||
position: absolute; left: 112px; top: 50%; transform: translateY(-50%);
|
||
font-size: 0; line-height: 0;
|
||
text-shadow: 0 0 4px rgba(0,0,0,0.5);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="slide">
|
||
<div class="block">
|
||
<div class="inner">
|
||
|
||
<!-- 좌측: 다이어그램 -->
|
||
<div class="left-panel">
|
||
<!-- 타이틀 -->
|
||
<div class="abs" style="left:61px; top:13px; width:38.05px; height:40px;"><img src="assets/bd3796e13b417d32322b3cd6d3962f892c52ec9b.png" alt=""></div>
|
||
<div style="position:absolute; left:112px; top:24px; transform:translateY(-50%); font-size:0; line-height:0;">
|
||
<span style="font-weight:900; font-size:70px; line-height:55px; background:linear-gradient(rgb(204,82,0),rgb(136,55,0)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;">Solution </span>
|
||
<span style="font-weight:900; font-size:50px; line-height:55px; background:linear-gradient(#296b55,#000); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;">Engn. S/W</span>
|
||
</div>
|
||
<div class="abs" style="left:66.52px; top:45px; width:354.01px; height:36px;"><img src="assets/30a42d915fae64b2ac76c21c0b742c17a2604b9d.png" alt=""></div>
|
||
|
||
<!-- 다이어그램 배경 -->
|
||
<div class="abs" style="left:0; top:96px; width:1199px; height:636px;"><img src="assets/ffb006a4a6b1e9a89bec9243f5751841d49d03fb.png" alt=""></div>
|
||
|
||
<!-- 중앙 오버레이 -->
|
||
<div class="abs" style="left:285px; top:376px; width:630px; height:310px; overflow:hidden;">
|
||
<img src="assets/88a805bbac947d4557c9f642ed3eca9e24b5e018.png" alt="" style="width:100%; height:203.23%; object-fit:cover;">
|
||
</div>
|
||
<div class="abs" style="left:413px; top:543px; width:374px; height:144px; overflow:hidden;">
|
||
<img src="assets/9ff4d23761d3af448e52e197ef353d016e5da891.png" alt="" style="position:absolute; left:-3.59%; width:283.88%; height:100%;">
|
||
</div>
|
||
|
||
<!-- 다이어그램 라벨 -->
|
||
<div class="lbl lbl-dark" style="left:602.5px; top:608px; width:355px;">Solution<br>Engn. S/W</div>
|
||
<div class="lbl" style="left:148.5px; top:614px; width:175px;">Model<br>Checker</div>
|
||
<div class="lbl" style="left:188.5px; top:459px;">WatchBIM</div>
|
||
<div class="lbl" style="left:304.5px; top:337px;">Domainer</div>
|
||
<div class="lbl" style="left:1046.5px; top:608px; font-size:0;"><span style="font-size:30px;">B</span><span style="font-size:40px;">CM</span><span style="font-size:30px;">F</span></div>
|
||
<div class="lbl" style="left:1003.5px; top:456px;">Zainer</div>
|
||
<div class="lbl" style="left:895.5px; top:335px;">Twin Highway</div>
|
||
<div class="lbl" style="left:405.5px; top:247px;">Platform Solutions</div>
|
||
<div class="lbl" style="left:599.5px; top:189.5px; width:249px;">Construction Conference<br>Platform</div>
|
||
<div class="lbl" style="left:759px; top:261px; width:274px;">공정계획</div>
|
||
</div>
|
||
|
||
<!-- 우측: 번호 항목 (flex column, R17) -->
|
||
<div class="right-panel">
|
||
<div class="num-row">
|
||
<div class="badge"><img src="assets/42dca7c1ca42ba8520aa274fd4471bd054dfe36b.png" alt=""></div>
|
||
<div class="bar-area">
|
||
<div class="bar-bg"><img src="assets/6c4cc6c01d98a38c747e1748bb49dec957a68e88.png" alt=""></div>
|
||
<div class="bar-text">쉽고, 편리한 User 중심</div>
|
||
</div>
|
||
<div class="arrow"><img src="assets/7e7eb79fab4063fb496110af54e23e073145ec72.png" alt=""></div>
|
||
</div>
|
||
|
||
<div class="num-row">
|
||
<div class="badge"><img src="assets/9d86013a10b048eede6cceb2012f7958dfaf616c.png" alt=""></div>
|
||
<div class="bar-area">
|
||
<div class="bar-bg"><img src="assets/6c4cc6c01d98a38c747e1748bb49dec957a68e88.png" alt=""></div>
|
||
<div class="bar-text">협업 및 의사소통 강화</div>
|
||
</div>
|
||
<div class="arrow"><img src="assets/7e7eb79fab4063fb496110af54e23e073145ec72.png" alt=""></div>
|
||
</div>
|
||
|
||
<div class="num-row">
|
||
<div class="badge"><img src="assets/470d76de62f4864e6c42b25bcf7446e2aaef981a.png" alt=""></div>
|
||
<div class="bar-area">
|
||
<div class="bar-bg"><img src="assets/6c4cc6c01d98a38c747e1748bb49dec957a68e88.png" alt=""></div>
|
||
<div class="bar-text">Project별 맞춤형 생산</div>
|
||
</div>
|
||
<div class="arrow"><img src="assets/7e7eb79fab4063fb496110af54e23e073145ec72.png" alt=""></div>
|
||
</div>
|
||
|
||
<div class="num-row">
|
||
<div class="badge"><img src="assets/7e83d2e4d7df471367df19708e2628010d586ed2.png" alt=""></div>
|
||
<div class="bar-area">
|
||
<div class="bar-bg"><img src="assets/6c4cc6c01d98a38c747e1748bb49dec957a68e88.png" alt=""></div>
|
||
<div class="bar-text">시공 현장상황 반영 가능</div>
|
||
</div>
|
||
<div class="arrow"><img src="assets/7e7eb79fab4063fb496110af54e23e073145ec72.png" alt=""></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 결론 바 (전체 폭) -->
|
||
<div class="conclusion-bar">
|
||
<div class="bar-left"><img src="assets/790f895e55ada424dfbb0acec5a002d9f1fce88e.png" alt=""></div>
|
||
<div class="bar-center"><img src="assets/3061aabdcf0f21f1791940b6d2d74a7b991ce746.png" alt=""></div>
|
||
<div class="bar-right"><img src="assets/ee88228486a77b2af6c001209d3fbf862a9fbdbb.png" alt=""></div>
|
||
<div class="bar-text">
|
||
<span style="font-weight:700; font-size:47px; line-height:60px; color:#fff;">하나의 S/W에서 협업, 정보확인, 현장상황 반영이 가능한</span>
|
||
<span style="font-weight:700; font-size:55px; line-height:60px; color:yellow;"> Solution Engn. S/W 필요</span>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|