1875 lines
85 KiB
HTML
1875 lines
85 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('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="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>
|
||
</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) {
|
||
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() 호출
|
||
}
|
||
|
||
// 실시간 가격 업데이트 시뮬레이션
|
||
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('실시간 데이터 연결 완료');
|
||
|
||
// AI 분석 데이터 초기화
|
||
generateMockAnalyses();
|
||
renderAnalyses();
|
||
}, 3500);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |