Spaces:

ayush2917
/

finance-news-api

Running

App Files Files Community

ayush2917 commited on Apr 1

Commit

5f2b682

verified ·

1 Parent(s): eda0004

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +187 -23

templates/index.html CHANGED Viewed

@@ -3,25 +3,183 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Latest Financial News & Chatbot</title>
     <style>
-        body { font-family: Arial, sans-serif; margin: 20px; background-color: #f4f4f4; }
-        h1 { color: #333; }
-        .news-container { max-width: 800px; margin: 0 auto; }
-        .news-item { background: white; padding: 15px; margin-bottom: 15px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
-        .news-item h2 { margin: 0 0 10px; font-size: 1.2em; }
-        .news-item a { color: #007bff; text-decoration: none; }
-        .news-item a:hover { text-decoration: underline; }
-        .meta { color: #666; font-size: 0.9em; }
-        .last-updated { color: #888; font-style: italic; }
-        .categories { margin-bottom: 20px; }
-        .categories a { margin-right: 10px; color: #007bff; text-decoration: none; }
-        .categories a:hover { text-decoration: underline; }
-        .error { color: red; }
-        .chat-container { margin-top: 20px; padding: 15px; background: white; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
-        .chat-input { width: 70%; padding: 5px; }
-        .chat-button { padding: 5px 10px; }
-        #chat-response { margin-top: 10px; }
     </style>
 </head>
 <body>
@@ -56,8 +214,10 @@
         <!-- Chatbot Interface -->
         <div class="chat-container">
             <h2>Ask the Financial Chatbot</h2>
-            <input type="text" id="chat-input" class="chat-input" placeholder="Type your question here (e.g., What's today’s Nifty trend?)">
-            <button onclick="sendChat()" class="chat-button">Send</button>
             <div id="chat-response"></div>
         </div>
     </div>
@@ -66,21 +226,25 @@
         function sendChat() {
             const input = document.getElementById('chat-input').value;
             if (!input || input.length < 3) {
-                document.getElementById('chat-response').innerHTML = '<p style="color: red;">Please enter a valid question (minimum 3 characters).</p>';
                 return;
             }
             fetch('/chat', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({ message: input })
             })
-            .then(response => response.json())
             .then(data => {
                 document.getElementById('chat-response').innerHTML = `<p><strong>Response:</strong> ${data.response}</p><p><strong>Category:</strong> ${data.category}</p>`;
             })
             .catch(error => {
-                document.getElementById('chat-response').innerHTML = '<p style="color: red;">Error: Could not get a response from the chatbot.</p>';
                 console.error('Chat error:', error);
             });
         }

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Financial News & Chatbot</title>
     <style>
+        /* Global Styles */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #f4f7fa 0%, #e8ecef 100%);
+            color: #333;
+            line-height: 1.6;
+            padding: 20px;
+        }
+        .news-container {
+            max-width: 900px;
+            margin: 0 auto;
+            background: #fff;
+            border-radius: 10px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            padding: 20px;
+            overflow: hidden;
+        }
+        h1 {
+            color: #1a3c6d;
+            font-size: 2em;
+            margin-bottom: 15px;
+            text-align: center;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+        .last-updated {
+            color: #666;
+            font-size: 0.9em;
+            text-align: center;
+            margin-bottom: 20px;
+            font-style: italic;
+        }
+        /* Categories */
+        .categories {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            gap: 10px;
+            margin-bottom: 25px;
+        }
+        .categories a {
+            color: #007bff;
+            text-decoration: none;
+            padding: 8px 15px;
+            background: #e6f0ff;
+            border-radius: 20px;
+            transition: background 0.3s, color 0.3s;
+        }
+        .categories a:hover {
+            background: #007bff;
+            color: #fff;
+        }
+        /* News Items */
+        .news-item {
+            background: #fafafa;
+            padding: 15px;
+            margin-bottom: 15px;
+            border-radius: 8px;
+            border-left: 4px solid #1a3c6d;
+            transition: transform 0.2s, box-shadow 0.2s;
+        }
+        .news-item:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
+        }
+        .news-item h2 {
+            font-size: 1.2em;
+            margin-bottom: 8px;
+        }
+        .news-item a {
+            color: #1a3c6d;
+            text-decoration: none;
+            font-weight: 600;
+        }
+        .news-item a:hover {
+            color: #007bff;
+        }
+        .news-item p {
+            color: #555;
+            font-size: 0.95em;
+            margin-bottom: 8px;
+        }
+        .meta {
+            color: #888;
+            font-size: 0.85em;
+        }
+        .error {
+            color: #d32f2f;
+            text-align: center;
+            font-weight: bold;
+        }
+        /* Chatbot Section */
+        .chat-container {
+            margin-top: 30px;
+            padding: 20px;
+            background: #1a3c6d;
+            color: #fff;
+            border-radius: 10px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        }
+        .chat-container h2 {
+            font-size: 1.5em;
+            margin-bottom: 15px;
+            color: #fff;
+            text-align: center;
+        }
+        .chat-input {
+            width: 70%;
+            padding: 10px;
+            border: none;
+            border-radius: 20px 0 0 20px;
+            font-size: 1em;
+            outline: none;
+            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
+        }
+        .chat-button {
+            padding: 10px 20px;
+            border: none;
+            border-radius: 0 20px 20px 0;
+            background: #007bff;
+            color: #fff;
+            font-size: 1em;
+            cursor: pointer;
+            transition: background 0.3s;
+        }
+        .chat-button:hover {
+            background: #0056b3;
+        }
+        .chat-form {
+            display: flex;
+            justify-content: center;
+            gap: 0;
+            margin-bottom: 15px;
+        }
+        #chat-response {
+            margin-top: 15px;
+            padding: 10px;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 8px;
+            font-size: 0.95em;
+            line-height: 1.5;
+        }
+        #chat-response p {
+            margin: 5px 0;
+        }
+        #chat-response strong {
+            color: #e6f0ff;
+        }
+        /* Responsive Design */
+        @media (max-width: 600px) {
+            .news-container {
+                padding: 15px;
+            }
+            h1 {
+                font-size: 1.5em;
+            }
+            .news-item h2 {
+                font-size: 1em;
+            }
+            .chat-input {
+                width: 60%;
+            }
+            .chat-button {
+                padding: 10px 15px;
+            }
+        }
     </style>
 </head>
 <body>
         <!-- Chatbot Interface -->
         <div class="chat-container">
             <h2>Ask the Financial Chatbot</h2>
+            <div class="chat-form">
+                <input type="text" id="chat-input" class="chat-input" placeholder="e.g., What's today’s Nifty trend?">
+                <button onclick="sendChat()" class="chat-button">Send</button>
+            </div>
             <div id="chat-response"></div>
         </div>
     </div>
         function sendChat() {
             const input = document.getElementById('chat-input').value;
             if (!input || input.length < 3) {
+                document.getElementById('chat-response').innerHTML = '<p style="color: #ff9999;">Please enter a valid question (minimum 3 characters).</p>';
                 return;
             }
+            document.getElementById('chat-response').innerHTML = '<p>Loading...</p>';
             fetch('/chat', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({ message: input })
             })
+            .then(response => {
+                if (!response.ok) throw new Error('Network response was not ok');
+                return response.json();
+            })
             .then(data => {
                 document.getElementById('chat-response').innerHTML = `<p><strong>Response:</strong> ${data.response}</p><p><strong>Category:</strong> ${data.category}</p>`;
             })
             .catch(error => {
+                document.getElementById('chat-response').innerHTML = '<p style="color: #ff9999;">Error: Could not get a response from the chatbot.</p>';
                 console.error('Chat error:', error);
             });
         }