diff --git a/templates/index.html b/templates/index.html index f262da5..17ce18b 100644 --- a/templates/index.html +++ b/templates/index.html @@ -2,7 +2,7 @@ - + @@ -16,6 +16,8 @@ --header-bg: #4a5568; --text-up: #28a745; --text-down: #dc3545; + --sticky-bg: #ffffff; + --sticky-bg-alt: #f9f9f9; /* For zebra stripes */ } body { @@ -25,7 +27,10 @@ padding: 10px; } + /* Card Styling */ .card { + /*max-width: 1100px; /* Limits how wide the table grows on a desktop */ + /*margin: 0 auto; /* Centers the table on the screen */ border: none; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); @@ -38,14 +43,25 @@ padding: 15px; } - /* Zebra Striping Logic */ - .table-striped tbody tr:nth-of-type(odd) { - background-color: rgba(0, 0, 0, 0.03); + /* 1. Fixed Table Layout Strategy */ + .table-responsive { + border-radius: 8px; + overflow-x: auto; } - /* Sticky Column for Mobile Scrolling */ - .table-responsive { border-radius: 8px; } - + .table { + /* table-layout: auto; */ /* Default - let it be auto for data safety */ + width: 100%; + + /* This MUST match the sum of your column min-widths */ + min-width: 600px; + + /* Critical for the 'Sticky' column borders to look right */ + border-collapse: separate; + border-spacing: 0; + } + + /* 2. Header & Cell Styling */ .table thead th { background-color: var(--header-bg) !important; color: white !important; @@ -53,9 +69,9 @@ text-transform: uppercase; letter-spacing: 0.5px; text-align: center; - white-space: nowrap; padding: 12px 8px; border: none; + white-space: nowrap; } .table td { @@ -63,81 +79,72 @@ vertical-align: middle; font-size: 0.85rem; white-space: nowrap; - border-color: #f1f1f1; + border-bottom: 1px solid #f1f1f1; + padding: 10px 8px; } - /* Keep Instrument Name fixed on the left while swiping */ - .table td:first-child, .table th:first-child { + /* 3. Sticky Column Logic (Instrument) */ + .table td:first-child, + .table th:first-child { position: sticky; + text-align: left !important; /* Force left alignment */ + padding-left: 15px; /* Add space so text doesn't touch the edge */ left: 0; z-index: 10; - text-align: left; - min-width: 140px; - background-color: white; + background-color: var(--sticky-bg); font-weight: 700; + + /* THE SHADOW EFFECT */ + /* This adds a 4px blur shadow to the right side of the column */ + box-shadow: 4px 0 8px -2px rgba(0, 0, 0, 0.15); + + /* Clean border to define the edge */ + border-right: 1px solid #ddd; + } + + /* 4. Zebra Striping + Sticky Fix */ + .table-striped tbody tr:nth-of-type(odd) { + background-color: rgba(0, 0, 0, 0.03); } - /* Ensure zebra stripe works on sticky column */ .table-striped tbody tr:nth-of-type(odd) td:first-child { - background-color: #f9f9f9; - } - - /* Custom UI Elements */ - .btn-refresh { - background-color: #0d6efd; - color: white !important; - font-weight: 600; - border-radius: 6px; - padding: 6px 16px; - transition: 0.2s; + background-color: var(--sticky-bg-alt); /* Matches stripe color */ } + /* Custom Colors & UI */ .text-up { color: var(--text-up); font-weight: 600; } .text-down { color: var(--text-down); font-weight: 600; } + + @media (prefers-color-scheme: dark) { + :root { + --header-bg: #1a202c; /* Darker header */ + --sticky-bg: #2d3748; /* Dark background for sticky column */ + --sticky-bg-alt: #1a202c; + background-color: #121212; /* Main page background */ + color: #e2e8f0; /* Light text */ + } + .card, .card-header { + background-color: #2d3748 !important; + color: white; + } + .table td { border-color: #4a5568; color: #e2e8f0; } + } - .badge-kd { - background-color: #6c757d; - font-size: 0.75rem; - padding: 5px 8px; - } - #loading { display: none; margin-left: 10px; font-size: 0.8rem; color: #666; } - /* 1. Ensure the 52W column is wide enough for the progress bar */ - .table td:nth-child(4), .table th:nth-child(4) { - min-width: 140px; - text-align: left; - } - /* 2. Narrow the EMA and K/D columns since they only have small numbers */ - .table td:nth-child(n+5), .table th:nth-child(n+5) { - min-width: 75px; - } - - /* 3. Give the Instrument column a bit more breathing room if names are long */ - .table td:first-child, .table th:first-child { - min-width: 180px; /* Increased from 140px */ -} + +
Portfolio Signals
- - + Updating... -
@@ -166,18 +172,20 @@ - - - - - - - - + + + + + + + + + + - +
InstrumentDate CloseChg%52W Range 20 EMA50 EMA100 EMA200 EMAK/DInstrumentDateCloseChg%52W Range20 EMA50 EMA100 EMA200 EMAK/D
Initializing data engine...
Initializing data engine...
@@ -241,8 +249,16 @@ } let displayDate = "N/A"; if (item.last_date && item.last_date.includes('-')) { - const parts = item.last_date.split('-'); // Splits "2026-01-30" into ["2026", "01", "30"] - displayDate = `${parts[2]}/${parts[1]}`; // Combines into "30/01" + const parts = item.last_date.split('-'); + const formatted = `${parts[2]}/${parts[1]}`; + + // Get today's date in YYYY-MM-DD format to compare + const today = new Date().toISOString().split('T')[0]; + + // Pick color based on freshness + const color = (item.last_date === today) ? '#28a745' : '#dc3545'; + + displayDate = `${formatted}`; } // --- 2. Calculations & Styling --- const current = parseFloat(item.last_close) || 0;