News-search / templates /news.html
Aarifkhan's picture
Update templates/news.html
0eef55b verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>InfoHive - News Search</title>
<meta name="description" content="InfoHive is a news search engine that provides the latest updates on technology, sports, and more.">
<meta property="og:title" content="InfoHive - News Search">
<meta property="og:description" content="InfoHive is a news search engine that provides the latest updates on technology, sports, and more.">
<meta property="og:image" content="https://raw.githubusercontent.com/OE-LUCIFER/HelpingAI-vortex3b/main/techscout.jpeg">
<meta property="og:url" content="https://abhaukoul-techscout-news.hf.space/">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<style>
body {
font-family: sans-serif;
margin: 0;
background: #000;
color: #fff;
}
.container {
padding-top: 50px;
}
.jumbotron {
background-color: #007bff;
color: #fff;
padding: 2rem 2rem;
margin-bottom: 30px;
}
.card {
border: none;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: transform 0.3s;
}
.card:hover {
transform: translateY(-5px);
}
.card-title {
font-size: 20px;
font-weight: bold;
color: #333;
}
.card-text {
color: #666;
}
.card-footer {
background-color: #f9f9f9;
border-top: none;
}
.btn-primary {
background-color: #007bff;
border-color: #007bff;
}
.btn-primary:hover {
background-color: #0056b3;
border-color: #0056b3;
}
.btn-outline-primary {
color: #007bff;
border-color: #007bff;
}
.btn-outline-primary:hover {
background-color: #007bff;
color: #fff;
}
.no-results {
text-align: center;
font-style: italic;
margin-top: 20px;
}
.search-input {
border-radius: 24px;
}
.logo {
max-width: 200px;
}
.subscribe-btn {
background-color: #ff0000;
border-color: #ff0000;
}
.subscribe-btn:hover {
background-color: #cc0000;
border-color: #cc0000;
}
</style>
</head>
<body>
<div class="container">
<div class="jumbotron" style="margin-top: 100px;">
<h1 class="display-4 text-center mb-4">Explore the Latest News</h1>
<p class="lead text-center">InfoHive is your source for up-to-date news on technology, sports, and more.</p>
<div class="text-center">
<a href="https://youtube.com/@OEvortex" class="btn btn-primary subscribe-btn" target="_blank">Subscribe to OEvortex on YouTube</a>
</div>
</div>
<div class="card mb-4">
<div class="card-body">
<form method="GET" action="/">
<div class="form-row">
<div class="col-md-8">
<input type="text" class="form-control search-input" name="keywords" placeholder="Enter keywords" value="{{ keywords }}">
</div>
<div class="col-md-2">
<select name="timelimit" class="form-control search-input">
<option value="d" {% if timelimit == 'd' %}selected{% endif %}>Day</option>
<option value="w" {% if timelimit == 'w' %}selected{% endif %}>Week</option>
<option value="m" {% if timelimit == 'm' %}selected{% endif %}>Month</option>
</select>
</div>
<div class="col-md-2">
<button type="submit" class="btn btn-primary btn-block">Search</button>
</div>
</div>
</form>
</div>
</div>
{% if news %}
<div class="row">
{% for news_item in news %}
<div class="col-md-4 mb-4">
<div class="card">
<img src="{{ news_item['image'] }}" class="card-img-top" alt="{{ news_item['title'] }}">
<div class="card-body">
<h5 class="card-title">{{ news_item['title'] }}</h5>
<p class="card-text">
<small class="text-muted">
{{ news_item['date'] }} - {{ news_item['source'] }}
</small>
</p>
<p class="card-text">{{ news_item['body']}}</p>
</div>
<div class="card-footer">
<a href="{{ news_item['url'] }}" class="btn btn-outline-primary btn-sm" target="_blank">Read More</a>
</div>
</div>
</div>
{% endfor %}
</div>
{% else %}
<p class="no-results">No results found.</p>
{% endif %}
</div>
</body>
</html>