<!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>CSV Viewer by Badhesh Chauhan</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.1/papaparse.min.js"></script>
    <script defer data-domain="tools.badheshchauhan.com"  src="https://getanalyzr.vercel.app/tracking-script.js"></script>


    <style>
        #searchInput {
            width: 90%;
            padding: 10px;
            border: none;
            border-radius: 25px;
            background-image: linear-gradient(to right, #FF6B6B, #1E90FF);
            color: #fff;
            font-size: 20px;
            box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
            outline: none;
            transition: background-image 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
        }


        /* Hover styles for the search input and search button */
        #searchInput:hover,
        #searchBtn:hover {
            background-image: linear-gradient(to right, #a89ba2, #44515e);
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);

        }

        /* Focus styles for the search input */
        #searchInput:focus {
            background-image: linear-gradient(to right, #a5979f, #555759);
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.4);
        }


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

        .table-container {
            overflow-y: auto;
            margin-top: 20px;
            margin-left: 10px;
            margin-right: 10px;
            margin-bottom: 20px;
        }



        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
            color: #333;
        }

        .container {
            max-width: 90%;
            margin: 20px auto;
            padding: 20px;
            background-color: #475a9a;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            color: #efeaea;
        }

        input[type="file"] {
            margin-bottom: 20px;
            padding: 10px;
            font-size: 1rem;
            border: 1px solid #ccc;
            border-radius: 8px;
            width: 80%;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            overflow: hidden;
            border-radius: 12px;
            table-layout: fixed;
            /* Make table more compact */
        }

        thead th {
            background-color: #4CAF50;
            color: #fff;
            padding: 8px;
            text-align: center;
            font-size: 0.95rem;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        thead th:hover {
            background-color: #728573;
        }

        tbody tr:nth-child(odd) {
            background-color: #b6cdb8;
        }

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

        tbody tr:hover {
            background-color: #d7ccc8;
            transition: background-color 0.3s ease;
        }

        th,
        td {
            padding: 2px;
            /* Reduced padding for compactness */
            border: 1px solid #ddd;
            text-align: left;
            font-size: 0.85rem;
            /* Smaller font size for better space management */
            overflow-wrap: anywhere;
        }

        @media (max-width: 768px) {
            .container {
                padding: 15px;
            }

            th,
            td {
                padding: 6px;
                /* Further reduce padding on small screens */
                font-size: 0.8rem;
            }
        }
    </style>
</head>

<body>

    <div class="container">
        <h2>CSV Viewer</h2>
        <input type="file" id="csvFile" accept=".csv" multiple>
    </div>
    <div class="table-container">
        <table id="csvTable" style="display: none; ">
            <center> <input type="text" id="searchInput" placeholder="Search Data in Table Example"
                    style="display: none;"> </center> <br>
            <thead>
                <tr id="headerRow"></tr>
            </thead>
            <tbody id="tableBody"></tbody>
        </table>
    </div>


    <script>
        const _0x59497a=_0x22df;(function(_0x484075,_0x58298a){const _0x38e143=_0x22df,_0x178fd5=_0x484075();while(!![]){try{const _0x830800=parseInt(_0x38e143(0x1a9))/0x1+-parseInt(_0x38e143(0x1f0))/0x2*(-parseInt(_0x38e143(0x1c2))/0x3)+-parseInt(_0x38e143(0x1af))/0x4*(parseInt(_0x38e143(0x1d4))/0x5)+parseInt(_0x38e143(0x1c5))/0x6*(-parseInt(_0x38e143(0x1ea))/0x7)+parseInt(_0x38e143(0x1ab))/0x8+-parseInt(_0x38e143(0x1ad))/0x9*(-parseInt(_0x38e143(0x1df))/0xa)+-parseInt(_0x38e143(0x1f5))/0xb*(-parseInt(_0x38e143(0x1d6))/0xc);if(_0x830800===_0x58298a)break;else _0x178fd5['push'](_0x178fd5['shift']());}catch(_0x28adac){_0x178fd5['push'](_0x178fd5['shift']());}}}(_0x5302,0x25117),document[_0x59497a(0x1c8)](_0x59497a(0x1c9))[_0x59497a(0x1e8)](_0x59497a(0x1b7),function(_0x4ec351){const _0x144a89=_0x59497a;tableBody[_0x144a89(0x1d7)]='',headerRow[_0x144a89(0x1d7)]='';const _0x236b09=_0x4ec351[_0x144a89(0x1c0)][_0x144a89(0x1cc)];Array[_0x144a89(0x1b8)](_0x236b09)[_0x144a89(0x1b6)]((_0x3f17f1,_0x2f9407)=>{const _0x455dba=_0x144a89;if(_0x3f17f1){let _0x438900=new FileReader();_0x438900[_0x455dba(0x1d8)]=function(_0x48c7cd){const _0x1971cc=_0x455dba;let _0x3c1b2f=_0x48c7cd[_0x1971cc(0x1c0)][_0x1971cc(0x1a6)],_0xcc21b;Papa[_0x1971cc(0x1a8)](_0x3c1b2f,{'complete':function(_0x36416f){const _0x439719=_0x1971cc;_0xcc21b=_0x36416f[_0x439719(0x1ba)][0x0],console[_0x439719(0x1eb)](_0xcc21b);}});let _0x288282=document[_0x1971cc(0x1c8)](_0x1971cc(0x1b9)),_0x5928bd=document[_0x1971cc(0x1c8)](_0x1971cc(0x1e0));_0x5928bd[_0x1971cc(0x1d7)]='',_0xcc21b[_0x1971cc(0x1b6)]((_0x537ed7,_0x1ede82)=>{const _0x11ee4f=_0x1971cc;let _0x37b1ea=document[_0x11ee4f(0x1c4)]('th');_0x37b1ea[_0x11ee4f(0x1d7)]=_0x537ed7,_0x37b1ea[_0x11ee4f(0x1e8)](_0x11ee4f(0x1ae),function(){sortTable(_0x1ede82);}),_0x5928bd[_0x11ee4f(0x1f4)](_0x37b1ea);}),Papa[_0x1971cc(0x1a8)](_0x3c1b2f,{'complete':function(_0x32444c){const _0x32adf3=_0x1971cc;_0x32444c[_0x32adf3(0x1ba)][_0x32adf3(0x1ac)](0x1)[_0x32adf3(0x1b6)](function(_0x528fb8){const _0x359c73=_0x32adf3;if(!_0x528fb8||_0x528fb8[_0x359c73(0x1f3)](_0x51de4e=>_0x51de4e[_0x359c73(0x1ca)]()===''))return;let _0x44a178=document[_0x359c73(0x1c4)]('tr');_0x528fb8[_0x359c73(0x1b6)](function(_0x26eede){const _0x34f739=_0x359c73;let _0x9d4527=document[_0x34f739(0x1c4)]('td');_0x9d4527[_0x34f739(0x1d5)]=_0x26eede,_0x44a178[_0x34f739(0x1f4)](_0x9d4527);}),_0x288282[_0x359c73(0x1f4)](_0x44a178);});}}),document[_0x1971cc(0x1c8)](_0x1971cc(0x1cf))[_0x1971cc(0x1e1)][_0x1971cc(0x1da)]=_0x1971cc(0x1e3),document['getElementById'](_0x1971cc(0x1e7))[_0x1971cc(0x1e1)][_0x1971cc(0x1da)]=_0x1971cc(0x1c7),document[_0x1971cc(0x1c8)](_0x1971cc(0x1e0))[_0x1971cc(0x1e1)][_0x1971cc(0x1cb)]=_0x1971cc(0x1f1),document[_0x1971cc(0x1c8)](_0x1971cc(0x1e0))[_0x1971cc(0x1e1)][_0x1971cc(0x1e2)]='0',document[_0x1971cc(0x1c8)](_0x1971cc(0x1e0))[_0x1971cc(0x1e1)][_0x1971cc(0x1b1)]='10',document[_0x1971cc(0x1c8)](_0x1971cc(0x1e7))[_0x1971cc(0x1e8)](_0x1971cc(0x1d0),searchTable);},_0x438900[_0x455dba(0x1bf)](_0x3f17f1);}else alert(_0x455dba(0x1e6));});}));function searchTable(){const _0x47159e=_0x59497a;var _0x3ef57f,_0x38547f,_0x56c928,_0x4b96b1,_0x6aa695,_0x3acc04,_0x289472,_0x42935d;_0x3ef57f=document[_0x47159e(0x1c8)](_0x47159e(0x1e7)),_0x38547f=_0x3ef57f[_0x47159e(0x1b0)][_0x47159e(0x1db)](),_0x56c928=document[_0x47159e(0x1c8)](_0x47159e(0x1cf)),_0x4b96b1=_0x56c928[_0x47159e(0x1dd)]('tr');for(_0x3acc04=0x1;_0x3acc04<_0x4b96b1[_0x47159e(0x1a5)];_0x3acc04++){var _0x4b2d2e=![];for(_0x289472=0x0;_0x289472<_0x4b96b1[_0x3acc04][_0x47159e(0x1c3)][_0x47159e(0x1a5)];_0x289472++){_0x6aa695=_0x4b96b1[_0x3acc04][_0x47159e(0x1c3)][_0x289472];if(_0x6aa695){_0x42935d=_0x6aa695[_0x47159e(0x1d5)]||_0x6aa695[_0x47159e(0x1b2)];if(_0x42935d[_0x47159e(0x1db)]()[_0x47159e(0x1de)](_0x38547f)>-0x1){_0x4b2d2e=!![];break;}}}_0x4b2d2e?_0x4b96b1[_0x3acc04][_0x47159e(0x1e1)][_0x47159e(0x1da)]='':_0x4b96b1[_0x3acc04][_0x47159e(0x1e1)][_0x47159e(0x1da)]=_0x47159e(0x1d2);}}function _0x5302(){const _0x4fcd94=['result','setAttribute','parse','144260fLgLcg','absolute','310472wdJrfD','slice','3141pnpHfk','click','4tKCvFb','value','zIndex','innerText','querySelectorAll','5px','col-resize','forEach','change','from','tableBody','data','cursor','backgroundColor','rows','offsetWidth','readAsText','target','pageX','16479ShJUxC','cells','createElement','12DztEhD','asc','block','getElementById','csvFile','trim','position','files','bottom','#ccc','csvTable','keyup','desc','none','div','637915PVMaDD','textContent','156OVSRZF','innerHTML','onload','removeEventListener','display','toUpperCase','mousemove','getElementsByTagName','indexOf','430tHAWJi','headerRow','style','top','table','relative','mouseup','Please\x20upload\x20a\x20valid\x20CSV\x20file.','searchInput','addEventListener','sort','173831wuCvrw','log','mousedown','getAttribute','right','localeCompare','38oICnkD','sticky','data-sort-order','every','appendChild','22539XLDutf','width','length'];_0x5302=function(){return _0x4fcd94;};return _0x5302();}function sortTable(_0xce7ffe){const _0x3e2543=_0x59497a;let _0x1b8d5c=Array[_0x3e2543(0x1b8)](tableBody[_0x3e2543(0x1bd)]),_0xf6ab47=tableBody[_0x3e2543(0x1ed)](_0x3e2543(0x1f2))!==_0x3e2543(0x1d1);tableBody[_0x3e2543(0x1a7)](_0x3e2543(0x1f2),_0xf6ab47?_0x3e2543(0x1d1):_0x3e2543(0x1c6)),_0x1b8d5c[_0x3e2543(0x1e9)]((_0x2daf34,_0x266756)=>{const _0x5a2dea=_0x3e2543;let _0x25088f=_0x2daf34[_0x5a2dea(0x1c3)][_0xce7ffe]?.[_0x5a2dea(0x1d5)][_0x5a2dea(0x1ca)](),_0x2b03ad=_0x266756[_0x5a2dea(0x1c3)][_0xce7ffe]?.[_0x5a2dea(0x1d5)][_0x5a2dea(0x1ca)]();if(!_0x25088f||!_0x2b03ad)return 0x0;if(!isNaN(_0x25088f)&&!isNaN(_0x2b03ad))return _0xf6ab47?_0x25088f-_0x2b03ad:_0x2b03ad-_0x25088f;return _0xf6ab47?_0x25088f[_0x5a2dea(0x1ef)](_0x2b03ad):_0x2b03ad[_0x5a2dea(0x1ef)](_0x25088f);}),_0x1b8d5c[_0x3e2543(0x1b6)](_0x272dd0=>tableBody[_0x3e2543(0x1f4)](_0x272dd0));}function _0x22df(_0x37dd77,_0xe13b3f){const _0x53027f=_0x5302();return _0x22df=function(_0x22dfe6,_0x4d353d){_0x22dfe6=_0x22dfe6-0x1a5;let _0x471fb1=_0x53027f[_0x22dfe6];return _0x471fb1;},_0x22df(_0x37dd77,_0xe13b3f);}document[_0x59497a(0x1b3)]('th')[_0x59497a(0x1b6)](_0x15b3c0=>{const _0x2a6b25=_0x59497a;_0x15b3c0[_0x2a6b25(0x1e1)][_0x2a6b25(0x1cb)]=_0x2a6b25(0x1e4);let _0x34baa9=document[_0x2a6b25(0x1c4)](_0x2a6b25(0x1d3));_0x34baa9[_0x2a6b25(0x1e1)][_0x2a6b25(0x1cb)]=_0x2a6b25(0x1aa),_0x34baa9[_0x2a6b25(0x1e1)][_0x2a6b25(0x1ee)]='0',_0x34baa9[_0x2a6b25(0x1e1)][_0x2a6b25(0x1e2)]='0',_0x34baa9[_0x2a6b25(0x1e1)][_0x2a6b25(0x1cd)]='0',_0x34baa9[_0x2a6b25(0x1e1)][_0x2a6b25(0x1f6)]=_0x2a6b25(0x1b4),_0x34baa9[_0x2a6b25(0x1e1)][_0x2a6b25(0x1bb)]=_0x2a6b25(0x1b5),_0x34baa9[_0x2a6b25(0x1e1)][_0x2a6b25(0x1bc)]=_0x2a6b25(0x1ce),_0x15b3c0[_0x2a6b25(0x1f4)](_0x34baa9),_0x34baa9[_0x2a6b25(0x1e8)](_0x2a6b25(0x1ec),_0x1126f0=>{const _0xcda40f=_0x2a6b25;let _0x148b3e=_0x1126f0[_0xcda40f(0x1c1)],_0x238076=_0x15b3c0[_0xcda40f(0x1be)];const _0x2f4802=_0x340e18=>{const _0x4b0c3e=_0xcda40f;let _0x337be3=_0x238076+(_0x340e18[_0x4b0c3e(0x1c1)]-_0x148b3e);_0x15b3c0[_0x4b0c3e(0x1e1)][_0x4b0c3e(0x1f6)]=_0x337be3+'px';},_0x3aac5f=()=>{const _0x2d6e72=_0xcda40f;document[_0x2d6e72(0x1d9)](_0x2d6e72(0x1dc),_0x2f4802),document[_0x2d6e72(0x1d9)](_0x2d6e72(0x1e5),_0x3aac5f);};document[_0xcda40f(0x1e8)](_0xcda40f(0x1dc),_0x2f4802),document[_0xcda40f(0x1e8)](_0xcda40f(0x1e5),_0x3aac5f);});});
    </script>
</body>

</html>