From 9cd1376cfde190808290ac1894be94d75a89cbc5 Mon Sep 17 00:00:00 2001 From: MET18937 <79221078+MET18937@users.noreply.github.com> Date: Fri, 26 May 2023 21:58:56 +0200 Subject: [PATCH] Frontend "Speisekarte2" Frontend according to figma design "Speisekarte2" --- src/y4f/Pages/SpeisekarteCnDetails.razor | 92 ++++++++++++++++++ src/y4f/Pages/SpeisekarteCnDetails.razor.css | 81 ++++++++++++++++ src/y4f/Pages/SpeisekarteDrDetails.razor | 91 ++++++++++++++++++ src/y4f/Pages/SpeisekarteDrDetails.razor.css | 81 ++++++++++++++++ src/y4f/Pages/SpeisekarteEtcDetails.razor | 93 +++++++++++++++++++ src/y4f/Pages/SpeisekarteEtcDetails.razor.css | 81 ++++++++++++++++ src/y4f/Pages/SpeisekarteJpDetails.razor | 92 ++++++++++++++++++ src/y4f/Pages/SpeisekarteJpDetails.razor.css | 81 ++++++++++++++++ src/y4f/y4f.csproj | 14 +++ 9 files changed, 706 insertions(+) create mode 100644 src/y4f/Pages/SpeisekarteCnDetails.razor create mode 100644 src/y4f/Pages/SpeisekarteCnDetails.razor.css create mode 100644 src/y4f/Pages/SpeisekarteDrDetails.razor create mode 100644 src/y4f/Pages/SpeisekarteDrDetails.razor.css create mode 100644 src/y4f/Pages/SpeisekarteEtcDetails.razor create mode 100644 src/y4f/Pages/SpeisekarteEtcDetails.razor.css create mode 100644 src/y4f/Pages/SpeisekarteJpDetails.razor create mode 100644 src/y4f/Pages/SpeisekarteJpDetails.razor.css diff --git a/src/y4f/Pages/SpeisekarteCnDetails.razor b/src/y4f/Pages/SpeisekarteCnDetails.razor new file mode 100644 index 0000000..242fd18 --- /dev/null +++ b/src/y4f/Pages/SpeisekarteCnDetails.razor @@ -0,0 +1,92 @@ +@page "/SpeisekarteChinesich" + +@inject HttpClient Http + +

Speisekarte Chinesisch

+@* create an container bootstrap 5*@ +
+
+
+ @* Navigation button group, stretch on the width size of the col-8 *@ +
+ + + + +
+ + @* create an bootstrap card for each speise*@ + @*make card round with border*@ +
+
+
Nudeln mit Hühnerfleisch (A, E)
+

Huhn, Gemüse

+
+
+ +
+
+
Knusprige Ente auf Nudeln (A, D)
+

Ente

+
+
+ +
+
+ @*create two divs columns*@ +
+
+
Nudeln mit Tofu (D, F)
+

Tofu

+
+ @*div text center*@ +
+
10,00€
+
+ +
+ + + + + +
+
+ + +
+
+ @* warenkorb anzeige als bootstrap card*@ +
+
+ Warenkorb +
+
+
1 Nudeln mit Hühnerfleisch
+

mit Knoblauchsoße

+

9.10€

+
+
+
1 Coca Cola
+ @*

mit Knoblauchsoße

*@ +

3.10€

+
+
+
+ Zurück + Weiter +
+ + + +
+
+
+ + + + + + +@code { + } \ No newline at end of file diff --git a/src/y4f/Pages/SpeisekarteCnDetails.razor.css b/src/y4f/Pages/SpeisekarteCnDetails.razor.css new file mode 100644 index 0000000..7f58493 --- /dev/null +++ b/src/y4f/Pages/SpeisekarteCnDetails.razor.css @@ -0,0 +1,81 @@ +/**{ + background-color: red; +}*/ + +/*navigation*/ + +button.btn:first-child { + background-color: #8bfaa4; + /*not click able*/ + pointer-events: none; + cursor: default; + border-width: 0px; +} + +button.btn { + /* Verwirrung: Figma-Design: background-color: #c7ffd5; + wurde jetzt aber fuer den Hintergrund verwendet*/ + background-color: #8dffb5; + border-right: 1px solid black; + border-left: 1px solid black; + border-radius:20px; +} + +button.btn:nth-child(2) { + /*border-right: 2px solid black;*/ + border-left-width: 0px; +} + +button.btn:last-child { + border-right-width: 0px; +} + + + +/*menuitems*/ + +.card.mt-3 { + /* background-color: rebeccapurple; */ + border-radius: 30px; + border: 1px solid black; +} + + + +/*warenkorb*/ +.card-header { + font-size:16pt; + text-align: center; + padding-bottom: 15px; + /* background-color: white; */ + border-top-right-radius: 20px; +} + +.card-header { +background-color:transparent; +border-bottom-width:0px; +} + +.card { + border-radius: 32px; + border: 1px solid black; +} + +p.card-text { + margin-left: 20px; +} + +/*buttons*/ +a.btn.btn-primary.mx-2.mt-5 { + background-color: #facca3; + color: black; + border: none; + border-radius: 20px; +} + +a.btn.btn-primary.mx-2.mt-1 { + background-color: #89f9a5; + color: black; + border: none; + border-radius: 20px; +} \ No newline at end of file diff --git a/src/y4f/Pages/SpeisekarteDrDetails.razor b/src/y4f/Pages/SpeisekarteDrDetails.razor new file mode 100644 index 0000000..f032424 --- /dev/null +++ b/src/y4f/Pages/SpeisekarteDrDetails.razor @@ -0,0 +1,91 @@ +@page "/SpeisekarteGetraenke" + +@inject HttpClient Http + +

Speisekarte Getränke

+@* create an container bootstrap 5*@ +
+
+
+ @* Navigation button group, stretch on the width size of the col-8 *@ +
+ + + +
+ + @* create an bootstrap card for each speise*@ + @*make card round with border*@ +
+
+
Nudeln mit Hühnerfleisch (A, E)
+

Huhn, Gemüse

+
+
+ +
+
+
Knusprige Ente auf Nudeln (A, D)
+

Ente

+
+
+ +
+
+ @*create two divs columns*@ +
+
+
Nudeln mit Tofu (D, F)
+

Tofu

+
+ @*div text center*@ +
+
10,00€
+
+ +
+ + + + + +
+
+ + +
+
+ @* warenkorb anzeige als bootstrap card*@ +
+
+ Warenkorb +
+
+
1 Nudeln mit Hühnerfleisch
+

mit Knoblauchsoße

+

9.10€

+
+
+
1 Coca Cola
+ @*

mit Knoblauchsoße

*@ +

3.10€

+
+
+
+ Zurück + Weiter +
+ + + +
+
+
+ + + + + + +@code { + } \ No newline at end of file diff --git a/src/y4f/Pages/SpeisekarteDrDetails.razor.css b/src/y4f/Pages/SpeisekarteDrDetails.razor.css new file mode 100644 index 0000000..aacb8f7 --- /dev/null +++ b/src/y4f/Pages/SpeisekarteDrDetails.razor.css @@ -0,0 +1,81 @@ +/**{ + background-color: red; +}*/ + +/*navigation*/ + +button.btn:first-child { + background-color: #8bfaa4; + /*not click able*/ + pointer-events: none; + cursor: default; + border-width: 0px; +} + +button.btn { + /* Verwirrung: Figma-Design: background-color: #c7ffd5; + wurde jetzt aber fuer den Hintergrund verwendet*/ + background-color: #8dffb5; + border-right: 1px solid black; + border-left: 1px solid black; + border-radius: 20px; +} + + button.btn:nth-child(2) { + /*border-right: 2px solid black;*/ + border-left-width: 0px; + } + + button.btn:last-child { + border-right-width: 0px; + } + + + +/*menuitems*/ + +.card.mt-3 { + /* background-color: rebeccapurple; */ + border-radius: 30px; + border: 1px solid black; +} + + + +/*warenkorb*/ +.card-header { + font-size: 16pt; + text-align: center; + padding-bottom: 15px; + /* background-color: white; */ + border-top-right-radius: 20px; +} + +.card-header { + background-color: transparent; + border-bottom-width: 0px; +} + +.card { + border-radius: 32px; + border: 1px solid black; +} + +p.card-text { + margin-left: 20px; +} + +/*buttons*/ +a.btn.btn-primary.mx-2.mt-5 { + background-color: #facca3; + color: black; + border: none; + border-radius: 20px; +} + +a.btn.btn-primary.mx-2.mt-1 { + background-color: #89f9a5; + color: black; + border: none; + border-radius: 20px; +} diff --git a/src/y4f/Pages/SpeisekarteEtcDetails.razor b/src/y4f/Pages/SpeisekarteEtcDetails.razor new file mode 100644 index 0000000..8ac6ffa --- /dev/null +++ b/src/y4f/Pages/SpeisekarteEtcDetails.razor @@ -0,0 +1,93 @@ +@page "/SpeisekarteSonstiges" + +@inject HttpClient Http + +

Speisekarte Sonstiges

+@* create an container bootstrap 5*@ +
+
+
+ @* Navigation button group, stretch on the width size of the col-8 *@ +
+ + + + + +
+ + @* create an bootstrap card for each speise*@ + @*make card round with border*@ +
+
+
Nudeln mit Hühnerfleisch (A, E)
+

Huhn, Gemüse

+
+
+ +
+
+
Knusprige Ente auf Nudeln (A, D)
+

Ente

+
+
+ +
+
+ @*create two divs columns*@ +
+
+
Nudeln mit Tofu (D, F)
+

Tofu

+
+ @*div text center*@ +
+
10,00€
+
+ +
+ + + + + +
+
+ + +
+
+ @* warenkorb anzeige als bootstrap card*@ +
+
+ Warenkorb +
+
+
1 Nudeln mit Hühnerfleisch
+

mit Knoblauchsoße

+

9.10€

+
+
+
1 Coca Cola
+ @*

mit Knoblauchsoße

*@ +

3.10€

+
+
+
+ Zurück + Weiter +
+ + + +
+
+
+ + + + + + +@code { + } \ No newline at end of file diff --git a/src/y4f/Pages/SpeisekarteEtcDetails.razor.css b/src/y4f/Pages/SpeisekarteEtcDetails.razor.css new file mode 100644 index 0000000..c3ced9e --- /dev/null +++ b/src/y4f/Pages/SpeisekarteEtcDetails.razor.css @@ -0,0 +1,81 @@ +/**{ + background-color: red; +}*/ + +/*navigation*/ + +button.btn:first-child { + background-color: #8bfaa4; + /*not click able*/ + pointer-events: none; + cursor: default; + border-width: 0px; +} + +button.btn { + /* Verwirrung: Figma-Design: background-color: #c7ffd5; + wurde jetzt aber fuer den Hintergrund verwendet*/ + background-color: #8dffb5; + border-right: 1px solid black; + border-left: 1px solid black; + border-radius: 20px; +} + + button.btn:nth-child(2) { + /*border-right: 2px solid black;*/ + border-left-width: 0px; + } + + button.btn:last-child { + border-right-width: 0px; + } + + + +/*menuitems*/ + +.card.mt-3 { + /* background-color: rebeccapurple; */ + border-radius: 30px; + border: 1px solid black; +} + + + +/*warenkorb*/ +.card-header { + font-size: 16pt; + text-align: center; + padding-bottom: 15px; + /* background-color: white; */ + border-top-right-radius: 20px; +} + +.card-header { + background-color: transparent; + border-bottom-width: 0px; +} + +.card { + border-radius: 32px; + border: 1px solid black; +} + +p.card-text { + margin-left: 20px; +} + +/*buttons*/ +a.btn.btn-primary.mx-2.mt-5 { + background-color: #facca3; + color: black; + border: none; + border-radius: 20px; +} + +a.btn.btn-primary.mx-2.mt-1 { + background-color: #89f9a5; + color: black; + border: none; + border-radius: 20px; +} diff --git a/src/y4f/Pages/SpeisekarteJpDetails.razor b/src/y4f/Pages/SpeisekarteJpDetails.razor new file mode 100644 index 0000000..b0e8c38 --- /dev/null +++ b/src/y4f/Pages/SpeisekarteJpDetails.razor @@ -0,0 +1,92 @@ +@page "/SpeisekarteJapanisch" + +@inject HttpClient Http + +

Speisekarte Japanisch

+@* create an container bootstrap 5*@ +
+
+
+ @* Navigation button group, stretch on the width size of the col-8 *@ +
+ + + + +
+ + @* create an bootstrap card for each speise*@ + @*make card round with border*@ +
+
+
Nudeln mit Hühnerfleisch (A, E)
+

Huhn, Gemüse

+
+
+ +
+
+
Knusprige Ente auf Nudeln (A, D)
+

Ente

+
+
+ +
+
+ @*create two divs columns*@ +
+
+
Nudeln mit Tofu (D, F)
+

Tofu

+
+ @*div text center*@ +
+
10,00€
+
+ +
+ + + + + +
+
+ + +
+
+ @* warenkorb anzeige als bootstrap card*@ +
+
+ Warenkorb +
+
+
1 Nudeln mit Hühnerfleisch
+

mit Knoblauchsoße

+

9.10€

+
+
+
1 Coca Cola
+ @*

mit Knoblauchsoße

*@ +

3.10€

+
+
+
+ Zurück + Weiter +
+ + + +
+
+
+ + + + + + +@code { + } \ No newline at end of file diff --git a/src/y4f/Pages/SpeisekarteJpDetails.razor.css b/src/y4f/Pages/SpeisekarteJpDetails.razor.css new file mode 100644 index 0000000..c3ced9e --- /dev/null +++ b/src/y4f/Pages/SpeisekarteJpDetails.razor.css @@ -0,0 +1,81 @@ +/**{ + background-color: red; +}*/ + +/*navigation*/ + +button.btn:first-child { + background-color: #8bfaa4; + /*not click able*/ + pointer-events: none; + cursor: default; + border-width: 0px; +} + +button.btn { + /* Verwirrung: Figma-Design: background-color: #c7ffd5; + wurde jetzt aber fuer den Hintergrund verwendet*/ + background-color: #8dffb5; + border-right: 1px solid black; + border-left: 1px solid black; + border-radius: 20px; +} + + button.btn:nth-child(2) { + /*border-right: 2px solid black;*/ + border-left-width: 0px; + } + + button.btn:last-child { + border-right-width: 0px; + } + + + +/*menuitems*/ + +.card.mt-3 { + /* background-color: rebeccapurple; */ + border-radius: 30px; + border: 1px solid black; +} + + + +/*warenkorb*/ +.card-header { + font-size: 16pt; + text-align: center; + padding-bottom: 15px; + /* background-color: white; */ + border-top-right-radius: 20px; +} + +.card-header { + background-color: transparent; + border-bottom-width: 0px; +} + +.card { + border-radius: 32px; + border: 1px solid black; +} + +p.card-text { + margin-left: 20px; +} + +/*buttons*/ +a.btn.btn-primary.mx-2.mt-5 { + background-color: #facca3; + color: black; + border: none; + border-radius: 20px; +} + +a.btn.btn-primary.mx-2.mt-1 { + background-color: #89f9a5; + color: black; + border: none; + border-radius: 20px; +} diff --git a/src/y4f/y4f.csproj b/src/y4f/y4f.csproj index 9bb7029..d980726 100644 --- a/src/y4f/y4f.csproj +++ b/src/y4f/y4f.csproj @@ -7,6 +7,20 @@ service-worker-assets.js + + + + + + + + + + + + + +