BossBey File Manager

Editing: bacma.html

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bateria de Avaliação da Coordenação Motora</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
    <style>
        /* Estilo do corpo */
        body {
	    font-family: 'Montserrat', sans-serif;
            margin: 20px;
            background-color: #f6f6f6;
            color: #333;
            transition: background-color 0.3s, color 0.3s;
        }

/* Estilo dos títulos */
        h1, h2 {
            text-align: center;
            color: #0277bd;
        }

/* Estilo do logotipo */
        .logo {
            display: block;
            margin: 0 auto 20px auto;
            max-width: 150px;
            height: auto;
        }

/* Estilo do formulário */
        form {
            background: #ffffff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            max-width: 500px;
            margin: 20px auto;
        }

form input, form button {
            width: calc(100% - 20px);
            padding: 10px;
            margin: 10px 0;
            border-radius: 5px;
            border: 1px solid #ddd;
        }

form button {
            background-color: #0277bd;
            color: white;
            border: none;
            cursor: pointer;
        }

form button:hover {
            background-color: #01579b;
        }

/* Estilo da tabela */
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }

table th, table td {
            padding: 10px;
            text-align: left;
            border: 1px solid #ddd;
        }

table th {
            background-color: #b3e5fc;
        }

/* Estilo dos botões na tabela */
        .action-button {
            padding: 5px 10px;
            border: none;
            border-radius: 5px;
            color: white;
            cursor: pointer;
        }

.copy-button {
            background-color: #0288d1;
        }

.delete-button {
            background-color: #d32f2f;
        }

.copy-button:hover {
            background-color: #0277bd;
        }

.delete-button:hover {
            background-color: #c62828;
        }

/* Cores para a classificação */
        .insuficiente {
            background-color: #ef5350; /* Vermelho */
            color: white;
        }

.regular {
            background-color: #ffb74d; /* Laranja */
            color: white;
        }

.bom {
            background-color: #fff176; /* Amarelo */
            color: black;
        }

.muito-bom {
            background-color: #81c784; /* Verde */
            color: white;
        }

footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px;
    position: static;
    bottom: 0;
    width: 100%;
}

footer p {
    margin: 0;
}

/* Estilos para o Modo Escuro */
        body.dark-mode {
            background-color: #121212;
            color: #e0e0e0;
        }

body.dark-mode h1, body.dark-mode h2 {
            color: #75a7d1;
        }

body.dark-mode form {
            background: #1e1e1e;
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
        }

body.dark-mode form input, body.dark-mode form button {
            background-color: #333;
            color: #e0e0e0;
            border: 1px solid #555;
        }

body.dark-mode form input::placeholder {
            color: #888;
        }

body.dark-mode form button {
            background-color: #0277bd;
        }

body.dark-mode form button:hover {
            background-color: #01579b;
        }

body.dark-mode table {
            border-color: #444;
        }

body.dark-mode table th {
            background-color: #01579b;
            border-color: #444;
        }

body.dark-mode table td {
            border-color: #444;
        }

body.dark-mode footer {
            background-color: #1e1e1e;
        }

#darkModeToggle {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1000;
        }

</style>
    <script src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script>
</head>
<body>

<h1>Bateria de Avaliação<br> da Coordenação Motora para Crianças com TEA</h1>

<button id="darkModeToggle" class="action-button copy-button">Alternar Modo Escuro/Claro</button>

<h2>Entrada de Dados</h2>
    <form id="dataForm">
        <input type="text" id="childName" name="childName" placeholder="Nome da Criança" required>
        <input type="number" id="childAge" name="childAge" placeholder="Idade" required>
        <input type="number" step="0.01" id="balance" name="balance" placeholder="Equilíbrio (Passos dados)" required>
        <input type="number" step="0.01" id="locomotion" name="locomotion" placeholder="Locomoção (em segundos)" required>
        <input type="number" step="0.01" id="manipulation" name="manipulation" placeholder="Manipulação (Acertos no alvo)" required>
        <input type="number" step="0.01" id="jump" name="jump" placeholder="Salto (em metros)" required>
        <input type="date" id="assessmentDate" name="assessmentDate" placeholder="Data da Avaliação" required>
        <button type="submit">Registrar Dados</button>
    </form>

<h2>Registros</h2>
    <table id="recordsTable">
        <thead>
            <tr>
                <th>Data da Avaliação</th>
                <th>Nome da Criança</th>
                <th>Idade</th>
                <th>Equilíbrio</th>
                <th>Status Equilíbrio</th>
                <th>Locomoção</th>
                <th>Status Locomoção</th>
                <th>Manipulação</th>
                <th>Status Manipulação</th>
                <th>Salto</th>
                <th>Status Salto</th>
                <th>IGCM</th>
                <th>Status IGCM</th>
                <th>Ações</th>
            </tr>
        </thead>
        <tbody>
            
        </tbody>
    </table>

<button id="exportButton">Exportar para Excel</button>

<h2>Classificações</h2>
    
<table>
    <thead>
        <tr>
            <th>Categoria</th>
            <th>Classificação</th>
            <th>Intervalo</th>
        </tr>
    </thead>
    <tbody>
        <tr class="muito-bom">
            <td>Equilíbrio</td>
            <td>Muito Bom</td>
            <td>> 6 passos</td>
        </tr>
        <tr class="bom">
            <td>Equilíbrio</td>
            <td>Bom</td>
            <td>4,46 a 6 passos</td>
        </tr>
        <tr class="regular">
            <td>Equilíbrio</td>
            <td>Regular</td>
            <td>3 a 4,45 passos</td>
        </tr>
        <tr class="insuficiente">
            <td>Equilíbrio</td>
            <td>Insuficiente</td>
            <td>< 3 passos</td>
        </tr>
        <tr class="muito-bom">
            <td>Locomoção</td>
            <td>Muito Bom</td>
            <td>< 5,82 segundos</td>
        </tr>
        <tr class="bom">
            <td>Locomoção</td>
            <td>Bom</td>
            <td>5,83 a 6,70 segundos</td>
        </tr>
        <tr class="regular">
            <td>Locomoção</td>
            <td>Regular</td>
            <td>6,71 a 7,37 segundos</td>
        </tr>
        <tr class="insuficiente">
            <td>Locomoção</td>
            <td>Insuficiente</td>
            <td>> 7,37 segundos</td>
        </tr>
        <tr class="muito-bom">
            <td>Manipulação</td>
            <td>Muito Bom</td>
            <td>> 3 acertos</td>
        </tr>
        <tr class="bom">
            <td>Manipulação</td>
            <td>Bom</td>
            <td>1,53 a 3 acertos</td>
        </tr>
        <tr class="regular">
            <td>Manipulação</td>
            <td>Regular</td>
            <td>0,1 a 1,52 acertos</td>
        </tr>
        <tr class="insuficiente">
            <td>Manipulação</td>
            <td>Insuficiente</td>
            <td>< 0 acertos</td>
        </tr>
        <tr class="muito-bom">
            <td>Salto</td>
            <td>Muito Bom</td>
            <td>> 1,06 m</td>
        </tr>
        <tr class="bom">
            <td>Salto</td>
            <td>Bom</td>
            <td>0,75 a 1,05 m</td>
        </tr>
        <tr class="regular">
            <td>Salto</td>
            <td>Regular</td>
            <td>0,39 a 0,74 m</td>
        </tr>
        <tr class="insuficiente">
            <td>Salto</td>
            <td>Insuficiente</td>
            <td>< 0,38 m</td>
        </tr>
        <tr class="muito-bom">
            <td>IGCM</td>
            <td>Muito Bom</td>
            <td>> 6,73</td>
        </tr>
        <tr class="bom">
            <td>IGCM</td>
            <td>Bom</td>
            <td>>4,66 a 6,73</td>
        </tr>
        <tr class="regular">
            <td>IGCM</td>
            <td>Regular</td>
            <td>≥ 2,20 a 4,66</td>
        </tr>
        <tr class="insuficiente">
            <td>IGCM</td>
            <td>Insuficiente</td>
            <td>< 2,20</td>
        </tr>
    </tbody>
</table>

