<!DOCTYPE html>
<html class="no-js" lang="en">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>Certificate</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- favicon
        ============================================ -->
    <link rel="shortcut icon" type="image/x-icon" href="../assets/img/favicon.ico" />
    <!-- Google Fonts
        ============================================ -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,700,900" rel="stylesheet" />
    <!-- Bootstrap CSS
        ============================================ -->
    <link rel="stylesheet" href="../assets/css/bootstrap.min.css" />
    <!-- Bootstrap CSS
        ============================================ -->
    <link rel="stylesheet" href="../assets/css/font-awesome.min.css" />
    <!-- owl.carousel CSS
        ============================================ -->
    <link rel="stylesheet" href="../assets/css/owl.carousel.css" />
    <link rel="stylesheet" href="../assets/css/owl.theme.css" />
    <link rel="stylesheet" href="../assets/css/owl.transitions.css" />
    <!-- animate CSS
        ============================================ -->
    <link rel="stylesheet" href="../assets/css/animate.css" />
    <!-- normalize CSS
        ============================================ -->
    <link rel="stylesheet" href="../assets/css/normalize.css" />
    <!-- meanmenu icon CSS
        ============================================ -->
    <link rel="stylesheet" href="../assets/css/meanmenu.min.css" />
    <!-- main CSS
        ============================================ -->
    <link rel="stylesheet" href="../assets/css/main.css" />
    <!-- morrisjs CSS
        ============================================ -->
    <link rel="stylesheet" href="../assets/css/morrisjs/morris.css" />
    <!-- mCustomScrollbar CSS
        ============================================ -->
    <link rel="stylesheet" href="../assets/css/scrollbar/jquery.mCustomScrollbar.min.css" />
    <!-- metisMenu CSS
        ============================================ -->
    <link rel="stylesheet" href="../assets/css/metisMenu/metisMenu.min.css" />
    <link rel="stylesheet" href="../assets/css/metisMenu/metisMenu-vertical.css" />
    <!-- calendar CSS
        ============================================ -->
    <link rel="stylesheet" href="../assets/css/calendar/fullcalendar.min.css" />
    <link rel="stylesheet" href="../assets/css/calendar/fullcalendar.print.min.css" />
    <!-- modals CSS
        ============================================ -->
    <link rel="stylesheet" href="../assets/css/modals.css" />
    <!-- forms CSS
        ============================================ -->
    <link rel="stylesheet" href="../assets/css/form/all-type-forms.css" />
    <!-- style CSS
        ============================================ -->
    <link rel="stylesheet" href="../assets/css/style.css" />
    <!-- responsive CSS
        ============================================ -->
    <link rel="stylesheet" href="../assets/css/responsive.css" />
    <!-- nalika Icon CSS
        ============================================ -->
    <link rel="stylesheet" href="../assets/css/nalika-icon.css" />
    <!-- modernizr JS
        ============================================ -->
    <script src="../assets/js/vendor/modernizr-2.8.3.min.js"></script>

    <style type="text/css">
        .form-group-inner label {
            color: white;
            text-align: right;
        }
        
        .form-group-inner input[type="email"],
        .form-group-inner input[type="password"],
        .form-group-inner input[type="text"],
        .form-group-inner input[type="date"],
        .form-group-inner input[type="number"],
        .form-group-inner textarea,
        .form-select-list .custom-select-value {
            color: white;
        }
        
        .single-product-details h2 {
            color: #e12503;
            font-size: 20px;
        }
        
        .single-product-details .color-quality-pro .email h1 {
            text-transform: lowercase;
        }
    </style>
    <style>
        .sidebar-header img {
            height: 60px;
            width: 80px;
        }
        
        .md-form {
            width: 400px;
        }
    </style>
</head>

