diff --git a/QRPay.sln b/QRPay.sln index ac5a0b7..9aab3fd 100644 --- a/QRPay.sln +++ b/QRPay.sln @@ -1,10 +1,8 @@  Microsoft Visual Studio Solution File, Format Version 12.00 # Visual Studio Version 18 -VisualStudioVersion = 18.1.11304.174 d18.0 +VisualStudioVersion = 18.1.11304.174 MinimumVisualStudioVersion = 10.0.40219.1 -Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "QRPayWeb", "QRPayWeb\QRPayWeb.csproj", "{FAB7CC2C-9167-44B9-84B9-3DEFEE32CCCB}" -EndProject Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "QRPay", "QRPay\QRPay.csproj", "{4568C485-BB58-42EF-9D66-7935D1F31FC8}" EndProject Global @@ -13,10 +11,6 @@ Global Release|Any CPU = Release|Any CPU EndGlobalSection GlobalSection(ProjectConfigurationPlatforms) = postSolution - {FAB7CC2C-9167-44B9-84B9-3DEFEE32CCCB}.Debug|Any CPU.ActiveCfg = Debug|Any CPU - {FAB7CC2C-9167-44B9-84B9-3DEFEE32CCCB}.Debug|Any CPU.Build.0 = Debug|Any CPU - {FAB7CC2C-9167-44B9-84B9-3DEFEE32CCCB}.Release|Any CPU.ActiveCfg = Release|Any CPU - {FAB7CC2C-9167-44B9-84B9-3DEFEE32CCCB}.Release|Any CPU.Build.0 = Release|Any CPU {4568C485-BB58-42EF-9D66-7935D1F31FC8}.Debug|Any CPU.ActiveCfg = Debug|Any CPU {4568C485-BB58-42EF-9D66-7935D1F31FC8}.Debug|Any CPU.Build.0 = Debug|Any CPU {4568C485-BB58-42EF-9D66-7935D1F31FC8}.Release|Any CPU.ActiveCfg = Release|Any CPU diff --git a/QRPay/Layout/MainLayout.razor b/QRPay/Layout/MainLayout.razor index 76eb725..f1445ee 100644 --- a/QRPay/Layout/MainLayout.razor +++ b/QRPay/Layout/MainLayout.razor @@ -1,16 +1,6 @@ @inherits LayoutComponentBase -
-
- -
- +
-
- About -
- -
- @Body -
+ @Body
diff --git a/QRPay/Layout/MainLayout.razor.css b/QRPay/Layout/MainLayout.razor.css index ecf25e5..32a0f93 100644 --- a/QRPay/Layout/MainLayout.razor.css +++ b/QRPay/Layout/MainLayout.razor.css @@ -5,6 +5,8 @@ } main { + width: 100%; + max-width: 500px; flex: 1; } @@ -75,3 +77,16 @@ main { padding-right: 1.5rem !important; } } + +* { + box-sizing: border-box; +} + +.main-container { + min-height: 100vh; + background: linear-gradient(135deg, #2d5a27 0%, #4a7c59 100%); + display: flex; + align-items: center; + justify-content: center; + padding: 20px; +} diff --git a/QRPay/Layout/NavMenu.razor b/QRPay/Layout/NavMenu.razor deleted file mode 100644 index 9fa8a21..0000000 --- a/QRPay/Layout/NavMenu.razor +++ /dev/null @@ -1,39 +0,0 @@ -
-
- QRPay - -
-
- -
- -
- -@code { - private bool collapseNavMenu = true; - - private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null; - - private void ToggleNavMenu() - { - collapseNavMenu = !collapseNavMenu; - } -} diff --git a/QRPay/Layout/NavMenu.razor.css b/QRPay/Layout/NavMenu.razor.css deleted file mode 100644 index 617b89c..0000000 --- a/QRPay/Layout/NavMenu.razor.css +++ /dev/null @@ -1,83 +0,0 @@ -.navbar-toggler { - background-color: rgba(255, 255, 255, 0.1); -} - -.top-row { - min-height: 3.5rem; - background-color: rgba(0,0,0,0.4); -} - -.navbar-brand { - font-size: 1.1rem; -} - -.bi { - display: inline-block; - position: relative; - width: 1.25rem; - height: 1.25rem; - margin-right: 0.75rem; - top: -1px; - background-size: cover; -} - -.bi-house-door-fill-nav-menu { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E"); -} - -.bi-plus-square-fill-nav-menu { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E"); -} - -.bi-list-nested-nav-menu { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E"); -} - -.nav-item { - font-size: 0.9rem; - padding-bottom: 0.5rem; -} - - .nav-item:first-of-type { - padding-top: 1rem; - } - - .nav-item:last-of-type { - padding-bottom: 1rem; - } - - .nav-item ::deep a { - color: #d7d7d7; - border-radius: 4px; - height: 3rem; - display: flex; - align-items: center; - line-height: 3rem; - } - -.nav-item ::deep a.active { - background-color: rgba(255,255,255,0.37); - color: white; -} - -.nav-item ::deep a:hover { - background-color: rgba(255,255,255,0.1); - color: white; -} - -@media (min-width: 641px) { - .navbar-toggler { - display: none; - } - - .collapse { - /* Never collapse the sidebar for wide screens */ - display: block; - } - - .nav-scrollable { - /* Allow sidebar to scroll for tall menus */ - height: calc(100vh - 3.5rem); - overflow-y: auto; - } -} diff --git a/QRPay/Pages/Counter.razor b/QRPay/Pages/Counter.razor deleted file mode 100644 index ef23cb3..0000000 --- a/QRPay/Pages/Counter.razor +++ /dev/null @@ -1,18 +0,0 @@ -@page "/counter" - -Counter - -

Counter

- -

Current count: @currentCount

- - - -@code { - private int currentCount = 0; - - private void IncrementCount() - { - currentCount++; - } -} diff --git a/QRPay/Pages/Home.razor b/QRPay/Pages/Home.razor index 12fc17d..46d20a1 100644 --- a/QRPay/Pages/Home.razor +++ b/QRPay/Pages/Home.razor @@ -1,80 +1,182 @@ @page "/" @using QRCoder @using SixLabors.ImageSharp.Formats -Home +@using System.ComponentModel.DataAnnotations +QRPay - QR Payment Generator -
-
-
-
Create QR payment barcode
+
+ @if (!_showQRCode) + { + +
+ +
+ +

QRPay

+

Generate QR payment codes instantly

+
+ + + + + +
+
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ + +
+
-
-
- - + } + else + { + +
+
+

Payment QR Code

+

Scan this code with your banking app

-
- - + +
+ Payment QR Code
-
- - -
-
- - + +
+
+ To: + @paymentModel.Name +
+
+ Amount: + €@paymentModel.Amount.ToString("F2") +
+ @if (!string.IsNullOrWhiteSpace(paymentModel.Remark)) + { +
+ Reference: + @paymentModel.Remark +
+ }
+ +
-
- -
- @if (_show) - { -
- -
- } -
+ }
- @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(); + } } \ No newline at end of file diff --git a/QRPay/Pages/Home.razor.css b/QRPay/Pages/Home.razor.css new file mode 100644 index 0000000..c75e3cf --- /dev/null +++ b/QRPay/Pages/Home.razor.css @@ -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; + } +} \ No newline at end of file diff --git a/QRPay/Pages/Weather.razor b/QRPay/Pages/Weather.razor deleted file mode 100644 index 3ea2b1c..0000000 --- a/QRPay/Pages/Weather.razor +++ /dev/null @@ -1,57 +0,0 @@ -@page "/weather" -@inject HttpClient Http - -Weather - -

Weather

- -

This component demonstrates fetching data from the server.

- -@if (forecasts == null) -{ -

Loading...

-} -else -{ - - - - - - - - - - - @foreach (var forecast in forecasts) - { - - - - - - - } - -
DateTemp. (C)Temp. (F)Summary
@forecast.Date.ToShortDateString()@forecast.TemperatureC@forecast.TemperatureF@forecast.Summary
-} - -@code { - private WeatherForecast[]? forecasts; - - protected override async Task OnInitializedAsync() - { - forecasts = await Http.GetFromJsonAsync("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); - } -} diff --git a/QRPay/QRPay.csproj b/QRPay/QRPay.csproj index b416c18..5d5fe1e 100644 --- a/QRPay/QRPay.csproj +++ b/QRPay/QRPay.csproj @@ -14,4 +14,8 @@ + + + + diff --git a/QRPay/wwwroot/css/app.css b/QRPay/wwwroot/css/app.css index fe44b1d..75f9a93 100644 --- a/QRPay/wwwroot/css/app.css +++ b/QRPay/wwwroot/css/app.css @@ -1,5 +1,15 @@ +/* Global Styles for QRPay */ html, body { - font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; + margin: 0; + padding: 0; + box-sizing: border-box; + background: linear-gradient(135deg, #2d5a27 0%, #4a7c59 100%); + min-height: 100vh; +} + +*, *::before, *::after { + box-sizing: inherit; } h1:focus { @@ -7,109 +17,162 @@ h1:focus { } a, .btn-link { - color: #0071c1; + color: #4a7c59; + text-decoration: none; +} + +a:hover, .btn-link:hover { + color: #2d5a27; } .btn-primary { color: #fff; - background-color: #1b6ec2; - border-color: #1861ac; + background: linear-gradient(135deg, #2d5a27, #4a7c59); + border: none; + border-radius: 8px; + padding: 12px 24px; + font-weight: 600; } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { - box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; + box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(74, 124, 89, 0.4); } .content { - padding-top: 1.1rem; + padding: 0; } .valid.modified:not([type=checkbox]) { - outline: 1px solid #26b050; + outline: 2px solid #10b981; + border-color: #10b981; } .invalid { - outline: 1px solid red; + outline: 2px solid #ef4444; + border-color: #ef4444; } .validation-message { - color: red; + color: #ef4444; + font-size: 0.875rem; + font-weight: 500; + margin-top: 4px; } #blazor-error-ui { color-scheme: light only; - background: lightyellow; + background: linear-gradient(135deg, #dc2626, #ef4444); bottom: 0; - box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); + box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15); box-sizing: border-box; display: none; left: 0; - padding: 0.6rem 1.25rem 0.7rem 1.25rem; + padding: 1rem 1.25rem; position: fixed; width: 100%; z-index: 1000; + color: white; + font-weight: 500; + border-radius: 12px 12px 0 0; } - #blazor-error-ui .dismiss { - cursor: pointer; - position: absolute; - right: 0.75rem; - top: 0.5rem; - } +#blazor-error-ui .dismiss { + cursor: pointer; + position: absolute; + right: 0.75rem; + top: 0.5rem; + font-size: 1.2rem; + opacity: 0.8; + transition: opacity 0.2s; +} + +#blazor-error-ui .dismiss:hover { + opacity: 1; +} .blazor-error-boundary { - background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; + background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, linear-gradient(135deg, #dc2626, #ef4444); padding: 1rem 1rem 1rem 3.7rem; color: white; + border-radius: 12px; + margin: 1rem; } - .blazor-error-boundary::after { - content: "An error has occurred." - } +.blazor-error-boundary::after { + content: "An error has occurred." +} .loading-progress { position: absolute; display: block; width: 8rem; height: 8rem; - inset: 20vh 0 auto 0; + inset: 40vh 0 auto 0; margin: 0 auto 0 auto; } - .loading-progress circle { - fill: none; - stroke: #e0e0e0; - stroke-width: 0.6rem; - transform-origin: 50% 50%; - transform: rotate(-90deg); - } +.loading-progress circle { + fill: none; + stroke: rgba(255, 255, 255, 0.2); + stroke-width: 0.6rem; + transform-origin: 50% 50%; + transform: rotate(-90deg); +} - .loading-progress circle:last-child { - stroke: #1b6ec2; - stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; - transition: stroke-dasharray 0.05s ease-in-out; - } +.loading-progress circle:last-child { + stroke: #ffffff; + stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; + transition: stroke-dasharray 0.05s ease-in-out; +} .loading-progress-text { position: absolute; text-align: center; - font-weight: bold; - inset: calc(20vh + 3.25rem) 0 auto 0.2rem; + font-weight: 600; + inset: calc(40vh + 3.25rem) 0 auto 0.2rem; + color: #ffffff; + font-size: 1.1rem; } - .loading-progress-text:after { - content: var(--blazor-load-percentage-text, "Loading"); - } +.loading-progress-text:after { + content: var(--blazor-load-percentage-text, "Loading QRPay"); +} code { - color: #c02d76; + color: #4a7c59; + background: rgba(74, 124, 89, 0.1); + padding: 2px 6px; + border-radius: 4px; + font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; } -.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { - color: var(--bs-secondary-color); - text-align: end; -} - -.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { +/* Form Controls Override */ +.form-floating > .form-control-plaintext::placeholder, +.form-floating > .form-control::placeholder { + color: #9ca3af; text-align: start; +} + +.form-floating > .form-control-plaintext:focus::placeholder, +.form-floating > .form-control:focus::placeholder { + text-align: start; + opacity: 0.7; +} + +/* Custom scrollbar for webkit browsers */ +::-webkit-scrollbar { + width: 8px; +} + +::-webkit-scrollbar-track { + background: rgba(255, 255, 255, 0.1); +} + +::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.3); + border-radius: 4px; +} + +::-webkit-scrollbar-thumb:hover { + background: rgba(255, 255, 255, 0.5); } \ No newline at end of file diff --git a/QRPay/wwwroot/favicon.svg b/QRPay/wwwroot/favicon.svg new file mode 100644 index 0000000..58d8e23 --- /dev/null +++ b/QRPay/wwwroot/favicon.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/QRPay/wwwroot/index.html b/QRPay/wwwroot/index.html index 0543368..8330cc0 100644 --- a/QRPay/wwwroot/index.html +++ b/QRPay/wwwroot/index.html @@ -9,7 +9,7 @@ - + diff --git a/QRPay/wwwroot/logo.svg b/QRPay/wwwroot/logo.svg new file mode 100644 index 0000000..899e788 --- /dev/null +++ b/QRPay/wwwroot/logo.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/QRPay/wwwroot/sample-data/weather.json b/QRPay/wwwroot/sample-data/weather.json deleted file mode 100644 index b745973..0000000 --- a/QRPay/wwwroot/sample-data/weather.json +++ /dev/null @@ -1,27 +0,0 @@ -[ - { - "date": "2022-01-06", - "temperatureC": 1, - "summary": "Freezing" - }, - { - "date": "2022-01-07", - "temperatureC": 14, - "summary": "Bracing" - }, - { - "date": "2022-01-08", - "temperatureC": -13, - "summary": "Freezing" - }, - { - "date": "2022-01-09", - "temperatureC": -16, - "summary": "Balmy" - }, - { - "date": "2022-01-10", - "temperatureC": -2, - "summary": "Chilly" - } -]