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

<head>
    <meta charset="UTF-8">
    <link rel="icon" type="image/x-icon" href="logo.png">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes">
    <title>SRT To xls converter by Badhesh Chauhan</title>
    <!--<script src="https:\unpkg.com\srt-parser-2@1.2.3\dist\index.js"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
        integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.sheetjs.com/xlsx-0.20.3/package/dist/xlsx.full.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;
            background-color: #788072;
        }

        .container {
            max-width: device-width;
            margin: auto;
            padding: 20px;
            background-color: rgb(73, 84, 144);
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(126, 152, 230, 0.1);
        }

        input[type="file"] {
            margin-bottom: 20px;
        }


        thead th {
            position: sticky;
            top: 0;
            z-index: 2;
        }


        table tbody {
            width: device-width;
            border-collapse: collapse;
            margin-top: 20px;
            border-radius: 20px;
            overflow: auto;

        }

        table,
        th,
        table td {
            border: 1px solid #ddd;
            border-radius: 10px;
        }

        th,
        td {
            padding: 10px;
            text-align: left;
            border-radius: 10px;
            resize: horizontal;
            overflow: auto;

        }

        th {
            background-color: #4CAF50;
            color: white;
            cursor: pointer;
        }

        th:hover {
            background-color: #45a049;
        }

        tr:nth-child(odd) {
            background-color: #89c18f;

        }

        tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        tr:hover {
            background-color: #ddd;
        }
    </style>
</head>

<body>

    <div class="container">
        <h2>SRT to xls conveter by Badhesh Chauhan</h2>
        <input type="file" id="csvFile" accept=".srt" multiple>
        <div class="table-container">
            <table id="csvTable" style="display: none; ">
                <thead>
                    <tr id="headerRow"></tr>
                </thead>
                <tbody id="tableBody"></tbody>
            </table>
        </div>
    </div>

    <script src="script/srtconvert.js"></script>
</body>

</html>