Scribd
Upload
5 views3 pages

Item Proje to HTML

The document is an HTML template for a project items form titled 'Itens do Projeto'. It includes a navigation bar with links to different sections, a form for entering project item details, and a table for displaying registered items. The page is styled using Bootstrap and includes JavaScript functionality for interactivity.

Uploaded by

Duke doidao
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
5 views3 pages

Item Proje to HTML

The document is an HTML template for a project items form titled 'Itens do Projeto'. It includes a navigation bar with links to different sections, a form for entering project item details, and a table for displaying registered items. The page is styled using Bootstrap and includes JavaScript functionality for interactivity.

Uploaded by

Duke doidao
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

<!

DOCTYPE html>
<html lang="pt-BR" data-bs-theme="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Itens do Projeto</title>
<link

href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
crossorigin="anonymous"
/>
<style>
body {
padding-top: 56px;
}
.card-custom {
background-color: var(--bs-card-bg, #2b3035);
border: 1px solid var(--bs-border-color, #495057);
padding: 1.5rem;
margin-bottom: 2rem;
border-radius: 0.375rem;
}
.btn-preencher {
background-color: #6c757d;
border-color: #6c757d;
color: white;
}
.btn-preencher:hover {
background-color: #5a6268;
border-color: #545b62;
}
.toast {
min-width: 300px;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">BuildUP</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav text-decoration-none gap-4">
<li class="nav-item">
<a class="nav-link" href="clientes.html">Clientes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="materiais.html">Materiais</a>
</li>
<li class="nav-item">
<a class="nav-link" href="projetos.html">Projetos</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="itemprojeto.html">Itens do
Projeto</a>
</li>
</ul>
</div>
</div>
</nav>

<div class="toast-container position-fixed top-0 end-0 p-3" style="z-index:


1100"></div>

<div class="container mt-5">


<div class="card-custom shadow-sm">
<h1 class="mb-4 fs-4">Formulário de Itens do Projeto</h1>
<div class="row g-3 align-items-end">
<div class="col-md-2">
<label for="inputId" class="form-label">ID</label>
<input type="text" class="form-control" id="inputId" disabled
readonly />
</div>
<div class="col-md-4">
<label for="inputProjeto" class="form-label">Projeto</label>
<select id="inputProjeto" class="form-select"></select>
</div>
<div class="col-md-4">
<label for="inputMaterial" class="form-label">Material</label>
<select id="inputMaterial" class="form-select"></select>
</div>
<div class="col-md-2">
<label for="inputQuantidade" class="form-label">Quantidade</label>
<input type="number" class="form-control" id="inputQuantidade"
min="1" />
</div>
</div>
<div class="row mt-3">
<div class="col-12 d-flex justify-content-end">
<button type="button" class="btn btn-secondary me-2"
id="btnLimpar">Limpar</button>
<button type="button" class="btn btn-primary me-2"
id="btnAdicionar">Adicionar</button>
<button type="button" class="btn btn-success" id="btnAtualizar"
disabled>Atualizar</button>
</div>
</div>
</div>

<div class="card-custom shadow-sm mt-4">


<h2 class="mb-3 fs-5">Itens Cadastrados</h2>
<div class="table-responsive">
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Projeto</th>
<th>Material</th>
<th>Quantidade</th>
<th>Valor Total</th> <th class="text-end">Ações</th>
</tr>
</thead>
<tbody id="tabelaItensProjetoBody"></tbody>
</table>
</div>
</div>
</div>

<script

src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
crossorigin="anonymous"
></script>
<script src="itemprojeto.js"></script>
</body>
</html>

You might also like