From d38e5777de5785ebf1142d99e034ba603c2ebd9f Mon Sep 17 00:00:00 2001
From: Radek Davidek <rdavidek@trask.cz>
Date: Fri, 14 Nov 2025 16:38:35 +0100
Subject: [PATCH] better UI

---
 .../java/cz/kamma/czb/BasketballServer.java   |   2 +-
 src/main/resources/index.html                 | 621 +++++++++++++-----
 2 files changed, 470 insertions(+), 153 deletions(-)

diff --git a/src/main/java/cz/kamma/czb/BasketballServer.java b/src/main/java/cz/kamma/czb/BasketballServer.java
index 11e11c0..5f44a28 100644
--- a/src/main/java/cz/kamma/czb/BasketballServer.java
+++ b/src/main/java/cz/kamma/czb/BasketballServer.java
@@ -24,7 +24,7 @@ import lombok.extern.log4j.Log4j2;
 
 @Log4j2
 public class BasketballServer {
-    private static final String VERSION = "1.0.2";
+    private static final String VERSION = "1.0.3";
 
     public static void main(String[] args) throws Exception {
         log.info("Starting Basketball Server...");
diff --git a/src/main/resources/index.html b/src/main/resources/index.html
index 6408cb0..c4cf897 100644
--- a/src/main/resources/index.html
+++ b/src/main/resources/index.html
@@ -5,157 +5,444 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>CZ.Basketball - zápasy</title>
 <link rel="icon" type="image/png" href="https://cz.basketball/img/logo-icon.png">
-<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
 <style>
-body { 
-    font-family: 'Roboto', Arial, sans-serif; 
-    background: #f4f7f9; 
-    color: #333;
-    margin: 10px 16px;
-}
-h1 { 
-    color: #2c3e50; 
-    font-size: 1.6rem;
-    text-align: center;
-    margin-bottom: 20px;
-}
-.controls {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 10px;
-    margin-bottom: 10px;
-    justify-content: center;
-}
-label { font-weight: 500; }
-input, select {
-    padding: 8px 10px;
-    border: 1px solid #ccc;
-    border-radius: 6px;
-    font-size: 15px;
-    min-width: 140px;
-}
-button {
-    background-color: #3498db;
-    color: white;
-    border: none;
-    border-radius: 6px;
-    padding: 8px 12px;
-    font-size: 15px;
-    cursor: pointer;
-    transition: background 0.3s;
-}
-button:hover { background-color: #2980b9; }
-.radio-group {
-    text-align: center;
-    margin: 8px 0 16px 0;
-}
-.radio-group label {
-    margin-right: 12px;
-    font-size: 15px;
-}
-#loading, #error {
-    text-align: center;
-    margin: 10px 0;
-    font-weight: 500;
-}
-#loading { color: #3498db; }
-#error { color: red; }
-.table-container {
-    overflow-x: auto;
-    background: white;
-    border-radius: 8px;
-    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
-}
-table { 
-    border-collapse: collapse; 
-    width: 100%; 
-    min-width: 700px;
-}
-th, td { 
-    border-bottom: 1px solid #eee; 
-    padding: 10px; 
-    text-align: left; 
-    font-size: 14px;
-}
-th { 
-    background-color: #3498db; 
-    color: white; 
-    font-weight: 500;
-    position: sticky;
-    top: 0;
-}
-tr.highlight { 
-    background-color: #ffeb3b !important; 
-    font-weight: bold; 
-}
-tr.nymburk { 
-    background-color: #90caf9; 
-}
-tr:nth-child(even) { background-color: #f9f9f9; }
-a { color: #2980b9; text-decoration: none; }
-a:hover { text-decoration: underline; }
-.footer {
-    text-align: center;
-    padding: 20px 0;
-    margin-top: 20px;
-    color: #666;
-    font-size: 12px;
-    border-top: 1px solid #eee;
-}
-@media (max-width: 600px) {
-    h1 { font-size: 1.3rem; margin-bottom: 12px; }
-    .controls { flex-direction: column; align-items: stretch; }
-    input, select { width: 100%; font-size: 16px; }
-    .radio-group label { display: block; margin: 4px 0; }
-    th, td { padding: 8px; font-size: 13px; }
-}
+    :root {
+        --primary-color: #2c3e50;
+        --secondary-color: #3498db;
+        --accent-color: #e74c3c;
+        --light-bg: #f8f9fa;
+        --dark-text: #2c3e50;
+        --light-text: #7f8c8d;
+        --border-color: #e0e0e0;
+        --success-color: #27ae60;
+        --warning-color: #f39c12;
+        --hover-bg: rgba(52, 152, 219, 0.1);
+    }
+
+    * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+    }
+
+    body {
+        font-family: 'Roboto', Arial, sans-serif;
+        background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
+        color: var(--dark-text);
+        line-height: 1.6;
+        padding: 15px;
+        min-height: 100vh;
+    }
+
+    .container {
+        max-width: 1200px;
+        margin: 0 auto;
+    }
+
+    header {
+        text-align: center;
+        margin-bottom: 25px;
+        padding: 20px;
+        background: white;
+        border-radius: 12px;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
+    }
+
+    h1 {
+        color: var(--primary-color);
+        font-size: 2.2rem;
+        font-weight: 700;
+        margin-bottom: 10px;
+        position: relative;
+        display: inline-block;
+    }
+
+    h1:after {
+        content: '';
+        position: absolute;
+        bottom: -5px;
+        left: 0;
+        width: 60px;
+        height: 3px;
+        background: var(--secondary-color);
+        border-radius: 3px;
+    }
+
+    .controls {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 15px;
+        margin-bottom: 20px;
+        justify-content: center;
+        background: white;
+        padding: 20px;
+        border-radius: 12px;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+    }
+
+    .control-group {
+        display: flex;
+        flex-direction: column;
+        min-width: 140px;
+    }
+
+    label {
+        font-weight: 500;
+        margin-bottom: 6px;
+        font-size: 0.9rem;
+        color: var(--light-text);
+    }
+
+    input, select {
+        padding: 10px 12px;
+        border: 1px solid var(--border-color);
+        border-radius: 8px;
+        font-size: 1rem;
+        background: #fafafa;
+        transition: all 0.3s ease;
+    }
+
+    input:focus, select:focus {
+        outline: none;
+        border-color: var(--secondary-color);
+        box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
+    }
+
+    /* Nová tlačítka Den+ a Den- */
+    .date-controls {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+    }
+
+    .date-btn {
+        background-color: var(--secondary-color);
+        color: white;
+        border: none;
+        border-radius: 8px;
+        padding: 10px 15px;
+        font-size: 1rem;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        min-width: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .date-btn:hover {
+        background-color: #2980b9;
+        transform: translateY(-2px);
+        box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3);
+    }
+
+    .filter-buttons {
+        display: flex;
+        justify-content: center;
+        gap: 10px;
+        margin: 15px 0;
+        flex-wrap: wrap;
+    }
+
+    .filter-btn {
+        padding: 10px 20px;
+        background: #f1f8ff;
+        color: var(--secondary-color);
+        border: 1px solid var(--secondary-color);
+        border-radius: 20px;
+        font-weight: 500;
+        transition: all 0.3s ease;
+        cursor: pointer;
+    }
+
+    .filter-btn:hover {
+        background: var(--secondary-color);
+        color: white;
+    }
+
+    .filter-btn.active {
+        background: var(--secondary-color);
+        color: white;
+        box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
+    }
+
+    .status-indicators {
+        display: flex;
+        justify-content: center;
+        gap: 15px;
+        margin: 15px 0;
+        flex-wrap: wrap;
+    }
+
+    .status-item {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+        font-size: 0.9rem;
+        padding: 6px 12px;
+        border-radius: 20px;
+        background: white;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+    }
+
+    .status-indicator {
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        display: inline-block;
+    }
+
+    .status-tv { background: var(--success-color); }
+    .status-live { background: var(--warning-color); }
+    .status-all { background: var(--secondary-color); }
+
+    #loading, #error {
+        text-align: center;
+        margin: 20px 0;
+        padding: 15px;
+        border-radius: 8px;
+        font-weight: 500;
+        display: none;
+    }
+
+    #loading {
+        background: rgba(52, 152, 219, 0.1);
+        color: var(--secondary-color);
+        display: block;
+    }
+
+    #error {
+        background: rgba(231, 76, 60, 0.1);
+        color: var(--accent-color);
+        display: block;
+    }
+
+    .table-container {
+        overflow-x: auto;
+        background: white;
+        border-radius: 12px;
+        box-shadow: 0 4px 15px rgba(0,0,0,0.08);
+        margin-bottom: 25px;
+        border: 1px solid var(--border-color);
+    }
+
+    table {
+        border-collapse: collapse;
+        width: 100%;
+        min-width: 700px;
+    }
+
+    /* Zcela tencí a jednoduché záhlaví tabulky */
+    th {
+        background-color: #2c3e50; /* Tmavě modrá - jedna barva */
+        color: white;
+        font-weight: 500;
+        padding: 14px 12px;
+        text-align: left;
+        position: sticky;
+        top: 0;
+        z-index: 10;
+        font-size: 0.95rem;
+        border: none;
+        /* Odstranění jakýchkoli gradientů nebo stínů */
+        box-shadow: none;
+    }
+
+    td {
+        padding: 14px 12px;
+        border-bottom: 1px solid var(--border-color);
+        font-size: 0.95rem;
+    }
+
+    tr:nth-child(even) {
+        background-color: #f8f9fa;
+    }
+
+    tr:hover {
+        background-color: #e3f2fd;
+        transform: translateY(-1px);
+        transition: all 0.2s ease;
+    }
+
+    tr.highlight {
+        background-color: #fff9c4 !important;
+        font-weight: 600;
+        box-shadow: 0 0 0 2px #fbc02d;
+    }
+
+    tr.nymburk {
+        background-color: #e3f2fd;
+    }
+
+    a {
+        color: var(--secondary-color);
+        text-decoration: none;
+        font-weight: 500;
+        transition: all 0.2s;
+        padding: 4px 8px;
+        border-radius: 4px;
+    }
+
+    a:hover {
+        background: rgba(52, 152, 219, 0.1);
+        text-decoration: underline;
+    }
+
+    .footer {
+        text-align: center;
+        padding: 25px 0;
+        color: var(--light-text);
+        font-size: 0.9rem;
+        border-top: 1px solid var(--border-color);
+        margin-top: 20px;
+    }
+
+    .match-time {
+        font-weight: 700;
+        color: var(--primary-color);
+    }
+
+    .team-name {
+        font-weight: 500;
+    }
+
+    .league-name {
+        font-weight: 500;
+        color: var(--secondary-color);
+    }
+
+    /* Responsive design */
+    @media (max-width: 768px) {
+        .controls {
+            flex-direction: column;
+            align-items: stretch;
+        }
+        
+        .control-group {
+            min-width: 100%;
+        }
+        
+        .filter-buttons {
+            flex-direction: column;
+            align-items: center;
+            gap: 10px;
+        }
+        
+        .filter-btn {
+            width: 100%;
+            max-width: 200px;
+        }
+        
+        h1 {
+            font-size: 1.8rem;
+        }
+        
+        th, td {
+            padding: 10px 8px;
+            font-size: 0.9rem;
+        }
+    }
+
+    @media (max-width: 480px) {
+        body {
+            padding: 10px;
+        }
+        
+        header {
+            padding: 15px;
+        }
+        
+        h1 {
+            font-size: 1.5rem;
+        }
+        
+        .controls {
+            padding: 15px;
+        }
+        
+        .status-indicators {
+            flex-direction: column;
+            align-items: center;
+        }
+    }
+
+    /* Animation */
+    @keyframes fadeIn {
+        from { opacity: 0; transform: translateY(10px); }
+        to { opacity: 1; transform: translateY(0); }
+    }
+
+    .fade-in {
+        animation: fadeIn 0.3s ease-out;
+    }
 </style>
 </head>
 <body>
