
<!DOCTYPE html>
<html>
<!--

<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
     <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" ></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" ></script>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.7.7/xlsx.core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xls/0.7.4-a/xls.core.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <style>
        body {
            font-size: 13px
            background: #f8f8f8;
        }

        #exceltable {
            font-size: 13px;
        }

        select.form-control {
            height: 30px;
            font-size: 12px;
        }

        thead th {
            text-transform: capitalize;
        }

        .table td,
        .table th {
            vertical-align: middle;
        }

        .table tr.bg-warning {
            background-color: #ffc10740 !important;
        }

        section.content {
            box-shadow: 0px 15px 16.83px 0.17px rgba(0, 0, 0, 0.05);
            border-radius: 14px;

        }

        .uploadExcelFile::-webkit-file-upload-button {
            background: #2222225c;
        }

        .uploadExcelFile {
            font-weight: 700;
            font-size: 13px;
            border-radius: 10px;        }

        .uploadExcelFile::-webkit-file-upload-button {
            color: white;
            display: inline-block;
            background: #212529e0;
            border: none;
            padding: 15px 15px;
            font-weight: 600;
            border-radius: 3px;
            white-space: nowrap;
            cursor: pointer;
            font-size: 13px;
        }

        .btn:hover {
            color: #fff;
            background-color: #222222;
            border-color: #222222;
            box-shadow: 1px 1px 5px #020202;
        }

        .btn {

            width: 20%;
            display: inline-block;
            background: #009edb;
            color: #fff;
            border-bottom: none;
            width: auto;
            padding: 15px 39px;
            border-radius: 5px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            -o-border-radius: 5px;
            -ms-border-radius: 5px;
            margin-top: 25px;
            cursor: pointer;
            border: 0;
            box-shadow: 3px 2px 9px 2px #35333329;
        }
        .table tr th:nth-child(3){
            width:10%;
        }

    </style>

</head>

<body>

    <div class="container">
        <section class="content my-5 bg-white p-4">
            <input type="file" id="excelfile" class="uploadExcelFile" />
            <input type="button" id="viewfile" value="Export To Table" class="btn mt-0 p-2 px-3 ml-5"/>
            <table class="table table-hover mt-5 bg-white mx-auto" id="exceltable">
            </table>
            
            <p><span class="text-danger font-weight-bolder">Note:</span> Fill All Required Fields and Submit</p>
            <button class="btn  mb-4 mx-2 mt-5" id="submit">ADD Bulk SITES<i class="fa fa-spinner fa-spin ml-2 d-none"></i></button>
            <a id="triggerAnchr" href="" class="d-none">trigger</a>
        </section>
    </div>
</body>
<script type="text/javascript" src="main.js"></script>
<script type="text/javascript" src="constants.js"></script>
<script type="text/javascript" src="DynamicTabledata.js"></script>
<script type="text/javascript" src="dropDownClass.js"></script>
-->

</html>
