PAGINAAA.knit

<!DOCTYPE html> Predicción Interactiva - Derrames en Oleoductos
<div class="header">
    <h1>Análisis Estadístico: Predicción de Derrames</h1>
    <p>Estimación de pérdida de barriles mediante parámetros operativos</p>
</div>

<form id="predictionForm" onsubmit="realizarPrediccion(event)">
    <div class="form-grid">
        <div class="form-group">
            <label for="tipo_liquido">Tipo de Líquido</label>
            <select id="tipo_liquido" required>
                <option value="" disabled selected>Seleccione...</option>
                <option value="CRUDE OIL">Crude Oil</option>
                <option value="REFINED">Refined and/or Petroleum Product</option>
                <option value="CO2">CO2 (Carbon Dioxide)</option>
                <option value="HVL">HVL or Other Flammable/Toxic</option>
            </select>
        </div>

        <div class="form-group">
            <label for="tipo_tuberia">Tipo de Instalación</label>
            <select id="tipo_tuberia" required>
                <option value="" disabled selected>Seleccione...</option>
                <option value="UNDERGROUND">Underground</option>
                <option value="ABOVEGROUND">Aboveground</option>
                <option value="TANK">Tank</option>
                <option value="TRANSITION">Transition Area</option>
            </select>
        </div>

        <div class="form-group">
            <label for="ubicacion">Ubicación</label>
            <select id="ubicacion" required>
                <option value="" disabled selected>Seleccione...</option>
                <option value="ONSHORE">Onshore</option>
                <option value="OFFSHORE">Offshore</option>
            </select>
        </div>

        <div class="form-group">
            <label for="estado">Estado del Accidente (EE.UU.)</label>
            <select id="estado" required>
                <option value="" disabled selected>Seleccione un estado...</option>
                <option value="TX">Texas (TX)</option>
                <option value="OK">Oklahoma (OK)</option>
                <option value="LA">Louisiana (LA)</option>
                <option value="CA">California (CA)</option>
                <option value="ND">North Dakota (ND)</option>
                <option value="AK">Alaska (AK)</option>
                <option value="OTHER">Otro Estado...</option>
            </select>
        </div>

        <div class="form-group">
            <label for="anio">Año del Accidente</label>
            <input type="number" id="anio" min="2000" max="2050" placeholder="Ej. 2026" required>
        </div>

        <div class="form-group">
            <label>¿Hubo ignición?</label>
            <div class="radio-group">
                <label class="radio-label"><input type="radio" name="ignicion" value="1" required> Sí</label>
                <label class="radio-label"><input type="radio" name="ignicion" value="0"> No</label>
            </div>
        </div>

        <div class="form-group">
            <label>¿Hubo explosión?</label>
            <div class="radio-group">
                <label class="radio-label"><input type="radio" name="explosion" value="1" required> Sí</label>
                <label class="radio-label"><input type="radio" name="explosion" value="0"> No</label>
            </div>
        </div>

        <div class="form-group">
            <label>¿Se cerró la tubería?</label>
            <div class="radio-group">
                <label class="radio-label"><input type="radio" name="cierre" value="1" required> Sí</label>
                <label class="radio-label"><input type="radio" name="cierre" value="0"> No</label>
            </div>
        </div>
    </div>

    <div class="btn-container">
        <button type="submit">Calcular Estimación</button>
    </div>
</form>

<div id="results" class="results-section">
    <h2 style="margin-top:0; color: var(--secondary-color);">Reporte de Predicción</h2>
    <div class="result-box">
        <div class="metric">
            <h3>Pérdida Estimada</h3>
            <div class="value"><span id="lbl_barriles">0.00</span> bbls</div>
        </div>
        <div class="metric">
            <h3>Nivel de Riesgo / Derrame</h3>
            <div id="lbl_nivel" class="badge" style="background-color: gray;">SIN CALCULAR</div>
        </div>
    </div>
</div>