Warehouse/index.html at main · MarcosSoftwareEngineering/Warehouse · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html lang="pt-BR"> <!-- Declares the document language as Brazilian Portuguese -->
<head>
    <meta charset="UTF-8"> <!-- Ensures proper character encoding -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Makes layout responsive on mobile devices -->
    <title>Gestor de Obra - Almoxarifado</title> <!-- Page title shown in browser tab -->
    <link rel="stylesheet" href="style.css"> <!-- External CSS file for styling -->
</head>
<body>

    <!-- Page Header -->
    <header>
        <h3>🏗️ Controle de Almoxarifado</h3> <!-- Main header text -->
    </header>

    <!-- Main container with two sections: form and list -->
    <div class="main-container">

        <!-- Sidebar Form Section -->
        <aside class="form-section">
            <div class="card">
                <h3>Novo Material</h3> <!-- Section title -->

                <!-- Input for material name -->
                <div class="input-group">
                    <label>Nome do Material</label>
                    <input type="text" id="inputName" placeholder="Ex: Cimento CP II">
                </div>

                <!-- Inputs for initial quantity and minimum threshold -->
                <div class="row">
                    <div class="col">
                        <label>Qtd Inicial</label>
                        <input type="number" id="inputQty" value="0" min="0">
                    </div>
                    <div class="col">
                        <label>Mínimo (Alerta)</label>
                        <input type="number" id="inputMin" value="10" min="1">
                    </div>
                </div>

                <!-- Dropdown for unit selection -->
                <div class="input-group">
                    <label>Unidade</label>
                    <select id="inputUnit">
                        <option value="un">Unidade (un)</option>
                        <option value="kg">Quilos (kg)</option>
                        <option value="sc">Sacos (sc)</option>
                        <option value="m">Metros (m)</option>
                        <option value="m2">Metros (m²)</option>
                        <option value="m3">Metros (m³)</option>
                        <option value="cx">Caixa (cx)</option>
                    </select>
                </div>

                <!-- Button to add new material -->
                <!-- Inline onclick calls addItem() function defined in index.js -->
                <button id="btnAdd" onclick="addItem()">+ Cadastrar</button>
            </div>
        </aside>

        <!-- Stock List Section -->
        <main class="list-section">
            <div class="list-header">
                <h3>Itens em Estoque</h3> <!-- Section title -->
                <small id="totalItems">0 itens cadastrados</small> <!-- Dynamic counter updated via JS -->
            </div>

            <!-- List of stock items populated dynamically -->
            <ul id="stockList"></ul>
        </main>

    </div>

    <!-- Modal for stock movement (entry/exit) -->
    <div id="modalOverlay" class="modal-overlay">
        <div class="modal-content">
            <h3>Movimentar Estoque</h3> <!-- Modal title -->
            <p id="modalTitle" class="modal-info">...</p> <!-- Displays selected item info -->

            <!-- Input for quantity to move -->
            <input type="number" id="modalQty" placeholder="Quantidade" class="big-input">

            <!-- Buttons for stock movement -->
            <div class="modal-buttons">
                <button class="btn-in" onclick="updateStock('in')">⬇️ Entrada</button>
                <button class="btn-out" onclick="updateStock('out')">⬆️ Saída</button>
            </div>

            <!-- Cancel button to close modal -->
            <button class="btn-close" onclick="closeModal()">Cancelar</button>
        </div>
    </div>

    <!-- Footer status bar -->
    <footer id="footerBar" class="status-bar">
        Carregando sistema... <!-- Initial status message -->
    </footer>

    <!-- External JavaScript file controlling logic -->
    <script src="./index.js"></script>
</body>
</html>