-<h1>CZ.Basketball – zápasy</h1>
+<div class="container">
+    <header>
+        <h1>CZ.Basketball – zápasy</h1>
+        <p>Nejnovější zápasy a streamy</p>
+    </header>
 
-<div class="controls">
-    <label for="date">Datum:</label>
-    <input type="date" id="date" onchange="loadMatches()"/>
-    <label for="league">Liga:</label>
-    <select id="league" onchange="filterMatches()">
-        <option value="">Všechny ligy</option>
-    </select>
-</div>
+    <div class="controls">
+        <div class="control-group">
+            <label for="date">Datum:</label>
+            <input type="date" id="date" onchange="loadMatches()"/>
+        </div>
+        
+        <div class="control-group">
+            <label for="league">Liga:</label>
+            <select id="league" onchange="filterMatches()">
+                <option value="">Všechny ligy</option>
+            </select>
+        </div>
+        
+		<div class="control-group">
+		    <label for="league">Procházet:</label>
+	        <div class="date-controls">
+	            <button class="date-btn" onclick="changeDate(-1)">← Den</button>
+	            <button class="date-btn" onclick="setToday()">Dnes</button>
+	            <button class="date-btn" onclick="changeDate(1)">Den →</button>
+	        </div>
+		</div>
+    </div>
 
