Update app.py

app.py

@@ -169,19 +169,87 @@ def generate_map(location_names):
 def fetch_local_news():
     api_key = os.environ['SERP_API']
     url = f'https://serpapi.com/search.json?engine=google_news&q=ohama headline&api_key={api_key}'
-    
-    response = requests.get(url)
+
+
+       response = requests.get(url)
     if response.status_code == 200:
         results = response.json().get("news_results", [])
-        news_html = "<h2>Omaha Today Headline </h2>"
+        news_html = """
+        <h2 style="font-family: Arial, sans-serif; color: #4CAF50;">Omaha Today Headlines</h2>
+        <style>
+            .news-item {
+                font-family: Arial, sans-serif;
+                color: #333;
+                margin-bottom: 15px;
+                padding: 10px;
+                border: 1px solid #ddd;
+                border-radius: 5px;
+                transition: box-shadow 0.3s ease;
+            }
+            .news-item:hover {
+                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            }
+            .news-item a {
+                color: #1E90FF;
+                text-decoration: none;
+            }
+            .news-item a:hover {
+                text-decoration: underline;
+            }
+            .news-preview {
+                position: absolute;
+                display: none;
+                border: 1px solid #ccc;
+                border-radius: 5px;
+                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+                background-color: white;
+                z-index: 1000;
+                max-width: 300px;
+                padding: 10px;
+                font-family: Arial, sans-serif;
+                color: #333;
+            }
+        </style>
+        <script>
+            function showPreview(event, previewContent) {
+                var previewBox = document.getElementById('news-preview');
+                previewBox.innerHTML = previewContent;
+                previewBox.style.left = event.pageX + 'px';
+                previewBox.style.top = event.pageY + 'px';
+                previewBox.style.display = 'block';
+            }
+            function hidePreview() {
+                var previewBox = document.getElementById('news-preview');
+                previewBox.style.display = 'none';
+            }
+        </script>
+        <div id="news-preview" class="news-preview"></div>
+        """
         for index, result in enumerate(results[:10]):
             title = result.get("title", "No title")
             link = result.get("link", "#")
             snippet = result.get("snippet", "")
-            news_html += f"<p>{index + 1}. <a href='{link}' target='_blank'>{title}</a><br>{snippet}</p>"
+            news_html += f"""
+            <div class="news-item" onmouseover="showPreview(event, '{snippet}')" onmouseout="hidePreview()">
+                <a href='{link}' target='_blank'>{index + 1}. {title}</a>
+                <p>{snippet}</p>
+            </div>
+            """
         return news_html
     else:
         return "<p>Failed to fetch local news</p>"
+    # response = requests.get(url)
+    # if response.status_code == 200:
+    #     results = response.json().get("news_results", [])
+    #     news_html = "<h2>Omaha Today Headline </h2>"
+    #     for index, result in enumerate(results[:10]):
+    #         title = result.get("title", "No title")
+    #         link = result.get("link", "#")
+    #         snippet = result.get("snippet", "")
+    #         news_html += f"<p>{index + 1}. <a href='{link}' target='_blank'>{title}</a><br>{snippet}</p>"
+    #     return news_html
+    # else:
+    #     return "<p>Failed to fetch local news</p>"
 
 # Function to fetch local events
 def fetch_local_events():