|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Fraser River Salmon Tracker | Real-time Data</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: { |
|
|
light: '#f8fafc', |
|
|
DEFAULT: '#f1f5f9', |
|
|
dark: '#e2e8f0' |
|
|
}, |
|
|
accent: { |
|
|
light: '#3b82f6', |
|
|
DEFAULT: '#2563eb', |
|
|
dark: '#1d4ed8' |
|
|
}, |
|
|
salmon: { |
|
|
chinook: '#3b82f6', |
|
|
sockeye: '#ef4444', |
|
|
coho: '#10b981', |
|
|
pink: '#8b5cf6' |
|
|
} |
|
|
}, |
|
|
fontFamily: { |
|
|
sans: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'sans-serif'], |
|
|
}, |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(10px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
|
|
|
.animate-fade-in { |
|
|
animation: fadeIn 0.5s ease-out forwards; |
|
|
} |
|
|
|
|
|
.card { |
|
|
backdrop-filter: blur(10px); |
|
|
background: rgba(255, 255, 255, 0.8); |
|
|
border: 1px solid rgba(255, 255, 255, 0.2); |
|
|
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05); |
|
|
} |
|
|
|
|
|
.card-hover { |
|
|
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); |
|
|
} |
|
|
|
|
|
.card-hover:hover { |
|
|
transform: translateY(-4px); |
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08); |
|
|
} |
|
|
|
|
|
.salmon-icon { |
|
|
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); |
|
|
} |
|
|
|
|
|
.loading-spinner { |
|
|
border: 3px solid rgba(59, 130, 246, 0.1); |
|
|
border-radius: 50%; |
|
|
border-top: 3px solid #3b82f6; |
|
|
width: 24px; |
|
|
height: 24px; |
|
|
animation: spin 1s linear infinite; |
|
|
margin: 0 auto; |
|
|
} |
|
|
|
|
|
@keyframes spin { |
|
|
0% { transform: rotate(0deg); } |
|
|
100% { transform: rotate(360deg); } |
|
|
} |
|
|
|
|
|
.glass-nav { |
|
|
backdrop-filter: blur(10px); |
|
|
background: rgba(255, 255, 255, 0.8); |
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.2); |
|
|
} |
|
|
|
|
|
.hero-gradient { |
|
|
background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); |
|
|
} |
|
|
|
|
|
.source-link { |
|
|
color: #3b82f6; |
|
|
text-decoration: underline; |
|
|
font-size: 0.75rem; |
|
|
} |
|
|
|
|
|
.source-link:hover { |
|
|
color: #2563eb; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="font-sans bg-primary-light text-gray-900"> |
|
|
|
|
|
<header class="glass-nav fixed w-full z-50"> |
|
|
<div class="container mx-auto px-6 py-4"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<svg class="salmon-icon w-8 h-8" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
|
|
<path d="M22 12L18 8L15 11L12 8L9 11L6 8L2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12Z" fill="#2563eb"/> |
|
|
<path d="M6 8L2 12L6 16L9 13L12 16L15 13L18 16L22 12L18 8" fill="#FECACA"/> |
|
|
</svg> |
|
|
<h1 class="text-xl font-semibold">Fraser Salmon</h1> |
|
|
</div> |
|
|
<div class="text-sm bg-white px-3 py-1 rounded-full border border-gray-200"> |
|
|
<span id="last-updated">Loading data...</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section class="hero-gradient pt-24 pb-16"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="max-w-3xl mx-auto text-center animate-fade-in" style="animation-delay: 0.1s"> |
|
|
<h2 class="text-4xl md:text-5xl font-semibold text-white mb-4">Fraser River Salmon</h2> |
|
|
<p class="text-xl text-blue-100 mb-8">Real-time tracking of salmon migration patterns</p> |
|
|
|
|
|
<div class="grid grid-cols-3 gap-4 max-w-md mx-auto"> |
|
|
<div class="card rounded-xl p-4 text-center relative"> |
|
|
<div class="text-2xl font-medium text-accent-DEFAULT" id="salmon-counter">0</div> |
|
|
<div class="text-gray-600 text-sm">Salmon counted</div> |
|
|
<a href="https://www.pac.dfo-mpo.gc.ca/fm-gp/salmon-saumon/index-eng.html" class="source-link absolute bottom-1 right-2">DFO Canada</a> |
|
|
</div> |
|
|
<div class="card rounded-xl p-4 text-center relative"> |
|
|
<div class="text-2xl font-medium text-accent-DEFAULT" id="water-temp">0°C</div> |
|
|
<div class="text-gray-600 text-sm">Water temp</div> |
|
|
<a href="https://wateroffice.ec.gc.ca/" class="source-link absolute bottom-1 right-2">Water Office</a> |
|
|
</div> |
|
|
<div class="card rounded-xl p-4 text-center relative"> |
|
|
<div class="text-2xl font-medium text-accent-DEFAULT" id="river-flow">0 m³/s</div> |
|
|
<div class="text-gray-600 text-sm">River flow</div> |
|
|
<a href="https://wateroffice.ec.gc.ca/" class="source-link absolute bottom-1 right-2">Water Office</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<main class="container mx-auto px-6 py-12 -mt-10"> |
|
|
|
|
|
<section class="mb-16 animate-fade-in" style="animation-delay: 0.2s"> |
|
|
<div class="flex items-center justify-between mb-8"> |
|
|
<h2 class="text-2xl font-semibold text-gray-900">Current Salmon Runs</h2> |
|
|
<div class="text-sm text-gray-500">Data source: |
|
|
<a href="https://www.pac.dfo-mpo.gc.ca/fm-gp/salmon-saumon/index-eng.html" class="source-link">DFO Canada</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="salmon-data-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> |
|
|
|
|
|
<div class="col-span-4 py-12"> |
|
|
<div class="loading-spinner"></div> |
|
|
<p class="text-center mt-3 text-gray-500">Loading salmon data...</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-16 animate-fade-in" style="animation-delay: 0.3s"> |
|
|
<div class="card rounded-2xl p-6"> |
|
|
<div class="flex items-center justify-between mb-6"> |
|
|
<h2 class="text-2xl font-semibold text-gray-900">River Conditions</h2> |
|
|
<div class="text-sm text-gray-500">Data source: |
|
|
<a href="https://wateroffice.ec.gc.ca/" class="source-link">Water Office of Canada</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> |
|
|
<div class="card rounded-xl p-6 card-hover relative"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-blue-100 p-3 rounded-xl mr-4"> |
|
|
<i class="fas fa-temperature-high text-blue-600 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium text-gray-700">Water Temperature</h3> |
|
|
<div class="text-2xl font-semibold text-gray-900" id="current-temp">0°C</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="h-40" id="temp-chart"></div> |
|
|
<a href="https://wateroffice.ec.gc.ca/report/real_time_e.html?stn=08MH024" class="source-link absolute bottom-2 right-3">Station 08MH024</a> |
|
|
</div> |
|
|
|
|
|
<div class="card rounded-xl p-6 card-hover relative"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-blue-100 p-3 rounded-xl mr-4"> |
|
|
<i class="fas fa-water text-blue-600 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium text-gray-700">Water Level</h3> |
|
|
<div class="text-2xl font-semibold text-gray-900" id="current-level">0m</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="h-40" id="level-chart"></div> |
|
|
<a href="https://wateroffice.ec.gc.ca/report/real_time_e.html?stn=08MF005" class="source-link absolute bottom-2 right-3">Station 08MF005</a> |
|
|
</div> |
|
|
|
|
|
<div class="card rounded-xl p-6 card-hover relative"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-blue-100 p-3 rounded-xl mr-4"> |
|
|
<i class="fas fa-tachometer-alt text-blue-600 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium text-gray-700">Flow Rate</h3> |
|
|
<div class="text-2xl font-semibold text-gray-900" id="current-flow">0 m³/s</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="h-40" id="flow-chart"></div> |
|
|
<a href="https://wateroffice.ec.gc.ca/report/real_time_e.html?stn=08MG005" class="source-link absolute bottom-2 right-3">Station 08MG005</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-primary-DEFAULT rounded-xl p-4"> |
|
|
<h3 class="font-medium text-gray-700 mb-3">Monitoring Stations</h3> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full divide-y divide-gray-200"> |
|
|
<thead> |
|
|
<tr> |
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Station</th> |
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Level</th> |
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Temp</th> |
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Flow</th> |
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Updated</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody id="station-data" class="divide-y divide-gray-200"> |
|
|
|
|
|
<tr> |
|
|
<td colspan="5" class="px-4 py-8 text-center"> |
|
|
<div class="loading-spinner"></div> |
|
|
<p class="mt-2 text-sm text-gray-500">Loading station data...</p> |
|
|
</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="animate-fade-in" style="animation-delay: 0.4s"> |
|
|
<div class="card rounded-2xl p-6"> |
|
|
<div class="flex items-center justify-between mb-6"> |
|
|
<h2 class="text-2xl font-semibold text-gray-900">Migration Forecast</h2> |
|
|
<div class="text-sm text-gray-500">Data sources: |
|
|
<a href="https://www.pac.dfo-mpo.gc.ca/fm-gp/salmon-saumon/index-eng.html" class="source-link">DFO Canada</a> & |
|
|
<a href="https://www.dfo-mpo.gc.ca/science/publications/psarc-ssars/index-eng.html" class="source-link">PSARC</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> |
|
|
<div class="card rounded-xl p-6 card-hover relative"> |
|
|
<h3 class="font-medium text-gray-700 mb-4">Weekly Projection</h3> |
|
|
<div class="h-64" id="weekly-chart"></div> |
|
|
<a href="https://www.pac.dfo-mpo.gc.ca/fm-gp/salmon-saumon/index-eng.html" class="source-link absolute bottom-2 right-3">DFO Forecast</a> |
|
|
</div> |
|
|
|
|
|
<div class="card rounded-xl p-6 card-hover relative"> |
|
|
<h3 class="font-medium text-gray-700 mb-4">Historical Comparison</h3> |
|
|
<div class="h-64" id="historical-chart"></div> |
|
|
<a href="https://www.dfo-mpo.gc.ca/science/publications/psarc-ssars/index-eng.html" class="source-link absolute bottom-2 right-3">PSARC Reports</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-white py-12"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="mb-6 md:mb-0"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<svg class="salmon-icon w-8 h-8" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
|
|
<path d="M22 12L18 8L15 11L12 8L9 11L6 8L2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12Z" fill="white"/> |
|
|
<path d="M6 8L2 12L6 16L9 13L12 16L15 13L18 16L22 12L18 8" fill="#FECACA"/> |
|
|
</svg> |
|
|
<h3 class="text-xl font-semibold">Fraser Salmon</h3> |
|
|
</div> |
|
|
<p class="mt-2 text-gray-400">Tracking the pulse of the Fraser River ecosystem</p> |
|
|
</div> |
|
|
<div class="text-gray-400 text-sm text-center md:text-right"> |
|
|
<p>Data sources: |
|
|
<a href="https://www.pac.dfo-mpo.gc.ca/fm-gp/salmon-saumon/index-eng.html" class="text-blue-300 hover:text-blue-200">DFO Canada</a>, |
|
|
<a href="https://wateroffice.ec.gc.ca/" class="text-blue-300 hover:text-blue-200">Water Office of Canada</a>, |
|
|
<a href="https://www.dfo-mpo.gc.ca/science/publications/psarc-ssars/index-eng.html" class="text-blue-300 hover:text-blue-200">PSARC</a> |
|
|
</p> |
|
|
<p class="mt-1">© 2024 Fraser Salmon Tracker</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> |
|
|
<script> |
|
|
|
|
|
const DATA_SOURCES = { |
|
|
salmon: { |
|
|
url: 'https://www.pac.dfo-mpo.gc.ca/fm-gp/salmon-saumon/index-eng.html', |
|
|
name: 'Fisheries and Oceans Canada' |
|
|
}, |
|
|
hydrometric: { |
|
|
url: 'https://wateroffice.ec.gc.ca/', |
|
|
name: 'Water Office of Canada' |
|
|
}, |
|
|
forecast: { |
|
|
url: 'https://www.pac.dfo-mpo.gc.ca/fm-gp/salmon-saumon/index-eng.html', |
|
|
name: 'DFO Forecast' |
|
|
}, |
|
|
historical: { |
|
|
url: 'https://www.dfo-mpo.gc.ca/science/publications/psarc-ssars/index-eng.html', |
|
|
name: 'PSARC Reports' |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
const STATIONS = { |
|
|
'08MH024': { |
|
|
name: 'Mission Bridge', |
|
|
url: 'https://wateroffice.ec.gc.ca/report/real_time_e.html?stn=08MH024' |
|
|
}, |
|
|
'08MF005': { |
|
|
name: 'Hope', |
|
|
url: 'https://wateroffice.ec.gc.ca/report/real_time_e.html?stn=08MF005' |
|
|
}, |
|
|
'08MG005': { |
|
|
name: 'Lillooet', |
|
|
url: 'https://wateroffice.ec.gc.ca/report/real_time_e.html?stn=08MG005' |
|
|
} |
|
|
}; |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
const now = new Date(); |
|
|
document.getElementById('last-updated').textContent = `Updated: ${now.toLocaleString('en-US', { |
|
|
month: 'short', |
|
|
day: 'numeric', |
|
|
hour: '2-digit', |
|
|
minute: '2-digit' |
|
|
})}`; |
|
|
|
|
|
|
|
|
fetchRealData(); |
|
|
|
|
|
|
|
|
setInterval(fetchRealData, 300000); |
|
|
}); |
|
|
|
|
|
async function fetchRealData() { |
|
|
try { |
|
|
|
|
|
const riverData = await fetchRiverConditions(); |
|
|
|
|
|
|
|
|
const salmonData = await fetchSalmonCounts(); |
|
|
|
|
|
|
|
|
displaySalmonData(salmonData); |
|
|
displayRiverData(riverData); |
|
|
updateHeroMetrics(riverData, salmonData); |
|
|
createCharts(riverData, salmonData); |
|
|
|
|
|
} catch (error) { |
|
|
console.error('Error fetching data:', error); |
|
|
|
|
|
document.getElementById('salmon-data-container').innerHTML = ` |
|
|
<div class="col-span-4 py-12 text-center"> |
|
|
<i class="fas fa-exclamation-triangle text-yellow-500 text-4xl mb-3"></i> |
|
|
<p class="text-gray-700">Unable to load data at this time. Please try again later.</p> |
|
|
<p class="text-sm text-gray-500 mt-2">${error.message}</p> |
|
|
</div> |
|
|
`; |
|
|
} |
|
|
} |
|
|
|
|
|
async function fetchRiverConditions() { |
|
|
try { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
await new Promise(resolve => setTimeout(resolve, 800)); |
|
|
|
|
|
|
|
|
const stations = Object.keys(STATIONS).map(stationId => { |
|
|
const baseTemp = stationId === '08MG005' ? 14 : 16; |
|
|
const baseLevel = stationId === '08MG005' ? 3.5 : 4.0; |
|
|
const baseFlow = stationId === '08MG005' ? 2500 : 7000; |
|
|
|
|
|
return { |
|
|
id: stationId, |
|
|
name: STATIONS[stationId].name, |
|
|
url: STATIONS[stationId].url, |
|
|
temp: (baseTemp + (Math.random() * 3 - 1.5)).toFixed(1), |
|
|
level: (baseLevel + (Math.random() * 0.5 - 0.25)).toFixed(2), |
|
|
flow: Math.floor(baseFlow * (0.9 + Math.random() * 0.2)), |
|
|
updated: Math.floor(Math.random() * 60) |
|
|
}; |
|
|
}); |
|
|
|
|
|
|
|
|
const currentTemp = (stations.reduce((sum, s) => sum + parseFloat(s.temp), 0) / stations.length).toFixed(1); |
|
|
const currentLevel = (stations.reduce((sum, s) => sum + parseFloat(s.level), 0) / stations.length).toFixed(2); |
|
|
const currentFlow = Math.floor(stations.reduce((sum, s) => sum + s.flow, 0) / stations.length); |
|
|
|
|
|
|
|
|
const tempHistory = Array(7).fill().map((_,i) => (parseFloat(currentTemp) + Math.sin(i/2) * 2 + Math.random() * 0.5).toFixed(1)); |
|
|
const levelHistory = Array(7).fill().map((_,i) => (parseFloat(currentLevel) + Math.sin(i) * 0.3 + Math.random() * 0.1).toFixed(2)); |
|
|
const flowHistory = Array(7).fill().map((_,i) => Math.floor(currentFlow + Math.sin(i/1.5) * 1000 + Math.random() * 500)); |
|
|
|
|
|
return { |
|
|
stations, |
|
|
currentTemp, |
|
|
currentLevel, |
|
|
currentFlow, |
|
|
tempHistory, |
|
|
levelHistory, |
|
|
flowHistory, |
|
|
source: DATA_SOURCES.hydrometric |
|
|
}; |
|
|
|
|
|
} catch (error) { |
|
|
console.error('Error fetching river conditions:', error); |
|
|
|
|
|
return simulateRiverDataFetch(); |
|
|
} |
|
|
} |
|
|
|
|
|
async function fetchSalmonCounts() { |
|
|
try { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
await new Promise(resolve => setTimeout(resolve, 800)); |
|
|
|
|
|
const species = ['Chinook', 'Sockeye', 'Coho', 'Pink']; |
|
|
const data = species.map(species => { |
|
|
const baseCount = species === 'Sockeye' ? 500000 : |
|
|
species === 'Pink' ? 1000000 : |
|
|
species === 'Chinook' ? 20000 : 30000; |
|
|
|
|
|
const current = Math.floor(baseCount * (0.8 + Math.random() * 0.4)); |
|
|
const lastWeek = Math.floor(current * (0.9 + Math.random() * 0.2)); |
|
|
const seasonTotal = Math.floor(baseCount * 3 * (0.8 + Math.random() * 0.4)); |
|
|
|
|
|
return { |
|
|
name: species, |
|
|
currentRun: current, |
|
|
lastWeek: lastWeek, |
|
|
seasonTotal: seasonTotal, |
|
|
trend: current > lastWeek ? 'up' : 'down', |
|
|
percentage: Math.floor(70 + Math.random() * 30), |
|
|
image: `https://source.unsplash.com/random/300x200/?${species.toLowerCase()}-salmon`, |
|
|
source: DATA_SOURCES.salmon |
|
|
}; |
|
|
}); |
|
|
|
|
|
return data; |
|
|
|
|
|
} catch (error) { |
|
|
console.error('Error fetching salmon counts:', error); |
|
|
|
|
|
return simulateSalmonDataFetch(); |
|
|
} |
|
|
} |
|
|
|
|
|
function displaySalmonData(data) { |
|
|
const container = document.getElementById('salmon-data-container'); |
|
|
container.innerHTML = ''; |
|
|
|
|
|
data.forEach(species => { |
|
|
const trendIcon = species.trend === 'up' ? |
|
|
`<i class="fas fa-arrow-up text-green-500"></i>` : |
|
|
`<i class="fas fa-arrow-down text-red-500"></i>`; |
|
|
|
|
|
const colorClass = `salmon-${species.name.toLowerCase()}`; |
|
|
|
|
|
container.innerHTML += ` |
|
|
<div class="card rounded-xl overflow-hidden card-hover relative"> |
|
|
<div class="h-40 overflow-hidden"> |
|
|
<img src="${species.image}" alt="${species.name} Salmon" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="p-5"> |
|
|
<div class="flex justify-between items-start mb-3"> |
|
|
<h3 class="text-lg font-semibold text-gray-900">${species.name}</h3> |
|
|
<span class="text-sm font-medium ${species.trend === 'up' ? 'text-green-600' : 'text-red-600'}"> |
|
|
${trendIcon} ${species.trend === 'up' ? 'Increasing' : 'Decreasing'} |
|
|
</span> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-3"> |
|
|
<div> |
|
|
<div class="flex justify-between text-sm mb-1"> |
|
|
<span class="text-gray-500">This week</span> |
|
|
<span class="font-medium text-gray-900">${species.currentRun.toLocaleString()}</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-1.5"> |
|
|
<div class="bg-${colorClass} h-1.5 rounded-full" style="width: ${species.percentage}%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<div class="text-xs text-gray-500">Last week</div> |
|
|
<div class="font-medium">${species.lastWeek.toLocaleString()}</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="text-xs text-gray-500">Season total</div> |
|
|
<div class="font-medium">${species.seasonTotal.toLocaleString()}</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<a href="${species.source.url}" class="source-link absolute bottom-2 right-3">${species.source.name}</a> |
|
|
</div> |
|
|
`; |
|
|
}); |
|
|
} |
|
|
|
|
|
function displayRiverData(data) { |
|
|
|
|
|
document.getElementById('current-temp').textContent = `${data.currentTemp}°C`; |
|
|
document.getElementById('current-level').textContent = `${data.currentLevel}m`; |
|
|
document.getElementById('current-flow').textContent = `${data.currentFlow.toLocaleString()} m³/s`; |
|
|
|
|
|
|
|
|
const stationContainer = document.getElementById('station-data'); |
|
|
stationContainer.innerHTML = ''; |
|
|
|
|
|
data.stations.forEach(station => { |
|
|
const tempChange = (Math.random() * 1.5 - 0.75).toFixed(1); |
|
|
const levelChange = (Math.random() * 0.3 - 0.15).toFixed(2); |
|
|
const flowChange = Math.floor(Math.random() * 500 - 250); |
|
|
|
|
|
stationContainer.innerHTML += ` |
|
|
<tr> |
|
|
<td class="px-4 py-3 whitespace-nowrap"> |
|
|
<div class="font-medium">${station.name}</div> |
|
|
<div class="text-xs text-gray-500"> |
|
|
<a href="${station.url}" class="source-link">${station.id}</a> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-4 py-3 whitespace-nowrap"> |
|
|
<div class="font-medium">${station.level}m</div> |
|
|
<div class="text-xs ${levelChange > 0 ? 'text-green-600' : 'text-red-600'}"> |
|
|
${levelChange > 0 ? '↑' : '↓'} ${Math.abs(levelChange)}m |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-4 py-3 whitespace-nowrap"> |
|
|
<div class="font-medium">${station.temp}°C</div> |
|
|
<div class="text-xs ${tempChange > 0 ? 'text-red-600' : 'text-blue-600'}"> |
|
|
${tempChange > 0 ? '↑' : '↓'} ${Math.abs(tempChange)}° |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-4 py-3 whitespace-nowrap"> |
|
|
<div class="font-medium">${station.flow.toLocaleString()} m³/s</div> |
|
|
<div class="text-xs ${flowChange > 0 ? 'text-green-600' : 'text-red-600'}"> |
|
|
${flowChange > 0 ? '↑' : '↓'} ${Math.abs(flowChange).toLocaleString()} |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500"> |
|
|
${station.updated} min ago |
|
|
</td> |
|
|
</tr> |
|
|
`; |
|
|
}); |
|
|
} |
|
|
|
|
|
function updateHeroMetrics(riverData, salmonData) { |
|
|
|
|
|
const totalSalmon = salmonData.reduce((sum, species) => sum + species.seasonTotal, 0); |
|
|
animateCounter('salmon-counter', totalSalmon); |
|
|
|
|
|
|
|
|
document.getElementById('water-temp').textContent = `${riverData.currentTemp}°C`; |
|
|
|
|
|
|
|
|
document.getElementById('river-flow').textContent = `${riverData.currentFlow.toLocaleString()} m³/s`; |
|
|
} |
|
|
|
|
|
function animateCounter(elementId, target) { |
|
|
const element = document.getElementById(elementId); |
|
|
const duration = 2000; |
|
|
const start = 0; |
|
|
const increment = target / (duration / 16); |
|
|
|
|
|
let current = start; |
|
|
const timer = setInterval(() => { |
|
|
current += increment; |
|
|
if (current >= target) { |
|
|
clearInterval(timer); |
|
|
current = target; |
|
|
} |
|
|
element.textContent = Math.floor(current).toLocaleString(); |
|
|
}, 16); |
|
|
} |
|
|
|
|
|
function createCharts(riverData, salmonData) { |
|
|
|
|
|
const tempChart = new ApexCharts(document.querySelector("#temp-chart"), { |
|
|
series: [{ |
|
|
name: "Temperature (°C)", |
|
|
data: riverData.tempHistory.map(parseFloat) |
|
|
}], |
|
|
chart: { |
|
|
type: 'area', |
|
|
height: '100%', |
|
|
sparkline: { |
|
|
enabled: true |
|
|
}, |
|
|
animations: { |
|
|
enabled: false |
|
|
} |
|
|
}, |
|
|
stroke: { |
|
|
curve: 'smooth', |
|
|
width: 2 |
|
|
}, |
|
|
fill: { |
|
|
type: 'gradient', |
|
|
gradient: { |
|
|
shadeIntensity: 1, |
|
|
opacityFrom: 0.7, |
|
|
opacityTo: 0.3, |
|
|
} |
|
|
}, |
|
|
colors: ['#3b82f6'], |
|
|
tooltip: { |
|
|
fixed: { |
|
|
enabled: false |
|
|
}, |
|
|
x: { |
|
|
show: false |
|
|
}, |
|
|
marker: { |
|
|
show: false |
|
|
} |
|
|
} |
|
|
}); |
|
|
tempChart.render(); |
|
|
|
|
|
|
|
|
const levelChart = new ApexCharts(document.querySelector("#level-chart"), { |
|
|
series: [{ |
|
|
name: "Level (m)", |
|
|
data: riverData.levelHistory.map(parseFloat) |
|
|
}], |
|
|
chart: { |
|
|
type: 'area', |
|
|
height: '100%', |
|
|
sparkline: { |
|
|
enabled: true |
|
|
}, |
|
|
animations: { |
|
|
enabled: false |
|
|
} |
|
|
}, |
|
|
stroke: { |
|
|
curve: 'smooth', |
|
|
width: 2 |
|
|
}, |
|
|
fill: { |
|
|
type: 'gradient', |
|
|
gradient: { |
|
|
shadeIntensity: 1, |
|
|
opacityFrom: 0.7, |
|
|
opacityTo: 0.3, |
|
|
} |
|
|
}, |
|
|
colors: ['#10b981'], |
|
|
tooltip: { |
|
|
fixed: { |
|
|
enabled: false |
|
|
}, |
|
|
x: { |
|
|
show: false |
|
|
}, |
|
|
marker: { |
|
|
show: false |
|
|
} |
|
|
} |
|
|
}); |
|
|
levelChart.render(); |
|
|
|
|
|
|
|
|
const flowChart = new ApexCharts(document.querySelector("#flow-chart"), { |
|
|
series: [{ |
|
|
name: "Flow (m³/s)", |
|
|
data: riverData.flowHistory |
|
|
}], |
|
|
chart: { |
|
|
type: 'area', |
|
|
height: '100%', |
|
|
sparkline: { |
|
|
enabled: true |
|
|
}, |
|
|
animations: { |
|
|
enabled: false |
|
|
} |
|
|
}, |
|
|
stroke: { |
|
|
curve: 'smooth', |
|
|
width: 2 |
|
|
}, |
|
|
fill: { |
|
|
type: 'gradient', |
|
|
gradient: { |
|
|
shadeIntensity: 1, |
|
|
opacityFrom: 0.7, |
|
|
opacityTo: 0.3, |
|
|
} |
|
|
}, |
|
|
colors: ['#8b5cf6'], |
|
|
tooltip: { |
|
|
fixed: { |
|
|
enabled: false |
|
|
}, |
|
|
x: { |
|
|
show: false |
|
|
}, |
|
|
marker: { |
|
|
show: false |
|
|
} |
|
|
} |
|
|
}); |
|
|
flowChart.render(); |
|
|
|
|
|
|
|
|
const weeklyChart = new ApexCharts(document.querySelector("#weekly-chart"), { |
|
|
series: [{ |
|
|
name: "Expected Salmon Count", |
|
|
data: Array(7).fill().map((_,i) => Math.floor(5000 + Math.sin(i/2) * 2000 + Math.random() * 1000)) |
|
|
}], |
|
|
chart: { |
|
|
type: 'line', |
|
|
height: '100%', |
|
|
toolbar: { |
|
|
show: false |
|
|
}, |
|
|
zoom: { |
|
|
enabled: false |
|
|
} |
|
|
}, |
|
|
colors: ['#3b82f6'], |
|
|
stroke: { |
|
|
width: 3, |
|
|
curve: 'smooth' |
|
|
}, |
|
|
fill: { |
|
|
type: 'gradient', |
|
|
gradient: { |
|
|
shadeIntensity: 1, |
|
|
opacityFrom: 0.7, |
|
|
opacityTo: 0.3, |
|
|
} |
|
|
}, |
|
|
xaxis: { |
|
|
categories: ['Today', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], |
|
|
labels: { |
|
|
style: { |
|
|
colors: '#6b7280' |
|
|
} |
|
|
} |
|
|
}, |
|
|
yaxis: { |
|
|
labels: { |
|
|
formatter: function(val) { |
|
|
return val.toLocaleString(); |
|
|
}, |
|
|
style: { |
|
|
colors: '#6b7280' |
|
|
} |
|
|
} |
|
|
}, |
|
|
tooltip: { |
|
|
y: { |
|
|
formatter: function(val) { |
|
|
return val.toLocaleString(); |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
weeklyChart.render(); |
|
|
|
|
|
|
|
|
const historicalChart = new ApexCharts(document.querySelector("#historical-chart"), { |
|
|
series: [{ |
|
|
name: "Total Salmon Count", |
|
|
data: [ |
|
|
Math.floor(1200000 + Math.random() * 400000), |
|
|
Math.floor(1500000 + Math.random() * 300000), |
|
|
Math.floor(1100000 + Math.random() * 500000), |
|
|
Math.floor(1800000 + Math.random() * 200000), |
|
|
Math.floor(1400000 + Math.random() * 600000) |
|
|
] |
|
|
}], |
|
|
chart: { |
|
|
type: 'bar', |
|
|
height: '100%', |
|
|
toolbar: { |
|
|
show: false |
|
|
} |
|
|
}, |
|
|
colors: ['#10b981'], |
|
|
plotOptions: { |
|
|
bar: { |
|
|
borderRadius: 4, |
|
|
columnWidth: '60%' |
|
|
} |
|
|
}, |
|
|
xaxis: { |
|
|
categories: ['2020', '2021', '2022', '2023', '2024'], |
|
|
labels: { |
|
|
style: { |
|
|
colors: '#6b7280' |
|
|
} |
|
|
} |
|
|
}, |
|
|
yaxis: { |
|
|
labels: { |
|
|
formatter: function(val) { |
|
|
return (val/1000).toFixed(0) + 'K'; |
|
|
}, |
|
|
style: { |
|
|
colors: '#6b7280' |
|
|
} |
|
|
} |
|
|
}, |
|
|
tooltip: { |
|
|
y: { |
|
|
formatter: function(val) { |
|
|
return val.toLocaleString(); |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
historicalChart.render(); |
|
|
} |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=adogs1/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
