Kyeongmin/C.E.L_Slide_test2
1
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity
Files
8f6cffc2a7cbfbacb5f6bdeda5ac4d6eaccb22cb
C.E.L_Slide_test2/Front/preview_layouts.html
kyeongmin 0f0d3fa91f feat(frontend): add Front/ — Vite/React frontend with backend pipeline integration 
Mirror of design_agent_front/design-agent/ for shipping alongside backend.

Vite plugin (vitePluginPhaseZApi) endpoints :
  - POST /api/run   — spawn `python -m src.phase_z2_pipeline` with overrides
  - GET  /api/sample-mdx?mdx=03/04/05 — fixed sample MDX
  - GET  /frame-preview/{n} — figma preview thumbnails
  - GET  /data/runs/{run_id}/{path} — pipeline artifacts (final.html, step*.json, ...)

Env toggle forward (보고용) :
  PHASE_Z_ALLOW_RESTRUCTURE / PHASE_Z_ALLOW_REJECT / PHASE_Z_MAX_RANK=32

Components :
  - LeftMdxPanel (03/04/05 fix list + section tree)
  - SlideCanvas (iframe + slideOverrideCss prop for inline CSS inject)
  - FramePanel (label priority + confidence sort)
  - LayoutPanel

README with mermaid diagrams covering the 5-step demo flow.
node_modules / dist / .manus-logs / .env excluded via .gitignore.
2026-05-14 14:48:42 +09:00

