Spaces:
Running
Running
File size: 2,883 Bytes
cf1fb4e 7e454f3 40c26bb 7e454f3 40c26bb 6c20801 7e454f3 6c20801 40c26bb 6c20801 7e454f3 6c20801 40c26bb |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>News Feed Hub</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; background-color: #f5f5f5; color: #333; }
h1 { text-align: center; color: #2c3e50; }
.search-container { text-align: center; margin: 20px 0; }
.search-bar { width: 50%; padding: 10px; border: 2px solid #3498db; border-radius: 25px; }
.category-section { margin: 20px 0; }
.category-title { background-color: #3498db; color: white; padding: 10px; border-radius: 5px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.article-tile { background: white; padding: 15px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.article-tile img, .article-tile svg { width: 100%; height: 150px; object-fit: cover; border-radius: 5px; }
.title a { font-size: 1.1em; color: #2c3e50; text-decoration: none; }
.title a:hover { color: #3498db; }
.description { color: #555; font-size: 0.9em; }
.published { font-size: 0.8em; color: #95a5a6; }
.no-articles { text-align: center; color: #2c3e50; margin-top: 20px; }
</style>
</head>
<body>
<h1>News Feed Hub</h1>
<div class="search-container">
<form method="POST" action="/search">
<input type="text" name="search" class="search-bar" placeholder="Search news...">
</form>
</div>
{% if has_articles %}
{% for category, articles in categorized_articles.items() %}
<div class="category-section">
<div class="category-title">{{ category }}</div>
<div class="tiles">
{% for article in articles %}
<div class="article-tile">
{% if article.image != "svg" %}
<img src="{{ article.image }}" alt="Article Image">
{% else %}
<svg width="100%" height="150" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="#e0e0e0"/>
<text x="50%" y="50%" text-anchor="middle" dy=".3em" fill="#666">No Image</text>
</svg>
{% endif %}
<div class="title"><a href="{{ article.link }}" target="_blank">{{ article.title }}</a></div>
<div class="description">{{ article.description }}</div>
<div class="published">Published: {{ article.published }}</div>
</div>
{% endfor %}
</div>
</div>
{% endfor %}
{% else %}
<div class="no-articles">No articles available yet. Try refreshing the page.</div>
{% endif %}
</body>
</html> |