safe2swimpcb/index.html at main · DCMedic/safe2swimpcb · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!doctype html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Panama City Beach Flags Today & Gulf Conditions | Know the Gulf</title>
  <meta name="description" content="Check today's Panama City Beach flag, surf, wind, waves and tides, then explore historical PCB beach conditions and vacation-planning data with Know the Gulf.">
  <meta name="robots" content="index,follow,max-image-preview:large,max-snippet:-1,max-video-preview:-1">
  <meta name="author" content="Know the Gulf">
  <meta name="theme-color" content="#087eae">
  <link rel="canonical" href="https://knowthegulf.com/">
  <link rel="icon" href="assets/favicon.svg" type="image/svg+xml">
  <link rel="manifest" href="site.webmanifest">
  <meta property="og:type" content="website">
  <meta property="og:locale" content="en_US">
  <meta property="og:site_name" content="Know the Gulf">
  <meta property="og:title" content="Panama City Beach Flags Today & Gulf Conditions | Know the Gulf">
  <meta property="og:description" content="Today's PCB beach flag plus surf, wind, waves, tides and a growing historical beach-conditions dataset for smarter vacation planning.">
  <meta property="og:url" content="https://knowthegulf.com/">
  <meta property="og:image" content="https://knowthegulf.com/assets/favicon.svg">
  <meta property="og:image:alt" content="Know the Gulf logo">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Panama City Beach Flags Today & Gulf Conditions | Know the Gulf">
  <meta name="twitter:description" content="Check today's PCB flag, Gulf conditions, surf, waves and tides, then explore historical patterns for your next beach trip.">
  <meta name="twitter:image" content="https://knowthegulf.com/assets/favicon.svg">
  <script type="application/ld+json">{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://knowthegulf.com/#organization","name":"Know the Gulf","url":"https://knowthegulf.com/","logo":{"@type":"ImageObject","url":"https://knowthegulf.com/assets/favicon.svg"}},{"@type":"WebSite","@id":"https://knowthegulf.com/#website","url":"https://knowthegulf.com/","name":"Know the Gulf","publisher":{"@id":"https://knowthegulf.com/#organization"},"inLanguage":"en-US"},{"@type":"WebPage","@id":"https://knowthegulf.com/#webpage","url":"https://knowthegulf.com/","name":"Panama City Beach Flags Today & Gulf Conditions","isPartOf":{"@id":"https://knowthegulf.com/#website"},"about":{"@type":"Place","name":"Panama City Beach, Florida"},"inLanguage":"en-US"}]}</script>
  <link rel="stylesheet" href="assets/app.css">
  <script defer src="assets/app.js"></script><script defer src="assets/menu.js"></script>
</head><body><main class="shell">
<header class="hero"><div class="brand"><div class="brandmark"><img src="assets/favicon.svg" alt="Know the Gulf sun, sand, wave, palm and green flag logo" width="76" height="76"></div><div><div class="brand-title">Know the <span>Gulf</span></div><div class="brand-subtitle">Panama City Beach · Florida</div></div></div><div class="hero-copy"><div class="hero-kicker">Know Before You Go.</div><h1>Know the Gulf. <span class="hero-accent">Catch the good beach days.</span></h1><p class="lede">Beach day loading? Check today’s Panama City Beach flag, peek at the surf, wind, waves and tides, then explore how Gulf conditions have behaved across past seasons. Know the Gulf puts the beach-day essentials in one fun, fast dashboard so you can plan smarter, pack the sunscreen, and make the most of every PCB adventure.</p><div class="hero-highlights" aria-label="Know the Gulf highlights"><span>Live PCB flag</span><span>Surf + tide</span><span>Vacation planner</span><span>Growing history</span></div></div></header>
<nav class="location-switcher" aria-label="Choose Gulf Coast location"><div class="location-switcher-label">Explore beaches</div><div class="location-links"><a class="location-link active" href="/" aria-current="page"><span class="location-dot"></span>Panama City Beach</a><a class="location-link" href="/destin/"><span class="location-dot"></span>Destin</a><a class="location-link" href="/okaloosa-island/"><span class="location-dot"></span>Okaloosa Island</a><a class="location-link" href="/navarre-beach/"><span class="location-dot"></span>Navarre Beach</a><a class="location-link" href="/pensacola-beach/"><span class="location-dot"></span>Pensacola Beach</a></div></nav>
<nav class="tabs" aria-label="Know the Gulf sections"><button class="tab active" data-view="today">Today</button><button class="tab" data-view="planner">Vacation Planner</button><div class="more-nav"><button id="moreMenuButton" class="menu-toggle" type="button" aria-expanded="false" aria-controls="moreMenu">More <span aria-hidden="true">▾</span></button><div id="moreMenu" class="more-menu" hidden><button class="tab menu-item" data-view="patterns">Historical Patterns</button><button class="tab menu-item" data-view="science">Research Model</button><button class="tab menu-item" data-view="data">Data & Methods</button></div></div></nav>
<section id="today" class="view active"><div class="flag-card flag-card-wide"><div class="eyebrow flag-eyebrow">Current PCB flag</div><a class="flag-official-link" href="https://www.visitpanamacitybeach.com/stay-pcb-current/" target="_blank" rel="noopener"><div class="flagline"><div id="flagPole" class="flagpole"><span class="flagshape"></span><span class="flagshape" hidden></span></div><div><div id="currentFlag" class="flagname">Loading…</div><div id="currentMeaning" class="muted"></div></div></div><div class="official-hint">Tap the flag for official PCB conditions ↗</div></a><div id="flagFreshness" class="status flag-status">Checking the locally cached official status…</div><div class="pillrow flag-pills"><span class="pill">Beach & Surf Patrol via Visit PCB</span><span class="pill">Auto-polled</span><span class="pill">Historical archive preserved</span></div></div><div class="conditions-head"><div class="eyebrow">Beach conditions now</div><h2>Sun, surf, wind & tide at a glance</h2><p>Live environmental context for Panama City Beach. The posted beach flag remains the public-safety signal to follow.</p></div><div class="grid metrics beach-metrics"><div class="metric"><div class="label">Air temperature</div><div id="liveTemp" class="value">—</div><div id="liveTempSub" class="sub">Current weather context</div></div><div class="metric"><div class="label">Wind / gust</div><div id="liveWind" class="value">—</div><div id="liveWindSub" class="sub">Direction and gusts</div></div><div class="metric"><div class="label">Wave height</div><div id="liveWave" class="value">—</div><div id="liveWaveSub" class="sub">Regional marine model</div></div><div class="metric"><div class="label">Next tide</div><div id="liveTide" class="value">—</div><div id="liveTideSub" class="sub">NOAA 8729136</div></div></div><div id="liveApiStatus" class="status" style="margin-top:12px">Loading weather, wave and NOAA tide context…</div></section>
<section id="planner" class="view"><div class="card"><h2>Vacation Planner</h2><p>Choose a future trip window. The planner compares those calendar dates with every available historical year, using a ±7-day seasonal neighborhood to increase the evidence sample while keeping the comparison close to your travel dates.</p><div class="controls"><div class="control"><label for="tripStart">Trip start</label><input id="tripStart" type="date"></div><div class="control"><label for="tripEnd">Trip end</label><input id="tripEnd" type="date"></div><button id="planTrip" class="btn primary">Analyze trip window</button></div><div id="plannerResult" class="status">Select dates to build a historical trip profile.</div></div><div id="plannerMetrics" class="grid metrics"></div><div class="grid two"><div class="card"><h3>Historical flag distribution</h3><div class="chart"><canvas id="plannerFlagChart"></canvas></div></div><div class="card"><h3>Typical environmental context</h3><div id="plannerEnv" class="status">Environmental averages will appear once the scheduled enrichment pipeline has populated finalized records.</div></div></div><div class="card"><h3>What this means for a tourist</h3><div id="plannerNarrative" class="insight">The planner reports observed historical frequency, sample size, coverage, and source tier. It will not label a future day “safe.”</div></div></section>
<section id="patterns" class="view"><div class="grid metrics" id="archiveMetrics"></div><div class="grid two"><div class="card"><h3>Red-or-worse frequency by month</h3><div class="chart"><canvas id="monthlyRiskChart"></canvas></div></div><div class="card"><h3>Flag-day composition</h3><div class="chart"><canvas id="flagMixChart"></canvas></div></div></div><div class="card"><h3>Year × month hazard heatmap</h3><p>Percent of observed days in each month that reached single red or double red. Empty cells mean no data, not “safe.”</p><div id="heatmap" class="calendar"></div></div><div class="grid two"><div class="card"><h3>Persistence into the next day</h3><div id="persistenceInsights"></div></div><div class="card"><h3>Intraday changes</h3><div id="intradayInsights"></div></div></div><div class="card"><h3>Explore an exact historical date</h3><div class="controls"><div class="control"><label for="historyDate">Date</label><input id="historyDate" type="date"></div><button id="historyLookup" class="btn">Look up date</button></div><div id="historyResult" class="status">Choose a date from the historical record.</div></div></section>
<section id="science" class="view"><div class="callout"><strong>Research status:</strong> Know the Gulf stores a modeling-ready record, but the model is deliberately separated from the current safety flag. Only finalized historical environmental data enter training.</div><div class="grid metrics" id="modelMetrics" style="margin-top:15px"></div><div class="grid two"><div class="card"><h3>Environmental associations</h3><div class="chart"><canvas id="associationChart"></canvas></div></div><div class="card"><h3>Validation and baselines</h3><div id="modelNarrative" class="status">Time-aware validation metrics are generated from finalized historical records.</div></div></div><div class="card"><h3>Modeling design</h3><p>The training table uses red-or-worse as the research outcome and environmental features such as wind, gusts, wave height, wave period, swell, tide range and season.</p></div></section>
<section id="data" class="view"><div class="card"><h2>Open data and provenance</h2><p>The original ALERTBAY/PCBFLAGS archive remains immutable primary evidence, and new Know the Gulf observations are appended automatically.</p><div class="download-grid"><a class="download" href="data/flag_observations_archive.csv" download><strong>Original cleaned flag observations</strong><span>Immutable parsed ALERTBAY/PCBFLAGS evidence</span></a><a class="download" href="data/flag_observations_auto.csv" download><strong>Automatic flag observations</strong><span>Daily snapshots + detected future status changes</span></a><a class="download" href="data/flag_observations_recovered.csv" download><strong>Recovered NWS flag observations</strong><span>Audited secondary Bay-flag records with provenance</span></a><a class="download" href="data/nws_srf_daily.csv" download><strong>NWS surf-zone history</strong><span>Rip-current risk, surf and beach-zone context</span></a><a class="download" href="data/flag_daily_master.csv" download><strong>Master daily flag table</strong><span>Unified primary + recovered historical record</span></a><a class="download" href="data/environmental_daily.csv" download><strong>Environmental daily table</strong><span>Weather, wave, swell and NOAA tide features</span></a><a class="download" href="data/model_training.csv" download><strong>Model training table</strong><span>Finalized rows only, engineered for research</span></a><a class="download" href="data/model_metrics.json" download><strong>Model validation metrics</strong><span>Time-aware performance and feature associations</span></a></div></div></section>
<section class="card" aria-labelledby="explore-guides-heading"><div class="eyebrow">Explore Know the Gulf</div><h2 id="explore-guides-heading">Panama City Beach guides & planning tools</h2><p>Use dedicated, crawlable guides for the topics beach visitors search most often.</p><div class="download-grid"><a class="download" href="/guides/"><strong>Beach safety & conditions guides</strong><span>Start with all visitor guides</span></a><a class="download" href="/panama-city-beach-flags/"><strong>Panama City Beach flags</strong><span>Today's flag and flag meanings</span></a><a class="download" href="/panama-city-beach-conditions/"><strong>PCB beach conditions</strong><span>Wind, waves, tide and temperature context</span></a><a class="download" href="/panama-city-beach-rip-currents/"><strong>PCB rip currents</strong><span>Risk, safety and historical context</span></a><a class="download" href="/panama-city-beach-vacation-planner/"><strong>PCB vacation planner</strong><span>Historical context for trip dates</span></a><a class="download" href="/panama-city-beach-flag-history/"><strong>PCB flag history</strong><span>Explore historical observations and patterns</span></a></div></section>
<div class="safety safety-bottom"><div><strong>Safety first.</strong> Know the Gulf is an informational planning tool, not swimming clearance. Always follow posted flags, lifeguards and local authorities.</div><a href="https://www.visitpanamacitybeach.com/stay-pcb-current/" target="_blank" rel="noopener">Official PCB conditions ↗</a></div><footer class="footer">Know the Gulf · Panama City Beach, Florida · Built from documented public data with provenance and reproducibility in mind.</footer>
</main></body></html>