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>
251 lines
9.1 KiB
HTML
251 lines
9.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=1280">
|
|
<title>Model에 특화된 Engn. S/W (Frame 1171281202)</title>
|
|
<!--
|
|
원본: design_agent(원본)/figma_to_html_agent/block-tests/bim-sw-overview.html
|
|
하이브리드: fixed-row hybrid
|
|
축1: 우측 5행 row 컨테이너화 (Y rhythm 유지, 내부만 재구성)
|
|
축2 (미적용): text usable area 재정의
|
|
변경하지 않은 것: 좌측 전체, 타이틀, 장식, zoom
|
|
-->
|
|
<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;
|
|
background: #fff;
|
|
position: relative;
|
|
box-shadow: 0 4px 20px rgba(0,0,0,.15);
|
|
}
|
|
.block { width: 1280px; position: relative; overflow: hidden; }
|
|
.inner {
|
|
width: 1863.306px; height: 834.005px;
|
|
zoom: 0.68706; /* R19: transform:scale → zoom */
|
|
position: relative;
|
|
}
|
|
.abs { position: absolute; }
|
|
.abs img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
|
|
|
/* ─── 타이틀 (원본 그대로) ─── */
|
|
.title-icon { left: 0; top: 13px; width: 38.05px; height: 40px; }
|
|
.title-text {
|
|
left: 51px; top: 0; width: 1198px; height: 48px;
|
|
font-weight: 900; line-height: 55px; white-space: nowrap;
|
|
}
|
|
.title-text .model {
|
|
font-size: 70px;
|
|
background-image: linear-gradient(180deg, #cc5200 0%, #883700 100%);
|
|
-webkit-background-clip: text; background-clip: text; color: transparent;
|
|
}
|
|
.title-text .sub {
|
|
font-size: 50px;
|
|
background-image: linear-gradient(180deg, #296b55 0%, #000 100%);
|
|
-webkit-background-clip: text; background-clip: text; color: transparent;
|
|
}
|
|
.title-bar {
|
|
left: 26px; top: 42px; width: 255.13px; height: 26px;
|
|
background: rgba(0,0,0,0.08);
|
|
border-radius: 4px;
|
|
filter: blur(8px);
|
|
}
|
|
|
|
/* ─── 좌측 패널 (원본 PNG 복원 — CSS clip-path 대신 원본 이미지 사용) ─── */
|
|
.left-bg {
|
|
left: 38px; top: 74.02px; width: 964.14px; height: 759.99px;
|
|
}
|
|
.left-bg img {
|
|
width: 100%; height: 100%;
|
|
object-fit: fill;
|
|
}
|
|
.cat-bar { height: 49px; border-radius: 5px; }
|
|
.cat-bar-1 {
|
|
left: 103.13px; top: 153px; width: 693.19px;
|
|
background: linear-gradient(90deg, #417d38 0%, #417d38 85%, rgba(65,125,56,0) 100%);
|
|
}
|
|
.cat-bar-2 {
|
|
left: 103.13px; top: 352px; width: 693.19px;
|
|
background: linear-gradient(90deg, #008e52 0%, #008e52 85%, rgba(0,142,82,0) 100%);
|
|
}
|
|
.cat-bar-3 {
|
|
left: 103.13px; top: 612px; width: 693.19px;
|
|
background: linear-gradient(90deg, #008970 0%, #008970 85%, rgba(0,137,112,0) 100%);
|
|
}
|
|
.cat-title {
|
|
font-weight: 700; font-size: 40px; line-height: 90px;
|
|
color: #fff; text-shadow: 0 0 4px rgba(0,0,0,0.5);
|
|
width: 606.27px;
|
|
display: flex; flex-direction: column; justify-content: center;
|
|
}
|
|
.cat-title-1 { left: 162.77px; top: 126px; height: 95.8px; }
|
|
.cat-title-2 { left: 162.77px; top: 326px; height: 95.8px; }
|
|
.cat-title-3 { left: 162.77px; top: 586px; height: 95.8px; }
|
|
.sw-list {
|
|
font-weight: 500; font-size: 35px; line-height: 60px;
|
|
color: #000; text-shadow: 0 0 4px rgba(0,0,0,0.5);
|
|
display: flex; flex-direction: column; justify-content: center;
|
|
}
|
|
.sw-1 { left: 166.42px; top: 207px; width: 323.36px; height: 120px; }
|
|
.sw-2 { left: 166.42px; top: 405px; width: 654.63px; height: 180px; }
|
|
.sw-3 { left: 162.46px; top: 671px; width: 654.63px; height: 120px; }
|
|
|
|
/* ─── 장식 (원본 그대로) ─── */
|
|
.mid-deco {
|
|
left: 884.33px; top: 192px; width: 180.96px; height: 541px;
|
|
background: radial-gradient(ellipse 60% 50% at 100% 50%,
|
|
rgba(217,217,217,0.8) 0%,
|
|
rgba(217,217,217,0.13) 60%,
|
|
transparent 100%);
|
|
}
|
|
.mid-arrow { left: 943.66px; top: 375px; width: 73.18px; height: 158px; }
|
|
|
|
/* ─── 축1: 우측 5행 — row 컨테이너 ─── */
|
|
/* 각 row: absolute top = 원본 badge top (row 기준점)
|
|
내부: badge(overlay) + bar(contains text area + arrow) */
|
|
.right-row {
|
|
position: absolute;
|
|
left: 1047.5px;
|
|
/* width: badge + bar 전체 = 1846.5 - 1047.5 = 799px */
|
|
width: 799px;
|
|
height: 97px; /* bar height 기준 */
|
|
}
|
|
.right-row-1 { top: 78px; }
|
|
.right-row-2 { top: 230px; }
|
|
.right-row-3 { top: 384px; }
|
|
.right-row-4 { top: 539px; }
|
|
.right-row-5 { top: 694px; }
|
|
|
|
/* badge: row 내 overlay */
|
|
.row-badge {
|
|
position: absolute;
|
|
left: 0; top: 0;
|
|
width: 88.01px; height: 93px;
|
|
z-index: 2;
|
|
}
|
|
.row-badge img { width: 100%; height: 100%; object-fit: contain; }
|
|
|
|
/* bar: row 내 배경 — badge 오른쪽에서 시작 */
|
|
.row-bar {
|
|
position: absolute;
|
|
/* bar left: 1094.96 - 1047.5 = 47.46px from row left */
|
|
left: 47.46px;
|
|
/* bar top: 105 - 78 = 27px from row top (row1 기준, 다른 row도 동일) */
|
|
top: 27px;
|
|
width: 751.54px; height: 97px;
|
|
background: #e8ede3;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
/* text: bar 내부 usable area */
|
|
.row-text {
|
|
position: absolute;
|
|
/* text left: 1176.05 - 1094.96 = 81.09px from bar left */
|
|
left: 81px;
|
|
top: 0; height: 100%;
|
|
width: 687.26px;
|
|
font-weight: 500; font-size: 45px; line-height: 60px;
|
|
color: #11231d; text-shadow: 0 0 4px rgba(0,0,0,0.5);
|
|
display: flex; align-items: center;
|
|
}
|
|
|
|
/* arrow: bar 끝 구조 자산 */
|
|
.row-arrow {
|
|
position: absolute;
|
|
/* arrow left: 1794.09 - 1094.96 = 699.13px from bar left */
|
|
left: 699.13px;
|
|
/* arrow top: 152 - 105 = 47px from bar top (row1 기준) */
|
|
top: 47px;
|
|
width: 47.47px; height: 45px;
|
|
transform: rotate(180deg);
|
|
}
|
|
.row-arrow img { width: 100%; height: 100%; object-fit: contain; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="slide">
|
|
<div class="block">
|
|
<div class="inner">
|
|
<!-- 타이틀 (원본 그대로) -->
|
|
<div class="abs title-icon"><img src="assets/bd3796e13b417d32322b3cd6d3962f892c52ec9b.png" alt=""></div>
|
|
<div class="abs title-text"><span class="model">Model</span><span class="sub">에 특화된 Engn. S/W</span></div>
|
|
<div class="abs title-bar"></div>
|
|
|
|
<!-- 좌측 패널 BG (원본 PNG 복원) -->
|
|
<div class="abs left-bg"><img src="assets/88055da8b5f893371359dd5073785804141dc86a.png" alt=""></div>
|
|
<div class="abs cat-bar cat-bar-1"></div>
|
|
<div class="abs cat-bar cat-bar-2"></div>
|
|
<div class="abs cat-bar cat-bar-3"></div>
|
|
<div class="abs cat-title cat-title-1">GIS</div>
|
|
<div class="abs cat-title cat-title-2">Modeler</div>
|
|
<div class="abs cat-title cat-title-3">Simulation & Video</div>
|
|
<div class="abs sw-list sw-1">· ArcGIS, QGIS<br>· 천지인</div>
|
|
<div class="abs sw-list sw-2">· Rhino, Blender, Sketch-up<br>· EG-BIM Modeller · Revit<br>· Civil 3D(+KG Road), Naviswork</div>
|
|
<div class="abs sw-list sw-3">· Twin Highway<br>· Infraworks</div>
|
|
|
|
<!-- 장식 (원본 그대로) -->
|
|
<div class="abs mid-deco"></div>
|
|
<div class="abs mid-arrow"><img src="assets/2f95748966536058809971fd1c9ed646d3e1f3a7.png" alt=""></div>
|
|
|
|
<!-- ═══ 축1: 우측 5행 — row 컨테이너 ═══ -->
|
|
|
|
<!-- Row 1 -->
|
|
<div class="right-row right-row-1">
|
|
<div class="row-badge"><img src="assets/42dca7c1ca42ba8520aa274fd4471bd054dfe36b.png" alt="01"></div>
|
|
<div class="row-bar">
|
|
<div class="row-text">Model 구축에 필요한 기능 위주</div>
|
|
<div class="row-arrow"><img src="assets/7e7eb79fab4063fb496110af54e23e073145ec72.png" alt=""></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Row 2 -->
|
|
<div class="right-row right-row-2">
|
|
<div class="row-badge"><img src="assets/9d86013a10b048eede6cceb2012f7958dfaf616c.png" alt="02"></div>
|
|
<div class="row-bar">
|
|
<div class="row-text">고가, 고사양, 복잡, 전문가용</div>
|
|
<div class="row-arrow"><img src="assets/7e7eb79fab4063fb496110af54e23e073145ec72.png" alt=""></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Row 3 -->
|
|
<div class="right-row right-row-3">
|
|
<div class="row-badge"><img src="assets/470d76de62f4864e6c42b25bcf7446e2aaef981a.png" alt="03"></div>
|
|
<div class="row-bar">
|
|
<div class="row-text">Engn. S/W간에 호환 안됨</div>
|
|
<div class="row-arrow"><img src="assets/7e7eb79fab4063fb496110af54e23e073145ec72.png" alt=""></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Row 4 -->
|
|
<div class="right-row right-row-4">
|
|
<div class="row-badge"><img src="assets/7e83d2e4d7df471367df19708e2628010d586ed2.png" alt="04"></div>
|
|
<div class="row-bar">
|
|
<div class="row-text">성과물 제작은 별도</div>
|
|
<div class="row-arrow"><img src="assets/7e7eb79fab4063fb496110af54e23e073145ec72.png" alt=""></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Row 5 -->
|
|
<div class="right-row right-row-5">
|
|
<div class="row-badge"><img src="assets/4ea963b9abbbbb2623d4ec41c2a6eea6ea2856d4.png" alt="05"></div>
|
|
<div class="row-bar">
|
|
<div class="row-text">시공 현장상황 반영에 한계</div>
|
|
<div class="row-arrow"><img src="assets/7e7eb79fab4063fb496110af54e23e073145ec72.png" alt=""></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|