Sistema de Cálculo de IMC

Sistema completo em PHP e HTML para calcular o IMC, com design moderno e todas as classificações da OMS (Organização Mundial da Saúde).

 

Estrutura de Arquivos

/imc/
├── index.php
└── style.css

1. Arquivo index.php

<?php
// index.php - Sistema de Cálculo de IMC

// Inicializa variáveis
$peso = '';
$altura = '';
$imc = null;
$classificacao = '';
$cor_classificacao = '';
$erro = '';
$dica = '';

// Verifica se o formulário foi enviado
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // Recebe e limpa os dados do formulário
    $peso = str_replace(',', '.', trim($_POST['peso'] ?? ''));
    $altura = str_replace(',', '.', trim($_POST['altura'] ?? ''));
    
    // Validação dos dados
    if (empty($peso) || empty($altura)) {
        $erro = '⚠️ Por favor, preencha todos os campos!';
    } elseif (!is_numeric($peso) || !is_numeric($altura)) {
        $erro = '⚠️ Por favor, insira apenas números válidos!';
    } elseif ($peso <= 0 || $altura <= 0) {
        $erro = '⚠️ Os valores devem ser maiores que zero!';
    } elseif ($peso > 500) {
        $erro = '⚠️ O peso informado parece muito alto. Verifique o valor!';
    } elseif ($altura > 3) {
        $erro = '⚠️ A altura informada parece muito alta. Use metros (ex: 1.75)!';
    } else {
        // Converte altura para metros se estiver em centímetros
        if ($altura > 3) {
            $altura = $altura / 100;
        }
        
        // Calcula o IMC
        // Fórmula: IMC = peso / (altura * altura)
        $imc = $peso / ($altura * $altura);
        $imc = round($imc, 2);
        
        // Classificação do IMC segundo a OMS
        if ($imc < 18.5) {
            $classificacao = 'Abaixo do peso';
            $cor_classificacao = '#3498db'; // Azul
            $dica = 'Procure um nutricionista para avaliar sua alimentação e ganhar peso de forma saudável.';
        } elseif ($imc >= 18.5 && $imc < 25) {
            $classificacao = 'Peso normal';
            $cor_classificacao = '#2ecc71'; // Verde
            $dica = 'Parabéns! Você está com o peso ideal. Continue mantendo hábitos saudáveis.';
        } elseif ($imc >= 25 && $imc < 30) {
            $classificacao = 'Sobrepeso';
            $cor_classificacao = '#f39c12'; // Laranja
            $dica = 'Atenção! Considere ajustar sua alimentação e praticar atividades físicas regularmente.';
        } elseif ($imc >= 30 && $imc < 35) {
            $classificacao = 'Obesidade Grau I';
            $cor_classificacao = '#e67e22'; // Laranja escuro
            $dica = 'Procure orientação médica e nutricional para melhorar sua saúde.';
        } elseif ($imc >= 35 && $imc < 40) {
            $classificacao = 'Obesidade Grau II';
            $cor_classificacao = '#e74c3c'; // Vermelho
            $dica = 'É importante buscar acompanhamento médico e nutricional o quanto antes.';
        } else {
            $classificacao = 'Obesidade Grau III (Mórbida)';
            $cor_classificacao = '#c0392b'; // Vermelho escuro
            $dica = 'Procure ajuda médica especializada urgentemente. Sua saúde é prioridade!';
        }
    }
}
?>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculadora de IMC</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>💪 <span>Calculadora de IMC</span></h1>
        <p class="subtitle">Descubra seu Índice de Massa Corpórea e saiba como está sua saúde</p>

        <!-- Formulário -->
        <div class="form-card">
            <form method="POST" action="">
                <div class="form-row">
                    <div class="form-group">
                        <label for="peso">⚖️ Peso (kg)</label>
                        <input 
                            type="text" 
                            id="peso" 
                            name="peso" 
                            placeholder="Ex: 70.5" 
                            value="<?php echo htmlspecialchars($peso); ?>"
                            required
                        >
                        <small>Use ponto ou vírgula para decimais</small>
                    </div>

                    <div class="form-group">
                        <label for="altura">📏 Altura (m)</label>
                        <input 
                            type="text" 
                            id="altura" 
                            name="altura" 
                            placeholder="Ex: 1.75" 
                            value="<?php echo htmlspecialchars($altura); ?>"
                            required
                        >
                        <small>Use metros (ex: 1.75) ou centímetros (ex: 175)</small>
                    </div>
                </div>

                <button type="submit" class="btn-calcular">
                    🔍 Calcular IMC
                </button>
            </form>
        </div>

        <!-- Exibe mensagem de erro -->
        <?php if (!empty($erro)): ?>
            <div class="mensagem erro">
                <?php echo $erro; ?>
            </div>
        <?php endif; ?>

        <!-- Exibe o resultado -->
        <?php if ($imc !== null): ?>
            <div class="resultado" style="border-left-color: <?php echo $cor_classificacao; ?>;">
                <div class="resultado-header">
                    <span class="icon">📊</span>
                    <h2>Seu Resultado</h2>
                </div>

                <div class="imc-valor">
                    <span class="imc-numero" style="color: <?php echo $cor_classificacao; ?>;">
                        <?php echo number_format($imc, 2, ',', '.'); ?>
                    </span>
                    <span class="imc-label">kg/m²</span>
                </div>

                <div class="classificacao" style="background: <?php echo $cor_classificacao; ?>;">
                    <?php echo $classificacao; ?>
                </div>

                <p class="dica">
                    💡 <?php echo $dica; ?>
                </p>
            </div>
        <?php endif; ?>

        <!-- Tabela de referência -->
        <div class="tabela-referencia">
            <h3>📋 Tabela de Referência (OMS)</h3>
            <table>
                <thead>
                    <tr>
                        <th>IMC</th>
                        <th>Classificação</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><strong>&lt; 18,5</strong></td>
                        <td><span class="dot" style="background: #3498db;"></span> Abaixo do peso</td>
                    </tr>
                    <tr>
                        <td><strong>18,5 - 24,9</strong></td>
                        <td><span class="dot" style="background: #2ecc71;"></span> Peso normal</td>
                    </tr>
                    <tr>
                        <td><strong>25,0 - 29,9</strong></td>
                        <td><span class="dot" style="background: #f39c12;"></span> Sobrepeso</td>
                    </tr>
                    <tr>
                        <td><strong>30,0 - 34,9</strong></td>
                        <td><span class="dot" style="background: #e67e22;"></span> Obesidade Grau I</td>
                    </tr>
                    <tr>
                        <td><strong>35,0 - 39,9</strong></td>
                        <td><span class="dot" style="background: #e74c3c;"></span> Obesidade Grau II</td>
                    </tr>
                    <tr>
                        <td><strong>≥ 40,0</strong></td>
                        <td><span class="dot" style="background: #c0392b;"></span> Obesidade Grau III</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- Aviso -->
        <div class="aviso">
            ⚕️ <strong>Aviso:</strong> Este cálculo é apenas informativo e não substitui uma avaliação médica profissional. 
            Consulte sempre um médico ou nutricionista para uma análise completa da sua saúde.
        </div>

        <footer>
            <p>Calculadora de IMC &copy; <?php echo date('Y'); ?></p>
        </footer>
    </div>
