Skip to content

Commit cf9691b

Browse files
medivhcmedivhc
committed
Add news recommendation Web App - index.html
1 parent 7c28d63 commit cf9691b

1 file changed

Lines changed: 69 additions & 0 deletions

File tree

‎news-recommend/index.html‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!DOCTYPE html>
2+
<html lang="zh-CN">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>新闻推荐</title>
7+
<script src="https://telegram.org/js/telegram-web-app.js"></script>
8+
<style>
9+
* { margin: 0; padding: 0; box-sizing: border-box; }
10+
html, body { width: 100%; height: 100%; background: #0a0a0f; font-family: -apple-system, BlinkMacSystemFont, sans-serif; color: #fff; overflow-y: auto; }
11+
.container { max-width: 600px; margin: 0 auto; padding: 16px; padding-bottom: 100px; }
12+
.header { text-align: center; padding: 20px 0; border-bottom: 1px solid #333; margin-bottom: 20px; }
13+
.header h1 { font-size: 24px; color: #00ff88; margin-bottom: 8px; }
14+
.header p { font-size: 14px; color: #888; }
15+
.category-filter { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0; margin-bottom: 20px; }
16+
.category-btn { flex-shrink: 0; padding: 8px 16px; background: #1a1a2e; border: 1px solid #333; border-radius: 20px; color: #fff; font-size: 13px; cursor: pointer; }
17+
.category-btn.active { background: #00ff88; color: #000; border-color: #00ff88; }
18+
.news-list { display: flex; flex-direction: column; gap: 12px; }
19+
.news-item { background: #1a1a2e; border: 1px solid #333; border-radius: 12px; padding: 16px; display: flex; gap: 12px; align-items: flex-start; }
20+
.news-item.selected { border-color: #00ff88; background: rgba(0, 255, 136, 0.1); }
21+
.news-checkbox { width: 24px; height: 24px; border: 2px solid #444; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; }
22+
.news-checkbox.checked { background: #00ff88; border-color: #00ff88; }
23+
.news-checkbox.checked::after { content: "✓"; color: #000; font-weight: bold; font-size: 16px; }
24+
.news-content { flex: 1; min-width: 0; }
25+
.news-title { font-size: 15px; font-weight: 500; margin-bottom: 8px; line-height: 1.4; }
26+
.news-meta { display: flex; gap: 12px; font-size: 12px; color: #888; }
27+
.news-source { color: #00ff88; }
28+
.news-tag { background: #333; padding: 2px 8px; border-radius: 4px; font-size: 11px; }
29+
.submit-bar { position: fixed; bottom: 0; left: 0; right: 0; background: #1a1a2e; border-top: 1px solid #333; padding: 16px; display: flex; justify-content: space-between; align-items: center; z-index: 100; }
30+
.selected-count { font-size: 14px; color: #888; }
31+
.selected-count span { color: #00ff88; font-weight: bold; }
32+
.submit-btn { background: #00ff88; color: #000; border: none; padding: 12px 32px; border-radius: 24px; font-size: 15px; font-weight: 600; cursor: pointer; }
33+
.submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }
34+
</style>
35+
</head>
36+
<body>
37+
<div class="container">
38+
<div class="header">
39+
<h1>📰 新闻推荐</h1>
40+
<p>选择你感兴趣的新闻，获取个性化推荐</p>
41+
</div>
42+
<div class="category-filter" id="categoryFilter">
43+
<button class="category-btn active" data-category="all">全部</button>
44+
<button class="category-btn" data-category="ai">AI</button>
45+
<button class="category-btn" data-category="tech">科技</button>
46+
<button class="category-btn" data-category="finance">财经</button>
47+
<button class="category-btn" data-category="world">国际</button>
48+
<button class="category-btn" data-category="china">国内</button>
49+
</div>
50+
<div class="news-list" id="newsList"></div>
51+
</div>
52+
<div class="submit-bar">
53+
<div class="selected-count">已选择 <span id="selectedCount">0</span> 条</div>
54+
<button class="submit-btn" id="submitBtn" disabled>提交选择</button>
55+
</div>
56+
<script>
57+
const tg = window.Telegram.WebApp;
58+
tg.ready();
59+
let newsData = [], selectedIds = new Set(), currentCategory = 'all';
60+
async function loadNews() { const res = await fetch('news-data.json'); newsData = await res.json(); renderNews(); }
61+
function renderNews() { const filtered = currentCategory === 'all' ? newsData : newsData.filter(n => n.category === currentCategory); document.getElementById('newsList').innerHTML = filtered.map(news => `<div class="news-item ${selectedIds.has(news.id) ? 'selected' : ''}" data-id="${news.id}"><div class="news-checkbox ${selectedIds.has(news.id) ? 'checked' : ''}" onclick="toggleSelect('${news.id}')"></div><div class="news-content"><div class="news-title">${news.title}</div><div class="news-meta"><span class="news-source">${news.source}</span><span class="news-tag">${news.category.toUpperCase()}</span><span>${news.time_display||''}</span></div></div></div>`).join(''); }
62+
function toggleSelect(id) { selectedIds.has(id) ? selectedIds.delete(id) : selectedIds.add(id); renderNews(); updateSubmitBar(); }
63+
function updateSubmitBar() { document.getElementById('selectedCount').textContent = selectedIds.size; document.getElementById('submitBtn').disabled = selectedIds.size === 0; }
64+
document.getElementById('submitBtn').addEventListener('click', () => { const selected = newsData.filter(n => selectedIds.has(n.id)); tg.sendData(JSON.stringify({ type: 'news_selection', selected: selected.map(n => ({ id: n.id, title: n.title, category: n.category })) })); });
65+
document.getElementById('categoryFilter').addEventListener('click', e => { if (e.target.classList.contains('category-btn')) { document.querySelectorAll('.category-btn').forEach(b => b.classList.remove('active')); e.target.classList.add('active'); currentCategory = e.target.dataset.category; renderNews(); } });
66+
loadNews();
67+
</script>
68+
</body>
69+
</html>

0 commit comments

Comments
 (0)