-<div class="radio-group">
-    <label><input type="radio" name="tvfilter" value="tv" checked>TV stream</label>
-    <label><input type="radio" name="tvfilter" value="live">Live Score</label>
-    <label><input type="radio" name="tvfilter" value="all">Všechny zápasy</label>
-</div>
+    <div class="filter-buttons">
+        <button class="filter-btn active" onclick="setFilter('tv')">TV stream</button>
+        <button class="filter-btn" onclick="setFilter('live')">Live Score</button>
+        <button class="filter-btn" onclick="setFilter('all')">Všechny zápasy</button>
+    </div>
 
-<div id="loading" style="display:none;">🔄 Načítám zápasy...</div>
-<div id="error" style="display:none;">❌ Nepodařilo se načíst data.</div>
+    <div id="loading">🔄 Načítám zápasy...</div>
+    <div id="error">❌ Nepodařilo se načíst data.</div>
 
-<div class="table-container">
-<table id="matches">
-<thead>
-<tr>
-<th>Čas</th>
-<th>Liga</th>
-<th>Domácí</th>
-<th>Hosté</th>
-<th>Preview</th>
-<th>Live</th>
-<th>TV</th>
-</tr>
-</thead>
-<tbody></tbody>
-</table>
-</div>
+    <div class="table-container">
+        <table id="matches">
+            <thead>
+                <tr>
+                    <th>Čas</th>
+                    <th>Liga</th>
+                    <th>Domácí</th>
+                    <th>Hosté</th>
+                    <th>Preview</th>
+                    <th>Live</th>
+                    <th>TV</th>
+                </tr>
+            </thead>
+            <tbody></tbody>
+        </table>
+    </div>
 