const name = document.getElementById('childName').value;
            const age = document.getElementById('childAge').value;
            const balance = parseFloat(document.getElementById('balance').value);
            const locomotion = parseFloat(document.getElementById('locomotion').value);
            const manipulation = parseFloat(document.getElementById('manipulation').value);
            const jump = parseFloat(document.getElementById('jump').value);
            const assessmentDate = document.getElementById('assessmentDate').value;

const igcmRaw = (balance * 1.5 - locomotion + manipulation * 4.4 + jump * 16.8) / 4;
	    const igcm = igcmRaw.toFixed(2);
            
            let balanceStatus = "Insuficiente", locomotionStatus = "Insuficiente", manipulationStatus = "Insuficiente", jumpStatus = "Insuficiente", igcmStatus = "Insuficiente";
            let balanceClass = "insuficiente", locomotionClass = "insuficiente", manipulationClass = "insuficiente", jumpClass = "insuficiente", igcmClass = "insuficiente";

// Classificação do Equilíbrio
            if (balance > 6) {
                balanceStatus = "Muito Bom";
                balanceClass = "muito-bom";
            } else if (balance >= 4.46) {
                balanceStatus = "Bom";
                balanceClass = "bom";
            } else if (balance >= 3) {
                balanceStatus = "Regular";
                balanceClass = "regular";
            }

// Classificação da Locomoção
            if (locomotion < 5.82) {
                locomotionStatus = "Muito Bom";
                locomotionClass = "muito-bom";
            } else if (locomotion <= 6.70) {
                locomotionStatus = "Bom";
                locomotionClass = "bom";
            } else if (locomotion <= 7.37) {
                locomotionStatus = "Regular";
                locomotionClass = "regular";
            }

// Classificação da Manipulação
            if (manipulation > 3) {
                manipulationStatus = "Muito Bom";
                manipulationClass = "muito-bom";
            } else if (manipulation >= 1.53) {
                manipulationStatus = "Bom";
                manipulationClass = "bom";
            } else if (manipulation >= 0.1) {
                manipulationStatus = "Regular";
                manipulationClass = "regular";
            }

// Classificação do Salto
            if (jump > 1.06) {
                jumpStatus = "Muito Bom";
                jumpClass = "muito-bom";
            } else if (jump >= 0.75) {
                jumpStatus = "Bom";
                jumpClass = "bom";
            } else if (jump >= 0.39) {
                jumpStatus = "Regular";
                jumpClass = "regular";
            }

// Classificação do IGCM
            if (parseFloat(igcm) > 6.73) {
                igcmStatus = "Muito Bom";
                igcmClass = "muito-bom";
            } else if (parseFloat(igcm) >= 4.66) {
                igcmStatus = "Bom";
                igcmClass = "bom";
            } else if (parseFloat(igcm) >= 2.20) {
                igcmStatus = "Regular";
                igcmClass = "regular";
            }

tbody.appendChild(row);

// Evento para o botão de copiar
            row.querySelector('.copy-button').addEventListener('click', function() {
                let rowData = Array.from(row.children).slice(0, -1).map(cell => cell.textContent).join('\t');

navigator.clipboard.writeText(rowData).then(function() {
                    alert('Dados copiados para a área de transferência');
                }).catch(function(error) {
                    alert('Falha ao copiar: ' + error);
                });
            });

// Evento para o botão de apagar
            row.querySelector('.delete-button').addEventListener('click', function() {
                tbody.removeChild(row);
            });

document.getElementById('dataForm').reset();
        });

document.getElementById('exportButton').addEventListener('click', function() {
            const table = document.getElementById('recordsTable');
            
            // Clona a tabela para remover a coluna de ações antes de exportar
            const clonedTable = table.cloneNode(true);
            const rows = clonedTable.querySelectorAll('tr');
            rows.forEach(row => {
                if (row.cells.length > 0) row.deleteCell(-1);
            });

const wb = XLSX.utils.table_to_book(clonedTable, {sheet: "Registros"});
            XLSX.writeFile(wb, "registros.xlsx");
        });

document.getElementById('darkModeToggle').addEventListener('click', function() {
            document.body.classList.toggle('dark-mode');
        });
    </script>

<footer>
       <p>Idealizado e Criado por Rodrigo Simão no VS Code a partir dos estudos de Carlos Eduardo Lima Monteiro.</p>
</footer>

</body>
</html>

Cancel