</body>
</html>

2. Arquivo style.css

/* style.css - Calculadora de IMC - Design Moderno e Saudável */

/* Variáveis globais */
:root {
    --primary: #00b894;
    --primary-dark: #00a383;
    --primary-light: #55efc4;
    --gradient: linear-gradient(135deg, #00b894, #00cec9);
    --dark: #2d3436;
    --gray: #636e72;
    --light-gray: #dfe6e9;
    --bg: #f0f2f5;
    --white: #ffffff;
    --shadow: 0 10px 30px rgba(0, 184, 148, 0.15);
    --radius: 16px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    min-height: 100vh;
    padding: 20px;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(0, 184, 148, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(0, 206, 201, 0.08) 0%, transparent 50%);
}

.container {
    max-width: 700px;
    margin: 0 auto;
    background: var(--white);
    border-radius: var(--radius);
    padding: 40px;
    box-shadow: var(--shadow);
}

/* Cabeçalho */
h1 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--dark);
    text-align: center;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

h1 span {
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.subtitle {
    text-align: center;
    color: var(--gray);
    font-size: 0.95rem;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--light-gray);
}

/* Formulário */
.form-card {
    background: var(--bg);
    padding: 25px;
    border-radius: var(--radius);
    margin-bottom: 25px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    display: block;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.form-group input {
    width: 100%;
    padding: 14px 18px;
    border: 2px solid var(--light-gray);
    border-radius: 10px;
    font-size: 1.1rem;
    transition: var(--transition);
    background: var(--white);
    color: var(--dark);
    font-weight: 500;
}

.form-group input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(0, 184, 148, 0.1);
}

