Gottfried
/
KI-Kunst-Kirsten-Kloeckner
1
0
Fork 0
Code Issues 13 Pull Requests Packages Projects 1 Releases Wiki Activity

Compare commits

base: Gottfried:98810ad1fc9d389c8d3e706d8f3542b3a4d25f33
Branches Tags
Gottfried:main
Gottfried:generierenseite-alternative
..
compare: Gottfried:538445760e109e879ebf6c13f15fd072c803462e
Branches Tags
Gottfried:main
Gottfried:generierenseite-alternative

No commits in common. "98810ad1fc9d389c8d3e706d8f3542b3a4d25f33" and "538445760e109e879ebf6c13f15fd072c803462e" have entirely different histories.
98810ad1fc ... 538445760e

10 changed files with 75 additions and 214 deletions
Show Stats Expand all files Collapse all files

2
KIKunstKirstenKlöckner.sln
View File

@ -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("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "DataAccess", "DataAccess\DataAccess.csproj", "{0880FD07-236B-42C1-9CA3-2A6F695A623C}"
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "DataAccess", "DataAccess\DataAccess.csproj", "{0880FD07-236B-42C1-9CA3-2A6F695A623C}"
EndProject
Global
GlobalSection(SolutionConfigurationPlatforms) = preSolution

132
KIKunstKirstenKlöckner/Pages/AiArt.razor
View File

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

49
KIKunstKirstenKlöckner/Pages/Gallery.razor
View File

@ -33,67 +33,40 @@
</RadzenDataList>
@code {
List<BildInfoModel>? _bildInfos;
IEnumerable<BildInfoModel>? _bildInfos;
protected override async Task OnInitializedAsync()
{
_bildInfos = (await BildInfoData.GetAllBildInfosAsync()).ToList();
_bildInfos = await BildInfoData.GetAllBildInfosAsync();
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">
<RadzenButton Click=@(async ()=> await ButtonLeft()) Disabled="(listIndex == 0)" Style="border-radius: 0%" Text="<"></RadzenButton>
<div>
<RadzenStack Orientation="Orientation.Vertical">
<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 Orientation="Orientation.Vertical">
<RadzenImage Style="width: 400px; height: 400px;" Path="@bildInfo.Dateiname" />
</RadzenStack>
<RadzenText Text="@wunschInfo.BildBeschreibung"/>
</RadzenStack>
@foreach (var bild in bilderVomWunsch)
{
<RadzenImage class="small-image" Path="@bild.Dateiname"
Click="() => { bildInfo = bild; listIndex = _bildInfos.IndexOf(_bildInfos.First(info => info.Id == bildInfo.Id)); DialogService.Refresh(); }" />
<RadzenImage class="small-image" Path="@bild.Dateiname"
Click="async () => { bildInfo = bild; DialogService.Close(); await ShowImageDialog(bild); }" />
}
</RadzenStack>
</div>
,
</div>,
new DialogOptions() { CloseDialogOnOverlayClick = true, Width = "50%" });
}
[Inject]
private IWebHostEnvironment _environment { get; set; }
}

23
KIKunstKirstenKlöckner/Pages/Home.razor
View File

@ -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-animate-left" @ref="animatedAboutSection1">
<section class="about_section layout_padding">
<div class="container">
<div class="row">
<div class="col-md-6">
@ -104,7 +104,7 @@
</div>
</section>
<section class="about_section layout_padding section-animate-right" @ref="animatedAboutSection2">
<section class="about_section layout_padding">
<div class="container">
<div class="row">
<div class="col-md-6">
@ -141,22 +141,11 @@
<!-- 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);
}
}
}

3
KIKunstKirstenKlöckner/Pages/Wunschbilder.razor
View File

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

3
KIKunstKirstenKlöckner/Pages/_Host.cshtml
View File

@ -42,8 +42,6 @@
<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>
@ -65,7 +63,6 @@
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/animator.js"></script>
</body>
</html>

52
KIKunstKirstenKlöckner/wwwroot/css/animations.css
View File

@ -1,52 +0,0 @@
.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;
}

BIN
KIKunstKirstenKlöckner/wwwroot/images/3Umsatz2014.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 12 MiB

BIN
KIKunstKirstenKlöckner/wwwroot/images/circuitkkkk.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 332 KiB

25
KIKunstKirstenKlöckner/wwwroot/js/animator.js
View File

@ -1,25 +0,0 @@
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' });
}
}