926 lines
31 KiB
HTML
926 lines
31 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 투자매니저 - 메인 대시보드</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Pretendard', 'Apple SD Gothic Neo', sans-serif;
|
|
background: linear-gradient(135deg, #0f1419 0%, #1a1f2e 100%);
|
|
color: #ffffff;
|
|
line-height: 1.6;
|
|
padding-left: 140px;
|
|
padding-right: 140px;
|
|
}
|
|
|
|
/* 사이드 광고 배너 */
|
|
.side-banner {
|
|
position: fixed;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 120px;
|
|
height: 600px;
|
|
background: linear-gradient(145deg, #1a1f2e, #2d2d2d);
|
|
border-radius: 12px;
|
|
border: 2px dashed #667eea;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
color: #667eea;
|
|
z-index: 1000;
|
|
box-shadow: 0 8px 32px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
.left-banner {
|
|
left: 10px;
|
|
}
|
|
|
|
.right-banner {
|
|
right: 10px;
|
|
}
|
|
|
|
.banner-content {
|
|
padding: 20px 10px;
|
|
}
|
|
|
|
.banner-title {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
margin-bottom: 10px;
|
|
transform: rotate(-90deg);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.banner-subtitle {
|
|
font-size: 10px;
|
|
opacity: 0.8;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* 헤더 */
|
|
.header {
|
|
background: rgba(15, 20, 25, 0.95);
|
|
backdrop-filter: blur(20px);
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
padding: 15px 0;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 999;
|
|
}
|
|
|
|
.header-container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.logo-text {
|
|
font-size: 1.8rem;
|
|
font-weight: 800;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.logo-subtitle {
|
|
font-size: 0.9rem;
|
|
color: #a0a0a0;
|
|
}
|
|
|
|
.nav {
|
|
display: flex;
|
|
gap: 30px;
|
|
}
|
|
|
|
.nav-item {
|
|
color: #ffffff;
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
transition: color 0.3s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.nav-item:hover {
|
|
color: #667eea;
|
|
}
|
|
|
|
.nav-item.active {
|
|
color: #667eea;
|
|
}
|
|
|
|
/* 광고 배너 (상단) */
|
|
.header-banner {
|
|
background: linear-gradient(135deg, #667eea, #764ba2);
|
|
color: white;
|
|
text-align: center;
|
|
padding: 12px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* 메인 컨테이너 */
|
|
.main-container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
/* 상단 광고 배너 */
|
|
.top-ad-banner {
|
|
background: linear-gradient(145deg, #1a1f2e, #2d2d2d);
|
|
border: 2px dashed #667eea;
|
|
border-radius: 16px;
|
|
padding: 20px;
|
|
margin-bottom: 24px;
|
|
text-align: center;
|
|
color: #667eea;
|
|
}
|
|
|
|
.ad-title {
|
|
font-size: 1.1rem;
|
|
font-weight: bold;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.ad-description {
|
|
font-size: 0.9rem;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* 콘텐츠 그리드 */
|
|
.content-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 320px;
|
|
gap: 30px;
|
|
}
|
|
|
|
/* 투자상품 섹션 */
|
|
.products-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: #ffffff;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.products-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
|
gap: 20px;
|
|
}
|
|
|
|
/* 투자상품 카드 */
|
|
.product-card {
|
|
background: rgba(26, 31, 46, 0.8);
|
|
backdrop-filter: blur(20px);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 16px;
|
|
padding: 24px;
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.product-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 3px;
|
|
background: linear-gradient(90deg, #667eea, #764ba2);
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.product-card:hover {
|
|
transform: translateY(-5px);
|
|
border-color: rgba(102, 126, 234, 0.3);
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.product-card:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.product-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
}
|
|
|
|
.product-name {
|
|
font-size: 1.3rem;
|
|
font-weight: 700;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.product-symbol {
|
|
font-size: 0.9rem;
|
|
color: #a0a0a0;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.product-type {
|
|
background: linear-gradient(135deg, #667eea, #764ba2);
|
|
color: white;
|
|
padding: 4px 12px;
|
|
border-radius: 12px;
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* 가격 정보 */
|
|
.price-section {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.current-price {
|
|
font-size: 2.2rem;
|
|
font-weight: 800;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.price-positive { color: #22c55e; }
|
|
.price-negative { color: #ef4444; }
|
|
.price-neutral { color: #ffffff; }
|
|
|
|
.price-change {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.change-badge {
|
|
padding: 4px 10px;
|
|
border-radius: 8px;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.change-positive {
|
|
background: rgba(34, 197, 94, 0.2);
|
|
color: #22c55e;
|
|
}
|
|
|
|
.change-negative {
|
|
background: rgba(239, 68, 68, 0.2);
|
|
color: #ef4444;
|
|
}
|
|
|
|
/* AI 분석 섹션 */
|
|
.ai-section {
|
|
background: rgba(102, 126, 234, 0.1);
|
|
border: 1px solid rgba(102, 126, 234, 0.3);
|
|
border-radius: 12px;
|
|
padding: 16px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.ai-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.ai-icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
background: linear-gradient(135deg, #667eea, #764ba2);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.ai-label {
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
color: #667eea;
|
|
}
|
|
|
|
.ai-score {
|
|
font-size: 1.4rem;
|
|
font-weight: 800;
|
|
color: #ffffff;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.ai-analysis {
|
|
font-size: 0.9rem;
|
|
color: #e0e0e0;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* 투자 지표 */
|
|
.targets-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 12px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.target-item {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-radius: 8px;
|
|
padding: 12px;
|
|
text-align: center;
|
|
}
|
|
|
|
.target-label {
|
|
font-size: 0.8rem;
|
|
color: #a0a0a0;
|
|
margin-bottom: 4px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.target-value {
|
|
font-size: 1.1rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.entry-price { color: #3b82f6; }
|
|
.target-price { color: #f59e0b; }
|
|
.stop-loss { color: #ef4444; }
|
|
|
|
/* 사이드바 */
|
|
.sidebar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
}
|
|
|
|
/* 사이드바 광고 */
|
|
.sidebar-ad {
|
|
background: linear-gradient(145deg, #1a1f2e, #2d2d2d);
|
|
border: 2px dashed #667eea;
|
|
border-radius: 16px;
|
|
padding: 20px;
|
|
text-align: center;
|
|
color: #667eea;
|
|
min-height: 200px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* 시장 개요 */
|
|
.market-overview {
|
|
background: rgba(26, 31, 46, 0.8);
|
|
backdrop-filter: blur(20px);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 16px;
|
|
padding: 20px;
|
|
}
|
|
|
|
.overview-title {
|
|
font-size: 1.2rem;
|
|
font-weight: 700;
|
|
margin-bottom: 16px;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.market-stats {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.stat-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.stat-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 0.9rem;
|
|
color: #a0a0a0;
|
|
}
|
|
|
|
.stat-value {
|
|
font-weight: 600;
|
|
color: #ffffff;
|
|
}
|
|
|
|
/* 인라인 광고 */
|
|
.inline-ad {
|
|
background: rgba(102, 126, 234, 0.1);
|
|
border: 2px dashed rgba(102, 126, 234, 0.3);
|
|
border-radius: 12px;
|
|
padding: 16px;
|
|
text-align: center;
|
|
color: #667eea;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
/* 하단 광고 배너 */
|
|
.bottom-ad-banner {
|
|
background: linear-gradient(145deg, #1a1f2e, #2d2d2d);
|
|
border: 2px dashed #667eea;
|
|
border-radius: 16px;
|
|
padding: 30px;
|
|
margin-top: 40px;
|
|
text-align: center;
|
|
color: #667eea;
|
|
}
|
|
|
|
.bottom-ad-title {
|
|
font-size: 1.3rem;
|
|
font-weight: bold;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.bottom-ad-description {
|
|
font-size: 1rem;
|
|
opacity: 0.8;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.ad-cta-button {
|
|
background: linear-gradient(135deg, #667eea, #764ba2);
|
|
color: white;
|
|
border: none;
|
|
padding: 12px 24px;
|
|
border-radius: 8px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.ad-cta-button:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* 반응형 디자인 */
|
|
@media (max-width: 1400px) {
|
|
body {
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
}
|
|
|
|
.side-banner {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1200px) {
|
|
.content-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 20px;
|
|
}
|
|
|
|
.sidebar {
|
|
grid-row: 1;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.header-container {
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
}
|
|
|
|
.nav {
|
|
gap: 20px;
|
|
order: -1;
|
|
}
|
|
|
|
.products-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.product-card {
|
|
padding: 20px;
|
|
}
|
|
|
|
.current-price {
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
.main-container {
|
|
padding: 15px;
|
|
}
|
|
|
|
.targets-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 8px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.card-header {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- 좌측 사이드 광고 -->
|
|
<div class="side-banner left-banner">
|
|
<div class="banner-content">
|
|
<div class="banner-title">[LEFT AD]</div>
|
|
<div class="banner-subtitle">
|
|
세로형<br>
|
|
광고<br>
|
|
120x600px
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 우측 사이드 광고 -->
|
|
<div class="side-banner right-banner">
|
|
<div class="banner-content">
|
|
<div class="banner-title">[RIGHT AD]</div>
|
|
<div class="banner-subtitle">
|
|
세로형<br>
|
|
광고<br>
|
|
120x600px
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 상단 헤더 광고 -->
|
|
<div class="header-banner">
|
|
🎯 지금 가입하면 AI 프리미엄 분석 1개월 무료! 투자 수익률 극대화하세요 →
|
|
</div>
|
|
|
|
<!-- 헤더 -->
|
|
<header class="header">
|
|
<div class="header-container">
|
|
<div class="logo">
|
|
<div>
|
|
<div class="logo-text">I'm AI</div>
|
|
<div class="logo-subtitle">투자매니저</div>
|
|
</div>
|
|
</div>
|
|
<nav class="nav">
|
|
<a class="nav-item active" onclick="showPage('dashboard')">대시보드</a>
|
|
<a class="nav-item" onclick="showPage('analysis')">분석</a>
|
|
<a class="nav-item" onclick="showPage('simulation')">시뮬레이션</a>
|
|
<a class="nav-item" onclick="showPage('settings')">설정</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 메인 컨테이너 -->
|
|
<div class="main-container">
|
|
<!-- 상단 광고 배너 -->
|
|
<div class="top-ad-banner">
|
|
<div class="ad-title">📊 [상단 광고 배너] - 1400x100px</div>
|
|
<div class="ad-description">주요 광고 영역 - 높은 노출도로 수익 극대화</div>
|
|
</div>
|
|
|
|
<!-- 콘텐츠 그리드 -->
|
|
<div class="content-grid">
|
|
<!-- 투자상품 섹션 -->
|
|
<main class="products-section">
|
|
<h2 class="section-title">🤖 AI 추천 투자상품</h2>
|
|
|
|
<div class="products-grid">
|
|
<!-- Bitcoin -->
|
|
<div class="product-card" onclick="openDetail('BTC')">
|
|
<div class="card-header">
|
|
<div class="product-info">
|
|
<div class="product-name">Bitcoin</div>
|
|
<div class="product-symbol">BTC</div>
|
|
</div>
|
|
<div class="product-type">Crypto</div>
|
|
</div>
|
|
|
|
<div class="price-section">
|
|
<div class="current-price price-positive" id="price-BTC">$43,250.00</div>
|
|
<div class="price-change">
|
|
<span class="change-badge change-positive" id="change-BTC">+2.35%</span>
|
|
<span id="amount-BTC">+$992.50</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ai-section">
|
|
<div class="ai-title">
|
|
<div class="ai-icon">🤖</div>
|
|
<div class="ai-label">AI 분석</div>
|
|
<div class="ai-score">8.5/10</div>
|
|
</div>
|
|
<div class="ai-analysis">
|
|
기관 자금 유입 지속으로 상승 모멘텀 유지. 기술적 분석에서 강세 신호 감지됨.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="targets-grid">
|
|
<div class="target-item">
|
|
<div class="target-label">진입가</div>
|
|
<div class="target-value entry-price">$42,800</div>
|
|
</div>
|
|
<div class="target-item">
|
|
<div class="target-label">목표가</div>
|
|
<div class="target-value target-price">$46,500</div>
|
|
</div>
|
|
<div class="target-item">
|
|
<div class="target-label">손절가</div>
|
|
<div class="target-value stop-loss">$40,200</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Ethereum -->
|
|
<div class="product-card" onclick="openDetail('ETH')">
|
|
<div class="card-header">
|
|
<div class="product-info">
|
|
<div class="product-name">Ethereum</div>
|
|
<div class="product-symbol">ETH</div>
|
|
</div>
|
|
<div class="product-type">Crypto</div>
|
|
</div>
|
|
|
|
<div class="price-section">
|
|
<div class="current-price price-negative" id="price-ETH">$2,580.00</div>
|
|
<div class="price-change">
|
|
<span class="change-badge change-negative" id="change-ETH">-1.20%</span>
|
|
<span id="amount-ETH">-$31.20</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ai-section">
|
|
<div class="ai-title">
|
|
<div class="ai-icon">🤖</div>
|
|
<div class="ai-label">AI 분석</div>
|
|
<div class="ai-score">7.2/10</div>
|
|
</div>
|
|
<div class="ai-analysis">
|
|
단기 조정국면이지만 장기적 상승 전망. DeFi 생태계 성장 긍정적.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="targets-grid">
|
|
<div class="target-item">
|
|
<div class="target-label">진입가</div>
|
|
<div class="target-value entry-price">$2,520</div>
|
|
</div>
|
|
<div class="target-item">
|
|
<div class="target-label">목표가</div>
|
|
<div class="target-value target-price">$2,850</div>
|
|
</div>
|
|
<div class="target-item">
|
|
<div class="target-label">손절가</div>
|
|
<div class="target-value stop-loss">$2,350</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 인라인 광고 -->
|
|
<div class="inline-ad">
|
|
<div style="font-size: 1.1rem; font-weight: bold; margin-bottom: 8px;">
|
|
💼 [인라인 광고] - 콘텐츠 중간 삽입형
|
|
</div>
|
|
<div style="font-size: 0.9rem; opacity: 0.8;">
|
|
투자상품 사이에 자연스럽게 배치되는 네이티브 광고 영역
|
|
</div>
|
|
</div>
|
|
|
|
<div class="products-grid">
|
|
<!-- Apple -->
|
|
<div class="product-card" onclick="openDetail('AAPL')">
|
|
<div class="card-header">
|
|
<div class="product-info">
|
|
<div class="product-name">Apple Inc.</div>
|
|
<div class="product-symbol">AAPL</div>
|
|
</div>
|
|
<div class="product-type">Stock</div>
|
|
</div>
|
|
|
|
<div class="price-section">
|
|
<div class="current-price price-positive" id="price-AAPL">$192.50</div>
|
|
<div class="price-change">
|
|
<span class="change-badge change-positive" id="change-AAPL">+1.85%</span>
|
|
<span id="amount-AAPL">+$3.50</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ai-section">
|
|
<div class="ai-title">
|
|
<div class="ai-icon">🤖</div>
|
|
<div class="ai-label">AI 분석</div>
|
|
<div class="ai-score">8.8/10</div>
|
|
</div>
|
|
<div class="ai-analysis">
|
|
iPhone 15 출시 효과 지속. 서비스 매출 성장으로 안정적 수익성 확보.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="targets-grid">
|
|
<div class="target-item">
|
|
<div class="target-label">진입가</div>
|
|
<div class="target-value entry-price">$190.00</div>
|
|
</div>
|
|
<div class="target-item">
|
|
<div class="target-label">목표가</div>
|
|
<div class="target-value target-price">$210.00</div>
|
|
</div>
|
|
<div class="target-item">
|
|
<div class="target-label">손절가</div>
|
|
<div class="target-value stop-loss">$180.00</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tesla -->
|
|
<div class="product-card" onclick="openDetail('TSLA')">
|
|
<div class="card-header">
|
|
<div class="product-info">
|
|
<div class="product-name">Tesla Inc.</div>
|
|
<div class="product-symbol">TSLA</div>
|
|
</div>
|
|
<div class="product-type">Stock</div>
|
|
</div>
|
|
|
|
<div class="price-section">
|
|
<div class="current-price price-positive" id="price-TSLA">$245.80</div>
|
|
<div class="price-change">
|
|
<span class="change-badge change-positive" id="change-TSLA">+3.40%</span>
|
|
<span id="amount-TSLA">+$8.08</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ai-section">
|
|
<div class="ai-title">
|
|
<div class="ai-icon">🤖</div>
|
|
<div class="ai-label">AI 분석</div>
|
|
<div class="ai-score">7.9/10</div>
|
|
</div>
|
|
<div class="ai-analysis">
|
|
사이버트럭 양산 시작으로 성장 동력 확보. 자율주행 기술 발전 기대감 증가.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="targets-grid">
|
|
<div class="target-item">
|
|
<div class="target-label">진입가</div>
|
|
<div class="target-value entry-price">$240.00</div>
|
|
</div>
|
|
<div class="target-item">
|
|
<div class="target-label">목표가</div>
|
|
<div class="target-value target-price">$280.00</div>
|
|
</div>
|
|
<div class="target-item">
|
|
<div class="target-label">손절가</div>
|
|
<div class="target-value stop-loss">$220.00</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- 사이드바 -->
|
|
<aside class="sidebar">
|
|
<!-- 사이드바 광고 #1 -->
|
|
<div class="sidebar-ad">
|
|
<div>
|
|
<div style="font-size: 1rem; font-weight: bold; margin-bottom: 8px;">
|
|
📱 [사이드 광고 #1]
|
|
</div>
|
|
<div style="font-size: 0.85rem; opacity: 0.8; line-height: 1.4;">
|
|
320x200px<br>
|
|
주요 수익 영역<br>
|
|
높은 클릭률 보장
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 시장 개요 -->
|
|
<div class="market-overview">
|
|
<h3 class="overview-title">📊 시장 개요</h3>
|
|
<div class="market-stats">
|
|
<div class="stat-item">
|
|
<span class="stat-label">Fear & Greed Index</span>
|
|
<span class="stat-value">72 (탐욕)</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-label">BTC Dominance</span>
|
|
<span class="stat-value">52.3%</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-label">Total Market Cap</span>
|
|
<span class="stat-value">$1.72T</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-label">24h Volume</span>
|
|
<span class="stat-value">$85.2B</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 사이드바 광고 #2 -->
|
|
<div class="sidebar-ad">
|
|
<div>
|
|
<div style="font-size: 1rem; font-weight: bold; margin-bottom: 8px;">
|
|
💼 [사이드 광고 #2]
|
|
</div>
|
|
<div style="font-size: 0.85rem; opacity: 0.8; line-height: 1.4;">
|
|
320x150px<br>
|
|
보조 광고 영역<br>
|
|
추가 수익 창출
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
|
|
<!-- 하단 광고 배너 -->
|
|
<div class="bottom-ad-banner">
|
|
<div class="bottom-ad-title">🚀 [하단 대형 광고 배너]</div>
|
|
<div class="bottom-ad-description">
|
|
1400x200px 대형 광고 영역 - 페이지 하단 주요 액션 포인트<br>
|
|
높은 전환율을 보장하는 프리미엄 광고 자리
|
|
</div>
|
|
<button class="ad-cta-button">광고 클릭하기 →</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 상세 페이지 열기
|
|
function openDetail(symbol) {
|
|
console.log(`Opening detail for ${symbol}`);
|
|
alert(`${symbol} 상세 분석 페이지를 열겠습니다.`);
|
|
}
|
|
|
|
// 페이지 전환 (데모용)
|
|
function showPage(pageId) {
|
|
console.log(`Navigating to ${pageId}`);
|
|
// 실제로는 React Router 등으로 페이지 전환
|
|
}
|
|
|
|
// 실시간 가격 업데이트 시뮬레이션
|
|
function updatePrices() {
|
|
const symbols = ['BTC', 'ETH', 'AAPL', 'TSLA'];
|
|
|
|
symbols.forEach(symbol => {
|
|
const priceElement = document.getElementById(`price-${symbol}`);
|
|
if (priceElement) {
|
|
console.log(`Updated price for ${symbol}`);
|
|
}
|
|
});
|
|
}
|
|
|
|
// 5초마다 가격 업데이트
|
|
setInterval(updatePrices, 5000);
|
|
|
|
// 페이지 로드 완료
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
console.log('I\'m AI 투자매니저 대시보드 로드 완료');
|
|
});
|
|
|
|
// 광고 클릭 추적
|
|
document.addEventListener('click', function(e) {
|
|
if (e.target.closest('.sidebar-ad, .top-ad-banner, .bottom-ad-banner, .inline-ad, .side-banner')) {
|
|
console.log('광고 클릭됨:', e.target.closest('[class*="ad"]').className);
|
|
// 실제로는 광고 추적 API 호출
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |