| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>FloatChat - ARGO Data Explorer</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script> |
| <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> |
| <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script> |
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
| body { |
| font-family: 'Poppins', sans-serif; |
| background-color: #f8fafc; |
| } |
| .govt-header { |
| background: linear-gradient(135deg, #0f4c81 0%, #1a5f8b 100%); |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); |
| } |
| .nav-link { |
| position: relative; |
| } |
| .nav-link:after { |
| content: ''; |
| position: absolute; |
| width: 0; |
| height: 2px; |
| bottom: 0; |
| left: 0; |
| background-color: #fff; |
| transition: width 0.3s ease; |
| } |
| .nav-link:hover:after { |
| width: 100%; |
| } |
| .main-container { |
| display: flex; |
| height: 100vh; |
| width: 100%; |
| } |
| .chat-container { |
| display: flex; |
| flex-direction: column; |
| flex-grow: 1; |
| height: 100vh; |
| width: 100%; |
| border-left: 1px solid #e2e8f0; |
| } |
| .chat-messages { |
| flex-grow: 1; |
| overflow-y: auto; |
| padding: 1rem; |
| display: flex; |
| flex-direction: column; |
| gap: 1rem; |
| background-color: #ffffff; |
| } |
| .user-message { |
| align-self: flex-end; |
| max-width: 80%; |
| } |
| .user-message .message-bubble { |
| background-color: #d1e7ff; |
| border-radius: 18px 18px 0 18px; |
| padding: 12px 16px; |
| margin: 4px 0; |
| line-height: 1.4; |
| } |
| .bot-message { |
| align-self: flex-start; |
| max-width: 80%; |
| } |
| .bot-message .message-bubble { |
| background-color: #f1f1f1; |
| border-radius: 18px 18px 18px 0; |
| padding: 12px 16px; |
| margin: 4px 0; |
| line-height: 1.4; |
| } |
| .message-time { |
| font-size: 0.75rem; |
| color: #64748b; |
| margin-top: 4px; |
| text-align: right; |
| } |
| .message-time { |
| font-size: 0.75rem; |
| color: #64748b; |
| margin-top: 4px; |
| } |
| .chat-input-container { |
| padding: 1rem; |
| border-top: 1px solid #e2e8f0; |
| background: white; |
| position: sticky; |
| bottom: 0; |
| } |
| .chat-input { |
| display: flex; |
| padding: 0.5rem; |
| gap: 0.5rem; |
| align-items: center; |
| } |
| .chat-input textarea { |
| flex-grow: 1; |
| border: 1px solid #e2e8f0; |
| border-radius: 12px; |
| padding: 0.75rem 1rem; |
| resize: none; |
| min-height: 44px; |
| max-height: 200px; |
| outline: none; |
| font-family: inherit; |
| line-height: 1.5; |
| } |
| .chat-input textarea:focus { |
| border-color: #3b82f6; |
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); |
| } |
| .quick-replies { |
| display: flex; |
| gap: 0.5rem; |
| flex-wrap: wrap; |
| margin-top: 0.5rem; |
| } |
| .quick-reply { |
| background-color: #f1f5f9; |
| border-radius: 16px; |
| padding: 4px 12px; |
| font-size: 0.875rem; |
| cursor: pointer; |
| transition: all 0.2s; |
| } |
| .quick-reply:hover { |
| background-color: #e2e8f0; |
| } |
| @media (max-width: 768px) { |
| .history-sidebar { |
| position: absolute; |
| left: -100%; |
| transition: transform 0.3s ease; |
| z-index: 10; |
| height: 100vh; |
| background: white; |
| } |
| .history-sidebar.active { |
| transform: translateX(100%); |
| } |
| .chat-container { |
| width: 100%; |
| } |
| } |
| .user-message { |
| animation: slideInRight 0.3s ease-out; |
| } |
| .bot-message { |
| animation: slideInLeft 0.3s ease-out; |
| } |
| @keyframes slideInRight { |
| from { transform: translateX(20px); opacity: 0; } |
| to { transform: translateX(0); opacity: 1; } |
| } |
| @keyframes slideInLeft { |
| from { transform: translateX(-20px); opacity: 0; } |
| to { transform: translateX(0); opacity: 1; } |
| } |
| .visualization-container { |
| transition: all 0.5s ease; |
| } |
| .history-item { |
| transition: all 0.2s ease; |
| } |
| .history-item:hover { |
| background-color: #f0f4f8; |
| } |
| .map-container { |
| height: 400px; |
| border-radius: 8px; |
| overflow: hidden; |
| } |
| .graph-container { |
| height: 400px; |
| border-radius: 8px; |
| overflow: hidden; |
| } |
| .typing-dots span { |
| display: inline-block; |
| width: 8px; |
| height: 8px; |
| background-color: #64748b; |
| border-radius: 50%; |
| animation: bounce 1.4s infinite ease-in-out; |
| } |
| .typing-dots span:nth-child(2) { |
| animation-delay: 0.2s; |
| } |
| .typing-dots span:nth-child(3) { |
| animation-delay: 0.4s; |
| } |
| @keyframes bounce { |
| 0%, 80%, 100% { transform: translateY(0); } |
| 40% { transform: translateY(-8px); } |
| } |
| </style> |
| </head> |
| <body class="min-h-screen flex flex-col"> |
| |
| <div class="govt-header text-white py-2 px-4"> |
| <div class="container mx-auto flex justify-between items-center"> |
| <div class="flex items-center space-x-4"> |
| <img src="https://upload.wikimedia.org/wikipedia/en/thumb/4/41/Flag_of_India.svg/1200px-Flag_of_India.svg.png" alt="Indian Flag" class="h-8"> |
| <img src="https://www.moes.gov.in/sites/default/files/moes-logo_1.png" alt="MoES Logo" class="h-10"> |
| <span class="font-bold">भारत सरकार | Government of India</span> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <span class="text-sm">A-14, 15 & 19, Sector-1, Noida, UP-201301</span> |
| <span class="text-sm">Email: support@moes.gov.in</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <nav class="bg-white shadow-md"> |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
| <div class="flex items-center space-x-8"> |
| <a href="index.html" class="text-xl font-bold text-blue-800">ARGO Data Explorer</a> |
| <div class="hidden md:flex space-x-6"> |
| <a href="index.html" class="nav-link text-gray-600 hover:text-blue-800 font-medium">Home</a> |
| <a href="chatbot.html" class="nav-link text-blue-800 font-medium">FloatChat</a> |
| <a href="#" class="nav-link text-gray-600 hover:text-blue-800 font-medium">Datasets</a> |
| <a href="#" class="nav-link text-gray-600 hover:text-blue-800 font-medium">Research</a> |
| <a href="#" class="nav-link text-gray-600 hover:text-blue-800 font-medium">Publications</a> |
| <a href="#" class="nav-link text-gray-600 hover:text-blue-800 font-medium">About</a> |
| </div> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <span class="text-sm hidden md:block">Welcome, Researcher</span> |
| <button class="bg-blue-700 hover:bg-blue-800 text-white px-4 py-2 rounded-md font-medium transition duration-300 flex items-center space-x-2"> |
| <i data-feather="log-out" class="w-4 h-4"></i> |
| <span>Logout</span> |
| </button> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <main class="flex-1"> |
| <div class="main-container"> |
| |
| <div class="history-sidebar w-64 bg-white p-4 border-r border-gray-200 overflow-y-auto" data-aos="fade-right"> |
| <div class="flex justify-between items-center mb-4"> |
| <h2 class="text-xl font-bold text-gray-800">Chat History</h2> |
| <button class="text-blue-600 hover:text-blue-800"> |
| <i data-feather="refresh-cw" class="w-5 h-5"></i> |
| </button> |
| </div> |
| <div class="space-y-2 max-h-[calc(100vh-250px)] overflow-y-auto"> |
| <div class="history-item p-3 rounded-md cursor-pointer bg-blue-50 border border-blue-200"> |
| <p class="font-medium text-blue-800 truncate">Show salinity profiles near the equator</p> |
| <p class="text-xs text-gray-500">Today, 10:45 AM</p> |
| </div> |
| <div class="history-item p-3 rounded-md cursor-pointer hover:bg-gray-50 border border-transparent"> |
| <p class="font-medium text-gray-700 truncate">Compare BGC parameters in Arabian Sea</p> |
| <p class="text-xs text-gray-500">Yesterday, 3:22 PM</p> |
| </div> |
| <div class="history-item p-3 rounded-md cursor-pointer hover:bg-gray-50 border border-transparent"> |
| <p class="font-medium text-gray-700 truncate">Nearest ARGO floats to Mumbai</p> |
| <p class="text-xs text-gray-500">Yesterday, 11:10 AM</p> |
| </div> |
| <div class="history-item p-3 rounded-md cursor-pointer hover:bg-gray-50 border border-transparent"> |
| <p class="font-medium text-gray-700 truncate">Temperature trends in Bay of Bengal</p> |
| <p class="text-xs text-gray-500">May 15, 2023</p> |
| </div> |
| <div class="history-item p-3 rounded-md cursor-pointer hover:bg-gray-50 border border-transparent"> |
| <p class="font-medium text-gray-700 truncate">Salinity-depth profile at 10°N, 75°E</p> |
| <p class="text-xs text-gray-500">May 14, 2023</p> |
| </div> |
| </div> |
| <button class="mt-4 w-full bg-gray-100 hover:bg-gray-200 text-gray-700 py-2 rounded-md font-medium transition duration-300 flex items-center justify-center space-x-2"> |
| <i data-feather="plus" class="w-4 h-4"></i> |
| <span>New Chat</span> |
| </button> |
| </div> |
|
|
| |
| <div class="chat-container bg-white" data-aos="fade-up"> |
| |
| <div class="border-b p-4 bg-blue-50"> |
| <h2 class="text-xl font-bold text-gray-800">FloatChat - ARGO Data Explorer</h2> |
| <p class="text-sm text-gray-600">Ask questions about ARGO float data in natural language</p> |
| </div> |
| |
| |
| <div class="chat-messages"> |
| |
| <div class="bot-message flex"> |
| <div class="flex-shrink-0 mr-3"> |
| <div class="bg-blue-100 text-blue-800 rounded-full w-8 h-8 flex items-center justify-center"> |
| <i data-feather="cpu" class="w-4 h-4"></i> |
| </div> |
| </div> |
| <div class="flex-1"> |
| <div class="message-bubble"> |
| <p>Hello! I'm your ARGO data assistant. You can ask me questions about ocean temperature, salinity, and other parameters from ARGO floats worldwide. How can I help you today?</p> |
| <div class="message-time">Today, 10:45 AM</div> |
| <div class="mt-2"> |
| <p class="text-sm font-medium text-gray-700 mb-1">Try asking:</p> |
| <div class="quick-replies"> |
| <div class="quick-reply">Show salinity profiles near equator</div> |
| <div class="quick-reply">Compare BGC parameters in Arabian Sea</div> |
| <div class="quick-reply">Nearest ARGO floats to Mumbai</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="user-message flex justify-end"> |
| <div class="flex-1"> |
| <div class="message-bubble"> |
| <p>Show me temperature profiles at 10°N, 75°E for the last month</p> |
| <div class="message-time">Today, 10:46 AM</div> |
| </div> |
| </div> |
| <div class="flex-shrink-0 ml-3"> |
| <div class="bg-blue-700 text-white rounded-full w-8 h-8 flex items-center justify-center"> |
| <i data-feather="user" class="w-4 h-4"></i> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bot-message flex"> |
| <div class="flex-shrink-0 mr-3"> |
| <div class="bg-blue-100 text-blue-800 rounded-full w-8 h-8 flex items-center justify-center"> |
| <i data-feather="cpu" class="w-4 h-4"></i> |
| </div> |
| </div> |
| <div class="flex-1"> |
| <div class="bg-gray-50 p-4 rounded-lg"> |
| <p>Here are the temperature profiles from ARGO floats near 10°N, 75°E over the past month:</p> |
| |
| |
| <div class="mt-4 visualization-container"> |
| <div class="graph-container" id="temperatureGraph"></div> |
| <script> |
| |
| const tempData = [ |
| { |
| z: [[28.5, 28.3, 28.1], [25.0, 24.8, 24.6], [15.0, 14.8, 14.6], [8.0, 7.9, 7.8]], |
| x: ['May 1', 'May 15', 'May 30'], |
| y: ['0-50m', '50-200m', '200-500m', '500-1000m'], |
| type: 'heatmap', |
| colorscale: 'Viridis', |
| colorbar: { |
| title: 'Temperature (°C)' |
| } |
| } |
| ]; |
| const tempLayout = { |
| title: 'Temperature Profiles at 10°N, 75°E', |
| xaxis: { title: 'Date' }, |
| yaxis: { title: 'Depth Range' } |
| }; |
| Plotly.newPlot('temperatureGraph', tempData, tempLayout); |
| </script> |
| </div> |
| |
| <div class="mt-4 text-sm text-gray-600"> |
| <p>The data shows surface temperatures around 28-29°C, decreasing with depth. The thermocline is visible around 50-200m depth where temperature drops rapidly.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="user-message flex justify-end"> |
| <div class="flex-1 max-w-[80%]"> |
| <div class="bg-blue-100 p-4 rounded-lg"> |
| <p>Show the locations of ARGO floats in the Indian Ocean</p> |
| </div> |
| </div> |
| <div class="flex-shrink-0 ml-3"> |
| <div class="bg-blue-700 text-white rounded-full w-8 h-8 flex items-center justify-center"> |
| <i data-feather="user" class="w-4 h-4"></i> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bot-message flex"> |
| <div class="flex-shrink-0 mr-3"> |
| <div class="bg-blue-100 text-blue-800 rounded-full w-8 h-8 flex items-center justify-center"> |
| <i data-feather="cpu" class="w-4 h-4"></i> |
| </div> |
| </div> |
| <div class="flex-1"> |
| <div class="bg-gray-50 p-4 rounded-lg"> |
| <p>Here are the active ARGO floats currently reporting data in the Indian Ocean region:</p> |
| |
| |
| <div class="mt-4 visualization-container"> |
| <div class="map-container" id="argoMap"></div> |
| <script> |
| |
| const map = L.map('argoMap').setView([10, 75], 4); |
| |
| |
| L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { |
| attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' |
| }).addTo(map); |
| |
| |
| const floatLocations = [ |
| { lat: 8.5, lng: 72.5, id: '2902304', date: '2023-05-28' }, |
| { lat: 12.3, lng: 68.7, id: '2902305', date: '2023-05-27' }, |
| { lat: 15.2, lng: 80.1, id: '2902306', date: '2023-05-26' }, |
| { lat: 5.5, lng: 85.3, id: '2902307', date: '2023-05-25' }, |
| { lat: -2.4, lng: 78.9, id: '2902308', date: '2023-05-24' } |
| ]; |
| |
| |
| floatLocations.forEach(loc => { |
| const marker = L.marker([loc.lat, loc.lng]).addTo(map) |
| .bindPopup(`<b>ARGO Float ${loc.id}</b><br>Last report: ${loc.date}`); |
| |
| |
| marker.setIcon(L.icon({ |
| iconUrl: 'https://cdn-icons-png.flaticon.com/512/447/447031.png', |
| iconSize: [25, 25], |
| iconAnchor: [12, 12] |
| })); |
| }); |
| </script> |
| </div> |
| |
| <div class="mt-4"> |
| <p class="text-sm text-gray-600">There are currently 47 active ARGO floats in the Indian Ocean region. Click on any marker to see float details.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="user-message flex justify-end"> |
| <div class="flex-1 max-w-[80%]"> |
| <div class="bg-blue-100 p-4 rounded-lg"> |
| <p>Show a table comparing salinity at different depths for float 2902304</p> |
| </div> |
| </div> |
| <div class="flex-shrink-0 ml-3"> |
| <div class="bg-blue-700 text-white rounded-full w-8 h-8 flex items-center justify-center"> |
| <i data-feather="user" class="w-4 h-4"></i> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bot-message flex"> |
| <div class="flex-shrink-0 mr-3"> |
| <div class="bg-blue-100 text-blue-800 rounded-full w-8 h-8 flex items-center justify-center"> |
| <i data-feather="cpu" class="w-4 h-4"></i> |
| </div> |
| </div> |
| <div class="flex-1"> |
| <div class="bg-gray-50 p-4 rounded-lg"> |
| <p>Here's the salinity data at different depths for ARGO float 2902304:</p> |
| |
| |
| <div class="mt-4 overflow-x-auto"> |
| <table class="min-w-full divide-y divide-gray-200"> |
| <thead class="bg-gray-50"> |
| <tr> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Depth (m)</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Salinity (PSU)</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Temperature (°C)</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th> |
| </tr> |
| </thead> |
| <tbody class="bg-white divide-y divide-gray-200"> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">34.56</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">28.7</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-05-28</td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">50</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">35.12</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">25.3</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-05-28</td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">100</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">35.45</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">20.1</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-05-28</td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">200</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">35.67</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15.8</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-05-28</td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">500</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">35.72</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">8.5</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-05-28</td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| <div class="mt-4"> |
| <button class="text-sm bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md font-medium transition duration-300 flex items-center space-x-2"> |
| <i data-feather="download" class="w-4 h-4"></i> |
| <span>Download Data (CSV)</span> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="typing-indicator flex hidden"> |
| <div class="flex-shrink-0 mr-3"> |
| <div class="bg-blue-100 text-blue-800 rounded-full w-8 h-8 flex items-center justify-center"> |
| <i data-feather="cpu" class="w-4 h-4"></i> |
| </div> |
| </div> |
| <div class="flex-1"> |
| <div class="bg-gray-50 p-4 rounded-lg"> |
| <div class="flex items-center space-x-2"> |
| <div class="typing-dots flex space-x-1"> |
| <span></span> |
| <span></span> |
| <span></span> |
| </div> |
| <span class="text-sm text-gray-600">FloatChat is typing...</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="chat-input-container"> |
| <form class="chat-input"> |
| <textarea placeholder="Ask about ARGO data..." rows="1"></textarea> |
| <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md font-medium transition duration-300 flex items-center justify-center"> |
| <i data-feather="send" class="w-4 h-4"></i> |
| </button> |
| </form> |
| <div class="quick-replies"> |
| <div class="quick-reply">Show salinity profiles</div> |
| <div class="quick-reply">Compare temperature trends</div> |
| <div class="quick-reply">Map of ARGO floats</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| |
| <footer class="bg-gray-800 text-white py-6 mt-auto"> |
| <div class="container mx-auto px-4"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="mb-4 md:mb-0"> |
| <p class="text-sm">© 2023 Ministry of Earth Sciences, Government of India. All Rights Reserved.</p> |
| </div> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-sm hover:underline">Privacy Policy</a> |
| <a href="#" class="text-sm hover:underline">Terms of Service</a> |
| <a href="#" class="text-sm hover:underline">Contact Us</a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| AOS.init(); |
| feather.replace(); |
| |
| // Auto-expand textarea |
| const textarea = document.querySelector('textarea'); |
| textarea.addEventListener('input', function() { |
| this.style.height = 'auto'; |
| this.style.height = (this.scrollHeight) + 'px'; |
| }); |
| |
| // Check for quick chat input from home page |
| const quickChatInput = sessionStorage.getItem('quickChatInput'); |
| if (quickChatInput) { |
| // Add the quick input as a user message |
| const messagesContainer = document.querySelector('.chat-messages'); |
| const userMessage = document.createElement('div'); |
| userMessage.className = 'user-message flex justify-end'; |
| userMessage.innerHTML = ` |
| <div class="flex-1 max-w-[80%]"> |
| <div class="bg-blue-100 p-4 rounded-lg"> |
| <p>${quickChatInput}</p> |
| </div> |
| </div> |
| <div class="flex-shrink-0 ml-3"> |
| <div class="bg-blue-700 text-white rounded-full w-8 h-8 flex items-center justify-center"> |
| <i data-feather="user" class="w-4 h-4"></i> |
| </div> |
| </div> |
| `; |
| messagesContainer.appendChild(userMessage); |
| |
| // Clear the stored input |
| sessionStorage.removeItem('quickChatInput'); |
| |
| // Show typing indicator |
| showTyping(); |
| |
| // Generate mock response after delay |
| setTimeout(() => { |
| generateMockResponse(quickChatInput); |
| }, 1500); |
| } |
| |
| // Auto-scroll to bottom of chat |
| const messagesContainer = document.querySelector('.chat-messages'); |
| function scrollToBottom() { |
| messagesContainer.scrollTop = messagesContainer.scrollHeight; |
| } |
| scrollToBottom(); |
| |
| // Generate mock response based on input |
| function generateMockResponse(input) { |
| const messagesContainer = document.querySelector('.chat-messages'); |
| const botMessage = document.createElement('div'); |
| botMessage.className = 'bot-message flex'; |
| |
| let responseContent = ''; |
| if (input.toLowerCase().includes('temperature')) { |
| responseContent = ` |
| <div class="bg-gray-50 p-4 rounded-lg"> |
| <p>Here are temperature profiles matching your query:</p> |
| <div class="mt-4 text-sm text-gray-600"> |
| <p>• Surface temperature: 28-30°C</p> |
| <p>• 50m depth: 25-27°C</p> |
| <p>• 100m depth: 20-22°C</p> |
| <p>• 200m depth: 15-17°C</p> |
| </div> |
| <p class="mt-2 text-sm">Would you like to see this data visualized on a graph?</p> |
| </div> |
| `; |
| } else if (input.toLowerCase().includes('salinity')) { |
| responseContent = ` |
| <div class="bg-gray-50 p-4 rounded-lg"> |
| <p>Here are salinity measurements:</p> |
| <div class="mt-4 text-sm text-gray-600"> |
| <p>• Surface salinity: 34-35 PSU</p> |
| <p>• 50m depth: 35-36 PSU</p> |
| <p>• 100m depth: 36-37 PSU</p> |
| </div> |
| <p class="mt-2 text-sm">I can show you a time series comparison if you'd like.</p> |
| </div> |
| `; |
| } else if (input.toLowerCase().includes('map') || input.toLowerCase().includes('location')) { |
| responseContent = ` |
| <div class="bg-gray-50 p-4 rounded-lg"> |
| <p>Here are ARGO float locations in the Indian Ocean region:</p> |
| <div class="mt-4 text-sm text-gray-600"> |
| <p>• 8°N, 72°E - Float ID: 2902304</p> |
| <p>• 12°N, 68°E - Float ID: 2902305</p> |
| <p>• 15°N, 80°E - Float ID: 2902306</p> |
| </div> |
| <p class="mt-2 text-sm">Would you like to see these on an interactive map?</p> |
| </div> |
| `; |
| } else { |
| responseContent = ` |
| <div class="bg-gray-50 p-4 rounded-lg"> |
| <p>I can help you explore ARGO float data including:</p> |
| <div class="mt-2 text-sm text-gray-600"> |
| <p>• Temperature profiles</p> |
| <p>• Salinity measurements</p> |
| <p>• Float locations and trajectories</p> |
| <p>• Time series comparisons</p> |
| </div> |
| <p class="mt-2 text-sm">Try asking about specific parameters or regions.</p> |
| </div> |
| `; |
| } |
| |
| botMessage.innerHTML = ` |
| <div class="flex-shrink-0 mr-3"> |
| <div class="bg-blue-100 text-blue-800 rounded-full w-8 h-8 flex items-center justify-center"> |
| <i data-feather="cpu" class="w-4 h-4"></i> |
| </div> |
| </div> |
| <div class="flex-1"> |
| ${responseContent} |
| </div> |
| `; |
| |
| messagesContainer.appendChild(botMessage); |
| feather.replace(); |
| scrollToBottom(); |
| |
| // Animate new message |
| anime({ |
| targets: botMessage, |
| opacity: [0, 1], |
| translateX: [-20, 0], |
| duration: 300 |
| }); |
| } |
| |
| // Simulate typing indicator |
| function showTyping() { |
| const typing = document.querySelector('.typing-indicator'); |
| typing.classList.remove('hidden'); |
| |
| setTimeout(() => { |
| typing.classList.add('hidden'); |
| // Add new bot message here |
| }, 1500); |
| } |
| |
| // Handle form submission |
| document.querySelector('form').addEventListener('submit', (e) => { |
| e.preventDefault(); |
| const input = e.target.querySelector('input'); |
| const message = input.value.trim(); |
| |
| if (message) { |
| // Add user message |
| const messagesContainer = document.querySelector('.chat-messages'); |
| const userMessage = document.createElement('div'); |
| userMessage.className = 'user-message flex justify-end'; |
| userMessage.innerHTML = ` |
| <div class="flex-1 max-w-[80%]"> |
| <div class="bg-blue-100 p-4 rounded-lg"> |
| <p>${message}</p> |
| </div> |
| </div> |
| <div class="flex-shrink-0 ml-3"> |
| <div class="bg-blue-700 text-white rounded-full w-8 h-8 flex items-center justify-center"> |
| <i data-feather="user" class="w-4 h-4"></i> |
| </div> |
| </div> |
| `; |
| messagesContainer.appendChild(userMessage); |
| |
| // Scroll to bottom |
| messagesContainer.scrollTop = messagesContainer.scrollHeight; |
| |
| // Clear input |
| input.value = ''; |
| |
| // Show typing indicator |
| showTyping(); |
| |
| // Animate new message |
| anime({ |
| targets: userMessage, |
| opacity: [0, 1], |
| translateX: [20, 0], |
| duration: 300 |
| }); |
| |
| // Replace feather icons |
| feather.replace(); |
| } |
| }); |
| </script> |
| </body> |
| </html> |
|
|
