!DOCTYPE html
html lang=pt-br
head
    meta charset=UTF-8
    meta name=viewport content=width=device-width, initial-scale=1.0, user-scalable=no
    titleRádio Araguari FMtitle

    link rel=stylesheet href=httpscdnjs.cloudflare.comajaxlibsfont-awesome6.4.0cssall.min.css

    style
        root {
            --bg-top #19882C;
            --primary #001689;
            --accent #FAED00;
            --text #ffffff;
            --text-gray #e0e0e0;
            --glass rgba(0, 22, 137, 0.5);
            --whatsapp #25D366;
        }

         { margin 0; padding 0; box-sizing border-box; font-family 'Segoe UI', Tahoma, sans-serif; outline none; -webkit-tap-highlight-color transparent; }

        body {
            background linear-gradient(180deg, #19882C 0%, #00105E 100%);
            color var(--text);
            height 100vh;
            overflow hidden;
            display flex;
            align-items center;
            justify-content center;
        }

        #mainContainer { width 100%; height 100%; display flex; flex-direction column; }

        #playerScreen {
            flex 1;
            padding 20px;
            display flex;
            flex-direction column;
            align-items center;
            justify-content center;
            max-width 450px;
            margin 0 auto;
            width 100%;
        }

        .status-bar {
            width 100%;
            display flex;
            justify-content space-between;
            align-items center;
            margin-bottom 30px;
            height 40px;
        }

        .clock-badge {
            color white;
            font-size 0.95rem;
            font-weight 600;
            background rgba(0,0,0,0.3);
            padding 6px 15px;
            border-radius 20px;
            border 1px solid rgba(255,255,255,0.2);
        }

        .live-badge {
            background #d32f2f;
            color white;
            padding 5px 12px;
            border-radius 5px;
            font-size 0.8rem;
            font-weight bold;
            text-transform uppercase;
            box-shadow 0 0 10px rgba(211, 47, 47, 0.6);
            display none;
            animation pulseLive 2s infinite;
        }

        @keyframes pulseLive {
            0% { opacity 1; }
            50% { opacity 0.7; }
            100% { opacity 1; }
        }

        .album-art {
            width 260px;
            height 260px;
            border-radius 50%;
            border 6px solid var(--accent);
            overflow hidden;
            box-shadow 0 0 30px rgba(250, 237, 0, 0.3);
            margin-bottom 30px;
            background #fff;
            display flex;
            align-items center;
            justify-content center;
            transition all 0.3s ease;
        }

        .album-art img {
            width 100%;
            height 100%;
            object-fit contain;
            padding 5px;
        }

        .playing .album-art {
            animation breathLogo 4s ease-in-out infinite;
        }

        @keyframes breathLogo {
            0% { transform scale(1) translateY(0); box-shadow 0 0 30px rgba(250, 237, 0, 0.3); }
            50% { transform scale(1.03) translateY(-8px); box-shadow 0 0 60px rgba(250, 237, 0, 0.8); }
            100% { transform scale(1) translateY(0); box-shadow 0 0 30px rgba(250, 237, 0, 0.3); }
        }

        .track-info {
            text-align center;
            margin-bottom 25px;
            width 100%;
        }

        .track-title {
            font-size 1.5rem;
            font-weight 800;
            margin-bottom 5px;
            color var(--accent);
            white-space nowrap;
            overflow hidden;
            text-overflow ellipsis;
            text-shadow 2px 2px 4px rgba(0,0,0,0.6);
        }

        .track-artist {
            font-size 1.1rem;
            color var(--text);
            font-weight 500;
            text-shadow 1px 1px 3px rgba(0,0,0,0.6);
        }

        .progress-container {
            width 100%;
            display flex;
            align-items center;
            gap 12px;
            margin-bottom 30px;
            font-size 0.85rem;
            color var(--text-gray);
            font-weight 500;
        }

        .progress-bar {
            flex 1;
            height 6px;
            background rgba(255,255,255,0.2);
            border-radius 3px;
            overflow hidden;
        }

        #progressFill {
            width 0%;
            height 100%;
            background var(--accent);
            box-shadow 0 0 10px var(--accent);
            transition width 1s linear;
        }

        .controls-wrapper {
            display flex;
            flex-direction column;
            align-items center;
            gap 20px;
            width 100%;
            margin-bottom 20px;
        }

        .btn-play {
            width 90px;
            height 90px;
            border-radius 50%;
            background var(--accent);
            color var(--primary);
            border none;
            display flex;
            align-items center;
            justify-content center;
            font-size 3rem;
            cursor pointer;
            box-shadow 0 0 30px rgba(250, 237, 0, 0.4);
            transition transform 0.2s, background 0.2s;
            padding-left 5px;
        }

        .btn-playactive {
            transform scale(0.95);
            background #e6d900;
        }

        .playing .btn-play {
            padding-left 0;
        }

        .action-buttons {
            display flex;
            gap 15px;
            width 100%;
            justify-content center;
            margin-top 10px;
            flex-wrap wrap;
        }

        .btn-action {
            background var(--glass);
            border 1px solid rgba(255,255,255,0.2);
            color white;
            padding 12px 20px;
            border-radius 30px;
            font-weight 600;
            font-size 0.95rem;
            display flex;
            align-items center;
            gap 8px;
            cursor pointer;
            transition 0.2s;
        }

        .btn-actionhover {
            background rgba(255,255,255,0.1);
            border-color var(--accent);
            color var(--accent);
        }

        .btn-actionactive {
            transform scale(0.95);
        }

        .volume-box {
            width 80%;
            display flex;
            align-items center;
            gap 15px;
            margin-top 10px;
        }

        input[type=range] {
            flex 1;
            accent-color var(--accent);
            cursor pointer;
            height 6px;
            background rgba(255,255,255,0.2);
            border-radius 3px;
            -webkit-appearance none;
        }

        input[type=range]-webkit-slider-thumb {
            -webkit-appearance none;
            width 16px;
            height 16px;
            background var(--accent);
            border-radius 50%;
            cursor pointer;
        }

        @media (max-width 768px) {
            .volume-box { display none !important; }
        }
    style
