Michal/QRPayWeb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign: single-page QRPay app with modern UI

Browse Source 
Removed sidebar, Counter, and Weather pages. Rebuilt Home.razor as a focused QR payment generator with validation, responsive card layout, and QR code display. Added new CSS for modern look, updated global styles, and introduced SVG logo/favicon. Cleaned up solution and project files for a streamlined, single-page experience.
This commit is contained in:
Michal Vrba
2025-12-19 15:44:09 +01:00
parent 07bf9da4e1
commit beb5830279
15 changed files with 662 additions and 345 deletions
Download Patch File Download Diff File Expand all files Collapse all files
QRPay/Pages/Counter.razor
-18
View File
@@ -1,18 +0,0 @@
@page "/counter"
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
}
QRPay/Pages/Home.razor
+156 -54
View File
@@ -1,80 +1,182 @@
@page "/"
@using QRCoder
@using SixLabors.ImageSharp.Formats
<PageTitle>Home</PageTitle>
@using System.ComponentModel.DataAnnotations
<PageTitle>QRPay - QR Payment Generator</PageTitle>
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Create QR payment barcode</h5>
<div class="qrpay-container">
@if (!_showQRCode)
{
<!-- Form View -->
<div class="qrpay-card">
<!-- Logo and Header -->
<div class="qrpay-header">
<div class="qrpay-logo">
<img src="logo.svg" alt="QRPay Logo" />
</div>
<h1 class="qrpay-title">QRPay</h1>
<p class="qrpay-subtitle">Generate QR payment codes instantly</p>
</div>
<!-- Form -->
<EditForm Model="@paymentModel" OnValidSubmit="@GenerateQRCode">
<DataAnnotationsValidator />
<div class="qrpay-form">
<div class="form-group">
<label for="name" class="form-label">Beneficiary Name</label>
<InputText @bind-Value="paymentModel.Name" class="form-control" id="name" placeholder="Enter beneficiary name" />
<ValidationMessage For="@(() => paymentModel.Name)" class="validation-message" />
</div>
<div class="form-group">
<label for="iban" class="form-label">IBAN</label>
<InputText @bind-Value="paymentModel.IBAN" class="form-control" id="iban" placeholder="Enter IBAN (e.g., SK89 7500 0000 0000 1234 5671)" />
<ValidationMessage For="@(() => paymentModel.IBAN)" class="validation-message" />
</div>
<div class="form-group">
<label for="amount" class="form-label">Amount (EUR)</label>
<InputNumber @bind-Value="paymentModel.Amount" class="form-control" id="amount" placeholder="0.00" step="0.01" />
<ValidationMessage For="@(() => paymentModel.Amount)" class="validation-message" />
</div>
<div class="form-group">
<label for="remark" class="form-label">Payment Reference (Optional)</label>
<InputText @bind-Value="paymentModel.Remark" class="form-control" id="remark" placeholder="Enter payment reference or note" />
<ValidationMessage For="@(() => paymentModel.Remark)" class="validation-message" />
</div>
<button type="submit" class="btn-generate" disabled="@_isGenerating">
@if (_isGenerating)
{
<span class="spinner"></span>
<span>Generating...</span>
}
else
{
<span>Generate QR Code</span>
}
</button>
</div>
</EditForm>
</div>
<div class="modal-body">
<div class="form-group">
<label for="input0">Name</label>
<input type="text" class="form-control" id="input0" @bind="Name" placeholder="Enter beneficiary name">
}
else
{
<!-- QR Code View -->
<div class="qrcode-container">
<div class="qrcode-header">
<h2>Payment QR Code</h2>
<p>Scan this code with your banking app</p>
</div>
<div class="form-group">
<label for="input1">IBAN</label>
<input type="text" class="form-control" id="input1" @bind="IBAN" placeholder="Enter IBAN">
<div class="qrcode-display">
<img src="@QRCodeStr" alt="Payment QR Code" />
</div>
<div class="form-group">
<label for="input2">Amount</label>
<input type="text" class="form-control" id="input2" placeholder="Enter amount in EUR" @bind="Amount">
</div>
<div class="form-group">
<label for="input3">Remark</label>
<input type="text" class="form-control" id="input3" placeholder="Enter optional remark" @bind="Remark">
<div class="payment-details">
<div class="detail-row">
<span class="detail-label">To:</span>
<span class="detail-value">@paymentModel.Name</span>
</div>
<div class="detail-row">
<span class="detail-label">Amount:</span>
<span class="detail-value">€@paymentModel.Amount.ToString("F2")</span>
</div>
@if (!string.IsNullOrWhiteSpace(paymentModel.Remark))
{
<div class="detail-row">
<span class="detail-label">Reference:</span>
<span class="detail-value">@paymentModel.Remark</span>
</div>
}
</div>
<button class="btn-back" @onclick="@GoBack">
<span>← Create New Payment</span>
</button>
</div>
<div class="modal-footer">
<button class="btn btn-primary" @onclick="@GenerateQRCode">Generate</button>
</div>
@if (_show)
{
<div class="text-center">
<img src="@QRCodeStr" style="width:200px;height:200px" />
</div>
}
</div>
}
</div>
@code {
string IBAN { get; set; } = string.Empty;
decimal Amount { get; set; } = 0;
string Remark { get; set; } = string.Empty;
string QRCodeStr { get; set; } = string.Empty;
string Name { get; set; } = string.Empty;
private PaymentModel paymentModel = new();
private string QRCodeStr = string.Empty;
private bool _showQRCode = false;
private bool _isGenerating = false;
bool _show = false;
public void GenerateQRCode()
public class PaymentModel
{
QRCodeStr = string.Empty;
[Required(ErrorMessage = "Beneficiary name is required")]
[StringLength(70, ErrorMessage = "Name cannot exceed 70 characters")]
public string Name { get; set; } = string.Empty;
if (!string.IsNullOrWhiteSpace(IBAN))
[Required(ErrorMessage = "IBAN is required")]
[RegularExpression(@"^[A-Z]{2}[0-9]{2}[A-Z0-9]{4}[0-9]{7}([A-Z0-9]?){0,16}$", ErrorMessage = "Please enter a valid IBAN")]
public string IBAN { get; set; } = string.Empty;
[Required(ErrorMessage = "Amount is required")]
[Range(0.01, 999999.99, ErrorMessage = "Amount must be between €0.01 and €999,999.99")]
public decimal Amount { get; set; } = 0;
[StringLength(140, ErrorMessage = "Remark cannot exceed 140 characters")]
public string? Remark { get; set; } = string.Empty;
}
public async Task GenerateQRCode()
{
_isGenerating = true;
StateHasChanged();
// Small delay to show loading state
await Task.Delay(500);
try
{
QRCodeStr = string.Empty;
using (var ms = new MemoryStream())
if (!string.IsNullOrWhiteSpace(paymentModel.IBAN))
{
QRCodeGenerator qRCodeGenerator = new QRCodeGenerator();
using (var ms = new MemoryStream())
{
QRCodeGenerator qRCodeGenerator = new QRCodeGenerator();
var payment = new PayBySquareTextGenerator.Payment(IBAN.Replace(" ", ""), Amount, "EUR", "1", Remark);
payment.ConstantSymbol = "0308";
payment.BeneficiaryName = Name;
var payment = new PayBySquareTextGenerator.Payment(
paymentModel.IBAN.Replace(" ", ""),
paymentModel.Amount,
"EUR",
"1",
paymentModel.Remark ?? string.Empty);
payment.ConstantSymbol = "0308";
payment.BeneficiaryName = paymentModel.Name;
var a = new PayBySquareTextGenerator.PayBySquareOverkill(payment);
var stringData = a.GeneratePayBySquareOverkillString();
var payBySquare = new PayBySquareTextGenerator.PayBySquareOverkill(payment);
var stringData = payBySquare.GeneratePayBySquareOverkillString();
// Generate QR code data
using var qrCodeData = QRCodeGenerator.GenerateQrCode(stringData, QRCodeGenerator.ECCLevel.Q);
using var qrCode = new PngByteQRCode(qrCodeData);
byte[] qrCodeImage = qrCode.GetGraphic(20);
// Generate QR code data
using var qrCodeData = QRCodeGenerator.GenerateQrCode(stringData, QRCodeGenerator.ECCLevel.Q);
using var qrCode = new PngByteQRCode(qrCodeData);
byte[] qrCodeImage = qrCode.GetGraphic(20);
QRCodeStr = $"data:image/png;base64,{Convert.ToBase64String(qrCodeImage)}";
QRCodeStr = $"data:image/png;base64,{Convert.ToBase64String(qrCodeImage)}";
}
_showQRCode = true;
}
_show = true;
}
finally
{
_isGenerating = false;
StateHasChanged();
}
}
public void GoBack()
{
_showQRCode = false;
QRCodeStr = string.Empty;
paymentModel = new PaymentModel(); // Reset the form
StateHasChanged();
}
}
QRPay/Pages/Home.razor.css
+331
View File
@@ -0,0 +1,331 @@
/* QRPay Component Styles */
.qrpay-container {
width: 100%;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
/* Form Card Styles */
.qrpay-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 24px;
padding: 40px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 500px;
animation: slideUp 0.6s ease-out;
}
/* Header Styles */
.qrpay-header {
text-align: center;
margin-bottom: 40px;
}
.qrpay-logo {
margin-bottom: 20px;
}
.qrpay-logo img {
width: 80px;
height: 80px;
filter: drop-shadow(0 4px 12px rgba(45, 90, 39, 0.3));
}
.qrpay-title {
font-size: 2.5rem;
font-weight: 700;
background: linear-gradient(135deg, #2d5a27, #4a7c59);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin: 0 0 8px 0;
}
.qrpay-subtitle {
color: #6b7280;
font-size: 1.1rem;
margin: 0;
font-weight: 400;
}
/* Form Styles */
.qrpay-form {
display: flex;
flex-direction: column;
gap: 24px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.form-label {
font-weight: 600;
color: #374151;
font-size: 0.95rem;
margin: 0;
}
.form-control {
padding: 16px 20px;
border: 2px solid #e5e7eb;
border-radius: 12px;
font-size: 1rem;
transition: all 0.3s ease;
background: #ffffff;
}
.form-control:focus {
outline: none;
border-color: #4a7c59;
box-shadow: 0 0 0 4px rgba(74, 124, 89, 0.1);
transform: translateY(-1px);
}
.form-control:invalid {
border-color: #ef4444;
}
.validation-message {
color: #ef4444;
font-size: 0.875rem;
font-weight: 500;
margin-top: 4px;
display: block;
animation: fadeIn 0.3s ease;
}
/* Generate Button */
.btn-generate {
background: linear-gradient(135deg, #2d5a27, #4a7c59);
color: white;
border: none;
padding: 18px 32px;
border-radius: 12px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 16px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
box-shadow: 0 4px 12px rgba(45, 90, 39, 0.3);
}
.btn-generate:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(45, 90, 39, 0.4);
}
.btn-generate:active:not(:disabled) {
transform: translateY(0);
}
.btn-generate:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}
.spinner {
width: 20px;
height: 20px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top-color: white;
animation: spin 1s ease-in-out infinite;
}
/* QR Code Display Styles */
.qrcode-container {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 24px;
padding: 40px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 500px;
text-align: center;
animation: slideUp 0.6s ease-out;
}
.qrcode-header {
margin-bottom: 32px;
}
.qrcode-header h2 {
font-size: 2rem;
font-weight: 700;
color: #2d5a27;
margin: 0 0 8px 0;
}
.qrcode-header p {
color: #6b7280;
font-size: 1.1rem;
margin: 0;
}
.qrcode-display {
background: #ffffff;
border-radius: 16px;
padding: 24px;
margin-bottom: 32px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.qrcode-display img {
width: 280px;
height: 280px;
border-radius: 8px;
}
/* Payment Details */
.payment-details {
background: #f8fafc;
border-radius: 16px;
padding: 24px;
margin-bottom: 32px;
}
.detail-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid #e2e8f0;
}
.detail-row:last-child {
border-bottom: none;
}
.detail-label {
font-weight: 600;
color: #374151;
}
.detail-value {
font-weight: 500;
color: #2d5a27;
text-align: right;
word-break: break-word;
max-width: 60%;
}
/* Back Button */
.btn-back {
background: #f3f4f6;
color: #374151;
border: 2px solid #e5e7eb;
padding: 16px 32px;
border-radius: 12px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
}
.btn-back:hover {
background: #e5e7eb;
border-color: #d1d5db;
transform: translateY(-1px);
}
.btn-back:active {
transform: translateY(0);
}
/* Animations */
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* Responsive Design */
@media (max-width: 640px) {
.qrpay-card,
.qrcode-container {
padding: 24px;
margin: 16px;
border-radius: 16px;
}
.qrpay-title {
font-size: 2rem;
}
.qrcode-display img {
width: 240px;
height: 240px;
}
.detail-row {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.detail-value {
max-width: 100%;
text-align: left;
}
}
@media (max-width: 480px) {
.qrpay-container {
padding: 12px;
}
.qrpay-logo img {
width: 60px;
height: 60px;
}
.qrpay-title {
font-size: 1.75rem;
}
.qrcode-display img {
width: 200px;
height: 200px;
}
}
QRPay/Pages/Weather.razor
-57
View File
@@ -1,57 +0,0 @@
@page "/weather"
@inject HttpClient Http
<PageTitle>Weather</PageTitle>
<h1>Weather</h1>
<p>This component demonstrates fetching data from the server.</p>
@if (forecasts == null)
{
<p><em>Loading...</em></p>
}
else
{
<table class="table">
<thead>
<tr>
<th>Date</th>
<th aria-label="Temperature in Celsius">Temp. (C)</th>
<th aria-label="Temperature in Fahrenheit">Temp. (F)</th>
<th>Summary</th>
</tr>
</thead>
<tbody>
@foreach (var forecast in forecasts)
{
<tr>
<td>@forecast.Date.ToShortDateString()</td>
<td>@forecast.TemperatureC</td>
<td>@forecast.TemperatureF</td>
<td>@forecast.Summary</td>
</tr>
}
</tbody>
</table>
}
@code {
private WeatherForecast[]? forecasts;
protected override async Task OnInitializedAsync()
{
forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("sample-data/weather.json");
}
public class WeatherForecast
{
public DateOnly Date { get; set; }
public int TemperatureC { get; set; }
public string? Summary { get; set; }
public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
}
}