<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tabla Moderna - Efecto Selección con Pulso</title>
    <style>
        /* Estilos generales */
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            background-color: #2E3138;
            color: white;
            display: flex;
            justify-content: flex-start;
            flex-direction: column;
            height: 100vh;
	    overflow: hidden;
        }

        header {
            margin: 30px;
        }
	.logo {
    max-height: 50px;
    display: block;  /* Asegura que los elementos estén alineados en bloque */
    position: relative;
    line-height: 30px;  /* Alinea con los botones */
  z-index: 1; /* Un nivel inferior al modal */
}
       .logo a {
    color: #fff;
    text-decoration: none;
    font-size: 30px;
    display: inline-block;  /* Asegura que el texto no sea afectado por el centrado de los botones */
}

        .logo a span {
    color: #89b51b;
}

        .table-area {
            display: flex;
            height: 95%;
        }

        .table-container {
            width: 100%;
            background-color: #2E3138;
            border-collapse: collapse;
            border-spacing: 0 5px;
            height: 95%;
            overflow-y: auto;
            border: 2px solid #444953;
            margin-left: 0px;
            margin-right: 0px;
            box-sizing: border-box;
/* position: relative; */

        }

        table {
            width: 100%;
            background-color: #444953;
            border-collapse: collapse;
            border-spacing: 0 5px;
            table-layout: fixed;
        }

        thead,
        tr {
            border-bottom: 2px solid #2E3138;
            background-color: #444953;
        }

        th,
        td {
            padding: 15px;
            text-align: left;
            word-wrap: break-word;
            border-bottom: 1px solid #525863;
        }

        th {
            font-family: Roboto, sans-serif;
            font-weight: bold;
            color: #d4d4d4;
            background-color: #2d2f33;
            position: sticky;
            top: 0;
            z-index: 2;
            transition: all 0.3s ease;
            pointer-events: none;
        }

        tr:hover {
            background-color: #525863;
            transition: box-shadow 0.5s;
            cursor: pointer;
        }
	/* Estilo para la fila seleccionada */
tr.selected {
    //position: relative; /* Necesario para aplicar sombra */
     background-color: #6b7b86;
     background-color: #000000;
   // background-color: #f0f0f0; /* Fondo claro en la fila seleccionada */
   // box-shadow: 0 0 0 12px #FFFF80; /* Sombra simulando un borde alrededor de la fila */
}

        .context-menu {
            display: none;
            position: absolute;
            background-color: #2a2a2a;
            color: white;
            border: 1px solid #444;
            padding: 10px;
            box-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
        }

        .context-menu-item {
            padding: 8px 10px;
            cursor: pointer;
        }

        .context-menu-item:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }

        .accordion {
            margin-left: 30px;
            width: 250px;
            background-color: #2E3138;
            border: 1px solid #525863;
            border-radius: 5px;
            padding: 10px;
            margin-bottom: 35px;
        }

      .button-glow2 {
    width: 220px;
    height: 30px;  /* Altura específica para los botones */
    background-color: #89B51B;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s, box-shadow 0.3s;
    padding: 0 10px;  /* Espacio interno horizontal */
    line-height: 30px;  /* Centra el texto dentro del botón */
    margin: 0 10px;  /* Espacio entre los botones */
    vertical-align: middle;  /* Alineación vertical con el texto */
}

.button-glow2:disabled {
  background-color: #ccc; /* Cambia el color de fondo */
  color: #999;           /* Cambia el color del texto */
  cursor: not-allowed;   /* Cambia el cursor para indicar que no se puede hacer clic */
  opacity: 0.6;          /* Reduce la opacidad */
}


        .button-glow2:hover {
            background-color: #0056b3;
            box-shadow: 0 0 5px white, 0 0 5px white;
        }

        .button-glow2:active {
            background-color: #004085;
        }

        select,
        input[type="range"] {
            width: 100%;
            background-color: #444;
            color: white;
            border: 1px solid #555;
            border-radius: 5px;
            padding: 8px;
            margin-bottom: 20px;
        }

        label {
            color: white;
            font-size: 14px;
            margin-bottom: 8px;
            display: block;
        }

        /* Estilos para la barra de menú */
        nav {
            background-color: #25282D;
            width: 100%;
            padding: 10px;
            display: block;
        }

        nav ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
            text-align: center;
        }

        nav ul li {
            display: inline-block;
            padding: 10px 20px;
            background-color: #2E3138;
            margin-right: 5px;
            cursor: pointer;
        }

        nav ul li:hover {
            background-color: #353A40;
        }

        /* Estilos para la ventana modal */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
  z-index: 15; /* Un nivel inferior al modal */
        }


        .modal-content {
            background-color: #25282D;
            padding: 20px;
            border: 2px solid #00BFFF;
            width: 300px;
            color: white;
            position: relative;
        }

        /* Botón de cierre */
        .close-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            cursor: pointer;
            color: #00BFFF;
            font-weight: bold;
        }

        .modal-content label {
            display: block;
            margin-top: 10px;
        }

        .modal-content input,
        .modal-content select {
            width: 100%;
            padding: 8px;
            margin-bottom: 15px;
            background-color: #444;
            color: white;
            border: 1px solid #555;
        }

        .modal-content .section {
            margin-top: 20px;
        }
	.button-container {
    text-align: center;  /* Centra los botones horizontalmente */
    margin-top: 10px;  /* Espacio entre el texto y los botones */
}

#myTable thead {
  position: sticky;
  top: 0; /* Fija el encabezado en la parte superior del contenedor */
  background-color: #f1f1f1; /* Color de fondo para el encabezado */
  z-index: 1; /* Asegura que el encabezado esté por encima del cuerpo */
}

        /* Contenedor del encabezado */
        .header-container {
          /*  width:100%;
            background-color: #2d2f33;
            border-bottom: 1px solid #525863;
	    border-top: 1px solid #525863;
	    border-left: 1px solid #525863;
	    border-right: 1px solid #525863; */
border-right: 1px solid #525863; 
border-top: 1px solid #525863;
            display: block; /* Usamos display block para compatibilidad con navegadores antiguos */
        }

        .header-item {
            text-align: left;
            padding: 10px;
            font-weight: bold;
            color: #d4d4d4;4
	    border-top: 1px solid #525863;
	    border-left: 1px solid #525863;
            border-right: 1px solid #525863;
	    border-bottom: 1px solid #525863;
            float: left; /* Alinea las columnas horizontalmente */
            width: 20%; /* Ancho fijo para cada columna */
            box-sizing: border-box; /* Incluye el borde en el cálculo del ancho */
        }

        .header-item:last-child {
            border-right: none;
        }
    </style>
    <script>
        function openRegisterModal() {
            document.getElementById('registerModal').style.display = 'flex';
        }

        function openSettingsModal() {
	    external.raiseEvent('readsettings','')
            document.getElementById('settingsModal').style.display = 'flex';

        }

function openOptionsModal() {
	    external.raiseEvent('readoptions','')
            document.getElementById('optionsModal').style.display = 'flex';

        }

        function closeModal(modalId) {
		 if (modalId === 'settingsModal') {
        external.raiseEvent('settings', '');
    }
if (modalId === 'optionsModal') {
        external.raiseEvent('options', '');
    }
            document.getElementById(modalId).style.display = 'none';
        }

        // Función para actualizar el valor seleccionado de Gain en tiempo real
        function updateGainValue(value) {
//alert(1);
            document.getElementById('gain-value').textContent = value + " dB";
        }
    </script>
    <script>
        // Función para mostrar el menú contextual
        function showContextMenu(event, row) {
            event.preventDefault();
            const contextMenu = document.getElementById('contextMenu');
            contextMenu.style.display = 'block';
            contextMenu.style.left = event.pageX + 'px';
            contextMenu.style.top = event.pageY + 'px';

            // Guardar la fila seleccionada en una variable global para referencia
            window.selectedRow = row;
        }

        // Función para ocultar el menú contextual
        document.addEventListener('click', function() {
            document.getElementById('contextMenu').style.display = 'none';
        });
// Funciones para las acciones del menú contextual
        function cropRows() {
            var table = document.querySelector("tbody");
            var rows = table.getElementsByTagName("tr");

            // Recorrer las filas en orden inverso y eliminar las no seleccionadas
            for (var i = rows.length - 1; i >= 0; i--) {
                if (!rows[i].classList.contains("selected")) {
                    table.removeChild(rows[i]);
                }
            }

            // Ocultar el menú contextual
            document.getElementById('contextMenu').style.display = 'none';
        }

function deleteRows() {
  var table = document.getElementById("myTable");
  var rows = table.getElementsByTagName("tr");
  for (var i = rows.length - 1; i >= 0; i--) { // Iterar de atrás hacia adelante
    if (rows[i].className.indexOf("selected") !== -1) {
      table.deleteRow(i); // Elimina la fila directamente del DOM
    }
  }
}


        // Función para eliminar la fila seleccionada
        function deleteRows1() {
            if (window.selectedRow) {
                // Eliminar la fila seleccionada
                window.selectedRow.parentNode.removeChild(window.selectedRow);
                window.selectedRow = null; // Limpiar la variable global
            }
            // Ocultar el menú contextual
            document.getElementById('contextMenu').style.display = 'none';
        }

	function clearRows() {
  var table = document.getElementById("myTable");
  while (table.rows.length > 1) { // Mantén la primera fila (header)
    table.deleteRow(1); // Siempre elimina la segunda fila (índice 1)
  }
}

function updateCell(row, cell, text) {
//alert(row + " " + cell + " " + text); // Concatenar valores con espacios
  var myTable = document.getElementById("myTable");
  if (myTable && myTable.rows[row] && myTable.rows[row].cells[cell]) {
    myTable.rows[row].cells[cell].innerHTML = text;
  } else {
    console.error("Fila o celda fuera de rango.");
  }
}

function scrollToCell(row, cell) {
  var myTable = document.getElementById("myTable");
  if (myTable && myTable.rows[row] && myTable.rows[row].cells[cell]) {
    var targetCell = myTable.rows[row].cells[cell];
    targetCell.scrollIntoView({ behavior: "smooth", block: "nearest" });
  } else {
    console.error("Fila o celda fuera de rango.");
  }
}

function scrollToFirstRow() {
  var myTable = document.getElementById("myTable");
  if (myTable && myTable.rows.length > 0) {
    var firstRow = myTable.rows[0];
    var tableContainer = myTable.parentNode;

    // Calcular la posición de la fila relativa al contenedor de la tabla
    tableContainer.scrollTop = firstRow.offsetTop;
  } else {
    console.error("La tabla no tiene filas.");
  }
}

function scrollToRow(rowIndex) {
  var myTable = document.getElementById("myTable");
  if (myTable && myTable.rows[rowIndex]) {
    var targetRow = myTable.rows[rowIndex];

    // Calcular la posición de la fila respecto al documento
    var rowRect = targetRow.getBoundingClientRect();
    var tableRect = myTable.getBoundingClientRect();

    // Verificar si la tabla tiene un contenedor desplazable
    var scrollContainer = myTable.parentElement;
    while (scrollContainer && scrollContainer !== document.body) {
      var overflowY = window.getComputedStyle(scrollContainer).overflowY;
      if (overflowY === "auto" || overflowY === "scroll") {
        break;
      }
      scrollContainer = scrollContainer.parentElement;
    }

    // Desplazamiento dentro de un contenedor desplazable
    if (scrollContainer && scrollContainer !== document.body) {
      var containerRect = scrollContainer.getBoundingClientRect();
      var offset = rowRect.bottom - containerRect.bottom;

      // Asegurarse de que no sea negativo
      if (offset > 0) {
        scrollContainer.scrollTop += offset;
      }
    } else {
      // Desplazamiento de la ventana
      var scrollOffset = rowRect.bottom - window.innerHeight;
      if (scrollOffset > 0) {
        window.scrollBy(0, scrollOffset);
      }
    }
  } else {
    console.error("Fila fuera de rango.");
  }
}



function addRow(encodedPath, targetCellIndex, totalCells) {
  var myTable = document.getElementById("myTable");
  if (myTable) {
    var newRow = myTable.insertRow(-1); // Inserta una nueva fila al final

    // Agrega los atributos onclick y oncontextmenu
    newRow.setAttribute("onclick", "this.classList.toggle('selected')");
    newRow.setAttribute("oncontextmenu", "showContextMenu(event, this); return false;");

    // Crea todas las celdas en la fila
    for (var i = 0; i < totalCells; i++) {
      var newCell = newRow.insertCell(i); // Crea cada celda
      if (i === targetCellIndex) {
        newCell.textContent = decodeURIComponent(encodedPath); // Asigna el texto a la celda objetivo
      } else {
        newCell.textContent = ""; // Deja las otras celdas vacías
      }
    }
  } else {
    console.error("No se encontró la tabla con el ID 'myTable'.");
  }
}

function addRow2(encodedPath) {
  var myTable = document.getElementById("myTable");
  if (myTable) {
    var newRow = myTable.insertRow(-1); // Inserta una nueva fila al final

    // Agrega los atributos onclick y oncontextmenu
    newRow.setAttribute("onclick", "this.classList.toggle('selected')");
    newRow.setAttribute("oncontextmenu", "showContextMenu(event, this); return false;");

    var newCell = newRow.insertCell(0); // Crea una celda en la nueva fila
    newCell.textContent = decodeURIComponent(encodedPath); // Asigna el texto decodificado
  } else {
    console.error("No se encontró la tabla con el ID 'myTable'.");
  }
}

function addRow1(encodedPath) {
  var myTable = document.getElementById("myTable");
  if (myTable) {
    var newRow = myTable.insertRow(-1); // Inserta una nueva fila al final
    var newCell = newRow.insertCell(0); // Crea una celda en la nueva fila
    var newCell1 = newRow.insertCell(1); // Crea una celda en la nueva fila
    // Decodificamos el path para obtener la ruta original
    newCell.textContent = decodeURIComponent(encodedPath); // Asigna el texto decodificado
    newCell1.textContent = decodeURIComponent(encodedPath); // Asigna el texto decodificado
  } else {
    console.error("No se encontró la tabla con el ID 'myTable'.");
  }
}



