Update templates/index.html

templates/index.html

@@ -62,7 +62,7 @@
         .article-tile:hover {
             transform: scale(1.05);
         }
-        .article-tile img {
+        .article-tile img, .article-tile svg {
             width: 100%;
             height: 150px;
             object-fit: cover;
@@ -93,7 +93,7 @@
             color: #95a5a6;
         }
         #loading {
-            display: none;
+            display: block;
             position: fixed;
             top: 0;
             left: 0;
@@ -148,7 +148,16 @@
         <div class="tiles">
             {% for article in articles %}
             <div class="article-tile">
+                {% if article.image != "svg" %}
                 <img src="{{ article.image }}" alt="Article Image">
+                {% else %}
+                <svg width="100%" height="150" viewBox="0 0 300 150" xmlns="http://www.w3.org/2000/svg">
+                    <rect width="300" height="150" fill="#e0e0e0"/>
+                    <text x="50%" y="50%" text-anchor="middle" dy=".3em" font-size="20" fill="#666">
+                        No Image Available
+                    </text>
+                </svg>
+                {% endif %}
                 <div class="title"><a href="{{ article.link }}" target="_blank">{{ article.title }}</a></div>
                 <div class="summary">{{ article.summary }}</div>
                 <div class="sentiment">Sentiment: {{ article.sentiment }}</div>