Portal do Cliente \u2014 GLTEC BRASIL<\/title>\n <meta name=\"description\" content=\"Portal padr\u00e3o para clientes GLTEC BRASIL consultarem dados da emissora, credenciais, monitoramento, afiliadas e suporte.\">\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\">\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap-icons@1.11.3\/font\/bootstrap-icons.css\" rel=\"stylesheet\">\n <style>\n :root{\n --brand:#00A3FF; --brand-2:#1a7bcc;\n --card:#0f172a; --ink:#fff; --muted:#c9d6e5; --grid:#ffffff12;\n --ok:#22c55e; --warn:#f59e0b; --bad:#ef4444;\n --panel:#0b1528;\n }\n *{scroll-behavior:smooth}\n body{ background: radial-gradient(80rem 80rem at 10% -10%, #0e2140 0%, #070e1a 40%, #050a13 100%) fixed; color:var(--ink); }\n .navbar{ backdrop-filter:saturate(1.2) blur(6px); background:rgba(4,10,20,.7); border-bottom:1px solid rgba(255,255,255,.08);}\n .navbar-brand img{ height:40px; object-fit:contain }\n .nav-link, .navbar-brand, .navbar-toggler{ color:#fff !important }\n .nav-link .chev{ transition:transform .2s ease }\n .nav-link.active .chev{ transform:rotate(180deg) }\n .card.gl{ background:var(--card); border:1px solid rgba(255,255,255,.08); color:#fff; border-radius:16px }\n .text-secondary{ color:var(--muted)!important }\n .pill{ display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .7rem; border-radius:999px; background:var(--panel); border:1px solid rgba(255,255,255,.08) }\n .badge.bg-info{ color:#fff } \/* evitar texto escuro *\/\n .miniChart{ width:100%; height:110px; display:block; background:transparent }\n .table> :not(caption)>*>*{ background:transparent !important; color:#fff }\n .table thead th{ color:#cfe7ff }\n .status-dot{ width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:.4rem }\n .status-ok{ background:var(--ok) } .status-warn{ background:var(--warn) } .status-bad{ background:var(--bad) }\n .btn-outline-light{ --bs-btn-color:#fff; --bs-btn-border-color:rgba(255,255,255,.25); --bs-btn-hover-bg:#fff; --bs-btn-hover-color:#000 }\n .blue-strip{ background:linear-gradient(90deg, rgba(0,163,255,.18), rgba(0,163,255,.06)); border:1px solid rgba(0,163,255,.35); color:#fff; border-radius:14px }\n .section-title{ display:flex; align-items:center; gap:.6rem; margin-bottom:.5rem }\n .section-title .dot{ width:10px; height:10px; border-radius:50%; background:var(--brand) }\n .subtle{ background:var(--panel); border:1px solid rgba(255,255,255,.06); border-radius:12px }\n .shadow-soft{ box-shadow: 0 15px 40px rgba(0,163,255,.07), inset 0 0 0 1px rgba(255,255,255,.04);}\n .vu{ height:10px; background:linear-gradient(90deg,#1dd05d 0 60%,#fbbf24 60% 85%,#ef4444 85% 100%); border-radius:999px; overflow:hidden; position:relative; border:1px solid rgba(255,255,255,.1)}\n .vu > .bar{ position:absolute; left:0; top:0; bottom:0; width:30%; background:rgba(0,0,0,.35); transform-origin:left center; }\n .flow-card .badge{ font-weight:600 }\n .flow-svg{ width:100%; height:130px; display:block }\n .flow-node{ fill:#0e1a31; stroke:rgba(255,255,255,.15); stroke-width:1; rx:10; }\n .flow-label{ fill:#fff; font-size:12px; font-weight:600 }\n .flow-sub{ fill:#c9d6e5; font-size:11px }\n .flow-arrow{ fill:none; stroke:rgba(0,163,255,.9); stroke-width:3; stroke-linecap:round; stroke-dasharray:8 8; animation: dash 2s linear infinite; }\n @keyframes dash{ to{ stroke-dashoffset:-160; } }\n .metric{font-variant-numeric: tabular-nums;}\n @media print{ nav, .no-print{ display:none!important } body{ background:#000 } .card{ break-inside:avoid } }\n <\/style>\n<\/head>\n<body>\n\n\n<nav class=\"navbar navbar-expand-lg sticky-top\">\n <div class=\"container\">\n <a class=\"navbar-brand d-flex align-items-center\" href=\"#\">\n <img decoding=\"async\" src=\"https:\/\/gltecbrasil.com.br\/wp-content\/uploads\/2025\/08\/GLTECK-_LOGO.png\" alt=\"GLTEC Brasil\">\n <span class=\"ms-2 fw-semibold\"><\/span>\n <\/a>\n <button class=\"navbar-toggler\" data-bs-toggle=\"collapse\" data-bs-target=\"#nav\"><span class=\"navbar-toggler-icon\"><\/span><\/button>\n <div id=\"nav\" class=\"collapse navbar-collapse\">\n <ul class=\"navbar-nav ms-auto\" id=\"navTabs\">\n <li class=\"nav-item\"><a class=\"nav-link nav-toggle active\" data-target=\"#c-overview\" href=\"#overview\">Vis\u00e3o Geral <i class=\"bi bi-chevron-up chev ms-1\"><\/i><\/a><\/li>\n <li class=\"nav-item\"><a class=\"nav-link nav-toggle\" data-target=\"#c-monitor\" href=\"#monitor\">Monitoramento <i class=\"bi bi-chevron-down chev ms-1\"><\/i><\/a><\/li>\n <li class=\"nav-item\"><a class=\"nav-link nav-toggle\" data-target=\"#c-fluxo\" href=\"#fluxo\">Fluxo de \u00c1udio <i class=\"bi bi-chevron-down chev ms-1\"><\/i><\/a><\/li>\n <li class=\"nav-item\"><a class=\"nav-link nav-toggle\" data-target=\"#c-afiliadas\" href=\"#afiliadas\">Afiliadas <i class=\"bi bi-chevron-down chev ms-1\"><\/i><\/a><\/li>\n <li class=\"nav-item\"><a class=\"nav-link nav-toggle\" data-target=\"#c-faturas\" href=\"#faturas\">Faturas <i class=\"bi bi-chevron-down chev ms-1\"><\/i><\/a><\/li>\n <\/ul>\n <div class=\"ms-lg-3 d-flex gap-2 no-print\">\n <button id=\"btnExpandAll\" class=\"btn btn-outline-light btn-sm\" type=\"button\"><i class=\"bi bi-arrows-expand me-1\"><\/i>Mostrar tudo<\/button>\n <button id=\"btnCollapseAll\" class=\"btn btn-outline-light btn-sm\" type=\"button\"><i class=\"bi bi-arrows-collapse me-1\"><\/i>Recolher tudo<\/button>\n <\/div>\n <\/div>\n <\/div>\n<\/nav>\n\n\n<header class=\"py-4\">\n <div class=\"container\">\n <div class=\"row g-3 align-items-center\">\n <div class=\"col-lg-8\">\n <div class=\"pill\">\n <i class=\"bi bi-broadcast-pin text-info\"><\/i>\n <span class=\"fw-semibold\">Emissora:<\/span>\n <span id=\"stationName\">DEMO REDE<\/span>\n <\/div>\n <div class=\"mt-2 text-secondary small\">\n CNPJ: <span id=\"cnpj\">00.000.000\/0000-00<\/span> \u2022 REDE: <span id=\"plan\">REDE FM IP<\/span> \u2022 SLA: <span class=\"text-info\">99,7%<\/span>\n <\/div>\n <\/div>\n <div class=\"col-lg-4 text-lg-end\">\n <a href=\"https:\/\/wa.me\/5511944527754\" target=\"_blank\" class=\"btn btn-info text-white me-2\"><i class=\"bi bi-whatsapp me-1\"><\/i> WhatsApp<\/a>\n <a href=\"https:\/\/gltecbrasil.com.br\/\" target=\"_blank\" class=\"btn btn-outline-light\"><i class=\"bi bi-box-arrow-up-right me-1\"><\/i> Site GLTEC<\/a>\n <\/div>\n <\/div>\n <\/div>\n<\/header>\n\n\n\n\n<section id=\"overview\" class=\"pb-2\">\n <div id=\"c-overview\" class=\"collapse show\" data-section>\n <div class=\"container pt-2\">\n <div class=\"section-title\"><span class=\"dot\"><\/span><h4 class=\"mb-0\">Vis\u00e3o Geral<\/h4><\/div>\n <div class=\"row g-3\">\n <div class=\"col-md-4\">\n <div class=\"card gl h-100 shadow-soft\">\n <div class=\"card-body\">\n <div class=\"d-flex align-items-center justify-content-between\">\n <h5 class=\"mb-0\">Status da Transmiss\u00e3o<\/h5>\n <span class=\"badge bg-success\"><i class=\"bi bi-circle-fill me-1\"><\/i>Online<\/span>\n <\/div>\n <div class=\"display-6 fw-bold d-flex align-items-baseline gap-2 mt-2\"><span id=\"listenersNow\">4<\/span><span class=\"fs-6 text-secondary\">Afiliadas<\/span><\/div>\n <div class=\"text-secondary small\">Lat\u00eancia t\u00edpica: <span class=\"text-white fw-semibold\">1\u20134s<\/span><\/div>\n <hr>\n <div class=\"d-flex flex-wrap gap-3 small\">\n <div class=\"text-secondary\">Bitrate: <span class=\"text-white fw-semibold\" id=\"Bitrate\">320<\/span><\/div>\n <div class=\"text-secondary\">Codec: <span class=\"text-white fw-semibold\" id=\"codec\">RIST<\/span><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"col-md-8\">\n <div class=\"card gl h-100 shadow-soft\">\n <div class=\"card-body\">\n <h5 class=\"mb-2\">Uso de Tr\u00e1fego (m\u00eas)<\/h5>\n <canvas id=\"trafficChart\" class=\"miniChart\"><\/canvas>\n <div class=\"d-flex flex-wrap gap-3 mt-2 small text-secondary\">\n <div>Total m\u00eas: <span class=\"text-white fw-semibold\" id=\"gbMonth\">\u2014<\/span><\/div>\n <div>M\u00e1ximo di\u00e1rio: <span class=\"text-white fw-semibold\" id=\"gbMaxDay\">\u2014<\/span><\/div>\n <div>Previs\u00e3o: <span class=\"text-white fw-semibold\" id=\"gbForecast\">\u2014<\/span><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div> \n <\/div>\n <\/div>\n<\/section>\n\n\n<section id=\"monitor\" class=\"pb-2\">\n <div id=\"c-monitor\" class=\"collapse\" data-section>\n <div class=\"container pt-2\">\n <div class=\"section-title\"><span class=\"dot\"><\/span><h4 class=\"mb-0\">Monitoramento<\/h4><\/div>\n <div class=\"row g-3\">\n <div class=\"col-lg-7\">\n <div class=\"card gl h-100 shadow-soft\">\n <div class=\"card-body\">\n <div class=\"d-flex align-items-center justify-content-between\">\n <h5 class=\"mb-0\">Lat\u00eancia (s) \u2014 \u00daltimos 60s<\/h5>\n <span class=\"small text-secondary\">alvo 1\u20134s<\/span>\n <\/div>\n <canvas id=\"latencyChart\" class=\"miniChart mt-2\"><\/canvas>\n <div class=\"d-flex flex-wrap gap-4 small text-secondary mt-2\">\n <div>Atual: <span class=\"text-white fw-semibold\" id=\"latNow\">\u2014<\/span> s<\/div>\n <div>M\u00e9dia: <span class=\"text-white fw-semibold\" id=\"latAvg\">\u2014<\/span> s<\/div>\n <div>Pico: <span class=\"text-white fw-semibold\" id=\"latPk\">\u2014<\/span> s<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"col-lg-5\">\n <div class=\"card gl h-100 shadow-soft\">\n <div class=\"card-body\">\n <h5 class=\"mb-2\">Indicadores<\/h5>\n <div class=\"row g-3\">\n <div class=\"col-6\">\n <div class=\"small text-secondary\">Jitter<\/div>\n <div class=\"display-6 fw-bold\"><span id=\"jitNow\">\u2014<\/span><span class=\"fs-6 ms-1\">ms<\/span><\/div>\n <\/div>\n <div class=\"col-6\">\n <div class=\"small text-secondary\">Perda<\/div>\n <div class=\"display-6 fw-bold\"><span id=\"lossNow\">\u2014<\/span><span class=\"fs-6 ms-1\">%<\/span><\/div>\n <\/div>\n <div class=\"col-12\">\n <div class=\"small text-secondary\">N\u00edvel de \u00e1udio (VU)<\/div>\n <div class=\"vu\"><div id=\"vuPanel\" class=\"bar\"><\/div><\/div>\n <\/div>\n <\/div>\n <hr>\n <div class=\"small text-secondary\">Logs recentes<\/div>\n <div id=\"log\" class=\"small text-secondary\" style=\"max-height:120px; overflow:auto; font-family:ui-monospace, SFMono-Regular, Menlo, monospace;\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section id=\"fluxo\" class=\"pb-2\">\n <div id=\"c-fluxo\" class=\"collapse\" data-section>\n <div class=\"container pt-2\">\n <div class=\"section-title\"><span class=\"dot\"><\/span><h4 class=\"mb-0\">Fluxo de \u00c1udio \u2014 Afiliadas 1\u20134<\/h4><\/div>\n <p class=\"text-secondary mb-3\">Caminho do sinal da <strong>Matriz<\/strong> at\u00e9 cada <strong>Afiliada<\/strong> com m\u00e9tricas em tempo real (demo).<\/p>\n <div class=\"row g-3\" id=\"flowGrid\"><\/div>\n <template id=\"flowTemplate\">\n <div class=\"col-12 col-lg-6\">\n <div class=\"card gl flow-card shadow-soft\">\n <div class=\"card-body\">\n <div class=\"d-flex align-items-center justify-content-between mb-2\">\n <div class=\"d-flex align-items-center gap-2\">\n <i class=\"bi bi-diagram-3 text-info\"><\/i>\n <strong class=\"flow-name\">Afiliada #<\/strong>\n <\/div>\n <div class=\"d-flex align-items-center gap-2\">\n <span class=\"badge bg-success status\"><i class=\"bi bi-circle-fill me-1\"><\/i>Online<\/span>\n <span class=\"badge bg-info text-white bitrate\">320 kbps<\/span>\n <span class=\"badge bg-secondary codec\">OPUS<\/span>\n <\/div>\n <\/div>\n <svg class=\"flow-svg\" viewBox=\"0 0 640 130\" preserveAspectRatio=\"xMidYMid meet\">\n <rect class=\"flow-node\" x=\"16\" y=\"22\" width=\"130\" height=\"86\"><\/rect>\n <rect class=\"flow-node\" x=\"186\" y=\"22\" width=\"130\" height=\"86\"><\/rect>\n <rect class=\"flow-node\" x=\"356\" y=\"22\" width=\"130\" height=\"86\"><\/rect>\n <rect class=\"flow-node\" x=\"526\" y=\"22\" width=\"98\" height=\"86\"><\/rect>\n <text class=\"flow-label\" x=\"81\" y=\"48\" text-anchor=\"middle\">Matriz<\/text>\n <text class=\"flow-sub\" x=\"81\" y=\"68\" text-anchor=\"middle\">Encoder \/ Origem<\/text>\n <text class=\"flow-label\" x=\"251\" y=\"48\" text-anchor=\"middle\">Backbone<\/text>\n <text class=\"flow-sub\" x=\"251\" y=\"68\" text-anchor=\"middle\">Core IP \/ QoS<\/text>\n <text class=\"flow-label\" x=\"421\" y=\"48\" text-anchor=\"middle\">Edge POP<\/text>\n <text class=\"flow-sub\" x=\"421\" y=\"68\" text-anchor=\"middle\">Cache \/ Failover<\/text>\n <text class=\"flow-label\" x=\"575\" y=\"48\" text-anchor=\"middle\">Afiliada<\/text>\n <text class=\"flow-sub\" x=\"575\" y=\"68\" text-anchor=\"middle\">RX \/ STL IP<\/text>\n <path class=\"flow-arrow a1\" d=\"M146,65 L186,65\"><\/path>\n <path class=\"flow-arrow a2\" d=\"M316,65 L356,65\"><\/path>\n <path class=\"flow-arrow a3\" d=\"M486,65 L526,65\"><\/path>\n <\/svg>\n <div class=\"row g-2 align-items-center\">\n <div class=\"col-4\">\n <div class=\"small text-secondary\">Lat\u00eancia<\/div>\n <div class=\"metric\"><span class=\"m-lat fw-bold\">\u2014<\/span> s<\/div>\n <\/div>\n <div class=\"col-4\">\n <div class=\"small text-secondary\">Jitter<\/div>\n <div class=\"metric\"><span class=\"m-jit fw-bold\">\u2014<\/span> ms<\/div>\n <\/div>\n <div class=\"col-4\">\n <div class=\"small text-secondary\">Perda<\/div>\n <div class=\"metric\"><span class=\"m-loss fw-bold\">\u2014<\/span> %<\/div>\n <\/div>\n <div class=\"col-12\">\n <div class=\"small text-secondary\">N\u00edvel de \u00e1udio recebido<\/div>\n <div class=\"vu\"><div class=\"bar m-vu\"><\/div><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/template>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section id=\"afiliadas\" class=\"pb-2\">\n <div id=\"c-afiliadas\" class=\"collapse\" data-section>\n <div class=\"container pt-2\">\n <div class=\"section-title\"><span class=\"dot\"><\/span><h4 class=\"mb-0\">Afiliadas (Resumo R\u00e1pido)<\/h4><\/div>\n <div class=\"row g-3\" id=\"affGrid\"><\/div>\n <template id=\"affTemplate\">\n <div class=\"col-md-6 col-lg-3\">\n <div class=\"card gl h-100 shadow-soft\">\n <div class=\"card-body\">\n <div class=\"d-flex justify-content-between align-items-center\">\n <strong class=\"name\">Afiliada #<\/strong>\n <div class=\"d-flex align-items-center gap-2\">\n <span class=\"badge bg-secondary codec\">OPUS<\/span>\n <span class=\"badge bg-info text-white br\">320 kbps<\/span>\n <span class=\"badge bg-success status\"><i class=\"bi bi-circle-fill me-1\"><\/i>Online<\/span>\n <\/div>\n <\/div>\n <div class=\"row g-2 mt-2\">\n <div class=\"col-6\">\n <div class=\"small text-secondary\">Lat\u00eancia<\/div>\n <div class=\"metric\"><span class=\"lat fw-bold\">\u2014<\/span> s<\/div>\n <\/div>\n <div class=\"col-6\">\n <div class=\"small text-secondary\">Jitter<\/div>\n <div class=\"metric\"><span class=\"jit fw-bold\">\u2014<\/span> ms<\/div>\n <\/div>\n <div class=\"col-12\">\n <div class=\"small text-secondary\">Perda<\/div>\n <div class=\"metric\"><span class=\"loss fw-bold\">\u2014<\/span> %<\/div>\n <\/div>\n <div class=\"col-12\">\n <div class=\"small text-secondary mb-1\">N\u00edvel de \u00e1udio (VU)<\/div>\n <div class=\"vu\"><div class=\"bar\"><\/div><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/template>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section id=\"faturas\" class=\"pb-5\">\n <div id=\"c-faturas\" class=\"collapse\" data-section>\n <div class=\"container pt-2\">\n <div class=\"section-title\"><span class=\"dot\"><\/span><h4 class=\"mb-0\">Faturas & Pagamentos<\/h4><\/div>\n <div class=\"card gl shadow-soft\">\n <div class=\"card-body\">\n <div class=\"table-responsive mt-2\">\n <table class=\"table table-sm align-middle\">\n <thead><tr><th>Per\u00edodo<\/th><th>Vencimento<\/th><th>Valor<\/th><th>Status<\/th><th>Link<\/th><\/tr><\/thead>\n <tbody id=\"tblInvoices\">\n <tr>\n <td>Set\/2025<\/td><td>10\/09\/2025<\/td><td>R$ 150,00<\/td>\n <td><span class=\"badge bg-success\">Pago<\/span><\/td><td><a href=\"#\" class=\"link-light\">2\u00aa via<\/a><\/td>\n <\/tr>\n <tr>\n <td>Out\/2025<\/td><td>10\/10\/2025<\/td><td>R$ 150,00<\/td>\n <td><span class=\"badge bg-warning text-dark\">Em aberto<\/span><\/td><td><a href=\"#\" class=\"link-light\">Emitir boleto<\/a><\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n <div class=\"small text-secondary\">D\u00favidas sobre cobran\u00e7a? Abra um chamado no suporte ou fale no WhatsApp.<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<footer class=\"py-4 border-top border-opacity-25\">\n <div class=\"container d-flex flex-wrap gap-3 align-items-center justify-content-between\">\n <div class=\"small text-secondary\">\u00a9 GLTEC BRASIL \u2014 Portal do Cliente<\/div>\n <div class=\"small text-secondary\">Rede FM via Internet \u2022 Lat\u00eancia t\u00edpica 1\u20134s<\/div>\n <\/div>\n<\/footer>\n\n\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/js\/bootstrap.bundle.min.js\"><\/script>\n<script>\n \/\/ ====== Helpers ======\n const clamp=(v,min,max)=>Math.max(min,Math.min(max,v));\n const rnd=(a,b)=>+(Math.random()*(b-a)+a).toFixed(2);\n\n \/\/ ====== NAV: abrir\/fechar se\u00e7\u00f5es (accordion + toggle) ======\n const collapses = [...document.querySelectorAll('[data-section]')].map(el => new bootstrap.Collapse(el, {toggle:false}));\n const sections = ['#c-overview','#c-monitor','#c-fluxo','#c-afiliadas','#c-faturas'].map(sel=>document.querySelector(sel));\n const links = document.querySelectorAll('.nav-toggle');\n\n function setActiveLink(targetSel, opened){\n links.forEach(a=>{\n const isTarget = a.getAttribute('data-target')===targetSel;\n a.classList.toggle('active', isTarget && opened);\n a.querySelector('.chev').className = 'bi ' + (isTarget && opened ? 'bi-chevron-up' : 'bi-chevron-down') + ' chev ms-1';\n });\n }\n\n links.forEach(a=>{\n a.addEventListener('click', (e)=>{\n e.preventDefault();\n const targetSel = a.getAttribute('data-target');\n const targetEl = document.querySelector(targetSel);\n const target = bootstrap.Collapse.getInstance(targetEl);\n const isShown = targetEl.classList.contains('show');\n\n \/\/ Fecha todas\n sections.forEach(el => bootstrap.Collapse.getInstance(el).hide());\n\n if(!isShown){\n \/\/ Abre somente a clicada\n target.show();\n }else{\n \/\/ Se j\u00e1 estava aberta, fica tudo fechado (tela limpa)\n target.hide();\n }\n setActiveLink(targetSel, !isShown);\n });\n });\n\n \/\/ Bot\u00f5es Mostrar\/Recolher tudo\n document.getElementById('btnExpandAll').addEventListener('click', ()=>{\n sections.forEach(el => bootstrap.Collapse.getInstance(el).show());\n links.forEach(a=>setActiveLink(a.getAttribute('data-target'), true));\n });\n document.getElementById('btnCollapseAll').addEventListener('click', ()=>{\n sections.forEach(el => bootstrap.Collapse.getInstance(el).hide());\n links.forEach(a=>setActiveLink(a.getAttribute('data-target'), false));\n });\n\n \/\/ ====== Tr\u00e1fego (barras) ======\n const trafficCanvas = document.getElementById('trafficChart');\n const tctx = trafficCanvas.getContext('2d');\n const traffic = Array.from({length:30},()=>rnd(20,120)); \/\/ GB\/dia\n function drawTraffic(){\n const w=tctx.canvas.width=tctx.canvas.clientWidth*devicePixelRatio;\n const h=tctx.canvas.height=tctx.canvas.clientHeight*devicePixelRatio;\n tctx.clearRect(0,0,w,h);\n tctx.strokeStyle='rgba(255,255,255,.08)'; tctx.lineWidth=1;\n for(let i=0;i<4;i++){ let y=(i\/3)*h; tctx.beginPath(); tctx.moveTo(0,y); tctx.lineTo(w,y); tctx.stroke(); }\n const max = Math.max(...traffic)+20;\n const bw = w\/traffic.length*0.7;\n traffic.forEach((v,i)=>{\n const x = (i\/traffic.length)*w + (w\/traffic.length - bw)\/2;\n const y = h - (v\/max)*h;\n tctx.fillStyle='rgba(0,163,255,.9)';\n tctx.fillRect(x, y, bw, h-y);\n });\n }\n drawTraffic(); window.addEventListener('resize', drawTraffic);\n document.getElementById('gbMonth').textContent = (traffic.reduce((a,b)=>a + +b,0)\/1000).toFixed(1)+' TB';\n document.getElementById('gbMaxDay').textContent = Math.max(...traffic)+' GB';\n document.getElementById('gbForecast').textContent = ((traffic.reduce((a,b)=>a + +b,0)\/1000)*1.35).toFixed(1)+' TB';\n\n \/\/ ====== Lat\u00eancia geral (linha) ======\n const latCanvas = document.getElementById('latencyChart');\n const lctx = latCanvas.getContext('2d');\n const latSeries = Array.from({length:60},()=>rnd(1,4));\n function drawLat(){\n const w=lctx.canvas.width=lctx.canvas.clientWidth*devicePixelRatio;\n const h=lctx.canvas.height=lctx.canvas.clientHeight*devicePixelRatio;\n lctx.clearRect(0,0,w,h);\n lctx.strokeStyle='rgba(255,255,255,.08)'; lctx.lineWidth=1;\n for(let i=0;i<5;i++){ const y=(i\/4)*h; lctx.beginPath(); lctx.moveTo(0,y); lctx.lineTo(w,y); lctx.stroke(); }\n const yMin=h-(1\/5)*h, yMax=h-(4\/5)*h;\n lctx.fillStyle='rgba(0,163,255,.08)'; lctx.fillRect(0,yMax,w,yMin-yMax);\n lctx.lineWidth=3; lctx.strokeStyle='rgba(0,163,255,.9)';\n lctx.beginPath();\n latSeries.forEach((v,i)=>{\n const x=(i\/(latSeries.length-1))*w;\n const y=h-(v\/5)*h;\n i?lctx.lineTo(x,y):lctx.moveTo(x,y);\n }); lctx.stroke();\n }\n function tickLat(){\n const last=latSeries[latSeries.length-1];\n const next=clamp(last+rnd(-0.25,0.25),0.9,4.2);\n latSeries.push(+next.toFixed(2)); latSeries.shift();\n document.getElementById('latNow').textContent=next.toFixed(2);\n const avg=(latSeries.reduce((a,b)=>a+ +b,0)\/latSeries.length).toFixed(2);\n document.getElementById('latAvg').textContent=avg;\n document.getElementById('latPk').textContent=Math.max(...latSeries).toFixed(2);\n const time=new Date().toLocaleTimeString();\n const div=document.createElement('div'); div.textContent=`[${time}] Lat:${next.toFixed(2)}s`;\n const log=document.getElementById('log'); log.prepend(div); while(log.childElementCount>25){ log.lastChild.remove(); }\n drawLat();\n document.getElementById('jitNow').textContent=rnd(6,32);\n document.getElementById('lossNow').textContent=rnd(0.1,1.1);\n document.getElementById('vuPanel').style.width = clamp((Math.sin(Date.now()\/550)+1)\/2*100,8,100)+'%';\n }\n drawLat(); setInterval(tickLat,1000);\n\n \/\/ ====== Codecs\/bitrates fixos ======\n const codecMap = ['OPUS','RIST','SRT','OPUS'];\n const bitrateMap = ['320 kbps','256 kbps','192 kbps','384 kbps'];\n\n \/\/ ====== Fluxo de \u00c1udio (Afiliadas 1\u20134) ======\n const flowNames = [\"Afiliada 1\",\"Afiliada 2\",\"Afiliada 3\",\"Afiliada 4\"];\n const flowGrid = document.getElementById('flowGrid');\n const flowTpl = document.getElementById('flowTemplate');\n const flows = [];\n\n flowNames.forEach((n,i)=>{\n const node = flowTpl.content.cloneNode(true);\n node.querySelector('.flow-name').textContent = n;\n node.querySelector('.codec').textContent = codecMap[i % codecMap.length];\n node.querySelector('.bitrate').textContent = bitrateMap[i % bitrateMap.length];\n flowGrid.appendChild(node);\n });\n\n document.querySelectorAll('#flowGrid .flow-card').forEach((card,idx)=>{\n const els = {\n status: card.querySelector('.status'),\n bitrate: card.querySelector('.bitrate'),\n codec: card.querySelector('.codec'),\n lat: card.querySelector('.m-lat'),\n jit: card.querySelector('.m-jit'),\n loss: card.querySelector('.m-loss'),\n vu: card.querySelector('.m-vu'),\n arrows: card.querySelectorAll('.flow-arrow')\n };\n const latArr = Array.from({length:20},()=>rnd(1,4));\n const audArr = Array.from({length:20},()=>rnd(20,95));\n flows.push({els, latArr, audArr});\n });\n\n function tickFlows(){\n flows.forEach((f,idx)=>{\n const lat = clamp(+f.latArr.at(-1) + rnd(-0.25,0.25), 0.9, 4.2);\n const jit = rnd(4,38);\n const loss = rnd(0,1.4);\n const aud = clamp(+f.audArr.at(-1) + rnd(-8,8), 5, 100);\n f.els.lat.textContent = (+lat).toFixed(2);\n f.els.jit.textContent = jit;\n f.els.loss.textContent = loss;\n f.els.vu.style.width = aud + '%';\n const ok = (loss < 0.8) && (lat <= 4.0);\n f.els.status.className = 'badge status ' + (ok ? 'bg-success' : 'bg-warning text-dark');\n f.els.status.innerHTML = ok ? '<i class=\"bi bi-circle-fill me-1\"><\/i>Online'\n : '<i class=\"bi bi-exclamation-triangle me-1\"><\/i>Aten\u00e7\u00e3o';\n f.els.arrows.forEach((p,ix)=>{\n const w = 3 + Math.sin((Date.now()\/400)+(ix*0.7)+(idx*0.9))*0.6;\n p.style.strokeWidth = w;\n });\n f.latArr.push(+lat.toFixed(2)); f.latArr.shift();\n f.audArr.push(+aud.toFixed(0)); f.audArr.shift();\n });\n }\n setInterval(tickFlows, 1100); tickFlows();\n\n \/\/ ====== Afiliadas (Resumo R\u00e1pido 1\u20134) ======\n const affNames = [\"Afiliada 1\",\"Afiliada 2\",\"Afiliada 3\",\"Afiliada 4\"];\n const affGrid = document.getElementById('affGrid');\n const affTpl = document.getElementById('affTemplate');\n const affList = [];\n\n affNames.forEach((n,i)=>{\n const node=affTpl.content.cloneNode(true);\n node.querySelector('.name').textContent=n;\n node.querySelector('.codec').textContent = codecMap[i % codecMap.length];\n node.querySelector('.br').textContent = bitrateMap[i % bitrateMap.length];\n affGrid.appendChild(node);\n });\n\n document.querySelectorAll('#affGrid .card').forEach((card)=>{\n const latSpan=card.querySelector('.lat'),\n jitSpan=card.querySelector('.jit'),\n lossSpan=card.querySelector('.loss'),\n badge=card.querySelector('.status'),\n vu=card.querySelector('.vu .bar');\n const lat=Array.from({length:30},()=>rnd(1,4));\n const aud=Array.from({length:30},()=>rnd(15,95));\n affList.push({lat,aud,els:{latSpan,jitSpan,lossSpan,badge,vu}});\n });\n\n function tickAff(){\n affList.forEach(s=>{\n const lat=clamp(s.lat.at(-1)+rnd(-0.25,0.25),0.9,4.2);\n const jit=rnd(4,40);\n const loss=rnd(0,1.6);\n const aud=clamp(s.aud.at(-1)+rnd(-8,8),5,100);\n s.els.latSpan.textContent=lat.toFixed(2);\n s.els.jitSpan.textContent=jit;\n s.els.lossSpan.textContent=loss;\n const ok = loss < 0.8 && lat <= 4.0;\n s.els.badge.className='badge status '+(ok?'bg-success':'bg-warning text-dark');\n s.els.badge.innerHTML=(ok?'<i class=\"bi bi-circle-fill me-1\"><\/i>Online':'<i class=\"bi bi-exclamation-triangle me-1\"><\/i>Aten\u00e7\u00e3o');\n s.els.vu.style.width=aud+'%';\n s.lat.push(+lat.toFixed(2)); s.lat.shift();\n s.aud.push(+aud.toFixed(0)); s.aud.shift();\n });\n }\n setInterval(tickAff, 1200); tickAff();\n<\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Portal do Cliente \u2014 GLTEC BRASIL Vis\u00e3o Geral Monitoramento Fluxo de \u00c1udio Afiliadas Faturas Mostrar tudo Recolher tudo Emissora: DEMO REDE CNPJ: 00.000.000\/0000-00 \u2022 REDE: REDE FM IP \u2022 SLA: 99,7% WhatsApp Site GLTEC Vis\u00e3o Geral Status da Transmiss\u00e3o Online 4Afiliadas Lat\u00eancia t\u00edpica: 1\u20134s Bitrate: 320 Codec: RIST Uso de Tr\u00e1fego (m\u00eas) Total m\u00eas: \u2014 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-138","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/gltecbrasil.com.br\/index.php\/wp-json\/wp\/v2\/pages\/138","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gltecbrasil.com.br\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gltecbrasil.com.br\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gltecbrasil.com.br\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gltecbrasil.com.br\/index.php\/wp-json\/wp\/v2\/comments?post=138"}],"version-history":[{"count":31,"href":"https:\/\/gltecbrasil.com.br\/index.php\/wp-json\/wp\/v2\/pages\/138\/revisions"}],"predecessor-version":[{"id":179,"href":"https:\/\/gltecbrasil.com.br\/index.php\/wp-json\/wp\/v2\/pages\/138\/revisions\/179"}],"wp:attachment":[{"href":"https:\/\/gltecbrasil.com.br\/index.php\/wp-json\/wp\/v2\/media?parent=138"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n Portal do Cliente \u2014 GLTEC BRASIL<\/title>\n <meta name=\"description\" content=\"Portal padr\u00e3o para clientes GLTEC BRASIL consultarem dados da emissora, credenciais, monitoramento, afiliadas e suporte.\">\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\">\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap-icons@1.11.3\/font\/bootstrap-icons.css\" rel=\"stylesheet\">\n <style>\n :root{\n --brand:#00A3FF; --brand-2:#1a7bcc;\n --card:#0f172a; --ink:#fff; --muted:#c9d6e5; --grid:#ffffff12;\n --ok:#22c55e; --warn:#f59e0b; --bad:#ef4444;\n --panel:#0b1528;\n }\n *{scroll-behavior:smooth}\n body{ background: radial-gradient(80rem 80rem at 10% -10%, #0e2140 0%, #070e1a 40%, #050a13 100%) fixed; color:var(--ink); }\n .navbar{ backdrop-filter:saturate(1.2) blur(6px); background:rgba(4,10,20,.7); border-bottom:1px solid rgba(255,255,255,.08);}\n .navbar-brand img{ height:40px; object-fit:contain }\n .nav-link, .navbar-brand, .navbar-toggler{ color:#fff !important }\n .nav-link .chev{ transition:transform .2s ease }\n .nav-link.active .chev{ transform:rotate(180deg) }\n .card.gl{ background:var(--card); border:1px solid rgba(255,255,255,.08); color:#fff; border-radius:16px }\n .text-secondary{ color:var(--muted)!important }\n .pill{ display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .7rem; border-radius:999px; background:var(--panel); border:1px solid rgba(255,255,255,.08) }\n .badge.bg-info{ color:#fff } \/* evitar texto escuro *\/\n .miniChart{ width:100%; height:110px; display:block; background:transparent }\n .table> :not(caption)>*>*{ background:transparent !important; color:#fff }\n .table thead th{ color:#cfe7ff }\n .status-dot{ width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:.4rem }\n .status-ok{ background:var(--ok) } .status-warn{ background:var(--warn) } .status-bad{ background:var(--bad) }\n .btn-outline-light{ --bs-btn-color:#fff; --bs-btn-border-color:rgba(255,255,255,.25); --bs-btn-hover-bg:#fff; --bs-btn-hover-color:#000 }\n .blue-strip{ background:linear-gradient(90deg, rgba(0,163,255,.18), rgba(0,163,255,.06)); border:1px solid rgba(0,163,255,.35); color:#fff; border-radius:14px }\n .section-title{ display:flex; align-items:center; gap:.6rem; margin-bottom:.5rem }\n .section-title .dot{ width:10px; height:10px; border-radius:50%; background:var(--brand) }\n .subtle{ background:var(--panel); border:1px solid rgba(255,255,255,.06); border-radius:12px }\n .shadow-soft{ box-shadow: 0 15px 40px rgba(0,163,255,.07), inset 0 0 0 1px rgba(255,255,255,.04);}\n .vu{ height:10px; background:linear-gradient(90deg,#1dd05d 0 60%,#fbbf24 60% 85%,#ef4444 85% 100%); border-radius:999px; overflow:hidden; position:relative; border:1px solid rgba(255,255,255,.1)}\n .vu > .bar{ position:absolute; left:0; top:0; bottom:0; width:30%; background:rgba(0,0,0,.35); transform-origin:left center; }\n .flow-card .badge{ font-weight:600 }\n .flow-svg{ width:100%; height:130px; display:block }\n .flow-node{ fill:#0e1a31; stroke:rgba(255,255,255,.15); stroke-width:1; rx:10; }\n .flow-label{ fill:#fff; font-size:12px; font-weight:600 }\n .flow-sub{ fill:#c9d6e5; font-size:11px }\n .flow-arrow{ fill:none; stroke:rgba(0,163,255,.9); stroke-width:3; stroke-linecap:round; stroke-dasharray:8 8; animation: dash 2s linear infinite; }\n @keyframes dash{ to{ stroke-dashoffset:-160; } }\n .metric{font-variant-numeric: tabular-nums;}\n @media print{ nav, .no-print{ display:none!important } body{ background:#000 } .card{ break-inside:avoid } }\n <\/style>\n<\/head>\n<body>\n\n\n<nav class=\"navbar navbar-expand-lg sticky-top\">\n <div class=\"container\">\n <a class=\"navbar-brand d-flex align-items-center\" href=\"#\">\n <img decoding=\"async\" src=\"https:\/\/gltecbrasil.com.br\/wp-content\/uploads\/2025\/08\/GLTECK-_LOGO.png\" alt=\"GLTEC Brasil\">\n <span class=\"ms-2 fw-semibold\"><\/span>\n <\/a>\n <button class=\"navbar-toggler\" data-bs-toggle=\"collapse\" data-bs-target=\"#nav\"><span class=\"navbar-toggler-icon\"><\/span><\/button>\n <div id=\"nav\" class=\"collapse navbar-collapse\">\n <ul class=\"navbar-nav ms-auto\" id=\"navTabs\">\n <li class=\"nav-item\"><a class=\"nav-link nav-toggle active\" data-target=\"#c-overview\" href=\"#overview\">Vis\u00e3o Geral <i class=\"bi bi-chevron-up chev ms-1\"><\/i><\/a><\/li>\n <li class=\"nav-item\"><a class=\"nav-link nav-toggle\" data-target=\"#c-monitor\" href=\"#monitor\">Monitoramento <i class=\"bi bi-chevron-down chev ms-1\"><\/i><\/a><\/li>\n <li class=\"nav-item\"><a class=\"nav-link nav-toggle\" data-target=\"#c-fluxo\" href=\"#fluxo\">Fluxo de \u00c1udio <i class=\"bi bi-chevron-down chev ms-1\"><\/i><\/a><\/li>\n <li class=\"nav-item\"><a class=\"nav-link nav-toggle\" data-target=\"#c-afiliadas\" href=\"#afiliadas\">Afiliadas <i class=\"bi bi-chevron-down chev ms-1\"><\/i><\/a><\/li>\n <li class=\"nav-item\"><a class=\"nav-link nav-toggle\" data-target=\"#c-faturas\" href=\"#faturas\">Faturas <i class=\"bi bi-chevron-down chev ms-1\"><\/i><\/a><\/li>\n <\/ul>\n <div class=\"ms-lg-3 d-flex gap-2 no-print\">\n <button id=\"btnExpandAll\" class=\"btn btn-outline-light btn-sm\" type=\"button\"><i class=\"bi bi-arrows-expand me-1\"><\/i>Mostrar tudo<\/button>\n <button id=\"btnCollapseAll\" class=\"btn btn-outline-light btn-sm\" type=\"button\"><i class=\"bi bi-arrows-collapse me-1\"><\/i>Recolher tudo<\/button>\n <\/div>\n <\/div>\n <\/div>\n<\/nav>\n\n\n<header class=\"py-4\">\n <div class=\"container\">\n <div class=\"row g-3 align-items-center\">\n <div class=\"col-lg-8\">\n <div class=\"pill\">\n <i class=\"bi bi-broadcast-pin text-info\"><\/i>\n <span class=\"fw-semibold\">Emissora:<\/span>\n <span id=\"stationName\">DEMO REDE<\/span>\n <\/div>\n <div class=\"mt-2 text-secondary small\">\n CNPJ: <span id=\"cnpj\">00.000.000\/0000-00<\/span> \u2022 REDE: <span id=\"plan\">REDE FM IP<\/span> \u2022 SLA: <span class=\"text-info\">99,7%<\/span>\n <\/div>\n <\/div>\n <div class=\"col-lg-4 text-lg-end\">\n <a href=\"https:\/\/wa.me\/5511944527754\" target=\"_blank\" class=\"btn btn-info text-white me-2\"><i class=\"bi bi-whatsapp me-1\"><\/i> WhatsApp<\/a>\n <a href=\"https:\/\/gltecbrasil.com.br\/\" target=\"_blank\" class=\"btn btn-outline-light\"><i class=\"bi bi-box-arrow-up-right me-1\"><\/i> Site GLTEC<\/a>\n <\/div>\n <\/div>\n <\/div>\n<\/header>\n\n\n\n\n<section id=\"overview\" class=\"pb-2\">\n <div id=\"c-overview\" class=\"collapse show\" data-section>\n <div class=\"container pt-2\">\n <div class=\"section-title\"><span class=\"dot\"><\/span><h4 class=\"mb-0\">Vis\u00e3o Geral<\/h4><\/div>\n <div class=\"row g-3\">\n <div class=\"col-md-4\">\n <div class=\"card gl h-100 shadow-soft\">\n <div class=\"card-body\">\n <div class=\"d-flex align-items-center justify-content-between\">\n <h5 class=\"mb-0\">Status da Transmiss\u00e3o<\/h5>\n <span class=\"badge bg-success\"><i class=\"bi bi-circle-fill me-1\"><\/i>Online<\/span>\n <\/div>\n <div class=\"display-6 fw-bold d-flex align-items-baseline gap-2 mt-2\"><span id=\"listenersNow\">4<\/span><span class=\"fs-6 text-secondary\">Afiliadas<\/span><\/div>\n <div class=\"text-secondary small\">Lat\u00eancia t\u00edpica: <span class=\"text-white fw-semibold\">1\u20134s<\/span><\/div>\n <hr>\n <div class=\"d-flex flex-wrap gap-3 small\">\n <div class=\"text-secondary\">Bitrate: <span class=\"text-white fw-semibold\" id=\"Bitrate\">320<\/span><\/div>\n <div class=\"text-secondary\">Codec: <span class=\"text-white fw-semibold\" id=\"codec\">RIST<\/span><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"col-md-8\">\n <div class=\"card gl h-100 shadow-soft\">\n <div class=\"card-body\">\n <h5 class=\"mb-2\">Uso de Tr\u00e1fego (m\u00eas)<\/h5>\n <canvas id=\"trafficChart\" class=\"miniChart\"><\/canvas>\n <div class=\"d-flex flex-wrap gap-3 mt-2 small text-secondary\">\n <div>Total m\u00eas: <span class=\"text-white fw-semibold\" id=\"gbMonth\">\u2014<\/span><\/div>\n <div>M\u00e1ximo di\u00e1rio: <span class=\"text-white fw-semibold\" id=\"gbMaxDay\">\u2014<\/span><\/div>\n <div>Previs\u00e3o: <span class=\"text-white fw-semibold\" id=\"gbForecast\">\u2014<\/span><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div> \n <\/div>\n <\/div>\n<\/section>\n\n\n<section id=\"monitor\" class=\"pb-2\">\n <div id=\"c-monitor\" class=\"collapse\" data-section>\n <div class=\"container pt-2\">\n <div class=\"section-title\"><span class=\"dot\"><\/span><h4 class=\"mb-0\">Monitoramento<\/h4><\/div>\n <div class=\"row g-3\">\n <div class=\"col-lg-7\">\n <div class=\"card gl h-100 shadow-soft\">\n <div class=\"card-body\">\n <div class=\"d-flex align-items-center justify-content-between\">\n <h5 class=\"mb-0\">Lat\u00eancia (s) \u2014 \u00daltimos 60s<\/h5>\n <span class=\"small text-secondary\">alvo 1\u20134s<\/span>\n <\/div>\n <canvas id=\"latencyChart\" class=\"miniChart mt-2\"><\/canvas>\n <div class=\"d-flex flex-wrap gap-4 small text-secondary mt-2\">\n <div>Atual: <span class=\"text-white fw-semibold\" id=\"latNow\">\u2014<\/span> s<\/div>\n <div>M\u00e9dia: <span class=\"text-white fw-semibold\" id=\"latAvg\">\u2014<\/span> s<\/div>\n <div>Pico: <span class=\"text-white fw-semibold\" id=\"latPk\">\u2014<\/span> s<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"col-lg-5\">\n <div class=\"card gl h-100 shadow-soft\">\n <div class=\"card-body\">\n <h5 class=\"mb-2\">Indicadores<\/h5>\n <div class=\"row g-3\">\n <div class=\"col-6\">\n <div class=\"small text-secondary\">Jitter<\/div>\n <div class=\"display-6 fw-bold\"><span id=\"jitNow\">\u2014<\/span><span class=\"fs-6 ms-1\">ms<\/span><\/div>\n <\/div>\n <div class=\"col-6\">\n <div class=\"small text-secondary\">Perda<\/div>\n <div class=\"display-6 fw-bold\"><span id=\"lossNow\">\u2014<\/span><span class=\"fs-6 ms-1\">%<\/span><\/div>\n <\/div>\n <div class=\"col-12\">\n <div class=\"small text-secondary\">N\u00edvel de \u00e1udio (VU)<\/div>\n <div class=\"vu\"><div id=\"vuPanel\" class=\"bar\"><\/div><\/div>\n <\/div>\n <\/div>\n <hr>\n <div class=\"small text-secondary\">Logs recentes<\/div>\n <div id=\"log\" class=\"small text-secondary\" style=\"max-height:120px; overflow:auto; font-family:ui-monospace, SFMono-Regular, Menlo, monospace;\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section id=\"fluxo\" class=\"pb-2\">\n <div id=\"c-fluxo\" class=\"collapse\" data-section>\n <div class=\"container pt-2\">\n <div class=\"section-title\"><span class=\"dot\"><\/span><h4 class=\"mb-0\">Fluxo de \u00c1udio \u2014 Afiliadas 1\u20134<\/h4><\/div>\n <p class=\"text-secondary mb-3\">Caminho do sinal da <strong>Matriz<\/strong> at\u00e9 cada <strong>Afiliada<\/strong> com m\u00e9tricas em tempo real (demo).<\/p>\n <div class=\"row g-3\" id=\"flowGrid\"><\/div>\n <template id=\"flowTemplate\">\n <div class=\"col-12 col-lg-6\">\n <div class=\"card gl flow-card shadow-soft\">\n <div class=\"card-body\">\n <div class=\"d-flex align-items-center justify-content-between mb-2\">\n <div class=\"d-flex align-items-center gap-2\">\n <i class=\"bi bi-diagram-3 text-info\"><\/i>\n <strong class=\"flow-name\">Afiliada #<\/strong>\n <\/div>\n <div class=\"d-flex align-items-center gap-2\">\n <span class=\"badge bg-success status\"><i class=\"bi bi-circle-fill me-1\"><\/i>Online<\/span>\n <span class=\"badge bg-info text-white bitrate\">320 kbps<\/span>\n <span class=\"badge bg-secondary codec\">OPUS<\/span>\n <\/div>\n <\/div>\n <svg class=\"flow-svg\" viewBox=\"0 0 640 130\" preserveAspectRatio=\"xMidYMid meet\">\n <rect class=\"flow-node\" x=\"16\" y=\"22\" width=\"130\" height=\"86\"><\/rect>\n <rect class=\"flow-node\" x=\"186\" y=\"22\" width=\"130\" height=\"86\"><\/rect>\n <rect class=\"flow-node\" x=\"356\" y=\"22\" width=\"130\" height=\"86\"><\/rect>\n <rect class=\"flow-node\" x=\"526\" y=\"22\" width=\"98\" height=\"86\"><\/rect>\n <text class=\"flow-label\" x=\"81\" y=\"48\" text-anchor=\"middle\">Matriz<\/text>\n <text class=\"flow-sub\" x=\"81\" y=\"68\" text-anchor=\"middle\">Encoder \/ Origem<\/text>\n <text class=\"flow-label\" x=\"251\" y=\"48\" text-anchor=\"middle\">Backbone<\/text>\n <text class=\"flow-sub\" x=\"251\" y=\"68\" text-anchor=\"middle\">Core IP \/ QoS<\/text>\n <text class=\"flow-label\" x=\"421\" y=\"48\" text-anchor=\"middle\">Edge POP<\/text>\n <text class=\"flow-sub\" x=\"421\" y=\"68\" text-anchor=\"middle\">Cache \/ Failover<\/text>\n <text class=\"flow-label\" x=\"575\" y=\"48\" text-anchor=\"middle\">Afiliada<\/text>\n <text class=\"flow-sub\" x=\"575\" y=\"68\" text-anchor=\"middle\">RX \/ STL IP<\/text>\n <path class=\"flow-arrow a1\" d=\"M146,65 L186,65\"><\/path>\n <path class=\"flow-arrow a2\" d=\"M316,65 L356,65\"><\/path>\n <path class=\"flow-arrow a3\" d=\"M486,65 L526,65\"><\/path>\n <\/svg>\n <div class=\"row g-2 align-items-center\">\n <div class=\"col-4\">\n <div class=\"small text-secondary\">Lat\u00eancia<\/div>\n <div class=\"metric\"><span class=\"m-lat fw-bold\">\u2014<\/span> s<\/div>\n <\/div>\n <div class=\"col-4\">\n <div class=\"small text-secondary\">Jitter<\/div>\n <div class=\"metric\"><span class=\"m-jit fw-bold\">\u2014<\/span> ms<\/div>\n <\/div>\n <div class=\"col-4\">\n <div class=\"small text-secondary\">Perda<\/div>\n <div class=\"metric\"><span class=\"m-loss fw-bold\">\u2014<\/span> %<\/div>\n <\/div>\n <div class=\"col-12\">\n <div class=\"small text-secondary\">N\u00edvel de \u00e1udio recebido<\/div>\n <div class=\"vu\"><div class=\"bar m-vu\"><\/div><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/template>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section id=\"afiliadas\" class=\"pb-2\">\n <div id=\"c-afiliadas\" class=\"collapse\" data-section>\n <div class=\"container pt-2\">\n <div class=\"section-title\"><span class=\"dot\"><\/span><h4 class=\"mb-0\">Afiliadas (Resumo R\u00e1pido)<\/h4><\/div>\n <div class=\"row g-3\" id=\"affGrid\"><\/div>\n <template id=\"affTemplate\">\n <div class=\"col-md-6 col-lg-3\">\n <div class=\"card gl h-100 shadow-soft\">\n <div class=\"card-body\">\n <div class=\"d-flex justify-content-between align-items-center\">\n <strong class=\"name\">Afiliada #<\/strong>\n <div class=\"d-flex align-items-center gap-2\">\n <span class=\"badge bg-secondary codec\">OPUS<\/span>\n <span class=\"badge bg-info text-white br\">320 kbps<\/span>\n <span class=\"badge bg-success status\"><i class=\"bi bi-circle-fill me-1\"><\/i>Online<\/span>\n <\/div>\n <\/div>\n <div class=\"row g-2 mt-2\">\n <div class=\"col-6\">\n <div class=\"small text-secondary\">Lat\u00eancia<\/div>\n <div class=\"metric\"><span class=\"lat fw-bold\">\u2014<\/span> s<\/div>\n <\/div>\n <div class=\"col-6\">\n <div class=\"small text-secondary\">Jitter<\/div>\n <div class=\"metric\"><span class=\"jit fw-bold\">\u2014<\/span> ms<\/div>\n <\/div>\n <div class=\"col-12\">\n <div class=\"small text-secondary\">Perda<\/div>\n <div class=\"metric\"><span class=\"loss fw-bold\">\u2014<\/span> %<\/div>\n <\/div>\n <div class=\"col-12\">\n <div class=\"small text-secondary mb-1\">N\u00edvel de \u00e1udio (VU)<\/div>\n <div class=\"vu\"><div class=\"bar\"><\/div><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/template>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section id=\"faturas\" class=\"pb-5\">\n <div id=\"c-faturas\" class=\"collapse\" data-section>\n <div class=\"container pt-2\">\n <div class=\"section-title\"><span class=\"dot\"><\/span><h4 class=\"mb-0\">Faturas & Pagamentos<\/h4><\/div>\n <div class=\"card gl shadow-soft\">\n <div class=\"card-body\">\n <div class=\"table-responsive mt-2\">\n <table class=\"table table-sm align-middle\">\n <thead><tr><th>Per\u00edodo<\/th><th>Vencimento<\/th><th>Valor<\/th><th>Status<\/th><th>Link<\/th><\/tr><\/thead>\n <tbody id=\"tblInvoices\">\n <tr>\n <td>Set\/2025<\/td><td>10\/09\/2025<\/td><td>R$ 150,00<\/td>\n <td><span class=\"badge bg-success\">Pago<\/span><\/td><td><a href=\"#\" class=\"link-light\">2\u00aa via<\/a><\/td>\n <\/tr>\n <tr>\n <td>Out\/2025<\/td><td>10\/10\/2025<\/td><td>R$ 150,00<\/td>\n <td><span class=\"badge bg-warning text-dark\">Em aberto<\/span><\/td><td><a href=\"#\" class=\"link-light\">Emitir boleto<\/a><\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n <div class=\"small text-secondary\">D\u00favidas sobre cobran\u00e7a? Abra um chamado no suporte ou fale no WhatsApp.<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<footer class=\"py-4 border-top border-opacity-25\">\n <div class=\"container d-flex flex-wrap gap-3 align-items-center justify-content-between\">\n <div class=\"small text-secondary\">\u00a9 GLTEC BRASIL \u2014 Portal do Cliente<\/div>\n <div class=\"small text-secondary\">Rede FM via Internet \u2022 Lat\u00eancia t\u00edpica 1\u20134s<\/div>\n <\/div>\n<\/footer>\n\n\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/js\/bootstrap.bundle.min.js\"><\/script>\n<script>\n \/\/ ====== Helpers ======\n const clamp=(v,min,max)=>Math.max(min,Math.min(max,v));\n const rnd=(a,b)=>+(Math.random()*(b-a)+a).toFixed(2);\n\n \/\/ ====== NAV: abrir\/fechar se\u00e7\u00f5es (accordion + toggle) ======\n const collapses = [...document.querySelectorAll('[data-section]')].map(el => new bootstrap.Collapse(el, {toggle:false}));\n const sections = ['#c-overview','#c-monitor','#c-fluxo','#c-afiliadas','#c-faturas'].map(sel=>document.querySelector(sel));\n const links = document.querySelectorAll('.nav-toggle');\n\n function setActiveLink(targetSel, opened){\n links.forEach(a=>{\n const isTarget = a.getAttribute('data-target')===targetSel;\n a.classList.toggle('active', isTarget && opened);\n a.querySelector('.chev').className = 'bi ' + (isTarget && opened ? 'bi-chevron-up' : 'bi-chevron-down') + ' chev ms-1';\n });\n }\n\n links.forEach(a=>{\n a.addEventListener('click', (e)=>{\n e.preventDefault();\n const targetSel = a.getAttribute('data-target');\n const targetEl = document.querySelector(targetSel);\n const target = bootstrap.Collapse.getInstance(targetEl);\n const isShown = targetEl.classList.contains('show');\n\n \/\/ Fecha todas\n sections.forEach(el => bootstrap.Collapse.getInstance(el).hide());\n\n if(!isShown){\n \/\/ Abre somente a clicada\n target.show();\n }else{\n \/\/ Se j\u00e1 estava aberta, fica tudo fechado (tela limpa)\n target.hide();\n }\n setActiveLink(targetSel, !isShown);\n });\n });\n\n \/\/ Bot\u00f5es Mostrar\/Recolher tudo\n document.getElementById('btnExpandAll').addEventListener('click', ()=>{\n sections.forEach(el => bootstrap.Collapse.getInstance(el).show());\n links.forEach(a=>setActiveLink(a.getAttribute('data-target'), true));\n });\n document.getElementById('btnCollapseAll').addEventListener('click', ()=>{\n sections.forEach(el => bootstrap.Collapse.getInstance(el).hide());\n links.forEach(a=>setActiveLink(a.getAttribute('data-target'), false));\n });\n\n \/\/ ====== Tr\u00e1fego (barras) ======\n const trafficCanvas = document.getElementById('trafficChart');\n const tctx = trafficCanvas.getContext('2d');\n const traffic = Array.from({length:30},()=>rnd(20,120)); \/\/ GB\/dia\n function drawTraffic(){\n const w=tctx.canvas.width=tctx.canvas.clientWidth*devicePixelRatio;\n const h=tctx.canvas.height=tctx.canvas.clientHeight*devicePixelRatio;\n tctx.clearRect(0,0,w,h);\n tctx.strokeStyle='rgba(255,255,255,.08)'; tctx.lineWidth=1;\n for(let i=0;i<4;i++){ let y=(i\/3)*h; tctx.beginPath(); tctx.moveTo(0,y); tctx.lineTo(w,y); tctx.stroke(); }\n const max = Math.max(...traffic)+20;\n const bw = w\/traffic.length*0.7;\n traffic.forEach((v,i)=>{\n const x = (i\/traffic.length)*w + (w\/traffic.length - bw)\/2;\n const y = h - (v\/max)*h;\n tctx.fillStyle='rgba(0,163,255,.9)';\n tctx.fillRect(x, y, bw, h-y);\n });\n }\n drawTraffic(); window.addEventListener('resize', drawTraffic);\n document.getElementById('gbMonth').textContent = (traffic.reduce((a,b)=>a + +b,0)\/1000).toFixed(1)+' TB';\n document.getElementById('gbMaxDay').textContent = Math.max(...traffic)+' GB';\n document.getElementById('gbForecast').textContent = ((traffic.reduce((a,b)=>a + +b,0)\/1000)*1.35).toFixed(1)+' TB';\n\n \/\/ ====== Lat\u00eancia geral (linha) ======\n const latCanvas = document.getElementById('latencyChart');\n const lctx = latCanvas.getContext('2d');\n const latSeries = Array.from({length:60},()=>rnd(1,4));\n function drawLat(){\n const w=lctx.canvas.width=lctx.canvas.clientWidth*devicePixelRatio;\n const h=lctx.canvas.height=lctx.canvas.clientHeight*devicePixelRatio;\n lctx.clearRect(0,0,w,h);\n lctx.strokeStyle='rgba(255,255,255,.08)'; lctx.lineWidth=1;\n for(let i=0;i<5;i++){ const y=(i\/4)*h; lctx.beginPath(); lctx.moveTo(0,y); lctx.lineTo(w,y); lctx.stroke(); }\n const yMin=h-(1\/5)*h, yMax=h-(4\/5)*h;\n lctx.fillStyle='rgba(0,163,255,.08)'; lctx.fillRect(0,yMax,w,yMin-yMax);\n lctx.lineWidth=3; lctx.strokeStyle='rgba(0,163,255,.9)';\n lctx.beginPath();\n latSeries.forEach((v,i)=>{\n const x=(i\/(latSeries.length-1))*w;\n const y=h-(v\/5)*h;\n i?lctx.lineTo(x,y):lctx.moveTo(x,y);\n }); lctx.stroke();\n }\n function tickLat(){\n const last=latSeries[latSeries.length-1];\n const next=clamp(last+rnd(-0.25,0.25),0.9,4.2);\n latSeries.push(+next.toFixed(2)); latSeries.shift();\n document.getElementById('latNow').textContent=next.toFixed(2);\n const avg=(latSeries.reduce((a,b)=>a+ +b,0)\/latSeries.length).toFixed(2);\n document.getElementById('latAvg').textContent=avg;\n document.getElementById('latPk').textContent=Math.max(...latSeries).toFixed(2);\n const time=new Date().toLocaleTimeString();\n const div=document.createElement('div'); div.textContent=`[${time}] Lat:${next.toFixed(2)}s`;\n const log=document.getElementById('log'); log.prepend(div); while(log.childElementCount>25){ log.lastChild.remove(); }\n drawLat();\n document.getElementById('jitNow').textContent=rnd(6,32);\n document.getElementById('lossNow').textContent=rnd(0.1,1.1);\n document.getElementById('vuPanel').style.width = clamp((Math.sin(Date.now()\/550)+1)\/2*100,8,100)+'%';\n }\n drawLat(); setInterval(tickLat,1000);\n\n \/\/ ====== Codecs\/bitrates fixos ======\n const codecMap = ['OPUS','RIST','SRT','OPUS'];\n const bitrateMap = ['320 kbps','256 kbps','192 kbps','384 kbps'];\n\n \/\/ ====== Fluxo de \u00c1udio (Afiliadas 1\u20134) ======\n const flowNames = [\"Afiliada 1\",\"Afiliada 2\",\"Afiliada 3\",\"Afiliada 4\"];\n const flowGrid = document.getElementById('flowGrid');\n const flowTpl = document.getElementById('flowTemplate');\n const flows = [];\n\n flowNames.forEach((n,i)=>{\n const node = flowTpl.content.cloneNode(true);\n node.querySelector('.flow-name').textContent = n;\n node.querySelector('.codec').textContent = codecMap[i % codecMap.length];\n node.querySelector('.bitrate').textContent = bitrateMap[i % bitrateMap.length];\n flowGrid.appendChild(node);\n });\n\n document.querySelectorAll('#flowGrid .flow-card').forEach((card,idx)=>{\n const els = {\n status: card.querySelector('.status'),\n bitrate: card.querySelector('.bitrate'),\n codec: card.querySelector('.codec'),\n lat: card.querySelector('.m-lat'),\n jit: card.querySelector('.m-jit'),\n loss: card.querySelector('.m-loss'),\n vu: card.querySelector('.m-vu'),\n arrows: card.querySelectorAll('.flow-arrow')\n };\n const latArr = Array.from({length:20},()=>rnd(1,4));\n const audArr = Array.from({length:20},()=>rnd(20,95));\n flows.push({els, latArr, audArr});\n });\n\n function tickFlows(){\n flows.forEach((f,idx)=>{\n const lat = clamp(+f.latArr.at(-1) + rnd(-0.25,0.25), 0.9, 4.2);\n const jit = rnd(4,38);\n const loss = rnd(0,1.4);\n const aud = clamp(+f.audArr.at(-1) + rnd(-8,8), 5, 100);\n f.els.lat.textContent = (+lat).toFixed(2);\n f.els.jit.textContent = jit;\n f.els.loss.textContent = loss;\n f.els.vu.style.width = aud + '%';\n const ok = (loss < 0.8) && (lat <= 4.0);\n f.els.status.className = 'badge status ' + (ok ? 'bg-success' : 'bg-warning text-dark');\n f.els.status.innerHTML = ok ? '<i class=\"bi bi-circle-fill me-1\"><\/i>Online'\n : '<i class=\"bi bi-exclamation-triangle me-1\"><\/i>Aten\u00e7\u00e3o';\n f.els.arrows.forEach((p,ix)=>{\n const w = 3 + Math.sin((Date.now()\/400)+(ix*0.7)+(idx*0.9))*0.6;\n p.style.strokeWidth = w;\n });\n f.latArr.push(+lat.toFixed(2)); f.latArr.shift();\n f.audArr.push(+aud.toFixed(0)); f.audArr.shift();\n });\n }\n setInterval(tickFlows, 1100); tickFlows();\n\n \/\/ ====== Afiliadas (Resumo R\u00e1pido 1\u20134) ======\n const affNames = [\"Afiliada 1\",\"Afiliada 2\",\"Afiliada 3\",\"Afiliada 4\"];\n const affGrid = document.getElementById('affGrid');\n const affTpl = document.getElementById('affTemplate');\n const affList = [];\n\n affNames.forEach((n,i)=>{\n const node=affTpl.content.cloneNode(true);\n node.querySelector('.name').textContent=n;\n node.querySelector('.codec').textContent = codecMap[i % codecMap.length];\n node.querySelector('.br').textContent = bitrateMap[i % bitrateMap.length];\n affGrid.appendChild(node);\n });\n\n document.querySelectorAll('#affGrid .card').forEach((card)=>{\n const latSpan=card.querySelector('.lat'),\n jitSpan=card.querySelector('.jit'),\n lossSpan=card.querySelector('.loss'),\n badge=card.querySelector('.status'),\n vu=card.querySelector('.vu .bar');\n const lat=Array.from({length:30},()=>rnd(1,4));\n const aud=Array.from({length:30},()=>rnd(15,95));\n affList.push({lat,aud,els:{latSpan,jitSpan,lossSpan,badge,vu}});\n });\n\n function tickAff(){\n affList.forEach(s=>{\n const lat=clamp(s.lat.at(-1)+rnd(-0.25,0.25),0.9,4.2);\n const jit=rnd(4,40);\n const loss=rnd(0,1.6);\n const aud=clamp(s.aud.at(-1)+rnd(-8,8),5,100);\n s.els.latSpan.textContent=lat.toFixed(2);\n s.els.jitSpan.textContent=jit;\n s.els.lossSpan.textContent=loss;\n const ok = loss < 0.8 && lat <= 4.0;\n s.els.badge.className='badge status '+(ok?'bg-success':'bg-warning text-dark');\n s.els.badge.innerHTML=(ok?'<i class=\"bi bi-circle-fill me-1\"><\/i>Online':'<i class=\"bi bi-exclamation-triangle me-1\"><\/i>Aten\u00e7\u00e3o');\n s.els.vu.style.width=aud+'%';\n s.lat.push(+lat.toFixed(2)); s.lat.shift();\n s.aud.push(+aud.toFixed(0)); s.aud.shift();\n });\n }\n setInterval(tickAff, 1200); tickAff();\n<\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Portal do Cliente \u2014 GLTEC BRASIL Vis\u00e3o Geral Monitoramento Fluxo de \u00c1udio Afiliadas Faturas Mostrar tudo Recolher tudo Emissora: DEMO REDE CNPJ: 00.000.000\/0000-00 \u2022 REDE: REDE FM IP \u2022 SLA: 99,7% WhatsApp Site GLTEC Vis\u00e3o Geral Status da Transmiss\u00e3o Online 4Afiliadas Lat\u00eancia t\u00edpica: 1\u20134s Bitrate: 320 Codec: RIST Uso de Tr\u00e1fego (m\u00eas) Total m\u00eas: \u2014 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-138","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/gltecbrasil.com.br\/index.php\/wp-json\/wp\/v2\/pages\/138","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gltecbrasil.com.br\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gltecbrasil.com.br\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gltecbrasil.com.br\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gltecbrasil.com.br\/index.php\/wp-json\/wp\/v2\/comments?post=138"}],"version-history":[{"count":31,"href":"https:\/\/gltecbrasil.com.br\/index.php\/wp-json\/wp\/v2\/pages\/138\/revisions"}],"predecessor-version":[{"id":179,"href":"https:\/\/gltecbrasil.com.br\/index.php\/wp-json\/wp\/v2\/pages\/138\/revisions\/179"}],"wp:attachment":[{"href":"https:\/\/gltecbrasil.com.br\/index.php\/wp-json\/wp\/v2\/media?parent=138"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}