function addRowWithCells(cellsCount, cellIndex, text) {
  var myTable = document.getElementById("myTable");
  if (myTable) {
    var newRow = myTable.insertRow(-1); // Inserta una nueva fila al final
    for (var i = 0; i < cellsCount; i++) {
      var newCell = newRow.insertCell(i); // Crea cada celda en la nueva fila
      if (i === cellIndex) {
        newCell.innerHTML = text; // Asigna el texto solo al índice indicado
      } else {
        newCell.innerHTML = "-"; // Deja otras celdas vacías
      }
    }
  } else {
    console.error("No se encontró la tabla con el ID 'myTable'.");
  }
}
    </script>
    <script>
        document.oncontextmenu = function (event) {
          event = event || window.event; // Compatibilidad con navegadores antiguos
          var target = event.srcElement || event.target; // Obtén el elemento del evento
        
          // Si el clic derecho no ocurrió en la tabla, deshabilita el menú contextual
          if (!isDescendant(document.getElementById("myTable"), target)) {
            return false; // Previene el menú contextual
          }
        };
        
        // Función para verificar si un elemento está dentro de otro (compatibilidad con navegadores antiguos)
        function isDescendant(parent, child) {
          while (child) {
            if (child === parent) {
              return true;
            }
            child = child.parentNode;
          }
          return false;
        }
    </script>


    <script>
        var activeEffects = {}; // Almacena los intervalos activos para detenerlos y el texto original
        
          function addEffect(row, cell, estate) {
        
            var table = document.getElementById("myTable");
            var targetCell = (table && table.rows[row]) ? table.rows[row].cells[cell] : null;
        
            if (!targetCell) {
              console.error("Celda no encontrada");
        
              return;
            }
        
            var key = row + "-" + cell; // Clave única para identificar el efecto
        
            if (estate === 1) {
              // Si ya hay un efecto activo, no hacer nada
              if (activeEffects[key]) return;
        
              var originalText = targetCell.textContent; // Guardar el texto original
              targetCell.textContent = ""; // Vaciar la celda
              var spans = [];
        
              // Crear un span para cada letra
              for (var i = 0; i < originalText.length; i++) {
                var span = document.createElement("span");
                span.textContent = originalText[i];
                span.style.display = "inline-block";
                span.style.transition = "transform 0.5s, text-shadow 0.5s";
                span.style.transform = "scale(1)";
                span.style.textShadow = "0 0 0 white";
                targetCell.appendChild(span);
                spans.push(span);
              }
        
              // Función para aplicar el efecto
              function applyEffect() {
                for (var i = 0; i < spans.length; i++) {
                  (function(index) {
                    setTimeout(function () {
                      spans[index].style.transform = "scale(2)";
                      spans[index].style.textShadow = "0 0 10px white";
                    }, index * 100);
        
                    setTimeout(function () {
                      spans[index].style.transform = "scale(1)";
                      spans[index].style.textShadow = "0 0 0 white";
                    }, index * 100 + 500);
                  })(i);
                }
              }
        
              // Ejecutar inmediatamente al inicio
              applyEffect();
        
              // Configurar el efecto repetitivo
              activeEffects[key] = {
                interval: setInterval(applyEffect, 2000), // Efecto cada 2 segundos
                originalText: originalText, // Guardar el texto original
              };
            } else if (estate === 0) {
              // Detener el efecto si está activo
              if (activeEffects[key]) {
                clearInterval(activeEffects[key].interval); // Detener el intervalo
                targetCell.textContent = activeEffects[key].originalText; // Restaurar el texto original
                delete activeEffects[key]; // Eliminar la referencia
              }
            }
          }
        
        function gotoRegister() {
            //alert('register');
        external.raiseEvent('register','')
        }
        
        function gotoPurchase() {
            //alert('purchase');
        external.raiseEvent('purchase','')
        }
    </script>

    <style>
        /* Contenedor de la tabla */
          #tableContainer1 {
            position: relative; /* Necesario para posicionar el spinner sobre la tabla */
            margin: 20px auto;
            width: 80%;
          }
        
        
          /* Spinner encima de la tabla */
          #container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 150px;
            height: 150px;
            background: rgb(50, 50, 50); /* Fondo gris oscuro */
            border-radius: 50%; /* Forma circular */
            overflow: hidden;
            border: 2px solid white;
            z-index: 10; /* Para que esté sobre la tabla */
          display: none;  
        /* visibility: hidden; */
            
          }
        
          #completedText {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-family: Arial, sans-serif;
            font-size: 18px;
            font-weight: bold;
            text-align: center;
            z-index: 2;
          }
        
          .spinner {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 80%;
            height: 80%;
            border: 4px solid transparent;
            border-top: 4px solid lime;
            border-radius: 50%;
           /* transform: translate(-50%, -50%); */
         transform: translate(-50%, -50%) rotate(0deg); /* Solo aplica la rotación al spinner */
            background: rgb(70, 70, 70);
          }
        
        * {
          font-family: 'Roboto', sans-serif;
        }
        
        
        .modal-content {
            position: relative;
            z-index: 10;
        }
        
        .section {
            position: relative;
            z-index: 15;
        }
        
        #db-selector {
            pointer-events: auto;
            z-index: 20;
        }
    </style>

    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">


</head>

