Hugging Face's logo

Spaces:
broadfield-dev
/
grok_test
Sleeping

App Files Community
broadfield-dev commited on
Commit
c3cc77a
·
verified ·
1 Parent(s): c809d7d

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +76 -14
templates/index.html CHANGED
@@ -42,41 +42,100 @@
42
  padding: 10px;
43
  border-radius: 5px;
44
  font-size: 1.4em;
 
 
 
 
 
 
 
45
  }
46
- .article {
47
  background-color: white;
 
48
  padding: 15px;
49
- margin: 10px 0;
50
  border-radius: 8px;
51
- box-shadow: 0 2px 5px rgba(0,0,0,0.1);
52
  transition: transform 0.2s;
 
 
 
 
53
  }
54
- .article:hover {
55
- transform: translateY(-3px);
 
 
 
56
  }
57
  .title a {
58
- font-size: 1.2em;
59
  color: #2c3e50;
60
  text-decoration: none;
 
 
61
  }
62
  .title a:hover {
63
  color: #3498db;
64
  }
65
  .summary {
66
  color: #555;
 
67
  margin: 5px 0;
68
  }
69
  .sentiment {
70
  font-style: italic;
71
  color: #7f8c8d;
 
72
  }
73
  .published {
74
- font-size: 0.9em;
75
  color: #95a5a6;
76
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
77
  </style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
78
  </head>
79
  <body>
 
80
  <h1>News Feed Hub</h1>
81
  <div class="search-container">
82
  <form method="POST">
@@ -86,14 +145,17 @@
86
  {% for category, articles in categorized_articles.items() %}
87
  <div class="category-section">
88
  <div class="category-title">{{ category }}</div>
89
- {% for article in articles %}
90
- <div class="article">
91
- <div class="title"><a href="{{ article.link }}" target="_blank">{{ article.title }}</a></div>
92
- <div class="summary">{{ article.summary }}</div>
93
- <div class="sentiment">Sentiment: {{ article.sentiment }}</div>
94
- <div class="published">Published: {{ article.published }}</div>
 
 
 
 
95
  </div>
96
- {% endfor %}
97
  </div>
98
  {% endfor %}
99
  </body>
 
42
  padding: 10px;
43
  border-radius: 5px;
44
  font-size: 1.4em;
45
+ text-align: center;
46
+ }
47
+ .tiles {
48
+ display: flex;
49
+ flex-wrap: wrap;
50
+ gap: 20px;
51
+ justify-content: center;
52
  }
53
+ .article-tile {
54
  background-color: white;
55
+ width: 300px;
56
  padding: 15px;
 
57
  border-radius: 8px;
58
+ box-shadow: 0 4px 8px rgba(0,0,0,0.1);
59
  transition: transform 0.2s;
60
+ overflow: hidden;
61
+ }
62
+ .article-tile:hover {
63
+ transform: scale(1.05);
64
  }
65
+ .article-tile img {
66
+ width: 100%;
67
+ height: 150px;
68
+ object-fit: cover;
69
+ border-radius: 5px;
70
  }
71
  .title a {
72
+ font-size: 1.1em;
73
  color: #2c3e50;
74
  text-decoration: none;
75
+ display: block;
76
+ margin: 10px 0;
77
  }
78
  .title a:hover {
79
  color: #3498db;
80
  }
81
  .summary {
82
  color: #555;
83
+ font-size: 0.9em;
84
  margin: 5px 0;
85
  }
86
  .sentiment {
87
  font-style: italic;
88
  color: #7f8c8d;
89
+ font-size: 0.85em;
90
  }
91
  .published {
92
+ font-size: 0.8em;
93
  color: #95a5a6;
94
  }
95
+ #loading {
96
+ display: none;
97
+ position: fixed;
98
+ top: 0;
99
+ left: 0;
100
+ width: 100%;
101
+ height: 100%;
102
+ background: rgba(0,0,0,0.5);
103
+ z-index: 1000;
104
+ }
105
+ .loader {
106
+ position: absolute;
107
+ top: 50%;
108
+ left: 50%;
109
+ transform: translate(-50%, -50%);
110
+ width: 50px;
111
+ height: 50px;
112
+ border: 5px solid #f3f3f3;
113
+ border-top: 5px solid #3498db;
114
+ border-radius: 50%;
115
+ animation: spin 1s linear infinite;
116
+ }
117
+ @keyframes spin {
118
+ 0% { transform: translate(-50%, -50%) rotate(0deg); }
119
+ 100% { transform: translate(-50%, -50%) rotate(360deg); }
120
+ }
121
  </style>
122
+ <script>
123
+ document.addEventListener('DOMContentLoaded', () => {
124
+ const form = document.querySelector('form');
125
+ const loading = document.getElementById('loading');
126
+
127
+ form.addEventListener('submit', () => {
128
+ loading.style.display = 'block';
129
+ });
130
+
131
+ window.addEventListener('load', () => {
132
+ loading.style.display = 'none';
133
+ });
134
+ });
135
+ </script>
136
  </head>
137
  <body>
138
+ <div id="loading"><div class="loader"></div></div>
139
  <h1>News Feed Hub</h1>
140
  <div class="search-container">
141
  <form method="POST">
 
145
  {% for category, articles in categorized_articles.items() %}
146
  <div class="category-section">
147
  <div class="category-title">{{ category }}</div>
148
+ <div class="tiles">
149
+ {% for article in articles %}
150
+ <div class="article-tile">
151
+ <img src="{{ article.image }}" alt="Article Image">
152
+ <div class="title"><a href="{{ article.link }}" target="_blank">{{ article.title }}</a></div>
153
+ <div class="summary">{{ article.summary }}</div>
154
+ <div class="sentiment">Sentiment: {{ article.sentiment }}</div>
155
+ <div class="published">Published: {{ article.published }}</div>
156
+ </div>
157
+ {% endfor %}
158
  </div>
 
159
  </div>
160
  {% endfor %}
161
  </body>