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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Audio Length Extractor</title>
    <link rel="icon" type="image/x-icon" href="logo.png">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script defer data-domain="tools.badheshchauhan.com"
        src="https://getanalyzr.vercel.app/tracking-script.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        thead th {
            position: sticky;
            top: 0;
            z-index: 2;
        }
    </style>
</head>

<body>
    <center>
        <h4><b>CSV to Get Audio Lengths</b></h4><br>
        <div class="input-group mb-3 ">
            <label class="input-group-text">Upload CSV File</label>
            <input type="file" id="csvFile" class="input-group-text" accept=".csv" />
            <button id="processButton" class="btn btn-danger download-button  btn-block">Process</button>
            <button type="button" class="btn btn-success download-button  btn-block" id='csv'><span
                    class="glyphicon glyphicon-download-alt"></span> Copy Table</button>
        </div>
    </center>
    <table id="resultsTable" style="margin-top: 20px; display: none;"
        class="table table-bordered table-sm table-hover border-primary table-responsive">
        <thead class="table-success">
            <tr>
                <th>File Name</th>
                <th>Audio File URL</th>
                <th>Length (MM:SS)</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <script src="script/audiolength.js"></script>
</body>

</html>