{"id":512,"date":"2025-12-05T01:58:23","date_gmt":"2025-12-05T01:58:23","guid":{"rendered":"https:\/\/gltecbrasil.com.br\/?page_id=512"},"modified":"2025-12-05T12:25:34","modified_gmt":"2025-12-05T12:25:34","slug":"pwa","status":"publish","type":"page","link":"https:\/\/gltecbrasil.com.br\/index.php\/pwa\/","title":{"rendered":"PWA"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"512\" class=\"elementor elementor-512\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a844d06 e-flex e-con-boxed e-con e-parent\" data-id=\"a844d06\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1956519 elementor-widget elementor-widget-html\" data-id=\"1956519\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n\/* ====== \u00c1REA DO APP PWA \u2013 R\u00c1DIO F\u00c1CIL (ESCOPADO) ====== *\/\r\n#pwa-rf * {\r\n    box-sizing: border-box;\r\n    font-family: system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;\r\n}\r\n#pwa-rf {\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    padding: 0;\r\n}\r\n\r\n\/* LAYOUT GERAL (MENU ESQUERDA + CONTE\u00daDO) *\/\r\n#pwa-rf .pwa-shell {\r\n    display: flex;\r\n    min-height: 520px;\r\n    background: #f4f6fb;\r\n}\r\n\r\n\/* SIDEBAR \u2013 IGUAL CONECTADOS (BLOCOS GRANDES) *\/\r\n#pwa-rf .pwa-sidebar {\r\n    width: 270px;\r\n    background: #1e4ed8;\r\n    padding: 18px 16px;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 14px;\r\n    color: #ffffff;\r\n}\r\n\r\n#pwa-rf .pwa-brand {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    margin-bottom: 4px;\r\n}\r\n#pwa-rf .pwa-brand-logo {\r\n    width: 44px;\r\n    height: 44px;\r\n    border-radius: 14px;\r\n    background: #ffffff;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    overflow: hidden;\r\n}\r\n#pwa-rf .pwa-brand-logo img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n}\r\n#pwa-rf .pwa-brand-text {\r\n    display: flex;\r\n    flex-direction: column;\r\n    line-height: 1.2;\r\n}\r\n#pwa-rf .pwa-brand-title {\r\n    font-weight: 700;\r\n    font-size: 15px;\r\n}\r\n#pwa-rf .pwa-brand-sub {\r\n    font-size: 11px;\r\n    opacity: .9;\r\n}\r\n\r\n\/* Bot\u00f5es grandes da sidebar *\/\r\n#pwa-rf .pwa-menu-grid {\r\n    display: grid;\r\n    grid-template-columns: 1fr;\r\n    gap: 10px;\r\n    margin-top: 8px;\r\n}\r\n#pwa-rf .pwa-menu-btn {\r\n    border: none;\r\n    border-radius: 16px;\r\n    padding: 12px 12px;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    cursor: pointer;\r\n    background: #2756df;\r\n    color: #e5ecff;\r\n    font-size: 13px;\r\n    text-align: left;\r\n    box-shadow: 0 6px 12px rgba(0,0,0,.25);\r\n}\r\n#pwa-rf .pwa-menu-btn span.icon {\r\n    width: 26px;\r\n    height: 26px;\r\n    border-radius: 999px;\r\n    background: #1b3db0;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n}\r\n#pwa-rf .pwa-menu-btn svg {\r\n    width: 16px;\r\n    height: 16px;\r\n    fill: #ffffff;\r\n}\r\n#pwa-rf .pwa-menu-btn.pwa-active,\r\n#pwa-rf .pwa-menu-btn:hover {\r\n    background: #1439a6;\r\n}\r\n\r\n\/* Bot\u00e3o WhatsApp verde *\/\r\n#pwa-rf .pwa-menu-btn.whats {\r\n    background: #16a34a;\r\n}\r\n#pwa-rf .pwa-menu-btn.whats span.icon {\r\n    background: #166534;\r\n}\r\n\r\n\/* CONTE\u00daDO PRINCIPAL \u00c0 DIREITA *\/\r\n#pwa-rf .pwa-main {\r\n    flex: 1;\r\n    padding: 20px 22px 90px;\r\n    position: relative;\r\n}\r\n\r\n\/* BARRA \u201cAPLICATIVO R\u00c1DIO F\u00c1CIL \u2013 INSTALAR\u201d *\/\r\n#pwa-rf .pwa-install-banner {\r\n    background: #ffffff;\r\n    border-radius: 16px;\r\n    padding: 10px 14px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 10px;\r\n    box-shadow: 0 6px 16px rgba(0,0,0,.12);\r\n    margin-bottom: 18px;\r\n}\r\n#pwa-rf .pwa-install-left {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    font-size: 13px;\r\n}\r\n#pwa-rf .pwa-install-icon {\r\n    width: 38px;\r\n    height: 38px;\r\n    border-radius: 14px;\r\n    background: #1d4ed8;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n}\r\n#pwa-rf .pwa-install-icon svg {\r\n    width: 22px;\r\n    height: 22px;\r\n    fill: #ffffff;\r\n}\r\n#pwa-rf .pwa-install-title {\r\n    font-weight: 600;\r\n}\r\n#pwa-rf .pwa-install-sub {\r\n    font-size: 11px;\r\n    color: #6b7280;\r\n}\r\n#pwa-rf .pwa-install-btn {\r\n    border-radius: 999px;\r\n    border: none;\r\n    padding: 8px 14px;\r\n    background: #2563eb;\r\n    color: #ffffff;\r\n    font-size: 12px;\r\n    cursor: pointer;\r\n}\r\n\r\n\/* P\u00c1GINAS *\/\r\n#pwa-rf .pwa-view {\r\n    display: none;\r\n}\r\n#pwa-rf .pwa-view.pwa-active {\r\n    display: block;\r\n}\r\n\r\n\/* P\u00c1GINA HOME \u2013 CARD CENTRAL *\/\r\n#pwa-rf .pwa-home-layout {\r\n    display: flex;\r\n    justify-content: center;\r\n}\r\n#pwa-rf .pwa-home-card {\r\n    background: #ffffff;\r\n    border-radius: 26px;\r\n    padding: 20px 18px 24px;\r\n    width: 100%;\r\n    max-width: 430px;\r\n    margin: 0 auto;\r\n    box-shadow: 0 14px 30px rgba(0,0,0,.18);\r\n    position: relative;\r\n    overflow: hidden;\r\n}\r\n#pwa-rf .pwa-home-header {\r\n    text-align: center;\r\n    margin-bottom: 12px;\r\n}\r\n#pwa-rf .pwa-home-logo {\r\n    width: 52px;\r\n    height: 52px;\r\n    border-radius: 16px;\r\n    background: #1d4ed8;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    margin: 0 auto 8px;\r\n}\r\n#pwa-rf .pwa-home-logo svg {\r\n    width: 26px;\r\n    height: 26px;\r\n    fill: #ffffff;\r\n}\r\n#pwa-rf .pwa-home-title {\r\n    font-weight: 700;\r\n    font-size: 18px;\r\n}\r\n#pwa-rf .pwa-home-sub {\r\n    font-size: 12px;\r\n    color: #6b7280;\r\n}\r\n\r\n\/* Badge \"Agora\" acima da capa *\/\r\n#pwa-rf .pwa-badge-agora {\r\n    position: absolute;\r\n    top: 98px;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    background: #2563eb;\r\n    color: #ffffff;\r\n    padding: 4px 18px;\r\n    border-radius: 999px;\r\n    font-size: 11px;\r\n    font-weight: 600;\r\n}\r\n\r\n\/* Capa do programa \/ m\u00fasica *\/\r\n#pwa-rf .pwa-cover-wrap {\r\n    margin-top: 32px;\r\n    border-radius: 24px;\r\n    overflow: hidden;\r\n    background: #111827;\r\n}\r\n#pwa-rf .pwa-cover {\r\n    width: 100%;\r\n    aspect-ratio: 1\/1;\r\n    position: relative;\r\n}\r\n#pwa-rf .pwa-cover img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n}\r\n#pwa-rf .pwa-cover-fallback {\r\n    position: absolute;\r\n    inset: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    color: #e5e7eb;\r\n    font-weight: 700;\r\n    font-size: 18px;\r\n    letter-spacing: .12em;\r\n    text-align: center;\r\n    background: radial-gradient(circle at top, #1d4ed8, #020617);\r\n}\r\n\r\n\/* Info de hor\u00e1rio e programa, host *\/\r\n#pwa-rf .pwa-program-info {\r\n    margin-top: 10px;\r\n    font-size: 13px;\r\n}\r\n#pwa-rf .pwa-program-name {\r\n    font-weight: 700;\r\n}\r\n#pwa-rf .pwa-program-time {\r\n    font-size: 12px;\r\n    color: #6b7280;\r\n}\r\n#pwa-rf .pwa-program-host {\r\n    font-size: 12px;\r\n    color: #4b5563;\r\n    margin-top: 3px;\r\n}\r\n\r\n\/* \u201cTocando agora\u201d box *\/\r\n#pwa-rf .pwa-now-box {\r\n    margin-top: 10px;\r\n    border-radius: 16px;\r\n    background: #eff4ff;\r\n    padding: 8px 11px;\r\n}\r\n#pwa-rf .pwa-now-label {\r\n    text-transform: uppercase;\r\n    letter-spacing: .12em;\r\n    font-size: 11px;\r\n    color: #6b7280;\r\n}\r\n#pwa-rf .pwa-now-text {\r\n    font-size: 13px;\r\n    font-weight: 600;\r\n}\r\n\r\n\/* OUTRAS P\u00c1GINAS \u2013 por enquanto s\u00f3 t\u00edtulo (pode preencher depois) *\/\r\n#pwa-rf .pwa-view-header {\r\n    font-size: 18px;\r\n    font-weight: 700;\r\n    margin-bottom: 6px;\r\n}\r\n#pwa-rf .pwa-view-sub {\r\n    font-size: 13px;\r\n    color: #6b7280;\r\n}\r\n\r\n\/* BOTTOM PLAYER \u2013 IGUAL BARRA AZUL *\/\r\n#pwa-rf .pwa-bottom-player {\r\n    position: relative;\r\n    margin-top: 18px;\r\n    background: #1d4ed8;\r\n    border-radius: 20px;\r\n    padding: 10px 14px;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 12px;\r\n    color: #e0ebff;\r\n}\r\n#pwa-rf .pwa-bottom-cover {\r\n    width: 42px;\r\n    height: 42px;\r\n    border-radius: 12px;\r\n    overflow: hidden;\r\n    background: #0b2d87;\r\n    flex-shrink: 0;\r\n}\r\n#pwa-rf .pwa-bottom-cover img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n}\r\n#pwa-rf .pwa-bottom-info {\r\n    flex: 1;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 2px;\r\n}\r\n#pwa-rf .pwa-bottom-program {\r\n    font-size: 11px;\r\n}\r\n#pwa-rf .pwa-bottom-program span.time {\r\n    opacity: .85;\r\n}\r\n#pwa-rf .pwa-bottom-track {\r\n    font-size: 13px;\r\n    font-weight: 600;\r\n    white-space: nowrap;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n}\r\n#pwa-rf .pwa-bottom-controls {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n}\r\n#pwa-rf .pwa-round-btn {\r\n    width: 40px;\r\n    height: 40px;\r\n    border-radius: 999px;\r\n    border: none;\r\n    background: #f9fafb;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    cursor: pointer;\r\n    box-shadow: 0 8px 18px rgba(0,0,0,.35);\r\n}\r\n#pwa-rf .pwa-round-btn svg {\r\n    width: 20px;\r\n    height: 20px;\r\n    fill: #1d4ed8;\r\n}\r\n#pwa-rf .pwa-bottom-time {\r\n    font-size: 11px;\r\n}\r\n#pwa-rf .pwa-volume {\r\n    width: 90px;\r\n}\r\n#pwa-rf .pwa-volume input[type=range] {\r\n    width: 100%;\r\n}\r\n\r\n\/* TOAST *\/\r\n#pwa-rf .pwa-toast {\r\n    position: fixed;\r\n    right: 20px;\r\n    bottom: 20px;\r\n    background: #111827;\r\n    color: #f9fafb;\r\n    padding: 8px 13px;\r\n    border-radius: 999px;\r\n    font-size: 12px;\r\n    opacity: 0;\r\n    transform: translateY(10px);\r\n    pointer-events: none;\r\n    transition: .16s;\r\n    z-index: 9999;\r\n}\r\n#pwa-rf .pwa-toast.pwa-show {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n}\r\n\r\n\/* Responsivo *\/\r\n@media (max-width: 960px) {\r\n    #pwa-rf .pwa-shell {\r\n        flex-direction: column;\r\n    }\r\n    #pwa-rf .pwa-sidebar {\r\n        width: 100%;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<div id=\"pwa-rf\">\r\n    <div class=\"pwa-shell\">\r\n        <!-- SIDEBAR ESQUERDA -->\r\n        <aside class=\"pwa-sidebar\">\r\n            <div class=\"pwa-brand\">\r\n                <div class=\"pwa-brand-logo\">\r\n                    <img decoding=\"async\" src=\"https:\/\/img.radios.com.br\/radio\/lg\/radio148428_1644866694.jpg\" alt=\"R\u00e1dio F\u00e1cil\">\r\n                <\/div>\r\n                <div class=\"pwa-brand-text\">\r\n                    <span class=\"pwa-brand-title\">R\u00e1dio F\u00e1cil<\/span>\r\n                    <span class=\"pwa-brand-sub\">A sua r\u00e1dio no app<\/span>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"pwa-menu-grid\">\r\n                <!-- Bot\u00f5es seguindo o original -->\r\n                <button class=\"pwa-menu-btn pwa-active\" data-view=\"home\">\r\n                    <span class=\"icon\">\r\n                        <!-- fone -->\r\n                        <svg viewBox=\"0 0 24 24\"><path d=\"M12 3a7 7 0 0 0-7 7v7a2 2 0 0 0 2 2h1v-7H7v-2a5 5 0 0 1 10 0v2h-1v7h1a2 2 0 0 0 2-2v-7a7 7 0 0 0-7-7z\"\/><\/svg>\r\n                    <\/span>\r\n                    Ouvir a r\u00e1dio\r\n                <\/button>\r\n\r\n                <button class=\"pwa-menu-btn\" data-view=\"schedule\">\r\n                    <span class=\"icon\">\r\n                        <!-- calend\u00e1rio -->\r\n                        <svg viewBox=\"0 0 24 24\"><path d=\"M7 2v2H5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2H7zm12 7H5v10h14V9z\"\/><\/svg>\r\n                    <\/span>\r\n                    Programa\u00e7\u00e3o\r\n                <\/button>\r\n\r\n                <button class=\"pwa-menu-btn\" data-view=\"chat\">\r\n                    <span class=\"icon\">\r\n                        <!-- chat -->\r\n                        <svg viewBox=\"0 0 24 24\"><path d=\"M4 4h16v10H6l-4 4V4z\"\/><\/svg>\r\n                    <\/span>\r\n                    Chat ao vivo\r\n                <\/button>\r\n\r\n                <button class=\"pwa-menu-btn\" data-view=\"request\">\r\n                    <span class=\"icon\">\r\n                        <!-- nota musical -->\r\n                        <svg viewBox=\"0 0 24 24\"><path d=\"M9 3v12.26A3.5 3.5 0 1 0 11 18V8l8-2V4l-8 2V3z\"\/><\/svg>\r\n                    <\/span>\r\n                    Pedir m\u00fasica\r\n                <\/button>\r\n\r\n                <button class=\"pwa-menu-btn\" data-view=\"messages\">\r\n                    <span class=\"icon\">\r\n                        <!-- bal\u00e3o -->\r\n                        <svg viewBox=\"0 0 24 24\"><path d=\"M4 4h16v9H7l-3 3V4z\"\/><\/svg>\r\n                    <\/span>\r\n                    Recados\r\n                <\/button>\r\n\r\n                <button class=\"pwa-menu-btn\" data-view=\"timer\">\r\n                    <span class=\"icon\">\r\n                        <!-- rel\u00f3gio -->\r\n                        <svg viewBox=\"0 0 24 24\"><path d=\"M12 2a9 9 0 1 0 9 9 9.01 9.01 0 0 0-9-9zm0 2a7 7 0 1 1-7 7 7.01 7.01 0 0 1 7-7zm-1 2v5h4v-2h-2V6z\"\/><\/svg>\r\n                    <\/span>\r\n                    Timer\r\n                <\/button>\r\n\r\n                <button class=\"pwa-menu-btn\" data-view=\"settings\">\r\n                    <span class=\"icon\">\r\n                        <!-- engrenagem -->\r\n                        <svg viewBox=\"0 0 24 24\"><path d=\"M12 8a4 4 0 1 0 4 4 4 4 0 0 0-4-4zm9 4a7.92 7.92 0 0 0-.21-1.79l2.11-1.65-2-3.46-2.49 1a8 8 0 0 0-3.1-1.8L15 2h-6l-.31 3.26a8 8 0 0 0-3.1 1.8l-2.49-1-2 3.46L3.21 10.2A7.92 7.92 0 0 0 3 12a7.92 7.92 0 0 0 .21 1.79l-2.11 1.65 2 3.46 2.49-1a8 8 0 0 0 3.1 1.8L9 22h6l.31-3.26a8 8 0 0 0 3.1-1.8l2.49 1 2-3.46-2.11-1.65A7.92 7.92 0 0 0 21 12z\"\/><\/svg>\r\n                    <\/span>\r\n                    Configura\u00e7\u00f5es\r\n                <\/button>\r\n\r\n                <button class=\"pwa-menu-btn\" data-view=\"about\">\r\n                    <span class=\"icon\">\r\n                        <!-- info -->\r\n                        <svg viewBox=\"0 0 24 24\"><path d=\"M11 9h2V7h-2zm0 8h2v-6h-2zm1-15A10 10 0 1 0 22 12 10 10 0 0 0 12 2z\"\/><\/svg>\r\n                    <\/span>\r\n                    Sobre\r\n                <\/button>\r\n\r\n                <button class=\"pwa-menu-btn whats\" id=\"pwa-whats-btn\">\r\n                    <span class=\"icon\">\r\n                        <!-- whatsapp -->\r\n                        <svg viewBox=\"0 0 24 24\"><path d=\"M12.04 2a9.93 9.93 0 0 0-8.51 15.2L2 22l4.93-1.5A9.93 9.93 0 1 0 12.04 2zm0 2a7.93 7.93 0 0 1 6.73 12.33l-.22.32a7.93 7.93 0 0 1-11.57.95l-.3-.27L5 19.24l.87-3.19-.21-.33A7.93 7.93 0 0 1 12.04 4zm-2.1 3.5c-.25 0-.65.09-.99.5-.34.41-1.3 1.27-1.3 3.11s1.33 3.6 1.52 3.85c.19.25 2.6 4 6.25 4 .54 0 1.5-.35 1.71-.87.21-.52.21-.96.15-1.05-.06-.09-.23-.15-.49-.27s-1.5-.74-1.73-.82-.4-.13-.57.13-.65.82-.8.99c-.15.17-.3.19-.56.07-.26-.12-1.09-.4-2.08-1.27-.77-.69-1.29-1.54-1.44-1.8-.15-.26-.02-.4.11-.52.11-.11.26-.3.38-.45.12-.15.16-.26.24-.43.08-.17.04-.32-.02-.45-.06-.13-.57-1.37-.8-1.88-.22-.51-.46-.44-.71-.45z\"\/><\/svg>\r\n                    <\/span>\r\n                    Chame no WhatsApp\r\n                <\/button>\r\n            <\/div>\r\n        <\/aside>\r\n\r\n        <!-- CONTE\u00daDO PRINCIPAL -->\r\n        <main class=\"pwa-main\">\r\n            <!-- Banner App -->\r\n            <div class=\"pwa-install-banner\">\r\n                <div class=\"pwa-install-left\">\r\n                    <div class=\"pwa-install-icon\">\r\n                        <svg viewBox=\"0 0 24 24\"><path d=\"M9 3v10.59L5.7 10.3 4.3 11.7 10 17.41 15.7 11.7 14.3 10.3 11 13.59V3zM4 19v2h16v-2z\"\/><\/svg>\r\n                    <\/div>\r\n                    <div>\r\n                        <div class=\"pwa-install-title\">Aplicativo R\u00e1dio F\u00e1cil<\/div>\r\n                        <div class=\"pwa-install-sub\">Instale na tela inicial para acessar rapidamente.<\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <button class=\"pwa-install-btn\" id=\"pwa-install-btn\">Instalar<\/button>\r\n            <\/div>\r\n\r\n            <!-- HOME -->\r\n            <section id=\"pwa-view-home\" class=\"pwa-view pwa-active\">\r\n                <div class=\"pwa-home-layout\">\r\n                    <div class=\"pwa-home-card\">\r\n                        <div class=\"pwa-home-header\">\r\n                            <div class=\"pwa-home-logo\">\r\n                                <svg viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg>\r\n                            <\/div>\r\n                            <div class=\"pwa-home-title\">R\u00e1dio F\u00e1cil<\/div>\r\n                            <div class=\"pwa-home-sub\">A r\u00e1dio do seu jeito<\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"pwa-badge-agora\">Agora<\/div>\r\n\r\n                        <div class=\"pwa-cover-wrap\">\r\n                            <div class=\"pwa-cover\">\r\n                                <img id=\"pwa-cover-img\" alt=\"Capa da m\u00fasica\" style=\"display:none;\">\r\n                                <div id=\"pwa-cover-fallback\" class=\"pwa-cover-fallback\">\r\n                                    R\u00c1DIO<br>F\u00c1CIL\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"pwa-program-info\">\r\n                            <div class=\"pwa-program-name\" id=\"pwa-program-name\">Programa\u00e7\u00e3o ao vivo<\/div>\r\n                            <div class=\"pwa-program-time\" id=\"pwa-program-time\">24h no ar<\/div>\r\n                            <div class=\"pwa-program-host\" id=\"pwa-program-host\">Produ\u00e7\u00e3o R\u00e1dio F\u00e1cil<\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"pwa-now-box\">\r\n                            <div class=\"pwa-now-label\">Tocando agora<\/div>\r\n                            <div class=\"pwa-now-text\" id=\"pwa-now-text\">\r\n                                R\u00e1dio F\u00e1cil \u00b7 GL Audio Technology\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- Barra azul inferior (player) -->\r\n                <div class=\"pwa-bottom-player\">\r\n                    <div class=\"pwa-bottom-cover\">\r\n                        <img id=\"pwa-bottom-cover-img\" alt=\"Capa\" style=\"display:none;\">\r\n                    <\/div>\r\n                    <div class=\"pwa-bottom-info\">\r\n                        <div class=\"pwa-bottom-program\">\r\n                            <span id=\"pwa-bottom-program-name\">R\u00e1dio F\u00e1cil<\/span>\r\n                            <span class=\"time\" id=\"pwa-bottom-program-time\"> \u00b7 AO VIVO<\/span>\r\n                        <\/div>\r\n                        <div class=\"pwa-bottom-track\" id=\"pwa-bottom-track\">\r\n                            R\u00e1dio F\u00e1cil \u00b7 GL Audio Technology\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"pwa-bottom-controls\">\r\n                        <div class=\"pwa-bottom-time\">\r\n                            <span id=\"pwa-playtime\">00:00:00<\/span>\r\n                        <\/div>\r\n                        <button class=\"pwa-round-btn\" id=\"pwa-play-btn\" aria-label=\"Play\/Pause\">\r\n                            <!-- play -->\r\n                            <svg id=\"pwa-icon-play\" viewBox=\"0 0 24 24\">\r\n                                <path d=\"M8 5v14l11-7z\"\/>\r\n                            <\/svg>\r\n                            <!-- stop -->\r\n                            <svg id=\"pwa-icon-stop\" viewBox=\"0 0 24 24\" style=\"display:none;\">\r\n                                <path d=\"M6 6h12v12H6z\"\/>\r\n                            <\/svg>\r\n                        <\/button>\r\n                        <div class=\"pwa-volume\">\r\n                            <input id=\"pwa-volume-range\" type=\"range\" min=\"0\" max=\"1\" step=\"0.01\" value=\"1\">\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/section>\r\n\r\n            <!-- OUTRAS P\u00c1GINAS (placeholders) -->\r\n            <section id=\"pwa-view-schedule\" class=\"pwa-view\">\r\n                <div class=\"pwa-view-header\">Programa\u00e7\u00e3o<\/div>\r\n                <div class=\"pwa-view-sub\">Aqui voc\u00ea pode colocar a grade de programas da R\u00e1dio F\u00e1cil.<\/div>\r\n            <\/section>\r\n\r\n            <section id=\"pwa-view-chat\" class=\"pwa-view\">\r\n                <div class=\"pwa-view-header\">Chat ao vivo<\/div>\r\n                <div class=\"pwa-view-sub\">Insira aqui o iframe ou script do chat que voc\u00ea usa.<\/div>\r\n            <\/section>\r\n\r\n            <section id=\"pwa-view-request\" class=\"pwa-view\">\r\n                <div class=\"pwa-view-header\">Pedir m\u00fasica<\/div>\r\n                <div class=\"pwa-view-sub\">Formul\u00e1rio de pedido de m\u00fasica pode ser colocado aqui.<\/div>\r\n            <\/section>\r\n\r\n            <section id=\"pwa-view-messages\" class=\"pwa-view\">\r\n                <div class=\"pwa-view-header\">Recados<\/div>\r\n                <div class=\"pwa-view-sub\">Lista de recados \/ mural pode ser implementada aqui.<\/div>\r\n            <\/section>\r\n\r\n            <section id=\"pwa-view-timer\" class=\"pwa-view\">\r\n                <div class=\"pwa-view-header\">Timer<\/div>\r\n                <div class=\"pwa-view-sub\">Em uma pr\u00f3xima etapa podemos replicar o timer igual ao original.<\/div>\r\n            <\/section>\r\n\r\n            <section id=\"pwa-view-settings\" class=\"pwa-view\">\r\n                <div class=\"pwa-view-header\">Configura\u00e7\u00f5es<\/div>\r\n                <div class=\"pwa-view-sub\">Op\u00e7\u00f5es de auto-play, idioma, etc.<\/div>\r\n            <\/section>\r\n\r\n            <section id=\"pwa-view-about\" class=\"pwa-view\">\r\n                <div class=\"pwa-view-header\">Sobre<\/div>\r\n                <div class=\"pwa-view-sub\">\r\n                    Player desenvolvido por GL Audio Technology \/ GLTEC BRASIL, integrado ao streaming da R\u00e1dio F\u00e1cil.\r\n                <\/div>\r\n            <\/section>\r\n        <\/main>\r\n    <\/div>\r\n\r\n    <!-- \u00c1UDIO: STREAM AZURACAST \/ ICECAST -->\r\n    <audio id=\"pwa-audio\"\r\n           src=\"https:\/\/glaudiotecnology.srv.br\/listen\/r%C3%A1dio_f%C3%A1cil\/radio.mp3\"\r\n           preload=\"none\"><\/audio>\r\n\r\n    <!-- Toast -->\r\n    <div class=\"pwa-toast\" id=\"pwa-toast\"><\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function(){\r\n    \/\/ ========= CONFIGURA\u00c7\u00d5ES B\u00c1SICAS =========\r\n    \/\/ AJUSTE AQUI A URL DO NOWPLAYING DO AZURACAST\r\n    \/\/ Exemplo de padr\u00e3o: https:\/\/SEUSERVIDOR\/api\/nowplaying\/NOME_DA_RADIO\r\n    const NOWPLAYING_URL = \"https:\/\/glaudiotecnology.srv.br\/api\/nowplaying\/radio_facil\"; \/\/ <-- ajuste se necess\u00e1rio\r\n\r\n    \/\/ Ajuste o WhatsApp da R\u00e1dio F\u00e1cil (55 + DDD + n\u00famero)\r\n    const WHATSAPP_NUM = \"5511999999999\";\r\n\r\n    \/\/ ========= ELEMENTOS =========\r\n    const audio = document.getElementById(\"pwa-audio\");\r\n    const playBtn = document.getElementById(\"pwa-play-btn\");\r\n    const playIcon = document.getElementById(\"pwa-icon-play\");\r\n    const stopIcon = document.getElementById(\"pwa-icon-stop\");\r\n    const volumeRange = document.getElementById(\"pwa-volume-range\");\r\n    const playtimeSpan = document.getElementById(\"pwa-playtime\");\r\n\r\n    const coverImg = document.getElementById(\"pwa-cover-img\");\r\n    const coverFallback = document.getElementById(\"pwa-cover-fallback\");\r\n    const bottomCoverImg = document.getElementById(\"pwa-bottom-cover-img\");\r\n\r\n    const nowText = document.getElementById(\"pwa-now-text\");\r\n    const bottomTrack = document.getElementById(\"pwa-bottom-track\");\r\n\r\n    const programNameTop = document.getElementById(\"pwa-program-name\");\r\n    const programTimeTop = document.getElementById(\"pwa-program-time\");\r\n    const programHostTop = document.getElementById(\"pwa-program-host\");\r\n    const bottomProgramName = document.getElementById(\"pwa-bottom-program-name\");\r\n    const bottomProgramTime = document.getElementById(\"pwa-bottom-program-time\");\r\n\r\n    const toast = document.getElementById(\"pwa-toast\");\r\n\r\n    \/\/ ========= TOAST =========\r\n    function showToast(msg){\r\n        if(!toast) return;\r\n        toast.textContent = msg;\r\n        toast.classList.add(\"pwa-show\");\r\n        setTimeout(()=>toast.classList.remove(\"pwa-show\"), 2500);\r\n    }\r\n\r\n    \/\/ ========= PLAY \/ STOP =========\r\n    let playStart = null;\r\n    let timerInterval = null;\r\n\r\n    function formatTime(total){\r\n        const h = String(Math.floor(total \/ 3600)).padStart(2,\"0\");\r\n        const m = String(Math.floor((total % 3600) \/ 60)).padStart(2,\"0\");\r\n        const s = String(total % 60).padStart(2,\"0\");\r\n        return h+\":\"+m+\":\"+s;\r\n    }\r\n\r\n    function startTimer(){\r\n        playStart = Date.now();\r\n        if(timerInterval) clearInterval(timerInterval);\r\n        timerInterval = setInterval(()=>{\r\n            const diff = Math.floor((Date.now() - playStart)\/1000);\r\n            playtimeSpan.textContent = formatTime(diff);\r\n        },1000);\r\n    }\r\n\r\n    function stopTimer(){\r\n        if(timerInterval){\r\n            clearInterval(timerInterval);\r\n            timerInterval = null;\r\n        }\r\n    }\r\n\r\n    function setPlayingUI(isPlaying){\r\n        if(isPlaying){\r\n            playIcon.style.display = \"none\";\r\n            stopIcon.style.display = \"block\";\r\n        }else{\r\n            playIcon.style.display = \"block\";\r\n            stopIcon.style.display = \"none\";\r\n        }\r\n    }\r\n\r\n    async function togglePlay(){\r\n        try{\r\n            if(audio.paused){\r\n                await audio.play();\r\n                setPlayingUI(true);\r\n                startTimer();\r\n            }else{\r\n                audio.pause();\r\n                setPlayingUI(false);\r\n                stopTimer();\r\n            }\r\n        }catch(e){\r\n            showToast(\"Clique novamente: o navegador bloqueou o auto-play.\");\r\n        }\r\n    }\r\n\r\n    playBtn.addEventListener(\"click\", togglePlay);\r\n    audio.addEventListener(\"ended\", ()=>{ setPlayingUI(false); stopTimer(); });\r\n\r\n    volumeRange.addEventListener(\"input\", ()=> {\r\n        audio.volume = parseFloat(volumeRange.value || \"1\");\r\n    });\r\n\r\n    \/\/ ========= MENU LATERAL \u2013 TROCA DE P\u00c1GINA =========\r\n    const menuButtons = document.querySelectorAll(\"#pwa-rf .pwa-menu-btn[data-view]\");\r\n    const views = document.querySelectorAll(\"#pwa-rf .pwa-view\");\r\n\r\n    menuButtons.forEach(btn=>{\r\n        btn.addEventListener(\"click\", ()=>{\r\n            const target = btn.getAttribute(\"data-view\");\r\n            if(!target) return;\r\n            menuButtons.forEach(b=>b.classList.remove(\"pwa-active\"));\r\n            btn.classList.add(\"pwa-active\");\r\n            views.forEach(v=>{\r\n                v.classList.toggle(\"pwa-active\", v.id === \"pwa-view-\" + target);\r\n            });\r\n        });\r\n    });\r\n\r\n    \/\/ ========= AZURACAST \u2013 NOW PLAYING =========\r\n    async function updateNowPlaying(){\r\n        if(!NOWPLAYING_URL) return;\r\n\r\n        try{\r\n            const res = await fetch(NOWPLAYING_URL, {cache: \"no-store\"});\r\n            if(!res.ok) throw new Error(\"HTTP \" + res.status);\r\n            const data = await res.json();\r\n\r\n            \/\/ Estrutura padr\u00e3o do AzuraCast:\r\n            \/\/ data.now_playing.song.title, .artist, .art\r\n            let title = \"\";\r\n            let artist = \"\";\r\n            let art = \"\";\r\n\r\n            if (data && data.now_playing && data.now_playing.song){\r\n                title = data.now_playing.song.title || \"\";\r\n                artist = data.now_playing.song.artist || \"\";\r\n                art = data.now_playing.song.art || \"\";\r\n            }\r\n\r\n            const trackText = (artist && title) ? (artist + \" - \" + title) : (title || artist || \"R\u00e1dio F\u00e1cil \u00b7 GL Audio Technology\");\r\n\r\n            nowText.textContent = trackText;\r\n            bottomTrack.textContent = trackText;\r\n\r\n            \/\/ Atualiza poss\u00edveis infos de programa\r\n            if(data && data.now_playing && data.now_playing.streamer){\r\n                programHostTop.textContent = \"Com \" + data.now_playing.streamer;\r\n            }\r\n            if(data && data.now_playing && data.now_playing.playlist){\r\n                programNameTop.textContent = data.now_playing.playlist;\r\n                bottomProgramName.textContent = data.now_playing.playlist;\r\n            }\r\n\r\n            \/\/ Capa\/arte\r\n            if(art){\r\n                coverImg.src = art;\r\n                coverImg.style.display = \"block\";\r\n                coverFallback.style.display = \"none\";\r\n\r\n                bottomCoverImg.src = art;\r\n                bottomCoverImg.style.display = \"block\";\r\n            }else{\r\n                coverImg.style.display = \"none\";\r\n                coverFallback.style.display = \"flex\";\r\n                bottomCoverImg.style.display = \"none\";\r\n            }\r\n        }catch(e){\r\n            \/\/ Se der erro, apenas mant\u00e9m texto padr\u00e3o\r\n            console.warn(\"Erro ao buscar AzuraCast:\", e);\r\n        }\r\n    }\r\n\r\n    \/\/ Atualiza imediatamente e depois a cada 20s\r\n    updateNowPlaying();\r\n    setInterval(updateNowPlaying, 20000);\r\n\r\n    \/\/ ========= INSTALAR \/ ATALHO =========\r\n    const installBtn = document.getElementById(\"pwa-install-btn\");\r\n    installBtn.addEventListener(\"click\", ()=>{\r\n        showToast(\"Use 'Adicionar \u00e0 tela inicial' no menu do navegador.\");\r\n    });\r\n\r\n    \/\/ ========= WHATSAPP =========\r\n    const whatsBtn = document.getElementById(\"pwa-whats-btn\");\r\n    whatsBtn.addEventListener(\"click\", ()=>{\r\n        const msg = encodeURIComponent(\"Ol\u00e1, estou ouvindo a R\u00e1dio F\u00e1cil!\");\r\n        if(WHATSAPP_NUM && WHATSAPP_NUM.length > 5){\r\n            window.open(\"https:\/\/wa.me\/\"+WHATSAPP_NUM+\"?text=\"+msg, \"_blank\");\r\n        }else{\r\n            showToast(\"Configure o n\u00famero de WhatsApp no c\u00f3digo (WHATSAPP_NUM).\");\r\n        }\r\n    });\r\n})();\r\n<\/script>\r\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>R\u00e1dio F\u00e1cil A sua r\u00e1dio no app Ouvir a r\u00e1dio Programa\u00e7\u00e3o Chat ao vivo Pedir m\u00fasica Recados Timer Configura\u00e7\u00f5es Sobre Chame no WhatsApp Aplicativo R\u00e1dio F\u00e1cil Instale na tela inicial para acessar rapidamente. Instalar R\u00e1dio F\u00e1cil A r\u00e1dio do seu jeito Agora R\u00c1DIOF\u00c1CIL Programa\u00e7\u00e3o ao vivo 24h no ar Produ\u00e7\u00e3o R\u00e1dio F\u00e1cil Tocando agora R\u00e1dio [&hellip;]<\/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-512","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/gltecbrasil.com.br\/index.php\/wp-json\/wp\/v2\/pages\/512","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=512"}],"version-history":[{"count":7,"href":"https:\/\/gltecbrasil.com.br\/index.php\/wp-json\/wp\/v2\/pages\/512\/revisions"}],"predecessor-version":[{"id":520,"href":"https:\/\/gltecbrasil.com.br\/index.php\/wp-json\/wp\/v2\/pages\/512\/revisions\/520"}],"wp:attachment":[{"href":"https:\/\/gltecbrasil.com.br\/index.php\/wp-json\/wp\/v2\/media?parent=512"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}