source: src/main/resources/templates/addIngredient.html

main
Last change on this file was d659b83, checked in by Marko_Gjorgjievski_201136 <marko.gjorgjievski@…>, 2 months ago

Commiting the whole project

  • Property mode set to 100644
File size: 2.2 KB
RevLine 
[d659b83]1<!DOCTYPE html>
2<html xmlns:th="http://www.thymeleaf.org">
3<head>
4 <meta charset="UTF-8">
5 <title>Add Ingredient</title>
6
7 <!-- Add Bootstrap CSS link -->
8 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
9</head>
10<body>
11<div th:replace="appBar"></div>
12
13<div class="container mt-4"> <!-- Add Bootstrap container class for spacing -->
14
15 <h2>Add Ingredient</h2>
16
17 <form th:action="@{/ingredients/addIngredient}" method="post" class="needs-validation" novalidate>
18 <div class="form-group">
19 <label for="name">Name:</label>
20 <input type="text" class="form-control" id="name" name="name" required>
21 <div class="invalid-feedback">Please enter a name.</div>
22 </div>
23
24 <div class="form-group">
25 <label for="calories">Calories per 100g:</label>
26 <input type="number" class="form-control" id="calories" name="calories" required>
27 <div class="invalid-feedback">Please enter calories.</div>
28 </div>
29
30 <div class="form-group">
31 <label for="protein">Protein per 100g:</label>
32 <input type="number" class="form-control" id="protein" name="protein" required>
33 <div class="invalid-feedback">Please enter protein.</div>
34 </div>
35
36 <div class="form-group">
37 <label for="carbs">Carbs per 100g:</label>
38 <input type="number" class="form-control" id="carbs" name="carbs" required>
39 <div class="invalid-feedback">Please enter carbs.</div>
40 </div>
41
42 <div class="form-group">
43 <label for="fats">Fats per 100g:</label>
44 <input type="number" class="form-control" id="fats" name="fats" required>
45 <div class="invalid-feedback">Please enter fats.</div>
46 </div>
47
48 <button type="submit" class="btn btn-primary">Add Ingredient</button>
49 </form>
50
51</div>
52
53<!-- Add Bootstrap JS and Popper.js for certain Bootstrap features -->
54<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
55<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
56<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
57
58</body>
59</html>
Note: See TracBrowser for help on using the repository browser.