802 lines
26 KiB
HTML
802 lines
26 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;
|
|
}
|
|
|
|
.back-button {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: #667eea;
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.back-button:hover {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.logo {
|
|
font-size: 1.5rem;
|
|
font-weight: 800;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
/* 메인 컨테이너 */
|
|
.main-container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
/* 시뮬레이션 헤더 */
|
|
.simulation-header {
|
|
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;
|
|
margin-bottom: 24px;
|
|
text-align: center;
|
|
}
|
|
|
|
.simulation-title {
|
|
font-size: 2rem;
|
|
font-weight: 800;
|
|
margin-bottom: 8px;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.simulation-subtitle {
|
|
font-size: 1.1rem;
|
|
color: #a0a0a0;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.investment-amount {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
background: linear-gradient(135deg, #667eea, #764ba2);
|
|
padding: 12px 24px;
|
|
border-radius: 12px;
|
|
font-size: 1.3rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* 상단 광고 배너 */
|
|
.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 400px;
|
|
gap: 24px;
|
|
}
|
|
|
|
/* 투자상품 선택 */
|
|
.products-section {
|
|
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;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 1.3rem;
|
|
font-weight: 700;
|
|
margin-bottom: 20px;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.products-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 16px;
|
|
}
|
|
|
|
.product-option {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border: 2px solid transparent;
|
|
border-radius: 12px;
|
|
padding: 16px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
}
|
|
|
|
.product-option:hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.product-option.selected {
|
|
border-color: #667eea;
|
|
background: rgba(102, 126, 234, 0.1);
|
|
}
|
|
|
|
.option-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.option-name {
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.option-symbol {
|
|
background: #667eea;
|
|
color: white;
|
|
padding: 4px 8px;
|
|
border-radius: 8px;
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.option-price {
|
|
font-size: 1.3rem;
|
|
font-weight: 700;
|
|
color: #22c55e;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.ai-recommendation {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.ai-score {
|
|
color: #667eea;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* 체크박스 스타일 */
|
|
.checkbox {
|
|
position: absolute;
|
|
top: 12px;
|
|
right: 12px;
|
|
width: 20px;
|
|
height: 20px;
|
|
background: transparent;
|
|
border: 2px solid #667eea;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.product-option.selected .checkbox {
|
|
background: #667eea;
|
|
}
|
|
|
|
.product-option.selected .checkbox::after {
|
|
content: '✓';
|
|
position: absolute;
|
|
top: -2px;
|
|
left: 2px;
|
|
color: white;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* 시뮬레이션 결과 */
|
|
.results-section {
|
|
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;
|
|
}
|
|
|
|
.results-grid {
|
|
display: grid;
|
|
gap: 16px;
|
|
}
|
|
|
|
.result-card {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.result-card:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.result-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.result-title {
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.result-status {
|
|
padding: 4px 12px;
|
|
border-radius: 8px;
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.status-success {
|
|
background: rgba(34, 197, 94, 0.2);
|
|
color: #22c55e;
|
|
}
|
|
|
|
.result-details {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 12px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.detail-item {
|
|
text-align: center;
|
|
}
|
|
|
|
.detail-label {
|
|
font-size: 0.8rem;
|
|
color: #a0a0a0;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.detail-value {
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.profit { color: #22c55e; }
|
|
.loss { color: #ef4444; }
|
|
.neutral { color: #ffffff; }
|
|
|
|
.result-summary {
|
|
font-size: 0.9rem;
|
|
color: #e0e0e0;
|
|
line-height: 1.5;
|
|
padding: 12px;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
/* 사이드바 */
|
|
.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;
|
|
}
|
|
|
|
/* 계산기 */
|
|
.calculator {
|
|
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;
|
|
}
|
|
|
|
.input-group {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.input-label {
|
|
display: block;
|
|
font-size: 0.9rem;
|
|
color: #e0e0e0;
|
|
margin-bottom: 8px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.input-field {
|
|
width: 100%;
|
|
padding: 12px 16px;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border: 2px solid rgba(255, 255, 255, 0.2);
|
|
border-radius: 8px;
|
|
color: #ffffff;
|
|
font-size: 1rem;
|
|
transition: border-color 0.3s ease;
|
|
}
|
|
|
|
.input-field:focus {
|
|
outline: none;
|
|
border-color: #667eea;
|
|
}
|
|
|
|
.preset-buttons {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 8px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.preset-btn {
|
|
padding: 8px 12px;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
border-radius: 6px;
|
|
color: #ffffff;
|
|
font-size: 0.8rem;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.preset-btn:hover {
|
|
background: rgba(102, 126, 234, 0.2);
|
|
border-color: #667eea;
|
|
}
|
|
|
|
.calculate-btn {
|
|
width: 100%;
|
|
background: linear-gradient(135deg, #667eea, #764ba2);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 12px;
|
|
padding: 16px;
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
|
|
.calculate-btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
|
|
}
|
|
|
|
/* 반응형 디자인 */
|
|
@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;
|
|
}
|
|
|
|
.sidebar {
|
|
order: -1;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.products-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.result-details {
|
|
grid-template-columns: 1fr;
|
|
gap: 8px;
|
|
}
|
|
|
|
.preset-buttons {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.main-container {
|
|
padding: 15px;
|
|
}
|
|
}
|
|
</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>
|
|
|
|
<!-- 헤더 -->
|
|
<header class="header">
|
|
<div class="header-container">
|
|
<a href="#" class="back-button">
|
|
← 대시보드로 돌아가기
|
|
</a>
|
|
<div class="page-title">수익률 시뮬레이션</div>
|
|
<div class="logo">I'm AI</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 메인 컨테이너 -->
|
|
<div class="main-container">
|
|
<!-- 시뮬레이션 헤더 -->
|
|
<div class="simulation-header">
|
|
<h1 class="simulation-title">AI 투자 수익률 시뮬레이션</h1>
|
|
<p class="simulation-subtitle">AI 추천 종목에 투자했을 때의 예상 수익률을 계산해보세요</p>
|
|
<div class="investment-amount">
|
|
💰 투자 금액: <span id="displayAmount">10,000,000원</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 상단 광고 배너 -->
|
|
<div class="top-ad-banner">
|
|
<div class="ad-title">📊 [시뮬레이션 광고 배너] - 1400x100px</div>
|
|
<div class="ad-description">투자 계산기 상단 프리미엄 광고 영역</div>
|
|
</div>
|
|
|
|
<!-- 콘텐츠 그리드 -->
|
|
<div class="content-grid">
|
|
<!-- 메인 콘텐츠 -->
|
|
<div class="main-content">
|
|
<!-- 투자상품 선택 -->
|
|
<div class="products-section">
|
|
<h2 class="section-title">투자 종목 선택</h2>
|
|
<div class="products-grid">
|
|
<div class="product-option" onclick="toggleProduct(this, 'BTC')">
|
|
<div class="checkbox"></div>
|
|
<div class="option-header">
|
|
<div class="option-name">Bitcoin</div>
|
|
<div class="option-symbol">BTC</div>
|
|
</div>
|
|
<div class="option-price">$43,250.00</div>
|
|
<div class="ai-recommendation">
|
|
🤖 AI 점수: <span class="ai-score">8.5/10</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="product-option" onclick="toggleProduct(this, 'ETH')">
|
|
<div class="checkbox"></div>
|
|
<div class="option-header">
|
|
<div class="option-name">Ethereum</div>
|
|
<div class="option-symbol">ETH</div>
|
|
</div>
|
|
<div class="option-price">$2,580.00</div>
|
|
<div class="ai-recommendation">
|
|
🤖 AI 점수: <span class="ai-score">7.2/10</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="product-option" onclick="toggleProduct(this, 'AAPL')">
|
|
<div class="checkbox"></div>
|
|
<div class="option-header">
|
|
<div class="option-name">Apple Inc.</div>
|
|
<div class="option-symbol">AAPL</div>
|
|
</div>
|
|
<div class="option-price">$192.50</div>
|
|
<div class="ai-recommendation">
|
|
🤖 AI 점수: <span class="ai-score">8.8/10</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="product-option" onclick="toggleProduct(this, 'TSLA')">
|
|
<div class="checkbox"></div>
|
|
<div class="option-header">
|
|
<div class="option-name">Tesla Inc.</div>
|
|
<div class="option-symbol">TSLA</div>
|
|
</div>
|
|
<div class="option-price">$245.80</div>
|
|
<div class="ai-recommendation">
|
|
🤖 AI 점수: <span class="ai-score">7.9/10</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 시뮬레이션 결과 -->
|
|
<div class="results-section">
|
|
<h2 class="section-title">시뮬레이션 결과</h2>
|
|
<div id="resultsContainer">
|
|
<div style="text-align: center; padding: 40px; color: #a0a0a0;">
|
|
투자 종목을 선택하고 계산하기 버튼을 눌러주세요.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 사이드바 -->
|
|
<div class="sidebar">
|
|
<!-- 사이드바 광고 -->
|
|
<div class="sidebar-ad">
|
|
<div>
|
|
<div style="font-size: 1rem; font-weight: bold; margin-bottom: 8px;">
|
|
📊 [사이드 광고]
|
|
</div>
|
|
<div style="font-size: 0.85rem; opacity: 0.8; line-height: 1.4;">
|
|
400x200px<br>
|
|
시뮬레이션<br>
|
|
광고 영역
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 계산기 -->
|
|
<div class="calculator">
|
|
<h3 class="section-title">투자 계산기</h3>
|
|
|
|
<div class="input-group">
|
|
<label class="input-label">투자 금액 (원)</label>
|
|
<input type="text" class="input-field" id="investmentAmount"
|
|
value="10,000,000" placeholder="투자 금액을 입력하세요">
|
|
<div class="preset-buttons">
|
|
<button class="preset-btn" onclick="setAmount(1000000)">100만원</button>
|
|
<button class="preset-btn" onclick="setAmount(5000000)">500만원</button>
|
|
<button class="preset-btn" onclick="setAmount(10000000)">1천만원</button>
|
|
<button class="preset-btn" onclick="setAmount(30000000)">3천만원</button>
|
|
<button class="preset-btn" onclick="setAmount(50000000)">5천만원</button>
|
|
<button class="preset-btn" onclick="setAmount(100000000)">1억원</button>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="calculate-btn" onclick="calculateReturns()">
|
|
📊 수익률 계산하기
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let selectedProducts = [];
|
|
let currentAmount = 10000000;
|
|
|
|
// AI 분석 데이터
|
|
const analysisData = {
|
|
BTC: { entry: 42800, target: 46500, stopLoss: 40200, score: 8.5 },
|
|
ETH: { entry: 2520, target: 2850, stopLoss: 2350, score: 7.2 },
|
|
AAPL: { entry: 190, target: 210, stopLoss: 180, score: 8.8 },
|
|
TSLA: { entry: 240, target: 280, stopLoss: 220, score: 7.9 }
|
|
};
|
|
|
|
// 투자 상품 선택/해제
|
|
function toggleProduct(element, symbol) {
|
|
element.classList.toggle('selected');
|
|
|
|
if (element.classList.contains('selected')) {
|
|
selectedProducts.push(symbol);
|
|
} else {
|
|
selectedProducts = selectedProducts.filter(p => p !== symbol);
|
|
}
|
|
}
|
|
|
|
// 투자 금액 설정
|
|
function setAmount(amount) {
|
|
currentAmount = amount;
|
|
document.getElementById('investmentAmount').value = amount.toLocaleString();
|
|
document.getElementById('displayAmount').textContent = amount.toLocaleString() + '원';
|
|
}
|
|
|
|
// 투자 금액 입력 이벤트
|
|
document.getElementById('investmentAmount').addEventListener('input', function() {
|
|
const value = this.value.replace(/,/g, '');
|
|
if (!isNaN(value) && value !== '') {
|
|
currentAmount = parseInt(value);
|
|
this.value = parseInt(value).toLocaleString();
|
|
document.getElementById('displayAmount').textContent = parseInt(value).toLocaleString() + '원';
|
|
}
|
|
});
|
|
|
|
// 수익률 계산
|
|
function calculateReturns() {
|
|
if (selectedProducts.length === 0) {
|
|
alert('투자할 종목을 선택해주세요.');
|
|
return;
|
|
}
|
|
|
|
const resultsContainer = document.getElementById('resultsContainer');
|
|
let resultsHTML = '<div class="results-grid">';
|
|
|
|
selectedProducts.forEach(symbol => {
|
|
const data = analysisData[symbol];
|
|
const investmentPerProduct = currentAmount / selectedProducts.length;
|
|
|
|
const targetProfit = investmentPerProduct * ((data.target - data.entry) / data.entry);
|
|
const targetReturn = ((data.target - data.entry) / data.entry) * 100;
|
|
|
|
const stopLoss = investmentPerProduct * ((data.entry - data.stopLoss) / data.entry);
|
|
const stopLossReturn = ((data.entry - data.stopLoss) / data.entry) * 100;
|
|
|
|
const productNames = {
|
|
BTC: 'Bitcoin', ETH: 'Ethereum',
|
|
AAPL: 'Apple Inc.', TSLA: 'Tesla Inc.'
|
|
};
|
|
|
|
resultsHTML += `
|
|
<div class="result-card">
|
|
<div class="result-header">
|
|
<div class="result-title">${productNames[symbol]} (${symbol})</div>
|
|
<div class="result-status status-success">AI 추천</div>
|
|
</div>
|
|
<div class="result-details">
|
|
<div class="detail-item">
|
|
<div class="detail-label">투자금액</div>
|
|
<div class="detail-value neutral">${investmentPerProduct.toLocaleString()}원</div>
|
|
</div>
|
|
<div class="detail-item">
|
|
<div class="detail-label">목표가 달성시</div>
|
|
<div class="detail-value profit">+${targetProfit.toLocaleString()}원</div>
|
|
</div>
|
|
<div class="detail-item">
|
|
<div class="detail-label">손절가 도달시</div>
|
|
<div class="detail-value loss">-${stopLoss.toLocaleString()}원</div>
|
|
</div>
|
|
</div>
|
|
<div class="result-summary">
|
|
진입가 $${data.entry.toLocaleString()}에서 목표가 $${data.target.toLocaleString()} 달성 시
|
|
<strong class="profit">+${targetReturn.toFixed(1)}%</strong> 수익률이 예상됩니다.
|
|
손절가는 $${data.stopLoss.toLocaleString()}로 최대
|
|
<strong class="loss">${stopLossReturn.toFixed(1)}%</strong> 손실을 제한합니다.
|
|
</div>
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
resultsHTML += '</div>';
|
|
resultsContainer.innerHTML = resultsHTML;
|
|
}
|
|
|
|
// 페이지 로드 시 초기화
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
console.log('시뮬레이션 페이지 로드 완료');
|
|
});
|
|
|
|
// 광고 클릭 추적
|
|
document.addEventListener('click', function(e) {
|
|
if (e.target.closest('.sidebar-ad, .top-ad-banner, .side-banner')) {
|
|
console.log('광고 클릭됨:', e.target.closest('[class*="ad"], [class*="banner"]').className);
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |