| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>TideSlots | Fraser River Salmon & Tide Tracking</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">TideSlots</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 Tracker</h2> |
| | <p class="text-xl text-blue-100 mb-8">Real-time tracking of salmon migration & tide 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 & Tide 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">Tide 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 & Tide 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">TideSlots</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">Images from <a href="https://unsplash.com/" class="text-blue-300 hover:text-blue-200">Unsplash</a></p> |
| | <p class="mt-1">© 2024 TideSlots 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' |
| | } |
| | }; |
| | |
| | |
| | const SALMON_IMAGES = { |
| | chinook: 'https://images.unsplash.com/photo-1591208200026-7f2f6a1a2e3b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80', |
| | sockeye: 'https://images.unsplash.com/photo-1591208200026-7f2f6a1a2e3b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80', |
| | coho: 'https://images.unsplash.com/photo-1591208200026-7f2f6a1a2e3b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80', |
| | pink: 'https://images.unsplash.com/photo-1591208200026-7f2f6a1a2e3b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80' |
| | }; |
| | |
| | |
| | const DEMO_DATA = { |
| | salmon: [ |
| | { |
| | name: 'Chinook', |
| | key: 'chinook', |
| | currentRun: 18500, |
| | lastWeek: 15200, |
| | seasonTotal: 42000, |
| | trend: 'up', |
| | percentage: 85, |
| | image: SALMON_IMAGES.chinook, |
| | source: DATA_SOURCES.salmon |
| | }, |
| | { |
| | name: 'Sockeye', |
| | key: 'sockeye', |
| | currentRun: 520000, |
| | lastWeek: 480000, |
| | seasonTotal: 1500000, |
| | trend: 'up', |
| | percentage: 75, |
| | image: SALMON_IMAGES.sockeye, |
| | source: DATA_SOURCES.salmon |
| | }, |
| | { |
| | name: 'Coho', |
| | key: 'coho', |
| | currentRun: 32000, |
| | lastWeek: 35000, |
| | seasonTotal: 75000, |
| | trend: 'down', |
| | percentage: 60, |
| | image: SALMON_IMAGES.coho, |
| | source: DATA_SOURCES.salmon |
| | }, |
| | { |
| | name: 'Pink', |
| | key: 'pink', |
| | currentRun: 1100000, |
| | lastWeek: 900000, |
| | seasonTotal: 3000000, |
| | trend: 'up', |
| | percentage: 90, |
| | image: SALMON_IMAGES.pink, |
| | source: DATA_SOURCES.salmon |
| | } |
| | ], |
| | river: { |
| | stations: [ |
| | { |
| | id: '08MH024', |
| | name: 'Mission Bridge', |
| | url: 'https://wateroffice.ec.gc.ca/report/real_time_e.html?stn=08MH024', |
| | temp: '16.5', |
| | level: '4.25', |
| | flow: 7500, |
| | updated: 15 |
| | }, |
| | { |
| | id: '08MF005', |
| | name: 'Hope', |
| | url: 'https://wateroffice.ec.gc.ca/report/real_time_e.html?stn=08MF005', |
| | temp: '15.8', |
| | level: '3.75', |
| | flow: 6800, |
| | updated: 22 |
| | }, |
| | { |
| | id: '08MG005', |
| | name: 'Lillooet', |
| | url: 'https://wateroffice.ec.gc.ca/report/real_time_e.html?stn=08MG005', |
| | temp: '14.2', |
| | level: '3.45', |
| | flow: 2500, |
| | updated: 30 |
| | } |
| | ], |
| | currentTemp: '16.2', |
| | currentLevel: '4.15', |
| | currentFlow: 7200, |
| | tempHistory: [15.8, 16.0, 16.2, 16.1, 16.3, 16.5, 16.4], |
| | levelHistory: [4.05, 4.10, 4.15, 4.20, 4.18, 4.25, 4.22], |
| | flowHistory: [6500, 6800, 7000, 7200, 7100, 7500, 7400], |
| | source: DATA_SOURCES.hydrometric |
| | } |
| | }; |
| | |
| | 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' |
| | })}`; |
| | |
| | |
| | displaySalmonData(DEMO_DATA.salmon); |
| | displayRiverData(DEMO_DATA.river); |
| | updateHeroMetrics(DEMO_DATA.river, DEMO_DATA.salmon); |
| | createCharts(DEMO_DATA.river, DEMO_DATA.salmon); |
| | |
| | |
| | setInterval(() => { |
| | |
| | const now = new Date(); |
| | document.getElementById('last-updated').textContent = `Updated: ${now.toLocaleString('en-US', { |
| | month: 'short', |
| | day: 'numeric', |
| | hour: '2-digit', |
| | minute: '2-digit' |
| | })}`; |
| | }, 300000); |
| | }); |
| | |
| | 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.key}`; |
| | |
| | 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 class="absolute bottom-2 left-2 bg-black bg-opacity-50 text-white text-xs px-2 py-1 rounded"> |
| | Photo: <a href="https://unsplash.com/" class="text-blue-300">Unsplash</a> |
| | </div> |
| | </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.se 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 |
| | }], |
| | 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 |
| | }], |
| | 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: [5200, 5800, 6200, 6500, 7000, 7500, 8000] |
| | }], |
| | 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: [ |
| | 1200000, |
| | 1500000, |
| | 1100000, |
| | 1800000, |
| | 1400000 |
| | ] |
| | }], |
| | 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> |
