kamma/cz-basketball-scraper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dark green UI

Browse Source
This commit is contained in:
Radek Davidek 2025-11-16 10:13:51 +01:00
parent c844c99673
commit 55174136bb
1 changed files with 276 additions and 335 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

317
src/main/resources/index.html
View File

@ -5,38 +5,27 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CZ.Basketball - zápasy</title> <title>CZ.Basketball - zápasy</title>
<link rel="icon" type="image/png" href="https://cz.basketball/img/logo-icon.png"> <link rel="icon" type="image/png" href="https://cz.basketball/img/logo-icon.png">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<style> <style>
: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 { body {
font-family: 'Roboto', Arial, sans-serif; font-family: system-ui, -apple-system, sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%); margin: 0;
color: var(--dark-text); padding: 10px;
line-height: 1.6; background: #1a1a1a;
padding: 15px; color: #e0e0e0;
min-height: 100vh; min-height: 100vh;
font-size: 13px;
}
h1 {
text-align: center;
margin-bottom: 20px;
color: #4ade80;
font-size: 1.8rem;
text-shadow: 0 2px 8px rgba(74, 222, 128, 0.3);
} }
.container { .container {
max-width: 1200px; max-width: 1400px;
margin: 0 auto; margin: 0 auto;
} }
@ -44,41 +33,19 @@
text-align: center; text-align: center;
margin-bottom: 25px; margin-bottom: 25px;
padding: 20px; 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 { .controls {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 15px;
margin-bottom: 20px;
justify-content: center; justify-content: center;
background: white; gap: 10px;
padding: 20px; padding: 15px;
border-radius: 12px; background: #2a2a2a;
box-shadow: 0 2px 8px rgba(0,0,0,0.05); border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.5);
margin-bottom: 15px;
border: 1px solid #3a3a3a;
} }
.control-group { .control-group {
@ -91,25 +58,26 @@
font-weight: 500; font-weight: 500;
margin-bottom: 6px; margin-bottom: 6px;
font-size: 0.9rem; font-size: 0.9rem;
color: var(--light-text); color: #a0a0a0;
} }
input, select { input, select {
padding: 10px 12px; padding: 8px 14px;
border: 1px solid var(--border-color); font-size: 13px;
border-radius: 8px; border: 1px solid #4ade80;
font-size: 1rem; border-radius: 6px;
background: #fafafa; cursor: pointer;
transition: all 0.3s ease; background: #2a2a2a;
color: #e0e0e0;
transition: all 0.2s;
} }
input:focus, select:focus { input:focus, select:focus {
outline: none; outline: none;
border-color: var(--secondary-color); border-color: #4ade80;
box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2); box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.2);
} }
/* Nová tlačítka Den+ a Den- */
.date-controls { .date-controls {
display: flex; display: flex;
align-items: center; align-items: center;
@ -117,15 +85,15 @@
} }
.date-btn { .date-btn {
background-color: var(--secondary-color); background: #2a2a2a;
color: white; color: #e0e0e0;
border: none; border: 1px solid #4ade80;
border-radius: 8px; border-radius: 6px;
padding: 10px 15px; padding: 8px 14px;
font-size: 1rem; font-size: 13px;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.2s;
min-width: 40px; min-width: 40px;
display: flex; display: flex;
align-items: center; align-items: center;
@ -133,71 +101,46 @@
} }
.date-btn:hover { .date-btn:hover {
background-color: #2980b9; background: #3a3a3a;
transform: translateY(-2px); border-color: #4ade80;
box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3);
} }
.filter-buttons { .filter-buttons {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 10px; gap: 8px;
margin: 15px 0; margin-bottom: 15px;
padding: 12px;
background: #2a2a2a;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.5);
border: 1px solid #3a3a3a;
flex-wrap: wrap; flex-wrap: wrap;
} }
.filter-btn { .filter-btn {
padding: 10px 20px; background: #2a2a2a;
background: #f1f8ff; border: 1px solid #4ade80;
color: var(--secondary-color); color: #e0e0e0;
border: 1px solid var(--secondary-color); padding: 6px 12px;
border-radius: 20px; border-radius: 6px;
transition: all 0.2s;
font-weight: 500; font-weight: 500;
transition: all 0.3s ease; font-size: 12px;
cursor: pointer; cursor: pointer;
} }
.filter-btn:hover { .filter-btn:hover {
background: var(--secondary-color); background: #3a3a3a;
color: white; border-color: #4ade80;
} }
.filter-btn.active { .filter-btn.active {
background: var(--secondary-color); background: #4ade80;
color: white; color: #1a1a1a;
box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3); box-shadow: 0 0 10px rgba(74, 222, 128, 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 { #loading, #error {
text-align: center; text-align: center;
margin: 20px 0; margin: 20px 0;
@ -205,27 +148,27 @@
border-radius: 8px; border-radius: 8px;
font-weight: 500; font-weight: 500;
display: none; display: none;
color: #4ade80;
} }
#loading { #loading {
background: rgba(52, 152, 219, 0.1);
color: var(--secondary-color);
display: block; display: block;
} }
#error { #error {
background: rgba(231, 76, 60, 0.1); color: #ef4444;
color: var(--accent-color);
display: block;
} }
.table-container { .table-container {
background: #2a2a2a;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.5);
overflow: hidden;
margin: 0 auto;
max-width: 1400px;
width: 100%;
border: 1px solid #3a3a3a;
overflow-x: auto; 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 { table {
@ -234,87 +177,96 @@
min-width: 700px; min-width: 700px;
} }
/* Zcela tencí a jednoduché záhlaví tabulky */ thead {
background: #4ade80;
color: #1a1a1a;
}
th { th {
background-color: #2c3e50; /* Tmavě modrá - jedna barva */ padding: 10px 12px;
color: white;
font-weight: 500;
padding: 14px 12px;
text-align: left; text-align: left;
font-weight: 600;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 10; z-index: 10;
font-size: 0.95rem;
border: none;
/* Odstranění jakýchkoli gradientů nebo stínů */
box-shadow: none;
} }
td { td {
padding: 14px 12px; padding: 10px 12px;
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid #3a3a3a;
font-size: 0.95rem; font-size: 12px;
} }
tr:nth-child(even) { tbody tr {
background-color: #f8f9fa; transition: background-color 0.2s;
} }
tr:hover { tbody tr:hover {
background-color: #e3f2fd; background: rgba(74, 222, 128, 0.1);
transform: translateY(-1px); }
transition: all 0.2s ease;
tbody tr:last-child td {
border-bottom: none;
} }
tr.highlight { tr.highlight {
background-color: #fff9c4 !important; background-color: rgba(251, 191, 36, 0.2) !important;
font-weight: 600; font-weight: 600;
box-shadow: 0 0 0 2px #fbc02d;
} }
tr.nymburk { tr.nymburk {
background-color: #e3f2fd; background-color: rgba(74, 222, 128, 0.05);
} }
a { a {
color: var(--secondary-color); color: #4ade80;
text-decoration: none; text-decoration: none;
font-weight: 500; transition: color 0.2s;
transition: all 0.2s;
padding: 4px 8px;
border-radius: 4px;
} }
a:hover { a:hover {
background: rgba(52, 152, 219, 0.1); color: #6ee7a7;
text-decoration: underline; text-decoration: underline;
} }
.footer { .footer {
text-align: center; text-align: center;
padding: 25px 0; padding: 25px 0;
color: var(--light-text); color: #808080;
font-size: 0.9rem; font-size: 0.9rem;
border-top: 1px solid var(--border-color);
margin-top: 20px; margin-top: 20px;
} }
.match-time { .match-time {
font-weight: 700; font-weight: 700;
color: var(--primary-color); color: #e0e0e0;
white-space: nowrap;
} }
.team-name { .team-name {
font-weight: 500; font-weight: 500;
color: #e0e0e0;
} }
.league-name { .league-name {
font-weight: 500; font-weight: 500;
color: var(--secondary-color); color: #4ade80;
} }
/* Responsive design */ /* Responsive design */
@media (max-width: 768px) { @media (max-width: 768px) {
th, td {
padding: 8px 6px;
font-size: 11px;
}
h1 {
font-size: 1.5rem;
}
.controls { .controls {
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
@ -323,26 +275,6 @@
.control-group { .control-group {
min-width: 100%; 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) { @media (max-width: 480px) {
@ -361,11 +293,6 @@
.controls { .controls {
padding: 15px; padding: 15px;
} }
.status-indicators {
flex-direction: column;
align-items: center;
}
} }
/* Animation */ /* Animation */
@ -377,13 +304,27 @@
.fade-in { .fade-in {
animation: fadeIn 0.3s ease-out; animation: fadeIn 0.3s ease-out;
} }
.loading-spinner {
border: 4px solid #3a3a3a;
border-radius: 50%;
border-top: 4px solid #4ade80;
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
margin: 20px auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style> </style>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<header> <header>
<h1>CZ.Basketball – zápasy</h1> <h1>🏀 CZ.Basketball – zápasy</h1>
<p>Nejnovější zápasy a streamy</p>
</header> </header>
<div class="controls"> <div class="controls">
@ -423,9 +364,9 @@
<thead> <thead>
<tr> <tr>
<th>Čas</th> <th>Čas</th>
<th>Liga</th>
<th>Domácí</th> <th>Domácí</th>
<th>Hosté</th> <th>Hosté</th>
<th>Liga</th>
<th>Preview</th> <th>Preview</th>
<th>Live</th> <th>Live</th>
<th>TV</th> <th>TV</th>
@ -585,9 +526,9 @@ function renderMatches(matches) {
tr.innerHTML = ` tr.innerHTML = `
<td class="match-time">${match.status}</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.home.name}</td>
<td class="team-name">${match.away.name}</td> <td class="team-name">${match.away.name}</td>
<td class="league-name">${league}</td>
<td>${previewUrl ? '<a href="'+previewUrl+'" target="_blank">Preview</a>' : ''}</td> <td>${previewUrl ? '<a href="'+previewUrl+'" target="_blank">Preview</a>' : ''}</td>
<td>${liveUrl ? '<a href="'+liveUrl+'" target="_blank">Live</a>' : ''}</td> <td>${liveUrl ? '<a href="'+liveUrl+'" target="_blank">Live</a>' : ''}</td>
<td>${tvUrl ? '<a href="'+tvUrl+'" target="_blank">TV</a>' : ''}</td> <td>${tvUrl ? '<a href="'+tvUrl+'" target="_blank">TV</a>' : ''}</td>