AppStd/EnvelopeGenerator
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Redesign home page layout and improve user experience

Browse Source 
Replaced the old card-based layout in `Index.razor` with a modern, visually appealing home page design. Added a hero header, content section, and call-to-action button for signing documents. Introduced new SVG icons and text elements to enhance the UI.

Removed the `OnAfterRenderAsync` method and automatic redirection logic to simplify user navigation. Added a new stylesheet link for the DevExpress Blazor theme.

Updated `app.css` to support the new design:
- Changed `article` overflow to `overflow-y: auto`.
- Added new classes for layout, buttons, and feature badges.
- Styled the home page with a gradient background, rounded corners, and hover effects.

These changes improve usability, responsiveness, and visual consistency.
This commit is contained in:
tekh
2026-06-01 04:39:50 +02:00
parent 5237c91100
commit 4c33b1020a
2 changed files with 142 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
EnvelopeGenerator.ReceiverUI/Pages/Index.razor
View File

@@ -1,40 +1,68 @@
@page "/"
@inject NavigationManager NavigationManager
<div class="d-flex justify-content-center align-items-center" style="min-height: 70vh;">
<div class="card shadow-sm border-0" style="max-width: 560px; width: 100%;">
<div class="card-body p-5 text-center">
<div class="rounded-circle bg-primary bg-opacity-10 d-inline-flex align-items-center justify-content-center mb-4" style="width: 72px; height: 72px;">
<span class="oi oi-document text-primary" aria-hidden="true" style="font-size: 2rem;"></span>
<link href="_content/DevExpress.Blazor.Themes/blazing-berry.bs5.min.css" rel="stylesheet" />
<div class="home-page-wrapper">
<div class="home-hero-header">
<div class="home-hero-header__inner">
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="home-hero-header__icon" viewBox="0 0 16 16">
<path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z"/>
</svg>
<div>
<h1 class="home-hero-header__title">SignFlow</h1>
<p class="home-hero-header__subtitle">Willkommen im eSign-Portal</p>
</div>
<h2 class="mb-3">Empfänger-UI</h2>
<p class="text-muted mb-4">
Sie werden zur Empfänger-UI weitergeleitet. Bitte warten Sie einen Moment.
</p>
<DxLoadingPanel Visible="true"
Text=""
IndicatorVisible="false"
IndicatorAreaVisible="false"
IsContentBlocked="false"
ApplyBackgroundShading="false">
<div class="d-flex flex-column align-items-center gap-3 py-3">
<div class="spinner-border text-primary" role="status" style="width: 2rem; height: 2rem;">
<span class="visually-hidden">Wird geladen...</span>
</div>
<div class="text-muted small">Weiterleitung wird vorbereitet...</div>
</div>
</DxLoadingPanel>
</div>
</div>
<div class="home-content">
<div class="home-card card shadow border-0">
<div class="card-body p-4 p-md-5 text-center">
<p class="text-muted mb-4" style="font-size: 0.92rem; line-height: 1.7;">
Öffnen Sie ein Ihnen zugesandtes Dokument, indem Sie auf den Link in Ihrer E-Mail klicken
oder den Zugangscode manuell eingeben.
</p>
<div class="d-flex flex-column flex-sm-row gap-3 justify-content-center">
<a href="/receiver" class="btn btn-primary px-4 py-2 home-btn-primary">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="me-2" viewBox="0 0 16 16">
<path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10z"/>
</svg>
Dokument unterzeichnen
</a>
</div>
<div class="mt-4 pt-3 border-top">
<div class="d-flex flex-wrap justify-content-center gap-3">
<div class="home-feature-badge">
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="currentColor" class="me-1" viewBox="0 0 16 16">
<path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"/>
</svg>
Sicherer Zugang
</div>
<div class="home-feature-badge">
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="currentColor" class="me-1" viewBox="0 0 16 16">
<path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
</svg>
Digitale Unterschrift
</div>
<div class="home-feature-badge">
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="currentColor" class="me-1" viewBox="0 0 16 16">
<path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
<path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
</svg>
PDF-Export
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@code {
protected override async Task OnAfterRenderAsync(bool firstRender) {
if(!firstRender)
return;
await Task.Delay(1200);
NavigationManager.NavigateTo("/receiver");
}
}
}

83
EnvelopeGenerator.ReceiverUI/wwwroot/css/app.css
View File

@@ -14,7 +14,7 @@ article {
height: calc(100vh - 36px);
display: flex;
flex-direction: column;
overflow: hidden;
overflow-y: auto;
padding-left: 0 !important;
padding-right: 0 !important;
}
@@ -244,6 +244,87 @@ article {
flex-wrap: wrap;
}
/* ── Home page ───────────────────────────────────────────────────────────── */
.home-page-wrapper {
display: flex;
flex-direction: column;
align-items: center;
min-height: calc(100vh - 36px);
background: linear-gradient(160deg, #1e2e3e 0%, #2c3e50 40%, #3498db 100%);
padding-bottom: 36px;
}
.home-hero-header {
width: 100%;
padding: 48px 24px 36px;
text-align: center;
}
.home-hero-header__inner {
display: inline-flex;
align-items: center;
gap: 20px;
color: #fff;
}
.home-hero-header__icon {
opacity: 0.90;
flex-shrink: 0;
}
.home-hero-header__title {
font-size: 2rem;
font-weight: 700;
margin: 0;
color: #fff;
letter-spacing: 0.02em;
}
.home-hero-header__subtitle {
font-size: 0.92rem;
margin: 4px 0 0;
color: rgba(255,255,255,0.75);
}
.home-content {
width: 100%;
max-width: 520px;
padding: 0 16px;
}
.home-card {
border-radius: 12px !important;
overflow: hidden;
}
.home-btn-primary {
background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
border: none;
color: #fff;
font-weight: 500;
border-radius: 8px;
transition: filter 0.15s, box-shadow 0.15s;
box-shadow: 0 2px 10px rgba(44,62,80,0.30);
}
.home-btn-primary:hover {
filter: brightness(1.12);
box-shadow: 0 4px 16px rgba(44,62,80,0.40);
color: #fff;
}
.home-feature-badge {
display: inline-flex;
align-items: center;
background: rgba(52,152,219,0.10);
color: #3498db;
border: 1px solid rgba(52,152,219,0.25);
border-radius: 20px;
padding: 4px 12px;
font-size: 0.75rem;
font-weight: 500;
}
/* ── Footer ──────────────────────────────────────────────────────────────── */
.receiver-footer {
position: fixed;