906 lines
34 KiB
HTML
906 lines
34 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="ko">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>I'm AI App Design - Mobile Investment Guide Service</title>
|
||
|
|
<style>
|
||
|
|
* {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
font-family: 'Arial', sans-serif;
|
||
|
|
background-color: #f5f5f5;
|
||
|
|
padding: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 디바이스 컨테이너 - 3개 앱 화면을 나란히 배치 */
|
||
|
|
.device-container {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
gap: 30px;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 모바일 디바이스 프레임 */
|
||
|
|
.phone {
|
||
|
|
width: 375px; /* iPhone 기준 너비 */
|
||
|
|
height: 812px; /* iPhone 기준 높이 */
|
||
|
|
background: #000;
|
||
|
|
border-radius: 40px;
|
||
|
|
padding: 10px;
|
||
|
|
box-shadow: 0 0 30px rgba(0,0,0,0.3);
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 디바이스 스크린 영역 */
|
||
|
|
.screen {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 100%);
|
||
|
|
border-radius: 30px;
|
||
|
|
overflow: hidden;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 상태바 영역 (시간, 배터리 등) */
|
||
|
|
.status-bar {
|
||
|
|
height: 44px;
|
||
|
|
background: transparent;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
padding: 0 20px;
|
||
|
|
color: #fff;
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 상단 네비게이션 바 */
|
||
|
|
.nav-bar {
|
||
|
|
height: 60px;
|
||
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
color: white;
|
||
|
|
font-size: 18px;
|
||
|
|
font-weight: bold;
|
||
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 메인 콘텐츠 영역 */
|
||
|
|
.content {
|
||
|
|
height: calc(100% - 104px - 80px); /* 전체 높이에서 상단바와 하단바 제외 */
|
||
|
|
padding: 15px;
|
||
|
|
overflow-y: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 하단 탭 네비게이션 */
|
||
|
|
.bottom-nav {
|
||
|
|
height: 80px;
|
||
|
|
background: #1a1a1a;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-around;
|
||
|
|
align-items: center;
|
||
|
|
border-top: 1px solid #333;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 하단 네비게이션 아이템 */
|
||
|
|
.nav-item {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
color: #999;
|
||
|
|
font-size: 12px;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: color 0.3s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-item.active {
|
||
|
|
color: #667eea;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 네비게이션 아이콘 */
|
||
|
|
.nav-icon {
|
||
|
|
width: 24px;
|
||
|
|
height: 24px;
|
||
|
|
margin-bottom: 4px;
|
||
|
|
background: currentColor;
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 투자상품 리스트 */
|
||
|
|
.coin-list {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 개별 투자상품 카드 */
|
||
|
|
.coin-item {
|
||
|
|
background: linear-gradient(145deg, #1a1a1a, #2d2d2d);
|
||
|
|
border-radius: 15px;
|
||
|
|
padding: 20px;
|
||
|
|
border: 1px solid #333;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 투자상품 헤더 (이름, 심볼, 가격) */
|
||
|
|
.coin-header {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
margin-bottom: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 투자상품 정보 (아이콘, 이름) */
|
||
|
|
.coin-info {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 투자상품 아이콘 */
|
||
|
|
.coin-icon {
|
||
|
|
width: 40px;
|
||
|
|
height: 40px;
|
||
|
|
background: #667eea;
|
||
|
|
border-radius: 50%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
color: white;
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.coin-details h3 {
|
||
|
|
color: #fff;
|
||
|
|
font-size: 16px;
|
||
|
|
margin-bottom: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.coin-symbol {
|
||
|
|
color: #999;
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 가격 정보 영역 */
|
||
|
|
.coin-price {
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
.current-price {
|
||
|
|
color: #4ade80;
|
||
|
|
font-size: 18px;
|
||
|
|
font-weight: bold;
|
||
|
|
margin-bottom: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.price-change {
|
||
|
|
font-size: 12px;
|
||
|
|
padding: 4px 8px;
|
||
|
|
border-radius: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 가격 상승/하락 색상 구분 */
|
||
|
|
.price-up {
|
||
|
|
background: #22c55e;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.price-down {
|
||
|
|
background: #ef4444;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* AI 분석 결과 표시 */
|
||
|
|
.ai-analysis {
|
||
|
|
background: rgba(102, 126, 234, 0.1);
|
||
|
|
border: 1px solid #667eea;
|
||
|
|
border-radius: 10px;
|
||
|
|
padding: 12px;
|
||
|
|
margin: 15px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.analysis-title {
|
||
|
|
color: #667eea;
|
||
|
|
font-size: 12px;
|
||
|
|
font-weight: bold;
|
||
|
|
margin-bottom: 6px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.analysis-text {
|
||
|
|
color: #ccc;
|
||
|
|
font-size: 12px;
|
||
|
|
line-height: 1.4;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 투자 목표가 표시 영역 */
|
||
|
|
.price-targets {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
gap: 10px;
|
||
|
|
margin-top: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.target-item {
|
||
|
|
flex: 1;
|
||
|
|
text-align: center;
|
||
|
|
padding: 8px;
|
||
|
|
background: rgba(255,255,255,0.05);
|
||
|
|
border-radius: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.target-label {
|
||
|
|
color: #999;
|
||
|
|
font-size: 10px;
|
||
|
|
margin-bottom: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.target-value {
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 목표가별 색상 구분 */
|
||
|
|
.entry-price { color: #4ade80; }
|
||
|
|
.target-price { color: #fbbf24; }
|
||
|
|
.stop-loss { color: #ef4444; }
|
||
|
|
|
||
|
|
/* AI 투자 점수 표시 */
|
||
|
|
.ai-score {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
background: linear-gradient(45deg, #667eea, #764ba2);
|
||
|
|
border-radius: 10px;
|
||
|
|
padding: 12px;
|
||
|
|
margin-top: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.score-label {
|
||
|
|
color: white;
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.score-value {
|
||
|
|
color: white;
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 페이지별 스타일 */
|
||
|
|
.page-2 .content {
|
||
|
|
padding: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 상세 분석 카드 */
|
||
|
|
.detail-card {
|
||
|
|
background: linear-gradient(145deg, #1a1a1a, #2d2d2d);
|
||
|
|
border-radius: 15px;
|
||
|
|
padding: 25px;
|
||
|
|
border: 1px solid #333;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 상세 분석 헤더 */
|
||
|
|
.detail-header {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 15px;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 큰 투자상품 아이콘 */
|
||
|
|
.large-coin-icon {
|
||
|
|
width: 60px;
|
||
|
|
height: 60px;
|
||
|
|
background: #667eea;
|
||
|
|
border-radius: 50%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
color: white;
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 큰 가격 표시 */
|
||
|
|
.large-price {
|
||
|
|
font-size: 28px;
|
||
|
|
color: #4ade80;
|
||
|
|
font-weight: bold;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 상세 AI 분석 영역 */
|
||
|
|
.detail-analysis {
|
||
|
|
background: rgba(102, 126, 234, 0.1);
|
||
|
|
border: 1px solid #667eea;
|
||
|
|
border-radius: 12px;
|
||
|
|
padding: 20px;
|
||
|
|
margin: 20px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 분석 섹션 */
|
||
|
|
.analysis-section {
|
||
|
|
margin-bottom: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.analysis-section h4 {
|
||
|
|
color: #667eea;
|
||
|
|
font-size: 14px;
|
||
|
|
margin-bottom: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.analysis-section p {
|
||
|
|
color: #ccc;
|
||
|
|
font-size: 13px;
|
||
|
|
line-height: 1.5;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 페이지 3 설정 리스트 */
|
||
|
|
.page-3 .settings-list {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 설정 카드 */
|
||
|
|
.setting-card {
|
||
|
|
background: linear-gradient(145deg, #1a1a1a, #2d2d2d);
|
||
|
|
border-radius: 12px;
|
||
|
|
padding: 20px;
|
||
|
|
border: 1px solid #333;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 설정 제목 */
|
||
|
|
.setting-title {
|
||
|
|
color: #667eea;
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: bold;
|
||
|
|
margin-bottom: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 설정 아이템 */
|
||
|
|
.setting-item {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
margin-bottom: 12px;
|
||
|
|
padding-bottom: 12px;
|
||
|
|
border-bottom: 1px solid #333;
|
||
|
|
}
|
||
|
|
|
||
|
|
.setting-item:last-child {
|
||
|
|
border-bottom: none;
|
||
|
|
margin-bottom: 0;
|
||
|
|
padding-bottom: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 설정 라벨 */
|
||
|
|
.setting-label {
|
||
|
|
color: #ccc;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 설정 값 */
|
||
|
|
.setting-value {
|
||
|
|
color: #fff;
|
||
|
|
font-size: 14px;
|
||
|
|
padding: 6px 12px;
|
||
|
|
background: #333;
|
||
|
|
border-radius: 6px;
|
||
|
|
border: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 토글 스위치 */
|
||
|
|
.switch {
|
||
|
|
width: 50px;
|
||
|
|
height: 24px;
|
||
|
|
background: #333;
|
||
|
|
border-radius: 12px;
|
||
|
|
position: relative;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.switch.active {
|
||
|
|
background: #667eea;
|
||
|
|
}
|
||
|
|
|
||
|
|
.switch::after {
|
||
|
|
content: '';
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
background: white;
|
||
|
|
border-radius: 50%;
|
||
|
|
position: absolute;
|
||
|
|
top: 2px;
|
||
|
|
left: 2px;
|
||
|
|
transition: transform 0.3s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.switch.active::after {
|
||
|
|
transform: translateX(26px);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 모바일 광고 배너 */
|
||
|
|
.ad-banner-mobile {
|
||
|
|
background: linear-gradient(45deg, #333, #555);
|
||
|
|
border-radius: 10px;
|
||
|
|
padding: 15px;
|
||
|
|
text-align: center;
|
||
|
|
margin: 15px 0;
|
||
|
|
border: 1px dashed #666;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ad-banner-mobile h4 {
|
||
|
|
color: #999;
|
||
|
|
font-size: 12px;
|
||
|
|
margin-bottom: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ad-banner-mobile p {
|
||
|
|
color: #777;
|
||
|
|
font-size: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 설명 텍스트 스타일 */
|
||
|
|
.description-text {
|
||
|
|
background: #333;
|
||
|
|
color: #ccc;
|
||
|
|
padding: 6px 10px;
|
||
|
|
border-radius: 6px;
|
||
|
|
font-size: 11px;
|
||
|
|
border: 1px solid #555;
|
||
|
|
margin: 5px 0;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="device-container">
|
||
|
|
<!--
|
||
|
|
페이지 1: 메인 투자 현황 화면
|
||
|
|
- 하단 탭 네비게이션의 "홈" 탭
|
||
|
|
- 5개 투자상품의 실시간 정보 표시
|
||
|
|
- 각 카드에 AI 분석 결과와 투자 점수 포함
|
||
|
|
-->
|
||
|
|
<div class="phone">
|
||
|
|
<div class="screen">
|
||
|
|
<!-- iOS 스타일 상태바 -->
|
||
|
|
<div class="status-bar">
|
||
|
|
<span>[STATUS] 9:41</span>
|
||
|
|
<span>[BATTERY] 100%</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 상단 네비게이션 바 -->
|
||
|
|
<div class="nav-bar">
|
||
|
|
[NAV TITLE] I'm AI - Investment Status
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 메인 콘텐츠 영역 -->
|
||
|
|
<div class="content">
|
||
|
|
<div class="coin-list">
|
||
|
|
<!--
|
||
|
|
투자상품 #1: Bitcoin
|
||
|
|
- 현재가, 변동률 표시
|
||
|
|
- AI 분석 요약
|
||
|
|
- 목표가 정보 (진입/목표/손절)
|
||
|
|
- AI 투자 점수
|
||
|
|
-->
|
||
|
|
<div class="coin-item">
|
||
|
|
<div class="coin-header">
|
||
|
|
<div class="coin-info">
|
||
|
|
<div class="coin-icon">[ICON] BTC</div>
|
||
|
|
<div class="coin-details">
|
||
|
|
<h3>[COIN NAME] Bitcoin</h3>
|
||
|
|
<div class="coin-symbol">[SYMBOL] BTC</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="coin-price">
|
||
|
|
<div class="current-price">[PRICE] $43,250</div>
|
||
|
|
<div class="price-change price-up">[CHANGE] +2.35%</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- AI 분석 요약 -->
|
||
|
|
<div class="ai-analysis">
|
||
|
|
<div class="analysis-title">[AI TITLE] AI Market Analysis</div>
|
||
|
|
<div class="analysis-text description-text">[AI SUMMARY] Institutional investment inflow sustains upward momentum. Technical bullish signals detected.</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 투자 목표가 표시 -->
|
||
|
|
<div class="price-targets">
|
||
|
|
<div class="target-item">
|
||
|
|
<div class="target-label">[LABEL] Entry</div>
|
||
|
|
<div class="target-value entry-price">[ENTRY] $42,800</div>
|
||
|
|
</div>
|
||
|
|
<div class="target-item">
|
||
|
|
<div class="target-label">[LABEL] Target</div>
|
||
|
|
<div class="target-value target-price">[TARGET] $46,500</div>
|
||
|
|
</div>
|
||
|
|
<div class="target-item">
|
||
|
|
<div class="target-label">[LABEL] Stop</div>
|
||
|
|
<div class="target-value stop-loss">[STOP] $40,200</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- AI 투자 점수 -->
|
||
|
|
<div class="ai-score">
|
||
|
|
<span class="score-label">[SCORE LABEL] AI Investment Score</span>
|
||
|
|
<span class="score-value">[SCORE] 8.5/10</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!--
|
||
|
|
투자상품 #2: Ethereum
|
||
|
|
동일한 구조로 이더리움 정보 표시
|
||
|
|
-->
|
||
|
|
<div class="coin-item">
|
||
|
|
<div class="coin-header">
|
||
|
|
<div class="coin-info">
|
||
|
|
<div class="coin-icon">[ICON] ETH</div>
|
||
|
|
<div class="coin-details">
|
||
|
|
<h3>[COIN NAME] Ethereum</h3>
|
||
|
|
<div class="coin-symbol">[SYMBOL] ETH</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="coin-price">
|
||
|
|
<div class="current-price">[PRICE] $2,580</div>
|
||
|
|
<div class="price-change price-down">[CHANGE] -1.20%</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="ai-analysis">
|
||
|
|
<div class="analysis-title">[AI TITLE] AI Market Analysis</div>
|
||
|
|
<div class="analysis-text description-text">[AI SUMMARY] Short-term correction phase but long-term upward outlook. Positive DeFi growth.</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="price-targets">
|
||
|
|
<div class="target-item">
|
||
|
|
<div class="target-label">[LABEL] Entry</div>
|
||
|
|
<div class="target-value entry-price">[ENTRY] $2,520</div>
|
||
|
|
</div>
|
||
|
|
<div class="target-item">
|
||
|
|
<div class="target-label">[LABEL] Target</div>
|
||
|
|
<div class="target-value target-price">[TARGET] $2,850</div>
|
||
|
|
</div>
|
||
|
|
<div class="target-item">
|
||
|
|
<div class="target-label">[LABEL] Stop</div>
|
||
|
|
<div class="target-value stop-loss">[STOP] $2,350</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="ai-score">
|
||
|
|
<span class="score-label">[SCORE LABEL] AI Investment Score</span>
|
||
|
|
<span class="score-value">[SCORE] 7.2/10</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!--
|
||
|
|
광고 영역: 모바일 배너
|
||
|
|
- 투자상품 목록 중간에 삽입
|
||
|
|
- 사용자 경험을 해치지 않는 선에서 배치
|
||
|
|
-->
|
||
|
|
<div class="ad-banner-mobile">
|
||
|
|
<h4>[AD TITLE] Advertisement</h4>
|
||
|
|
<p class="description-text">[AD DESCRIPTION] Mobile Banner Advertisement Area<br>Revenue Generation Through Ad Display</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!--
|
||
|
|
투자상품 #3: Ripple
|
||
|
|
높은 AI 점수를 받은 추천 종목
|
||
|
|
-->
|
||
|
|
<div class="coin-item">
|
||
|
|
<div class="coin-header">
|
||
|
|
<div class="coin-info">
|
||
|
|
<div class="coin-icon">[ICON] XRP</div>
|
||
|
|
<div class="coin-details">
|
||
|
|
<h3>[COIN NAME] Ripple</h3>
|
||
|
|
<div class="coin-symbol">[SYMBOL] XRP</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="coin-price">
|
||
|
|
<div class="current-price">[PRICE] $0.625</div>
|
||
|
|
<div class="price-change price-up">[CHANGE] +5.80%</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="ai-score">
|
||
|
|
<span class="score-label">[SCORE LABEL] AI Investment Score</span>
|
||
|
|
<span class="score-value">[SCORE] 9.1/10</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 하단 탭 네비게이션 -->
|
||
|
|
<div class="bottom-nav">
|
||
|
|
<div class="nav-item active">
|
||
|
|
<div class="nav-icon">[ICON]</div>
|
||
|
|
<span>[TAB] Home</span>
|
||
|
|
</div>
|
||
|
|
<div class="nav-item">
|
||
|
|
<div class="nav-icon">[ICON]</div>
|
||
|
|
<span>[TAB] Analysis</span>
|
||
|
|
</div>
|
||
|
|
<div class="nav-item">
|
||
|
|
<div class="nav-icon">[ICON]</div>
|
||
|
|
<span>[TAB] Settings</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!--
|
||
|
|
페이지 2: AI 분석 상세 화면
|
||
|
|
- 하단 탭 네비게이션의 "분석" 탭
|
||
|
|
- 선택한 투자상품의 상세 AI 분석 결과
|
||
|
|
- 기술적 분석, 뉴스 분석, 투자 전략 제공
|
||
|
|
-->
|
||
|
|
<div class="phone page-2">
|
||
|
|
<div class="screen">
|
||
|
|
<div class="status-bar">
|
||
|
|
<span>[STATUS] 9:41</span>
|
||
|
|
<span>[BATTERY] 100%</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="nav-bar">
|
||
|
|
[NAV TITLE] AI Analysis Detail
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="content">
|
||
|
|
<!--
|
||
|
|
상세 분석 카드
|
||
|
|
- 투자상품 기본 정보 (큰 아이콘, 이름, 가격)
|
||
|
|
- 상세 AI 분석 (기술적/뉴스/전략 분석)
|
||
|
|
- 종합 AI 투자 점수
|
||
|
|
-->
|
||
|
|
<div class="detail-card">
|
||
|
|
<div class="detail-header">
|
||
|
|
<div class="large-coin-icon">[BIG ICON] BTC</div>
|
||
|
|
<div>
|
||
|
|
<h2 style="color: white; margin-bottom: 5px;">[COIN NAME] Bitcoin</h2>
|
||
|
|
<div class="large-price">[LARGE PRICE] $43,250.00</div>
|
||
|
|
<div class="price-change price-up">[PRICE CHANGE] +2.35% (+$992.50)</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 상세 AI 분석 영역 -->
|
||
|
|
<div class="detail-analysis">
|
||
|
|
<!-- 기술적 분석 섹션 -->
|
||
|
|
<div class="analysis-section">
|
||
|
|
<h4>[SECTION TITLE] Technical Analysis</h4>
|
||
|
|
<p class="description-text">[TECHNICAL ANALYSIS] RSI indicator at 65 level shows bullish signals. Moving average breakout strengthens upward momentum.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 뉴스 분석 섹션 -->
|
||
|
|
<div class="analysis-section">
|
||
|
|
<h4>[SECTION TITLE] News Analysis</h4>
|
||
|
|
<p class="description-text">[NEWS ANALYSIS] Major institutional Bitcoin ETF approvals by BlackRock and others drive significant capital inflow.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 투자 전략 섹션 -->
|
||
|
|
<div class="analysis-section">
|
||
|
|
<h4>[SECTION TITLE] Investment Strategy</h4>
|
||
|
|
<p class="description-text">[STRATEGY] Recommend entry at $42,800, hold until target $46,500. Strict adherence to stop-loss at $40,200 required.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 종합 AI 점수 -->
|
||
|
|
<div class="ai-score">
|
||
|
|
<span class="score-label">[TOTAL SCORE LABEL] Comprehensive AI Investment Score</span>
|
||
|
|
<span class="score-value">[TOTAL SCORE] 8.5/10</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!--
|
||
|
|
광고 영역: 전면 또는 동영상 광고
|
||
|
|
- 상세 분석 하단에 배치
|
||
|
|
- 더 높은 광고 단가 기대
|
||
|
|
-->
|
||
|
|
<div class="ad-banner-mobile">
|
||
|
|
<h4>[PREMIUM AD] Premium Advertisement</h4>
|
||
|
|
<p class="description-text">[AD DESCRIPTION] Full-screen or Video Advertisement Area<br>Higher Revenue Premium Ad Space</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="bottom-nav">
|
||
|
|
<div class="nav-item">
|
||
|
|
<div class="nav-icon">[ICON]</div>
|
||
|
|
<span>[TAB] Home</span>
|
||
|
|
</div>
|
||
|
|
<div class="nav-item active">
|
||
|
|
<div class="nav-icon">[ICON]</div>
|
||
|
|
<span>[TAB] Analysis</span>
|
||
|
|
</div>
|
||
|
|
<div class="nav-item">
|
||
|
|
<div class="nav-icon">[ICON]</div>
|
||
|
|
<span>[TAB] Settings</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!--
|
||
|
|
페이지 3: 개인 맞춤 설정 화면
|
||
|
|
- 하단 탭 네비게이션의 "설정" 탭
|
||
|
|
- 투자 성향 설정
|
||
|
|
- 알림 설정
|
||
|
|
- 앱 설정
|
||
|
|
-->
|
||
|
|
<div class="phone page-3">
|
||
|
|
<div class="screen">
|
||
|
|
<div class="status-bar">
|
||
|
|
<span>[STATUS] 9:41</span>
|
||
|
|
<span>[BATTERY] 100%</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="nav-bar">
|
||
|
|
[NAV TITLE] Personal Settings
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="content">
|
||
|
|
<div class="settings-list">
|
||
|
|
<!--
|
||
|
|
투자 성향 설정 카드
|
||
|
|
- 투자 유형 선택 (보수적/균형/적극적/공격적)
|
||
|
|
- 투자 기간 설정
|
||
|
|
- 위험 허용도 조절
|
||
|
|
-->
|
||
|
|
<div class="setting-card">
|
||
|
|
<div class="setting-title">[CARD TITLE] Investment Preferences</div>
|
||
|
|
|
||
|
|
<div class="setting-item">
|
||
|
|
<span class="setting-label">[LABEL] Investment Type</span>
|
||
|
|
<select class="setting-value">
|
||
|
|
<option>[OPTION] Conservative</option>
|
||
|
|
<option>[OPTION] Balanced</option>
|
||
|
|
<option>[OPTION] Aggressive</option>
|
||
|
|
<option>[OPTION] High Risk</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="setting-item">
|
||
|
|
<span class="setting-label">[LABEL] Investment Period</span>
|
||
|
|
<select class="setting-value">
|
||
|
|
<option>[OPTION] Short Term (1-3 months)</option>
|
||
|
|
<option>[OPTION] Medium Term (3-12 months)</option>
|
||
|
|
<option>[OPTION] Long Term (1+ years)</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="setting-item">
|
||
|
|
<span class="setting-label">[LABEL] Risk Tolerance</span>
|
||
|
|
<span class="setting-value">[VALUE] Medium (5/10)</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!--
|
||
|
|
알림 설정 카드
|
||
|
|
- 목표가 도달 알림 on/off
|
||
|
|
- 손절가 도달 알림 on/off
|
||
|
|
- 진입가 도달 알림 on/off
|
||
|
|
- AI 추천 알림 on/off
|
||
|
|
-->
|
||
|
|
<div class="setting-card">
|
||
|
|
<div class="setting-title">[CARD TITLE] Notification Settings</div>
|
||
|
|
|
||
|
|
<div class="setting-item">
|
||
|
|
<span class="setting-label">[ALERT LABEL] Target Price Alert</span>
|
||
|
|
<div class="switch active">[SWITCH] ON</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="setting-item">
|
||
|
|
<span class="setting-label">[ALERT LABEL] Stop Loss Alert</span>
|
||
|
|
<div class="switch active">[SWITCH] ON</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="setting-item">
|
||
|
|
<span class="setting-label">[ALERT LABEL] Entry Price Alert</span>
|
||
|
|
<div class="switch active">[SWITCH] ON</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="setting-item">
|
||
|
|
<span class="setting-label">[ALERT LABEL] AI Recommendation Alert</span>
|
||
|
|
<div class="switch active">[SWITCH] ON</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!--
|
||
|
|
광고 영역: 설정 페이지 광고
|
||
|
|
- 설정 카드들 사이에 자연스럽게 삽입
|
||
|
|
- 사용자가 설정을 변경하는 동안 노출
|
||
|
|
-->
|
||
|
|
<div class="ad-banner-mobile">
|
||
|
|
<h4>[SETTINGS AD] Settings Page Ad</h4>
|
||
|
|
<p class="description-text">[AD DESCRIPTION] Advertisement in Settings Area<br>Targeted Ad Based on User Preferences</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!--
|
||
|
|
앱 설정 카드
|
||
|
|
- 다크 모드 on/off
|
||
|
|
- 자동 업데이트 on/off
|
||
|
|
- 데이터 절약 모드 on/off
|
||
|
|
-->
|
||
|
|
<div class="setting-card">
|
||
|
|
<div class="setting-title">[CARD TITLE] App Settings</div>
|
||
|
|
|
||
|
|
<div class="setting-item">
|
||
|
|
<span class="setting-label">[SETTING LABEL] Dark Mode</span>
|
||
|
|
<div class="switch active">[SWITCH] ON</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="setting-item">
|
||
|
|
<span class="setting-label">[SETTING LABEL] Auto Update</span>
|
||
|
|
<div class="switch active">[SWITCH] ON</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="setting-item">
|
||
|
|
<span class="setting-label">[SETTING LABEL] Data Saving Mode</span>
|
||
|
|
<div class="switch">[SWITCH] OFF</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="bottom-nav">
|
||
|
|
<div class="nav-item">
|
||
|
|
<div class="nav-icon">[ICON]</div>
|
||
|
|
<span>[TAB] Home</span>
|
||
|
|
</div>
|
||
|
|
<div class="nav-item">
|
||
|
|
<div class="nav-icon">[ICON]</div>
|
||
|
|
<span>[TAB] Analysis</span>
|
||
|
|
</div>
|
||
|
|
<div class="nav-item active">
|
||
|
|
<div class="nav-icon">[ICON]</div>
|
||
|
|
<span>[TAB] Settings</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// 토글 스위치 기능
|
||
|
|
// 실제 구현시 사용자 설정을 서버에 저장하고 동기화
|
||
|
|
document.querySelectorAll('.switch').forEach(switchEl => {
|
||
|
|
switchEl.addEventListener('click', function() {
|
||
|
|
this.classList.toggle('active');
|
||
|
|
|
||
|
|
// 실제 구현시 여기서 서버로 설정값 전송
|
||
|
|
console.log('Setting changed:', this.previousElementSibling.textContent);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// 실시간 가격 업데이트 시뮬레이션 (모바일용)
|
||
|
|
// 실제로는 WebSocket 연결을 통해 실시간 데이터 수신
|
||
|
|
function updateMobilePrices() {
|
||
|
|
const priceElements = document.querySelectorAll('.current-price');
|
||
|
|
|
||
|
|
priceElements.forEach(element => {
|
||
|
|
// 실제로는 API에서 실시간 데이터를 받아와 업데이트
|
||
|
|
const currentText = element.textContent;
|
||
|
|
console.log('Mobile price update simulation for:', currentText);
|
||
|
|
|
||
|
|
// 푸시 알림 조건 확인
|
||
|
|
// 실제 구현시 목표가/손절가 도달시 알림 발송
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// 30초마다 가격 업데이트 (데모용)
|
||
|
|
setInterval(updateMobilePrices, 30000);
|
||
|
|
|
||
|
|
// 페이지 전환 애니메이션
|
||
|
|
// 실제 앱에서는 React Native Navigation 또는 Flutter Navigator 사용
|
||
|
|
function navigateToPage(pageIndex) {
|
||
|
|
console.log('Navigate to page:', pageIndex);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|