Hugging Face's logo

Spaces:
sakshi116
/
NEWS_SCRAPING
Sleeping

App Files Community
sakshi116 commited on
Commit
3707bdb
·
verified ·
1 Parent(s): 058f28b

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +233 -71
templates/index.html CHANGED
@@ -1,72 +1,234 @@
1
- <!DOCTYPE html>
2
- <html>
3
-
4
- <head>
5
- <title>News Agent</title>
6
- <style>
7
- body {
8
- font-family: Arial, sans-serif;
9
- background-color: #f8f9fa;
10
- text-align: center;
11
- padding: 30px;
12
- }
13
-
14
- select,
15
- button {
16
- padding: 10px;
17
- margin: 10px;
18
- font-size: 16px;
19
- }
20
-
21
- .news-container {
22
- margin-top: 30px;
23
- display: flex;
24
- flex-direction: column;
25
- align-items: center;
26
- }
27
-
28
- .news-card {
29
- background-color: white;
30
- border-radius: 10px;
31
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
32
- margin: 10px;
33
- padding: 20px;
34
- width: 60%;
35
- text-align: left;
36
- }
37
-
38
- a {
39
- text-decoration: none;
40
- color: #007bff;
41
- font-weight: bold;
42
- }
43
- </style>
44
- </head>
45
-
46
- <body>
47
- <h1>🗞 News Agent</h1>
48
-
49
- <form method="POST">
50
- <label for="source">Select News Source:</label>
51
- <select name="source" id="source">
52
- {% for source in sources %}
53
- <option value="{{ source }}" {% if selected_source == source %}selected{% endif %}>{{ source }}</option>
54
- {% endfor %}
55
- </select>
56
- <button type="submit">Show News</button>
57
- </form>
58
-
59
- <div class="news-container">
60
- {% if articles %} {% for article in articles %}
61
- <div class="news-card">
62
- <h2>{{ article.title }}</h2>
63
- <p>{{ article.summary | safe }}</p>
64
- <a href="{{ article.link }}" target="_blank">Read more</a>
65
- </div>
66
- {% endfor %} {% elif selected_source %}
67
- <p>No news found for {{ selected_source }} 😢</p>
68
- {% endif %}
69
- </div>
70
- </body>
71
-
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
72
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <title>🗞 Smart News Portal</title>
7
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
8
+ <style>
9
+ :root {
10
+ --bg-light: linear-gradient(135deg, #f7f8f3, #d9e7de);
11
+ --text-light: #2d3436;
12
+ --card-light: #ffffffcc;
13
+ --accent-light: #5da48a;
14
+ --bg-dark: linear-gradient(135deg, #1e1e1e, #2a2a2a);
15
+ --text-dark: #f0f0f0;
16
+ --card-dark: #2f2f2f;
17
+ --accent-dark: #5da48a;
18
+ }
19
+
20
+ body {
21
+ background: var(--bg-light);
22
+ color: var(--text-light);
23
+ font-family: "Poppins", sans-serif;
24
+ text-align: center;
25
+ padding: 40px;
26
+ transition: background 0.4s ease, color 0.4s ease;
27
+ }
28
+
29
+ body.dark-mode {
30
+ background: var(--bg-dark);
31
+ color: var(--text-dark);
32
+ }
33
+
34
+ h1 {
35
+ font-weight: 600;
36
+ margin-bottom: 25px;
37
+ color: #2e4a3e;
38
+ transition: color 0.4s ease;
39
+ }
40
+
41
+ body.dark-mode h1 {
42
+ color: #d1f2e4;
43
+ }
44
+
45
+ .news-card {
46
+ background: var(--card-light);
47
+ border: 1px solid rgba(0, 0, 0, 0.05);
48
+ border-radius: 15px;
49
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
50
+ padding: 20px;
51
+ margin: 15px auto;
52
+ width: 90%;
53
+ max-width: 800px;
54
+ transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.4s ease;
55
+ cursor: pointer;
56
+ }
57
+
58
+ .news-card:hover {
59
+ transform: translateY(-5px);
60
+ box-shadow: 0 10px 25px rgba(34, 49, 40, 0.15);
61
+ }
62
+
63
+ body.dark-mode .news-card {
64
+ background: var(--card-dark);
65
+ box-shadow: 0 5px 18px rgba(255, 255, 255, 0.05);
66
+ }
67
+
68
+ .news-title {
69
+ font-size: 1.4rem;
70
+ font-weight: 600;
71
+ color: #245a44;
72
+ transition: color 0.4s ease;
73
+ }
74
+
75
+ body.dark-mode .news-title {
76
+ color: #b8f5d3;
77
+ }
78
+
79
+ select,
80
+ button {
81
+ border-radius: 8px;
82
+ border: 1px solid rgba(0, 0, 0, 0.1);
83
+ padding: 10px 15px;
84
+ margin: 10px;
85
+ background-color: #fff;
86
+ transition: all 0.4s ease;
87
+ }
88
+
89
+ body.dark-mode select,
90
+ body.dark-mode button {
91
+ background-color: #3a3a3a;
92
+ color: #f0f0f0;
93
+ border-color: rgba(255, 255, 255, 0.1);
94
+ }
95
+
96
+ .btn-primary {
97
+ background-color: var(--accent-light);
98
+ border: none;
99
+ transition: background-color 0.3s ease;
100
+ }
101
+
102
+ .btn-primary:hover {
103
+ background-color: #4c947a;
104
+ }
105
+
106
+ body.dark-mode .btn-primary {
107
+ background-color: var(--accent-dark);
108
+ }
109
+
110
+ .toggle-switch {
111
+ position: fixed;
112
+ top: 20px;
113
+ right: 25px;
114
+ background-color: rgba(255, 255, 255, 0.8);
115
+ border: none;
116
+ border-radius: 30px;
117
+ padding: 8px 15px;
118
+ font-size: 1.2rem;
119
+ cursor: pointer;
120
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
121
+ transition: background 0.4s ease;
122
+ }
123
+
124
+ body.dark-mode .toggle-switch {
125
+ background-color: rgba(40, 40, 40, 0.9);
126
+ color: #d1f2e4;
127
+ }
128
+
129
+ .modal-content {
130
+ background: #f4f7f5;
131
+ border-radius: 20px;
132
+ }
133
+
134
+ body.dark-mode .modal-content {
135
+ background: #2c2c2c;
136
+ color: #e9e9e9;
137
+ }
138
+
139
+ footer {
140
+ color: #4b6156;
141
+ margin-top: 40px;
142
+ font-size: 0.9rem;
143
+ transition: color 0.4s ease;
144
+ }
145
+
146
+ body.dark-mode footer {
147
+ color: #c8c8c8;
148
+ }
149
+ </style>
150
+ </head>
151
+
152
+ <body>
153
+ <button class="toggle-switch" id="themeToggle">🌙</button>
154
+
155
+ <h1>🗞 Smart News Portal</h1>
156
+
157
+ <form method="POST">
158
+ <label for="source" class="fw-bold">Select News Source:</label>
159
+ <select name="source" id="source">
160
+ {% for source in sources %}
161
+ <option value="{{ source }}" {% if selected_source == source %}selected{% endif %}>{{ source }}</option>
162
+ {% endfor %}
163
+ </select>
164
+ <button type="submit" class="btn btn-primary">Show News</button>
165
+ </form>
166
+
167
+ <div class="container mt-4">
168
+ {% if articles %} {% for article in articles %}
169
+ <div class="news-card" data-bs-toggle="modal" data-bs-target="#newsModal" data-title="{{ article.title }}" data-summary="{{ article.summary | safe }}" data-link="{{ article.link }}">
170
+ <div class="news-title">{{ article.title }}</div>
171
+ <p>{{ article.published if article.published else '' }}</p>
172
+ </div>
173
+ {% endfor %} {% elif selected_source %}
174
+ <p>No news found for {{ selected_source }} 😢</p>
175
+ {% endif %}
176
+ </div>
177
+
178
+ <!-- Floating Modal -->
179
+ <div class="modal fade" id="newsModal" tabindex="-1" aria-hidden="true">
180
+ <div class="modal-dialog modal-dialog-centered modal-lg">
181
+ <div class="modal-content">
182
+ <div class="modal-header">
183
+ <h5 class="modal-title" id="modalTitle"></h5>
184
+ <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
185
+ </div>
186
+ <div class="modal-body">
187
+ <img id="modalImage" src="https://via.placeholder.com/800x400.png?text=News+Image" alt="">
188
+ <p id="modalSummary"></p>
189
+ </div>
190
+ <div class="modal-footer">
191
+ <a id="modalLink" href="#" target="_blank" class="btn btn-primary">Read Full Story</a>
192
+ </div>
193
+ </div>
194
+ </div>
195
+ </div>
196
+
197
+ <footer>
198
+
199
+ <p>Bringing news and innovation together — one headline at a time.</p>
200
+
201
+ </footer>
202
+
203
+
204
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
205
+ <script>
206
+ const toggleBtn = document.getElementById("themeToggle");
207
+ const body = document.body;
208
+
209
+ toggleBtn.addEventListener("click", () => {
210
+ body.classList.toggle("dark-mode");
211
+ toggleBtn.textContent = body.classList.contains("dark-mode") ? "☀️" : "🌙";
212
+ localStorage.setItem("theme", body.classList.contains("dark-mode") ? "dark" : "light");
213
+ });
214
+
215
+ // Remember last theme
216
+ if (localStorage.getItem("theme") === "dark") {
217
+ body.classList.add("dark-mode");
218
+ toggleBtn.textContent = "☀️";
219
+ }
220
+
221
+ const newsModal = document.getElementById('newsModal');
222
+ newsModal.addEventListener('show.bs.modal', event => {
223
+ const button = event.relatedTarget;
224
+ const title = button.getAttribute('data-title');
225
+ const summary = button.getAttribute('data-summary');
226
+ const link = button.getAttribute('data-link');
227
+ document.getElementById('modalTitle').textContent = title;
228
+ document.getElementById('modalSummary').innerHTML = summary;
229
+ document.getElementById('modalLink').href = link;
230
+ });
231
+ </script>
232
+ </body>
233
+
234
  </html>