Updated directory structure

.gitignore

@@ -1,3 +1,7 @@
+
+#files to ignore
+
+
 # Byte-compiled / optimized / DLL files
 __pycache__/
 *.py[cod]

public/assets/css/styles.css

@@ -0,0 +1,234 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Arial', sans-serif;
+    background-color: #fff;
+    color: #333;
+    line-height: 1.6;
+    font-size: 16px;
+}
+
+header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 1rem;
+    border-bottom: 1px solid #ddd;
+}
+
+.logo {
+    font-size: 1.5rem;
+    font-weight: normal;
+    text-align: center;
+    margin-bottom: 1rem;
+}
+
+nav ul {
+    list-style: none;
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+nav ul li a {
+    color: #333;
+    text-decoration: none;
+}
+
+.hero {
+    text-align: center;
+    padding: 2rem 1rem;
+    border-bottom: 1px solid #ddd;
+}
+
+.funds-table {
+    padding: 1rem;
+    max-width: 100%;
+    margin: 0 auto;
+    overflow-x: auto;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.9rem;
+}
+
+th, td {
+    padding: 0.5rem;
+    text-align: left;
+    border-bottom: 1px solid #ddd;
+    white-space: nowrap;
+}
+
+th {
+    font-weight: bold;
+    background-color: #f5f5f5;
+    position: sticky;
+    top: 0;
+    z-index: 10;
+}
+
+tbody tr:hover {
+    background-color: #f9f9f9;
+}
+
+tbody tr td:first-child {
+    font-weight: bold;
+    color: #333;
+}
+
+.last-updated {
+    margin-top: 1rem;
+    font-family: monospace;
+    color: #666;
+    font-size: 0.8rem;
+}
+
+.disclaimer {
+    margin-top: 1rem;
+    font-size: 0.8rem;
+    color: #666;
+}
+
+footer {
+    text-align: center;
+    padding: 1rem;
+    border-top: 1px solid #ddd;
+    margin-top: 2rem;
+    font-size: 0.8rem;
+}
+
+.scroll-hint {
+    display: none;
+    text-align: right;
+    font-style: italic;
+    color: #666;
+    margin-bottom: 0.5rem;
+    font-size: 0.8rem;
+}
+
+@media (max-width: 768px) {
+    body {
+        font-size: 14px;
+    }
+
+    .funds-table {
+        padding: 0.5rem;
+    }
+
+    table {
+        font-size: 0.8rem;
+    }
+
+    th, td {
+        padding: 0.4rem;
+    }
+
+    .scroll-hint {
+        display: block;
+    }
+
+    /* Remove sticky positioning for mobile */
+    th, td {
+        position: static;
+    }
+
+    /* Ensure minimum width for all columns */
+    th, td {
+        min-width: 80px;
+    }
+
+    th:first-child, td:first-child {
+        min-width: 120px;
+    }
+}
+
+
+.sort-icon {
+    margin-left: 0.25rem;
+    font-size: 0.8em;
+    color: #999;
+}
+
+th.sortable {
+    cursor: pointer;
+}
+
+th.sortable .sort-icon::after {
+    content: '↕';
+}
+
+th.sorted-asc .sort-icon::after {
+    content: '↑';
+}
+
+th.sorted-desc .sort-icon::after {
+    content: '↓';
+}
+
+footer {
+    background-color: #f5f5f5;
+    padding: 2rem;
+    margin-top: 2rem;
+    font-size: 0.9rem;
+    line-height: 1.5;
+}
+
+footer hr {
+    border: 0;
+    border-top: 1px solid #ddd;
+    margin-bottom: 1rem;
+}
+
+footer h3 {
+    font-size: 1.1rem;
+    margin-bottom: 0.5rem;
+}
+
+footer a {
+    color: #0066cc;
+    text-decoration: none;
+}
+
+footer a:hover {
+    text-decoration: underline;
+}
+
+.disclaimer, .contact-info, .contribute, .copyright {
+    margin-bottom: 1rem;
+}
+
+.copyright {
+    font-size: 0.8rem;
+    text-align: center;
+    color: #666;
+}
+
+@media (max-width: 768px) {
+    footer {
+        padding: 1rem;
+        font-size: 0.8rem;
+    }
+}
+
+
+#showAllButton {
+    display: block;
+    margin: 20px auto;
+    padding: 10px 20px;
+    background-color: #f0f0f0;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 14px;
+}
+
+#showAllButton:hover {
+    background-color: #e0e0e0;
+}

public/assets/js/script.js

@@ -0,0 +1,80 @@
+document.addEventListener("DOMContentLoaded", function() {
+    const fundTable = document.getElementById("fundTableBody");
+    const headers = document.querySelectorAll("#fundTable th");
+    const showAllButton = document.getElementById("showAllButton");
+    const rows = Array.from(fundTable.rows);
+
+    let numFundsToShow = 10; // Variable for home page table pagination, sort works irrespective
+    let allFundsShown = false;
+
+    // Function to render the table based on the number of funds to show
+    function renderTable() {
+        // Clear the table first
+        fundTable.innerHTML = '';
+
+        // Get the rows to display
+        const rowsToDisplay = allFundsShown ? rows : rows.slice(0, numFundsToShow);
+
+        // Append the rows to the table
+        rowsToDisplay.forEach(row => fundTable.appendChild(row));
+
+        // Toggle the "Show All" button visibility
+        showAllButton.style.display = allFundsShown ? 'none' : 'block';
+    }
+
+    // Function to sort table
+    function sortTable(columnIndex, isNumeric, ascending) {
+        rows.sort((a, b) => {
+            let aText = a.cells[columnIndex].innerText.trim();
+            let bText = b.cells[columnIndex].innerText.trim();
+
+            // Handle "-" values explicitly: treat them as a special case
+            if (aText === '-') aText = ascending ? Number.POSITIVE_INFINITY : Number.NEGATIVE_INFINITY;
+            if (bText === '-') bText = ascending ? Number.POSITIVE_INFINITY : Number.NEGATIVE_INFINITY;
+
+            if (isNumeric) {
+                aText = parseFloat(aText);
+                bText = parseFloat(bText);
+                return ascending ? aText - bText : bText - aText;
+            } else {
+                return ascending ? aText.localeCompare(bText) : bText.localeCompare(aText);
+            }
+        });
+
+        // Re-render the table after sorting
+        renderTable();
+    }
+
+    // Add click event to each header for sorting
+    headers.forEach((header, index) => {
+        header.classList.add('sortable');
+        header.addEventListener("click", function() {
+            const isNumeric = index !== 0; // Assume all columns except the first are numeric
+            const isAscending = !this.classList.contains("sorted-asc");
+
+            // Remove sorting classes from all headers
+            headers.forEach(h => h.classList.remove("sorted-asc", "sorted-desc"));
+
+            // Add appropriate sorting class to clicked header
+            this.classList.add(isAscending ? "sorted-asc" : "sorted-desc");
+
+            sortTable(index, isNumeric, isAscending);
+        });
+    });
+
+    // Add event listener for "Show All" button
+    showAllButton.addEventListener("click", function() {
+        allFundsShown = true;
+        renderTable();
+    });
+
+    // Default sort by 5Y column (index 9) in descending order
+    const fiveYearHeader = headers[9]; // 5Y column
+    fiveYearHeader.classList.add("sorted-desc");
+    sortTable(9, true, false);
+
+
+
+    // Initial rendering of the table
+    renderTable();
+});