<?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('../mensagem.txt')) {
    $data = json_decode(file_get_contents('../mensagem.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 = "BEM-VINDO AO IBO PRO";
    $cor = "#ffffff";
    $bgcolor = "#000000";
    $opacity = "1";
    $fontSize = "16";
    $efeito = "static";
}
?>

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <style>
        /* Reset total para ocupar 100% do WebView */
        html, body {  
            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%; /* Ocupa a altura total do body */
            display: flex;
            align-items: center; /* Centraliza verticalmente */
            background-color: rgba(<?php echo hexToRgb($bgcolor); ?>, <?php echo $opacity; ?>);
            
            /* Lógica de Centralização Horizontal */
            <?php if ($efeito === 'scroll'): ?>
                justify-content: flex-start;
            <?php else: ?>
                justify-content: center; /* CENTRALIZAÇÃO ABSOLUTA PARA "STATIC", "BLINK", ETC */
            <?php endif; ?>
        }

        .mensagem {
            color: <?php echo $cor; ?>;
            font-size: <?php echo $fontSize; ?>px;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1px;
            white-space: nowrap;
            display: block;
            text-align: center;
            width: <?php echo ($efeito === 'scroll') ? 'auto' : '100%'; ?>;
        }

        /* ----- EFEITO ROLANTE (SCROLL) ----- */
        @keyframes scroll {
            0% { transform: translateX(100vw); }
            100% { transform: translateX(-100%); }
        }
        .mensagem-scroll {
            animation: scroll 15s linear infinite;
            padding-left: 0;
        }

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

        /* ----- EFEITO ESTÁTICO (PARADO NO CENTRO) ----- */
        .mensagem-static {
            /* O Flexbox do container já faz o trabalho duro */
        }

        /* ----- EFEITO DIGITANDO ----- */
        @keyframes typing {
            from { width: 0; }
            to { width: 100%; }
        }
        .mensagem-typing {
            overflow: hidden;
            margin: 0 auto;
            border-right: .15em solid <?php echo $cor; ?>;
            animation: typing 3s steps(30, end) forwards;
        }
    </style>
</head>
<body>
    <div class="mensagem-container">
        <div class="mensagem mensagem-<?php echo ($efeito === 'static' ? 'static' : $efeito); ?>">
            <?php echo $mensagem; ?>
        </div>
    </div>
</body>
</html>
