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

Add dynamic typing animation to homepage description

Browse Source 
Introduced a dynamic typing effect for the homepage description using the `Typed` library. Replaced hardcoded description text in `Index.razor` with a dynamically rendered `<span>` element. Added a constant for the description text and implemented `OnAfterRenderAsync` to invoke the typing animation on first render.

Included the `typed.umd.js` library in `index.html` and updated `receiver-signature.js` with a `startTyped` function to support typing animations. Registered `startTyped` in the public API for external use.

Enhanced the user experience with dynamic content rendering and improved maintainability by centralizing the description text. Also added a new theme file for improved styling.
This commit is contained in:
tekh
2026-06-01 11:32:27 +02:00
parent 6d254281f8
commit 161ec6491d
4 changed files with 30 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,5 @@
@page "/"
@inject IJSRuntime JS
<link href="_content/DevExpress.Blazor.Themes/blazing-berry.bs5.min.css" rel="stylesheet" />
@@ -18,12 +19,10 @@
<div class="home-content">
<div class="home-card card shadow border-0">
<div class="card-body p-4 p-md-5 text-center">
<div class="card-body p-4 p-md-5">
<p class="text-muted mb-4" style="font-size: 0.92rem; line-height: 1.7;">
Das digitale Unterschriftenportal ist eine Plattform, die entwickelt wurde, um Ihre Dokumente sicher zu unterschreiben und zu verwalten.
Mit seiner benutzerfreundlichen Oberfläche können Sie Ihre Dokumente schnell hochladen, die Unterschriftsprozesse verfolgen und Ihre digitalen Unterschriftenanwendungen einfach durchführen.
Dieses Portal beschleunigt Ihren Arbeitsablauf mit rechtlich gültigen Unterschriften und erhöht gleichzeitig die Sicherheit Ihrer Dokumente.
<p class="text-muted mb-4" style="font-size: 0.92rem; line-height: 1.7; text-align: justify; text-align-last: left; min-height: calc(0.92rem * 1.7 * 9);">
<span id="home-description"></span>
</p>
<div class="mt-4 pt-3 border-top">
@@ -57,4 +56,16 @@
</div>
@code {
private const string HomePageDescription =
"Das digitale Unterschriftenportal ist eine Plattform, die entwickelt wurde, um Ihre Dokumente sicher zu unterschreiben und zu verwalten. " +
"Mit seiner benutzerfreundlichen Oberfläche können Sie Ihre Dokumente schnell hochladen, die Unterschriftsprozesse verfolgen und Ihre digitalen Unterschriftenanwendungen einfach durchführen. " +
"Dieses Portal beschleunigt Ihren Arbeitsablauf mit rechtlich gültigen Unterschriften und erhöht gleichzeitig die Sicherheit Ihrer Dokumente.";
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JS.InvokeVoidAsync("receiverSignature.startTyped", "home-description", HomePageDescription, 15);
}
}
}