Skip to content

Commit

Permalink
Update index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@LetsWorkAround
LetsWorkAround authored Aug 21, 2024
1 parent 3494440 commit 6a86622
Showing 1 changed file with 207 additions and 0 deletions.
207 changes: 207 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -376,6 +376,77 @@ <h1>Comprehensive Return Management System</h1>
</table>
</div>

<style>
.fund-management-section {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
max-width: 1200px;
margin: 0 auto;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
cursor: pointer;
}
th:hover {
background-color: #ddd;
}
.sortable::after {
content: " ↕";
}
.value {
transition: color 0.3s ease, transform 0.3s ease;
}
.value.changing {
transform: scale(1.1);
}
.positive-1 { color: #4CAF50; }
.positive-2 { color: #45a049; }
.positive-3 { color: #3d9142; }
.positive-4 { color: #36833b; }
.negative-1 { color: #f44336; }
.negative-2 { color: #e53935; }
.negative-3 { color: #d32f2f; }
.negative-4 { color: #c62828; }
.stock-row {
background-color: #f9f9f9;
font-size: 0.9em;
}
.stock-name {
padding-left: 20px;
}
</style>

<div class="fund-management-section">
<h1>Comprehensive Return Management System</h1>
<table id="fundTable">
<thead>
<tr>
<th>펀드명</th>
<th class="sortable" data-sort="threeMonth">3개월 (%)</th>
<th class="sortable" data-sort="sixMonth">6개월 (%)</th>
<th class="sortable" data-sort="oneYear">1년 (%)</th>
<th class="sortable" data-sort="threeYear">3년 (%)</th>
<th class="sortable" data-sort="sinceLaunch">설정이후 (%)</th>
<th class="sortable" data-sort="size">펀드규모 (억)</th>
</tr>
</thead>
<tbody id="fundTableBody">
<!-- JavaScript will populate this -->
</tbody>
</table>
</div>

<div class="content-overlay">
<div class="container">
<h1>Comprehensive Return Management System</h1>
Expand All @@ -400,6 +471,142 @@ <h3><span class="material-icons">extension</span> 맞춤형 솔루션</h3>
</div>
</div>

<script>
const fundsData = [
{
name: "DB바이오헬스케어증권자투자신탁제1호[주식]ClassA-E",
threeMonth: 11.12, sixMonth: 24.12, oneYear: 42.03, threeYear: 2.28, sinceLaunch: 42.94, size: 71,
stocks: ["삼성바이오로직스", "셀트리온", "유한양행", "SK바이오사이언스", "한미약품"]
},
{
name: "미래에셋연금한국헬스케어증권자투자신탁1호주식CPe",
threeMonth: 10.33, sixMonth: 17.97, oneYear: 13.57, threeYear: -13.88, sinceLaunch: 27.50, size: 184,
stocks: ["삼성바이오로직스", "셀트리온", "유한양행", "녹십자"]
},
{
name: "미래에셋한국헬스케어증권자투자신탁1호(주식)A-e",
threeMonth: 10.32, sixMonth: 17.92, oneYear: 13.43, threeYear: -14.11, sinceLaunch: 161.55, size: 109,
stocks: ["삼성바이오로직스", "셀트리온", "유한양행", "한미약품", "녹십자"]
},
{
name: "웰컴액티브공모주코스닥벤처기업증권투자신탁[주혼]Ae",
threeMonth: 7.54, sixMonth: 30.24, oneYear: 25.31, threeYear: 0, sinceLaunch: 12, size: 1.05,
stocks: ["카카오뱅크", "LG에너지솔루션", "SK아이이테크놀로지"]
},
{
name: "삼성ABF코리아장기채권인덱스증권투자신탁[채권]I",
threeMonth: 4.49, sixMonth: 5.78, oneYear: 11.08, threeYear: 0.85, sinceLaunch: 85.18, size: 157,
stocks: ["국고채권", "한국전력공사채권", "한국도로공사채권", "한국가스공사채권"]
}
];

function getRandomChange() {
return (Math.random() - 0.5) * 2; // Random number between -1 and 1
}

function updateFundData() {
fundsData.forEach(fund => {
fund.threeMonth += getRandomChange();
fund.sixMonth += getRandomChange();
fund.oneYear += getRandomChange();
fund.threeYear += getRandomChange();
fund.sinceLaunch += getRandomChange();
fund.size += getRandomChange() * 10;
});
}

function getColorClass(value) {
const absValue = Math.abs(value);
if (absValue >= 20) return value >= 0 ? 'positive-4' : 'negative-4';
if (absValue >= 15) return value >= 0 ? 'positive-3' : 'negative-3';
if (absValue >= 10) return value >= 0 ? 'positive-2' : 'negative-2';
if (absValue >= 5) return value >= 0 ? 'positive-1' : 'negative-1';
return '';
}

function renderTable() {
const tableBody = document.getElementById('fundTableBody');
tableBody.innerHTML = '';

fundsData.forEach(fund => {
const fundRow = document.createElement('tr');
fundRow.innerHTML = `
<td>${fund.name}</td>
<td class="value ${getColorClass(fund.threeMonth)}" data-value="${fund.threeMonth}">${fund.threeMonth.toFixed(2)}%</td>
<td class="value ${getColorClass(fund.sixMonth)}" data-value="${fund.sixMonth}">${fund.sixMonth.toFixed(2)}%</td>
<td class="value ${getColorClass(fund.oneYear)}" data-value="${fund.oneYear}">${fund.oneYear.toFixed(2)}%</td>
<td class="value ${getColorClass(fund.threeYear)}" data-value="${fund.threeYear}">${fund.threeYear.toFixed(2)}%</td>
<td class="value ${getColorClass(fund.sinceLaunch)}" data-value="${fund.sinceLaunch}">${fund.sinceLaunch.toFixed(2)}%</td>
<td class="value" data-value="${fund.size}">${fund.size.toFixed(2)}</td>
`;
tableBody.appendChild(fundRow);

// Add stock rows
fund.stocks.forEach(stock => {
const stockRow = document.createElement('tr');
stockRow.className = 'stock-row';
stockRow.innerHTML = `
<td class="stock-name" colspan="7">- ${stock}</td>
`;
tableBody.appendChild(stockRow);
});
});
}

function sortTable(column) {
fundsData.sort((a, b) => b[column] - a[column]);
}

function animateValue(element, start, end, duration) {
let startTimestamp = null;
element.classList.add('changing');
const step = (timestamp) => {
if (!startTimestamp) startTimestamp = timestamp;
const progress = Math.min((timestamp - startTimestamp) / duration, 1);
const currentValue = start + progress * (end - start);
element.textContent = currentValue.toFixed(2) + '%';
element.className = `value ${getColorClass(currentValue)}`;
if (progress < 1) {
window.requestAnimationFrame(step);
} else {
element.classList.remove('changing');
}
};
window.requestAnimationFrame(step);
}

function updateTableWithAnimation() {
const valueElements = document.querySelectorAll('.value');
updateFundData();

valueElements.forEach((element, index) => {
const column = element.cellIndex - 1; // Subtract 1 because the first column is the fund name
const fund = fundsData[Math.floor(index / 6)]; // Divide by 6 because there are 6 value columns per fund
const newValue = Object.values(fund)[column + 1]; // Add 1 to skip the name property
const oldValue = parseFloat(element.dataset.value);

if (newValue !== oldValue) {
animateValue(element, oldValue, newValue, 1000);
element.dataset.value = newValue;
}
});
}

document.querySelectorAll('th.sortable').forEach(th => {
th.addEventListener('click', () => {
const column = th.dataset.sort;
sortTable(column);
renderTable();
});
});

// Initial render
renderTable();

// Update data and re-render every 3 seconds
setInterval(updateTableWithAnimation, 3000);
</script>

<section class="section success-cases">
<div class="section-content">
<h2 class="section-title">고객 성공 사례</h2>
Expand Down

0 comments on commit 6a86622

Please sign in to comment.