<!DOCTYPE html>
<html>
<head>
  <script src='./js/jquery-3.7.1.js'></script>
  <script src='./js/bootstrap.bundle.min.js'></script>      
  <script src='./js/dataTables.js'></script>
  <script src='./js/dataTables.bootstrap5.js'></script>    
  <script src="./js/papaparse.min.js"></script>  
  <script src="./js/jquery.min.js"></script>  
<title>CSV to Grid</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="./css/bootstrap.min.css" rel="stylesheet">
<link href="./css/dataTables.dataTables.css" rel="stylesheet">
<style>
.divElement{
    position: absolute;
    top: 40%;
    left: 40%;
    margin-top: -50px;
    margin-left: -50px;
    width: 500px;
    height: 150px;
}
.rcorners {
  border-radius: 25px;
  border: 0px solid #73AD21;
  padding: 15px;
  width: 500px;
  height: 150px;
}
table, th, td {
  border: 0px solid;
  border-spacing: 5px;
}

table {
  width: 100%;
}

.button {
  border: none;
  color: white;
  padding: 16px 100px 10px 100px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 100px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button2 {
  border-radius: 25px;
  background-color: white;
  color: black;
  border: 2px solid #008CBA;
  left: 30%;
}

.button2:hover {
  background-color: #008CBA;
  color: white;
}

              .topnav {
                overflow: hidden;
                background-color: #ffffff;
              }

              .topnav a {
                float: left;
                color: #1a1a1a;
                text-align: center;
                padding: 12px 14px;
                text-decoration: none;
                font-size: 17px;
              }

              .topnav a:hover {
                background-color: #ddd;
                color: black;
              }

              .topnav a.active {
                background-color: #ffffff;
                color: black;
              }

              .topnav-right {
                float: right;
              }

#GRIDCSVTABLE {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#GRIDCSVTABLE td, #GRIDCSVTABLE th {
  border: 1px solid #000000;
  padding: 8px;
}

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

#GRIDCSVTABLE tr:hover {background-color: #e6f2ff;}

#GRIDCSVTABLE th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #04AA6D;
  color: white;
}
</style>
</head>
<body>
<div class="topnav">
        <a class="active" href="./index.html"><img src="./images/breezesofty.svg" alt="Logo" style="float:top;width:140px;height:90px;"></a>
</div>
    
<div>
        <h1 style="text-align: center;">CSV to Grid</h1>
</div>

<div>
  <label for="CSV">Select CSV file:</label> 
  <input type="file" accept=".csv" id="picker" style="display: block; position: absolute; left: 1px; top:200px;" onchange="GRIDER()">  
  <!--<button onclick="myFun()" id="inibtn" style="display: block; position: absolute; left: 300px; top:25px;">Initialise Table</button>-->
  <div><img src="./images/initialize.svg" id="inibtn" style="display: none; position: absolute; left: 300px; top:190px;" alt="Download 1 Icon" width="100" height="70" onclick="myFun()"></div>   
  <!--<button onclick="dwnld()" id="expbtn" style="display: block; position: absolute; left: 350px; top:25px;">Export Table</button>  -->
  <input type="text" id="myInput" style="display: none; position: absolute; left: 350px; top:200px;" onkeyup="searcher()" placeholder="Search table.." title="Type in a text">  
  <!--input type="text" id="searchBox" placeholder="Search for names..">-->
  <div id="gridinfo" style="display: block; position: absolute; left: 1px; top:250px;">Records:</div>
  <textarea  id="fileContent1" style="display:none;"></textarea>
  <div><img src="./images/download0.svg" id="downld" style="display: none; position: absolute; left: 545px; top:190px;" alt="Download 1 Icon" width="80" height="50" onclick="dwnld()"></div>  
  <div><table id="GRIDCSVTABLE" style="width:100%; display: block; position: absolute; left: 1px; top: 270px;" class="pagination" data-pagecount="3"></table></div>
  <div id="pagination"></div>
</div>  
<script src="./js/csvtogrid.js">

</script>
</body>
</html>
