Hugging Face's logo

Spaces:
broadfield-dev
/
grok_test
Running

App Files Community
broadfield-dev commited on
Commit
40c26bb
·
verified ·
1 Parent(s): ffd464c

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +158 -1
templates/index.html CHANGED
@@ -44,4 +44,161 @@
44
  color: white;
45
  padding: 10px;
46
  border-radius: 5px;
47
- font-size:
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
44
  color: white;
45
  padding: 10px;
46
  border-radius: 5px;
47
+ font-size: 1.4em;
48
+ text-align: center;
49
+ margin-bottom: 15px;
50
+ }
51
+ .tiles {
52
+ display: grid;
53
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
54
+ gap: 20px;
55
+ justify-content: center;
56
+ }
57
+ .article-tile {
58
+ background-color: white;
59
+ padding: 15px;
60
+ border-radius: 8px;
61
+ box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Subtle shadow like screenshot */
62
+ transition: transform 0.2s;
63
+ overflow: hidden;
64
+ border: 1px solid #e0e0e0; /* Subtle grey outline from screenshot */
65
+ }
66
+ .article-tile:hover {
67
+ transform: scale(1.05);
68
+ box-shadow: 0 6px 12px rgba(0,0,0,0.15);
69
+ }
70
+ .article-tile img, .article-tile svg {
71
+ width: 100%;
72
+ height: 150px;
73
+ object-fit: cover;
74
+ border-radius: 5px;
75
+ }
76
+ .title a {
77
+ font-size: 1.1em;
78
+ color: #2c3e50;
79
+ text-decoration: none;
80
+ display: block;
81
+ margin: 10px 0;
82
+ font-weight: bold;
83
+ }
84
+ .title a:hover {
85
+ color: #3498db;
86
+ }
87
+ .description {
88
+ color: #555;
89
+ font-size: 0.9em;
90
+ margin: 5px 0;
91
+ line-height: 1.4;
92
+ }
93
+ .published {
94
+ font-size: 0.8em;
95
+ color: #95a5a6;
96
+ margin-top: 10px;
97
+ }
98
+ #loading {
99
+ display: none; /* Initially hidden, shown during new feed loading */
100
+ position: fixed;
101
+ top: 0;
102
+ left: 0;
103
+ width: 100%;
104
+ height: 100%;
105
+ background: rgba(0,0,0,0.5);
106
+ z-index: 1000;
107
+ }
108
+ .loader {
109
+ position: absolute;
110
+ top: 50%;
111
+ left: 50%;
112
+ transform: translate(-50%, -50%);
113
+ width: 50px;
114
+ height: 50px;
115
+ border: 5px solid #f3f3f3;
116
+ border-top: 5px solid #3498db;
117
+ border-radius: 50%;
118
+ animation: spin 1s linear infinite;
119
+ }
120
+ @keyframes spin {
121
+ 0% { transform: translate(-50%, -50%) rotate(0deg); }
122
+ 100% { transform: translate(-50%, -50%) rotate(360deg); }
123
+ }
124
+ .loading-message {
125
+ text-align: center;
126
+ margin-top: 20px;
127
+ color: #2c3e50;
128
+ font-size: 1em;
129
+ }
130
+ </style>
131
+ </head>
132
+ <body>
133
+ <div id="loading"><div class="loader"></div></div>
134
+ <h1>News Feed Hub</h1>
135
+ <div class="search-container">
136
+ <form method="POST" id="searchForm">
137
+ <input type="text" name="search" class="search-bar" placeholder="Search news semantically...">
138
+ </form>
139
+ </div>
140
+ {% if loading_new_feeds %}
141
+ <div class="loading-message">Loading new RSS feeds in the background...</div>
142
+ {% endif %}
143
+ {% for category, articles in categorized_articles.items() %}
144
+ <div class="category-section">
145
+ <div class="category-title">{{ category }}</div>
146
+ <div class="tiles">
147
+ {% for article in articles %}
148
+ <div class="article-tile">
149
+ {% if article.image != "svg" %}
150
+ <img src="{{ article.image }}" alt="Article Image">
151
+ {% else %}
152
+ <svg width="100%" height="150" viewBox="0 0 300 150" xmlns="http://www.w3.org/2000/svg">
153
+ <rect width="300" height="150" fill="#e0e0e0"/>
154
+ <text x="50%" y="50%" text-anchor="middle" dy=".3em" font-size="20" fill="#666">
155
+ No Image Available
156
+ </text>
157
+ </svg>
158
+ {% endif %}
159
+ <div class="title"><a href="{{ article.link }}" target="_blank">{{ article.title }}</a></div>
160
+ <div class="description">{{ article.description }}</div>
161
+ <div class="published">Published: {{ article.published }}</div>
162
+ </div>
163
+ {% endfor %}
164
+ </div>
165
+ </div>
166
+ {% endfor %}
167
+
168
+ <script>
169
+ document.addEventListener('DOMContentLoaded', () => {
170
+ const form = document.getElementById('searchForm');
171
+ const loading = document.getElementById('loading');
172
+
173
+ form.addEventListener('submit', () => {
174
+ loading.style.display = 'block';
175
+ });
176
+
177
+ // Poll until new feeds are loaded (if loading_new_feeds is True)
178
+ if ("{{ loading_new_feeds }}" === "True") {
179
+ function checkNewFeeds() {
180
+ fetch('/check_feeds')
181
+ .then(response => response.json())
182
+ .then(data => {
183
+ if (data.status === "loaded") {
184
+ location.reload(); // Refresh to show new articles
185
+ } else if (data.status === "error") {
186
+ console.error('Error loading new feeds:', data.message);
187
+ loading.style.display = 'none';
188
+ alert('Failed to load new RSS feeds. Please try again.');
189
+ } else {
190
+ setTimeout(checkNewFeeds, 1000); // Check every second
191
+ }
192
+ })
193
+ .catch(error => {
194
+ console.error('Error checking new feeds:', error);
195
+ loading.style.display = 'none';
196
+ alert('Network error while loading new feeds. Please try again.');
197
+ });
198
+ }
199
+ checkNewFeeds();
200
+ }
201
+ });
202
+ </script>
203
+ </body>
204
+ </html>