<body>
    <nav>
        <ul>
            <li onclick="openRegisterModal()">Register / Buy</li>
            <li onclick="openSettingsModal()">Settings</li>
            <li onclick="openOptionsModal()">Options</li>
        </ul>
    </nav>

    <!-- Ventana modal para Register  -------------------------+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
    <div id="registerModal" class="modal">
        <div class="modal-content">
            <span class="close-btn" onclick="closeModal('registerModal')">X</span>
            <div class="section">
                <label for="username">Username</label>
                <input type="text" id="username" name="UserName" style="width: 95%;">
                <label for="key">Key</label>
                <input type="text" id="key" name="Key" style="width: 95%;">
                <br>
                <br>
                <!--   ------------------------------------------------------------------ -->
                <center>
                    <button onclick="addEffect(1, 0, 1);gotoRegister();closeModal('registerModal')" class="button-glow2">REGISTER</button>
                </center>
            </div>
            <br>
            <hr>
            <div class="section">
                <center>
                    <button onclick="addEffect(1, 0, 0);gotoPurchase();closeModal('registerModal')" class="button-glow2">PURCHASE</button>
                </center>
            </div>
        </div>
    </div>

    <!-- Ventana modal para Settings ------------------------------------------------------------------------------------------- -->
    <div id="settingsModal" class="modal">
        <div class="modal-content">
            <!--   <span class="close-btn" onclick="closeModal('settingsModal')">X</span> -->
            <div class="section">
                <label for="db-selector">Select your target dB (decibels):</label>
                <select id="db-selector" name="db-selector">
                    <option value="0.0" selected>0.0 dB</option>
                    <option value="-0.5">-0.5 dB</option>
                    <option value="-1">-1 dB</option>
                    <option value="-1.5">-1.5 dB</option>
                    <option value="-2">-2 dB</option>
                    <option value="-2.5">-2.5 dB</option>
                </select>
                <div>
                    <p style="font-size: 12px;">**Recommended: 0 dB</p>
                </div>
                <i style="font-size: 12px;">Please choose the dB level that you would like to target.</i>


                <hr>

                <label for="i-selector">Select your target Integrated Loudness (LUFS):</label>
                <select id="i-selector" name="i-selector">
                    <option value="-6">-6 LUFS</option>
                    <option value="-8">-8 LUFS</option>
                    <option value="-10">-10 LUFS</option>
                    <option value="-12" selected>-12 LUFS</option>
                    <option value="-13">-13 LUFS</option>
                    <option value="-14">-14 LUFS</option>
                    <option value="-15">-15 LUFS</option>
                    <option value="-16">-16 LUFS</option>
                    <option value="-18">-18 LUFS</option>
                    <option value="-20">-20 LUFS</option>
                </select>
                <div>
                    <p style="font-size: 12px;">**Recommended: -12 LUFS</p>
                </div>
                <i style="font-size: 12px;">Higher values increase loudness, lower values reduce overall volume..</i>

                <hr>

                <label for="lra-selector">Select your target Loudness Range (LU):</label>
                <select id="lra-selector" name="lra-selector">
                    <option value="6">6</option>
                    <option value="8">8</option>
                    <option value="10">10</option>
                    <option value="12">12</option>
                    <option value="15">15</option>
                    <option value="18">18</option>
                    <option value="20" selected>20</option>
                </select>
                <div>
                    <p style="font-size: 12px;">**Recommended: 20 LU</p>
                </div>
                <i style="font-size: 12px;">Higher values increase dynamic variation, lower values compress dynamics.</i>
                <br>
                <br>



                <center>
                    <button class="button-glow2" onclick="closeModal('settingsModal')">SAVE</button>
                </center>
            </div>
        </div>
    </div>

    <!-- TERMINA VENTANA SETTINGS ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -------------------------------------------- -->


    <!-- Ventana modal para Options ------------------------------------------------------------------------------------------- -->
    <div id="optionsModal" class="modal">
        <div class="modal-content">
            <!--   <span class="close-btn" onclick="closeModal('optionsModal')">X</span> -->
            <div class="section">

                <form>


                    <label>
                        <input type="radio" name="fileOption" value="replace" id="replaceOption" style="width: 15px;" /> Replace original file </label>
                    <br>

                    <input type="radio" name="fileOption" value="suffix" id="suffixOption" style="width: 15px;" checked /> Add suffix to normalized filename:
                    <br>
                    <input type="text" id="suffixInput" value="_Normalized" />
                </form>

                <script>
                    var replaceOption = document.getElementById('replaceOption');
                    var suffixOption = document.getElementById('suffixOption');
                    var suffixInput = document.getElementById('suffixInput');
                
                    // When the "Add suffix" option is selected, enable the input
                    suffixOption.onclick = function() {
                      suffixInput.disabled = false;
                    };
                
                    // When the "Replace original file" option is selected, disable the input
                    replaceOption.onclick = function() {
                      suffixInput.disabled = true;
                    };
                </script>


                <hr>




                <center>
                    <button class="button-glow2" onclick="closeModal('optionsModal')">SAVE</button>
                </center>
            </div>
        </div>
    </div>

    <!-- TERMINA VENTANA OPTIONS ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -------------------------------------------- -->

    <header>

        <div class="logo">
            <a href="#"><span>MP4</span>Louder</a>
        </div>
        <div class="button-container">
            <button id="Boton1" class="button-glow2" style="height: 30px;" onclick="external.raiseEvent('normalize','')">Normalize</button>
            <button class="button-glow2" style="height: 30px;" onclick="external.raiseEvent('filerequester','')">Select file(s)</button>
        </div>

    </header>

    <!-- Encabezado Fijo -->
    <div class="header-container">
        <div class="header-item">FileName</div>
        <div class="header-item">Status</div>
        <div class="header-item">Max Level (dB)</div>
        <div class="header-item">Audio Average (dB)</div>
        <div class="header-item">File Type</div>
    </div>


    <div class="table-area">



        <div class="table-container" id="drop-area">







            <table id="myTable">
                <thead style="display: none;">
                    <tr>
                        <th>Columna 1</th>
                        <th>Columna 2</th>
                        <th>Columna 3</th>
                        <th>Columna 4</th>
                        <th>Columna 5</th>
                    </tr>
                </thead>

                <tbody>
                    <!--      <tr onclick="this.classList.toggle('selected')" oncontextmenu="showContextMenu(event, this)">
                        <td>Dato 1</td>
                        <td>Dato 2</td>
                        <td>Dato 3</td>
                        <td>Dato 4</td>
                        <td>Dato 5</td>
                    </tr>
                    <tr onclick="this.classList.toggle('selected')" oncontextmenu="showContextMenu(event, this)">
                        <td>Dato 16</td>
                        <td>Dato 7</td>
                        <td>Dato 8</td>
                        <td>Dato 9</td>
                        <td>Dato 10</td>
                    </tr>

<tr onclick="this.classList.toggle('selected')" oncontextmenu="showContextMenu(event, this)">
                        <td>Dato 26</td>
                        <td>Dato 7</td>
                        <td>Dato 8</td>
                        <td>Dato 9</td>
                        <td>Dato 10</td>
                    </tr>

<tr onclick="this.classList.toggle('selected')" oncontextmenu="showContextMenu(event, this)">
                        <td>Dato 36</td>
                        <td>Dato 7</td>
                        <td>Dato 8</td>
                        <td>Dato 9</td>
                        <td>Dato 10</td>
                    </tr>

<tr onclick="this.classList.toggle('selected')" oncontextmenu="showContextMenu(event, this)">
                        <td>Dato 46</td>
                        <td>Dato 7</td>
                        <td>Dato 8</td>
                        <td>Dato 9</td>
                        <td>Dato 10</td>
                    </tr>

<tr onclick="this.classList.toggle('selected')" oncontextmenu="showContextMenu(event, this)">
                        <td>Dato 56</td>
                        <td>Dato 7</td>
                        <td>Dato 8</td>
                        <td>Dato 9</td>
                        <td>Dato 10</td>
                    </tr>

<tr onclick="this.classList.toggle('selected')" oncontextmenu="showContextMenu(event, this)">
                        <td>Dato 76</td>
                        <td>Dato 7</td>
                        <td>Dato 8</td>
                        <td>Dato 9</td>
                        <td>Dato 10</td>
                    </tr>

