Merge branch 'main' of https://gitfrieds.nackenbox.xyz/Gottfried/KI-Kunst-Kirsten-Kloeckner

KIKunstKirstenKlöckner.sln

@@ -7,7 +7,7 @@ Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "KIKunstKirstenKlöckner", "
 EndProject
 Project("{00D1A9C2-B5F0-4AF3-8072-F6C62B433612}") = "KiKunstDatenbank", "KiKunstDatenbank\KiKunstDatenbank.sqlproj", "{A19CD19A-FE5B-4D4E-896B-DCC43B45F734}"
 EndProject
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "DataAccess", "DataAccess\DataAccess.csproj", "{0880FD07-236B-42C1-9CA3-2A6F695A623C}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "DataAccess", "DataAccess\DataAccess.csproj", "{0880FD07-236B-42C1-9CA3-2A6F695A623C}"
 EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution

KIKunstKirstenKlöckner/Pages/AiArt.razor

@@ -8,6 +8,7 @@
 @using KIKunstKirstenKlöckner.Data
 @using System.Diagnostics
 
+@inject IJSRuntime JSRuntime
 @inject IConfiguration Config
 @inject TooltipService TooltipService
 @inject NotificationService NotificationService
@@ -64,67 +65,74 @@
             </ChildContent>
         </RadzenPanel>
 
-        <RadzenButton Visible=@_buttonVisible Click=@(async ()=> await GenerateImagesAsync())>Generate</RadzenButton>
+            <RadzenButton Visible=@_buttonVisible Click="@OnGenerateButtonClickAsync">Generate</RadzenButton>
 
-        <RadzenText TextStyle="TextStyle.H4">Die Idee, die gemalt wird:</RadzenText>
+        @if (_imageSectionVisible)
+            {
+                <section id="imageSection">
+                            <RadzenStack Orientation="Orientation.Vertical" AlignItems="AlignItems.Center">
+                        <RadzenText TextStyle="TextStyle.H4">Die Idee, die gemalt wird:</RadzenText>
 
-        <RadzenCard class="rz-mt-4" Style="width: 800px;">
+                        <RadzenCard class="rz-mt-4" Style="width: 800px;">
-                <RadzenText>@_imageIdea</RadzenText>
+                            <RadzenText>@_imageIdea</RadzenText>
-        </RadzenCard>
+                        </RadzenCard>
-    
-        <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>
 
-        <RadzenText Visible=@_addonsVisible TextStyle="TextStyle.H2">Verändere hier dein Bild durch Worte:</RadzenText>
+                        <RadzenProgressBarCircular Visible=@_progressVisible ProgressBarStyle="ProgressBarStyle.Secondary" Value="100" ShowValue="false" Mode="ProgressBarMode.Indeterminate" />
-        <RadzenTextBox Visible=@_addonsVisible @bind-Value=@_updateRequest Placeholder="z.B. Mehr Farben" />
+                        <RadzenText Visible=@_progressVisible TextStyle="TextStyle.H6" Text=@BusyMessage></RadzenText>
-        <RadzenButton Visible=@_bothVisible Click=@(async ()=> await UpdateImagesAsync())>Generate</RadzenButton>
 
-        <RadzenCard>
+                        <RadzenImage Path=@_imageUrl></RadzenImage>
-            <RadzenRow Style="width:24.5em" Gap="0.5rem" RowGap="0.5rem">
+
-                <RadzenColumn Size="6">
+                        <RadzenText Visible=@_addonsVisible TextStyle="TextStyle.H2">Verändere hier dein Bild durch Worte:</RadzenText>
-                    <FlippingImage ImageUrl="@_imageUrls[0]" HideImage="false" 
+                        <RadzenTextBox Visible=@_addonsVisible @bind-Value=@_updateRequest Placeholder="z.B. Mehr Farben" />
-                                   Show="@(_imageStates[0] == ImageState.FadeIn)" FlipTo="FlippingImage.FlipDirection.Up"
+                        <RadzenButton Visible=@_bothVisible Click=@(async ()=> await UpdateImagesAsync())>Generate</RadzenButton>
-                                   Click="() => ShowImageDialog(_imageUrls[0])" />
+
-                        <RadzenPanel AllowCollapse="true" Collapsed="true" Text="Info">
+                        <RadzenCard>
-                        @_imagePromts[0]
+                            <RadzenRow Style="width:24.5em" Gap="0.5rem" RowGap="0.5rem">
-                        <br/>
+                                <RadzenColumn Size="6">
-                        Model: @_bildInfos[0]?.ImageModel
+                                    <FlippingImage ImageUrl="@_imageUrls[0]" HideImage="false"
-                    </RadzenPanel>
+                                                    Show="@(_imageStates[0] == ImageState.FadeIn)" FlipTo="FlippingImage.FlipDirection.Up"
-                </RadzenColumn>
+                                                    Click="() => ShowImageDialog(_imageUrls[0])" />
-                <RadzenColumn Size="6">
+                                    <RadzenPanel AllowCollapse="true" Collapsed="true" Text="Info">
-                    <FlippingImage ImageUrl="@_imageUrls[1]" HideImage="false" 
+                                        @_imagePromts[0]
-                                   Show="@(_imageStates[1] == ImageState.FadeIn)" FlipTo="FlippingImage.FlipDirection.Right" FlipDelay="200"
+                                        <br />
-                                       Click="() => ShowImageDialog(_imageUrls[1])" />
+                                        Model: @_bildInfos[0]?.ImageModel
-                        <RadzenPanel AllowCollapse="true" Collapsed="true" Text="Info">
+                                    </RadzenPanel>
-                            @_imagePromts[1]
+                                </RadzenColumn>
-                            <br />
+                                <RadzenColumn Size="6">
-                            Model: @_bildInfos[1]?.ImageModel
+                                    <FlippingImage ImageUrl="@_imageUrls[1]" HideImage="false"
-                        </RadzenPanel>
+                                                    Show="@(_imageStates[1] == ImageState.FadeIn)" FlipTo="FlippingImage.FlipDirection.Right" FlipDelay="200"
-                </RadzenColumn>
+                                                    Click="() => ShowImageDialog(_imageUrls[1])" />
-                <RadzenColumn Size="6">
+                                    <RadzenPanel AllowCollapse="true" Collapsed="true" Text="Info">
-                    <FlippingImage ImageUrl="@_imageUrls[2]" HideImage="false" 
+                                        @_imagePromts[1]
-                                   Show="@(_imageStates[2] == ImageState.FadeIn)" FlipTo="FlippingImage.FlipDirection.Left" FlipDelay="600"
+                                        <br />
-                                       Click="() => ShowImageDialog(_imageUrls[2])" />
+                                        Model: @_bildInfos[1]?.ImageModel
-                        <RadzenPanel AllowCollapse="true" Collapsed="true" Text="Info">
+                                    </RadzenPanel>
-                            @_imagePromts[2]
+                                </RadzenColumn>
-                            <br />
+                                <RadzenColumn Size="6">
-                            Model: @_bildInfos[2]?.ImageModel
+                                    <FlippingImage ImageUrl="@_imageUrls[2]" HideImage="false"
-                        </RadzenPanel>
+                                                    Show="@(_imageStates[2] == ImageState.FadeIn)" FlipTo="FlippingImage.FlipDirection.Left" FlipDelay="600"
-                </RadzenColumn>
+                                                    Click="() => ShowImageDialog(_imageUrls[2])" />
-                <RadzenColumn Size="6">
+                                    <RadzenPanel AllowCollapse="true" Collapsed="true" Text="Info">
-                    <FlippingImage ImageUrl="@_imageUrls[3]" HideImage="false" 
+                                        @_imagePromts[2]
-                                   Show="@(_imageStates[3] == ImageState.FadeIn)" FlipTo="FlippingImage.FlipDirection.Down" FlipDelay="400"
+                                        <br />
-                                       Click="() => ShowImageDialog(_imageUrls[3])" />
+                                        Model: @_bildInfos[2]?.ImageModel
-                        <RadzenPanel AllowCollapse="true" Collapsed="true" Text="Info">
+                                    </RadzenPanel>
-                            @_imagePromts[3]
+                                </RadzenColumn>
-                            <br/>
+                                <RadzenColumn Size="6">
-                            Model: @_bildInfos[3]?.ImageModel
+                                    <FlippingImage ImageUrl="@_imageUrls[3]" HideImage="false"
-                        </RadzenPanel>
+                                                    Show="@(_imageStates[3] == ImageState.FadeIn)" FlipTo="FlippingImage.FlipDirection.Down" FlipDelay="400"
-                </RadzenColumn>
+                                                    Click="() => ShowImageDialog(_imageUrls[3])" />
-            </RadzenRow>
+                                    <RadzenPanel AllowCollapse="true" Collapsed="true" Text="Info">
-        </RadzenCard>
+                                        @_imagePromts[3]
+                                        <br />
+                                        Model: @_bildInfos[3]?.ImageModel
+                                    </RadzenPanel>
+                                </RadzenColumn>
+                            </RadzenRow>
+                        </RadzenCard>
+                    </RadzenStack>
+                </section>
+            }
     
     </RadzenStack>
 </div>
