docuneo:criteri_di_diagnosi_2of3 [DocuNeo]

Questa pagina è in sola lettura. Puoi visualizzare il sorgente, ma non puoi modificarlo. Contatta l'amministratore se pensi che ci sia un errore.
<html>
<style>
/* Stili per il calcolatore Criteri 2of3 */
.criteria-2of3-calculator {
    font-family: Arial, sans-serif;
    max-width: 900px;
    margin: 20px auto;
    background: #fff;
    border: 3px solid #8e24aa;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.criteria-title {
    text-align: center;
    color: #8e24aa;
    margin-bottom: 10px;
    font-size: 28px;
    font-weight: bold;
    border-bottom: 4px solid #ab47bc;
    padding-bottom: 15px;
}

.criteria-subtitle {
    text-align: center;
    color: #424242;
    margin-bottom: 25px;
    font-size: 18px;
    font-style: italic;
}

.diagnostic-rule {
    background: #f3e5f5;
    border: 3px solid #8e24aa;
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0;
    text-align: center;
}

.diagnostic-rule h3 {
    margin-top: 0;
    color: #6a1b9a;
    font-size: 20px;
}

.rule-text {
    font-size: 16px;
    font-weight: bold;
    color: #4a148c;
    margin: 10px 0;
}

.exclusion-criteria {
    background: #ffebee;
    border: 2px solid #f44336;
    border-radius: 8px;
    padding: 15px;
    margin: 15px 0;
}

.exclusion-criteria h4 {
    margin-top: 0;
    color: #c62828;
}

.criteria-section {
    background: #f8f9fa;
    border: 2px solid #6c757d;
    border-radius: 10px;
    margin-bottom: 20px;
    overflow: hidden;
}

