<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enzycept Plus Solution - Trend Analysis</title>
<script>
(function() {
const savedTheme = localStorage.getItem('theme') || 'dark';
document.documentElement.setAttribute('data-theme', savedTheme);
})();
</script>
<script src="https://cdn.plot.ly/plotly-3.3.0.min.js"></script>
<style>
/* ===== CSS 변수 설정 ===== */
:root {
--bg-color: #ffffff;
--text-color: #212529;
--header-bg: #f8f9fa;
--border-color: #dee2e6;
--card-bg: #ffffff;
--primary-blue: #4dabf7;
--positive: #66BB6A;
--negative: #FF7043;
}
/* 다크모드: 명도를 낮춘 버전 */
[data-theme="dark"] {
--bg-color: #0d1117; /* 어두운 네이비 블랙 */
--text-color: #b0b8c1; /* 텍스트 명도를 낮춰 눈부심 방지 */
--header-bg: #161b22;
--border-color: #30363d;
--card-bg: #1c2128; /* 카드 배경색 살짝 밝게 */
--primary-blue: #4FC3F7;
}
/* ===== 기본 레이아웃 ===== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s ease, color 0.3s ease;
line-height: 1.6;
}
.header {
background-color: var(--header-bg);
padding: 20px 40px;
border-bottom: 1px solid var(--border-color);
display: flex;
justify-content: space-between;
align-items: center;
}
.theme-toggle {
background: var(--card-bg);
border: 1px solid var(--border-color);
color: var(--text-color);
cursor: pointer;
padding: 10px 20px;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 600;
transition: all 0.2s ease;
}
.theme-toggle:hover {
background-color: var(--header-bg);
transform: translateY(-1px);
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 30px 20px;
}
/* ===== 컴포넌트 디자인 ===== */
.info-box {
background-color: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 20px;
margin-bottom: 30px;
}
.info-box h3 {
margin-bottom: 8px;
color: var(--primary-blue);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.stat-card {
background-color: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 25px;
text-align: center;
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.stat-card h4 {
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 12px;
opacity: 0.8;
}
.stat-card .value {
font-size: 2.2rem;
font-weight: 800;
color: var(--primary-blue);
margin-bottom: 5px;
}
.stat-card .change {
font-size: 0.9rem;
font-weight: 600;
}
.positive { color: var(--positive); }
.negative { color: var(--negative); }
#trend-plot {
background-color: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 12px;
overflow: hidden;
padding: 10px;
}
kbd {
background: var(--header-bg);
border: 1px solid var(--border-color);
padding: 2px 6px;
border-radius: 4px;
font-size: 0.8rem;
}
</style>
</head>
<body>
<header class="header">
<h1>📈 Enzycept Plus Solution</h1>
<button class="theme-toggle" onclick="toggleTheme()" id="themeBtn">
🌙 Dark Mode
</button>
</header>
<div class="container">
<div class="info-box">
<h3>Trend Analysis Overview</h3>
<p>3-year sales trend comparison for Enzycept Plus Solution</p>
<p style="font-size: 0.85rem; margin-top: 5px; opacity: 0.7;">
<strong>Tip:</strong> 단축키 <kbd>Ctrl/Cmd + Shift + D</kbd>로 테마를 전환할 수 있습니다.
</p>
</div>
<div class="stats-grid">
<div class="stat-card">
<h4>2023 Total Sales</h4>
<div class="value">45.4M</div>
<div class="change">3,246 units</div>
</div>
<div class="stat-card">
<h4>2024 Total Sales</h4>
<div class="value">60.3M</div>
<div class="change positive">+33.0% ↑</div>
</div>
<div class="stat-card">
<h4>2025 Total Sales</h4>
<div class="value">123.0M</div>
<div class="change positive">+103.9% ↑</div>
</div>
<div class="stat-card">
<h4>Peak Month (2025)</h4>
<div class="value">August</div>
<div class="change">21.2M KRW</div>
</div>
</div>
<div id="trend-plot"></div>
</div>
<script>
// 차트 데이터 설정
const months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
const salesData = [
{
name: "2023 Sales",
x: months,
y: [3.90, 3.37, 4.37, 2.14, 2.62, 3.29, 6.65, 1.56, 5.23, 3.85, 3.29, 5.12],
type: "scatter", mode: "lines+markers",
line: { color: "#4FC3F7", width: 3 },
marker: { size: 8, symbol: "circle" }
},
{
name: "2024 Sales",
x: months,
y: [3.56, 6.10, 1.97, 5.03, 5.48, 3.43, 6.66, 4.08, 4.21, 2.96, 6.96, 9.89],
type: "scatter", mode: "lines+markers",
line: { color: "#66BB6A", width: 3 },
marker: { size: 8, symbol: "square" }
},
{
name: "2025 Sales",
x: months,
y: [13.37, 6.42, 9.16, 12.96, 5.08, 10.75, 6.66, 21.22, 8.83, 16.98, 7.93, 3.69],
type: "scatter", mode: "lines+markers",
line: { color: "#FF7043", width: 3 },
marker: { size: 8, symbol: "diamond" }
}
];
// 테마 관리 함수
function getTheme() {
return localStorage.getItem('theme') || 'dark';
}
function applyTheme(theme) {
const root = document.documentElement;
const btn = document.getElementById('themeBtn');
root.setAttribute('data-theme', theme);
localStorage.setItem('theme', theme);
btn.textContent = theme === 'dark' ? '☀️ Light Mode' : '🌙 Dark Mode';
updatePlot(theme);
}
function toggleTheme() {
const newTheme = getTheme() === 'light' ? 'dark' : 'light';
applyTheme(newTheme);
}
// Plotly 차트 업데이트
function updatePlot(theme) {
const isDark = theme === 'dark';
const layout = {
height: 600,
paper_bgcolor: isDark ? '#1c2128' : '#ffffff',
plot_bgcolor: isDark ? '#1c2128' : '#f8f9fa',
font: { color: isDark ? '#b0b8c1' : '#212529', family: 'Segoe UI' },
xaxis: {
gridcolor: isDark ? '#30363d' : '#dee2e6',
linecolor: isDark ? '#30363d' : '#dee2e6'
},
yaxis: {
title: "Sales (Million KRW)",
gridcolor: isDark ? '#30363d' : '#dee2e6',
linecolor: isDark ? '#30363d' : '#dee2e6'
},
legend: { orientation: "h", y: 1.1 },
margin: { t: 50, b: 50, l: 60, r: 30 },
hovermode: "x unified"
};
Plotly.react('trend-plot', salesData, layout, { responsive: true });
}
// 초기화 및 이벤트 리스너
document.addEventListener('DOMContentLoaded', () => {
applyTheme(getTheme());
});
document.addEventListener('keydown', (e) => {
if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'D') {
e.preventDefault();
toggleTheme();
}
});
</script>
</body>
</html>