Update index.html
Browse files- index.html +59 -0
index.html
CHANGED
|
@@ -13,6 +13,15 @@
|
|
| 13 |
color: #333;
|
| 14 |
}
|
| 15 |
.container { max-width: 900px; margin: 0 auto; }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 16 |
|
| 17 |
.search-container {
|
| 18 |
position: relative;
|
|
@@ -55,6 +64,22 @@
|
|
| 55 |
.search-result .name { font-weight: 600; }
|
| 56 |
.search-result .type { font-size: 12px; color: #888; }
|
| 57 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 58 |
.status-bar {
|
| 59 |
text-align: center;
|
| 60 |
padding: 10px;
|
|
@@ -210,6 +235,7 @@
|
|
| 210 |
}
|
| 211 |
|
| 212 |
@media (max-width: 600px) {
|
|
|
|
| 213 |
.controls { flex-direction: column; align-items: stretch; }
|
| 214 |
.tab-buttons { margin-left: 0; justify-content: center; }
|
| 215 |
}
|
|
@@ -217,6 +243,11 @@
|
|
| 217 |
</head>
|
| 218 |
<body>
|
| 219 |
<div class="container">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 220 |
<div class="search-container">
|
| 221 |
<input type="text" class="search-input" id="searchInput" placeholder="Search players or teams...">
|
| 222 |
<div class="search-results" id="searchResults"></div>
|
|
@@ -224,6 +255,25 @@
|
|
| 224 |
|
| 225 |
<div id="statusBar" class="status-bar">Loading...</div>
|
| 226 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 227 |
<div class="controls">
|
| 228 |
<div class="control-group">
|
| 229 |
<label>Time:</label>
|
|
@@ -346,6 +396,15 @@
|
|
| 346 |
const res = await fetch('/api/status');
|
| 347 |
const data = await res.json();
|
| 348 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 349 |
const statusBar = document.getElementById('statusBar');
|
| 350 |
if (data.is_fetching) {
|
| 351 |
statusBar.className = 'status-bar fetching';
|
|
|
|
| 13 |
color: #333;
|
| 14 |
}
|
| 15 |
.container { max-width: 900px; margin: 0 auto; }
|
| 16 |
+
.header {
|
| 17 |
+
text-align: center;
|
| 18 |
+
margin-bottom: 25px;
|
| 19 |
+
padding-bottom: 20px;
|
| 20 |
+
border-bottom: 3px solid #f97316;
|
| 21 |
+
}
|
| 22 |
+
.header h1 { font-size: 32px; color: #2c3e50; margin-bottom: 8px; }
|
| 23 |
+
.header h1 span { color: #f97316; }
|
| 24 |
+
.header p { color: #7f8c8d; font-size: 15px; }
|
| 25 |
|
| 26 |
.search-container {
|
| 27 |
position: relative;
|
|
|
|
| 64 |
.search-result .name { font-weight: 600; }
|
| 65 |
.search-result .type { font-size: 12px; color: #888; }
|
| 66 |
|
| 67 |
+
.stats-banner {
|
| 68 |
+
display: grid;
|
| 69 |
+
grid-template-columns: repeat(4, 1fr);
|
| 70 |
+
gap: 15px;
|
| 71 |
+
margin-bottom: 20px;
|
| 72 |
+
}
|
| 73 |
+
.stat-box {
|
| 74 |
+
text-align: center;
|
| 75 |
+
padding: 15px;
|
| 76 |
+
background: white;
|
| 77 |
+
border-radius: 8px;
|
| 78 |
+
box-shadow: 0 2px 4px rgba(0,0,0,0.08);
|
| 79 |
+
}
|
| 80 |
+
.stat-box .number { font-size: 24px; font-weight: bold; color: #f97316; }
|
| 81 |
+
.stat-box .label { font-size: 11px; color: #7f8c8d; margin-top: 5px; text-transform: uppercase; }
|
| 82 |
+
|
| 83 |
.status-bar {
|
| 84 |
text-align: center;
|
| 85 |
padding: 10px;
|
|
|
|
| 235 |
}
|
| 236 |
|
| 237 |
@media (max-width: 600px) {
|
| 238 |
+
.stats-banner { grid-template-columns: repeat(2, 1fr); }
|
| 239 |
.controls { flex-direction: column; align-items: stretch; }
|
| 240 |
.tab-buttons { margin-left: 0; justify-content: center; }
|
| 241 |
}
|
|
|
|
| 243 |
</head>
|
| 244 |
<body>
|
| 245 |
<div class="container">
|
| 246 |
+
<div class="header">
|
| 247 |
+
<h1>🏀 NBA <span>Buzz</span></h1>
|
| 248 |
+
<p>Real-time player mentions from Bluesky</p>
|
| 249 |
+
</div>
|
| 250 |
+
|
| 251 |
<div class="search-container">
|
| 252 |
<input type="text" class="search-input" id="searchInput" placeholder="Search players or teams...">
|
| 253 |
<div class="search-results" id="searchResults"></div>
|
|
|
|
| 255 |
|
| 256 |
<div id="statusBar" class="status-bar">Loading...</div>
|
| 257 |
|
| 258 |
+
<div class="stats-banner">
|
| 259 |
+
<div class="stat-box">
|
| 260 |
+
<div class="number" id="statPosts">-</div>
|
| 261 |
+
<div class="label">Posts</div>
|
| 262 |
+
</div>
|
| 263 |
+
<div class="stat-box">
|
| 264 |
+
<div class="number" id="statMentions">-</div>
|
| 265 |
+
<div class="label">Mentions</div>
|
| 266 |
+
</div>
|
| 267 |
+
<div class="stat-box">
|
| 268 |
+
<div class="number" id="statPlayers">-</div>
|
| 269 |
+
<div class="label">Players</div>
|
| 270 |
+
</div>
|
| 271 |
+
<div class="stat-box">
|
| 272 |
+
<div class="number" id="statUpdated">-</div>
|
| 273 |
+
<div class="label">Updated</div>
|
| 274 |
+
</div>
|
| 275 |
+
</div>
|
| 276 |
+
|
| 277 |
<div class="controls">
|
| 278 |
<div class="control-group">
|
| 279 |
<label>Time:</label>
|
|
|
|
| 396 |
const res = await fetch('/api/status');
|
| 397 |
const data = await res.json();
|
| 398 |
|
| 399 |
+
document.getElementById('statPosts').textContent = data.total_posts.toLocaleString();
|
| 400 |
+
document.getElementById('statMentions').textContent = data.total_mentions.toLocaleString();
|
| 401 |
+
document.getElementById('statPlayers').textContent = data.unique_players;
|
| 402 |
+
|
| 403 |
+
if (data.last_update) {
|
| 404 |
+
const d = new Date(data.last_update);
|
| 405 |
+
document.getElementById('statUpdated').textContent = d.toLocaleTimeString('en-US', {hour: '2-digit', minute: '2-digit'});
|
| 406 |
+
}
|
| 407 |
+
|
| 408 |
const statusBar = document.getElementById('statusBar');
|
| 409 |
if (data.is_fetching) {
|
| 410 |
statusBar.className = 'status-bar fetching';
|