Hugging Face's logo

Spaces:
broadfield-dev
/
RSS_News
Sleeping

App Files Community
broadfield-dev commited on
Commit
36f2507
·
verified ·
1 Parent(s): 33970e1

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +32 -27
templates/index.html CHANGED
@@ -2,7 +2,7 @@
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>News Feed Hub</title>
7
  <style>
8
  body { font-family: Arial, sans-serif; margin: 20px; background-color: #f5f5f5; color: #333; }
@@ -20,7 +20,7 @@
20
  .published { font-size: 0.8em; color: #95a5a6; }
21
  .no-articles { text-align: center; color: #2c3e50; margin-top: 20px; }
22
  .loading-container { text-align: center; margin: 10px 0; }
23
- .loading-spinner { display: inline-block; border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; width: 20px; height: 20px; animation: spin 1s linear infinite; }
24
  @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
25
  </style>
26
  </head>
@@ -38,31 +38,35 @@
38
  </div>
39
  {% endif %}
40
  {% if has_articles %}
41
- {% for category, articles in categorized_articles.items() %}
42
- <div class="category-section">
43
- <div class="category-title" onclick="toggleCategory('{{ category }}')">{{ category }} <span class="loading-spinner" id="spinner-{{ category }}" style="display: none;"></span></div>
44
- <div class="tiles" id="category-{{ category }}" data-last-update="0">
45
- {% for article in articles %}
46
- <div class="article-tile" data-published="{{ article.published }}" data-id="{{ loop.index }}">
47
- {% if article.image != "svg" %}
48
- <img src="{{ article.image }}" alt="Article Image">
49
- {% else %}
50
- <svg width="100%" height="150" xmlns="http://www.w3.org/2000/svg">
51
- <rect width="100%" height="100%" fill="#e0e0e0"/>
52
- <text x="50%" y="50%" text-anchor="middle" dy=".3em" fill="#666">No Image</text>
53
- </svg>
54
- {% endif %}
55
- <div class="title"><a href="{{ article.link }}" target="_blank">{{ article.title }}</a></div>
56
- <div class="description">{{ article.description }}</div>
57
- <div class="published">Published: {{ article.published }}</div>
 
 
 
58
  </div>
59
- {% endfor %}
60
  </div>
61
- <div class="tiles" id="all-{{ category }}" style="display: none;"></div>
62
  </div>
63
- {% endfor %}
64
  {% else %}
 
65
  <div class="no-articles">No articles available yet. Loading new feeds...</div>
 
66
  {% endif %}
67
 
68
  <script>
@@ -177,8 +181,6 @@
177
  }
178
  }
179
  }
180
- const loadingContainer = document.getElementById('loadingContainer');
181
- if (loadingContainer) loadingContainer.style.display = 'none';
182
  }
183
  setTimeout(updateArticles, 2000);
184
  })
@@ -193,9 +195,12 @@
193
  .then(response => response.json())
194
  .then(data => {
195
  if (data.status === 'complete') {
196
- window.location.reload(); // Refresh the page when loading is complete
 
 
 
197
  } else {
198
- setTimeout(checkLoadingStatus, 2000); // Check again after 2 seconds
199
  }
200
  })
201
  .catch(error => {
@@ -272,4 +277,4 @@
272
  });
273
  </script>
274
  </body>
275
- </html>
 
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
+ <meta name="asság:width=device-width, initial-scale=1.0">
6
  <title>News Feed Hub</title>
7
  <style>
8
  body { font-family: Arial, sans-serif; margin: 20px; background-color: #f5f5f5; color: #333; }
 
20
  .published { font-size: 0.8em; color: #95a5a6; }
21
  .no-articles { text-align: center; color: #2c3e50; margin-top: 20px; }
22
  .loading-container { text-align: center; margin: 10px 0; }
23
+ .loading-spinner { display: inline-block; border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; }
24
  @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
25
  </style>
26
  </head>
 
38
  </div>
39
  {% endif %}
40
  {% if has_articles %}
41
+ <div id="articlesContainer">
42
+ {% for category, articles in categorized_articles.items() %}
43
+ <div class="category-section">
44
+ <div class="category-title" onclick="toggleCategory('{{ category }}')">{{ category }} <span class="loading-spinner" id="spinner-{{ category }}" style="display: none;"></span></div>
45
+ <div class="tiles" id="category-{{ category }}" data-last-update="0">
46
+ {% for article in articles %}
47
+ <div class="article-tile" data-published="{{ article.published }}" data-id="{{ loop.index }}">
48
+ {% if article.image != "svg" %}
49
+ <img src="{{ article.image }}" alt="Article Image">
50
+ {% else %}
51
+ <svg width="100%" height="150" xmlns="http://www.w3.org/2000/svg">
52
+ <rect width="100%" height="100%" fill="#e0e0e0"/>
53
+ <text x="50%" y="50%" text-anchor="middle" dy=".3em" fill="#666">No Image</text>
54
+ </svg>
55
+ {% endif %}
56
+ <div class="title"><a href="{{ article.link }}" target="_blank">{{ article.title }}</a></div>
57
+ <div class="description">{{ article.description }}</div>
58
+ <div class="published">Published: {{ article.published }}</div>
59
+ </div>
60
+ {% endfor %}
61
  </div>
62
+ <div class="tiles" id="all-{{ category }}" style="display: none;"></div>
63
  </div>
64
+ {% endfor %}
65
  </div>
 
66
  {% else %}
67
+ {% if not loading %}
68
  <div class="no-articles">No articles available yet. Loading new feeds...</div>
69
+ {% endif %}
70
  {% endif %}
71
 
72
  <script>
 
181
  }
182
  }
183
  }
 
 
184
  }
185
  setTimeout(updateArticles, 2000);
186
  })
 
195
  .then(response => response.json())
196
  .then(data => {
197
  if (data.status === 'complete') {
198
+ // Only refresh if this is the first load (no articles yet)
199
+ if (!document.getElementById('articlesContainer')) {
200
+ window.location.reload();
201
+ }
202
  } else {
203
+ setTimeout(checkLoadingStatus, 2000);
204
  }
205
  })
206
  .catch(error => {
 
277
  });
278
  </script>
279
  </body>
280
+ </html>