-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
151 lines (133 loc) · 7.73 KB
/
index.html
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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="Author" content="Dominic Burfeind">
<meta name="Date Created" content="30.10.2024">
<link rel="stylesheet" href="resources/css/style.css">
<link rel="shortcut icon" href="resources/img/Logo.png" type="image/x-icon">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<title>Rezepttoren - Das Tor für alle Rezepte</title>
</head>
<body>
<!--Nav-->
<nav class="navbar nav-custom navbar-expand-lg bg-light navbar-light">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="resources/img/Logo.png" width="120px" alt=""></a>
<button class="navbar-toggler nav-toggle-custom" 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 .navbar-nav-scroll me-auto mb-2 mb-lg-0 icons-menu-custom justify-content-center">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
</svg>
Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample" href="#">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0 1 11.186 0Z" />
</svg>
Lesezeichen
</a>
</li>
</ul>
<form id="navForm" class="d-flex justify-content-center">
<input class="form-control me-1" type="search" placeholder="Rezept suchen" aria-label="Search" class="search-bar" id="navSearch">
<button class="btn btn-search-custom" type="submit">
<a href="#rezepteSection">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
</svg>
</a>
</button>
</form>
</div>
</div>
</nav>
<!-- Bookmark -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Bookmarks</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div>
</div>
</div>
</div>
<!-- Header -->
<header>
<div class="d-flex header-container justify-content-center">
<img class="img-fluid" src="resources/img/vegan (1).jpg"
alt="Ein leckeres Gericht bestehend aus Früchte & Gemüse.">
<div class="d-flex header-text align-items-center flex-column">
<h1>Welche delikatessen möchtest du heute auf deinem Teller haben?</h1>
<form id="submitRecipe" class="d-flex header-search-container">
<input class="form-control me-3 search-bar" type="search" placeholder="Rezept suchen" aria-label="Search" id="headerSearch">
<button class="btn btn-success header-btn" type="submit" >
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
</svg>
</button>
</form>
</div>
</div>
</header>
<!--Rezepte-->
<section id="rezepteSection" class="container-fluid bg-light text-dark rezepte">
<h2 class="col-5 text-center" id="searchName">Rezepte</h2>
<p class="text-center text-success" id="displayText">Finde jetzt eine Mahlzeit passend zur stimmung</p>
<div id="rezeptContainer" class="rezepte-container container-fluid d-flex flex-wrap justify-content-center">
</div>
</section>
<!--BMI Rechner-->
<section class="move-in py-5" id="Bmi-Rechner">
<div class="container bmi-rechner-container bg-none p-4 rounded shadow-sm">
<h2 class="text-center mb-4">BMI Rechner</h2>
<div class="rechner-container row g-3">
<div class="input-container col-md-6">
<label for="größe" class="form-label">Größe in cm</label>
<input type="number" min="0" max="250" id="Größe" name="größe" class="form-control" placeholder="z.B. 170" required>
</div>
<div class="input-container col-md-6">
<label for="gewicht" class="form-label">Gewicht in Kg</label>
<input type="number" min="0" max="200" id="Gewicht" name="gewicht" class="form-control" placeholder="z.B. 70" required>
</div>
<div class="input-container col-12">
<label for="bmi" class="form-label">BMI</label>
<input type="text" id="Bmi" name="bmi" class="form-control" readonly>
</div>
<div class="input-container col-12 text-center">
<input type="button" value="Berechnen" name="berechnen" id="Berechnen" class="btn btn-outline-success">
</div>
<div class="col-12">
<p id="Bmi-kategorie" class="text-center mt-3"></p>
</div>
</div>
<div class="text-container mt-4">
<h3 class="text-center">Wie wird der BMI berechnet?</h3>
<p class="text-center">BMI = Gewicht (kg) / (Größe in Metern)²</p>
</div>
</div>
</section>
<!--Scripts-->
<script type="module" src="resources/js/eventListeners.js"></script>
<script type="module" src="resources/js/domElements.js"></script>
<script type="module" src="resources/js/api.js"></script>
<script type="module" src="resources/js/bookmark.js"></script>
<script type="module" src="resources/js/recipes.js"></script>
<script type="module" src="resources/js/search.js"></script>
<script type="module" src="resources/js/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
</body>
</html>