.criteria-header {
    background: linear-gradient(135deg, #8e24aa, #6a1b9a);
    color: white;
    padding: 15px 20px;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.criteria-content {
    padding: 15px;
}

.criterion-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    margin: 8px 0;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.criterion-item:hover {
    border-color: #ab47bc;
    box-shadow: 0 2px 4px rgba(171, 71, 188, 0.2);
}

.criterion-item.selected {
    background: linear-gradient(135deg, #f3e5f5, #e1bee7);
    border: 2px solid #8e24aa;
    box-shadow: 0 3px 8px rgba(142, 36, 170, 0.3);
    transform: translateX(5px);
}

.criterion-item.selected::before {
    content: "✓";
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    background: #8e24aa;
    color: white;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
}

.criterion-text {
    flex: 1;
    font-size: 15px;
    font-weight: 500;
    color: #2c3e50;
    margin-right: 15px;
}

.criterion-item.selected .criterion-text {
    font-weight: bold;
    color: #4a148c;
}

.criterion-status {
    background: #8e24aa;
    color: white;
    font-weight: bold;
    font-size: 14px;
    padding: 6px 12px;
    border-radius: 20px;
    min-width: 80px;
    text-align: center;
}

.criterion-item.selected .criterion-status {
    background: #4caf50;
    animation: pulse 0.5s ease-in-out;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.results-section {
    margin-top: 30px;
    padding: 25px;
    border: 3px solid #8e24aa;
    border-radius: 15px;
    background: linear-gradient(135deg, #faf8ff, #f3e5f5);
}

.criteria-summary {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
    margin: 20px 0;
}

.summary-item {
    text-align: center;
    padding: 15px;
    border-radius: 8px;
    font-weight: bold;
}

.summary-item.met {
    background: #c8e6c9;
    color: #2e7d32;
    border: 2px solid #4caf50;
}

.summary-item.not-met {
    background: #ffcdd2;
    color: #c62828;
    border: 2px solid #f44336;
}

.summary-item.partial {
    background: #fff3e0;
    color: #e65100;
    border: 2px solid #ff9800;
}

.diagnosis-result {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    margin: 25px 0;
    padding: 20px;
    border-radius: 10px;
    color: white;
}

.diagnosis-positive {
    background: linear-gradient(135deg, #f44336, #d32f2f);
    animation: blink 1.5s ease-in-out infinite alternate;
}

.diagnosis-negative {
    background: linear-gradient(135deg, #4caf50, #388e3c);
}

.diagnosis-insufficient {
    background: linear-gradient(135deg, #ff9800, #f57c00);
}

@keyframes blink {
    0% { opacity: 0.8; }
    100% { opacity: 1; }
}

.criteria-count {
    background: #8e24aa;
    color: white;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
}

.action-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 25px;
}

.action-btn {
    padding: 15px 30px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.reset-btn {
    background: linear-gradient(135deg, #f44336, #d32f2f);
    color: white;
}

.reset-btn:hover {
    background: linear-gradient(135deg, #d32f2f, #b71c1c);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(244, 67, 54, 0.3);
}

.print-btn {
    background: linear-gradient(135deg, #8e24aa, #7b1fa2);
    color: white;
}

.print-btn:hover {
    background: linear-gradient(135deg, #7b1fa2, #6a1b9a);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(142, 36, 170, 0.3);
}

.note-text {
    font-size: 14px;
    color: #666;
    font-style: italic;
    margin-top: 10px;
}
</style>

<div class="criteria-2of3-calculator">
    <h1 class="criteria-title">📋 Calcolatore Criteri "2 of 3"</h1>
    <div class="criteria-subtitle">Diagnosi di Enterocolite Necrotizzante Preterm</div>
    
    <!-- Regola Diagnostica -->
    <div class="diagnostic-rule">
        <h3>🎯 Regola Diagnostica</h3>
        <div class="rule-text">
            La diagnosi di NEC preterm può essere posta se sono presenti <strong>almeno 2 dei 3 criteri</strong> elencati di seguito:
        </div>
        
        <!-- Criteri di Esclusione -->
        <div class="exclusion-criteria">
            <h4>⚠️ Criteri di Esclusione</h4>
            <p><strong>Pazienti esclusi dalla diagnosi NEC:</strong></p>
            <ul style="text-align: left; margin: 10px 0;">
                <li>Neonati con anomalie congenite complesse</li>
                <li>Neonati che sono morti entro 3 giorni dalla diagnosi</li>
                <li>Neonati con diagnosi di perforazione intestinale spontanea consistente con NEC</li>
                <li>Perforazione intestinale spontanea (SIP)</li>
            </ul>
        </div>
    </div>

    <!-- Criterio 1: Pneumatosi e/o Gas Portale -->
    <div class="criteria-section">
        <div class="criteria-header">
            <span>🔬 Criterio 1: Pneumatosi e/o Gas Portale per Ultrasuoni/Rx Addome</span>
            <span class="criteria-count" id="criterion1-status">Non Soddisfatto</span>
        </div>
        <div class="criteria-content">
            <div class="criterion-item" onclick="toggleCriterion(1, this)">
                <span class="criterion-text">Pneumatosi intestinale e/o gas portale alla presentazione</span>
                <span class="criterion-status">PRESENTE</span>
            </div>
            <div class="note-text">
                📝 <strong>Nota:</strong> Deve essere documentata con ecografia o radiografia addominale
            </div>
        </div>
    </div>

    <!-- Criterio 2: Consumo Piastrine -->
    <div class="criteria-section">
        <div class="criteria-header">
            <span>🩸 Criterio 2: Consumo Persistente di Piastrine</span>
            <span class="criteria-count" id="criterion2-status">Non Soddisfatto</span>
        </div>
        <div class="criteria-content">
            <div class="criterion-item" onclick="toggleCriterion(2, this)">
                <span class="criterion-text">Consumo persistente di piastrine (&lt; 150,000) > 3 giorni dopo la diagnosi</span>
                <span class="criterion-status">PRESENTE</span>
            </div>
            <div class="note-text">
                📝 <strong>Nota:</strong> La conta piastrinica deve rimanere sotto 150,000 per più di 3 giorni consecutivi
            </div>
        </div>
    </div>

    <!-- Criterio 3: Distensione/Sangue -->
    <div class="criteria-section">
        <div class="criteria-header">
            <span>🤱 Criterio 3: Distensione Addominale e/o Sangue nelle Feci</span>
            <span class="criteria-count" id="criterion3-status">Non Soddisfatto</span>
        </div>
        <div class="criteria-content">
            <div class="criterion-item" onclick="toggleCriterion(3, this, 'distension')">
                <span class="criterion-text">Distensione addominale</span>
                <span class="criterion-status">PRESENTE</span>
            </div>
            <div class="criterion-item" onclick="toggleCriterion(3, this, 'blood')">
                <span class="criterion-text">Sangue nelle feci</span>
                <span class="criterion-status">PRESENTE</span>
            </div>
            <div class="note-text">
                📝 <strong>Nota:</strong> È sufficiente che sia presente UNA delle due condizioni per soddisfare questo criterio
            </div>
        </div>
    </div>

    <!-- Sezione Risultati -->
    <div class="results-section">
        <h3 style="text-align: center; margin-top: 0; color: #8e24aa;">📊 Risultati Diagnostici</h3>
        
        <!-- Riassunto Criteri -->
        <div class="criteria-summary">
            <div class="summary-item not-met" id="summary-1">
                <div>Criterio 1</div>
                <div>Pneumatosi/Gas</div>
                <div>❌ Non Soddisfatto</div>
            </div>
            <div class="summary-item not-met" id="summary-2">
                <div>Criterio 2</div>
                <div>Piastrine</div>
                <div>❌ Non Soddisfatto</div>
            </div>
            <div class="summary-item not-met" id="summary-3">
                <div>Criterio 3</div>
                <div>Distensione/Sangue</div>
                <div>❌ Non Soddisfatto</div>
            </div>
        </div>
        
        <!-- Risultato Diagnostico -->
        <div id="diagnosis-result" class="diagnosis-result diagnosis-negative">
            🔍 DIAGNOSI: Criteri insufficienti per NEC preterm (0/3 criteri soddisfatti)
        </div>
        
        <div class="action-buttons">
            <button class="action-btn reset-btn" onclick="resetCalculator()">🔄 Reset</button>
            <button class="action-btn print-btn" onclick="printResults()">🖨️ Stampa</button>
        </div>
    </div>
</div>

<script>
var criteriaStatus = {
    1: false,
    2: false,
    3: false
};

var criterion3Subcriteria = {
    distension: false,
    blood: false
};

function toggleCriterion(criterionNumber, element, subtype) {
    if (criterionNumber === 3 && subtype) {
        // Gestione speciale per criterio 3 con sottocriteri
        criterion3Subcriteria[subtype] = !criterion3Subcriteria[subtype];
        
        if (criterion3Subcriteria[subtype]) {
            element.classList.add('selected');
        } else {
            element.classList.remove('selected');
        }
        
        // Il criterio 3 è soddisfatto se almeno uno dei sottocriteri è presente
        criteriaStatus[3] = criterion3Subcriteria.distension || criterion3Subcriteria.blood;
        
    } else {
        // Gestione normale per criteri 1 e 2
        criteriaStatus[criterionNumber] = !criteriaStatus[criterionNumber];
        
        if (criteriaStatus[criterionNumber]) {
            element.classList.add('selected');
        } else {
            element.classList.remove('selected');
        }
    }
    
    updateCriterionStatus(criterionNumber);
    updateDiagnosis();
}

function updateCriterionStatus(criterionNumber) {
    var statusElement = document.getElementById('criterion' + criterionNumber + '-status');
    var summaryElement = document.getElementById('summary-' + criterionNumber);
    
    if (criteriaStatus[criterionNumber]) {
        statusElement.textContent = 'Soddisfatto';
        statusElement.style.backgroundColor = '#4caf50';
        
        summaryElement.className = 'summary-item met';
        summaryElement.innerHTML = 
            '<div>Criterio ' + criterionNumber + '</div>' +
            '<div>' + getCriterionLabel(criterionNumber) + '</div>' +
            '<div>✅ Soddisfatto</div>';
    } else {
        statusElement.textContent = 'Non Soddisfatto';
        statusElement.style.backgroundColor = '#8e24aa';
        
        summaryElement.className = 'summary-item not-met';
        summaryElement.innerHTML = 
            '<div>Criterio ' + criterionNumber + '</div>' +
            '<div>' + getCriterionLabel(criterionNumber) + '</div>' +
            '<div>❌ Non Soddisfatto</div>';
    }
}

function getCriterionLabel(criterionNumber) {
    switch(criterionNumber) {
        case 1: return 'Pneumatosi/Gas';
        case 2: return 'Piastrine';
        case 3: return 'Distensione/Sangue';
        default: return '';
    }
}

function updateDiagnosis() {
    var satisfiedCriteria = 0;
    
    for (var criterion in criteriaStatus) {
        if (criteriaStatus[criterion]) {
            satisfiedCriteria++;
        }
    }
    
    var diagnosisElement = document.getElementById('diagnosis-result');
    var diagnosisText, diagnosisClass;
    
    if (satisfiedCriteria >= 2) {
        diagnosisText = '🔴 DIAGNOSI POSITIVA: NEC preterm confermata (' + satisfiedCriteria + '/3 criteri soddisfatti)';
        diagnosisClass = 'diagnosis-result diagnosis-positive';
    } else if (satisfiedCriteria === 1) {
        diagnosisText = '🟡 DIAGNOSI INCERTA: Criteri insufficienti per NEC preterm (' + satisfiedCriteria + '/3 criteri soddisfatti) - Monitoraggio continuo';
        diagnosisClass = 'diagnosis-result diagnosis-insufficient';
    } else {
        diagnosisText = '🟢 DIAGNOSI NEGATIVA: Criteri insufficienti per NEC preterm (' + satisfiedCriteria + '/3 criteri soddisfatti)';
        diagnosisClass = 'diagnosis-result diagnosis-negative';
    }
    
    diagnosisElement.textContent = diagnosisText;
    diagnosisElement.className = diagnosisClass;
}

function resetCalculator() {
    // Reset tutti i criteri
    for (var criterion in criteriaStatus) {
        criteriaStatus[criterion] = false;
        updateCriterionStatus(parseInt(criterion));
    }
    
    // Reset sottocriteri del criterio 3
    criterion3Subcriteria = {
        distension: false,
        blood: false
    };
    
    // Rimuovi tutte le selezioni visive
    var allItems = document.querySelectorAll('.criterion-item');
    for (var i = 0; i < allItems.length; i++) {
        allItems[i].classList.remove('selected');
    }
    
    // Aggiorna diagnosi
    updateDiagnosis();
}

function printResults() {
    window.print();
}

// Inizializzazione
updateDiagnosis();
</script>
</html>