<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Manual de Instalação - Chama Atendente</title>
    <style>
        :root {
            --primary-color: #d9534f;
            --primary-dark: #c9302c;
            --bg-body: #f4f7f6;
            --bg-card: #ffffff;
            --text-main: #333;
            --text-muted: #666;
            --accent-blue: #2d9cdb;
            --warning-bg: #fff3cd;
            --warning-border: #856404;
        }

        body {
            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            line-height: 1.6;
            color: var(--text-main);
            background-color: var(--bg-body);
            margin: 0;
            padding: 0;
        }

        .container {
            max-width: 850px;
            margin: 40px auto;
            background: var(--bg-card);
            padding: 40px;
            border-radius: 12px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.05);
        }

        header {
            border-bottom: 3px solid var(--primary-color);
            margin-bottom: 30px;
            padding-bottom: 20px;
            text-align: center;
        }

        h1 { color: var(--primary-color); margin: 0; font-size: 2.2em; text-transform: uppercase; letter-spacing: 1px; }
        h2 { color: var(--primary-dark); border-bottom: 1px solid #eee; padding-bottom: 10px; margin-top: 40px; display: flex; align-items: center; }
        h3 { color: #444; margin-bottom: 10px; }

        .subtitle { color: var(--text-muted); font-size: 1.1em; margin-top: 10px; }

        .step-card {
            background: #fff;
            border: 1px solid #e1e4e8;
            border-left: 6px solid var(--primary-color);
            padding: 20px;
            margin-bottom: 25px;
            border-radius: 4px;
            transition: transform 0.2s;
        }

        .step-card:hover { transform: translateX(5px); }

        .important-box {
            background: #2c3e50;
            color: #ecf0f1;
            padding: 25px;
            border-radius: 8px;
            margin: 30px 0;
        }
        .important-box h3 { color: #fff; margin-top: 0; }

        .warning {
            background: var(--warning-bg);
            border: 1px solid var(--warning-border);
            color: var(--warning-border);
            padding: 20px;
            border-radius: 8px;
            margin: 20px 0;
            position: relative;
        }

        .tip {
            background: #e8f4fd;
            border-left: 5px solid var(--accent-blue);
            padding: 15px;
            margin: 15px 0;
            font-style: italic;
        }

        code {
            background: #f0f0f0;
            padding: 3px 8px;
            border-radius: 4px;
            font-family: 'Consolas', monospace;
            font-size: 0.95em;
            color: #d63384;
        }

        .btn-ui {
            background: #eee;
            border: 1px solid #ccc;
            padding: 2px 8px;
            border-radius: 4px;
            font-weight: bold;
            box-shadow: 0 2px 0 #bbb;
        }

        a { color: var(--accent-blue); text-decoration: none; font-weight: bold; }
        a:hover { text-decoration: underline; }

        ul, ol { padding-left: 20px; }
        li { margin-bottom: 8px; }

        .badge {
            display: inline-block;
            background: var(--primary-color);
            color: white;
            padding: 2px 10px;
            border-radius: 20px;
            font-size: 0.8em;
            margin-right: 10px;
            vertical-align: middle;
        }

        @media (max-width: 600px) {
            .container { margin: 10px; padding: 20px; }
            h1 { font-size: 1.5em; }
        }
    </style>
</head>
<body>

<div class="container">
    <header>
        <h1>Guia de Instalação</h1>
        <div class="subtitle">Infraestrutura Local: <strong>Sistema Chama Atendente</strong></div>
    </header>

    <p>Este manual orienta a configuração do ambiente <strong>XAMPP</strong> para hospedar o sistema de gestão em eventos. Siga rigorosamente os passos para garantir a estabilidade do atendimento.</p>

    <h2>🚀 1. Download e Instalação</h2>
    
    <div class="step-card">
        <h3>Acesso ao Software</h3>
        <ul>
            <li>Acesse o site oficial: <a href="https://www.apachefriends.org/pt_br/index.html" target="_blank">Apache Friends</a>.</li>
            <li>Baixe a versão para <strong>Windows</strong> (Recomendado: 8.2.12 ou superior).</li>
        </ul>
    </div>

    <div class="step-card">
        <h3>Processo de Setup</h3>
        <ol>
            <li>Execute o instalador como Administrador.</li>
            <li>Ignore avisos de UAC (User Account Control) clicando em <span class="btn-ui">OK</span>.</li>
            <li>No seletor de componentes, mantenha <strong>Apache</strong> e <strong>MySQL</strong> marcados.</li>
            <li><strong>Diretório Crítico:</strong> Instale obrigatoriamente em <code>C:\xampp</code>.</li>
        </ol>
    </div>

    <h2>📂 2. Configuração do Sistema (htdocs)</h2>
    <div class="step-card">
        <p>A pasta <code>htdocs</code> é onde o sistema reside. Siga a ordem:</p>
        <ol>
            <li>Navegue até <code>C:\xampp\htdocs</code>.</li>
            <li><strong>Limpeza:</strong> Delete todos os arquivos e pastas existentes nesta pasta.</li>
            <li><strong>Implantação:</strong> Cole os arquivos do <strong>Chama Atendente</strong> aqui.</li>
            <li>Verifique se o arquivo <code>index.php</code> está na raiz da pasta, e não sub-alocado em outra pasta.</li>
        </ol>
    </div>

    <div class="important-box">
        <h3>🌐 3. IP Fixo: O Pilar da Estabilidade</h3>
        <p>Em eventos, o servidor deve ter um endereço constante. Se o IP mudar, os QR Codes impressos param de funcionar.</p>
        <ul>
            <li><strong>Por que?</strong> Garante que o fluxo de comunicação e a segurança de dados não sejam interrompidos por reinicializações de rede.</li>
            <li><strong>Como fazer:</strong> Abra o terminal (<code>CMD</code>), digite <code>ipconfig</code> e anote o <strong>IPv4</strong>.</li>
            <li><strong>Recomendação:</strong> Solicite ao TI a <strong>Reserva de IP (DHCP Static)</strong> no roteador para o MAC Address deste servidor.</li>
        </ul>
    </div>

    <h2>⚙️ 4. Ativação e Ajustes Técnicos</h2>
    
    <div class="step-card">
        <h3>Painel de Controle</h3>
        <p>Abra o XAMPP Control Panel e clique em <span class="btn-ui">Start</span> para <strong>Apache</strong> e <strong>MySQL</strong>. Os nomes devem ficar destacados em <span style="color: green; font-weight: bold;">Verde</span>.</p>
    </div>

    <div class="step-card">
        <h3>Ativando Extensão GD (QR Codes)</h3>
        <p>Caso os QR Codes do sistema não sejam gerados, habilite a biblioteca gráfica:</p>
        <ol>
            <li>No painel, clique em <span class="btn-ui">Config</span> (linha do Apache) > <code>PHP (php.ini)</code>.</li>
            <li>Pressione <code>Ctrl + F</code> e procure por <code>extension=gd</code>.</li>
            <li>Remova o ponto e vírgula (<code>;</code>) do início da linha.</li>
            <li>Salve e <strong>Reinicie (Stop/Start)</strong> o Apache.</li>
        </ol>
    </div>

    <div class="warning">
        <strong>🔐 SEGURANÇA E ACESSO:</strong><br><br>
        <strong>URL de Acesso:</strong> Digite o IP do servidor no navegador dos dispositivos móveis.<br>
        <strong>Credenciais Iniciais:</strong> Usuário: <code>admin</code> | Senha: <code>admin</code><br>
        <hr style="border: 0; border-top: 1px solid #856404; margin: 10px 0;">
        <strong>AÇÃO OBRIGATÓRIA:</strong> Altere a senha no primeiro login para evitar acessos não autorizados durante o evento.
    </div>

    <footer style="text-align: center; margin-top: 40px; color: #999; font-size: 0.8em;">
        Manual Técnico - Chama Atendente &copy; 2026 - Configuração de Servidor Local
    </footer>
</div>

</body>
</html>