|
|
<!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> |
|
|
|
