Frontend "Speisekarte2"

Frontend according to figma design "Speisekarte2"
This commit is contained in:
MET18937 2023-05-26 21:58:56 +02:00
parent 70541c1b4d
commit 9cd1376cfd
9 changed files with 706 additions and 0 deletions

View File

@ -0,0 +1,92 @@
@page "/SpeisekarteChinesich"
@inject HttpClient Http
<h1>Speisekarte Chinesisch</h1>
@* create an container bootstrap 5*@
<div class="container">
<div class="row">
<div class="col-8">
@* Navigation button group, stretch on the width size of the col-8 *@
<div class="btn-group d-flex" role="group">
<button type="button" class="btn">Chinesisch</button>
<button type="button" class="btn">Nudel</button>
<button type="button" class="btn">Reis</button>
<button type="button" class="btn">Nachspeise</button>
</div>
@* create an bootstrap card for each speise*@
@*make card round with border*@
<div class="card mt-3">
<div class="card-body">
<h5 class="card-title">Nudeln mit Hühnerfleisch (A, E)</h5>
<p class="card-text">Huhn, Gemüse</p>
</div>
</div>
<div class="card mt-3">
<div class="card-body">
<h5 class="card-title">Knusprige Ente auf Nudeln (A, D)</h5>
<p class="card-text">Ente</p>
</div>
</div>
<div class="card mt-3 ">
<div class="card-body">
@*create two divs columns*@
<div class="row">
<div class="col-8">
<h5 class="card-title">Nudeln mit Tofu (D, F)</h5>
<p class="card-text">Tofu</p>
</div>
@*div text center*@
<div class="col-4 d-flex justify-content-center align-items-center">
<div style="font-size:15pt;">10,00€</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-4">
@* warenkorb anzeige als bootstrap card*@
<div class="card">
<div class="card-header">
Warenkorb
</div>
<div class="card-body">
<h5 class="card-title" style="font-size:10pt; margin-bottom:0px;">1 Nudeln mit Hühnerfleisch</h5>
<p class="card-text" style="font-size:8pt;margin-bottom:0px;">mit Knoblauchsoße</p>
<p class="card-text" id="preis" style="text-align:right; "><span style="background-color:#c7ffd5; border-radius:20px; font-size:10pt; padding:5px">9.10€</span></p>
</div>
<div class="card-body">
<h5 class="card-title" style="font-size:10pt; margin-bottom:0px;">1 Coca Cola</h5>
@*<p class="card-text" style="font-size:8pt;margin-bottom:0px;">mit Knoblauchsoße</p>*@
<p class="card-text" id="preis" style="text-align:right; "><span style="background-color:#c7ffd5; border-radius:20px; font-size:10pt; padding:5px">3.10€</span></p>
</div>
</div>
<div class="d-flex flex-column">
<a href="#" class="btn btn-primary mx-2 mt-5">Zurück</a>
<a href="#" class="btn btn-primary mx-2 mt-1">Weiter</a>
</div>
</div>
</div>
</div>
@code {
}

View File

@ -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;
}

View File

@ -0,0 +1,91 @@
@page "/SpeisekarteGetraenke"
@inject HttpClient Http
<h1>Speisekarte Getränke</h1>
@* create an container bootstrap 5*@
<div class="container">
<div class="row">
<div class="col-8">
@* Navigation button group, stretch on the width size of the col-8 *@
<div class="btn-group d-flex" role="group">
<button type="button" class="btn">Getränke</button>
<button type="button" class="btn">Alkoholfreie Getränke</button>
<button type="button" class="btn">Bier</button>
</div>
@* create an bootstrap card for each speise*@
@*make card round with border*@
<div class="card mt-3">
<div class="card-body">
<h5 class="card-title">Nudeln mit Hühnerfleisch (A, E)</h5>
<p class="card-text">Huhn, Gemüse</p>
</div>
</div>
<div class="card mt-3">
<div class="card-body">
<h5 class="card-title">Knusprige Ente auf Nudeln (A, D)</h5>
<p class="card-text">Ente</p>
</div>
</div>
<div class="card mt-3 ">
<div class="card-body">
@*create two divs columns*@
<div class="row">
<div class="col-8">
<h5 class="card-title">Nudeln mit Tofu (D, F)</h5>
<p class="card-text">Tofu</p>
</div>
@*div text center*@
<div class="col-4 d-flex justify-content-center align-items-center">
<div style="font-size:15pt;">10,00€</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-4">
@* warenkorb anzeige als bootstrap card*@
<div class="card">
<div class="card-header">
Warenkorb
</div>
<div class="card-body">
<h5 class="card-title" style="font-size:10pt; margin-bottom:0px;">1 Nudeln mit Hühnerfleisch</h5>
<p class="card-text" style="font-size:8pt;margin-bottom:0px;">mit Knoblauchsoße</p>
<p class="card-text" id="preis" style="text-align:right; "><span style="background-color:#c7ffd5; border-radius:20px; font-size:10pt; padding:5px">9.10€</span></p>
</div>
<div class="card-body">
<h5 class="card-title" style="font-size:10pt; margin-bottom:0px;">1 Coca Cola</h5>
@*<p class="card-text" style="font-size:8pt;margin-bottom:0px;">mit Knoblauchsoße</p>*@
<p class="card-text" id="preis" style="text-align:right; "><span style="background-color:#c7ffd5; border-radius:20px; font-size:10pt; padding:5px">3.10€</span></p>
</div>
</div>
<div class="d-flex flex-column">
<a href="#" class="btn btn-primary mx-2 mt-5">Zurück</a>
<a href="#" class="btn btn-primary mx-2 mt-1">Weiter</a>
</div>
</div>
</div>
</div>
@code {
}

View File

@ -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;
}

View File

@ -0,0 +1,93 @@
@page "/SpeisekarteSonstiges"
@inject HttpClient Http
<h1>Speisekarte Sonstiges</h1>
@* create an container bootstrap 5*@
<div class="container">
<div class="row">
<div class="col-8">
@* Navigation button group, stretch on the width size of the col-8 *@
<div class="btn-group d-flex" role="group">
<button type="button" class="btn">Sonstiges</button>
<button type="button" class="btn">Schnitzel</button>
<button type="button" class="btn">Pommes</button>
<button type="button" class="btn">Bowl</button>
<button type="button" class="btn">Vorspeisen</button>
</div>
@* create an bootstrap card for each speise*@
@*make card round with border*@
<div class="card mt-3">
<div class="card-body">
<h5 class="card-title">Nudeln mit Hühnerfleisch (A, E)</h5>
<p class="card-text">Huhn, Gemüse</p>
</div>
</div>
<div class="card mt-3">
<div class="card-body">
<h5 class="card-title">Knusprige Ente auf Nudeln (A, D)</h5>
<p class="card-text">Ente</p>
</div>
</div>
<div class="card mt-3 ">
<div class="card-body">
@*create two divs columns*@
<div class="row">
<div class="col-8">
<h5 class="card-title">Nudeln mit Tofu (D, F)</h5>
<p class="card-text">Tofu</p>
</div>
@*div text center*@
<div class="col-4 d-flex justify-content-center align-items-center">
<div style="font-size:15pt;">10,00€</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-4">
@* warenkorb anzeige als bootstrap card*@
<div class="card">
<div class="card-header">
Warenkorb
</div>
<div class="card-body">
<h5 class="card-title" style="font-size:10pt; margin-bottom:0px;">1 Nudeln mit Hühnerfleisch</h5>
<p class="card-text" style="font-size:8pt;margin-bottom:0px;">mit Knoblauchsoße</p>
<p class="card-text" id="preis" style="text-align:right; "><span style="background-color:#c7ffd5; border-radius:20px; font-size:10pt; padding:5px">9.10€</span></p>
</div>
<div class="card-body">
<h5 class="card-title" style="font-size:10pt; margin-bottom:0px;">1 Coca Cola</h5>
@*<p class="card-text" style="font-size:8pt;margin-bottom:0px;">mit Knoblauchsoße</p>*@
<p class="card-text" id="preis" style="text-align:right; "><span style="background-color:#c7ffd5; border-radius:20px; font-size:10pt; padding:5px">3.10€</span></p>
</div>
</div>
<div class="d-flex flex-column">
<a href="#" class="btn btn-primary mx-2 mt-5">Zurück</a>
<a href="#" class="btn btn-primary mx-2 mt-1">Weiter</a>
</div>
</div>
</div>
</div>
@code {
}

View File

@ -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;
}

View File

@ -0,0 +1,92 @@
@page "/SpeisekarteJapanisch"
@inject HttpClient Http
<h1>Speisekarte Japanisch</h1>
@* create an container bootstrap 5*@
<div class="container">
<div class="row">
<div class="col-8">
@* Navigation button group, stretch on the width size of the col-8 *@
<div class="btn-group d-flex" role="group">
<button type="button" class="btn">Japanisch</button>
<button type="button" class="btn">SushiMaki</button>
<button type="button" class="btn">Bento</button>
<button type="button" class="btn">Nachspeise</button>
</div>
@* create an bootstrap card for each speise*@
@*make card round with border*@
<div class="card mt-3">
<div class="card-body">
<h5 class="card-title">Nudeln mit Hühnerfleisch (A, E)</h5>
<p class="card-text">Huhn, Gemüse</p>
</div>
</div>
<div class="card mt-3">
<div class="card-body">
<h5 class="card-title">Knusprige Ente auf Nudeln (A, D)</h5>
<p class="card-text">Ente</p>
</div>
</div>
<div class="card mt-3 ">
<div class="card-body">
@*create two divs columns*@
<div class="row">
<div class="col-8">
<h5 class="card-title">Nudeln mit Tofu (D, F)</h5>
<p class="card-text">Tofu</p>
</div>
@*div text center*@
<div class="col-4 d-flex justify-content-center align-items-center">
<div style="font-size:15pt;">10,00€</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-4">
@* warenkorb anzeige als bootstrap card*@
<div class="card">
<div class="card-header">
Warenkorb
</div>
<div class="card-body">
<h5 class="card-title" style="font-size:10pt; margin-bottom:0px;">1 Nudeln mit Hühnerfleisch</h5>
<p class="card-text" style="font-size:8pt;margin-bottom:0px;">mit Knoblauchsoße</p>
<p class="card-text" id="preis" style="text-align:right; "><span style="background-color:#c7ffd5; border-radius:20px; font-size:10pt; padding:5px">9.10€</span></p>
</div>
<div class="card-body">
<h5 class="card-title" style="font-size:10pt; margin-bottom:0px;">1 Coca Cola</h5>
@*<p class="card-text" style="font-size:8pt;margin-bottom:0px;">mit Knoblauchsoße</p>*@
<p class="card-text" id="preis" style="text-align:right; "><span style="background-color:#c7ffd5; border-radius:20px; font-size:10pt; padding:5px">3.10€</span></p>
</div>
</div>
<div class="d-flex flex-column">
<a href="#" class="btn btn-primary mx-2 mt-5">Zurück</a>
<a href="#" class="btn btn-primary mx-2 mt-1">Weiter</a>
</div>
</div>
</div>
</div>
@code {
}

View File

@ -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;
}

View File

@ -7,6 +7,20 @@
<ServiceWorkerAssetsManifest>service-worker-assets.js</ServiceWorkerAssetsManifest>
</PropertyGroup>
<ItemGroup>
<None Remove="Pages\SpeisekarteCnDetails.razor.css" />
<None Remove="Pages\SpeisekarteDrDetails.razor.css" />
<None Remove="Pages\SpeisekarteEtcDetails.razor.css" />
<None Remove="Pages\SpeisekarteJpDetails.razor.css" />
</ItemGroup>
<ItemGroup>
<Content Include="Pages\SpeisekarteCnDetails.razor.css" />
<Content Include="Pages\SpeisekarteDrDetails.razor.css" />
<Content Include="Pages\SpeisekarteEtcDetails.razor.css" />
<Content Include="Pages\SpeisekarteJpDetails.razor.css" />
</ItemGroup>
<ItemGroup>
<None Include="wwwroot\css\Site.css" />
</ItemGroup>