<!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>

    <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 _0x5765c3=_0x24bc;(function(_0x417d64,_0x388125){const _0xdbe8fc=_0x24bc,_0x5e1793=_0x417d64();while(!![]){try{const _0x430830=-parseInt(_0xdbe8fc(0xb2))/0x1*(parseInt(_0xdbe8fc(0x7e))/0x2)+-parseInt(_0xdbe8fc(0x87))/0x3+parseInt(_0xdbe8fc(0x70))/0x4+parseInt(_0xdbe8fc(0xb0))/0x5+parseInt(_0xdbe8fc(0x88))/0x6+parseInt(_0xdbe8fc(0x81))/0x7*(-parseInt(_0xdbe8fc(0x94))/0x8)+parseInt(_0xdbe8fc(0xaa))/0x9;if(_0x430830===_0x388125)break;else _0x5e1793['push'](_0x5e1793['shift']());}catch(_0x33843f){_0x5e1793['push'](_0x5e1793['shift']());}}}(_0x19ed,0x51834),document[_0x5765c3(0xa7)](_0x5765c3(0x7b))[_0x5765c3(0x9a)](_0x5765c3(0xa6),function(_0x25110d){const _0x10caaa=_0x5765c3;tableBody[_0x10caaa(0x92)]='',headerRow[_0x10caaa(0x92)]='';const _0x59f74b=_0x25110d[_0x10caaa(0x6e)][_0x10caaa(0x75)];Array[_0x10caaa(0x85)](_0x59f74b)[_0x10caaa(0x78)]((_0x4f015a,_0x7c4748)=>{const _0x56ca98=_0x10caaa;if(_0x4f015a){let _0x47b321=new FileReader();_0x47b321[_0x56ca98(0xb1)]=function(_0x2dfe7d){const _0x5293c8=_0x56ca98;let _0x39e573=_0x2dfe7d[_0x5293c8(0x6e)][_0x5293c8(0x79)],_0x256adb;Papa[_0x5293c8(0xad)](_0x39e573,{'complete':function(_0x362a34){const _0x5453b2=_0x5293c8;_0x256adb=_0x362a34[_0x5453b2(0x6b)][0x0],console[_0x5453b2(0x7a)](_0x256adb);}});let _0x2ad1ca=document[_0x5293c8(0xa7)](_0x5293c8(0xaf)),_0x29e5d6=document[_0x5293c8(0xa7)](_0x5293c8(0x82));_0x29e5d6[_0x5293c8(0x92)]='',_0x256adb[_0x5293c8(0x78)]((_0x40dcfc,_0x3745c6)=>{const _0x2397c9=_0x5293c8;let _0x367123=document[_0x2397c9(0x98)]('th');_0x367123[_0x2397c9(0x92)]=_0x40dcfc,_0x367123[_0x2397c9(0x9a)](_0x2397c9(0x77),function(){sortTable(_0x3745c6);}),_0x29e5d6[_0x2397c9(0xb5)](_0x367123);}),Papa[_0x5293c8(0xad)](_0x39e573,{'complete':function(_0xc7bd25){const _0xfd9673=_0x5293c8;_0xc7bd25[_0xfd9673(0x6b)][_0xfd9673(0xa1)](0x1)[_0xfd9673(0x78)](function(_0xa610f1){const _0xac311d=_0xfd9673;if(!_0xa610f1||_0xa610f1[_0xac311d(0xa0)](_0x3bd8f1=>_0x3bd8f1[_0xac311d(0x8c)]()===''))return;let _0xd281b2=document[_0xac311d(0x98)]('tr');_0xa610f1[_0xac311d(0x78)](function(_0x4a4262){const _0x58ffce=_0xac311d;let _0x1ede51=document[_0x58ffce(0x98)]('td');_0x1ede51[_0x58ffce(0x83)]=_0x4a4262,_0xd281b2[_0x58ffce(0xb5)](_0x1ede51);}),_0x2ad1ca[_0xac311d(0xb5)](_0xd281b2);});}}),document[_0x5293c8(0xa7)](_0x5293c8(0x73))[_0x5293c8(0xa4)][_0x5293c8(0x8d)]=_0x5293c8(0x86),document[_0x5293c8(0xa7)](_0x5293c8(0xb6))[_0x5293c8(0xa4)][_0x5293c8(0x8d)]=_0x5293c8(0x8f),document[_0x5293c8(0xa7)](_0x5293c8(0x82))[_0x5293c8(0xa4)][_0x5293c8(0x72)]=_0x5293c8(0x9f),document[_0x5293c8(0xa7)](_0x5293c8(0x82))[_0x5293c8(0xa4)][_0x5293c8(0x76)]='0',document[_0x5293c8(0xa7)](_0x5293c8(0x82))[_0x5293c8(0xa4)][_0x5293c8(0xa8)]='10',document[_0x5293c8(0xa7)](_0x5293c8(0xb6))[_0x5293c8(0x9a)](_0x5293c8(0xac),searchTable);},_0x47b321[_0x56ca98(0xae)](_0x4f015a);}else alert(_0x56ca98(0x9b));});}));function _0x19ed(){const _0x1ad21e=['readAsText','tableBody','157640QuVrMA','onload','41983AQpyWl','bottom','getAttribute','appendChild','searchInput','removeEventListener','mousedown','#ccc','data','right','pageX','target','cursor','525316aGZPYJ','value','position','csvTable','desc','files','top','click','forEach','result','log','csvFile','col-resize','setAttribute','30ofBfMA','querySelectorAll','div','14742YhXolT','headerRow','textContent','mousemove','from','table','1778331pAwxmJ','1935510JDwkhS','data-sort-order','indexOf','offsetWidth','trim','display','5px','block','cells','mouseup','innerHTML','getElementsByTagName','112XpGobG','innerText','asc','width','createElement','localeCompare','addEventListener','Please\x20upload\x20a\x20valid\x20CSV\x20file.','sort','none','absolute','sticky','every','slice','rows','toUpperCase','style','relative','change','getElementById','zIndex','length','9903960iZijtA','backgroundColor','keyup','parse'];_0x19ed=function(){return _0x1ad21e;};return _0x19ed();}function searchTable(){const _0x53b80b=_0x5765c3;var _0x3d39a8,_0x3fba6e,_0x2e65fc,_0x456034,_0x56b5d3,_0x571716,_0x46fb70,_0x2b12c8;_0x3d39a8=document[_0x53b80b(0xa7)](_0x53b80b(0xb6)),_0x3fba6e=_0x3d39a8[_0x53b80b(0x71)][_0x53b80b(0xa3)](),_0x2e65fc=document[_0x53b80b(0xa7)](_0x53b80b(0x73)),_0x456034=_0x2e65fc[_0x53b80b(0x93)]('tr');for(_0x571716=0x1;_0x571716<_0x456034[_0x53b80b(0xa9)];_0x571716++){var _0x8c9352=![];for(_0x46fb70=0x0;_0x46fb70<_0x456034[_0x571716][_0x53b80b(0x90)][_0x53b80b(0xa9)];_0x46fb70++){_0x56b5d3=_0x456034[_0x571716][_0x53b80b(0x90)][_0x46fb70];if(_0x56b5d3){_0x2b12c8=_0x56b5d3[_0x53b80b(0x83)]||_0x56b5d3[_0x53b80b(0x95)];if(_0x2b12c8[_0x53b80b(0xa3)]()[_0x53b80b(0x8a)](_0x3fba6e)>-0x1){_0x8c9352=!![];break;}}}_0x8c9352?_0x456034[_0x571716][_0x53b80b(0xa4)][_0x53b80b(0x8d)]='':_0x456034[_0x571716][_0x53b80b(0xa4)][_0x53b80b(0x8d)]=_0x53b80b(0x9d);}}function _0x24bc(_0x2c2fea,_0x49866a){const _0x19ed68=_0x19ed();return _0x24bc=function(_0x24bc81,_0x2e8d1b){_0x24bc81=_0x24bc81-0x6a;let _0xb5780c=_0x19ed68[_0x24bc81];return _0xb5780c;},_0x24bc(_0x2c2fea,_0x49866a);}function sortTable(_0x1e3c84){const _0x3f3475=_0x5765c3;let _0x5463dd=Array[_0x3f3475(0x85)](tableBody[_0x3f3475(0xa2)]),_0x49b0de=tableBody[_0x3f3475(0xb4)](_0x3f3475(0x89))!==_0x3f3475(0x74);tableBody[_0x3f3475(0x7d)](_0x3f3475(0x89),_0x49b0de?_0x3f3475(0x74):_0x3f3475(0x96)),_0x5463dd[_0x3f3475(0x9c)]((_0x340a66,_0x4ddd88)=>{const _0x5dcef5=_0x3f3475;let _0x2b33c7=_0x340a66[_0x5dcef5(0x90)][_0x1e3c84]?.[_0x5dcef5(0x83)][_0x5dcef5(0x8c)](),_0x439866=_0x4ddd88[_0x5dcef5(0x90)][_0x1e3c84]?.[_0x5dcef5(0x83)][_0x5dcef5(0x8c)]();if(!_0x2b33c7||!_0x439866)return 0x0;if(!isNaN(_0x2b33c7)&&!isNaN(_0x439866))return _0x49b0de?_0x2b33c7-_0x439866:_0x439866-_0x2b33c7;return _0x49b0de?_0x2b33c7[_0x5dcef5(0x99)](_0x439866):_0x439866[_0x5dcef5(0x99)](_0x2b33c7);}),_0x5463dd[_0x3f3475(0x78)](_0x508aea=>tableBody[_0x3f3475(0xb5)](_0x508aea));}document[_0x5765c3(0x7f)]('th')[_0x5765c3(0x78)](_0x4a31e4=>{const _0x21f742=_0x5765c3;_0x4a31e4[_0x21f742(0xa4)][_0x21f742(0x72)]=_0x21f742(0xa5);let _0xf7eeb0=document[_0x21f742(0x98)](_0x21f742(0x80));_0xf7eeb0[_0x21f742(0xa4)][_0x21f742(0x72)]=_0x21f742(0x9e),_0xf7eeb0[_0x21f742(0xa4)][_0x21f742(0x6c)]='0',_0xf7eeb0[_0x21f742(0xa4)][_0x21f742(0x76)]='0',_0xf7eeb0[_0x21f742(0xa4)][_0x21f742(0xb3)]='0',_0xf7eeb0[_0x21f742(0xa4)][_0x21f742(0x97)]=_0x21f742(0x8e),_0xf7eeb0[_0x21f742(0xa4)][_0x21f742(0x6f)]=_0x21f742(0x7c),_0xf7eeb0[_0x21f742(0xa4)][_0x21f742(0xab)]=_0x21f742(0x6a),_0x4a31e4[_0x21f742(0xb5)](_0xf7eeb0),_0xf7eeb0[_0x21f742(0x9a)](_0x21f742(0xb8),_0x536288=>{const _0x88c5ef=_0x21f742;let _0x80a310=_0x536288[_0x88c5ef(0x6d)],_0xbaafe2=_0x4a31e4[_0x88c5ef(0x8b)];const _0x4a2c91=_0x2ea161=>{const _0x2b1810=_0x88c5ef;let _0x6e991c=_0xbaafe2+(_0x2ea161[_0x2b1810(0x6d)]-_0x80a310);_0x4a31e4[_0x2b1810(0xa4)][_0x2b1810(0x97)]=_0x6e991c+'px';},_0x21ccd2=()=>{const _0x4a5dc5=_0x88c5ef;document[_0x4a5dc5(0xb7)](_0x4a5dc5(0x84),_0x4a2c91),document[_0x4a5dc5(0xb7)](_0x4a5dc5(0x91),_0x21ccd2);};document[_0x88c5ef(0x9a)](_0x88c5ef(0x84),_0x4a2c91),document[_0x88c5ef(0x9a)](_0x88c5ef(0x91),_0x21ccd2);});});
    </script>
</body>

</html>