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>
213 lines
9.3 KiB
HTML
213 lines
9.3 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>
|
||
<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: 573px;
|
||
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: 573px; position: relative; overflow: hidden; }
|
||
.inner {
|
||
position: absolute; left: 0; top: 0;
|
||
width: 1863.306px; height: 834.005px;
|
||
transform: scale(0.68706);
|
||
transform-origin: top left;
|
||
}
|
||
/* All elements absolute positioned at Figma coordinates */
|
||
.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;
|
||
}
|
||
/* 타이틀 bar — 원본: 미세 그림자 PNG → CSS box-shadow로 대체
|
||
픽셀 분석: rgba(0,0,0,0.11) 균일, 매우 미세 */
|
||
.title-bar {
|
||
left: 26px; top: 42px; width: 255.13px; height: 26px;
|
||
background: rgba(0,0,0,0.08);
|
||
border-radius: 4px;
|
||
filter: blur(8px);
|
||
}
|
||
/* 좌측 패널 BG — 원본: 셰브론(화살표) 형태 + 좌→우 alpha gradient
|
||
픽셀 분석: x=10% rgba(192,213,208,0.19) → x=95% rgba(211,227,226,1.0)
|
||
형태: clip-path polygon (우측 뾰족한 화살표) */
|
||
.left-bg {
|
||
left: 38px; top: 74.02px; width: 964.14px; height: 759.99px;
|
||
background: linear-gradient(90deg,
|
||
rgba(192,213,208,0.19) 0%,
|
||
rgba(195,214,209,0.66) 50%,
|
||
rgba(211,227,226,1) 95%);
|
||
clip-path: polygon(0 0, 82% 0, 100% 50%, 82% 100%, 0 100%);
|
||
border-radius: 20px 0 0 20px;
|
||
}
|
||
/* 카테고리 헤더 bar — 원본: 단색 gradient PNG → CSS solid + border-radius
|
||
픽셀 분석: cat-1=#417d38, cat-2=#008e52, cat-3=#008970
|
||
우측 alpha fadeout → border-radius + 우측 투명 gradient */
|
||
.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 리스트 */
|
||
.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; }
|
||
/* 중간 장식 — 원본: 미세 반달형 그림자 PNG → CSS radial-gradient
|
||
픽셀 분석: 우측에만 rgba(224,224,224,0.13~0.81) */
|
||
.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; }
|
||
/* 우측 번호 badge — bar 위에 (z-index) */
|
||
.num-badge { width: 88.01px; height: 93px; z-index: 2; }
|
||
.num-1 { left: 1047.5px; top: 78px; }
|
||
.num-2 { left: 1047.5px; top: 230px; }
|
||
.num-3 { left: 1047.5px; top: 384px; }
|
||
.num-4 { left: 1047.5px; top: 539px; }
|
||
.num-5 { left: 1047.5px; top: 694px; }
|
||
/* 우측 배경 bar — 원본: 단색 #e8ede3 PNG → CSS solid
|
||
픽셀 분석: 균일 #e8ede3, 상하 모서리 anti-alias → border-radius */
|
||
.right-bar {
|
||
left: 1094.96px; width: 751.54px; height: 97px;
|
||
background: #e8ede3;
|
||
border-radius: 10px;
|
||
}
|
||
.rb-1 { top: 105px; } .rb-2 { top: 257px; } .rb-3 { top: 412px; }
|
||
.rb-4 { top: 567px; } .rb-5 { top: 721px; }
|
||
/* 우측 설명 텍스트 */
|
||
.right-text {
|
||
font-weight: 500; font-size: 45px; line-height: 60px;
|
||
color: #11231d; text-shadow: 0 0 4px rgba(0,0,0,0.5);
|
||
left: 1176.05px; width: 687.26px; height: 60px;
|
||
display: flex; flex-direction: column; justify-content: center;
|
||
}
|
||
.rt-1 { top: 123px; } .rt-2 { top: 276px; } .rt-3 { top: 430px; }
|
||
.rt-4 { top: 586px; } .rt-5 { top: 734px; }
|
||
/* 우측 화살표 아이콘 — Figma design_context는 transform 후 좌표(1794.09) 제공 */
|
||
.right-arrow { width: 47.47px; height: 45px; transform: rotate(180deg); }
|
||
.ra-1 { left: 1794.09px; top: 152px; }
|
||
.ra-2 { left: 1794.09px; top: 302px; }
|
||
.ra-3 { left: 1794.09px; top: 456px; }
|
||
.ra-4 { left: 1794.09px; top: 606px; }
|
||
.ra-5 { left: 1794.09px; top: 760px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="slide">
|
||
<div class="block">
|
||
<div class="inner">
|
||
<!-- 타이틀 -->
|
||
<div class="abs title-icon"><img src="assets/shared/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 — CSS gradient + clip-path -->
|
||
<div class="abs left-bg"></div>
|
||
|
||
<!-- 카테고리 bars — CSS solid color -->
|
||
<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>
|
||
|
||
<!-- SW 리스트 -->
|
||
<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>
|
||
|
||
<!-- 중간 장식 — CSS radial-gradient -->
|
||
<div class="abs mid-deco"></div>
|
||
<div class="abs mid-arrow"><img src="assets/shared/2f95748966536058809971fd1c9ed646d3e1f3a7.png" alt=""></div>
|
||
|
||
<!-- 번호 badge -->
|
||
<div class="abs num-badge num-1"><img src="assets/shared/42dca7c1ca42ba8520aa274fd4471bd054dfe36b.png" alt=""></div>
|
||
<div class="abs num-badge num-2"><img src="assets/shared/9d86013a10b048eede6cceb2012f7958dfaf616c.png" alt=""></div>
|
||
<div class="abs num-badge num-3"><img src="assets/shared/470d76de62f4864e6c42b25bcf7446e2aaef981a.png" alt=""></div>
|
||
<div class="abs num-badge num-4"><img src="assets/shared/7e83d2e4d7df471367df19708e2628010d586ed2.png" alt=""></div>
|
||
<div class="abs num-badge num-5"><img src="assets/shared/4ea963b9abbbbb2623d4ec41c2a6eea6ea2856d4.png" alt=""></div>
|
||
|
||
<!-- 우측 배경 bars (동일 이미지 ×5) -->
|
||
<div class="abs right-bar rb-1"></div>
|
||
<div class="abs right-bar rb-2"></div>
|
||
<div class="abs right-bar rb-3"></div>
|
||
<div class="abs right-bar rb-4"></div>
|
||
<div class="abs right-bar rb-5"></div>
|
||
|
||
<!-- 우측 설명 텍스트 -->
|
||
<div class="abs right-text rt-1">Model 구축에 필요한 기능 위주</div>
|
||
<div class="abs right-text rt-2">고가, 고사양, 복잡, 전문가용</div>
|
||
<div class="abs right-text rt-3">Engn. S/W간에 호환 안됨</div>
|
||
<div class="abs right-text rt-4">성과물 제작은 별도</div>
|
||
<div class="abs right-text rt-5">시공 현장상황 반영에 한계</div>
|
||
|
||
<!-- 우측 화살표 아이콘 (×5, 동일 src) -->
|
||
<div class="abs right-arrow ra-1"><img src="assets/shared/7e7eb79fab4063fb496110af54e23e073145ec72.png" alt=""></div>
|
||
<div class="abs right-arrow ra-2"><img src="assets/shared/7e7eb79fab4063fb496110af54e23e073145ec72.png" alt=""></div>
|
||
<div class="abs right-arrow ra-3"><img src="assets/shared/7e7eb79fab4063fb496110af54e23e073145ec72.png" alt=""></div>
|
||
<div class="abs right-arrow ra-4"><img src="assets/shared/7e7eb79fab4063fb496110af54e23e073145ec72.png" alt=""></div>
|
||
<div class="abs right-arrow ra-5"><img src="assets/shared/7e7eb79fab4063fb496110af54e23e073145ec72.png" alt=""></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|