1408 lines
54 KiB
HTML
1408 lines
54 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;
|
||
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('analysis')" data-ko="분석" data-en="Analysis" data-zh="分析">분석</a>
|
||
<a class="nav-item" onclick="showPage('simulation')" data-ko="시뮬레이션" data-en="Simulation" 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生态系统增长积极。">
|
||
단기 조정국면이지만 장기적 상승 전망. 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>
|
||
|
||
<!-- 기타 페이지 플레이스홀더 -->
|
||
<div id="analysis" 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="🔍 Detailed Analysis" data-zh="🔍 详细分析">🔍 상세 분석</h2>
|
||
<p data-ko="투자 상품별 상세 분석 페이지가 여기에 표시됩니다." data-en="Detailed analysis page for investment products will be displayed here." data-zh="投资产品的详细分析页面将在此显示。">투자 상품별 상세 분석 페이지가 여기에 표시됩니다.</p>
|
||
<p style="margin-top: 10px;" data-ko="차트, AI 분석 리포트, 뉴스 등이 포함됩니다." data-en="Includes charts, AI analysis reports, news, and more." data-zh="包括图表、AI分析报告、新闻等。">차트, AI 분석 리포트, 뉴스 등이 포함됩니다.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="simulation" 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="📊 Return Simulation" data-zh="📊 收益模拟">📊 수익률 시뮬레이션</h2>
|
||
<p data-ko="AI 추천 종목에 대한 투자 시뮬레이션 페이지입니다." data-en="Investment simulation page for AI-recommended stocks." data-zh="AI推荐股票的投资模拟页面。">AI 추천 종목에 대한 투자 시뮬레이션 페이지입니다.</p>
|
||
<p style="margin-top: 10px;" data-ko="투자 금액과 전략을 설정하여 예상 수익률을 확인할 수 있습니다." data-en="You can set investment amount and strategy to check expected returns." data-zh="您可以设置投资金额和策略来查看预期收益。">투자 금액과 전략을 설정하여 예상 수익률을 확인할 수 있습니다.</p>
|
||
</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) {
|
||
console.log(`Opening detail for ${symbol}`);
|
||
alert(`${symbol} 상세 분석 페이지를 열겠습니다.`);
|
||
}
|
||
|
||
// 실시간 가격 업데이트 시뮬레이션
|
||
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('실시간 데이터 연결 완료');
|
||
}, 3500);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |