From 37cd000d16a0c679d52e627910f2bb09be632387 Mon Sep 17 00:00:00 2001 From: Michal Vrba Date: Fri, 19 Dec 2025 16:09:11 +0100 Subject: [PATCH] UI update --- QRPay/wwwroot/css/app.css | 224 ++++++++++++++++++++++++++++++++------ QRPay/wwwroot/index.html | 31 +++++- 2 files changed, 216 insertions(+), 39 deletions(-) diff --git a/QRPay/wwwroot/css/app.css b/QRPay/wwwroot/css/app.css index b29d6f2..64c85ad 100644 --- a/QRPay/wwwroot/css/app.css +++ b/QRPay/wwwroot/css/app.css @@ -109,7 +109,7 @@ a:hover, .btn-link:hover { } .blazor-error-boundary { - background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA9NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA6OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA86LjA1NDcgMjYzLjU3NiA4Ni4wNTQ3WiIgZmlsbD0iI0ZGRTUwMCIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9nPjwvc3ZnPg==) no-repeat 1rem/1.8rem, linear-gradient(135deg, #dc2626, #ef4444); + background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA9NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA6OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3WiIgZmlsbD0iI0ZGRTUwMCIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9nPjwvc3ZnPg==) no-repeat 1rem/1.8rem, linear-gradient(135deg, #dc2626, #ef4444); padding: 1rem 1rem 1rem 3.7rem; color: white; border-radius: 12px; @@ -120,42 +120,145 @@ a:hover, .btn-link:hover { content: "An error has occurred." } -.loading-progress { - position: absolute; - display: block; - width: 8rem; - height: 8rem; - inset: 40vh 0 auto 0; - margin: 0 auto 0 auto; +/* Modern Loading Screen Styles */ +.loading-container { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + background: linear-gradient(135deg, #2d5a27 0%, #4a7c59 100%); + z-index: 9999; } -.loading-progress circle { +.loading-content { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + padding: 2rem; + animation: fadeInUp 0.8s ease-out; +} + +/* Logo Styles */ +.loading-logo { + margin-bottom: 1.5rem; + animation: logoFloat 3s ease-in-out infinite; +} + +.loading-logo img { + width: 120px; + height: 120px; + filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.2)); +} + +/* Title Styles */ +.loading-title { + font-size: 3rem; + font-weight: 700; + color: #ffffff; + margin: 0 0 2rem 0; + text-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); + animation: titleGlow 2s ease-in-out infinite alternate; +} + +/* Progress Indicator */ +.loading-progress-wrapper { + position: relative; + margin-bottom: 1.5rem; +} + +.loading-progress { + width: 80px; + height: 80px; + display: block; +} + +.loading-track { fill: none; - stroke: rgba(255, 255, 255, 0.2); - stroke-width: 0.6rem; + stroke: rgba(255, 255, 255, 0.15); + stroke-width: 4; transform-origin: 50% 50%; transform: rotate(-90deg); } -.loading-progress circle:last-child { +.loading-fill { + fill: none; stroke: #ffffff; + stroke-width: 4; + stroke-linecap: round; + transform-origin: 50% 50%; + transform: rotate(-90deg); stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; - transition: stroke-dasharray 0.05s ease-in-out; + transition: stroke-dasharray 0.3s ease-in-out; + filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3)); } +/* Loading Text */ .loading-progress-text { - position: absolute; - text-align: center; - font-weight: 600; - inset: calc(40vh + 3.25rem) 0 auto 0.2rem; color: #ffffff; - font-size: 1.1rem; + font-size: 1rem; + font-weight: 600; + margin-bottom: 0.5rem; + opacity: 0.9; + animation: pulse 2s ease-in-out infinite; } .loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading QRPay"); } +/* Subtitle */ +.loading-subtitle { + color: rgba(255, 255, 255, 0.8); + font-size: 1rem; + font-weight: 400; + margin: 0; + opacity: 0.8; +} + +/* Animations */ +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes logoFloat { + 0%, 100% { + transform: translateY(0px) scale(1); + } + 50% { + transform: translateY(-10px) scale(1.05); + } +} + +@keyframes titleGlow { + 0% { + text-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 0 20px rgba(255, 255, 255, 0.1); + } + 100% { + text-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 0 30px rgba(255, 255, 255, 0.2); + } +} + +@keyframes pulse { + 0%, 100% { + opacity: 0.7; + } + 50% { + opacity: 1; + } +} + code { color: #4a7c59; background: rgba(74, 124, 89, 0.1); @@ -218,16 +321,27 @@ code { font-size: 16px !important; } - /* Loading progress adjustments for mobile */ + /* Mobile loading adjustments */ + .loading-logo img { + width: 100px; + height: 100px; + } + + .loading-title { + font-size: 2.5rem; + } + .loading-progress { - width: 6rem; - height: 6rem; - inset: 35vh 0 auto 0; + width: 70px; + height: 70px; } .loading-progress-text { - inset: calc(35vh + 2.5rem) 0 auto 0.2rem; - font-size: 1rem; + font-size: 0.9rem; + } + + .loading-subtitle { + font-size: 0.9rem; } } @@ -237,15 +351,31 @@ code { font-size: 14px; } + .loading-content { + padding: 1.5rem; + } + + .loading-logo img { + width: 80px; + height: 80px; + } + + .loading-title { + font-size: 2rem; + margin-bottom: 1.5rem; + } + .loading-progress { - width: 5rem; - height: 5rem; - inset: 30vh 0 auto 0; + width: 60px; + height: 60px; } .loading-progress-text { - inset: calc(30vh + 2rem) 0 auto 0.2rem; - font-size: 0.9rem; + font-size: 0.85rem; + } + + .loading-subtitle { + font-size: 0.85rem; } #blazor-error-ui { @@ -256,12 +386,31 @@ code { /* Landscape mobile adjustments */ @media (max-height: 600px) and (orientation: landscape) { - .loading-progress { - inset: 20vh 0 auto 0; + .loading-content { + padding: 1rem; } - .loading-progress-text { - inset: calc(20vh + 3.25rem) 0 auto 0.2rem; + .loading-logo { + margin-bottom: 1rem; + } + + .loading-logo img { + width: 60px; + height: 60px; + } + + .loading-title { + font-size: 1.75rem; + margin-bottom: 1rem; + } + + .loading-progress { + width: 50px; + height: 50px; + } + + .loading-progress-wrapper { + margin-bottom: 1rem; } } @@ -282,7 +431,14 @@ code { transition-duration: 0.01ms !important; } - .loading-progress circle { + .loading-fill { transition: none !important; } + + .loading-logo, + .loading-title, + .loading-progress-text, + .loading-content { + animation: none !important; + } } \ No newline at end of file diff --git a/QRPay/wwwroot/index.html b/QRPay/wwwroot/index.html index 3fa5377..bff5d8b 100644 --- a/QRPay/wwwroot/index.html +++ b/QRPay/wwwroot/index.html @@ -21,11 +21,32 @@
- - - - -
+ +
+
+ + + + +

QRPay

+ + +
+ + + + +
+ + +
+ + +

Initializing secure payment system

+
+