Monitor-app | Bootstrap
Arquivos
src
├── imgs
│ └── latency-chart.png
├── index.html
├── signin.html
└── signup.htmlArquivos
src
├── imgs
│ └── latency-chart.png
├── index.html
├── signin.html
└── signup.html/codes/package/bootstrap/monitor-app-cdn/src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap demo</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
crossorigin="anonymous"
/>
<style>
.host-events {
font-size: 1.2rem;
}
.create-host-event {
font-size: 1.5rem;
}
</style>
<script src="https://code.iconify.design/3/3.1.0/iconify.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container">
<a class="navbar-brand" href="#">Monitor App</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sair</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h1 class="text-center m-0 p-5">Monitor App</h1>
<div class="row row-cols-1 row-cols-lg-2 g-4">
<div class="col">
<div class="card">
<div class="card-header">
<h5 class="text-center">
Hosts
<div class="float-end create-host-event">
<span class="iconify" data-icon="bx:plus"></span>
</div>
</h5>
</div>
<div class="card-body">
<table class="table">
<thead>
<tr>
<th>Nome</th>
<th>Endereço</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Google DNS</td>
<td>8.8.8.8</td>
<td class="host-events">
<span class="iconify" data-icon="bx:stopwatch"></span>
<span class="iconify ms-4" data-icon="bx:trash"></span>
</td>
</tr>
<tr>
<td>Cloudflare DNS</td>
<td>1.1.1.1</td>
<td class="host-events">
<span class="iconify" data-icon="bx:stopwatch"></span>
<span class="iconify ms-4" data-icon="bx:trash"></span>
</td>
</tr>
<tr>
<td>Google Search</td>
<td>www.google.com</td>
<td class="host-events">
<span class="iconify" data-icon="bx:stopwatch"></span>
<span class="iconify ms-4" data-icon="bx:trash"></span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-header">
<h5 class="text-center">Times</h5>
</div>
<div class="card-body">
<img
src="imgs/latency-chart.png"
alt="Gráfico de Latência"
width="100%"
/>
</div>
</div>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
crossorigin="anonymous"
></script>
</body>
</html>
/codes/package/bootstrap/monitor-app-cdn/src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap demo</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
crossorigin="anonymous"
/>
<style>
.host-events {
font-size: 1.2rem;
}
.create-host-event {
font-size: 1.5rem;
}
</style>
<script src="https://code.iconify.design/3/3.1.0/iconify.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container">
<a class="navbar-brand" href="#">Monitor App</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sair</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h1 class="text-center m-0 p-5">Monitor App</h1>
<div class="row row-cols-1 row-cols-lg-2 g-4">
<div class="col">
<div class="card">
<div class="card-header">
<h5 class="text-center">
Hosts
<div class="float-end create-host-event">
<span class="iconify" data-icon="bx:plus"></span>
</div>
</h5>
</div>
<div class="card-body">
<table class="table">
<thead>
<tr>
<th>Nome</th>
<th>Endereço</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Google DNS</td>
<td>8.8.8.8</td>
<td class="host-events">
<span class="iconify" data-icon="bx:stopwatch"></span>
<span class="iconify ms-4" data-icon="bx:trash"></span>
</td>
</tr>
<tr>
<td>Cloudflare DNS</td>
<td>1.1.1.1</td>
<td class="host-events">
<span class="iconify" data-icon="bx:stopwatch"></span>
<span class="iconify ms-4" data-icon="bx:trash"></span>
</td>
</tr>
<tr>
<td>Google Search</td>
<td>www.google.com</td>
<td class="host-events">
<span class="iconify" data-icon="bx:stopwatch"></span>
<span class="iconify ms-4" data-icon="bx:trash"></span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-header">
<h5 class="text-center">Times</h5>
</div>
<div class="card-body">
<img
src="imgs/latency-chart.png"
alt="Gráfico de Latência"
width="100%"
/>
</div>
</div>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
crossorigin="anonymous"
></script>
</body>
</html>
/codes/package/bootstrap/monitor-app-cdn/src/signup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap demo</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
crossorigin="anonymous"
/>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-light">
<div class="container">
<a class="navbar-brand" href="#">Monitor App</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="./signin.html">Entrar</a>
</li>
<li class="nav-item">
<a
class="nav-link active"
aria-current="page"
href="./signup.html"
>Cadastrar</a
>
</li>
</ul>
</div>
</div>
</nav>
<main>
<div class="container py-5">
<h1 class="text-center mb-5 fw-bold">Cadastro de Usuário</h1>
<div class="row justify-content-center">
<form class="col-6 needs-validation" novalidate>
<div class="mb-3">
<label for="name" class="form-label">Nome</label>
<input
type="text"
class="form-control"
id="name"
name="name"
required
/>
<div class="invalid-feedback">Informe o nome do usuário.</div>
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input
type="email"
class="form-control"
id="email"
name="email"
required
/>
<div class="invalid-feedback">Informe o email do usuário.</div>
</div>
<div class="mb-3">
<label for="password" class="form-label">Senha</label>
<!-- pattern="(?=.*[A-Z])(?=.*[!@#$&*])(?=.*[0-9])(?=.*[a-z]).{8}" -->
<input
type="password"
class="form-control"
id="password"
name="password"
minlength="8"
required
/>
<div class="invalid-feedback">
Informe a senha com 8 caracteres.
</div>
</div>
<div class="mb-3">
<label for="confirmationPassword" class="form-label"
>Confirmar Senha</label
>
<input
type="password"
class="form-control"
id="confirmationPassword"
name="confirmationPassword"
required
/>
<div class="invalid-feedback">
Informe a confirmação de senha.
</div>
</div>
<div class="mb-3">
<input type="submit" class="btn btn-primary" value="Cadastrar" />
</div>
</form>
</div>
</div>
</main>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
crossorigin="anonymous"
></script>
</body>
</html>
/codes/package/bootstrap/monitor-app-cdn/src/signup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap demo</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
crossorigin="anonymous"
/>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-light">
<div class="container">
<a class="navbar-brand" href="#">Monitor App</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="./signin.html">Entrar</a>
</li>
<li class="nav-item">
<a
class="nav-link active"
aria-current="page"
href="./signup.html"
>Cadastrar</a
>
</li>
</ul>
</div>
</div>
</nav>
<main>
<div class="container py-5">
<h1 class="text-center mb-5 fw-bold">Cadastro de Usuário</h1>
<div class="row justify-content-center">
<form class="col-6 needs-validation" novalidate>
<div class="mb-3">
<label for="name" class="form-label">Nome</label>
<input
type="text"
class="form-control"
id="name"
name="name"
required
/>
<div class="invalid-feedback">Informe o nome do usuário.</div>
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input
type="email"
class="form-control"
id="email"
name="email"
required
/>
<div class="invalid-feedback">Informe o email do usuário.</div>
</div>
<div class="mb-3">
<label for="password" class="form-label">Senha</label>
<!-- pattern="(?=.*[A-Z])(?=.*[!@#$&*])(?=.*[0-9])(?=.*[a-z]).{8}" -->
<input
type="password"
class="form-control"
id="password"
name="password"
minlength="8"
required
/>
<div class="invalid-feedback">
Informe a senha com 8 caracteres.
</div>
</div>
<div class="mb-3">
<label for="confirmationPassword" class="form-label"
>Confirmar Senha</label
>
<input
type="password"
class="form-control"
id="confirmationPassword"
name="confirmationPassword"
required
/>
<div class="invalid-feedback">
Informe a confirmação de senha.
</div>
</div>
<div class="mb-3">
<input type="submit" class="btn btn-primary" value="Cadastrar" />
</div>
</form>
</div>
</div>
</main>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
crossorigin="anonymous"
></script>
</body>
</html>
/codes/package/bootstrap/monitor-app-cdn/src/signin.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Entrar</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
crossorigin="anonymous"
/>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-light">
<div class="container">
<a class="navbar-brand" href="#">Monitor App</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a
class="nav-link active"
aria-current="page"
href="./signin.html"
>Entrar</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="./signup.html">Cadastrar</a>
</li>
</ul>
</div>
</div>
</nav>
<main>
<div class="container py-5">
<h1 class="text-center mb-5 fw-bold">Entrar</h1>
<div class="row justify-content-center">
<form class="col-6">
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input
type="email"
class="form-control"
id="email"
name="email"
/>
</div>
<div class="mb-3">
<label for="password" class="form-label">Senha</label>
<input
type="password"
class="form-control"
id="password"
name="password"
/>
</div>
<div class="mb-3">
<input type="submit" class="btn btn-primary" value="Entrar" />
</div>
</form>
</div>
</div>
</main>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
crossorigin="anonymous"
></script>
</body>
</html>
/codes/package/bootstrap/monitor-app-cdn/src/signin.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Entrar</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
crossorigin="anonymous"
/>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-light">
<div class="container">
<a class="navbar-brand" href="#">Monitor App</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a
class="nav-link active"
aria-current="page"
href="./signin.html"
>Entrar</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="./signup.html">Cadastrar</a>
</li>
</ul>
</div>
</div>
</nav>
<main>
<div class="container py-5">
<h1 class="text-center mb-5 fw-bold">Entrar</h1>
<div class="row justify-content-center">
<form class="col-6">
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input
type="email"
class="form-control"
id="email"
name="email"
/>
</div>
<div class="mb-3">
<label for="password" class="form-label">Senha</label>
<input
type="password"
class="form-control"
id="password"
name="password"
/>
</div>
<div class="mb-3">
<input type="submit" class="btn btn-primary" value="Entrar" />
</div>
</form>
</div>
</div>
</main>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
crossorigin="anonymous"
></script>
</body>
</html>