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/wwwroot/css/app.css
+110 -47
View File
@@ -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);
}
QRPay/wwwroot/favicon.svg
+17
View File
@@ -0,0 +1,17 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<circle cx="16" cy="16" r="15" fill="#2d5a27"/>
<rect x="6" y="11" width="14" height="8" rx="1" fill="#6ee7b7"/>
<circle cx="9.5" cy="15" r="1.5" fill="#059669" opacity="0.3"/>
<circle cx="16.5" cy="15" r="1.5" fill="#059669" opacity="0.3"/>
<path d="M21 10 L26 12.5 L23.5 12.5 L23.5 17.5 L26 17.5 L21 20 L23.5 16.25 L21 16.25 Z" fill="#ffffff"/>
<g fill="#ffffff">
<rect x="7" y="22.5" width="1" height="1"/>
<rect x="8.5" y="22.5" width="1" height="1"/>
<rect x="10" y="22.5" width="1" height="1"/>
<rect x="7" y="24" width="1" height="1"/>
<rect x="10" y="24" width="1" height="1"/>
<rect x="7" y="25.5" width="1" height="1"/>
<rect x="8.5" y="25.5" width="1" height="1"/>
<rect x="10" y="25.5" width="1" height="1"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 862 B

QRPay/wwwroot/index.html
+1 -1
View File
@@ -9,7 +9,7 @@
<link rel="preload" id="webassembly" />
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="css/app.css" />
<link rel="icon" type="image/png" href="favicon.png" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<link href="QRPay.styles.css" rel="stylesheet" />
<script type="importmap"></script>
</head>
QRPay/wwwroot/logo.svg
+25
View File
@@ -0,0 +1,25 @@
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
<!-- Background circle -->
<circle cx="32" cy="32" r="30" fill="#2d5a27" stroke="#4a7c59" stroke-width="2"/>
<!-- Bank note -->
<rect x="12" y="22" width="28" height="16" rx="2" fill="#6ee7b7" stroke="#059669" stroke-width="1"/>
<circle cx="19" cy="30" r="3" fill="#059669" opacity="0.3"/>
<circle cx="33" cy="30" r="3" fill="#059669" opacity="0.3"/>
<rect x="24" y="27" width="4" height="6" fill="#059669" opacity="0.5"/>
<!-- Transfer arrow -->
<path d="M42 20 L52 25 L47 25 L47 35 L52 35 L42 40 L47 32.5 L42 32.5 Z" fill="#ffffff" stroke="#d1fae5" stroke-width="0.5"/>
<!-- QR code pattern -->
<g fill="#ffffff">
<rect x="14" y="45" width="2" height="2"/>
<rect x="17" y="45" width="2" height="2"/>
<rect x="20" y="45" width="2" height="2"/>
<rect x="14" y="48" width="2" height="2"/>
<rect x="20" y="48" width="2" height="2"/>
<rect x="14" y="51" width="2" height="2"/>
<rect x="17" y="51" width="2" height="2"/>
<rect x="20" y="51" width="2" height="2"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

QRPay/wwwroot/sample-data/weather.json
-27
View File
@@ -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"
}
]