@@ -142,6 +150,7 @@
     private bool _buttonVisible = true;
     private bool _addonsVisible = false;
     private bool _bothVisible = false;
+    private bool _imageSectionVisible = false;
 
     public string BusyMessage { get; set; } = "Initial Message";
 
@@ -156,6 +165,15 @@
         FadeIn
     }
 
+    private async Task OnGenerateButtonClickAsync()
+    {
+        _imageSectionVisible = true;
+        StateHasChanged();
+        await Task.Delay(100);
+        await JSRuntime.InvokeVoidAsync("scrollToElement", "imageSection");
+        await GenerateImagesAsync();
+    }
+
     async Task ShowImageDialog(string imageUrl)
     {
         var result = await DialogService.OpenAsync("", ds =>

KIKunstKirstenKlöckner/Pages/Gallery.razor

@@ -33,40 +33,67 @@
 </RadzenDataList>
 
 @code {
-    IEnumerable<BildInfoModel>? _bildInfos;
+    List<BildInfoModel>? _bildInfos;
 
     protected override async Task OnInitializedAsync()
     {
-        _bildInfos = await BildInfoData.GetAllBildInfosAsync();
+        _bildInfos = (await BildInfoData.GetAllBildInfosAsync()).ToList();
 
         await base.OnInitializedAsync();
     }
-    
+
     async Task ShowImageDialog(BildInfoModel bildInfo)
     {
         WunschInfoModel wunschInfo = await WunschInfoData.GetWunschInfoAsync(bildInfo.WunschId);
 
+        int listIndex = _bildInfos.IndexOf(_bildInfos.First(info => info.Id == bildInfo.Id));
+
         List<BildInfoModel> bilderVomWunsch = _bildInfos!.Where(info => info.WunschId == wunschInfo.Id).ToList();
 
+        async Task ButtonLeft()
+        {
+            listIndex = (listIndex != 0) ? listIndex - 1 : 0;
+            bildInfo = _bildInfos[listIndex];
+            wunschInfo = await WunschInfoData.GetWunschInfoAsync(bildInfo.WunschId);
+            bilderVomWunsch = _bildInfos!.Where(info => info.WunschId == wunschInfo.Id).ToList();
+            DialogService.Refresh();
+        }
+
+        async Task ButtonRight()
+        {
+            listIndex = (listIndex != _bildInfos.Count - 1) ? listIndex + 1 : _bildInfos.Count - 1;
+            bildInfo = _bildInfos[listIndex];
+            wunschInfo = await WunschInfoData.GetWunschInfoAsync(bildInfo.WunschId);
+            bilderVomWunsch = _bildInfos!.Where(info => info.WunschId == wunschInfo.Id).ToList();
+            DialogService.Refresh();
+        }
+
+
         var result = await DialogService.OpenAsync(wunschInfo.Wunsch, ds =>
-            @<div>
+        @<div>
                 <RadzenStack Orientation="Orientation.Horizontal" Wrap="FlexWrap.Wrap">
                     <RadzenStack Orientation="Orientation.Horizontal">
-                        <RadzenStack Orientation="Orientation.Vertical">
+                        <RadzenButton Click=@(async ()=> await ButtonLeft()) Disabled="(listIndex == 0)" Style="border-radius: 0%" Text="<"></RadzenButton>
-                            <RadzenImage Style="width: 400px; height: 400px;" Path="@bildInfo.Dateiname" />
+                        <div>
-                        </RadzenStack>
+                            <RadzenStack Orientation="Orientation.Vertical">
-                        <RadzenText Text="@wunschInfo.BildBeschreibung"/>
+                                <RadzenImage Style="width: 400px; height: 400px;" Path="@bildInfo.Dateiname" />
+                            </RadzenStack>
+                            <RadzenText Text="@wunschInfo.BildBeschreibung" />
+                        </div>
+                        <RadzenButton Click=@(async ()=> await ButtonRight()) Disabled="(listIndex == _bildInfos.Count - 1)" Style="border-radius: 0%" Text=">"></RadzenButton>
                     </RadzenStack>
                     @foreach (var bild in bilderVomWunsch)
                     {
-                        <RadzenImage class="small-image" Path="@bild.Dateiname" 
+                        <RadzenImage class="small-image" Path="@bild.Dateiname"
-                                     Click="async () => { bildInfo = bild; DialogService.Close(); await ShowImageDialog(bild); }" />
+                             Click="() => { bildInfo = bild; listIndex = _bildInfos.IndexOf(_bildInfos.First(info => info.Id == bildInfo.Id)); DialogService.Refresh(); }" />
                     }
                 </RadzenStack>
-            </div>, 
+            </div>
+    , 
             new DialogOptions() { CloseDialogOnOverlayClick = true, Width = "50%" });
     }
 
+
     [Inject]
     private IWebHostEnvironment _environment { get; set; }
 }

KIKunstKirstenKlöckner/Pages/Home.razor

@@ -1,7 +1,7 @@
 
 @page "/"
 
-
+@inject IJSRuntime JSRuntime
 
   <div class="hero_area">
 
@@ -69,7 +69,7 @@
   
 
   <!-- about section -->
-  <section class="about_section layout_padding">
+<section class="about_section layout_padding section-animate-left" @ref="animatedAboutSection1">
     <div class="container">
       <div class="row">
           <div class="col-md-6">
@@ -104,7 +104,7 @@
     </div>
   </section>
 
-  <section class="about_section layout_padding">
+<section class="about_section layout_padding section-animate-right" @ref="animatedAboutSection2">
     <div class="container">
       <div class="row">
         <div class="col-md-6">
@@ -141,11 +141,22 @@
   <!-- end about section -->
 
 
+@code {
+    private ElementReference animatedAboutSection1;
+    private ElementReference animatedAboutSection2;
 
 
- 
+    private List<ElementReference> animatedElements = new List<ElementReference>();
-
- 
 
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            animatedElements.Add(animatedAboutSection1);
+            animatedElements.Add(animatedAboutSection2);
 
 
+            await JSRuntime.InvokeVoidAsync("initScrollAnimations", animatedElements);
+        }
+    }
+}

KIKunstKirstenKlöckner/Pages/Wunschbilder.razor

@@ -27,6 +27,9 @@
 </div>
 <!-- explaining section -->
 <div class="container">
+    <NavLink class="nav-item" href="wiefunktionierts" Match="NavLinkMatch.All">
+        <span class="nav-link">Erklärung</span>
+    </NavLink>
 </div>
 
 

KIKunstKirstenKlöckner/Pages/_Host.cshtml

@@ -42,6 +42,8 @@
     <link href="css/style.css" rel="stylesheet" />
     <!-- responsive style -->
     <link href="css/responsive.css" rel="stylesheet" />
+    <!-- animations style -->
+    <link href="css/animations.css" rel="stylesheet" />
 
 </head>
 <body>
@@ -63,6 +65,7 @@
 
     <script src="js/jquery-3.4.1.min.js"></script>
     <script src="js/bootstrap.js"></script>
+    <script src="js/animator.js"></script>
 
 </body>
 </html>

KIKunstKirstenKlöckner/wwwroot/css/animations.css

@@ -0,0 +1,52 @@
+.text-animate {
+    opacity: 0;
+    transition: opacity 1s ease-in-out;
+}
+
+.text-animate.visible {
+    opacity: 1;
+}
+
+.image-animate-left {
+    position: relative;
+    opacity: 0;
+    left: -100%;
+    transition: left 2s ease-in-out, opacity 2s ease-in-out;
+}
+
+.image-animate-left.visible {
+    left: 50%;
+    transform: translateX(-50%);
+    opacity: 1;
+}
+
+.section-animate-left {
+    width: 100% margin-left: auto;
+    margin-right: auto;
+    opacity: 0;
+    left: -100%;
+    transition: left 1.2s ease-in-out, opacity 2s ease-in-out;
+    position: relative;
+}
+
+.section-animate-left.visible {
+    left: 50%;
+    transform: translateX(-50%);
+    opacity: 1;
+}
+
+.section-animate-right {
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    opacity: 0;
+    transform: translateX(100%);
+    transition: transform 1.2s ease-in-out, opacity 2s ease-in-out;
+    position: relative;
+}
+
+.section-animate-right.visible {
+    transform: translateX(0%);
+    opacity: 1;
+}
+

KIKunstKirstenKlöckner/wwwroot/js/animator.js

@@ -0,0 +1,25 @@
+function initScrollAnimations(elements) {
+    function checkVisibility(element) {
+        const rect = element.getBoundingClientRect();
+        return rect.top < window.innerHeight && rect.bottom >= 0;
+    }
+
+    function animateElements() {
+        elements.forEach(element => {
+            if (checkVisibility(element)) {
+                element.classList.add('visible');
+            }
+        });
+    }
+
+    window.addEventListener('scroll', animateElements);
+
+    animateElements();
+}
+
+function scrollToElement(elementId) {
+    var element = document.getElementById(elementId);
+    if (element) {
+        element.scrollIntoView({ behavior: 'smooth' });
+    }
+}