Fixibus den Überhang und Menü funktioniert
This commit is contained in:
Simon Lübeß
parent
0b9427e9e5
commit
fb0397694a
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
© 2019 All Rights Reserved By Nackenbox
|
||||
© 2022 All Rights Reserved By Nackenbox GMBH und Co. KG
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue