{% extends "base.html" %}
{% block content %}

<div id="hamqsl-section" style="display:none">
    <div class="card mt-5">
        <div class="card-header">
            Propagation Conditions
        </div>
        <div class="card-body">
            <div class="row row-cols-1 row-cols-md-2 g-3">
                <div class="col mt-3 px-3">
                    <h5>HF</h5>
                    <table class="table table-sm mt-2">
                        <thead>
                        <tr>
                            <th>Band</th>
                            <th>Day</th>
                            <th>Night</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>80-40m</td>
                            <td id="hf-conditions-80m-40m-day"></td>
                            <td id="hf-conditions-80m-40m-night"></td>
                        </tr>
                        <tr>
                            <td>30-20m</td>
                            <td id="hf-conditions-30m-20m-day"></td>
                            <td id="hf-conditions-30m-20m-night"></td>
                        </tr>
                        <tr>
                            <td>17-15m</td>
                            <td id="hf-conditions-17m-15m-day"></td>
                            <td id="hf-conditions-17m-15m-night"></td>
                        </tr>
                        <tr>
                            <td>12-10m</td>
                            <td id="hf-conditions-12m-10m-day"></td>
                            <td id="hf-conditions-12m-10m-night"></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="col mt-3 px-3">
                    <h5>VHF</h5>
                    <table class="table table-sm mt-2">
                        <thead>
                        <tr>
                            <th>Propagation Mode</th>
                            <th>Condition</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>Sporadic-E 6m (Europe)</td>
                            <td id="vhf-conditions-es_6m_europe"></td>
                        </tr>
                        <tr>
                            <td>Sporadic-E 4m (Europe)</td>
                            <td id="vhf-conditions-es_4m_europe"></td>
                        </tr>
                        <tr>
                            <td>Sporadic-E 2m (Europe)</td>
                            <td id="vhf-conditions-es_2m_europe"></td>
                        </tr>
                        <tr>
                            <td>Sporadic-E 2m (North America)</td>
                            <td id="vhf-conditions-es_2m_na"></td>
                        </tr>
                        <tr>
                            <td>Aurora (Northern Hemisphere)</td>
                            <td id="vhf-conditions-vhf_aurora_northern_hemi"></td>
                        </tr>
                        <tr>
                            <td>Aurora Minimum Latitude</td>
                            <td id="vhf-conditions-aurora-lat"></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="form-text mt-3">Data from <a href="https://hamqsl.com">HamQSL.com</a>.</div>
        </div>
    </div>

    <div class="card mt-5">
        <div class="card-header">
            Solar Weather
        </div>
        <div class="card-body px-3">
            <div class="row border-bottom align-items-start me-0">
                <div class="col-12 col-md-2 py-2 fw-bold">Solar Flux</div>
                <div id="sw-solar-flux-vals" class="col-12 col-md-3 py-2">
                    <span class="me-3">SFI: <strong id="sw-sfi"></strong></span>
                    <span>Sunspots: <strong id="sw-sunspots"></strong></span>
                </div>
                <div id="sw-solar-flux-desc" class="col-12 col-md-7 py-2"></div>
            </div>
            <div class="row border-bottom align-items-start me-0">
                <div class="col-12 col-md-2 py-2 fw-bold">Geomagnetic</div>
                <div id="sw-geomag-vals" class="col-12 col-md-3 py-2">
                    <span class="me-3">K: <strong id="sw-k-index"></strong></span>
                    <span class="me-3">A: <strong id="sw-a-index"></strong></span>
                    <span class="me-3"><strong>G</strong><strong id="sw-geomag-storm-scale"></strong></span>
                    <span>Noise: <strong id="sw-geomag-noise"></strong></span>
                </div>
                <div id="sw-geomag-desc" class="col-12 col-md-7 py-2">
                    <span id="sw-geomag-field"></span>. <span id="sw-geomag-storm-desc"></span>
                </div>
            </div>
            <div class="row border-bottom align-items-start me-0">
                <div class="col-12 col-md-2 py-2 fw-bold">X-ray Flux</div>
                <div id="sw-xray-vals" class="col-12 col-md-3 py-2">
                    <span class="me-3"><strong id="sw-xray"></strong></span>
                    <span class="me-3"><strong>R</strong><strong id="sw-radio-blackout-scale"></strong></span></div>
                <div id="sw-xray-desc" class="col-12 col-md-7 py-2"></div>
            </div>
            <div class="row border-bottom align-items-start me-0">
                <div class="col-12 col-md-2 py-2 fw-bold">Proton Flux</div>
                <div id="sw-proton-vals" class="col-12 col-md-3 py-2">
                    <span class="me-3"><strong id="sw-proton-flux"></strong> pfu</span>
                    <span class="me-3"><strong>S</strong><strong id="sw-solar-storm-scale"></strong></span>
                </div>
                <div id="sw-proton-desc" class="col-12 col-md-7 py-2"></div>
            </div>
            <div class="row border-bottom align-items-start me-0">
                <div class="col-12 col-md-2 fw-bold py-2">Electron Flux</div>
                <div id="sw-electron-vals" class="col-12 col-md-3 py-2"><strong id="sw-electron-flux"></strong> efu
                </div>
                <div id="sw-electron-desc" class="col-12 col-md-7 py-2"></div>
            </div>
            <div class="form-text mt-3">Data from <a href="https://hamqsl.com">HamQSL.com</a>.</div>
        </div>
    </div>
</div>

