<?php
// Função para converter HEX para RGB
function hexToRgb($hex) {
    $hex = str_replace("#", "", $hex);
    if(strlen($hex) == 3) {
        $r = hexdec(substr($hex, 0, 1).substr($hex, 0, 1));
        $g = hexdec(substr($hex, 1, 1).substr($hex, 1, 1));
        $b = hexdec(substr($hex, 2, 1).substr($hex, 2, 1));
    } else {
        $r = hexdec(substr($hex, 0, 2));
        $g = hexdec(substr($hex, 2, 2));
        $b = hexdec(substr($hex, 4, 2));
    }
    return "$r, $g, $b";
}

if (file_exists('../mensagem4.txt')) {
    $data = json_decode(file_get_contents('../mensagem4.txt'), true);
    $mensagem = htmlspecialchars($data['mensagem']);
    $cor = htmlspecialchars($data['cor']);
    $bgcolor = htmlspecialchars($data['bgcolor']);
    $opacity = htmlspecialchars($data['opacity']);
    $fontSize = isset($data['fontSize']) ? htmlspecialchars($data['fontSize']) : "16";
    $efeito = isset($data['efeito']) ? htmlspecialchars($data['efeito']) : "scroll";
} else {
    $mensagem = "Nenhuma mensagem gravada.";
    $cor = "#000000";
    $bgcolor = "#ffffff";
    $opacity = "1";
    $fontSize = "16";
    $efeito = "scroll";
}
?>

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <style>
        /* Força o body a ocupar 100% da tela do WebView */
        html, body {  
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: transparent;
            display: flex;
            align-items: center; /* Centraliza verticalmente */
        }

        .mensagem-container {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center; /* Centraliza verticalmente o conteúdo interno */
            background-color: rgba(<?php echo hexToRgb($bgcolor); ?>, <?php echo $opacity; ?>);
            
            /* Lógica de Centralização Horizontal:
               Se for scroll, alinha à esquerda para iniciar a corrida.
               Se for parado ou outros, centraliza no meio exato. */
            <?php if ($efeito === 'scroll'): ?>
                justify-content: flex-start;
            <?php else: ?>
                justify-content: center; 
            <?php endif; ?>
            
            overflow: hidden;
            white-space: nowrap;
        }

        .mensagem {
            color: <?php echo $cor; ?>;
            letter-spacing: 1px;
            text-transform: uppercase;
            font-size: <?php echo $fontSize; ?>px;
            font-weight: bold;
            padding: 0 10px;
            display: block;
            text-align: center;
            /* Garante que o texto tenha largura total para o alinhamento central funcionar */
            width: <?php echo ($efeito === 'scroll') ? 'auto' : '100%'; ?>;
        }

        /* --- ANIMAÇÃO: ROLANTE (SCROLL) --- */
        @keyframes scroll {
            0% { transform: translateX(100vw); }
            100% { transform: translateX(-100%); }
        }
        .mensagem-scroll {
            animation: scroll 12s linear infinite;
        }

        /* --- ANIMAÇÃO: PISCANDO (BLINK) --- */
        @keyframes blink {
            0%, 50%, 100% { opacity: 1; }
            25%, 75% { opacity: 0; }
        }
        .mensagem-blink {
            animation: blink 1s step-start infinite;
        }

        /* --- ANIMAÇÃO: DIGITANDO (TYPING) --- */
        @keyframes typing {
            from { width: 0; }
            to { width: 100%; }
        }
        .mensagem-typing {
            overflow: hidden;
            border-right: .15em solid <?php echo $cor; ?>;
            animation: typing 4s steps(40, end) infinite;
            margin: 0 auto; /* Centraliza o bloco de digitação */
        }

        /* --- EFEITO: PARADO (STATIC) --- */
        .mensagem-static {
            /* O justify-content: center do pai resolve a centralização */
        }

        /* --- EFEITO: FLASH --- */
        @keyframes flash {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }
        .mensagem-flash {
            animation: flash 1s step-start infinite;
        }
    </style>
</head>
<body>
    <div class="mensagem-container">
        <div class="mensagem mensagem-<?php echo ($efeito === 'static' ? 'static' : $efeito); ?>">
            <?php echo $mensagem; ?>
        </div>
    </div>
</body>
</html>
