2025-09-02 13:24:25 +00:00
<!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;
overflow-x: hidden;
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;
}
/* 로딩 화면 */
.loading-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #0f1419 0%, #1a1f2e 100%);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
transition: opacity 0.5s ease;
}
.loading-content {
text-align: center;
}
.loading-logo {
font-size: 3rem;
font-weight: 800;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 20px;
animation: pulse 2s infinite;
}
.loading-text {
font-size: 1.2rem;
color: #a0a0a0;
margin-bottom: 30px;
}
.loading-bar {
width: 200px;
height: 4px;
background: rgba(255, 255, 255, 0.1);
border-radius: 2px;
overflow: hidden;
margin: 0 auto;
}
.loading-progress {
height: 100%;
background: linear-gradient(135deg, #667eea, #764ba2);
width: 0%;
animation: loading 3s ease-in-out;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
@keyframes loading {
0% { width: 0%; }
50% { width: 70%; }
100% { width: 100%; }
}
/* 상단 헤더 광고 */
.header-banner {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
text-align: center;
padding: 12px;
font-size: 14px;
font-weight: 500;
position: relative;
z-index: 1001;
}
/* 헤더 */
.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: 1000;
opacity: 0;
animation: slideDown 1s ease 3s forwards;
}
.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;
}
/* 메인 컨테이너 */
.main-container {
max-width: 1400px;
margin: 0 auto;
padding: 20px;
opacity: 0;
animation: fadeInUp 1s ease 3.5s forwards;
}
/* 상단 광고 배너 */
.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;
}
/* 페이지 전환 효과 */
.page {
display: none;
}
.page.active {
display: block;
animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes slideDown {
from { opacity: 0; transform: translateY(-100%); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(50px); }
to { opacity: 1; transform: translateY(0); }
}
/* 대시보드 스타일 */
.dashboard-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-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; }
/* 인라인 광고 */
.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;
}
/* 사이드바 */
.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;
}
/* 실시간 업데이트 애니메이션 */
.price-update {
animation: priceFlash 0.5s ease;
}
@keyframes priceFlash {
0% { background: rgba(102, 126, 234, 0.3); }
100% { background: transparent; }
}
/* 상태 표시 */
.status-indicator {
position: fixed;
top: 80px;
right: 160px;
background: rgba(26, 31, 46, 0.9);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 8px 12px;
font-size: 0.8rem;
color: #22c55e;
z-index: 999;
}
.status-dot {
display: inline-block;
width: 8px;
height: 8px;
background: #22c55e;
border-radius: 50%;
margin-right: 6px;
animation: pulse 2s infinite;
}
/* 하단 광고 배너 */
.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;
}
.status-indicator {
right: 20px;
}
}
@media (max-width: 1200px) {
.dashboard-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;
}
.loading-logo {
font-size: 2rem;
}
}
/* 설정 컨트롤 */
.settings-controls {
display: flex;
gap: 15px;
}
.theme-toggle, .language-toggle {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 20px;
padding: 8px 16px;
color: #ffffff;
cursor: pointer;
transition: all 0.3s ease;
font-size: 0.9rem;
white-space: nowrap;
}
.theme-toggle:hover, .language-toggle:hover {
background: rgba(102, 126, 234, 0.2);
border-color: #667eea;
}
/* 라이트 테마 */
body.light-theme {
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
color: #1a202c;
}
.light-theme .header {
background: rgba(255, 255, 255, 0.95);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.light-theme .product-card {
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(0, 0, 0, 0.1);
color: #1a202c;
}
.light-theme .market-overview {
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(0, 0, 0, 0.1);
color: #1a202c;
}
.light-theme .nav-item {
color: #1a202c;
}
.light-theme .logo-text {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.light-theme .logo-subtitle {
color: #64748b;
}
/* 언어 드롭다운 */
.language-dropdown {
position: relative;
display: inline-block;
}
.language-dropdown-content {
display: none;
position: absolute;
top: 100%;
right: 0;
background: rgba(26, 31, 46, 0.95);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
min-width: 120px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
z-index: 1001;
margin-top: 5px;
}
.light-theme .language-dropdown-content {
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(0, 0, 0, 0.1);
color: #1a202c;
}
.language-dropdown-content.show {
display: block;
animation: dropdownShow 0.2s ease;
}
.language-option {
padding: 10px 15px;
cursor: pointer;
transition: background 0.2s ease;
display: flex;
align-items: center;
gap: 8px;
font-size: 0.9rem;
}
.language-option:hover {
background: rgba(102, 126, 234, 0.2);
}
.light-theme .language-option:hover {
background: rgba(102, 126, 234, 0.1);
}
.language-option.selected {
background: rgba(102, 126, 234, 0.3);
color: #667eea;
}
.light-theme .language-option.selected {
background: rgba(102, 126, 234, 0.2);
}
@keyframes dropdownShow {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
< / 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 = "loading-screen" id = "loadingScreen" >
< div class = "loading-content" >
< div class = "loading-logo" > I'm AI< / div >
< div class = "loading-text" > 투자매니저 시스템 로딩 중...< / div >
< div class = "loading-bar" >
< div class = "loading-progress" > < / div >
< / div >
< / div >
< / div >
<!-- 상단 헤더 광고 -->
< div class = "header-banner" data-ko = "🎯 지금 가입하면 AI 프리미엄 분석 1개월 무료! 투자 수익률 극대화하세요 →" data-en = "🎯 Sign up now for 1 month free AI premium analysis! Maximize your investment returns →" data-zh = "🎯 现在注册即可免费获得1个月AI高级分析！ >
🎯 지금 가입하면 AI 프리미엄 분석 1개월 무료! 투자 수익률 극대화하세요 →
< / div >
<!-- 실시간 상태 표시 -->
< div class = "status-indicator" >
< span class = "status-dot" > < / span >
< span data-ko = "실시간 연결됨" data-en = "Live Connected" data-zh = "实时连接" > 실시간 연결됨< / span >
< / div >
<!-- 헤더 -->
< header class = "header" >
< div class = "header-container" >
< div class = "logo" >
< div >
< div class = "logo-text" > I'm AI< / div >
< div class = "logo-subtitle" data-ko = "투자매니저" data-en = "Investment Manager" data-zh = "投资经理" > 투자매니저< / div >
< / div >
< / div >
< nav class = "nav" >
< a class = "nav-item active" onclick = "showPage('dashboard')" data-ko = "대시보드" data-en = "Dashboard" data-zh = "仪表板" > 대시보드< / a >
< a class = "nav-item" onclick = "showPage('settings')" data-ko = "설정" data-en = "Settings" data-zh = "设置" > 설정< / a >
< / nav >
< div class = "settings-controls" >
< div class = "theme-toggle" onclick = "toggleTheme()" > 🌙 < span data-ko = "다크모드" data-en = "Dark Mode" data-zh = "深色模式" > 다크모드< / span > < / div >
< div class = "language-dropdown" >
< div class = "language-toggle" onclick = "toggleLanguageDropdown()" >
🌐 < span id = "currentLang" > 한국어< / span > ▼
< / div >
< div class = "language-dropdown-content" id = "languageDropdown" >
< div class = "language-option selected" onclick = "selectLanguage('ko')" >
🇰🇷 한국어
< / div >
< div class = "language-option" onclick = "selectLanguage('en')" >
🇺🇸 English
< / div >
< div class = "language-option" onclick = "selectLanguage('zh')" >
🇨🇳 中文
< / div >
< / div >
< / div >
< / div >
< / div >
< / header >
<!-- 메인 컨테이너 -->
< div class = "main-container" >
<!-- 대시보드 페이지 -->
< div id = "dashboard" class = "page active" >
<!-- 상단 광고 배너 -->
< div class = "top-ad-banner" >
< div class = "ad-title" > 📊 [상단 광고 배너] - 1400x100px< / div >
< div class = "ad-description" > 주요 광고 영역 - 높은 노출도로 수익 극대화< / div >
< / div >
< div class = "dashboard-grid" >
<!-- 투자상품 섹션 -->
< main class = "products-section" >
< h2 class = "section-title" data-ko = "🤖 AI 추천 투자상품" data-en = "🤖 AI Recommended Investments" data-zh = "🤖 AI推荐投资产品" > 🤖 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" data-ko = "AI 분석" data-en = "AI Analysis" data-zh = "AI分析" > AI 분석< / div >
< div class = "ai-score" > 8.5/10< / div >
< / div >
< div class = "ai-analysis" data-ko = "기관 자금 유입 지속으로 상승 모멘텀 유지. 기술적 분석에서 강세 신호 감지됨." data-en = "Maintaining upward momentum with continued institutional fund inflows. Technical analysis detects bullish signals." data-zh = "机构资金持续流入，维持上涨势头。技术分析检测到看涨信号。" >
기관 자금 유입 지속으로 상승 모멘텀 유지. 기술적 분석에서 강세 신호 감지됨.
< / div >
< / div >
< div class = "targets-grid" >
< div class = "target-item" >
< div class = "target-label" data-ko = "진입가" data-en = "Entry" data-zh = "入场价" > 진입가< / div >
< div class = "target-value entry-price" > $42,800< / div >
< / div >
< div class = "target-item" >
< div class = "target-label" data-ko = "목표가" data-en = "Target" data-zh = "目标价" > 목표가< / div >
< div class = "target-value target-price" > $46,500< / div >
< / div >
< div class = "target-item" >
< div class = "target-label" data-ko = "손절가" data-en = "Stop Loss" data-zh = "止损价" > 손절가< / 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" data-ko = "AI 분석" data-en = "AI Analysis" data-zh = "AI分析" > AI 분석< / div >
< div class = "ai-score" > 7.2/10< / div >
< / div >
< div class = "ai-analysis" data-ko = "단기 조정국면이지만 장기적 상승 전망. DeFi 생태계 성장 긍정적." data-en = "Short-term correction phase but long-term upward outlook. DeFi ecosystem growth is positive." data-zh = "短期调整阶段， >
단기 조정국면이지만 장기적 상승 전망. DeFi 생태계 성장 긍정적.
< / div >
< / div >
< div class = "targets-grid" >
< div class = "target-item" >
< div class = "target-label" data-ko = "진입가" data-en = "Entry" data-zh = "入场价" > 진입가< / div >
< div class = "target-value entry-price" > $2,520< / div >
< / div >
< div class = "target-item" >
< div class = "target-label" data-ko = "목표가" data-en = "Target" data-zh = "目标价" > 목표가< / div >
< div class = "target-value target-price" > $2,850< / div >
< / div >
< div class = "target-item" >
< div class = "target-label" data-ko = "손절가" data-en = "Stop Loss" data-zh = "止损价" > 손절가< / 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" data-ko = "AI 분석" data-en = "AI Analysis" data-zh = "AI分析" > AI 분석< / div >
< div class = "ai-score" > 8.8/10< / div >
< / div >
< div class = "ai-analysis" data-ko = "iPhone 15 출시 효과 지속. 서비스 매출 성장으로 안정적 수익성 확보." data-en = "iPhone 15 launch effects continue. Stable profitability secured through service revenue growth." data-zh = "iPhone 15发布效果持续。通过服务收入增长确保稳定盈利。" >
iPhone 15 출시 효과 지속. 서비스 매출 성장으로 안정적 수익성 확보.
< / div >
< / div >
< div class = "targets-grid" >
< div class = "target-item" >
< div class = "target-label" data-ko = "진입가" data-en = "Entry" data-zh = "入场价" > 진입가< / div >
< div class = "target-value entry-price" > $190.00< / div >
< / div >
< div class = "target-item" >
< div class = "target-label" data-ko = "목표가" data-en = "Target" data-zh = "目标价" > 목표가< / div >
< div class = "target-value target-price" > $210.00< / div >
< / div >
< div class = "target-item" >
< div class = "target-label" data-ko = "손절가" data-en = "Stop Loss" data-zh = "止损价" > 손절가< / 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" data-ko = "AI 분석" data-en = "AI Analysis" data-zh = "AI分析" > AI 분석< / div >
< div class = "ai-score" > 7.9/10< / div >
< / div >
< div class = "ai-analysis" data-ko = "사이버트럭 양산 시작으로 성장 동력 확보. 자율주행 기술 발전 기대감 증가." data-en = "Growth momentum secured with Cybertruck mass production launch. Increasing expectations for autonomous driving technology advancement." data-zh = "赛博卡车量产启动确保增长动力。对自动驾驶技术发展的期待增加。" >
사이버트럭 양산 시작으로 성장 동력 확보. 자율주행 기술 발전 기대감 증가.
< / div >
< / div >
< div class = "targets-grid" >
< div class = "target-item" >
< div class = "target-label" data-ko = "진입가" data-en = "Entry" data-zh = "入场价" > 진입가< / div >
< div class = "target-value entry-price" > $240.00< / div >
< / div >
< div class = "target-item" >
< div class = "target-label" data-ko = "목표가" data-en = "Target" data-zh = "目标价" > 목표가< / div >
< div class = "target-value target-price" > $280.00< / div >
< / div >
< div class = "target-item" >
< div class = "target-label" data-ko = "손절가" data-en = "Stop Loss" data-zh = "止损价" > 손절가< / 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" data-ko = "📊 시장 개요" data-en = "📊 Market Overview" data-zh = "📊 市场概览" > 📊 시장 개요< / h3 >
< div class = "market-stats" >
< div class = "stat-item" >
< span class = "stat-label" > Fear & Greed Index< / span >
< span class = "stat-value" > 72 (< span data-ko = "탐욕" data-en = "Greed" data-zh = "贪婪" > 탐욕< / span > )< / 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" data-ko = "총 시가총액" data-en = "Total Market Cap" data-zh = "总市值" > Total Market Cap< / span >
< span class = "stat-value" > $1.72T< / span >
< / div >
< div class = "stat-item" >
< span class = "stat-label" data-ko = "24시간 거래량" data-en = "24h Volume" data-zh = "24小时成交量" > 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 >
2025-09-02 13:51:26 +00:00
<!-- 상세 분석 페이지 (시뮬레이션 포함) -->
< div id = "detail" class = "page" >
< div style = "padding: 20px;" >
<!-- 상세 페이지 헤더 -->
< div style = "display: flex; align-items: center; margin-bottom: 30px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 20px;" >
< button onclick = "showPage('dashboard')" style = "background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: white; padding: 8px 16px; border-radius: 8px; margin-right: 20px; cursor: pointer;" > ← 뒤로가기< / button >
< div >
< h1 style = "font-size: 2rem; margin-bottom: 5px; color: #ffffff;" id = "detailTitle" > Bitcoin (BTC)< / h1 >
< div style = "display: flex; align-items: center; gap: 15px;" >
< span style = "font-size: 1.5rem; font-weight: bold; color: #22c55e;" id = "detailPrice" > $43,250.00< / span >
< span style = "background: rgba(34, 197, 94, 0.2); color: #22c55e; padding: 4px 10px; border-radius: 8px;" id = "detailChange" > +2.35% (+$992.50)< / span >
< / div >
< / div >
< / div >
< div style = "display: grid; grid-template-columns: 2fr 1fr; gap: 30px;" >
<!-- 메인 콘텐츠 -->
< div >
<!-- 차트 섹션 -->
< div style = "background: rgba(26, 31, 46, 0.8); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 24px; margin-bottom: 30px;" >
< h3 style = "font-size: 1.3rem; margin-bottom: 20px; color: #ffffff;" data-ko = "📈 캔들차트" data-en = "📈 Candlestick Chart" data-zh = "📈 K线图" > 📈 캔들차트< / h3 >
< div style = "height: 400px; background: rgba(0,0,0,0.2); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #a0a0a0;" >
[TradingView 차트 위젯 영역]
< / div >
< / div >
<!-- AI 분석 결과 섹션 -->
< div style = "background: rgba(26, 31, 46, 0.8); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 24px; margin-bottom: 30px;" >
< div style = "display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;" >
< h3 style = "font-size: 1.3rem; margin: 0; color: #ffffff;" data-ko = "🤖 AI 분석 결과" data-en = "🤖 AI Analysis Results" data-zh = "🤖 AI分析结果" > 🤖 AI 분석 결과< / h3 >
< div style = "display: flex; align-items: center; gap: 15px;" >
< span style = "color: #a0a0a0; font-size: 0.9rem;" id = "analysisCount" data-ko = "총 247건" data-en = "247 Total" data-zh = "共247个" > 총 247건< / span >
< div style = "display: flex; gap: 10px;" >
< button id = "viewModeToggle" onclick = "toggleViewMode()" style = "background: rgba(102, 126, 234, 0.2); border: 1px solid rgba(102, 126, 234, 0.3); color: #667eea; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 0.8rem;" data-ko = "간략히보기" data-en = "Compact View" data-zh = "简洁视图" > 간략히보기< / button >
< button onclick = "toggleFilters()" style = "background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: white; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 0.8rem;" > 🔍 필터< / button >
< / div >
< / div >
< / div >
<!-- 필터 섹션 -->
< div id = "filtersPanel" style = "display: none; background: rgba(102, 126, 234, 0.05); border: 1px solid rgba(102, 126, 234, 0.2); border-radius: 12px; padding: 20px; margin-bottom: 20px;" >
< div style = "display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 15px;" >
< div >
< label style = "display: block; color: #a0a0a0; margin-bottom: 8px; font-size: 0.9rem;" data-ko = "날짜 범위" data-en = "Date Range" data-zh = "日期范围" > 날짜 범위< / label >
< select id = "dateFilter" style = "width: 100%; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: 6px; padding: 8px; color: white;" >
< option value = "all" data-ko = "전체" data-en = "All" data-zh = "全部" > 전체< / option >
< option value = "today" data-ko = "오늘" data-en = "Today" data-zh = "今天" > 오늘< / option >
< option value = "week" data-ko = "최근 7일" data-en = "Last 7 days" data-zh = "最近7天" > 최근 7일< / option >
< option value = "month" data-ko = "최근 30일" data-en = "Last 30 days" data-zh = "最近30天" > 최근 30일< / option >
< / select >
< / div >
< div >
< label style = "display: block; color: #a0a0a0; margin-bottom: 8px; font-size: 0.9rem;" data-ko = "신뢰도 점수" data-en = "Confidence Score" data-zh = "置信度评分" > 신뢰도 점수< / label >
< select id = "scoreFilter" style = "width: 100%; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: 6px; padding: 8px; color: white;" >
< option value = "all" data-ko = "전체" data-en = "All" data-zh = "全部" > 전체< / option >
< option value = "high" data-ko = "8.0 이상" data-en = "8.0+" data-zh = "8.0以上" > 8.0 이상< / option >
< option value = "medium" data-ko = "6.0-7.9" data-en = "6.0-7.9" data-zh = "6.0-7.9" > 6.0-7.9< / option >
< option value = "low" data-ko = "6.0 미만" data-en = "Under 6.0" data-zh = "6.0以下" > 6.0 미만< / option >
< / select >
< / div >
< div >
< label style = "display: block; color: #a0a0a0; margin-bottom: 8px; font-size: 0.9rem;" data-ko = "분석 상태" data-en = "Analysis Status" data-zh = "分析状态" > 분석 상태< / label >
< select id = "statusFilter" style = "width: 100%; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: 6px; padding: 8px; color: white;" >
< option value = "all" data-ko = "전체" data-en = "All" data-zh = "全部" > 전체< / option >
< option value = "active" data-ko = "활성" data-en = "Active" data-zh = "活跃" > 활성< / option >
< option value = "expired" data-ko = "만료" data-en = "Expired" data-zh = "过期" > 만료< / option >
< option value = "hit" data-ko = "적중" data-en = "Hit Target" data-zh = "命中" > 적중< / option >
< option value = "stop" data-ko = "손절" data-en = "Stop Loss" data-zh = "止损" > 손절< / option >
< / select >
< / div >
< / div >
< div style = "display: flex; justify-content: space-between; align-items: center;" >
< div style = "display: flex; gap: 10px;" >
< button onclick = "selectAllAnalyses()" style = "background: rgba(34, 197, 94, 0.2); border: 1px solid rgba(34, 197, 94, 0.3); color: #22c55e; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 0.8rem;" data-ko = "전체 선택" data-en = "Select All" data-zh = "全选" > 전체 선택< / button >
< button onclick = "deselectAllAnalyses()" style = "background: rgba(239, 68, 68, 0.2); border: 1px solid rgba(239, 68, 68, 0.3); color: #ef4444; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 0.8rem;" data-ko = "전체 해제" data-en = "Deselect All" data-zh = "取消全选" > 전체 해제< / button >
< / div >
< button onclick = "applyFilters()" style = "background: linear-gradient(135deg, #667eea, #764ba2); border: none; color: white; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-weight: 600;" data-ko = "필터 적용" data-en = "Apply Filters" data-zh = "应用过滤器" > 필터 적용< / button >
< / div >
< / div >
<!-- 일괄 선택 영역 -->
< div style = "background: rgba(255, 255, 255, 0.05); border-radius: 8px; padding: 12px; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center;" >
< div style = "display: flex; align-items: center; gap: 10px;" >
< input type = "checkbox" id = "selectAllVisible" onclick = "toggleAllVisible()" style = "width: 16px; height: 16px;" >
< span style = "color: #ffffff; font-size: 0.9rem;" data-ko = "표시된 분석 전체 선택" data-en = "Select all visible analyses" data-zh = "选择所有可见分析" > 표시된 분석 전체 선택< / span >
< / div >
< span id = "selectedCount" style = "color: #667eea; font-size: 0.9rem;" data-ko = "0개 선택됨" data-en = "0 selected" data-zh = "已选择0个" > 0개 선택됨< / span >
< / div >
<!-- AI 분석 카드들 -->
< div id = "analysisContainer" style = "display: grid; gap: 15px; max-height: 600px; overflow-y: auto; padding-right: 10px;" >
<!-- AI 분석 카드들이 동적으로 생성됨 -->
< / div >
<!-- 더 보기 버튼 -->
< div style = "text-align: center; margin-top: 20px;" >
< button id = "loadMoreBtn" onclick = "loadMoreAnalyses()" style = "background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: white; padding: 10px 20px; border-radius: 8px; cursor: pointer;" data-ko = "더 보기 (남은 235개)" data-en = "Load More (235 remaining)" data-zh = "加载更多 (剩余235个)" > 더 보기 (남은 235개)< / button >
< / div >
< / div >
<!-- 수익률 시뮬레이션 섹션 -->
< div style = "background: rgba(26, 31, 46, 0.8); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 24px;" >
< h3 style = "font-size: 1.3rem; margin-bottom: 20px; color: #ffffff;" data-ko = "📊 수익률 시뮬레이션" data-en = "📊 Return Simulation" data-zh = "📊 收益模拟" > 📊 수익률 시뮬레이션< / h3 >
< div style = "background: rgba(102, 126, 234, 0.1); border: 1px solid rgba(102, 126, 234, 0.2); border-radius: 12px; padding: 20px; margin-bottom: 20px;" >
< div style = "display: flex; align-items: center; gap: 15px; margin-bottom: 15px;" >
< label style = "color: #ffffff; font-weight: 600;" data-ko = "투자 금액:" data-en = "Investment Amount:" data-zh = "投资金额:" > 투자 금액:< / label >
< input type = "text" id = "investmentAmount" value = "10,000,000" style = "background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; padding: 8px 12px; color: white; width: 150px;" >
< span style = "color: #a0a0a0;" > 원< / span >
< button onclick = "runSimulation()" style = "background: linear-gradient(135deg, #667eea, #764ba2); border: none; color: white; padding: 8px 16px; border-radius: 8px; cursor: pointer; margin-left: auto;" data-ko = "시뮬레이션 실행" data-en = "Run Simulation" data-zh = "运行模拟" > 시뮬레이션 실행< / button >
< / div >
< p style = "color: #a0a0a0; font-size: 0.9rem;" data-ko = "위에서 선택한 AI 분석 결과를 기반으로 시뮬레이션합니다." data-en = "Simulation based on selected AI analysis results above." data-zh = "基于上面选择的AI分析结果进行模拟。" > 위에서 선택한 AI 분석 결과를 기반으로 시뮬레이션합니다.< / p >
< / div >
<!-- 시뮬레이션 결과 -->
< div id = "simulationResults" style = "display: none;" >
< h4 style = "color: #667eea; margin-bottom: 15px;" data-ko = "시뮬레이션 결과" data-en = "Simulation Results" data-zh = "模拟结果" > 시뮬레이션 결과< / h4 >
< div id = "simulationCards" style = "display: grid; gap: 15px;" >
<!-- 결과 카드들이 동적으로 생성됨 -->
< / div >
< / div >
< / div >
< / div >
<!-- 사이드바 -->
< div >
<!-- 관련 뉴스 -->
< div style = "background: rgba(26, 31, 46, 0.8); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 24px; margin-bottom: 20px;" >
< h3 style = "font-size: 1.2rem; margin-bottom: 20px; color: #ffffff;" data-ko = "📰 관련 뉴스" data-en = "📰 Related News" data-zh = "📰 相关新闻" > 📰 관련 뉴스< / h3 >
< div style = "display: flex; flex-direction: column; gap: 15px;" >
< div style = "border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 15px;" >
< h4 style = "font-size: 0.9rem; color: #ffffff; margin-bottom: 8px; line-height: 1.4;" > 비트코인 ETF 승인으로 기관 자금 대거 유입< / h4 >
< p style = "font-size: 0.8rem; color: #a0a0a0;" > 2시간 전 • 코인데스크< / p >
< / div >
< div style = "border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 15px;" >
< h4 style = "font-size: 0.9rem; color: #ffffff; margin-bottom: 8px; line-height: 1.4;" > 마이크로스트래티지, 추가 BTC 매입 발표< / h4 >
< p style = "font-size: 0.8rem; color: #a0a0a0;" > 4시간 전 • 블룸버그< / p >
< / div >
< div >
< h4 style = "font-size: 0.9rem; color: #ffffff; margin-bottom: 8px; line-height: 1.4;" > 테슬라 BTC 보유량 증가 시사< / h4 >
< p style = "font-size: 0.8rem; color: #a0a0a0;" > 6시간 전 • 로이터< / p >
< / div >
< / div >
< / div >
<!-- 광고 -->
< 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;" > 상세 분석 페이지< br > 타겟 광고 영역< br > 320x200px< / div >
< / div >
< / div >
< / div >
< / div >
2025-09-02 13:24:25 +00:00
< / div >
< / div >
< div id = "settings" class = "page" >
< div style = "text-align: center; padding: 100px 20px; color: #a0a0a0;" >
< h2 style = "font-size: 2rem; margin-bottom: 20px; color: #667eea;" data-ko = "⚙️ 설정" data-en = "⚙️ Settings" data-zh = "⚙️ 设置" > ⚙️ 설정< / h2 >
< p data-ko = "개인 투자 성향 설정 및 알림 관리 페이지입니다." data-en = "Personal investment preference settings and notification management page." data-zh = "个人投资偏好设置和通知管理页面。" > 개인 투자 성향 설정 및 알림 관리 페이지입니다.< / p >
< p style = "margin-top: 10px;" data-ko = "투자 스타일, 위험 허용도, 알림 설정 등을 관리할 수 있습니다." data-en = "You can manage investment style, risk tolerance, notification settings, etc." data-zh = "您可以管理投资风格、风险承受度、通知设置等。" > 투자 스타일, 위험 허용도, 알림 설정 등을 관리할 수 있습니다.< / p >
< / div >
< / div >
< / div >
< script >
// 로딩 화면 제거
setTimeout(() => {
document.getElementById('loadingScreen').style.opacity = '0';
setTimeout(() => {
document.getElementById('loadingScreen').style.display = 'none';
}, 500);
}, 3000);
// 페이지 전환
function showPage(pageId) {
// 모든 페이지 숨기기
document.querySelectorAll('.page').forEach(page => {
page.classList.remove('active');
});
// 모든 네비게이션 아이템 비활성화
document.querySelectorAll('.nav-item').forEach(item => {
item.classList.remove('active');
});
// 선택된 페이지 표시
document.getElementById(pageId).classList.add('active');
// 해당 네비게이션 아이템 활성화
event.target.classList.add('active');
}
// 상세 페이지 열기
function openDetail(symbol) {
2025-09-02 13:51:26 +00:00
document.getElementById('detailTitle').textContent = getSymbolName(symbol);
showPage('detail');
}
function getSymbolName(symbol) {
const names = {
'BTC': 'Bitcoin (BTC)',
'ETH': 'Ethereum (ETH)',
'AAPL': 'Apple Inc. (AAPL)',
'TSLA': 'Tesla Inc. (TSLA)'
};
return names[symbol] || symbol;
}
// 시뮬레이션 실행
function runSimulation() {
const selectedAI = document.querySelectorAll('.ai-select:checked');
const amount = document.getElementById('investmentAmount').value.replace(/,/g, '');
if (selectedAI.length === 0) {
alert('시뮬레이션할 AI 분석을 선택해주세요.');
return;
}
const resultsContainer = document.getElementById('simulationCards');
resultsContainer.innerHTML = '';
selectedAI.forEach((checkbox, index) => {
const aiId = checkbox.getAttribute('data-id');
const mockData = getMockSimulationData(aiId, parseInt(amount));
const resultCard = document.createElement('div');
resultCard.style.cssText = 'background: rgba(102, 126, 234, 0.1); border: 1px solid rgba(102, 126, 234, 0.3); border-radius: 12px; padding: 20px;';
resultCard.innerHTML = `
< div style = "display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;" >
< h5 style = "color: #667eea; margin: 0;" > ${aiId === 'ai1' ? 'AI 분석 #1' : 'AI 분석 #2'} 시뮬레이션< / h5 >
< span style = "background: ${mockData.profit > 0 ? 'rgba(34, 197, 94, 0.2)' : 'rgba(239, 68, 68, 0.2)'}; color: ${mockData.profit > 0 ? '#22c55e' : '#ef4444'}; padding: 4px 8px; border-radius: 6px; font-weight: bold;" >
${mockData.profit > 0 ? '+' : ''}${mockData.profitRate.toFixed(2)}%
< / span >
< / div >
< div style = "display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-bottom: 15px;" >
< div >
< div style = "font-size: 0.9rem; color: #a0a0a0; margin-bottom: 4px;" > 목표가 달성시< / div >
< div style = "font-size: 1.2rem; font-weight: bold; color: #22c55e;" > +${mockData.targetProfit.toLocaleString()}원< / div >
< div style = "font-size: 0.8rem; color: #22c55e;" > (+${mockData.targetRate.toFixed(2)}%)< / div >
< / div >
< div >
< div style = "font-size: 0.9rem; color: #a0a0a0; margin-bottom: 4px;" > 손절가 도달시< / div >
< div style = "font-size: 1.2rem; font-weight: bold; color: #ef4444;" > -${Math.abs(mockData.stopLoss).toLocaleString()}원< / div >
< div style = "font-size: 0.8rem; color: #ef4444;" > (${mockData.stopRate.toFixed(2)}%)< / div >
< / div >
< / div >
< div style = "background: rgba(255,255,255,0.05); border-radius: 8px; padding: 12px;" >
< div style = "font-size: 0.9rem; color: #ffffff; margin-bottom: 8px;" > AI 분석 신뢰도 검증< / div >
< div style = "display: flex; justify-content: space-between; font-size: 0.8rem;" >
< span style = "color: #a0a0a0;" > 과거 30일 적중률:< / span >
< span style = "color: #f59e0b; font-weight: bold;" > ${mockData.accuracy}%< / span >
< / div >
< div style = "display: flex; justify-content: space-between; font-size: 0.8rem;" >
< span style = "color: #a0a0a0;" > 평균 수익률:< / span >
< span style = "color: ${mockData.avgReturn > 0 ? '#22c55e' : '#ef4444'}; font-weight: bold;" > ${mockData.avgReturn > 0 ? '+' : ''}${mockData.avgReturn.toFixed(2)}%< / span >
< / div >
< / div >
`;
resultsContainer.appendChild(resultCard);
});
document.getElementById('simulationResults').style.display = 'block';
}
function getMockSimulationData(aiId, amount) {
const data = {
'ai1': {
targetProfit: Math.round(amount * 0.086),
targetRate: 8.6,
stopLoss: Math.round(amount * 0.061),
stopRate: -6.1,
accuracy: 76.8,
avgReturn: 5.2
},
'ai2': {
targetProfit: Math.round(amount * 0.103),
targetRate: 10.3,
stopLoss: Math.round(amount * 0.041),
stopRate: -4.1,
accuracy: 71.2,
avgReturn: 6.8
}
};
const result = data[aiId];
result.profit = Math.round((Math.random() > 0.7 ? result.targetProfit : -result.stopLoss));
result.profitRate = (result.profit / amount) * 100;
return result;
}
// AI 분석 관리 변수
let isCompactView = false;
let currentPage = 0;
let totalAnalyses = 247;
let loadedAnalyses = 12;
let selectedAnalyses = new Set();
let mockAnalyses = [];
// 목 데이터 생성
function generateMockAnalyses() {
const statuses = ['active', 'expired', 'hit', 'stop'];
const analysisTexts = [
'기관 자금 유입 지속으로 상승 모멘텀 유지. 기술적 분석에서 강세 신호 감지됨.',
'단기 조정 가능성이 있으나 중장기 상승 트렌드는 유효. 지지선 근처에서 매수 기회.',
'RSI 과매도 구간 진입으로 반등 가능성 높음. 거래량 증가 신호 포착.',
'이동평균선 돌파로 상승 추세 전환. 목표가 상향 조정 필요.',
'변동성 확대로 단기 트레이딩 기회 발생. 리스크 관리 필수.',
'시장 전반적 조정 영향으로 중립적 관점 유지. 관망 권장.',
'펀더멘털 분석 결과 저평가 상태. 중장기 투자 매력도 높음.',
'차트상 삼각수렴 패턴 완성. 방향성 돌파 임박.'
];
for (let i = 0; i < totalAnalyses ; i + + ) {
const hoursAgo = Math.floor(Math.random() * 720) + 1; // 1~720시간 전
const score = (Math.random() * 4 + 6).toFixed(1); // 6.0~10.0
const status = statuses[Math.floor(Math.random() * statuses.length)];
const textIndex = Math.floor(Math.random() * analysisTexts.length);
mockAnalyses.push({
id: `ai${i + 1}`,
hoursAgo: hoursAgo,
score: parseFloat(score),
status: status,
text: analysisTexts[textIndex],
entryPrice: Math.round(42000 + (Math.random() * 2000 - 1000)),
targetPrice: Math.round(46000 + (Math.random() * 2000 - 1000)),
stopPrice: Math.round(40000 + (Math.random() * 1000))
});
}
}
// 뷰 모드 토글
function toggleViewMode() {
isCompactView = !isCompactView;
const toggle = document.getElementById('viewModeToggle');
if (isCompactView) {
toggle.textContent = getTranslatedText('상세보기', 'Detailed View', '详细视图');
toggle.style.background = 'rgba(245, 158, 11, 0.2)';
toggle.style.borderColor = 'rgba(245, 158, 11, 0.3)';
toggle.style.color = '#f59e0b';
} else {
toggle.textContent = getTranslatedText('간략히보기', 'Compact View', '简洁视图');
toggle.style.background = 'rgba(102, 126, 234, 0.2)';
toggle.style.borderColor = 'rgba(102, 126, 234, 0.3)';
toggle.style.color = '#667eea';
}
renderAnalyses();
}
// 필터 토글
function toggleFilters() {
const panel = document.getElementById('filtersPanel');
panel.style.display = panel.style.display === 'none' ? 'block' : 'none';
}
// 분석 결과 렌더링
function renderAnalyses() {
const container = document.getElementById('analysisContainer');
const analyses = mockAnalyses.slice(0, loadedAnalyses);
container.innerHTML = '';
analyses.forEach(analysis => {
const card = document.createElement('div');
card.className = 'ai-analysis-card';
if (isCompactView) {
// 간략히보기 모드
card.style.cssText = 'background: rgba(102, 126, 234, 0.1); border: 1px solid rgba(102, 126, 234, 0.3); border-radius: 8px; padding: 12px; display: flex; align-items: center; gap: 15px;';
card.innerHTML = `
< input type = "checkbox" class = "ai-select" data-id = "${analysis.id}" style = "width: 16px; height: 16px;" $ { selectedAnalyses . has ( analysis . id ) ? ' checked ' : ' ' } >
< div style = "display: flex; align-items: center; gap: 8px; min-width: 120px;" >
< div style = "background: linear-gradient(135deg, #667eea, #764ba2); border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 10px;" > 🤖< / div >
< span style = "font-size: 0.8rem; color: #a0a0a0;" > ${analysis.hoursAgo}시간 전< / span >
< / div >
< div style = "flex: 1; font-size: 0.9rem; color: #e0e0e0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" >
${analysis.text}
< / div >
< div style = "display: flex; gap: 8px; font-size: 0.8rem;" >
< span style = "color: #3b82f6;" > $${analysis.entryPrice.toLocaleString()}< / span >
< span style = "color: #f59e0b;" > $${analysis.targetPrice.toLocaleString()}< / span >
< span style = "color: #ef4444;" > $${analysis.stopPrice.toLocaleString()}< / span >
< / div >
< span style = "background: ${getScoreColor(analysis.score).bg}; color: ${getScoreColor(analysis.score).text}; padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; min-width: 40px; text-align: center;" >
${analysis.score}/10
< / span >
`;
} else {
// 상세보기 모드
card.style.cssText = 'background: rgba(102, 126, 234, 0.1); border: 1px solid rgba(102, 126, 234, 0.3); border-radius: 12px; padding: 20px;';
card.innerHTML = `
< div style = "display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px;" >
< div >
< div style = "display: flex; align-items: center; gap: 10px; margin-bottom: 10px;" >
< div style = "background: linear-gradient(135deg, #667eea, #764ba2); border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 12px;" > 🤖< / div >
< span style = "font-weight: 600; color: #667eea;" > AI 분석 #${analysis.id.replace('ai', '')} (${analysis.hoursAgo}시간 전)< / span >
< span style = "background: ${getScoreColor(analysis.score).bg}; color: ${getScoreColor(analysis.score).text}; padding: 2px 8px; border-radius: 4px; font-size: 0.8rem;" > ${analysis.score}/10< / span >
< span style = "background: ${getStatusColor(analysis.status).bg}; color: ${getStatusColor(analysis.status).text}; padding: 2px 8px; border-radius: 4px; font-size: 0.75rem;" > ${getStatusText(analysis.status)}< / span >
< / div >
< p style = "color: #e0e0e0; line-height: 1.5; margin-bottom: 15px;" > ${analysis.text}< / p >
< / div >
< input type = "checkbox" class = "ai-select" data-id = "${analysis.id}" style = "width: 18px; height: 18px; margin-left: 10px;" $ { selectedAnalyses . has ( analysis . id ) ? ' checked ' : ' ' } >
< / div >
< div style = "display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;" >
< div style = "text-align: center; padding: 10px; background: rgba(255,255,255,0.05); border-radius: 8px;" >
< div style = "font-size: 0.8rem; color: #a0a0a0; margin-bottom: 4px;" > 진입가< / div >
< div style = "font-weight: 700; color: #3b82f6;" > $${analysis.entryPrice.toLocaleString()}< / div >
< / div >
< div style = "text-align: center; padding: 10px; background: rgba(255,255,255,0.05); border-radius: 8px;" >
< div style = "font-size: 0.8rem; color: #a0a0a0; margin-bottom: 4px;" > 목표가< / div >
< div style = "font-weight: 700; color: #f59e0b;" > $${analysis.targetPrice.toLocaleString()}< / div >
< / div >
< div style = "text-align: center; padding: 10px; background: rgba(255,255,255,0.05); border-radius: 8px;" >
< div style = "font-size: 0.8rem; color: #a0a0a0; margin-bottom: 4px;" > 손절가< / div >
< div style = "font-weight: 700; color: #ef4444;" > $${analysis.stopPrice.toLocaleString()}< / div >
< / div >
< / div >
`;
}
container.appendChild(card);
});
// 체크박스 이벤트 리스너 추가
document.querySelectorAll('.ai-select').forEach(checkbox => {
checkbox.addEventListener('change', updateSelectedCount);
});
updateSelectedCount();
}
// 헬퍼 함수들
function getScoreColor(score) {
if (score >= 8.0) return { bg: 'rgba(34, 197, 94, 0.2)', text: '#22c55e' };
if (score >= 6.0) return { bg: 'rgba(245, 158, 11, 0.2)', text: '#f59e0b' };
return { bg: 'rgba(239, 68, 68, 0.2)', text: '#ef4444' };
}
function getStatusColor(status) {
const colors = {
'active': { bg: 'rgba(59, 130, 246, 0.2)', text: '#3b82f6' },
'expired': { bg: 'rgba(107, 114, 128, 0.2)', text: '#6b7280' },
'hit': { bg: 'rgba(34, 197, 94, 0.2)', text: '#22c55e' },
'stop': { bg: 'rgba(239, 68, 68, 0.2)', text: '#ef4444' }
};
return colors[status] || colors.active;
}
function getStatusText(status) {
const texts = {
'active': '활성',
'expired': '만료',
'hit': '적중',
'stop': '손절'
};
return texts[status] || '활성';
}
// 선택 관리 함수들
function updateSelectedCount() {
selectedAnalyses.clear();
document.querySelectorAll('.ai-select:checked').forEach(cb => {
selectedAnalyses.add(cb.getAttribute('data-id'));
});
const count = selectedAnalyses.size;
document.getElementById('selectedCount').textContent = getTranslatedText(
`${count}개 선택됨`,
`${count} selected`,
`已选择${count}个`
);
}
function toggleAllVisible() {
const selectAll = document.getElementById('selectAllVisible');
const checkboxes = document.querySelectorAll('.ai-select');
checkboxes.forEach(cb => {
cb.checked = selectAll.checked;
});
updateSelectedCount();
}
function selectAllAnalyses() {
document.querySelectorAll('.ai-select').forEach(cb => cb.checked = true);
document.getElementById('selectAllVisible').checked = true;
updateSelectedCount();
}
function deselectAllAnalyses() {
document.querySelectorAll('.ai-select').forEach(cb => cb.checked = false);
document.getElementById('selectAllVisible').checked = false;
updateSelectedCount();
}
function loadMoreAnalyses() {
loadedAnalyses = Math.min(loadedAnalyses + 12, totalAnalyses);
renderAnalyses();
const remaining = totalAnalyses - loadedAnalyses;
const btn = document.getElementById('loadMoreBtn');
if (remaining > 0) {
btn.textContent = getTranslatedText(
`더 보기 (남은 ${remaining}개)`,
`Load More (${remaining} remaining)`,
`加载更多 (剩余${remaining}个)`
);
} else {
btn.style.display = 'none';
}
}
function applyFilters() {
// 필터 로직 구현
console.log('Filters applied');
// 실제로는 필터 조건에 맞는 데이터를 다시 로드하고 renderAnalyses() 호출
2025-09-02 13:24:25 +00:00
}
// 실시간 가격 업데이트 시뮬레이션
function updatePrices() {
const symbols = ['BTC', 'ETH', 'AAPL', 'TSLA'];
symbols.forEach(symbol => {
const priceElement = document.getElementById(`price-${symbol}`);
if (priceElement) {
priceElement.classList.add('price-update');
setTimeout(() => {
priceElement.classList.remove('price-update');
}, 500);
console.log(`Updated price for ${symbol}`);
}
});
}
// 5초마다 가격 업데이트
setInterval(updatePrices, 5000);
// 광고 클릭 추적
document.addEventListener('click', function(e) {
if (e.target.closest('.sidebar-ad, .top-ad-banner, .bottom-ad-banner, .inline-ad, .side-banner, .header-banner')) {
console.log('광고 클릭됨:', e.target.closest('[class*="ad"], [class*="banner"]').className);
// 실제로는 광고 추적 API 호출
}
});
// 테마 토글
let isDarkMode = true;
function toggleTheme() {
isDarkMode = !isDarkMode;
document.body.classList.toggle('light-theme', !isDarkMode);
const themeText = document.querySelector('.theme-toggle span');
if (isDarkMode) {
themeText.textContent = getTranslatedText('다크모드', 'Dark Mode', '深色模式');
document.querySelector('.theme-toggle').innerHTML = '🌙 ' + themeText.outerHTML;
} else {
themeText.textContent = getTranslatedText('라이트모드', 'Light Mode', '浅色模式');
document.querySelector('.theme-toggle').innerHTML = '☀️ ' + themeText.outerHTML;
}
localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
}
// 언어 드롭다운 관리
let currentLanguage = 'ko';
const languages = {
ko: '한국어',
en: 'English',
zh: '中文'
};
function toggleLanguageDropdown() {
const dropdown = document.getElementById('languageDropdown');
dropdown.classList.toggle('show');
}
function selectLanguage(lang) {
currentLanguage = lang;
document.getElementById('currentLang').textContent = languages[currentLanguage];
// 선택된 언어 옵션 업데이트
document.querySelectorAll('.language-option').forEach(option => {
option.classList.remove('selected');
});
document.querySelector(`.language-option[onclick="selectLanguage('${lang}')"]`).classList.add('selected');
// 드롭다운 닫기
document.getElementById('languageDropdown').classList.remove('show');
translatePage();
localStorage.setItem('language', currentLanguage);
}
// 외부 클릭 시 드롭다운 닫기
document.addEventListener('click', function(e) {
if (!e.target.closest('.language-dropdown')) {
document.getElementById('languageDropdown').classList.remove('show');
}
});
function getTranslatedText(ko, en, zh) {
switch(currentLanguage) {
case 'en': return en;
case 'zh': return zh;
default: return ko;
}
}
function translatePage() {
// 모든 data-* 속성이 있는 요소들 번역
document.querySelectorAll('[data-ko]').forEach(element => {
const translation = element.getAttribute(`data-${currentLanguage}`);
if (translation) {
// HTML 내용이 아닌 텍스트 내용만 교체
if (element.tagName === 'DIV' & & element.className.includes('header-banner')) {
element.textContent = translation;
} else if (element.children.length === 0 || element.tagName === 'H2' || element.tagName === 'H3' || element.tagName === 'P' || element.tagName === 'SPAN') {
element.textContent = translation;
} else {
// 복잡한 구조의 경우 첫 번째 텍스트 노드만 교체
const textNode = element.childNodes[0];
if (textNode & & textNode.nodeType === Node.TEXT_NODE) {
textNode.textContent = translation;
}
}
}
});
// 테마 버튼 번역 (특별 처리)
const themeSpan = document.querySelector('.theme-toggle span');
if (themeSpan) {
if (isDarkMode) {
themeSpan.textContent = getTranslatedText('다크모드', 'Dark Mode', '深色模式');
} else {
themeSpan.textContent = getTranslatedText('라이트모드', 'Light Mode', '浅色模式');
}
}
console.log(`Language changed to: ${languages[currentLanguage]} (IP-based detection simulated)`);
}
// IP 기반 언어 자동 감지 시뮬레이션
function detectLanguageByIP() {
// 실제로는 IP geolocation API를 사용
const mockLanguages = ['ko', 'en', 'zh'];
const detectedLang = mockLanguages[Math.floor(Math.random() * mockLanguages.length)];
console.log(`IP 기반 언어 감지: ${languages[detectedLang]}`);
if (detectedLang !== currentLanguage) {
currentLanguage = detectedLang;
document.getElementById('currentLang').textContent = languages[currentLanguage];
translatePage();
}
}
// 페이지 로드 완료 시 초기화
document.addEventListener('DOMContentLoaded', function() {
console.log('I\'m AI 투자매니저 프로토타입 로드 완료');
// 저장된 설정 복원
const savedTheme = localStorage.getItem('theme');
const savedLanguage = localStorage.getItem('language');
if (savedTheme === 'light') {
toggleTheme();
}
if (savedLanguage & & languages[savedLanguage]) {
currentLanguage = savedLanguage;
document.getElementById('currentLang').textContent = languages[currentLanguage];
translatePage();
} else {
// IP 기반 언어 자동 감지
detectLanguageByIP();
}
// 초기 데이터 로드 시뮬레이션
setTimeout(() => {
console.log('실시간 데이터 연결 완료');
2025-09-02 13:51:26 +00:00
// AI 분석 데이터 초기화
generateMockAnalyses();
renderAnalyses();
2025-09-02 13:24:25 +00:00
}, 3500);
});
< / script >
< / body >
< / html >