<body>
    <!--[if lt IE 8]>
      <p class="browserupgrade">
        You are using an <strong>outdated</strong> browser. Please
        <a href="http://browsehappy.com/">upgrade your browser</a> to improve
        your experience.
      </p>
    <![endif]-->

    <div class="left-sidebar-pro">
        <nav id="sidebar" class="">
            <div class="sidebar-header">
                <a href="#"><img class="main-logo" src="../assets/img/logo/cyborg-white.png" alt="" /></a>
                <strong><img src="../assets/img/logo/cyborg-white.png" alt="" /></strong>
            </div>
            <div class="left-custom-menu-adp-wrap comment-scrollbar">
                <nav class="sidebar-nav left-sidebar-menu-pro">
                    <ul class="metismenu" id="menu1">
                        <li>
                            <a class="has-arrow" href="index.html">
                                <i class="fa big-icon fa-home icon-wrap"></i>
                                <span class="mini-click-non">Home</span>
                            </a>
                            <ul class="submenu-angle" aria-expanded="true">
                                <li>
                                    <a title="Dashboard" href="dashboard.html"><span
                                            class="mini-sub-pro">Dashboard</span></a>
                                </li>
                                <li>
                                    <a title="Certificate" href="#"><span class="mini-sub-pro">Certificate</span></a>
                                </li>
                                <li>
                                    <a title="Form" href="admin_form.html"><span class="mini-sub-pro">Description Form</span></a>
                                  </li>
                                  <li>
                                    <a title="Form" href="event.html"><span class="mini-sub-pro">All events</span></a>
                                  </li>
                            </ul>
                        </li>
                    </ul>
                </nav>
            </div>
        </nav>
    </div>
    <!-- Start Welcome area -->
    <div class="all-content-wrapper">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="logo-pro">
                        <a href="#"><img class="main-logo" src="../assets/img/logo/cyborg-black.png" alt="" /></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="header-advance-area">
            <div class="header-top-area">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <div class="header-top-wraper">
                                <div class="row">
                                    <div class="col-lg-1 col-md-0 col-sm-1 col-xs-12">
                                        <div class="menu-switcher-pro">
                                            <button type="button" id="sidebarCollapse" class="btn bar-button-pro header-drl-controller-btn btn-info navbar-btn">
                                                <i class="fa fa-bars"></i>
                                            </button>
                                        </div>
                                    </div>

                                    <div class="col-lg-5 col-md-5 col-sm-12 col-xs-12" style="float: right">
                                        <div class="header-right-info">
                                            <ul class="nav navbar-nav mai-top-nav header-right-menu">
                                                <li class="nav-item dropdown">
                                                    <a href="contact.html"><i class="fa fa-envelope-o adminpro-chat-pro"
                                                            aria-hidden="true">Contact Us</i><span
                                                            class="indicator-ms"></span></a>
                                                </li>

                                                <li class="nav-item">
                                                    <a href="#" data-toggle="dropdown" role="button" aria-expanded="false" class="nav-link dropdown-toggle">
                                                        <i class="fa fa-user adminpro-user-rounded header-riht-inf" aria-hidden="true"></i>
                                                        <span class="admin-name">More options</span>
                                                        <i class="fa fa-angle-down adminpro-icon adminpro-down-arrow"></i>
                                                    </a>
                                                    <ul role="menu" class="dropdown-header-top author-log dropdown-menu animated zoomIn">
                                                        <li>
                                                            <a href="login.html" id="logout-btn"><span
                                                                    class="fa fa-lock author-log-ic"></span>Log Out</a>
                                                        </li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Mobile Menu start -->
            <div class="mobile-menu-area">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <div class="mobile-menu">
                                <nav id="dropdown">
                                    <ul class="mobile-menu-nav">
                                        <li>
                                            <a data-toggle="collapse" data-target="#Charts" href="#">Home
                                                <span
                                                    class="admin-project-icon adminpro-icon adminpro-down-arrow"></span></a>
                                            <ul class="collapse dropdown-header-top">
                                                <li><a href="dashboard.html">Dashboard </a></li>
                                                <li><a href="#">Certificate</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Mobile Menu end -->

            <div class="breadcome-area">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <div class="breadcome-list">
                                <div class="row">
                                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                                        <div class="breadcomb-wp">
                                            <div class="breadcomb-icon">
                                                <i class="icon nalika-home"></i>
                                            </div>
                                            <div class="breadcomb-ctn">
                                                <h2>Certificate Generation</h2>
                                                <p>
                                                    Upload the template and participant details to generate certificates
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                                        <div class="breadcomb-report">
                                            <button data-toggle="tooltip" data-placement="left" title="Download Report" class="btn">
                                                <i class="icon nalika-download"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- double pro tab start-->
        <div class="single-product-tab-area mg-b-30">
            <!-- double pro tab review Start-->
            <div class="single-pro-review-area">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <div class="review-tab-pro-inner">
                                <ul id="myTab3" class="tab-review-design">
                                    <li class="active">
                                        <a onclick="firstTab()"><i class="icon nalika-edit" aria-hidden="true"></i>
                                            Template Edit</a>
                                    </li>

                                    <li>
                                        <a onclick="secondTab()"><i class="icon nalika-chat"
                                                aria-hidden="true"></i>Contacts</a>
                                    </li>
                                </ul>
                                <!-- Basic Image cropper Start -->
                                <div class="dual-list-box-area mg-tb-15">
                                    <div class="container-fluid" id="admin-edit">
                                        <div class="row">
                                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                                <div class="sparkline10-list shadow-reset">
                                                    <div class="sparkline10-hd">
                                                        <div class="main-sparkline10-hd" id="admin-edit">
                                                            <h1 style="color: green">Image</h1>
                                                        </div>
                                                    </div>
                                                    <div class="sparkline10-graph">
                                                        <div class="basic-login-form-ad">
                                                            <div class="row">
                                                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                                                    <div class="dual-list-box-inner">
                                                                        <div class="row">
                                                                            <div class="col-md-6 col-md-6 col-sm-6 col-xs-12">
                                                                                <div class="image-crop">
                                                                                    <img src="../assets/img/cropper/1.jpg" id="previewing" alt="" />
                                                                                </div>
                                                                            </div>
                                                                            <div class="col-md-6 col-md-6 col-sm-6 col-xs-12">
                                                                                <div class="btn-group images-cropper-pro">
                                                                                    <label title="Upload image file" for="inputImage" class="btn btn-primary img-cropper-cp">
                                                                                        <input type="file"
                                                                                            accept="image/*" name="file"
                                                                                            id="inputImage"
                                                                                            class="hide" />
                                                                                        Upload
                                                                                    </label>
                                                                                    <label title="Preview certificate" for="preview" class="btn btn-primary img-cropper-cp" id="preview-btn">
                                                                                        <input type="button"
                                                                                            class="hide" />
                                                                                        Preview
                                                                                    </label>
                                                                                    <label title="Download image" for="download" id="download-img" class="btn btn-primary">
                                                                                        <input type="button"
                                                                                            class="hide" />Download</label>
                                                                                </div>
                                                                                <h4 class="comon-method" style="color: green">
                                                                                    Modify
                                                                                </h4>
                                                                                <div class="sparkline11-graph">
                                                                                    <div class="input-knob-dial-wrap">
                                                                                        <div class="row">
                                                                                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                                                                                <div class="chosen-select-single mg-b-20">
                                                                                                    <!--<label>Basic Select</label>  -->
                                                                                                    <select class="select2_demo_3 form-control" id="font-style">
                                                                                                        <option
                                                                                                            value="">
                                                                                                            Fonts
                                                                                                        </option>
                                                                                                        <option
                                                                                                            value="TimesNewRoman">
                                                                                                            Times New
                                                                                                            Roman
                                                                                                        </option>
                                                                                                        <option
                                                                                                            value="BookmanOldStyle">
                                                                                                            Bookman Old
                                                                                                            Style
                                                                                                        </option>
                                                                                                        <option
                                                                                                            value="Calibri">
                                                                                                            Calibri
                                                                                                        </option>
                                                                                                        <option
                                                                                                            value="Arial">
                                                                                                            Arial
                                                                                                        </option>
                                                                                                        <option
                                                                                                            value="Gabriola">
                                                                                                            Gabriola
                                                                                                        </option>
                                                                                                    </select>
                                                                                                </div>
                                                                                                <span class="text-danger font-weight-bold" id="fontstyle-alert"></span>
                                                                                                <input type="text" class="form-control" placeholder="Font Size" id="font-size" />
                                                                                                <span class="text-danger font-weight-bold" id="fontsize-alert"></span><br />
                                                                                                <input type="text" class="form-control" placeholder="Color_r" id="color-r" />
                                                                                                <span class="text-danger font-weight-bold" id="rcolor-alert"></span><br />
                                                                                                <input type="text" class="form-control" placeholder="Color_g" id="color-g" />
                                                                                                <span class="text-danger font-weight-bold" id="gcolor-alert"></span><br />
                                                                                                <input type="text" class="form-control" placeholder="Color_b" id="color-b" />
                                                                                                <span class="text-danger font-weight-bold" id="bcolor-alert"></span><br />
                                                                                                <input type="text" class="form-control" placeholder="Coordinates_x" id="x-coordinate" />
                                                                                                <span class="text-danger font-weight-bold" id="xcoordinate-alert"></span><br />
                                                                                                <input type="text" class="form-control" placeholder="Coordinates_y" id="y-coordinate" />
                                                                                                <span class="text-danger font-weight-bold" id="ycoordinate-alert"></span>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="dual-list-box-inner">
                <div class="single-product-tab-area mg-b-30">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                <div class="review-tab-pro-inner">
                                    <ul id="myTab3" class="tab-review-design">
                                        <div id="admin-table" class="container-fluid" style="overflow-x: auto">
                                            <div class="row" style="padding-bottom: 20px;">
                                                <div class="col-lg-8">
                                                    <input class="form-control" type="text" placeholder="Search" aria-label="Search" id="keyword">
                                                </div>
                                                <div class="col-lg-4">
                                                    <button type="button" class="btn btn-primary" id="search-btn">
                                                        Search
                                                    </button>
                                                </div>

                                            </div>
                                            <table>
                                                <tr>
                                                    <td>
                                                <label class="btn btn-primary img-cropper-cp">
                                                    <input type="file" name="filename" class="hide" id="myFile3" />
                                                    Upload
                                                </label>
                                                    <label class="btn btn-primary img-cropper-cp">
                                                        <input type="submit" name="submit" class="hide"
                                                            id="confirmation" />
                                                        Submit
                                                    </label>
                                                    </td>
                                                    <td style="color:#1b2a47">lorem ipsum</td>
                                                     <td>
                                                    <button type="button" class="btn btn-custon-two btn-success" id="download_all">
                                                        <i class="fa adminpro-checked-pro" aria-hidden="true"></i>
                                                        Download all
                                                    </button></td>
                                                     <td >
                                                    <button type="button" class="btn btn-custon-two btn-warning">
                                                        <i class="fa adminpro-warning-danger" aria-hidden="true"></i>
                                                        Mail all
                                                    </button></td>
                                                    </tr>
                                                    </table>
                                                    <!--Table starts -->
                                                    <table role="table" class="table table-bordered center" id="tbval1">
                                                        <thead id="tbval" style="color: #89eb34">
                                                            <tr>
                                                                <th>Name</th>

                                                                <th>Email</th>
                                                                <th>Download</th>
                                                                <th>Mail</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody id="data" style="color: #89eb34">
                                                            <tr style="color: #89eb34">
                                                                <td>John doe</td>
                                                                 <td>john@example.com</td>
                                                                        <td> <button type="button" class="btn btn-custon-two btn-success"><i
                                                                                    class="fa adminpro-checked-pro"
                                                                                    aria-hidden="true"></i>
                                                                                Download
                                                                            </button>
                                                                        </td>
                                                                        <td> <button type="button" class="btn btn-custon-two btn-warning"><i
                                                                                    class="fa  adminpro-warning-danger"
                                                                                    aria-hidden="true"></i>
                                                                                Mail
                                                                            </button>
                                                                        </td>
                                                            </tr>
                                                            <tr style="color: #89eb34">
                                                                <td>John doe</td>
                                                                 <td>john@example.com</td>
                                                                        <td> <button type="button" class="btn btn-custon-two btn-success"><i
                                                                                    class="fa adminpro-checked-pro"
                                                                                    aria-hidden="true"></i>
                                                                                Download
                                                                            </button>
                                                                        </td>
                                                                        <td> <button type="button" class="btn btn-custon-two btn-warning"><i
                                                                                    class="fa  adminpro-warning-danger"
                                                                                    aria-hidden="true"></i>
                                                                                Mail
                                                                            </button>
                                                                        </td>
                                                            </tr>
                                                            <tr style="color: #89eb34">
                                                                <td>John doe</td>
                                                                 <td>john@example.com</td>
                                                                        <td> <button type="button" class="btn btn-custon-two btn-success"><i
                                                                                    class="fa adminpro-checked-pro"
                                                                                    aria-hidden="true"></i>
                                                                                Download
                                                                            </button>
                                                                        </td>
                                                                        <td> <button type="button" class="btn btn-custon-two btn-warning"><i
                                                                                    class="fa  adminpro-warning-danger"
                                                                                    aria-hidden="true"></i>
                                                                                Mail
                                                                            </button>
                                                                        </td>
                                                            </tr>
                                                            <tr style="color: #89eb34">
                                                                <td>John doe</td>
                                                                 <td>john@example.com</td>
                                                                        <td> <button type="button" class="btn btn-custon-two btn-success"><i
                                                                                    class="fa adminpro-checked-pro"
                                                                                    aria-hidden="true"></i>
                                                                                Download
                                                                            </button>
                                                                        </td>
                                                                        <td> <button type="button" class="btn btn-custon-two btn-warning"><i
                                                                                    class="fa  adminpro-warning-danger"
                                                                                    aria-hidden="true"></i>
                                                                                Mail
                                                                            </button>
                                                                        </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                    <!--Table ends -->
                                                </div>
                                            </div>
                                        </div>
                                    </ul>
                                </div>
                            </div>
                            <!-- Basic Image cropper End-->
                        </div>
                    </div>
                </div>
            </div>

            <div class="footer-copyright-area">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="footer-copy-right">
                                <p>
                                    Copyright © 2020 | Designed with
                                    <i class="fa fa-heart" aria-hidden="true"></i> by Team CYBORG | Template from
                                    <a href="https://colorlib.com/wp/templates/" style="color: inherit">Colorlib</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- jquery
        ============================================ -->
    <script src="../assets/js/vendor/jquery-1.12.4.min.js"></script>
    <!-- bootstrap JS
        ============================================ -->
    <script src="../assets/js/bootstrap.min.js"></script>
    <!-- wow JS
        ============================================ -->
    <script src="../assets/js/wow.min.js"></script>
    <!-- price-slider JS
        ============================================ -->
    <script src="../assets/js/jquery-price-slider.js"></script>
    <!-- meanmenu JS
        ============================================ -->
    <script src="../assets/js/jquery.meanmenu.js"></script>
    <!-- owl.carousel JS
        ============================================ -->
    <script src="../assets/js/owl.carousel.min.js"></script>
    <!-- sticky JS
        ============================================ -->
    <script src="../assets/js/jquery.sticky.js"></script>
    <!-- scrollUp JS
        ============================================ -->
    <script src="../assets/js/jquery.scrollUp.min.js"></script>
    <!-- mCustomScrollbar JS
        ============================================ -->
    <script src="../assets/js/scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
    <script src="../assets/js/scrollbar/mCustomScrollbar-active.js"></script>
    <!-- metisMenu JS
        ============================================ -->
    <script src="../assets/js/metisMenu/metisMenu.min.js"></script>
    <script src="../assets/js/metisMenu/metisMenu-active.js"></script>
    <!-- tab JS
        ============================================ -->
    <script src="../assets/js/tab.js"></script>
    <!-- icheck JS
        ============================================ -->
    <script src="../assets/js/icheck/icheck.min.js"></script>
    <script src="../assets/js/icheck/icheck-active.js"></script>
    <!-- plugins JS
        ============================================ -->
    <script src="../assets/js/plugins.js"></script>
    <!-- main JS
        ============================================ -->
    <script src="../assets/js/main.js"></script>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.min.js" integrity="sha512-csNcFYJniKjJxRWRV1R7fvnXrycHP6qDR21mgz1ZP55xY5d+aHLfo9/FcGDQLfn2IfngbAHd8LdfsagcCqgTcQ==" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.5.0/jszip.min.js"></script>

    <script>
        $("#admin-edit").show();
        $("#admin-table").hide();

        function firstTab() {
            $("#admin-edit").show();
            $("#admin-table").hide();
        }

        function secondTab() {
            $("#admin-edit").hide();
            $("#admin-table").show();
        }
    </script>

    <script src="../assets/js/ajax/jszip.min.js"></script>
    <script src="../assets/js/ajax/jszip-utils.js"></script>
    <script src="../assets/js/ajax/check_login.js"></script>
    <script src="../assets/js/ajax/fetch_preview.js"></script>
    <script src="../assets/js/ajax/template_upload.js"></script>
    <script src="../assets/js/ajax/validate.js"></script>
    <script src="../assets/js/ajax/styles_upload.js"></script>
    <script src="../assets/js/ajax/sheet_upload.js"></script>
    <script src="../assets/js/ajax/table_content.js"></script>
    <script src="../assets/js/ajax/logout.js"></script>
</body>

</html>