index.html 7.52 KB
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/select/1.2.7/css/select.dataTables.min.css">
    <link rel="stylesheet" href="css/home.css">

    <title>Accueil</title>
  </head>
  <body>

    <div id="app">

      <nav class="navbar navbar-expand-sm bg-dark navbar-dark justify-content-end" style="padding:15px; margin-bottom:50px;">
          <a class="navbar-brand" href="#"><i class="fa fa-home" style="margin-right:10px;"></i>Gestion des noeuds</a>
          <button class="btn btn-danger ml-auto mr-2"><i class="fa fa-sign-out-alt" style="margin-right:7px;"></i>Déconnexion</button>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
              <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse flex-grow-0" id="navbarSupportedContent">
              <ul class="navbar-nav text-right">
                  <li class="nav-item active">
                      <a class="nav-link" href="#"><i class="fa fa-cog" style="margin-right:7px;"></i>Paramètres</a>
                  </li>
              </ul>
          </div>
      </nav>

      <div class="container" style="padding-bottom: 50px;">

        <h1 style="margin-bottom:50px; margin-top:50px; border-bottom:1px solid #CCC; padding-bottom:20px;">Choix des noeuds</h1>

        <table id="nodes-table" class="table table-striped table-bordered dt-responsive nowrap">
                <thead>
                    <tr>
                        <th>Nom</th>
                        <th>IP</th>
                        <th>Architecture</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Nixon</td>
                        <td>System Architect</td>
                        <td>Edinburgh</td>
                    </tr>
                    <tr>
                        <td>Winters</td>
                        <td>Accountant</td>
                        <td>Tokyo</td>
                    </tr>
                    <tr>
                        <td>Cox</td>
                        <td>Junior Technical Author</td>
                        <td>San Francisco</td>
                    </tr>
                    <tr>
                        <td>Kelly</td>
                        <td>Senior Javascript Developer</td>
                        <td>Edinburgh</td>
                    </tr>
                    <tr>
                        <td>Satou</td>
                        <td>Accountant</td>
                        <td>Tokyo</td>
                    </tr>
                    <tr>
                        <td>Williamson</td>
                        <td>Integration Specialist</td>
                        <td>New York</td>
                    </tr>
                    <tr>
                        <td>Chandler</td>
                        <td>Sales Assistant</td>
                        <td>San Francisco</td>
                    </tr>
                    <tr>
                        <td>Davidson</td>
                        <td>Integration Specialist</td>
                        <td>Tokyo</td>
                    </tr>
                    <tr>
                        <td>Hurst</td>
                        <td>Javascript Developer</td>
                        <td>San Francisco</td>
                    </tr>
                    <tr>
                        <td>Frost</td>
                        <td>Software Engineer</td>
                        <td>Edinburgh</td>
                    </tr>
                    <tr>
                        <td>Gaines</td>
                        <td>Office Manager</td>
                        <td>London</td>
                    </tr>
                    <tr>
                        <td>Flynn</td>
                        <td>Support Lead</td>
                        <td>Edinburgh</td>
                    </tr>
                    <tr>
                        <td>Marshall</td>
                        <td>Regional Director</td>
                        <td>San Francisco</td>
                    </tr>
                    <tr>
                        <td>Kennedy</td>
                        <td>Senior Marketing Designer</td>
                        <td>London</td>
                    </tr>
                    <tr>
                        <td>Fitzpatrick</td>
                        <td>Regional Director</td>
                        <td>London</td>
                    </tr>
                    <tr>
                        <td>Silva</td>
                        <td>Marketing Designer</td>
                        <td>London</td>
                    </tr>
                    <tr>
                        <td>Byrd</td>
                        <td>Chief Financial Officer (CFO)</td>
                        <td>New York</td>
                    </tr>
                    <tr>
                        <td>Little</td>
                        <td>Systems Administrator</td>
                        <td>New York</td>
                    </tr>
                    <tr>
                        <td>Greer</td>
                        <td>Software Engineer</td>
                        <td>London</td>
                    </tr>

                </tbody>
            </table>

            <h1 style="margin-bottom:50px; margin-top:50px; border-bottom:1px solid #CCC; padding-bottom:20px;">Uploader un fichier</h1>

            <div class="panel panel-default">

                <h4>Choix du fichier</h4>

                <div class="upload-drop-zone" id="drop-zone">
                  Clic ou dépose un fichier ici
                </div>

                <div class="progress">
                  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
                </div>

              </div>
            </div>

      </div>

    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" charset="utf-8"></script>
    <script src="https://cdn.datatables.net/select/1.2.7/js/dataTables.select.min.js" charset="utf-8"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js" charset="utf-8"></script>
    <script src="js/home.js"></script>
  </body>
</html>