<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rankings de Estaciones - meteorologia.com.ar</title>
    <meta name="description" content="Rankings en tiempo real de las estaciones meteorol&oacute;gicas de Argentina: temperatura, viento, humedad, presi&oacute;n y m&aacute;s.">
    <meta name="theme-color" content="#0288d1">
    <link rel="canonical" href="https://meteorologia.com.ar/rankings">
    <link rel="stylesheet" href="css/themes.css?v=7">
    <link rel="stylesheet" href="css/index.css?v=9">
    <link rel="stylesheet" href="css/community.css?v=1">
    <script src="js/theme.js?v=6"></script>
    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>&#127942;</text></svg>">
</head>
<body>

    <nav class="site-nav">
    <div class="container">
        <div class="nav-content">
            <a href="/" class="nav-brand">&#127782;&#65039; meteorologia.com.ar</a>
            <div class="nav-links">
                <a href="/" class="nav-link">
                    <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="10" r="3"/><path d="M12 21.7C17.3 17 20 13 20 10a8 8 0 10-16 0c0 3 2.7 7 8 11.7z"/></svg>
                    <span>Estaciones</span>
                </a>
                <a href="/sumate" class="nav-link">
                    <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/></svg>
                    <span>Sum&aacute; tu estaci&oacute;n</span>
                </a>
                <a href="/sponsors" class="nav-link">
                    <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>
                    <span>Sponsors</span>
                </a>
                                    <a href="/login" class="nav-link nav-login-link">
                        <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg>
                        <span>Ingresar</span>
                    </a>
                            </div>
        </div>
    </div>
</nav>

    <header class="page-hero">
        <div class="container">
            <h1>&#127942; Rankings en Tiempo Real</h1>
            <p class="hero-subtitle">Clasificaci&oacute;n de las estaciones meteorol&oacute;gicas de Argentina</p>
        </div>
    </header>

    <section class="rankings-filter-section">
        <div class="container">
            <div class="rankings-filter-bar">
                <select id="provinciaFilter" class="rank-filter-select">
                    <option value="">Todas las provincias</option>
                                        <option value="Buenos Aires">Buenos Aires</option>
                                    </select>
            </div>
        </div>
    </section>

    <section class="rankings-content">
        <div class="container">

            <!-- TEMPERATURE -->
            <div class="ranking-table-section">
                <h2 class="ranking-category-title">&#127777; Temperatura m&aacute;s alta</h2>
                <div class="ranking-table-wrap">
                    <table class="ranking-table" id="tableHottest">
                        <thead>
                            <tr><th>#</th><th>Estaci&oacute;n</th><th>Ubicaci&oacute;n</th><th>Temperatura</th></tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>

            <div class="ranking-table-section">
                <h2 class="ranking-category-title">&#10052; Temperatura m&aacute;s baja</h2>
                <div class="ranking-table-wrap">
                    <table class="ranking-table" id="tableColdest">
                        <thead>
                            <tr><th>#</th><th>Estaci&oacute;n</th><th>Ubicaci&oacute;n</th><th>Temperatura</th></tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>

            <!-- WIND -->
            <div class="ranking-table-section">
                <h2 class="ranking-category-title">&#128168; Mayor velocidad de viento</h2>
                <div class="ranking-table-wrap">
                    <table class="ranking-table" id="tableWindiest">
                        <thead>
                            <tr><th>#</th><th>Estaci&oacute;n</th><th>Ubicaci&oacute;n</th><th>Viento</th></tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>

            <!-- HUMIDITY -->
            <div class="ranking-table-section">
                <h2 class="ranking-category-title">&#128167; Mayor humedad</h2>
                <div class="ranking-table-wrap">
                    <table class="ranking-table" id="tableHumid">
                        <thead>
                            <tr><th>#</th><th>Estaci&oacute;n</th><th>Ubicaci&oacute;n</th><th>Humedad</th></tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>

            <!-- PRESSURE -->
            <div class="ranking-table-section">
                <h2 class="ranking-category-title">&#9979; Mayor presi&oacute;n</h2>
                <div class="ranking-table-wrap">
                    <table class="ranking-table" id="tablePressureHigh">
                        <thead>
                            <tr><th>#</th><th>Estaci&oacute;n</th><th>Ubicaci&oacute;n</th><th>Presi&oacute;n</th></tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>

            <div class="ranking-table-section">
                <h2 class="ranking-category-title">&#9979; Menor presi&oacute;n</h2>
                <div class="ranking-table-wrap">
                    <table class="ranking-table" id="tablePressureLow">
                        <thead>
                            <tr><th>#</th><th>Estaci&oacute;n</th><th>Ubicaci&oacute;n</th><th>Presi&oacute;n</th></tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>

        </div>
    </section>

    <footer class="site-footer">
    <div class="container">
        <div class="footer-sitemap">
            <div class="sitemap-col">
                <h4>Navegaci&oacute;n</h4>
                <ul>
                    <li><a href="/">Estaciones en vivo</a></li>
                    <li><a href="/sumate">Sum&aacute; tu estaci&oacute;n</a></li>
                    <li><a href="/sponsors">Sponsors</a></li>
                </ul>
            </div>
            <div class="sitemap-col">
                <h4>Usuarios</h4>
                <ul>
                    <li><a href="/registrar">Registrar estaci&oacute;n</a></li>
                    <li><a href="/login">Iniciar sesi&oacute;n</a></li>
                    <li><a href="/app/meteorologia.apk" download>Descargar App Android</a></li>
                </ul>
            </div>
            <div class="sitemap-col">
                <h4>Contacto</h4>
                <ul>
                    <li><a href="mailto:contacto@meteorologia.com.ar">contacto@meteorologia.com.ar</a></li>
                    <li><a href="/admin/">Administraci&oacute;n</a></li>
                </ul>
            </div>
        </div>
        <div class="footer-bottom">
            <p class="footer-title">Red de Estaciones Meteorol&oacute;gicas Argentina</p>
            <p class="footer-subtitle">meteorologia.com.ar &mdash; Datos actualizados en tiempo real</p>
        </div>
    </div>
