g.vitari/StandManager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ScanNew

Browse Source
This commit is contained in:
Gianmarco
2025-12-18 09:50:01 +01:00
parent 875396e6ee
commit e5ea2c9d90
4 changed files with 172 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
StandManager/Components/AppHeader.razor
View File

@ -14,6 +14,9 @@
<div class="nav-item"> <div class="nav-item">
<a class="nav-link text-white" href="/registrazione"><span class="nav-link-title">Registrazione</span></a> <a class="nav-link text-white" href="/registrazione"><span class="nav-link-title">Registrazione</span></a>
</div> </div>
<div class="nav-item">
<a class="nav-link text-white" href="/activate-qr-scan"><span class="nav-link-title">ScanNew</span></a>
</div>
</nav> </nav>
</div> </div>
</div> </div>

1
StandManager/Components/Layout/PublicLayout.razor
View File

@ -1,5 +1,4 @@
@inherits LayoutComponentBase @inherits LayoutComponentBase
@using StandManager.Components.Pages.Management
@Body @Body

104
StandManager/Components/Pages/ScanNew.razor Normal file
View File

@ -0,0 +1,104 @@
@page "/activate-qr-scan"
@using StandManager.Components.Layout
@inject NavigationManager Nav
@layout PublicLayout
<div class="page" style="min-height: 100dvh;">
<div class="page-wrapper" style="min-height: 100dvh;">
<div class="container container-tight py-4 d-flex flex-column" style="min-height: 100dvh;">
<!-- Top bar -->
<div class="d-flex align-items-center justify-content-between pt-4">
<button type="button"
class="btn btn-icon btn-ghost-secondary rounded-circle"
aria-label="Chiudi"
@onclick="OnClose">
<span class="ti ti-x fs-2"></span>
</button>
<div class="flex-fill"></div>
<button type="button"
class="btn btn-icon btn-ghost-secondary rounded-circle"
aria-label="Aiuto"
@onclick="OnHelp">
<span class="ti ti-help fs-2"></span>
</button>
</div>
<!-- Center content -->
<div class="d-flex flex-column align-items-center justify-content-center text-center flex-fill px-3">
<div class="mb-5">
<div class="qr-shell">
<span class="ti ti-qrcode qr-icon"></span>
<!-- corner accents -->
<span class="qr-corner tl"></span>
<span class="qr-corner tr"></span>
<span class="qr-corner bl"></span>
<span class="qr-corner br"></span>
</div>
</div>
<div style="max-width: 320px;">
<h1 class="h2 mb-2 fw-bold">Scan QR Code</h1>
<p class="text-secondary mb-0">
Align the QR code within the frame to automatically detect and identify the client.
</p>
</div>
</div>
<!-- Bottom actions -->
<div class="pb-4">
<div class="d-grid gap-3">
<button type="button"
class="btn btn-lg btn-primary d-inline-flex align-items-center justify-content-center gap-2"
@onclick="OnScan">
<span class="ti ti-scan fs-3"></span>
<span>Scan Code</span>
</button>
<button type="button"
class="btn btn-link text-secondary fw-bold"
@onclick="OnManual">
Enter code manually
</button>
</div>
<div style="height: .5rem;"></div>
</div>
</div>
</div>
</div>
@code {
[Parameter] public EventCallback Close { get; set; }
[Parameter] public EventCallback Help { get; set; }
[Parameter] public EventCallback Scan { get; set; }
[Parameter] public EventCallback Manual { get; set; }
private async Task OnClose()
{
if (Close.HasDelegate) await Close.InvokeAsync();
else Nav.NavigateTo("/");
}
private async Task OnHelp()
{
if (Help.HasDelegate) await Help.InvokeAsync();
}
private async Task OnScan()
{
if (Scan.HasDelegate) await Scan.InvokeAsync();
// qui poi ci attacchi la logica di attivazione camera/scan
}
private async Task OnManual()
{
if (Manual.HasDelegate) await Manual.InvokeAsync();
// es: Nav.NavigateTo("/enter-code");
}
}

65
StandManager/Components/Pages/ScanNew.razor.css Normal file
View File

@ -0,0 +1,65 @@
:root {
--sm-primary: #D63939;
}
/* Override "primary" in modo locale (senza toccare tutto il tema) */
.btn-primary {
background-color: var(--sm-primary) !important;
border-color: var(--sm-primary) !important;
}
.btn-primary:hover {
filter: brightness(0.92);
}
.qr-shell {
position: relative;
width: 160px;
height: 160px;
border-radius: 2.5rem;
display: grid;
place-items: center;
background: color-mix(in srgb, var(--sm-primary) 10%, transparent);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--sm-primary) 20%, transparent) inset;
color: var(--sm-primary);
}
.qr-icon {
font-size: 80px;
line-height: 1;
}
.qr-corner {
position: absolute;
width: 24px;
height: 24px;
}
.qr-corner.tl {
top: -4px; left: -4px;
border-left: 4px solid var(--sm-primary);
border-top: 4px solid var(--sm-primary);
border-top-left-radius: 0.75rem;
}
.qr-corner.tr {
top: -4px; right: -4px;
border-right: 4px solid var(--sm-primary);
border-top: 4px solid var(--sm-primary);
border-top-right-radius: 0.75rem;
}
.qr-corner.bl {
bottom: -4px; left: -4px;
border-left: 4px solid var(--sm-primary);
border-bottom: 4px solid var(--sm-primary);
border-bottom-left-radius: 0.75rem;
}
.qr-corner.br {
bottom: -4px; right: -4px;
border-right: 4px solid var(--sm-primary);
border-bottom: 4px solid var(--sm-primary);
border-bottom-right-radius: 0.75rem;
}