<tr onclick="this.classList.toggle('selected')" oncontextmenu="showContextMenu(event, this)">
                        <td>Dato 86</td>
                        <td>Dato 7</td>
                        <td>Dato 8</td>
                        <td>Dato 9</td>
                        <td>Dato 10</td>
                    </tr> -->
                </tbody>
            </table>

            <!-- Spinner encima de la tabla -->
            <div id="container">
                <div id="completedText"></div>
                <div class="spinner"></div>
            </div>

            <br>
            <br>
            <center><b>Drag And Drop Here</b></center>
            <br>
        </div>



        <!-- Menú contextual -->
        <div id="contextMenu" class="context-menu">
            <div class="context-menu-item" onclick="cropRows()">Crop</div>
            <div class="context-menu-item" onclick="deleteRows()">Delete</div>
            <div class="context-menu-item" onclick="clearRows()">Clear</div>
        </div>

        <!-- <div class="accordion">
            <div class="accordion-item">
                <div style="margin-left: 16px; margin-top: 20px;">
                    <button class="button-glow2" onclick="external.raiseEvent('normalize','')">Normalize</button>
                    <br><br>
                    <button class="button-glow2" style="margin-left: 0px;" onclick="external.raiseEvent('filerequester','')">Select file(s)</button>
                    <br><br><br><br><br>
                </div>
            </div>
        </div> -->
    </div>
</body>
<script>
    // Animación del spinner
    var spinner = document.querySelector('.spinner');
    var angle = 0;
    var isSpinning = false; // Inicia como detenido
    
    function rotateSpinner() {
      if (!isSpinning) return; // Detener si isSpinning es false
    
      // Incrementar el ángulo y aplicar la rotación
      angle = (angle + 5) % 360;
      spinner.style.transform = 'translate(-50%, -50%) rotate(' + angle + 'deg)';
    
      // Solicitar el siguiente cuadro de animación
      requestAnimationFrame(rotateSpinner);
    }
    
    // Función para iniciar la rotación
    function startSpinner() {
      if (!isSpinning) { // Solo reinicia si está detenido
    
    // Actualizar el texto
      var textElement = document.getElementById('completedText');
      textElement.textContent = '';
    
        isSpinning = true;
        requestAnimationFrame(rotateSpinner); // Reinicia la animación
      }
    }
    
    // Función para detener la rotación y actualizar el texto
    function stopSpinner() {
      isSpinning = false; // Detener el bucle de animación
    
      // Alinear el spinner en posición horizontal
      spinner.style.transform = 'translate(-50%, -50%) rotate(0deg)';
    
      // Actualizar el texto
      var textElement = document.getElementById('completedText');
      textElement.textContent = 'COMPLETED';
    
      // Asegurar que el texto no tenga rotación
      textElement.style.transform = 'translate(-50%, -50%) rotate(0deg)';
    }
    
    
    
    
    
    
    
    
    // Iniciar la animación del spinner
    //startSpinner();
    
    
    
      // Modificar el texto del spinner
      var textElement = document.getElementById('completedText');
      function updateSpinnerText(newText) {
        textElement.textContent = newText;
      }
    
      // Cambiar el texto después de 3 segundos
      setTimeout(function () {
        //updateSpinnerText('PROCESSING');
      }, 3000);
    
    /*
     var spinner = document.getElementById('container');
    spinner.style.top = '500px'; */
    
    //spinner.style.visibility = 'hidden';
</script>

</html>