From fb0397694ae405fe6ddea329892cb4ad4b23b1f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20L=C3=BCbe=C3=9F?= <simon.luebess@gmail.com>
Date: Wed, 20 Sep 2023 12:20:26 +0200
Subject: [PATCH] =?UTF-8?q?Fixibus=20den=20=C3=9Cberhang=20und=20Men=C3=BC?=
 =?UTF-8?q?=20funktioniert?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 KIKunstKirstenKlöckner/Pages/AiArt.razor      | 133 +++++++++---------
 .../Shared/MainLayout.razor                   |  40 +++---
 2 files changed, 85 insertions(+), 88 deletions(-)

diff --git a/KIKunstKirstenKlöckner/Pages/AiArt.razor b/KIKunstKirstenKlöckner/Pages/AiArt.razor
index a6341d3..d8a0025 100644
--- a/KIKunstKirstenKlöckner/Pages/AiArt.razor
+++ b/KIKunstKirstenKlöckner/Pages/AiArt.razor
@@ -10,46 +10,48 @@
 @inject DialogService DialogService
 
 <PageTitle>AiArt</PageTitle>
- <div class="hero_area">
 
-<RadzenStack Orientation="Orientation.Vertical" AlignItems="AlignItems.Center">
+<section class="about_section layout_padding">
+<div class="container">
+
+    <RadzenStack Orientation="Orientation.Vertical" AlignItems="AlignItems.Center">
         <h1>Wunschbilder von KI nur für dich</h1>
-     <RadzenText TextStyle="TextStyle.H2">Nenne uns deinen Wunsch:</RadzenText>
-    <RadzenTextBox @bind-Value=@request Placeholder="Dein Wunsch"/>
+        <RadzenText TextStyle="TextStyle.H2">Nenne uns deinen Wunsch:</RadzenText>
+        <RadzenTextBox @bind-Value=@request Placeholder="Dein Wunsch"/>
 
-    <RadzenPanel AllowCollapse="true" Style="width: 500px;" Text="Mehr Optionen">
-        <ChildContent>
-            <RadzenCard class="rz-mt-4">
-                <RadzenStack Orientation="Orientation.Horizontal"
-                             MouseEnter="@(args => ShowTemperatureTooltip(args))"
-                             MouseLeave="TooltipService.Close"
-                             AlignItems="AlignItems.Center" Wrap="FlexWrap.Wrap">
-                    <RadzenText>Temperature:</RadzenText>
-                    <RadzenSlider @bind-Value=@temperature TValue="float"
-                                  Step="0.1" Min="0.0m" Max="2.0m">
-                    </RadzenSlider>
-                    <RadzenText>@temperature</RadzenText>
-                </RadzenStack>
-            </RadzenCard>
-        </ChildContent>
-    </RadzenPanel>
+        <RadzenPanel AllowCollapse="true" Style="width: 500px;" Text="Mehr Optionen">
+            <ChildContent>
+                <RadzenCard class="rz-mt-4">
+                    <RadzenStack Orientation="Orientation.Horizontal"
+                                 MouseEnter="@(args => ShowTemperatureTooltip(args))"
+                                 MouseLeave="TooltipService.Close"
+                                 AlignItems="AlignItems.Center" Wrap="FlexWrap.Wrap">
+                        <RadzenText>Temperature:</RadzenText>
+                        <RadzenSlider @bind-Value=@temperature TValue="float"
+                                      Step="0.1" Min="0.0m" Max="2.0m">
+                        </RadzenSlider>
+                        <RadzenText>@temperature</RadzenText>
+                    </RadzenStack>
+                </RadzenCard>
+            </ChildContent>
+        </RadzenPanel>
 
-    <RadzenButton Visible=@_buttonVisible Click=@(async ()=> await DoStuff(true))>Generate</RadzenButton>
+        <RadzenButton Visible=@_buttonVisible Click=@(async ()=> await DoStuff(true))>Generate</RadzenButton>
 
-    <RadzenPanel AllowCollapse="true" Style="width: 500px;" Text="Zeige Prompt">
-        <ChildContent>
-            <RadzenCard class="rz-mt-4">
-                <RadzenStack Orientation="Orientation.Horizontal"
-                             MouseEnter="@(args => ShowTemperatureTooltip(args))"
-                             MouseLeave="TooltipService.Close"
-                             AlignItems="AlignItems.Center" Wrap="FlexWrap.Wrap">
-                    <RadzenText>@_imagePromptEnglish</RadzenText>
-                </RadzenStack>
-            </RadzenCard>
-        </ChildContent>
-    </RadzenPanel>
+        <RadzenPanel AllowCollapse="true" Style="width: 500px;" Text="Zeige Prompt">
+            <ChildContent>
+                <RadzenCard class="rz-mt-4">
+                    <RadzenStack Orientation="Orientation.Horizontal"
+                                 MouseEnter="@(args => ShowTemperatureTooltip(args))"
+                                 MouseLeave="TooltipService.Close"
+                                 AlignItems="AlignItems.Center" Wrap="FlexWrap.Wrap">
+                        <RadzenText>@_imagePromptEnglish</RadzenText>
+                    </RadzenStack>
+                </RadzenCard>
+            </ChildContent>
+        </RadzenPanel>
 
-    <RadzenText TextStyle="TextStyle.H4">Die Idee, die gemalt wird:</RadzenText>
+        <RadzenText TextStyle="TextStyle.H4">Die Idee, die gemalt wird:</RadzenText>
 
     
 
@@ -60,42 +62,43 @@
     
     
 
-    <RadzenProgressBarCircular Visible=@_progressVisible ProgressBarStyle="ProgressBarStyle.Secondary" Value="100" ShowValue="false" Mode="ProgressBarMode.Indeterminate" />
-    <RadzenText Visible=@_progressVisible TextStyle="TextStyle.H6" Text=@BusyMessage></RadzenText>
+        <RadzenProgressBarCircular Visible=@_progressVisible ProgressBarStyle="ProgressBarStyle.Secondary" Value="100" ShowValue="false" Mode="ProgressBarMode.Indeterminate" />
+        <RadzenText Visible=@_progressVisible TextStyle="TextStyle.H6" Text=@BusyMessage></RadzenText>
     
-    <RadzenImage Path=@_imageUrl></RadzenImage>
+        <RadzenImage Path=@_imageUrl></RadzenImage>
 
-    <RadzenText Visible=@_addonsVisible TextStyle="TextStyle.H2">Verändere hier dein Bild durch Worte:</RadzenText>
-    <RadzenTextBox Visible=@_addonsVisible @bind-Value=@addons Placeholder="z.B. Mehr Farben" />
-    <RadzenButton Visible=@_bothVisible Click=@(async ()=> await DoStuff(false))>Generate</RadzenButton>
+        <RadzenText Visible=@_addonsVisible TextStyle="TextStyle.H2">Verändere hier dein Bild durch Worte:</RadzenText>
+        <RadzenTextBox Visible=@_addonsVisible @bind-Value=@addons Placeholder="z.B. Mehr Farben" />
+        <RadzenButton Visible=@_bothVisible Click=@(async ()=> await DoStuff(false))>Generate</RadzenButton>
 
-    <RadzenCard>
-        <RadzenRow Style="width:24.5em" Gap="0.5rem" RowGap="0.5rem">
-            <RadzenColumn Size="6">
-                <FlippingImage ImageUrl="@_imageUrls[0]" HideImage="false" 
-                               Show="@(_imageStates[0] == ImageState.FadeIn)" FlipTo="FlippingImage.FlipDirection.Up"
-                               Click="() => ShowImageDialog(_imageUrls[0])" />
-            </RadzenColumn>
-            <RadzenColumn Size="6">
-                <FlippingImage ImageUrl="@_imageUrls[1]" HideImage="false" 
-                               Show="@(_imageStates[1] == ImageState.FadeIn)" FlipTo="FlippingImage.FlipDirection.Right" FlipDelay="200"
-                               Click="() => ShowImageDialog(_imageUrls[1])" />
-            </RadzenColumn>
-            <RadzenColumn Size="6">
-                <FlippingImage ImageUrl="@_imageUrls[2]" HideImage="false" 
-                               Show="@(_imageStates[2] == ImageState.FadeIn)" FlipTo="FlippingImage.FlipDirection.Left" FlipDelay="600"
-                               Click="() => ShowImageDialog(_imageUrls[2])" />
-            </RadzenColumn>
-            <RadzenColumn Size="6">
-                <FlippingImage ImageUrl="@_imageUrls[3]" HideImage="false" 
-                               Show="@(_imageStates[3] == ImageState.FadeIn)" FlipTo="FlippingImage.FlipDirection.Down" FlipDelay="400"
-                               Click="() => ShowImageDialog(_imageUrls[3])" />
-            </RadzenColumn>
-        </RadzenRow>
-    </RadzenCard>
+        <RadzenCard>
+            <RadzenRow Style="width:24.5em" Gap="0.5rem" RowGap="0.5rem">
+                <RadzenColumn Size="6">
+                    <FlippingImage ImageUrl="@_imageUrls[0]" HideImage="false" 
+                                   Show="@(_imageStates[0] == ImageState.FadeIn)" FlipTo="FlippingImage.FlipDirection.Up"
+                                   Click="() => ShowImageDialog(_imageUrls[0])" />
+                </RadzenColumn>
+                <RadzenColumn Size="6">
+                    <FlippingImage ImageUrl="@_imageUrls[1]" HideImage="false" 
+                                   Show="@(_imageStates[1] == ImageState.FadeIn)" FlipTo="FlippingImage.FlipDirection.Right" FlipDelay="200"
+                                   Click="() => ShowImageDialog(_imageUrls[1])" />
+                </RadzenColumn>
+                <RadzenColumn Size="6">
+                    <FlippingImage ImageUrl="@_imageUrls[2]" HideImage="false" 
+                                   Show="@(_imageStates[2] == ImageState.FadeIn)" FlipTo="FlippingImage.FlipDirection.Left" FlipDelay="600"
+                                   Click="() => ShowImageDialog(_imageUrls[2])" />
+                </RadzenColumn>
+                <RadzenColumn Size="6">
+                    <FlippingImage ImageUrl="@_imageUrls[3]" HideImage="false" 
+                                   Show="@(_imageStates[3] == ImageState.FadeIn)" FlipTo="FlippingImage.FlipDirection.Down" FlipDelay="400"
+                                   Click="() => ShowImageDialog(_imageUrls[3])" />
+                </RadzenColumn>
+            </RadzenRow>
+        </RadzenCard>
     
-</RadzenStack>
+    </RadzenStack>
 </div>
+</section>
 
 @code {
     private int maxAddons = 2;
diff --git a/KIKunstKirstenKlöckner/Shared/MainLayout.razor b/KIKunstKirstenKlöckner/Shared/MainLayout.razor
index a2d6bcd..0186462 100644
--- a/KIKunstKirstenKlöckner/Shared/MainLayout.razor
+++ b/KIKunstKirstenKlöckner/Shared/MainLayout.razor
@@ -3,12 +3,6 @@
 <PageTitle>KIKunstKirstenKlöckner</PageTitle>
 
 <div class="page">
-    @*
-    <div class="sidebar">
-    <NavMenu />
-    </div>
-    *@
-
     <main>
         <!-- header section strats -->
         <header class="header_section">
@@ -29,21 +23,21 @@
                     <div class="collapse navbar-collapse" id="navbarSupportedContent">
                         <div class="d-flex ml-auto flex-column flex-lg-row align-items-center">
                             <ul class="navbar-nav  ">
-                                <li class="nav-item active">
-                                    <a class="nav-link" href="/">Home </a>
-                                </li>
-                                <li class="nav-item">
-                                    <a class="nav-link" href="/aiart"> Bilder generieren</a>
-                                </li>
-                                <li class="nav-item">
-                                    <a class="nav-link" href="/wunschprogramm"> Wunschprogramm </a>
-                                </li>
-                                <li class="nav-item">
-                                    <a class="nav-link" href="/kirstenkloeckner"> Über Kirsten Klöckner </a>
-                                </li>
-                                <li class="nav-item">
-                                    <a class="nav-link" href="gallery">Galerie </a>
-                                </li>
+                                <NavLink class="nav-item" href="" Match="NavLinkMatch.All">
+                                    <span class="nav-link">Home</span>
+                                </NavLink>
+                                <NavLink class="nav-item" href="aiart" Match="NavLinkMatch.All">
+                                    <span class="nav-link">Bilder generieren</span>
+                                </NavLink>
+                                <NavLink class="nav-item" href="wunschprogramm" Match="NavLinkMatch.All">
+                                    <span class="nav-link">Wunschprogramm</span>
+                                </NavLink>
+                                <NavLink class="nav-item" href="kirstenkloeckner" Match="NavLinkMatch.All">
+                                    <span class="nav-link">Über Kirsten Klöckner</span>
+                                </NavLink>
+                                <NavLink class="nav-item" href="gallery" Match="NavLinkMatch.All">
+                                    <span class="nav-link">Galerier</span>
+                                </NavLink>
                             </ul>
                         </div>
                     </div>
@@ -51,12 +45,12 @@
             </div>
         </header>
 
-
         <!-- end header section -->
 
         <article class="content px-4">
             @Body
         </article>
+
         <!-- info section -->
 
         <section class="info_section layout_padding">
@@ -136,7 +130,7 @@
             <div class="row">
             <div class="col-lg-7 col-md-9 mx-auto">
                 <p>
-                &copy; 2019 All Rights Reserved By Nackenbox
+                &copy; 2022 All Rights Reserved By Nackenbox GMBH und Co. KG
                 </p>
             </div>
             </div>