head
body
    div id=mainContainer
        div id=playerScreen

            div class=status-bar
                div class=clock-badge id=clockDisplay0000div
                div class=live-badge id=liveBadgeAO VIVOdiv
            div

            div class=album-art
                img src=logo.png id=fixedLogo alt=Araguari FM onerror=this.src='logo.jpg'
            div

            div class=track-info
                div class=track-title id=songTitleRádio Araguari FMdiv
                div class=track-artist id=artistNameA 1ª Rádio do Rio Araguaridiv
            div

            div class=progress-container
                span id=timeCurrent0000span
                div class=progress-bardiv id=progressFilldivdiv
                span id=timeTotalAo Vivospan
            div

            div class=controls-wrapper
                button class=btn-play id=btnPlayMain onclick=togglePlay()
                    i class=fas fa-play id=playIconi
                button

                div class=action-buttons
                    button class=btn-action onclick=shareApp()
                        i class=fas fa-share-nodesi Compartilhar
                    button
                div
            div

            div class=volume-box id=volumeBox
                i class=fas fa-volume-low style=colorrgba(255,255,255,0.6)i
                input type=range min=0 max=100 value=100 oninput=setVolume(this.value)
                i class=fas fa-volume-high style=colorwhitei
            div

        div
    div

    audio id=audio src=httpsmedia.araguarifm.com.brlistenaraguariradio.mp3 preload=noneaudio

    script
        const audio = document.getElementById('audio');
        const icon = document.getElementById('playIcon');
        const playerScreen = document.getElementById('playerScreen');
        const liveBadge = document.getElementById('liveBadge');

        const STREAM_URL = httpsmedia.araguarifm.com.brlistenaraguariradio.mp3;
        const API_URL = httpsmedia.araguarifm.com.brapinowplayingaraguari;

        let isPlaying = false;
        const isAndroidApp = typeof Android !== undefined;

        try {
            if (isAndroidApp) {
                document.getElementById('volumeBox').style.display = 'none';
            }
        } catch (e) {}

        function updateClock() {
            const now = new Date();
            const options = { timeZone 'AmericaSao_Paulo', hour '2-digit', minute '2-digit' };
            document.getElementById('clockDisplay').innerText = now.toLocaleTimeString('pt-BR', options);
        }
        setInterval(updateClock, 1000);
        updateClock();

        function togglePlay() {
            if (isAndroidApp && Android.play && Android.pause) {
                if (isPlaying) {
                    Android.pause();
                    atualizarIcone(false);
                } else {
                    Android.play();
                    atualizarIcone(true);
                }
                return;
            }

            if (isPlaying) {
                audio.pause();
                atualizarIcone(false);
            } else {
                audio.src = STREAM_URL;
                audio.load();
                
                 Toca silenciosamente, sem alertar o usuário se o servidor demorar
                audio.play()
                    .then(() = atualizarIcone(true))
                    .catch(err = {
                        console.log(Erro de timeout ou bloqueio do navegador, err);
                        atualizarIcone(false);
                    });
            }
        }

        function atualizarIcone(tocando) {
            isPlaying = tocando;

            if (tocando) {
                icon.classList.remove('fa-play');
                icon.classList.add('fa-pause');
                playerScreen.classList.add('playing');
            } else {
                icon.classList.remove('fa-pause');
                icon.classList.add('fa-play');
                playerScreen.classList.remove('playing');
            }
        }

        function setVolume(v) {
            audio.volume = v  100;
        }

        function shareApp() {
            const titulo = Ouça a Rádio Araguari FM!;
            const texto = A 1ª Rádio do Rio Araguari direto no seu celular. Baixe o app;
            const urlApp = httpsplay.google.comstoreappsdetailsid=com.araguarynet.araguarifm;
            
             O texto completo pronto para ser compartilhado
            const mensagemCompleta = titulo +   + texto +   + urlApp;
            const msgParaZap = encodeURIComponent(mensagemCompleta);

             1. Tenta usar a ponte nativa do App (Android Studio)
             Correção O código Java espera receber apenas uma string (String text)
            if (isAndroidApp && Android.share) {
                Android.share(mensagemCompleta);
                return;
            }

             2. Tenta a tela de compartilhamento padrão do celular
            if (navigator.share) {
                navigator.share({
                    title titulo,
                    text texto,
                    url urlApp
                }).catch(err = {
                    console.log(Compartilhamento nativo falhou, tentando fallback..., err);
                    window.location.href = `httpswa.metext=${msgParaZap}`;
                });
            } else {
                 3. Método bruto para apps que bloqueiam abas novas
                window.location.href = `httpswa.metext=${msgParaZap}`;
            }
        }

        async function updateMeta() {
            try {
                const res = await fetch(API_URL, { cache no-store });
                const data = await res.json();

                if (data.live && data.live.is_live === true) {
                    liveBadge.style.display = 'block';
                } else {
                    liveBadge.style.display = 'none';
                }

                const song = data.now_playing.song  {};
                document.getElementById('songTitle').innerText = song.text  song.title  Rádio Araguari FM;
                document.getElementById('artistName').innerText = song.artist  A 1ª Rádio do Rio Araguari;

                const el = data.now_playing.elapsed  0;
                const dur = data.now_playing.duration  0;

                if (dur  0) {
                    document.getElementById('progressFill').style.width = ((el  dur)  100) + %;
                    document.getElementById('timeCurrent').innerText = formatTime(el);
                    document.getElementById('timeTotal').innerText = formatTime(dur);
                } else {
                    document.getElementById('progressFill').style.width = 100%;
                    document.getElementById('timeCurrent').innerText = 0000;
                    document.getElementById('timeTotal').innerText = Ao Vivo;
                }
            } catch (e) {
                console.log(Aguardando metadados...);
            }
        }

        function formatTime(s) {
            const m = Math.floor(s  60);
            const sec = Math.floor(s % 60);
            return m +  + (sec  10  0  ) + sec;
        }

        audio.addEventListener(pause, () = {
            if (!isAndroidApp) atualizarIcone(false);
        });

        audio.addEventListener(ended, () = {
            if (!isAndroidApp) atualizarIcone(false);
        });

        setInterval(updateMeta, 5000);
        updateMeta();
    script
body
html