170 lines
9.7 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slide Layout Preview (Step 22)</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap');
body { font-family: 'Inter', sans-serif; background-color: #f8fafc; padding: 40px; }
.slide-container {
width: 1280px;
height: 720px;
background: white;
box-shadow: 0 40px 100px -20px rgba(0,0,0,0.2);
border-radius: 16px;
overflow: hidden;
margin-bottom: 60px;
position: relative;
display: flex;
flex-direction: column;
}
.label {
position: absolute;
top: -30px;
left: 0;
font-size: 14px;
font-weight: 900;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.1em;
}
/* Header/Footer Mockup */
.slide-header { height: 80px; border-bottom: 1px solid #f1f5f9; display: flex; align-items: center; px: 40px; padding: 0 40px; }
.slide-footer { height: 100px; bg-slate-900: #0f172a; background: #0f172a; display: flex; align-items: center; padding: 0 40px; color: white; }
.slide-body { flex: 1; position: relative; overflow: hidden; }
</style>
</head>
<body>
<div style="max-width: 1280px; margin: 0 auto;">
<!-- LAYOUT 1 PREVIEW -->
<div style="position: relative; margin-top: 50px;">
<div class="label">Layout 1: Focus Split (single)</div>
<div class="slide-container">
<div class="slide-header">
<h1 class="text-3xl font-black text-slate-900">DX 실행 체계 구축 방안</h1>
</div>
<div class="slide-body">
<div class="w-full h-full flex gap-8 p-10 bg-white">
<div class="flex-[3] flex flex-col justify-center space-y-6">
<div class="space-y-2">
<div class="w-12 h-1 bg-blue-600 rounded-full"></div>
<h2 class="text-4xl font-black text-slate-900 leading-tight">DX 실행 필수 요건</h2>
</div>
<p class="text-xl text-slate-600 leading-relaxed font-medium">
조직 전반의 DX 역량 강화 필요 및 전담 조직 구성과 KPI 설정을 통한 체계적인 실행력 확보가 필수적입니다.
</p>
<div class="flex gap-4 pt-4">
<div class="px-4 py-2 bg-slate-50 border border-slate-100 rounded-xl text-sm font-bold text-slate-400 uppercase tracking-widest">Key Insight</div>
</div>
</div>
<div class="flex-[2] relative">
<div class="absolute inset-0 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-[2rem] border-2 border-white shadow-inner flex flex-col items-center justify-center p-8 text-center">
<div class="w-16 h-16 bg-white rounded-2xl shadow-lg flex items-center justify-center mb-6">
<div class="w-8 h-8 bg-blue-600 rounded-lg"></div>
</div>
<h3 class="text-2xl font-bold text-slate-800 mb-3">Strategic Impact</h3>
<p class="text-sm text-slate-500 font-medium leading-normal">
데이터 기반 의사결정 체계 구축을 통한 업무 효율성 30% 향상 기대
</p>
</div>
</div>
</div>
</div>
<div class="slide-footer">
<div class="px-3 py-1 bg-blue-600 font-black text-[12px] rounded uppercase mr-6">Summary</div>
<p class="text-xl font-bold opacity-80 italic">"성공적인 DX를 위해서는 기술보다 조직과 문화의 변화가 우선되어야 합니다."</p>
</div>
</div>
</div>
<!-- LAYOUT 2 PREVIEW -->
<div style="position: relative; margin-top: 80px;">
<div class="label">Layout 2: Quadrant Grid (grid-2x2)</div>
<div class="slide-container">
<div class="slide-header">
<h1 class="text-3xl font-black text-slate-900">DX 추진 전략 프레임워크</h1>
</div>
<div class="slide-body">
<div class="w-full h-full grid grid-cols-2 grid-rows-2 gap-8 p-10 bg-white">
<!-- Item 1 -->
<div class="p-8 rounded-[1.5rem] border-2 border-slate-50 bg-slate-50/30 flex flex-col justify-between">
<div class="space-y-3">
<div class="flex items-center gap-3">
<span class="flex items-center justify-center w-8 h-8 rounded-full bg-slate-900 text-white text-sm font-black">01</span>
<h3 class="text-2xl font-black text-slate-800">Strategy</h3>
</div>
<p class="text-base text-slate-500 font-medium pl-11">디지털 비전 수립 및 중장기 로드맵 확정</p>
</div>
<div class="pl-11 pt-4">
<div class="w-full h-1.5 bg-slate-100 rounded-full overflow-hidden">
<div class="w-2/3 h-full bg-blue-500 rounded-full"></div>
</div>
</div>
</div>
<!-- Item 2 -->
<div class="p-8 rounded-[1.5rem] border-2 border-slate-50 bg-slate-50/30 flex flex-col justify-between">
<div class="space-y-3">
<div class="flex items-center gap-3">
<span class="flex items-center justify-center w-8 h-8 rounded-full bg-slate-900 text-white text-sm font-black">02</span>
<h3 class="text-2xl font-black text-slate-800">Operations</h3>
</div>
<p class="text-base text-slate-500 font-medium pl-11">프로세스 자동화 및 지능형 운영 체계 도입</p>
</div>
<div class="pl-11 pt-4">
<div class="w-full h-1.5 bg-slate-100 rounded-full overflow-hidden">
<div class="w-1/2 h-full bg-blue-500 rounded-full"></div>
</div>
</div>
</div>
<!-- Item 3 -->
<div class="p-8 rounded-[1.5rem] border-2 border-slate-50 bg-slate-50/30 flex flex-col justify-between">
<div class="space-y-3">
<div class="flex items-center gap-3">
<span class="flex items-center justify-center w-8 h-8 rounded-full bg-slate-900 text-white text-sm font-black">03</span>
<h3 class="text-2xl font-black text-slate-800">Technology</h3>
</div>
<p class="text-base text-slate-500 font-medium pl-11">클라우드 네이티브 아키텍처 및 보안 강화</p>
</div>
<div class="pl-11 pt-4">
<div class="w-full h-1.5 bg-slate-100 rounded-full overflow-hidden">
<div class="w-3/4 h-full bg-blue-500 rounded-full"></div>
</div>
</div>
</div>
<!-- Item 4 -->
<div class="p-8 rounded-[1.5rem] border-2 border-slate-50 bg-slate-50/30 flex flex-col justify-between">
<div class="space-y-3">
<div class="flex items-center gap-3">
<span class="flex items-center justify-center w-8 h-8 rounded-full bg-slate-900 text-white text-sm font-black">04</span>
<h3 class="text-2xl font-black text-slate-800">Culture</h3>
</div>
<p class="text-base text-slate-500 font-medium pl-11">애자일 방식 도입 및 데이터 리터러시 교육</p>
</div>
<div class="pl-11 pt-4">
<div class="w-full h-1.5 bg-slate-100 rounded-full overflow-hidden">
<div class="w-full h-full bg-blue-500 rounded-full"></div>
</div>
</div>
</div>
</div>
</div>
<div class="slide-footer">
<div class="px-3 py-1 bg-blue-600 font-black text-[12px] rounded uppercase mr-6">Summary</div>
<p class="text-xl font-bold opacity-80 italic">"기술, 전략, 운영, 문화 4대 요소의 균형 잡힌 발전이 DX 성공의 열쇠입니다."</p>
</div>
</div>
</div>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink