noch mehr tolle sachen. TODO Das runde ding rechts funktioniert noch nicht wie es soll.

KIKunstKirstenKlöckner/Pages/AiArt.razor

@@ -14,15 +14,102 @@
 @inject NotificationService NotificationService
 @inject DialogService DialogService
 
-@inject WunschInfoData WunschInfoData;
 @inject ImageGenerator ImageGenerator;
+@inject BildInfoData BildInfoData;
+@inject WunschInfoData WunschInfoData;
+
+@implements IAsyncDisposable
+
+<style>
+    .invisible-rectangle {
+        width: 100%;
+        height: 600px;
+        opacity: 0;
+        background-color: transparent;
+        pointer-events: none;
+    }
+
+    .invisible-rectangle-small {
+        width: 100%;
+        height: 100px;
+        opacity: 0;
+        background-color: transparent;
+        pointer-events: none;
+    }
+</style>
 
 <PageTitle>AiArt</PageTitle>
 
-<section class="about_section layout_padding" style="background-image: url('images/5KeineAngstvorFehlern2014.jpeg'); background-size: cover; background-repeat: no-repeat; background-blend-mode:lighten">
+<section class="about_section" style="background-image: url('images/5KeineAngstvorFehlern2014.jpeg'); background-size: cover; background-repeat: no-repeat; background-blend-mode:lighten">
-    <div class="container">
 
-    <RadzenStack Orientation="Orientation.Vertical" AlignItems="AlignItems.Center">
+    <div class="hero_area hero-area-visible">
+
+        <!-- slider section -->
+        <section class="slider_section" style="background-image: url('images/3730Kilo2015.jpeg'); background-size: cover; background-repeat: no-repeat; background-blend-mode:lighten">
+          <div class="container">
+            <div class="row">
+              <div class="col-md-6 ">
+                <div class="detail_box">
+                  <h1>
+                    Hier werden <br>
+                    deine Wünsche <br>
+                    Wirklichkeit
+                  </h1>
+                  <p>
+                    Weiter unten findest du meinen Assistenten. Gebe ihm deinen Wunsch und er wird sich etwas tolles dazu überlegen. Es lohnt sich geduldig zu sein. <br>
+                    Scrolle einfach nach unten!
+                  </p>
+                </div>
+              </div>
+              <div class="col-lg-5 col-md-6 offset-lg-1">
+                <div class="img_content">
+                  <div class="img_container">
+                    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
+                      <div class="carousel-inner">
+                        @if (_allBildInfos != null)
+                        {
+                            @foreach (var bildInfo in _allBildInfos)
+                            {
+                                if (_indexForCarusell == 0)
+                                {
+                                    <div class="carousel-item active">
+                                        <div class="img-box">
+                                            <img src="@bildInfo.Dateiname" alt="" />
+                                        </div>
+                                    </div>
+                                }
+                                <div class="carousel-item">
+                                    <div class="img-box">
+                                        <img src="@bildInfo.Dateiname" alt=""/>
+                                    </div>
+                                </div>
+                                _indexForCarusell++;
+                            }
+                        }            
+                      </div>
+                    </div>
+                  </div>
+                  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
+                    <span class="sr-only">Previous</span>
+                  </a>
+                  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
+                    <span class="sr-only">Next</span>
+                  </a>
+                </div>
+
+              </div>
+            </div>
+          </div>
+        </section>
+        <!-- end slider section -->
+      </div>
+    <div class="invisible-rectangle-small"></div>
+
+    <!-- start entry section -->
+    <section id="entrySection" class="section-animate-left" @ref="animatedEntrySection">
+        <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=@_userIdea Placeholder="Dein Wunsch"/>
@@ -63,10 +150,17 @@
                     </RadzenRadioButtonList>
                 </RadzenCard>
             </ChildContent>
-        </RadzenPanel>
+            </RadzenPanel>
 
             <RadzenButton Visible=@_buttonVisible Click="@OnGenerateButtonClickAsync">Generate</RadzenButton>
+            </RadzenStack>
+        </div>
+    </section>
+    <!-- end entry section -->
 
+    <!-- start image section -->
+    <section id="imageSection">
+        <div class="container">
         @if (_imageSectionVisible)
             {
                 <section id="imageSection">
@@ -133,12 +227,63 @@
                     </RadzenStack>
                 </section>
             }
+            @if (!_imageSectionVisible)
+            {
+                <div class="invisible-rectangle"></div>
+            }
+        </div>
+    </section>
+    <!-- end image section -->
     
-    </RadzenStack>
-</div>
 </section>
 
 @code {
+    // Animation stuff
+    private int _indexForCarusell = 0;
+    private ElementReference animatedEntrySection;
+    private List<ElementReference> animatedElements = new List<ElementReference>();
+
+    private Func<Task> removeScrollListener;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            animatedElements.Add(animatedEntrySection);
+
+            removeScrollListener = await JSRuntime.InvokeAsync<Func<Task>>(
+            "initHeroAreaScrollAnimation"
+        );
+
+            await JSRuntime.InvokeVoidAsync("initScrollAnimations", animatedElements);
+        }
+    }
+
+    private bool isDisposed = false;
+
+    public async ValueTask DisposeAsync()
+    {
+        if (!isDisposed)
+        {
+            if (removeScrollListener != null)
+            {
+                await removeScrollListener.Invoke();
+            }
+            isDisposed = true;
+        }
+    }
+
+    private async Task OnGenerateButtonClickAsync()
+    {
+        _imageSectionVisible = true;
+        StateHasChanged();
+        await Task.Delay(100);
+        await JSRuntime.InvokeVoidAsync("scrollToElement", "imageSection");
+        await GenerateImagesAsync();
+    }
+
+    List<BildInfoModel>? _allBildInfos;
+
     /// <summary>
     /// Wenn <see langword="true"/> wird GPT4 verwendet um die Idee zu interpretieren.
     /// </summary>
@@ -165,15 +310,6 @@
         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 =>
@@ -229,6 +365,9 @@
 
     protected override async Task OnInitializedAsync()
     {
+        _allBildInfos = (await BildInfoData.GetAllBildInfosAsync()).ToList();
+        StateHasChanged();
+
         _openAiApiKey = Config.GetValue<string>("API:OpenAI");
 
         _openAiApi = new OpenAIAPI(_openAiApiKey);