mirror of
https://github.com/yummy4friends/y4f.git
synced 2024-12-28 16:08:20 +01:00
Frontend "Speisekarte2"
Frontend according to figma design "Speisekarte2"
This commit is contained in:
MET18937
parent
70541c1b4d
commit
9cd1376cfd
92
src/y4f/Pages/SpeisekarteCnDetails.razor
Normal file
92
src/y4f/Pages/SpeisekarteCnDetails.razor
Normal 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 {
|
||||||
|
}
|
||||||
81
src/y4f/Pages/SpeisekarteCnDetails.razor.css
Normal file
81
src/y4f/Pages/SpeisekarteCnDetails.razor.css
Normal 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;
|
||||||
|
}
|
||||||
91
src/y4f/Pages/SpeisekarteDrDetails.razor
Normal file
91
src/y4f/Pages/SpeisekarteDrDetails.razor
Normal 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 {
|
||||||
|
}
|
||||||
81
src/y4f/Pages/SpeisekarteDrDetails.razor.css
Normal file
81
src/y4f/Pages/SpeisekarteDrDetails.razor.css
Normal 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;
|
||||||
|
}
|
||||||
93
src/y4f/Pages/SpeisekarteEtcDetails.razor
Normal file
93
src/y4f/Pages/SpeisekarteEtcDetails.razor
Normal 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 {
|
||||||
|
}
|
||||||
81
src/y4f/Pages/SpeisekarteEtcDetails.razor.css
Normal file
81
src/y4f/Pages/SpeisekarteEtcDetails.razor.css
Normal 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;
|
||||||
|
}
|
||||||
92
src/y4f/Pages/SpeisekarteJpDetails.razor
Normal file
92
src/y4f/Pages/SpeisekarteJpDetails.razor
Normal 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 {
|
||||||
|
}
|
||||||
81
src/y4f/Pages/SpeisekarteJpDetails.razor.css
Normal file
81
src/y4f/Pages/SpeisekarteJpDetails.razor.css
Normal 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;
|
||||||
|
}
|
||||||
@ -7,6 +7,20 @@
|
|||||||
<ServiceWorkerAssetsManifest>service-worker-assets.js</ServiceWorkerAssetsManifest>
|
<ServiceWorkerAssetsManifest>service-worker-assets.js</ServiceWorkerAssetsManifest>
|
||||||
</PropertyGroup>
|
</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>
|
<ItemGroup>
|
||||||
<None Include="wwwroot\css\Site.css" />
|
<None Include="wwwroot\css\Site.css" />
|
||||||
</ItemGroup>
|
</ItemGroup>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user