637 lines
24 KiB
HTML
637 lines
24 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 Web Design - Investment Guide Service</title>
|
||
|
|
<style>
|
||
|
|
* {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
font-family: 'Arial', sans-serif;
|
||
|
|
background-color: #0f0f0f;
|
||
|
|
color: #ffffff;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 헤더 영역 스타일 */
|
||
|
|
.header {
|
||
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
|
|
padding: 20px;
|
||
|
|
text-align: center;
|
||
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
|
||
|
|
}
|
||
|
|
|
||
|
|
.logo {
|
||
|
|
font-size: 2.5rem;
|
||
|
|
font-weight: bold;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.subtitle {
|
||
|
|
font-size: 1.1rem;
|
||
|
|
opacity: 0.9;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 메인 컨테이너 - 2열 그리드 레이아웃 */
|
||
|
|
.container {
|
||
|
|
max-width: 1200px;
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 20px;
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 2fr 1fr; /* 좌측 콘텐츠 영역 : 우측 사이드바 = 2:1 */
|
||
|
|
gap: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 좌측 메인 콘텐츠 영역 */
|
||
|
|
.main-content {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 투자상품 카드 그리드 */
|
||
|
|
.coin-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||
|
|
gap: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 개별 투자상품 카드 */
|
||
|
|
.coin-card {
|
||
|
|
background: linear-gradient(145deg, #1a1a1a, #2d2d2d);
|
||
|
|
border-radius: 15px;
|
||
|
|
padding: 25px;
|
||
|
|
box-shadow: 0 8px 32px rgba(0,0,0,0.3);
|
||
|
|
border: 1px solid #333;
|
||
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.coin-card:hover {
|
||
|
|
transform: translateY(-5px);
|
||
|
|
box-shadow: 0 15px 40px rgba(0,0,0,0.5);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 투자상품 헤더 (이름, 심볼) */
|
||
|
|
.coin-header {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.coin-name {
|
||
|
|
font-size: 1.3rem;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #667eea;
|
||
|
|
}
|
||
|
|
|
||
|
|
.coin-symbol {
|
||
|
|
background: #667eea;
|
||
|
|
color: white;
|
||
|
|
padding: 5px 10px;
|
||
|
|
border-radius: 20px;
|
||
|
|
font-size: 0.9rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 가격 정보 영역 */
|
||
|
|
.price-info {
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.current-price {
|
||
|
|
font-size: 2rem;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #4ade80;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.price-change {
|
||
|
|
font-size: 1rem;
|
||
|
|
padding: 5px 10px;
|
||
|
|
border-radius: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.price-up {
|
||
|
|
background: #22c55e;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.price-down {
|
||
|
|
background: #ef4444;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* AI 분석 결과 표시 영역 */
|
||
|
|
.ai-analysis {
|
||
|
|
background: rgba(102, 126, 234, 0.1);
|
||
|
|
border: 1px solid #667eea;
|
||
|
|
border-radius: 10px;
|
||
|
|
padding: 15px;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.analysis-title {
|
||
|
|
color: #667eea;
|
||
|
|
font-weight: bold;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 투자 가격 목표 표시 */
|
||
|
|
.price-targets {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
gap: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.target-item {
|
||
|
|
text-align: center;
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.target-label {
|
||
|
|
font-size: 0.9rem;
|
||
|
|
color: #999;
|
||
|
|
margin-bottom: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.target-price {
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 1.1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 목표가별 색상 구분 */
|
||
|
|
.entry-price { color: #4ade80; }
|
||
|
|
.target-price-val { color: #fbbf24; }
|
||
|
|
.stop-loss { color: #ef4444; }
|
||
|
|
|
||
|
|
/* AI 투자 점수 표시 */
|
||
|
|
.ai-score {
|
||
|
|
background: linear-gradient(45deg, #667eea, #764ba2);
|
||
|
|
border-radius: 10px;
|
||
|
|
padding: 15px;
|
||
|
|
text-align: center;
|
||
|
|
margin-top: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.score-label {
|
||
|
|
font-size: 0.9rem;
|
||
|
|
margin-bottom: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.score-value {
|
||
|
|
font-size: 2rem;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 우측 사이드바 */
|
||
|
|
.sidebar {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 광고 배너 영역 */
|
||
|
|
.ad-banner {
|
||
|
|
background: linear-gradient(45deg, #333, #555);
|
||
|
|
border-radius: 10px;
|
||
|
|
padding: 20px;
|
||
|
|
text-align: center;
|
||
|
|
min-height: 200px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
border: 2px dashed #666;
|
||
|
|
font-size: 14px;
|
||
|
|
color: #ccc;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 개인 설정 패널 */
|
||
|
|
.settings-panel {
|
||
|
|
background: linear-gradient(145deg, #1a1a1a, #2d2d2d);
|
||
|
|
border-radius: 15px;
|
||
|
|
padding: 25px;
|
||
|
|
border: 1px solid #333;
|
||
|
|
}
|
||
|
|
|
||
|
|
.panel-title {
|
||
|
|
font-size: 1.2rem;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #667eea;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.setting-item {
|
||
|
|
margin-bottom: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.setting-label {
|
||
|
|
display: block;
|
||
|
|
margin-bottom: 5px;
|
||
|
|
color: #ccc;
|
||
|
|
}
|
||
|
|
|
||
|
|
select, input[type="range"] {
|
||
|
|
width: 100%;
|
||
|
|
padding: 8px;
|
||
|
|
background: #333;
|
||
|
|
border: 1px solid #555;
|
||
|
|
border-radius: 5px;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 알림 설정 영역 */
|
||
|
|
.notification-settings {
|
||
|
|
background: rgba(102, 126, 234, 0.1);
|
||
|
|
border: 1px solid #667eea;
|
||
|
|
border-radius: 10px;
|
||
|
|
padding: 15px;
|
||
|
|
margin-top: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.notification-title {
|
||
|
|
color: #667eea;
|
||
|
|
font-weight: bold;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.checkbox-item {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.checkbox-item input {
|
||
|
|
margin-right: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 설명 텍스트 스타일 */
|
||
|
|
.description-text {
|
||
|
|
background: #333;
|
||
|
|
color: #ccc;
|
||
|
|
padding: 8px 12px;
|
||
|
|
border-radius: 6px;
|
||
|
|
font-size: 12px;
|
||
|
|
border: 1px solid #555;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 모바일 반응형 */
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
.container {
|
||
|
|
grid-template-columns: 1fr;
|
||
|
|
padding: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.coin-grid {
|
||
|
|
grid-template-columns: 1fr;
|
||
|
|
}
|
||
|
|
|
||
|
|
.price-targets {
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 15px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!-- 웹사이트 헤더: 로고와 서비스 설명 -->
|
||
|
|
<header class="header">
|
||
|
|
<div class="logo">I'm AI</div>
|
||
|
|
<div class="subtitle">[HEADER] AI Investment Guide Service Logo & Title Area</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div class="container">
|
||
|
|
<!-- 좌측 메인 콘텐츠 영역: 투자상품 정보 표시 -->
|
||
|
|
<main class="main-content">
|
||
|
|
<div class="coin-grid">
|
||
|
|
<!--
|
||
|
|
투자상품 카드 #1: Bitcoin
|
||
|
|
- 실시간 가격 정보
|
||
|
|
- AI 분석 결과
|
||
|
|
- 투자 목표가 (진입/목표/손절)
|
||
|
|
- AI 투자 점수
|
||
|
|
-->
|
||
|
|
<div class="coin-card">
|
||
|
|
<div class="coin-header">
|
||
|
|
<div class="coin-name">[COIN NAME] Bitcoin</div>
|
||
|
|
<div class="coin-symbol">[SYMBOL] BTC</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="price-info">
|
||
|
|
<!-- 실시간 현재가 표시 -->
|
||
|
|
<div class="current-price">[CURRENT PRICE] $43,250.00</div>
|
||
|
|
<!-- 가격 변동률 및 변동액 표시 -->
|
||
|
|
<div class="price-change price-up">[PRICE CHANGE] +2.35% (+$992.50)</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- AI 분석 결과 표시 영역 -->
|
||
|
|
<div class="ai-analysis">
|
||
|
|
<div class="analysis-title">[AI ANALYSIS TITLE] AI Market Analysis</div>
|
||
|
|
<div class="description-text">[AI ANALYSIS] Recent institutional investment inflow sustains upward momentum. Technical analysis shows bullish signals detected.</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 투자 목표가 설정 표시 -->
|
||
|
|
<div class="price-targets">
|
||
|
|
<div class="target-item">
|
||
|
|
<div class="target-label">[ENTRY PRICE LABEL] Entry</div>
|
||
|
|
<div class="target-price entry-price">[ENTRY PRICE] $42,800</div>
|
||
|
|
</div>
|
||
|
|
<div class="target-item">
|
||
|
|
<div class="target-label">[TARGET PRICE LABEL] Target</div>
|
||
|
|
<div class="target-price target-price-val">[TARGET PRICE] $46,500</div>
|
||
|
|
</div>
|
||
|
|
<div class="target-item">
|
||
|
|
<div class="target-label">[STOP LOSS LABEL] Stop Loss</div>
|
||
|
|
<div class="target-price stop-loss">[STOP LOSS] $40,200</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- AI 투자 점수 표시 -->
|
||
|
|
<div class="ai-score">
|
||
|
|
<div class="score-label">[SCORE LABEL] AI Investment Score</div>
|
||
|
|
<div class="score-value">[AI SCORE] 8.5/10</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!--
|
||
|
|
투자상품 카드 #2: Ethereum
|
||
|
|
동일한 구조로 이더리움 정보 표시
|
||
|
|
-->
|
||
|
|
<div class="coin-card">
|
||
|
|
<div class="coin-header">
|
||
|
|
<div class="coin-name">[COIN NAME] Ethereum</div>
|
||
|
|
<div class="coin-symbol">[SYMBOL] ETH</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="price-info">
|
||
|
|
<div class="current-price">[CURRENT PRICE] $2,580.00</div>
|
||
|
|
<div class="price-change price-down">[PRICE CHANGE] -1.20% (-$31.20)</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="ai-analysis">
|
||
|
|
<div class="analysis-title">[AI ANALYSIS TITLE] AI Market Analysis</div>
|
||
|
|
<div class="description-text">[AI ANALYSIS] Short-term correction phase but long-term upward outlook. Positive DeFi ecosystem growth.</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="price-targets">
|
||
|
|
<div class="target-item">
|
||
|
|
<div class="target-label">[ENTRY PRICE LABEL] Entry</div>
|
||
|
|
<div class="target-price entry-price">[ENTRY PRICE] $2,520</div>
|
||
|
|
</div>
|
||
|
|
<div class="target-item">
|
||
|
|
<div class="target-label">[TARGET PRICE LABEL] Target</div>
|
||
|
|
<div class="target-price target-price-val">[TARGET PRICE] $2,850</div>
|
||
|
|
</div>
|
||
|
|
<div class="target-item">
|
||
|
|
<div class="target-label">[STOP LOSS LABEL] Stop Loss</div>
|
||
|
|
<div class="target-price stop-loss">[STOP LOSS] $2,350</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="ai-score">
|
||
|
|
<div class="score-label">[SCORE LABEL] AI Investment Score</div>
|
||
|
|
<div class="score-value">[AI SCORE] 7.2/10</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!--
|
||
|
|
투자상품 카드 #3: Ripple
|
||
|
|
높은 AI 점수를 받은 추천 종목 예시
|
||
|
|
-->
|
||
|
|
<div class="coin-card">
|
||
|
|
<div class="coin-header">
|
||
|
|
<div class="coin-name">[COIN NAME] Ripple</div>
|
||
|
|
<div class="coin-symbol">[SYMBOL] XRP</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="price-info">
|
||
|
|
<div class="current-price">[CURRENT PRICE] $0.625</div>
|
||
|
|
<div class="price-change price-up">[PRICE CHANGE] +5.80% (+$0.034)</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="ai-analysis">
|
||
|
|
<div class="analysis-title">[AI ANALYSIS TITLE] AI Market Analysis</div>
|
||
|
|
<div class="description-text">[AI ANALYSIS] Surge due to SEC lawsuit resolution expectations. Technical breakthrough pattern forming.</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="price-targets">
|
||
|
|
<div class="target-item">
|
||
|
|
<div class="target-label">[ENTRY PRICE LABEL] Entry</div>
|
||
|
|
<div class="target-price entry-price">[ENTRY PRICE] $0.610</div>
|
||
|
|
</div>
|
||
|
|
<div class="target-item">
|
||
|
|
<div class="target-label">[TARGET PRICE LABEL] Target</div>
|
||
|
|
<div class="target-price target-price-val">[TARGET PRICE] $0.720</div>
|
||
|
|
</div>
|
||
|
|
<div class="target-item">
|
||
|
|
<div class="target-label">[STOP LOSS LABEL] Stop Loss</div>
|
||
|
|
<div class="target-price stop-loss">[STOP LOSS] $0.550</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="ai-score">
|
||
|
|
<div class="score-label">[SCORE LABEL] AI Investment Score</div>
|
||
|
|
<div class="score-value">[AI SCORE] 9.1/10</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!--
|
||
|
|
투자상품 카드 #4: Cardano
|
||
|
|
중간 점수 종목 예시
|
||
|
|
-->
|
||
|
|
<div class="coin-card">
|
||
|
|
<div class="coin-header">
|
||
|
|
<div class="coin-name">[COIN NAME] Cardano</div>
|
||
|
|
<div class="coin-symbol">[SYMBOL] ADA</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="price-info">
|
||
|
|
<div class="current-price">[CURRENT PRICE] $0.485</div>
|
||
|
|
<div class="price-change price-up">[PRICE CHANGE] +3.20% (+$0.015)</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="ai-analysis">
|
||
|
|
<div class="analysis-title">[AI ANALYSIS TITLE] AI Market Analysis</div>
|
||
|
|
<div class="description-text">[AI ANALYSIS] Increased developer activity after smart contract upgrade. Medium-term growth expected.</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="price-targets">
|
||
|
|
<div class="target-item">
|
||
|
|
<div class="target-label">[ENTRY PRICE LABEL] Entry</div>
|
||
|
|
<div class="target-price entry-price">[ENTRY PRICE] $0.470</div>
|
||
|
|
</div>
|
||
|
|
<div class="target-item">
|
||
|
|
<div class="target-label">[TARGET PRICE LABEL] Target</div>
|
||
|
|
<div class="target-price target-price-val">[TARGET PRICE] $0.550</div>
|
||
|
|
</div>
|
||
|
|
<div class="target-item">
|
||
|
|
<div class="target-label">[STOP LOSS LABEL] Stop Loss</div>
|
||
|
|
<div class="target-price stop-loss">[STOP LOSS] $0.420</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="ai-score">
|
||
|
|
<div class="score-label">[SCORE LABEL] AI Investment Score</div>
|
||
|
|
<div class="score-value">[AI SCORE] 6.8/10</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!--
|
||
|
|
투자상품 카드 #5: Solana
|
||
|
|
고성장 가능성 종목 예시
|
||
|
|
-->
|
||
|
|
<div class="coin-card">
|
||
|
|
<div class="coin-header">
|
||
|
|
<div class="coin-name">[COIN NAME] Solana</div>
|
||
|
|
<div class="coin-symbol">[SYMBOL] SOL</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="price-info">
|
||
|
|
<div class="current-price">[CURRENT PRICE] $102.30</div>
|
||
|
|
<div class="price-change price-up">[PRICE CHANGE] +4.75% (+$4.64)</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="ai-analysis">
|
||
|
|
<div class="analysis-title">[AI ANALYSIS TITLE] AI Market Analysis</div>
|
||
|
|
<div class="description-text">[AI ANALYSIS] Network usage surge due to NFT and DeFi ecosystem activation. Technical strength continues.</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="price-targets">
|
||
|
|
<div class="target-item">
|
||
|
|
<div class="target-label">[ENTRY PRICE LABEL] Entry</div>
|
||
|
|
<div class="target-price entry-price">[ENTRY PRICE] $98.50</div>
|
||
|
|
</div>
|
||
|
|
<div class="target-item">
|
||
|
|
<div class="target-label">[TARGET PRICE LABEL] Target</div>
|
||
|
|
<div class="target-price target-price-val">[TARGET PRICE] $115.00</div>
|
||
|
|
</div>
|
||
|
|
<div class="target-item">
|
||
|
|
<div class="target-label">[STOP LOSS LABEL] Stop Loss</div>
|
||
|
|
<div class="target-price stop-loss">[STOP LOSS] $88.00</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="ai-score">
|
||
|
|
<div class="score-label">[SCORE LABEL] AI Investment Score</div>
|
||
|
|
<div class="score-value">[AI SCORE] 8.3/10</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<!-- 우측 사이드바: 광고 및 개인설정 -->
|
||
|
|
<aside class="sidebar">
|
||
|
|
<!--
|
||
|
|
광고 영역 #1: 주요 광고 배너
|
||
|
|
- 크기: 320x200px 권장
|
||
|
|
- 수익 모델의 핵심 영역
|
||
|
|
-->
|
||
|
|
<div class="ad-banner">
|
||
|
|
<div>
|
||
|
|
<div style="font-size: 16px; margin-bottom: 10px;">[AD BANNER #1]</div>
|
||
|
|
<div class="description-text">Advertisement Banner Area<br>320x200px Recommended<br>Primary Revenue Source</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!--
|
||
|
|
개인 맞춤 설정 패널
|
||
|
|
- 사용자 투자 성향 설정
|
||
|
|
- 알림 설정
|
||
|
|
- 위험 허용도 조절
|
||
|
|
-->
|
||
|
|
<div class="settings-panel">
|
||
|
|
<div class="panel-title">[SETTINGS TITLE] Personal Investment Settings</div>
|
||
|
|
|
||
|
|
<!-- 투자 성향 선택 -->
|
||
|
|
<div class="setting-item">
|
||
|
|
<label class="setting-label">[INVESTMENT TYPE LABEL] Investment Style</label>
|
||
|
|
<select>
|
||
|
|
<option>[OPTION] Conservative</option>
|
||
|
|
<option>[OPTION] Balanced</option>
|
||
|
|
<option>[OPTION] Aggressive</option>
|
||
|
|
<option>[OPTION] High Risk</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 투자 기간 선택 -->
|
||
|
|
<div class="setting-item">
|
||
|
|
<label class="setting-label">[INVESTMENT PERIOD LABEL] Investment Period</label>
|
||
|
|
<select>
|
||
|
|
<option>[OPTION] Short Term (1-3 months)</option>
|
||
|
|
<option>[OPTION] Medium Term (3-12 months)</option>
|
||
|
|
<option>[OPTION] Long Term (1+ years)</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 위험 허용도 슬라이더 -->
|
||
|
|
<div class="setting-item">
|
||
|
|
<label class="setting-label">[RISK TOLERANCE LABEL] Risk Tolerance: <span id="riskValue">5</span></label>
|
||
|
|
<input type="range" min="1" max="10" value="5" id="riskSlider">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 알림 설정 영역 -->
|
||
|
|
<div class="notification-settings">
|
||
|
|
<div class="notification-title">[NOTIFICATION TITLE] Alert Settings</div>
|
||
|
|
<div class="checkbox-item">
|
||
|
|
<input type="checkbox" id="targetAlert" checked>
|
||
|
|
<label for="targetAlert">[ALERT OPTION] Target Price Alert</label>
|
||
|
|
</div>
|
||
|
|
<div class="checkbox-item">
|
||
|
|
<input type="checkbox" id="stopLossAlert" checked>
|
||
|
|
<label for="stopLossAlert">[ALERT OPTION] Stop Loss Alert</label>
|
||
|
|
</div>
|
||
|
|
<div class="checkbox-item">
|
||
|
|
<input type="checkbox" id="entryAlert" checked>
|
||
|
|
<label for="entryAlert">[ALERT OPTION] Entry Price Alert</label>
|
||
|
|
</div>
|
||
|
|
<div class="checkbox-item">
|
||
|
|
<input type="checkbox" id="recommendAlert" checked>
|
||
|
|
<label for="recommendAlert">[ALERT OPTION] AI Recommendation Alert</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!--
|
||
|
|
광고 영역 #2: 보조 광고 배너
|
||
|
|
- 크기: 320x150px 권장
|
||
|
|
- 추가 수익원
|
||
|
|
-->
|
||
|
|
<div class="ad-banner">
|
||
|
|
<div>
|
||
|
|
<div style="font-size: 16px; margin-bottom: 10px;">[AD BANNER #2]</div>
|
||
|
|
<div class="description-text">Secondary Advertisement Area<br>320x150px Recommended<br>Additional Revenue Stream</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</aside>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// 위험 허용도 슬라이더 기능
|
||
|
|
const riskSlider = document.getElementById('riskSlider');
|
||
|
|
const riskValue = document.getElementById('riskValue');
|
||
|
|
|
||
|
|
riskSlider.addEventListener('input', function() {
|
||
|
|
riskValue.textContent = this.value;
|
||
|
|
});
|
||
|
|
|
||
|
|
// 실시간 가격 업데이트 시뮬레이션
|
||
|
|
// 실제 구현시 WebSocket 또는 API 폴링 방식으로 교체
|
||
|
|
function updatePrices() {
|
||
|
|
const priceElements = document.querySelectorAll('.current-price');
|
||
|
|
const changeElements = document.querySelectorAll('.price-change');
|
||
|
|
|
||
|
|
priceElements.forEach((element, index) => {
|
||
|
|
// 실제로는 API에서 실시간 데이터를 받아와 업데이트
|
||
|
|
const currentText = element.textContent;
|
||
|
|
console.log('Price update simulation for:', currentText);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// 30초마다 가격 업데이트 (데모용)
|
||
|
|
setInterval(updatePrices, 30000);
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|