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 EndProject
Project("{00D1A9C2-B5F0-4AF3-8072-F6C62B433612}") = "KiKunstDatenbank", "KiKunstDatenbank\KiKunstDatenbank.sqlproj", "{A19CD19A-FE5B-4D4E-896B-DCC43B45F734}" Project("{00D1A9C2-B5F0-4AF3-8072-F6C62B433612}") = "KiKunstDatenbank", "KiKunstDatenbank\KiKunstDatenbank.sqlproj", "{A19CD19A-FE5B-4D4E-896B-DCC43B45F734}"
EndProject 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 EndProject
Global Global
GlobalSection(SolutionConfigurationPlatforms) = preSolution GlobalSection(SolutionConfigurationPlatforms) = preSolution

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

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

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

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

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

@ -1,7 +1,7 @@
 
@page "/" @page "/"
@inject IJSRuntime JSRuntime
<div class="hero_area"> <div class="hero_area">
@ -69,7 +69,7 @@
<!-- about section --> <!-- about section -->
<section class="about_section layout_padding section-animate-left" @ref="animatedAboutSection1"> <section class="about_section layout_padding">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
@ -104,7 +104,7 @@
</div> </div>
</section> </section>
<section class="about_section layout_padding section-animate-right" @ref="animatedAboutSection2"> <section class="about_section layout_padding">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
@ -141,22 +141,11 @@
<!-- end about section --> <!-- 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> </div>
<!-- explaining section --> <!-- explaining section -->
<div class="container"> <div class="container">
<NavLink class="nav-item" href="wiefunktionierts" Match="NavLinkMatch.All">
<span class="nav-link">Erklärung</span>
</NavLink>
</div> </div>

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

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