<?php
// Função para converter HEX para RGB para aplicar opacidade
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";
}

$id = isset($_GET['id']) ? intval($_GET['id']) : 0;
$jsonPath = "db/msg_rev_" . $id . ".json";

if ($id > 0 && file_exists($jsonPath)) {
    $data = json_decode(file_get_contents($jsonPath), 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";
    $cor = "#ffffff";
    $bgcolor = "#000000";
    $opacity = "0.5";
    $fontSize = "16";
    $efeito = "static";
}
?>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        html, body {  
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: transparent;
            display: flex;
            align-items: center;
        }

        .mensagem-container {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            background-color: rgba(<?php echo hexToRgb($bgcolor); ?>, <?php echo $opacity; ?>);
            
            <?php if ($efeito === 'scroll'): ?>
                justify-content: flex-start;
            <?php else: ?>
                justify-content: center;
            <?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%'; ?>;
            font-family: sans-serif;
        }

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

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

        /* 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;
        }
        
        .mensagem-static { /* Centralizado via Flexbox */ }
    </style>
</head>
<body>
    <div class="mensagem-container">
        <div class="mensagem mensagem-<?php echo $efeito; ?>">
            <?php echo $mensagem; ?>
        </div>
    </div>
</body>
</html>