-<div class="footer">
-    v${version} &copy; 2025 kAmMa. All rights reserved.
+    <div class="footer">
+        v${version} &copy; 2025 kAmMa. All rights reserved.
+    </div>
 </div>
 
 <script>
 let allMatchesGlobal = [];
+let currentFilter = 'tv';
 
 window.addEventListener('DOMContentLoaded', () => {
     const today = new Date();
@@ -166,6 +453,42 @@ window.addEventListener('DOMContentLoaded', () => {
     loadMatches();
 });
 
+function changeDate(days) {
+    const dateInput = document.getElementById('date');
+    const currentDate = new Date(dateInput.value);
+    currentDate.setDate(currentDate.getDate() + days);
+    
+    const yyyy = currentDate.getFullYear();
+    const mm = String(currentDate.getMonth() + 1).padStart(2, '0');
+    const dd = String(currentDate.getDate()).padStart(2, '0');
+    dateInput.value = `${yyyy}-${mm}-${dd}`;
+    
+    loadMatches();
+}
+
+function setToday() {
+    const today = new Date();
+    const yyyy = today.getFullYear();
+    const mm = String(today.getMonth() + 1).padStart(2, '0');
+    const dd = String(today.getDate()).padStart(2, '0');
+    
+    document.getElementById('date').value = `${yyyy}-${mm}-${dd}`;
+    loadMatches();
+}
+
+function setFilter(filterType) {
+    currentFilter = filterType;
+    
+    // Aktualizuj aktivní tlačítko
+    document.querySelectorAll('.filter-btn').forEach(btn => {
+        btn.classList.remove('active');
+    });
+    
+    event.target.classList.add('active');
+    
+    renderMatches(allMatchesGlobal);
+}
+
 async function loadMatches() {
     const loadingEl = document.getElementById('loading');
     const errorEl = document.getElementById('error');
@@ -205,12 +528,11 @@ function renderMatches(matches) {
     tbody.innerHTML = '';
     select.innerHTML = '<option value="">Všechny ligy</option>';
 
-    const tvFilter = document.querySelector('input[name="tvfilter"]:checked').value;
     const filteredMatches = matches.filter(m => {
         const hasTV = m.match.links.tvcom && m.match.links.tvcom.url;
         const hasLive = m.match.links.live && m.match.links.live.url;
-        if(tvFilter === 'tv') return !!hasTV;
-        if(tvFilter === 'live') return !!hasLive;
+        if(currentFilter === 'tv') return !!hasTV;
+        if(currentFilter === 'live') return !!hasLive;
         return true;
     });
 
@@ -238,6 +560,7 @@ function renderMatches(matches) {
     filteredMatches.forEach(({league, match}) => {
         const tr = document.createElement('tr');
         tr.dataset.league = league;
+        tr.className = 'fade-in';
 
         let previewUrl = '';
         if(match.links.preview && match.links.preview.url){
@@ -261,10 +584,10 @@ function renderMatches(matches) {
         const liveUrl = match.links.live && match.links.live.url;
 
         tr.innerHTML = `
-            <td>${match.status}</td>
-            <td>${league}</td>
-            <td>${match.home.name}</td>
-            <td>${match.away.name}</td>
+            <td class="match-time">${match.status}</td>
+            <td class="league-name">${league}</td>
+            <td class="team-name">${match.home.name}</td>
+            <td class="team-name">${match.away.name}</td>
             <td>${previewUrl ? '<a href="'+previewUrl+'" target="_blank">Preview</a>' : ''}</td>
             <td>${liveUrl ? '<a href="'+liveUrl+'" target="_blank">Live</a>' : ''}</td>
             <td>${tvUrl ? '<a href="'+tvUrl+'" target="_blank">TV</a>' : ''}</td>
@@ -298,12 +621,6 @@ function filterMatches() {
         row.style.display = (!league || row.dataset.league===league) ? '' : 'none';
     });
 }
-
-document.querySelectorAll('input[name="tvfilter"]').forEach(radio => {
-    radio.addEventListener('change', () => {
-        renderMatches(allMatchesGlobal);
-    });
-});
 </script>
 </body>
-</html>
+</html>
\ No newline at end of file