kalorien_rechner/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

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kalorien Rechner</title>
    <link rel="icon" type="image/x-icon" href="/style/avocado.png">
    <link rel="stylesheet" type="text/css" href="/style/style.css">
</head>
<body>
<nav class="medium_box">
    <ul class="hor_spacing">
        <li class="hor_spacing_item">
            <a class="small_box color_inverse_on_hover" href="/login">Login</a>
        </li>
        <li class="hor_spacing_item">
            <a class="small_box tertiary_color_style" href="/kalorien_rechner">Kalorien-rechner</a>
        </li>
        <li class="hor_spacing_item">
            <a class="small_box color_inverse_on_hover" href="/kalorien_zaehler">Kalorien-zähler</a>
        </li>
        <li class="hor_spacing_item">
            <a class="small_box color_inverse_on_hover" href="/rezepte">Rezepte</a>
        </li>
        <li class="hor_spacing_item">
            <a class="small_box color_inverse_on_hover" href="/workouts">Workouts</a>
        </li>
    </ul>
</nav>

<main class="big_box">
    <h1>Kalorien-rechner</h1>
    <form class="hor_spacing" method="post" action="./ausgabe.php">
        <div class="medium_box hor_spacing_item">
            <h2>Geschlecht:</h2>
            <div class="flexbox special_radio">
                <input type="radio" name="geschlecht" id="maennlich" value="maennlich" required>
                <label class="small_box" style="flex: 1" for="maennlich">Männlich</label>
                <input type="radio" name="geschlecht" id="weiblich" value="weiblich" required>
                <label class="small_box" style="flex: 1" for="weiblich">Weiblich</label>
            </div>
        </div>
        <div class="flexbox hor_spacing_item">
            <div class="medium_box" style="flex: 1; display: block">
                <h2>Alter in Jahre:</h2>
                <input class="small_box color_inverse_on_hover" type="number" name="alter" min="0" max="200" step="1" required><label for="alter"> Jahre
            </div>
            <div class="medium_box" style="flex: 1; display: block">
                <h2>Gewicht in Kilogramm:</h2>
                <input class="small_box color_inverse_on_hover" type="number" name="gewicht" min="0" max="999" step="1" required><label for="gewicht"> kg
            </div>
        </div>
        <div class="flexbox hor_spacing_item">
            <div class="medium_box" style="flex: 1; display: block">
                <h2>Größe in Centimeter:</h2>
                <input class="small_box color_inverse_on_hover" type="number" name="groesse" min="0" max="300" step="1" required> cm
            </div>
            <div class="medium_box" style="flex: 1; display: block">
                <h2>Körperfettanteil in Prozent: <a class="small_box color_inverse_on_hover" href="./kfa_info.html" target="_blank">&#9432;</a></h2>
                <input class="small_box color_inverse_on_hover" type="number" name="koerperfettanteil" min="0" max="100" step="1" required> %
            </div>
        </div>
        <div class="flexbox hor_spacing_item">
            <div class="medium_box" style="flex: 1; display: block">
                <h2>Sport pro Woche:</h2>
                <select class="small_box color_inverse_on_hover" name="sport" required>
                    <option value="" selected>--Wie oft machst du Sport?--</option>
                    <option value="0">Kein Sport</option>
                    <option value="1">1x</option>
                    <option value="2">2x</option>
                    <option value="3">3x</option>
                    <option value="4">4x</option>
                    <option value="5">5x</option>
                    <option value="6">6x</option>
                    <option value="7">7x oder öfter</option>
                </select>
            </div>
            <div class="medium_box" style="flex: 1; display: block">
                <h2>Alltagsaktivität (ohne Sport):</h2>
                <select class="small_box color_inverse_on_hover" name="aktivitaet" required>
                    <option value="" selected>--Wie aktiv ist dein Alltag?--</option>
                    <option value="1.2">Wenig aktiv (nur sitzend)</option>
                    <option value="1.4">Etwas aktiv (meist sitzend)</option>
                    <option value="1.6">Aktiv (viel laufend)</option>
                    <option value="1.8">Sehr aktiv (harte körperliche Arbeit)</option>
                </select>
            </div>
        </div>
        <div class="medium_box hor_spacing_item">
            <h2>Ziel:</h2>
            <div class="flexbox special_radio">
                <input type="radio" name="ziel" id="abnehmen" value="abnehmen" required>
                <label class="small_box" style="flex: 1; display: block" for="abnehmen">Abnehmen</label>
                <input type="radio" name="ziel" id="gewicht_halten" value="gewicht_halten" required>
                <label class="small_box" style="flex: 1; display: block" for="gewicht_halten">Gewicht halten</label>
                <input type="radio" name="ziel" id="zunehmen" value="zunehmen" required>
                <label class="small_box" style="flex: 1; display: block" for="zunehmen">Zunehmen</label>
            </div>
        </div>
        <button class="medium_box hor_spacing_item color_inverse_on_hover" style="width: 100%" type="submit" name="rechnen"><h2 style="margin: 0">RECHNEN</div></button>
    </form>
</main>
</body>
</html>