diff --git a/src/Praktikum/Prak5/Baecker.php b/src/Praktikum/Prak5/Baecker.php
index d1a0399675391668a51d1d1428f3b04e151b1fdd..49a3711655c8afc4abee7aae667434e8d0d6e220 100644
--- a/src/Praktikum/Prak5/Baecker.php
+++ b/src/Praktikum/Prak5/Baecker.php
@@ -18,6 +18,7 @@
// to do: change name 'baecker' throughout this file
require_once './Page.php';
require_once './DB_Classes/OrderedArticle.php';
+require_once './navbar.php';
/**
* This is a template for top level classes, which represent
* a complete web page and which are called directly by the user.
@@ -91,12 +92,18 @@ class Baecker extends Page
protected function generateView():void
{
$data = $this->getViewData(); //NOSONAR ignore unused $data
- $this->generatePageHeader('Bäcker',"",true); //to do: set optional parameters
+ $this->generatePageHeader('Bäcker',"",true, "./CSS/Beacker.css"); //to do: set optional parameters
+ echo "\n<header class='flex-container flex-direction-column justify-content-center'>\n";
+ buildNavbar(null, true);
+ echo "<img src='./img/Header.png' alt='Header Image'>\n";
+ echo "</header>\n";
+
echo <<< HTML
- \n<section id="baecker">
- <h2>Bestellung</h2>
+ <main>
+ <section id="baecker">
+ <h2>Bestellungen</h2>
- <form id="formBaecker" accept-charset="UTF-8" action="#" method="post">\n
+ <form class="flex-container flex-direction-row justify-content-center wrap" id="formBaecker" accept-charset="UTF-8" action="#" method="post">\n
HTML;
$noOrders = true;
@@ -152,7 +159,8 @@ HTML;
echo <<< HTML
</form>
- </section>\n
+ </section>
+ </main>\n
HTML;
$this->generatePageFooter();
diff --git a/src/Praktikum/Prak5/Bestellung.php b/src/Praktikum/Prak5/Bestellung.php
index 90834e57c442bc644fedea315bb5629efe5a3a98..cd7bbce83ec65f25c888bf356f68d3e78a5dc141 100644
--- a/src/Praktikum/Prak5/Bestellung.php
+++ b/src/Praktikum/Prak5/Bestellung.php
@@ -18,7 +18,7 @@ declare(strict_types=1);
require_once './Page.php';
require_once './DB_Classes/Article.php';
-
+require_once './navbar.php';
/**
* This is a template for top level classes, which represent
* a complete web page and which are called directly by the user.
@@ -88,8 +88,12 @@ class Bestellung extends Page
protected function generateView(): void
{
$data = $this->getViewData(); //NOSONAR ignore unused $data
- $this->generatePageHeader('Bestellung', './JS/BestellScript.js', false);
+ $this->generatePageHeader('Bestellung', './JS/BestellScript.js', false, './CSS/Bestellung.css');
+ echo "\n<header class='flex-container flex-direction-column justify-content-center'>\n";
+ buildNavbar(null, true);
+ echo "<img src='./img/Header.png' alt='Header Image'>\n";
+ echo "</header>\n";
echo <<< HTML
<main class="bestellungMain">
<h1 id="bestellungTitle">Bestellung</h1>
@@ -119,9 +123,9 @@ HTML;
<script>getElements();</script>
</section>
- <section class="flex-container flex-direction-column nowrap justify-content-center" id="warenkorbSection">
+ <section id="warenkorbSection">
<h2>Warenkorb</h2>
- <form class="flex-item" accept-charset="UTF-8" action="#" method="post">
+ <form class="flex-container flex-direction-column nowrap justify-content-center" accept-charset="UTF-8" action="#" method="post">
<label for="warenkorb"></label>
<select class="flex-item" id="warenkorb" multiple name="Pizza[]">
</select>
@@ -130,8 +134,8 @@ HTML;
<label for="address"></label>
<input class="flex-item" id="address" name="Adresse" placeholder="Ihre Adresse" type="text" required><br>
- <input type="button" value="Alles Löschen" onclick="removeAll();">
<input type="button" value="Auswahl Löschen" onclick="removeItem();">
+ <input type="button" value="Alles Löschen" onclick="removeAll();">
<input id="submitButton" type="submit" name="save" value="Bestellen" onclick="selectOrder();">
</form>
</section>
diff --git a/src/Praktikum/Prak5/CSS/Beacker.css b/src/Praktikum/Prak5/CSS/Beacker.css
new file mode 100644
index 0000000000000000000000000000000000000000..138fc47359881330f4579ffa83ac34c348c946c3
--- /dev/null
+++ b/src/Praktikum/Prak5/CSS/Beacker.css
@@ -0,0 +1,40 @@
+main {
+ border-radius: 1.5em;
+ padding: 0 2em 1.5em 2em;
+ background: #eee;
+ box-shadow: 0 0 4em black;
+ margin: 0 2em;
+}
+
+h2 {
+ padding-top: 0.5em;
+ margin: 0;
+}
+
+fieldset {
+ border-radius: 1.5em;
+ background: #eee;
+ padding: 1em;
+ margin: 2em;
+ border: 3px solid #888;
+ width: fit-content;
+}
+
+fieldset legend {
+ border-radius: 1.5em;
+ font-size: 1.1em;
+ margin: 0;
+ padding: 0.5em;
+ border: 3px solid #888;
+}
+
+fieldset label input {
+ margin: 0.3em;
+ font-size: 1em;
+}
+
+fieldset label input[type='radio'] {
+ accent-color: black;
+ scale: 1.25;
+}
+
diff --git a/src/Praktikum/Prak5/CSS/Bestellung.css b/src/Praktikum/Prak5/CSS/Bestellung.css
new file mode 100644
index 0000000000000000000000000000000000000000..5e47e2fec51dbac0031229940f17ebb8626498eb
--- /dev/null
+++ b/src/Praktikum/Prak5/CSS/Bestellung.css
@@ -0,0 +1,80 @@
+.bestellungMain {
+ border-radius: 1.5em;
+ padding: 0 2em 1.5em 2em;
+ background: #eee;
+ box-shadow: 0 0 4em black;
+ margin: 0 2em;
+}
+
+.bestellungMain h1 {
+ padding-top: 0.5em;
+ margin: 0;
+}
+
+.speisekarteTitle {
+ text-align: center;
+}
+
+.pizzaContainer {
+ width: 100%;
+ align-content: center;
+}
+
+.pizzaLabel {
+ width: 15%;
+ min-width: 160px;
+ margin: 1em;
+ border-radius: 0.5em;
+ border: 1px solid rgba(0, 0, 0, 0);
+}
+
+.pizzaLabel:hover {
+ background: #bbb;
+ border: 1px solid #888;
+}
+
+.pizzaInfo {
+ text-align: center;
+ font-size: 1em;
+}
+
+.pizzaImage {
+ width: 100%;
+ height: auto;
+}
+
+#warenkorbSection {
+ background: #bbb;
+ border-radius: 1em;
+ padding: 0.5em 0.5em;
+ margin: 2em auto 0 auto;
+ width: 40%;
+ text-align: center;
+ border: 1px solid #888;
+}
+
+#warenkorbSection h2 {
+ margin: 0 0 0.2em 0;
+}
+
+#warenkorbSection #sum {
+ font-size: 1.25em;
+ margin: 0.25em;
+}
+
+#warenkorbSection #address{
+ width: calc(100% - 0.2em);
+ padding: 0;
+ margin: 0 auto 0.5em auto;
+ font-size: 1em;
+}
+
+#warenkorbSection #form {
+ padding: 0;
+}
+#warenkorbSection #warenkorb{
+ width: 100%;
+}
+
+
+
diff --git a/src/Praktikum/Prak5/CSS/Fahrer.css b/src/Praktikum/Prak5/CSS/Fahrer.css
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/Praktikum/Prak5/CSS/Kunde.css b/src/Praktikum/Prak5/CSS/Kunde.css
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/Praktikum/Prak5/CSS/file.css b/src/Praktikum/Prak5/CSS/file.css
deleted file mode 100644
index 9d33407f5c89e79f54c3f8cc504e712493a16004..0000000000000000000000000000000000000000
--- a/src/Praktikum/Prak5/CSS/file.css
+++ /dev/null
@@ -1,204 +0,0 @@
-body {
- margin: 0;
- background: url('../img/Pattern/bg_pattern.png'), #17181b;
- background-size: 20vw;
- font-family: Helvetica, serif;
-}
-
-
-
-
-
-.flex-container {
- display: flex;
-}
-
-.nowrap {
- flex-wrap: nowrap;
-}
-
-.wrap {
- flex-wrap: wrap;
-}
-
-.wrap-reverse {
- flex-wrap: wrap-reverse;
-}
-
-.flex-direction-row {
- flex-direction: row;
-}
-
-.flex-direction-column {
- flex-direction: column;
-}
-
-.justify-content-start {
- justify-content: flex-start;
-}
-
-.justify-content-center {
- justify-content: center;
-}
-
-.justify-content-end {
- justify-content: flex-end;
-}
-
-.justify-content-between {
- justify-content: space-between;
-}
-
-.align-items-start {
- align-items: flex-start;
-}
-
-.align-items-center {
- align-items: center;
-}
-
-.align-items-end {
- align-items: flex-end;
-}
-.spacer {
- margin-top: 192px;
-}
-
-.flex-item {
- flex-grow: inherit;
- flex-shrink: inherit;
-}
-
-#bestellungSection {
-
- border-radius: 1.5em;
- padding: 0.5em 2.5em 2em 2.5em;
- background: #eee;
- box-shadow: 0 0 64px black;
- margin-left: 4em;
- margin-right: 4em;
-}
-
-#bestellungSection #bestellungTitle{
-
-}
-
-
-
-
-#speisekarteSection h2 {
- width: 100%;
- text-align: center;
-}
-
-#speisekarteSection label {
- padding: 0.5em;
- margin: 0.5em 1em;
- text-align: center;
- border-radius: 0.5em;
- width: 15%;
- min-width: 8%;
- border: 1px solid rgba(0, 0, 0, 0);
-}
-
-#speisekarteSection label:hover {
- background: #bbb;
- border: 1px solid #888;
-}
-
-.pizzaImage {
- width: 100%;;
- transition-duration: 1.5s;
- transition-timing-function: ease-in-out;
-}
-
-.pizzaImage:hover {
- transform: rotate(360deg);
-}
-
-
-
-
-
-#warenkorbSection {
- background: #bbb;
- border-radius: 1em;
- padding: 1em 0.5em;
- margin: 0 auto;
- width: 320px;
- text-align: center;
- border: 1px solid #888;
-}
-
-#warenkorbSection h2 {
- margin-top: 0.3em;
-}
-
-#warenkorbSection #sum {
- font-size: 1.25em;
- margin: 1em;
-}
-
-#warenkorbSection #address{
- width: calc(280px - 0.6em);
- height: 1.5em;
- padding: 0.25em;
- margin: 0 auto 0.5em auto;
- font-size: 1em;
-}
-
-#warenkorbSection #buttons{
- width: 280px;
- display: flex;
- justify-content: space-between;
- margin: auto;
-}
-
-#warenkorbSection #warenkorb{
- width: 280px;
-}
-
-
-
-
-
-
-
-
-
-.container {
- width: 1200px;
- margin: 0 auto;
-}
-
-
-@media only screen and (max-width: 1600px) {
- .container {
- width: 800px;
- }
-}
-
-@media only screen and (max-width: 1200px) {
- .container {
- width: 640px;
- }
-}
-
-@media only screen and (max-width: 800px) {
- .container {
- width: calc(100% - 2em);
- }
-
- #bestellungSection {
- padding: 1em;
- }
-
- #speisekarteSection {
- flex-direction: column;
- }
-
- #speisekarteSection label {
- width: 30%;
- margin: 0 auto;
- }
-}
\ No newline at end of file
diff --git a/src/Praktikum/Prak5/CSS/global.css b/src/Praktikum/Prak5/CSS/global.css
new file mode 100644
index 0000000000000000000000000000000000000000..a5417f09294064cc0b388c5137a52761f276b165
--- /dev/null
+++ b/src/Praktikum/Prak5/CSS/global.css
@@ -0,0 +1,134 @@
+body {
+ margin: 0;
+ background: url('../img/Pattern/bg_pattern.png'), #17181b;
+ background-size: 20vw;
+ font-family: Helvetica, serif;
+}
+
+
+nav {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: row;
+ justify-content: center;
+ background: #eee;
+ position: sticky;
+ top: 0;
+ width: 100%;
+ padding: 0.5em 0;
+ text-align: center;
+}
+
+nav a{
+ color: black;
+ text-decoration: none;
+ margin: 0 1vw;
+ padding: 0.25em;
+ border: 2px solid rgba(0,0,0,0);
+ font-size: 1.5em;
+ font-weight: bold;
+}
+
+nav .active {
+ border: 2px solid black;
+}
+
+nav a:hover{
+ border: 2px solid black;
+}
+
+@media only screen and (max-width: 780px) {
+ nav {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+ }
+
+ header {
+ margin-bottom: 1em;
+ }
+
+ header img {
+ display: none;
+ }
+ a {
+ flex-grow: inherit;
+ flex-shrink: inherit;
+ margin: 0;
+ }
+
+}
+
+
+@media only screen and (max-width: 480px) {
+ #warenkorbSection {
+ width: fit-content;
+ }
+}
+
+
+
+.flex-container {
+ display: flex;
+}
+
+.nowrap {
+ flex-wrap: nowrap;
+}
+
+.wrap {
+ flex-wrap: wrap;
+}
+
+.wrap-reverse {
+ flex-wrap: wrap-reverse;
+}
+
+.flex-direction-row {
+ flex-direction: row;
+}
+
+.flex-direction-column {
+ flex-direction: column;
+}
+
+.justify-content-start {
+ justify-content: flex-start;
+}
+
+.justify-content-center {
+ justify-content: center;
+}
+
+.justify-content-end {
+ justify-content: flex-end;
+}
+
+.justify-content-between {
+ justify-content: space-between;
+}
+
+.align-items-start {
+ align-items: flex-start;
+}
+
+.align-items-center {
+ align-items: center;
+}
+
+.align-items-end {
+ align-items: flex-end;
+}
+.spacer {
+ margin-top: 192px;
+}
+
+.flex-item {
+ flex-grow: inherit;
+ flex-shrink: inherit;
+}
+
+.not-flex-item {
+ flex-grow: initial;
+ flex-shrink: initial;
+}
\ No newline at end of file
diff --git a/src/Praktikum/Prak5/CSS/test.css b/src/Praktikum/Prak5/CSS/test.css
deleted file mode 100644
index 1def5f892f6abd8528fbf659132bad9be81324ee..0000000000000000000000000000000000000000
--- a/src/Praktikum/Prak5/CSS/test.css
+++ /dev/null
@@ -1,159 +0,0 @@
-body {
- margin: 0;
- background: url('../img/Pattern/bg_pattern.png'), #17181b;
- background-size: 20vw;
- font-family: Helvetica, serif;
-}
-
-
-.bestellungMain {
- border-radius: 1.5em;
- padding: 0 2em 1.5em 2em;
- background: #eee;
- box-shadow: 0 0 64px black;
- margin: 2em;
-}
-
-.bestellungMain h1 {
- padding-top: 0.5em;
- margin: 0;
-}
-
-.speisekarteTitle {
- text-align: center;
-}
-
-.pizzaContainer {
- width: 100%;
- align-content: center;
-}
-
-.pizzaLabel {
- width: 15%;
- min-width: 8%;
- margin: 1em;
- border-radius: 0.5em;
- border: 1px solid rgba(0, 0, 0, 0);
-}
-
-.pizzaLabel:hover {
- background: #bbb;
- border: 1px solid #888;
-}
-
-.pizzaInfo {
- text-align: center;
-}
-
-.pizzaImage {
- width: 100%;
- height: auto;
-}
-
-#warenkorbSection {
- background: #bbb;
- border-radius: 1em;
- padding: 0.5em 0.5em;
- margin: 2em auto 0 auto;
- width: fit-content;
- text-align: center;
- border: 1px solid #888;
-}
-
-#warenkorbSection h2 {
- margin: 0 0 0.2em 0;
-}
-
-#warenkorbSection #sum {
- font-size: 1.25em;
- margin: 1em;
-}
-
-#warenkorbSection #address{
- width: calc(100% - 0.2em);
- padding: 0;
- height: fit-content;
- margin: 0 auto 0.5em auto;
- font-size: 1em;
-}
-
-#warenkorbSection #buttons{
- width: fit-content;
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between;
- margin: auto;
-}
-
-#warenkorbSection #form {
- padding: 0;
-}
-#warenkorbSection #warenkorb{
- width: 100%;
-}
-
-
-.flex-container {
- display: flex;
-}
-
-.nowrap {
- flex-wrap: nowrap;
-}
-
-.wrap {
- flex-wrap: wrap;
-}
-
-.wrap-reverse {
- flex-wrap: wrap-reverse;
-}
-
-.flex-direction-row {
- flex-direction: row;
-}
-
-.flex-direction-column {
- flex-direction: column;
-}
-
-.justify-content-start {
- justify-content: flex-start;
-}
-
-.justify-content-center {
- justify-content: center;
-}
-
-.justify-content-end {
- justify-content: flex-end;
-}
-
-.justify-content-between {
- justify-content: space-between;
-}
-
-.align-items-start {
- align-items: flex-start;
-}
-
-.align-items-center {
- align-items: center;
-}
-
-.align-items-end {
- align-items: flex-end;
-}
-.spacer {
- margin-top: 192px;
-}
-
-.flex-item {
- flex-grow: inherit;
- flex-shrink: inherit;
-}
-
-.not-flex-item {
- flex-grow: initial;
- flex-shrink: initial;
-}
\ No newline at end of file
diff --git a/src/Praktikum/Prak5/Page.php b/src/Praktikum/Prak5/Page.php
index 997944313fad479d1cd521c58165866d42bf7f84..cbfccc35bddd5d118cc91df28147e788fc4c91b3 100644
--- a/src/Praktikum/Prak5/Page.php
+++ b/src/Praktikum/Prak5/Page.php
@@ -84,7 +84,7 @@ abstract class Page
* @param bool $autoreload true: auto reload the page every 5 s, false: not auto reload
* @return void
*/
- protected function generatePageHeader(string $title = "", string $jsFile = "", bool $autoreload = false):void
+ protected function generatePageHeader(string $title = "", string $jsFile = "", bool $autoreload = false, string $stylesheet =""):void
{
$title = htmlspecialchars($title);
header("Content-type: text/html; charset=UTF-8");
@@ -101,7 +101,15 @@ abstract class Page
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{$title}</title>
- <link rel="stylesheet" href="./CSS/test.css">
+HTML;
+ $globalCSS = "./CSS/global.css";
+ if (is_file($globalCSS)) {
+ echo "\n\t<link rel='stylesheet' href='{$globalCSS}'>\n";
+ }
+ if (is_file($stylesheet)) {
+ echo "\n\t<link rel='stylesheet' href='{$stylesheet}'>\n";
+ }
+ echo <<< HTML
</head>
<body>
HTML;
diff --git a/src/Praktikum/Prak5/img/Header.png b/src/Praktikum/Prak5/img/Header.png
new file mode 100644
index 0000000000000000000000000000000000000000..f400083f0599db3011a901dc70089f3cc267a6f5
Binary files /dev/null and b/src/Praktikum/Prak5/img/Header.png differ
diff --git a/src/Praktikum/Prak5/index.php b/src/Praktikum/Prak5/index.php
index 57b31d5bbace9a7afb582c8399058eb641176c7b..3ce5da57ac1cff0f9957bb8ea6b4d664ed49e590 100644
--- a/src/Praktikum/Prak5/index.php
+++ b/src/Praktikum/Prak5/index.php
@@ -64,7 +64,7 @@ class Index extends Page
*/
protected function getViewData():array
{
- return array("Bestellung" => "./Bestellung.php", "Baecker" => "./Baecker.php",
+ return array("Bestellung" => "./Bestellung.php", "Bäcker" => "./Baecker.php",
"Kunde" => "./Kunde.php", "Fahrer" => "./Fahrer.php", "Kundenstatus" => "./Kundenstatus.php");
}
diff --git a/src/Praktikum/Prak5/navbar.php b/src/Praktikum/Prak5/navbar.php
index 77d6f4d240708a3addfdffcab057c97ca94472ed..3175ae49b976df00b3a1bc3146e735096700186b 100644
--- a/src/Praktikum/Prak5/navbar.php
+++ b/src/Praktikum/Prak5/navbar.php
@@ -3,15 +3,23 @@
-function buildNavbar (array $urlArray = [], bool $target_blank = false) : void {
+function buildNavbar (array $urlArray = null, bool $target_blank = false) : void {
if (empty($urlArray)) {
- $urlArray = array("Bestellung" => "./Bestellung.php", "Baecker" => "./Baecker.php",
+ $urlArray = array("Bestellung" => "./Bestellung.php", "Bäcker" => "./Baecker.php",
"Kunde" => "./Kunde.php", "Fahrer" => "./Fahrer.php", "Kundenstatus" => "./Kundenstatus.php");
}
echo "\n<nav>\n";
- $target = $target_blank ? "target='_blank'" : "";
+ $target = $target_blank ? 'target="_blank"' : "";
foreach ($urlArray as $key => $value) {
- echo "\t<a href='$value'" . $target . ">$key</a>\n";
+ $activePath = htmlspecialchars( "./" . basename(parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH)));
+
+ if ($value == $activePath) {
+ echo "\t<a class='active' href='$value' " . $target . ">$key</a>\n";
+ }
+ else {
+ echo "\t<a href='$value' " . $target . ">$key</a>\n";
+ }
+
}
echo "</nav>\n";
}