<div id="noaa-section" style="display:none">
    <div class="card mt-5">
        <div class="card-header">
            Solar Weather Forecast
        </div>
        <div class="card-body">
            <div class="row mb-4">
                <div class="col px-3">
                    <h5>K-index Forecast</h5>
                    <canvas id="forecast-kp-chart" class="mt-3 mb-3"></canvas>
                </div>
            </div>
            <div class="row row-cols-1 row-cols-md-2 g-3">
                <div class="col mt-3 px-3">
                    <h5>Solar Storm Forecast</h5>
                    <table id="forecast-solar-storm-table" class="table table-sm mt-2">
                        <thead>
                        <tr id="forecast-solar-storm-head"></tr>
                        </thead>
                        <tbody id="forecast-solar-storm-tbody"></tbody>
                    </table>
                </div>
                <div class="col mt-3 px-3">
                    <h5>Radio Blackout Forecast</h5>
                    <table id="forecast-blackout-table" class="table table-sm mt-2">
                        <thead>
                        <tr id="forecast-blackout-head"></tr>
                        </thead>
                        <tbody id="forecast-blackout-tbody"></tbody>
                    </table>
                </div>
            </div>
            <div class="form-text mt-3">Data from <a href="https://www.swpc.noaa.gov/">NOAA Space Weather Prediction
                Center</a>.
            </div>
        </div>
    </div>
</div>

<div id="ionosonde-section" style="display:none">
    <div class="card mt-5">
        <div class="card-header">
            Ionosonde Data
        </div>
        <div class="card-body">
            <div class="mb-3">
                <label for="ionosonde-station" class="form-label">Ionosonde station:</label>
                <select id="ionosonde-station" class="form-select storeable-select d-inline-block ms-2 w-auto"
                        oninput="ionosondeStationChanged();">
                </select>
            </div>
            <div id="ionosonde-latest" class="mb-3">
                <div id="ionosonde-no-data" class="alert alert-warning mt-2 mb-0 py-2 js-hidden">No data available for
                    this station.
                </div>
                <div id="ionosonde-data-rows" class="js-hidden">
                    <div class="row align-items-center me-0">
                        <div class="col-12 py-2 text-muted">Latest values as of <span id="ionosonde-latest-time"></span>
                        </div>
                    </div>
                    <div class="row align-items-center me-0">
                        <div class="col-12 col-md-4 py-2">LUF: <strong id="ionosonde-latest-luf"></strong></div>
                        <div class="col-12 col-md-4 py-2">foF2: <strong id="ionosonde-latest-fof2"></strong></div>
                        <div class="col-12 col-md-4 py-2">MUF (3000 km): <strong id="ionosonde-latest-muf"></strong>
                        </div>
                    </div>
                    <div id="ionosonde-stale-warning" class="alert alert-warning mt-2 mb-0 py-2 js-hidden">Data is more
                        than 12 hours old!
                    </div>
                </div>
            </div>
            <div id="ionosonde-band-state" class="mb-3 js-hidden">
                <table class="table table-sm table-bordered mb-0 d-none d-md-table table-fixed-on-desktop">
                    <thead>
                    <tr id="ionosonde-band-state-head"></tr>
                    </thead>
                    <tbody>
                    <tr id="ionosonde-band-state-row"></tr>
                    </tbody>
                </table>
                <table class="table table-sm table-bordered mb-0 d-md-none">
                    <tbody id="ionosonde-band-state-body"></tbody>
                </table>
            </div>
            <canvas id="ionosonde-chart" class="mt-3 mb-3 hideonmobile"></canvas>
            <div class="form-text mt-2">Data from the <a href="https://lgdc.uml.edu/">Lowell GIRO Data Center</a> and/or
                <a href="https://prop.kc2g.com/">KC2G</a>.
            </div>
        </div>
    </div>
</div>

<div class="card mt-5">
    <div class="card-header">
        DX Opportunities
    </div>
    <div class="card-body">
        <div class="mb-3">
            <label for="dxstats-de-continent" class="form-label">Your continent:</label>
            <select id="dxstats-de-continent" class="form-select storeable-select d-inline-block ms-2 w-auto"
                    oninput="dxStatsContientChanged();">
                <option value="EU">Europe</option>
                <option value="NA">North America</option>
                <option value="SA">South America</option>
                <option value="AS">Asia</option>
                <option value="AF">Africa</option>
                <option value="OC">Oceania</option>
                <option value="AN">Antarctica</option>
            </select>
        </div>
        <div class="table-responsive">
            <table class="table table-sm table-bordered mb-0 table-fixed-on-desktop">
                <thead>
                <tr>
                    <th></th>
                    <th>160m</th>
                    <th>80m</th>
                    <th>60m</th>
                    <th>40m</th>
                    <th>30m</th>
                    <th>20m</th>
                    <th>17m</th>
                    <th>15m</th>
                    <th>12m</th>
                    <th>10m</th>
                    <th>6m</th>
                </tr>
                </thead>
                <tbody>
                {% for continent in ["EU", "NA", "SA", "AS", "AF", "OC", "AN"] %}
                <tr>
                    <td class="fw-bold">{{ continent }}</td>
                    {% for band in ["160m", "80m", "60m", "40m", "30m", "20m", "17m", "15m", "12m", "10m", "6m"] %}
                    <td id="dxstats-{{ continent }}-{{ band }}"></td>
                    {% end %}
                </tr>
                {% end %}
                </tbody>
            </table>
        </div>
        <div class="form-text mt-2">This table shows the number of spots in the past hour received in your continent,
            where the DX continent and band are as shown in the table. Bands with high numbers of spots are likely to be
            the best ones for making contact with the continent you want right now. Bear in mind that some bands and
            some continents are inherently much rarer than others.
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.9/dist/chart.umd.min.js"></script>
<script src="/js/common.js?v=1781252061"></script>
<script src="/js/conditions.js?v=1781252061"></script>
<script>$(document).ready(function () {
    $("#nav-link-conditions").addClass("active");
}); <!-- highlight active page in nav --></script>

{% end %}