</footer>

    <script>
    (function() {
        'use strict';

        var stations = [{"station_id":"IADROG2","station_name":"Adrogue","provincia":"Buenos Aires","localidad":"Adrogué","lat":-34.798562,"lon":-58.404313,"elev":11,"hardware":"Saintlogic 2","connection_type":"wu","current":{"time":"2026-04-16 07:57:15","temp":20,"humidity":97,"windSpeed":6.4,"windDir":180,"pressure":998.65},"last_data":null},{"station_id":"IBARRI131","station_name":"Escobar","provincia":"Buenos Aires","localidad":"Escobar","lat":-34.330676,"lon":-58.777407,"elev":11,"hardware":"Saintlogic FT0310","connection_type":"wu","current":{"time":"2026-04-16 07:56:56","temp":20.1,"humidity":97,"windSpeed":0.6,"windDir":248,"pressure":1003.39},"last_data":null},{"station_id":"IITUZA12","station_name":"Parque Leloir","provincia":"Buenos Aires","localidad":"Ituzaingó","lat":-34.624332,"lon":-58.673339,"elev":27,"hardware":"Daza DZ-HP2550","connection_type":"wu","current":{"time":"2026-04-16 07:57:36","temp":19.8,"humidity":98,"windSpeed":0,"windDir":216,"pressure":1006.64},"last_data":null}];
        var provinciaFilter = document.getElementById('provinciaFilter');

        function esc(str) {
            if (!str) return '';
            var d = document.createElement('div');
            d.appendChild(document.createTextNode(str));
            return d.innerHTML;
        }

        function renderTable(tableId, filtered, getVal, unit, order) {
            var tbody = document.querySelector('#' + tableId + ' tbody');
            if (!tbody) return;

            var withVal = filtered.filter(function(s) {
                var v = getVal(s);
                return v != null && !isNaN(v);
            });

            withVal.sort(function(a, b) {
                return order === 'asc' ? getVal(a) - getVal(b) : getVal(b) - getVal(a);
            });

            var top = withVal.slice(0, 20);
            if (top.length === 0) {
                tbody.innerHTML = '<tr><td colspan="4" style="text-align:center;color:var(--text-dim);">Sin datos</td></tr>';
                return;
            }

            var html = '';
            top.forEach(function(s, i) {
                var medal = i === 0 ? '\ud83e\udd47' : i === 1 ? '\ud83e\udd48' : i === 2 ? '\ud83e\udd49' : (i + 1);
                var val = getVal(s);
                var cls = i < 3 ? ' class="top3"' : '';
                html += '<tr' + cls + '>' +
                    '<td class="rank-pos">' + medal + '</td>' +
                    '<td><a href="/estacion/' + encodeURIComponent(s.station_id) + '">' + esc(s.station_name) + '</a></td>' +
                    '<td class="rank-loc">' + esc(s.localidad) + ', ' + esc(s.provincia) + '</td>' +
                    '<td class="rank-val">' + val + ' ' + unit + '</td>' +
                    '</tr>';
            });
            tbody.innerHTML = html;
        }

        function render() {
            var prov = provinciaFilter.value;
            var filtered = stations;
            if (prov) {
                filtered = stations.filter(function(s) { return s.provincia === prov; });
            }

            renderTable('tableHottest', filtered, function(s) { return s.current ? s.current.temp : null; }, '\u00b0C', 'desc');
            renderTable('tableColdest', filtered, function(s) { return s.current ? s.current.temp : null; }, '\u00b0C', 'asc');
            renderTable('tableWindiest', filtered, function(s) { return s.current ? s.current.windSpeed : null; }, 'km/h', 'desc');
            renderTable('tableHumid', filtered, function(s) { return s.current ? s.current.humidity : null; }, '%', 'desc');
            renderTable('tablePressureHigh', filtered, function(s) { return s.current ? s.current.pressure : null; }, 'hPa', 'desc');
            renderTable('tablePressureLow', filtered, function(s) { return s.current ? s.current.pressure : null; }, 'hPa', 'asc');
        }

        provinciaFilter.addEventListener('change', render);
        render();
    })();
    </script>
</body>
</html>
