Spaces:
Running
Running
| <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: 0; | |
| padding: 20px; | |
| background-color: #f4f4f9; | |
| color: #333; | |
| } | |
| h1 { | |
| text-align: center; | |
| color: #2c3e50; | |
| } | |
| .search-container { | |
| text-align: center; | |
| margin: 20px 0; | |
| } | |
| .search-bar { | |
| width: 50%; | |
| padding: 12px; | |
| font-size: 16px; | |
| border: 2px solid #3498db; | |
| border-radius: 25px; | |
| box-shadow: 0 2px 5px rgba(0,0,0,0.1); | |
| outline: none; | |
| transition: border-color 0.3s; | |
| } | |
| .search-bar:focus { | |
| border-color: #2980b9; | |
| } | |
| .category-section { | |
| margin: 30px 0; | |
| } | |
| .category-title { | |
| background-color: #3498db; | |
| color: white; | |
| padding: 10px; | |
| border-radius: 5px; | |
| font-size: 1.4em; | |
| } | |
| .article { | |
| background-color: white; | |
| padding: 15px; | |
| margin: 10px 0; | |
| border-radius: 8px; | |
| box-shadow: 0 2px 5px rgba(0,0,0,0.1); | |
| transition: transform 0.2s; | |
| } | |
| .article:hover { | |
| transform: translateY(-3px); | |
| } | |
| .title a { | |
| font-size: 1.2em; | |
| color: #2c3e50; | |
| text-decoration: none; | |
| } | |
| .title a:hover { | |
| color: #3498db; | |
| } | |
| .summary { | |
| color: #555; | |
| margin: 5px 0; | |
| } | |
| .sentiment { | |
| font-style: italic; | |
| color: #7f8c8d; | |
| } | |
| .published { | |
| font-size: 0.9em; | |
| color: #95a5a6; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>News Feed Hub</h1> | |
| <div class="search-container"> | |
| <form method="POST"> | |
| <input type="text" name="search" class="search-bar" placeholder="Search news semantically..."> | |
| </form> | |
| </div> | |
| {% for category, articles in categorized_articles.items() %} | |
| <div class="category-section"> | |
| <div class="category-title">{{ category }}</div> | |
| {% for article in articles %} | |
| <div class="article"> | |
| <div class="title"><a href="{{ article.link }}" target="_blank">{{ article.title }}</a></div> | |
| <div class="summary">{{ article.summary }}</div> | |
| <div class="sentiment">Sentiment: {{ article.sentiment }}</div> | |
| <div class="published">Published: {{ article.published }}</div> | |
| </div> | |
| {% endfor %} | |
| </div> | |
| {% endfor %} | |
| </body> | |
| </html> |