goldenChat base source add
This commit is contained in:
aidev
@@ -0,0 +1,603 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>📊 투자전략 백테스트 UI 목업 - 전체 목록</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: 'Noto Sans KR', sans-serif;
|
||||
background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
|
||||
min-height: 100vh;
|
||||
color: #fff;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
.container { max-width: 1600px; margin: 0 auto; }
|
||||
|
||||
/* 헤더 */
|
||||
.header { text-align: center; margin-bottom: 60px; }
|
||||
.header h1 {
|
||||
font-size: 42px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 16px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.header p {
|
||||
font-size: 18px;
|
||||
color: #9ca3af;
|
||||
max-width: 800px;
|
||||
margin: 0 auto 24px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.stats {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 40px;
|
||||
}
|
||||
.stat {
|
||||
text-align: center;
|
||||
}
|
||||
.stat-value {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
color: #a78bfa;
|
||||
}
|
||||
.stat-label {
|
||||
font-size: 14px;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
/* 섹션 */
|
||||
.section { margin-bottom: 60px; }
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 32px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.1);
|
||||
}
|
||||
.section-icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(99, 102, 241, 0.3));
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28px;
|
||||
}
|
||||
.section-info h2 {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.section-info p {
|
||||
font-size: 14px;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
/* 카드 그리드 */
|
||||
.card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
/* 카드 */
|
||||
.card {
|
||||
background: rgba(255,255,255,0.05);
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.card:hover {
|
||||
transform: translateY(-6px);
|
||||
box-shadow: 0 20px 50px rgba(0,0,0,0.4);
|
||||
border-color: rgba(139, 92, 246, 0.5);
|
||||
}
|
||||
|
||||
.card-preview {
|
||||
height: 180px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: #1a1a2e;
|
||||
}
|
||||
.card-preview iframe {
|
||||
width: 300%;
|
||||
height: 300%;
|
||||
border: none;
|
||||
transform: scale(0.333);
|
||||
transform-origin: top left;
|
||||
pointer-events: none;
|
||||
}
|
||||
.card-preview-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(180deg, transparent 40%, rgba(15, 15, 35, 0.95) 100%);
|
||||
}
|
||||
|
||||
.card-body { padding: 20px; }
|
||||
.card-badge {
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
border-radius: 10px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.card-badge.pc { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
|
||||
.card-badge.tablet { background: rgba(139, 92, 246, 0.2); color: #a78bfa; }
|
||||
.card-badge.mobile { background: rgba(34, 197, 94, 0.2); color: #4ade80; }
|
||||
|
||||
.card-title {
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.card-desc {
|
||||
font-size: 13px;
|
||||
color: #9ca3af;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.card-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.tag {
|
||||
padding: 4px 10px;
|
||||
background: rgba(255,255,255,0.08);
|
||||
border-radius: 6px;
|
||||
font-size: 11px;
|
||||
color: #d1d5db;
|
||||
}
|
||||
|
||||
.card-link {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.2));
|
||||
border: 1px solid rgba(139, 92, 246, 0.3);
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.card-link:hover {
|
||||
background: linear-gradient(135deg, #8b5cf6, #6366f1);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
/* 가이드 */
|
||||
.guide {
|
||||
background: rgba(255,255,255,0.03);
|
||||
border-radius: 24px;
|
||||
padding: 40px;
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
margin-top: 40px;
|
||||
}
|
||||
.guide h2 {
|
||||
font-size: 24px;
|
||||
margin-bottom: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.guide-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
.guide-item {
|
||||
background: rgba(255,255,255,0.05);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
}
|
||||
.guide-item-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.guide-item-desc {
|
||||
font-size: 14px;
|
||||
color: #9ca3af;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
margin-top: 60px;
|
||||
padding-top: 30px;
|
||||
border-top: 1px solid rgba(255,255,255,0.1);
|
||||
color: #6b7280;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header class="header">
|
||||
<h1>📊 투자전략 백테스트 UI 목업</h1>
|
||||
<p>
|
||||
종목, 투자전략, 시간봉을 선택하여 실제 투자를 시뮬레이션하고<br>
|
||||
매수/매도 시점, 수익률, 예측 정확도를 확인하는 15가지 UI 디자인
|
||||
</p>
|
||||
<div class="stats">
|
||||
<div class="stat">
|
||||
<div class="stat-value">5</div>
|
||||
<div class="stat-label">PC 디자인</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-value">5</div>
|
||||
<div class="stat-label">태블릿 디자인</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-value">5</div>
|
||||
<div class="stat-label">모바일 디자인</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- PC 섹션 -->
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<div class="section-icon">🖥️</div>
|
||||
<div class="section-info">
|
||||
<h2>PC (데스크톱)</h2>
|
||||
<p>1920px 이상 · 넓은 화면에 최적화된 대시보드 스타일</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-grid">
|
||||
<div class="card">
|
||||
<div class="card-preview">
|
||||
<iframe src="pc/pc-01-trading-terminal.html"></iframe>
|
||||
<div class="card-preview-overlay"></div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<span class="card-badge pc">PC-01</span>
|
||||
<h3 class="card-title">트레이딩 터미널</h3>
|
||||
<p class="card-desc">3단 레이아웃의 트레이딩뷰 스타일. 좌측 종목리스트, 중앙 대형 차트, 우측 성과 패널</p>
|
||||
<div class="card-tags">
|
||||
<span class="tag">다크테마</span>
|
||||
<span class="tag">3단레이아웃</span>
|
||||
<span class="tag">실시간스타일</span>
|
||||
</div>
|
||||
<a href="pc/pc-01-trading-terminal.html" class="card-link" target="_blank">🔍 미리보기</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-preview">
|
||||
<iframe src="pc/pc-02-analytics-report.html"></iframe>
|
||||
<div class="card-preview-overlay"></div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<span class="card-badge pc">PC-02</span>
|
||||
<h3 class="card-title">분석 리포트</h3>
|
||||
<p class="card-desc">라이트 테마의 비즈니스 리포트 스타일. 깔끔한 카드와 테이블 중심</p>
|
||||
<div class="card-tags">
|
||||
<span class="tag">라이트테마</span>
|
||||
<span class="tag">리포트형</span>
|
||||
<span class="tag">비즈니스</span>
|
||||
</div>
|
||||
<a href="pc/pc-02-analytics-report.html" class="card-link" target="_blank">🔍 미리보기</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-preview">
|
||||
<iframe src="pc/pc-03-minimal-clean.html"></iframe>
|
||||
<div class="card-preview-overlay"></div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<span class="card-badge pc">PC-03</span>
|
||||
<h3 class="card-title">미니멀 클린</h3>
|
||||
<p class="card-desc">화이트 배경의 미니멀 디자인. 아이콘 사이드바와 넓은 콘텐츠 영역</p>
|
||||
<div class="card-tags">
|
||||
<span class="tag">미니멀</span>
|
||||
<span class="tag">화이트</span>
|
||||
<span class="tag">모던</span>
|
||||
</div>
|
||||
<a href="pc/pc-03-minimal-clean.html" class="card-link" target="_blank">🔍 미리보기</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-preview">
|
||||
<iframe src="pc/pc-04-dark-pro.html"></iframe>
|
||||
<div class="card-preview-overlay"></div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<span class="card-badge pc">PC-04</span>
|
||||
<h3 class="card-title">다크 프로페셔널</h3>
|
||||
<p class="card-desc">퍼플 액센트의 프로페셔널 다크 테마. 그라데이션과 카드 중심</p>
|
||||
<div class="card-tags">
|
||||
<span class="tag">다크</span>
|
||||
<span class="tag">퍼플</span>
|
||||
<span class="tag">그라데이션</span>
|
||||
</div>
|
||||
<a href="pc/pc-04-dark-pro.html" class="card-link" target="_blank">🔍 미리보기</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-preview">
|
||||
<iframe src="pc/pc-05-splitview.html"></iframe>
|
||||
<div class="card-preview-overlay"></div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<span class="card-badge pc">PC-05</span>
|
||||
<h3 class="card-title">스플릿뷰</h3>
|
||||
<p class="card-desc">좌우 50:50 분할 레이아웃. 설정/결과와 차트 영역 분리</p>
|
||||
<div class="card-tags">
|
||||
<span class="tag">2분할</span>
|
||||
<span class="tag">네이비</span>
|
||||
<span class="tag">정보분리</span>
|
||||
</div>
|
||||
<a href="pc/pc-05-splitview.html" class="card-link" target="_blank">🔍 미리보기</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 태블릿 섹션 -->
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<div class="section-icon">📱</div>
|
||||
<div class="section-info">
|
||||
<h2>태블릿 (Tablet)</h2>
|
||||
<p>768px - 1024px · 가로/세로 모드에 최적화</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-grid">
|
||||
<div class="card">
|
||||
<div class="card-preview">
|
||||
<iframe src="tablet/tablet-01-grid-dashboard.html"></iframe>
|
||||
<div class="card-preview-overlay"></div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<span class="card-badge tablet">Tablet-01</span>
|
||||
<h3 class="card-title">그리드 대시보드</h3>
|
||||
<p class="card-desc">4컬럼 그리드 기반 대시보드. 메트릭 카드와 차트가 조화롭게 배치</p>
|
||||
<div class="card-tags">
|
||||
<span class="tag">그리드</span>
|
||||
<span class="tag">다크</span>
|
||||
<span class="tag">카드</span>
|
||||
</div>
|
||||
<a href="tablet/tablet-01-grid-dashboard.html" class="card-link" target="_blank">🔍 미리보기</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-preview">
|
||||
<iframe src="tablet/tablet-02-card-stack.html"></iframe>
|
||||
<div class="card-preview-overlay"></div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<span class="card-badge tablet">Tablet-02</span>
|
||||
<h3 class="card-title">카드 스택</h3>
|
||||
<p class="card-desc">세로 스크롤 카드 스택 구조. 라이트 테마의 깔끔한 디자인</p>
|
||||
<div class="card-tags">
|
||||
<span class="tag">카드스택</span>
|
||||
<span class="tag">라이트</span>
|
||||
<span class="tag">스크롤</span>
|
||||
</div>
|
||||
<a href="tablet/tablet-02-card-stack.html" class="card-link" target="_blank">🔍 미리보기</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-preview">
|
||||
<iframe src="tablet/tablet-03-split-horizontal.html"></iframe>
|
||||
<div class="card-preview-overlay"></div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<span class="card-badge tablet">Tablet-03</span>
|
||||
<h3 class="card-title">가로 분할</h3>
|
||||
<p class="card-desc">상단 설정/결과, 하단 차트/정보로 가로 분할된 레이아웃</p>
|
||||
<div class="card-tags">
|
||||
<span class="tag">가로분할</span>
|
||||
<span class="tag">다크</span>
|
||||
<span class="tag">컴팩트</span>
|
||||
</div>
|
||||
<a href="tablet/tablet-03-split-horizontal.html" class="card-link" target="_blank">🔍 미리보기</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-preview">
|
||||
<iframe src="tablet/tablet-04-slide-panel.html"></iframe>
|
||||
<div class="card-preview-overlay"></div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<span class="card-badge tablet">Tablet-04</span>
|
||||
<h3 class="card-title">슬라이드 패널</h3>
|
||||
<p class="card-desc">탭 네비게이션과 슬라이드 가능한 메트릭 카드</p>
|
||||
<div class="card-tags">
|
||||
<span class="tag">탭</span>
|
||||
<span class="tag">슬라이드</span>
|
||||
<span class="tag">퍼플</span>
|
||||
</div>
|
||||
<a href="tablet/tablet-04-slide-panel.html" class="card-link" target="_blank">🔍 미리보기</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-preview">
|
||||
<iframe src="tablet/tablet-05-compact-pro.html"></iframe>
|
||||
<div class="card-preview-overlay"></div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<span class="card-badge tablet">Tablet-05</span>
|
||||
<h3 class="card-title">컴팩트 프로</h3>
|
||||
<p class="card-desc">화이트 배경의 컴팩트한 프로페셔널 디자인</p>
|
||||
<div class="card-tags">
|
||||
<span class="tag">컴팩트</span>
|
||||
<span class="tag">화이트</span>
|
||||
<span class="tag">프로</span>
|
||||
</div>
|
||||
<a href="tablet/tablet-05-compact-pro.html" class="card-link" target="_blank">🔍 미리보기</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 모바일 섹션 -->
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<div class="section-icon">📲</div>
|
||||
<div class="section-info">
|
||||
<h2>모바일 (Mobile)</h2>
|
||||
<p>375px - 414px · 터치 인터페이스에 최적화</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-grid">
|
||||
<div class="card">
|
||||
<div class="card-preview">
|
||||
<iframe src="mobile/mobile-01-app-style.html"></iframe>
|
||||
<div class="card-preview-overlay"></div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<span class="card-badge mobile">Mobile-01</span>
|
||||
<h3 class="card-title">앱 스타일</h3>
|
||||
<p class="card-desc">iOS/Android 앱 스타일. 바텀 네비게이션과 플로팅 버튼</p>
|
||||
<div class="card-tags">
|
||||
<span class="tag">앱스타일</span>
|
||||
<span class="tag">다크</span>
|
||||
<span class="tag">바텀네비</span>
|
||||
</div>
|
||||
<a href="mobile/mobile-01-app-style.html" class="card-link" target="_blank">🔍 미리보기</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-preview">
|
||||
<iframe src="mobile/mobile-02-card-scroll.html"></iframe>
|
||||
<div class="card-preview-overlay"></div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<span class="card-badge mobile">Mobile-02</span>
|
||||
<h3 class="card-title">카드 스크롤</h3>
|
||||
<p class="card-desc">라이트 테마의 카드 기반 스크롤 UI. 가로 스크롤 메트릭</p>
|
||||
<div class="card-tags">
|
||||
<span class="tag">카드</span>
|
||||
<span class="tag">라이트</span>
|
||||
<span class="tag">스크롤</span>
|
||||
</div>
|
||||
<a href="mobile/mobile-02-card-scroll.html" class="card-link" target="_blank">🔍 미리보기</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-preview">
|
||||
<iframe src="mobile/mobile-03-fullscreen-chart.html"></iframe>
|
||||
<div class="card-preview-overlay"></div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<span class="card-badge mobile">Mobile-03</span>
|
||||
<h3 class="card-title">풀스크린 차트</h3>
|
||||
<p class="card-desc">차트가 화면 전체를 차지. 오버레이로 정보 표시</p>
|
||||
<div class="card-tags">
|
||||
<span class="tag">풀스크린</span>
|
||||
<span class="tag">오버레이</span>
|
||||
<span class="tag">몰입형</span>
|
||||
</div>
|
||||
<a href="mobile/mobile-03-fullscreen-chart.html" class="card-link" target="_blank">🔍 미리보기</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-preview">
|
||||
<iframe src="mobile/mobile-04-bottom-sheet.html"></iframe>
|
||||
<div class="card-preview-overlay"></div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<span class="card-badge mobile">Mobile-04</span>
|
||||
<h3 class="card-title">바텀시트</h3>
|
||||
<p class="card-desc">상단 차트 + 하단 바텀시트 구조. 드래그로 확장 가능</p>
|
||||
<div class="card-tags">
|
||||
<span class="tag">바텀시트</span>
|
||||
<span class="tag">드래그</span>
|
||||
<span class="tag">블루</span>
|
||||
</div>
|
||||
<a href="mobile/mobile-04-bottom-sheet.html" class="card-link" target="_blank">🔍 미리보기</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-preview">
|
||||
<iframe src="mobile/mobile-05-minimal-dark.html"></iframe>
|
||||
<div class="card-preview-overlay"></div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<span class="card-badge mobile">Mobile-05</span>
|
||||
<h3 class="card-title">미니멀 다크</h3>
|
||||
<p class="card-desc">대형 수익률 표시의 미니멀 디자인. 심플하고 직관적</p>
|
||||
<div class="card-tags">
|
||||
<span class="tag">미니멀</span>
|
||||
<span class="tag">다크</span>
|
||||
<span class="tag">심플</span>
|
||||
</div>
|
||||
<a href="mobile/mobile-05-minimal-dark.html" class="card-link" target="_blank">🔍 미리보기</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 가이드 -->
|
||||
<div class="guide">
|
||||
<h2>💡 UI 선택 가이드</h2>
|
||||
<div class="guide-grid">
|
||||
<div class="guide-item">
|
||||
<h3 class="guide-item-title">🖥️ 데스크톱 중심</h3>
|
||||
<p class="guide-item-desc">
|
||||
<strong>PC-01 트레이딩 터미널</strong> 또는 <strong>PC-04 다크 프로</strong>를 추천합니다.
|
||||
넓은 화면에서 차트와 정보를 동시에 확인하기 좋습니다.
|
||||
</p>
|
||||
</div>
|
||||
<div class="guide-item">
|
||||
<h3 class="guide-item-title">📊 상세 분석</h3>
|
||||
<p class="guide-item-desc">
|
||||
<strong>PC-02 분석 리포트</strong>를 추천합니다.
|
||||
테이블과 상세 데이터 확인에 최적화되어 있습니다.
|
||||
</p>
|
||||
</div>
|
||||
<div class="guide-item">
|
||||
<h3 class="guide-item-title">📱 모바일 중심</h3>
|
||||
<p class="guide-item-desc">
|
||||
<strong>Mobile-01 앱 스타일</strong> 또는 <strong>Mobile-03 풀스크린 차트</strong>를 추천합니다.
|
||||
터치에 최적화된 인터페이스입니다.
|
||||
</p>
|
||||
</div>
|
||||
<div class="guide-item">
|
||||
<h3 class="guide-item-title">🎨 라이트 테마 선호</h3>
|
||||
<p class="guide-item-desc">
|
||||
<strong>PC-03 미니멀 클린</strong>, <strong>Tablet-02 카드 스택</strong>,
|
||||
<strong>Mobile-02 카드 스크롤</strong>을 추천합니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="footer">
|
||||
<p>이 목업은 실제 구현 전 UI 디자인 검토를 위한 것입니다.</p>
|
||||
<p>선호하는 스타일을 선택하시면 해당 디자인으로 구현해 드립니다.</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user