.form-group input::placeholder {
    color: var(--gray);
    opacity: 0.6;
    font-weight: 400;
}

.form-group small {
    color: var(--gray);
    font-size: 0.75rem;
    margin-top: 5px;
    font-style: italic;
}

/* Botão calcular */
.btn-calcular {
    width: 100%;
    padding: 16px 24px;
    background: var(--gradient);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    letter-spacing: 0.3px;
}

.btn-calcular:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(0, 184, 148, 0.35);
}

.btn-calcular:active {
    transform: translateY(-1px);
}

/* Mensagens */
.mensagem {
    padding: 15px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-weight: 500;
    animation: slideIn 0.3s ease;
}

.mensagem.erro {
    background: #ffe5e5;
    color: #c0392b;
    border-left: 4px solid #e74c3c;
}

/* Resultado */
.resultado {
    background: var(--white);
    border: 2px solid var(--light-gray);
    border-left: 6px solid var(--primary);
    border-radius: var(--radius);
    padding: 25px;
    margin-bottom: 25px;
    animation: slideIn 0.4s ease;
}

.resultado-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.resultado-header .icon {
    font-size: 1.5rem;
}

.resultado-header h2 {
    color: var(--dark);
    font-size: 1.2rem;
}

.imc-valor {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    margin: 20px 0;
}

.imc-numero {
    font-size: 4rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -2px;
}

.imc-label {
    font-size: 1.2rem;
    color: var(--gray);
    font-weight: 500;
}

.classificacao {
    color: white;
    text-align: center;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 15px 0;
    letter-spacing: 0.3px;
}

.dica {
    background: var(--bg);
    padding: 15px 20px;
    border-radius: 10px;
    color: var(--dark);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-top: 15px;
}

/* Tabela de referência */
.tabela-referencia {
    margin-top: 30px;
}

.tabela-referencia h3 {
    color: var(--dark);
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.tabela-referencia table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.tabela-referencia thead {
    background: var(--dark);
    color: white;
}

.tabela-referencia th {
    padding: 14px 18px;
    text-align: left;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.3px;
}

.tabela-referencia td {
    padding: 12px 18px;
    border-bottom: 1px solid var(--light-gray);
    color: var(--dark);
    font-size: 0.95rem;
}

.tabela-referencia tbody tr:last-child td {
    border-bottom: none;
}

.tabela-referencia tbody tr:hover {
    background: rgba(0, 184, 148, 0.05);
}

/* Bolinha colorida */
.dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
}

/* Aviso */
.aviso {
    background: #fff9e6;
    border-left: 4px solid #f39c12;
    padding: 15px 20px;
    border-radius: 10px;
    margin-top: 25px;
    color: #7d5a00;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Rodapé */
footer {
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--light-gray);
    color: var(--gray);
    font-size: 0.85rem;
}

/* Animações */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsividade */
@media (max-width: 600px) {
    .container {
        padding: 25px 20px;
    }

    h1 {
        font-size: 1.5rem;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .imc-numero {
        font-size: 3rem;
    }

    .imc-label {
        font-size: 1rem;
    }

    .classificacao {
        font-size: 1rem;
        padding: 10px 15px;
    }

    .tabela-referencia th,
    .tabela-referencia td {
        padding: 10px 12px;
        font-size: 0.85rem;
    }

    .btn-calcular {
        font-size: 1rem;
        padding: 14px 20px;
    }
}

@media (max-width: 400px) {
    .container {
        padding: 20px 15px;
    }

    h1 {
        font-size: 1.3rem;
    }

    .imc-numero {
        font-size: 2.5rem;
    }
}