From 1013e3e133c039c55149b799b6522d0c1b7f2aa4 Mon Sep 17 00:00:00 2001 From: Michal Vrba Date: Sun, 14 Dec 2025 12:44:00 +0100 Subject: [PATCH] reposnsive design Enhance responsive design and mobile usability Major CSS overhaul for improved responsiveness and accessibility: - Add .main-container for full viewport coverage - Refactor Home.razor.css with extensive media queries for tablet, desktop, mobile, and print - Improve input, button, and feature section layouts - Add word-break/overflow handling for long text - Support high-DPI, reduced motion, and print styles - Update app.css for better font rendering, touch targets, and mobile performance These changes ensure a more user-friendly experience across all devices. --- TuneRipper/Layout/MainLayout.razor | 8 + TuneRipper/Pages/Home.razor.css | 354 ++++++++++++++++++++++++++--- TuneRipper/wwwroot/css/app.css | 75 +++++- 3 files changed, 396 insertions(+), 41 deletions(-) diff --git a/TuneRipper/Layout/MainLayout.razor b/TuneRipper/Layout/MainLayout.razor index 0bc05ce..3d56031 100644 --- a/TuneRipper/Layout/MainLayout.razor +++ b/TuneRipper/Layout/MainLayout.razor @@ -3,3 +3,11 @@
@Body
+ + diff --git a/TuneRipper/Pages/Home.razor.css b/TuneRipper/Pages/Home.razor.css index 7e84621..7e27ca1 100644 --- a/TuneRipper/Pages/Home.razor.css +++ b/TuneRipper/Pages/Home.razor.css @@ -1,3 +1,29 @@ +/* Page Background and Container */ +.page-background { + background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #1e88e5 100%); + min-height: 100vh; + min-height: 100dvh; /* Dynamic viewport height for mobile */ + padding: 20px 10px 40px 10px; /* Add bottom padding for scroll space */ + display: block; /* Changed from flex to block for better scroll behavior */ + position: relative; + overflow-x: hidden; + overflow-y: auto; + width: 100%; +} + +/* Music notes positioning */ +.music-notes { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + height: 100dvh; + pointer-events: none; + z-index: 1; + overflow: hidden; +} + .hero-section { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); @@ -7,7 +33,12 @@ text-align: center; max-width: 600px; width: 100%; - margin: 0 auto; + margin: 20px auto; /* Center horizontally */ + position: relative; + z-index: 10; + /* Ensure content can expand vertically */ + min-height: auto; + max-height: none; } .logo-container { @@ -31,6 +62,7 @@ -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; + line-height: 1.2; } .app-subtitle { @@ -38,6 +70,7 @@ color: #718096; margin: 0 0 30px 0; font-weight: 400; + line-height: 1.4; } /* Session info styling */ @@ -53,6 +86,7 @@ font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; opacity: 0.8; transition: opacity 0.2s ease; + word-break: break-all; } .session-info:hover { @@ -79,6 +113,8 @@ color: #2d3748; transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); + width: 100%; + box-sizing: border-box; } .url-input:focus { @@ -107,6 +143,8 @@ align-items: center; justify-content: center; gap: 10px; + width: 100%; + box-sizing: border-box; } .download-btn:hover:not(:disabled) { @@ -216,6 +254,7 @@ margin-top: 20px; text-align: center; color: #0369a1; + word-wrap: break-word; } .output-message p { @@ -229,6 +268,7 @@ justify-content: center; gap: 40px; flex-wrap: wrap; + margin-bottom: 20px; } .feature { @@ -237,6 +277,7 @@ align-items: center; gap: 8px; color: #6b7280; + flex-shrink: 0; } .feature-icon { @@ -249,9 +290,10 @@ font-weight: 500; font-size: 0.9rem; color: #4b5563; + text-align: center; } -/* Progress styles moved from Home.razor */ +/* Progress styles */ .progress-container { margin-top: 20px; width: 100%; @@ -292,6 +334,7 @@ font-size: 14px; color: #666; font-weight: 500; + word-wrap: break-word; } .progress-container.with-video-details .progress-text { @@ -312,6 +355,7 @@ .download-links-section { margin-top: 30px; + margin-bottom: 30px; /* Add bottom margin for scroll space */ width: 100%; max-width: 600px; } @@ -328,6 +372,8 @@ display: flex; flex-direction: column; gap: 12px; + /* Add bottom padding to ensure last item is fully visible */ + padding-bottom: 20px; } .download-item { @@ -352,12 +398,15 @@ display: flex; flex-direction: column; gap: 4px; + min-width: 0; } .download-title { font-weight: 600; color: #333; font-size: 14px; + word-wrap: break-word; + overflow-wrap: break-word; } .download-date { @@ -378,6 +427,7 @@ display: flex; align-items: center; gap: 6px; + flex-shrink: 0; } .download-link-btn:hover { @@ -465,6 +515,7 @@ margin-bottom: 12px; line-height: 1.4; word-wrap: break-word; + overflow-wrap: break-word; } .error-message { @@ -475,6 +526,7 @@ border-radius: 8px; color: #c62828; text-align: center; + word-wrap: break-word; } .conversion-status { @@ -508,7 +560,7 @@ @keyframes pulse { 0%, 100% { transform: scale(1); - box-shadow: 0 0 0 0 rgba(30, 136, 229, 0.4); + box-shadow: 0 0 0 0 rgba(30, 136,229, 0.4); } 50% { transform: scale(1.02); @@ -527,86 +579,314 @@ } } -@media (min-width: 640px) { +/* Responsive Design - Tablet */ +@media (min-width: 640px) and (max-width: 1024px) { + .hero-section { + padding: 35px 25px; + margin: 15px; + } + .input-container { flex-direction: row; align-items: stretch; + gap: 12px; } .url-input { flex: 1; + font-size: 1rem; + padding: 16px 20px; + min-width: 0; } .download-btn { - min-width: 180px; - } -} - -@media (max-width: 639px) { - .hero-section { - padding: 30px 20px; - margin: 10px; - } - - .app-title { - font-size: 2rem; + min-width: 140px; + max-width: 180px; + flex-shrink: 0; + font-size: 0.95rem; + padding: 16px 20px; } .features { - gap: 30px; + gap: 35px; + } +} + +/* Responsive Design - Large Desktop */ +@media (min-width: 640px) { + .input-container { + flex-direction: row; + align-items: stretch; + gap: 15px; + } + + .url-input { + flex: 1; + min-width: 0; /* Allows flex item to shrink below its content size */ + } + + .download-btn { + min-width: 160px; + max-width: 200px; + flex-shrink: 0; + padding: 18px 24px; + font-size: 1rem; + } +} + +/* Responsive Design - Mobile */ +@media (max-width: 639px) { + .page-background { + padding: 10px 5px 40px 5px; /* Ensure bottom padding for scroll */ + min-height: 100vh; + min-height: 100dvh; + } + + .hero-section { + padding: 25px 15px; + margin: 5px auto; /* Ensure centering */ + border-radius: 16px; + min-width: 0; + } + + .logo { + width: 100px; + height: 100px; + } + + .app-title { + font-size: 1.8rem; + line-height: 1.1; + } + + .app-subtitle { + font-size: 1rem; + line-height: 1.3; + } + + .url-input { + font-size: 16px; /* Prevent zoom on iOS */ + padding: 16px 20px; + } + + .download-btn { + font-size: 1rem; + padding: 16px 24px; + } + + .features { + gap: 25px; + justify-content: space-around; } .feature { - min-width: 100px; + min-width: auto; + flex: 1; + max-width: 80px; + } + + .feature-icon { + font-size: 1.5rem; + } + + .feature span:last-child { + font-size: 0.8rem; } .session-info { - font-size: 0.8rem; + font-size: 0.75rem; padding: 6px 12px; + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; } .download-all-btn { - min-width: 180px; - padding: 14px 20px; + min-width: 160px; + padding: 12px 16px; font-size: 0.9rem; } .zip-info { - font-size: 0.8rem; + font-size: 0.75rem; } -} - -/* Responsive Design */ -@media (max-width: 768px) { + + .download-item { + flex-direction: column; + align-items: stretch; + gap: 12px; + padding: 12px; + } + + .download-info { + text-align: left; + } + + .download-link-btn { + align-self: stretch; + justify-content: center; + padding: 10px 16px; + } + .video-info-card { flex-direction: column; align-items: center; text-align: center; + padding: 15px; + gap: 15px; } .thumbnail-img { width: 200px; height: 112px; } - - .video-meta { - justify-content: center; + + .progress-text { + font-size: 13px; + } + + .video-title { + font-size: 15px; } } -@media (max-width: 480px) { - .video-info-card { - padding: 15px; +/* Extra Small Mobile Devices */ +@media (max-width: 360px) { + .hero-section { + padding: 20px 12px; + margin: 3px; } - + + .app-title { + font-size: 1.6rem; + } + + .app-subtitle { + font-size: 0.9rem; + } + + .logo { + width: 80px; + height: 80px; + } + + .url-input { + padding: 14px 16px; + font-size: 16px; + } + + .download-btn { + padding: 14px 20px; + font-size: 0.9rem; + } + + .features { + gap: 20px; + } + + .feature { + max-width: 70px; + } + + .feature-icon { + font-size: 1.3rem; + } + + .feature span:last-child { + font-size: 0.75rem; + } + .thumbnail-img { width: 160px; height: 90px; } + + .download-all-btn { + min-width: 140px; + padding: 10px 14px; + font-size: 0.85rem; + } +} - .video-meta { - flex-direction: column; - align-items: center; - gap: 8px; +/* Landscape Mobile Orientation */ +@media (max-width: 844px) and (orientation: landscape) { + .page-background { + padding: 15px 10px; + } + + .hero-section { + padding: 25px 20px; + margin: 10px auto; + } + + .logo-container { + margin-bottom: 25px; + } + + .logo { + width: 80px; + height: 80px; + } + + .app-title { + font-size: 2rem; + } + + .download-form { + margin-bottom: 25px; + } + + .features { + margin-bottom: 15px; + } +} + +/* High DPI Displays */ +@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + .hero-section { + backdrop-filter: blur(20px); + } +} + +/* Reduced Motion Preference */ +@media (prefers-reduced-motion: reduce) { + .hero-section, + .download-btn, + .download-item, + .video-info-section, + .progress-fill, + .btn-icon, + .download-all-btn, + .download-link-btn { + animation: none !important; + transition: none !important; + } + + .processing-spinner { + animation: none !important; + } +} + +/* Print Styles */ +@media print { + .page-background { + background: white !important; + padding: 20px; + } + + .hero-section { + background: white !important; + box-shadow: none !important; + border: 1px solid #ccc; + } + + .music-notes { + display: none !important; + } + + .download-btn, + .download-link-btn, + .download-all-btn { + display: none !important; } } \ No newline at end of file diff --git a/TuneRipper/wwwroot/css/app.css b/TuneRipper/wwwroot/css/app.css index 2a78a18..c082625 100644 --- a/TuneRipper/wwwroot/css/app.css +++ b/TuneRipper/wwwroot/css/app.css @@ -6,13 +6,19 @@ html, body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 0; - height: 100%; + width: 100%; overflow-x: hidden; + -webkit-text-size-adjust: 100%; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } #app { - height: 100vh; width: 100vw; + min-height: 100vh; + min-height: 100dvh; + overflow-x: hidden; + /* Allow natural vertical scrolling */ } /* Smooth transition when app loads */ @@ -72,7 +78,7 @@ a, .btn-link { } .blazor-error-boundary { - background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA9NC4wODE1IDI5MSA9NC42NzgyIDI5MSA9Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDg2IDY2LjAxODMgMjYzLjU4NiA2Ni4wMTgzIDk2LjMzNzIgMjYzLjU4NiA2Ni4xMDI4IDgyLjg1MTUgMjYwLjQwNyA2Ni4yNjU4IDg4LjQ2NzgYMjY2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDg2IDY2LjAxODMgMjYzLjU4NiA2Ni4wMTgzIDk2LjMzNzIgMjYzLjU4NiA2Ni4xMDI4IDgyLjg1MTUgMjYwLjQwNyA2Ni4yNjU4IDg4LjQ2NzgYMjY2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDg2IDY2LjAxODMgMjYzLjU4NiA2Ni4wMTgzIDk2LjMzNzIgMjYzLjU4NiA2Ni4xMDI4IDgyLjg1MTUgMjYwLjQwNyA2Ni4yNjU4IDg4LjQ2NzgYMjY2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDg2IDY2LjAxODMgMjYzLjU4NiA2Ni4wMTgzIDk2LjMzNzIgMjYzLjU4NiA2Ni4xMDI4IDgyLjg1MTUgMjYwLjQwNyA2Ni4yNjU4IDg4LjQ2NzgYMjY2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDg2IDY2LjAxODMgMjYzLjU4NiA2Ni4wMTgzIDk2LjMzNzIgMjYzLjU4NiA2Ni4xMDI4IDgyLjg1MTUgMjYwLjQwNyA2Ni4yNjU4IDg4LjQ2NzgYMjY2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDg2IDY2LjAxODMgMjYzLjU4NiA2Ni4wMTgzIDk2LjMzNzIgMjYzLjU4NiA2Ni4xMDI4IDgyLjg1MTUgMjYwLjQwNyA2Ni4yNjU4IDg4LjQ2NzgYMjY2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDg2IDY2LjAxODMgMjYzLjU4NiA2Ni4wMTgzIDk2LjMzNzIgMjYzLjU4NiA2Ni4xMDI4IDgyLjg1MTUgMjYwLjQwNyA2Ni4yNjU4IDg4LjQ2NzgYMjY2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDg2IDY2LjAxODMgMjYzLjU4NiA2Ni4wMTgzIDk2LjMzNzIgMjYzLjU4NiA2Ni4xMDI4IDgyLjg1MTUgMjYwLjQwNyA2Ni4yNjU4IDg4LjQ2NzgYMjY2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDg2IDY2LjAxODMgMjYzLjU4NiA2Ni4wMTgzIDk2LjMzNzIgMjYzLjU4NiA2Ni4xMDI4IDgyLjg1MTUgMjYwLjQwNyA2Ni4yNjU4IDg4LjQ2NzgYMjY2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDg2IDY2LjAxODMgMjYzLjU4NiA2Ni4wMTgzIDk2LjMzNzIgMjYzLjU4NiA2Ni4xMDI4IDgyLjg1MTUgMjYwLjQwNyA2Ni4yNjU4IDg4LjQ2NzgYMjY2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDE2Ni40NDg2IDY2LjAxODMgMjYzLjU4NiA2Ni4wMTgzIDk2LjMzNzIgMjYzLjU4NiA2Ni4xMDI4IDgyLjg1MTUgMjYwLjQwNyA2Ni4yNjU4IDg4LjQ2NzgYMjY2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDE2Ni40NDg2IDY2LjAxODMgMjYzLjU4NiA2Ni4wMTgzIDk2LjMzNzIgMjYzLjU4NiA2Ni4xMDI4IDgyLjg1MTUgMjYwLjQwNyA2Ni4yNjU4IDg4LjQ2NzgYMjY2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDE2Ni40NDg2IDY2LjAxODMgMjYzLjU4NiA2Ni4wMTgzIDk2LjMzNzIgMjYzLjU4NiA2Ni4xMDI4IDgyLjg1MTUgMjYwLjQwNyA2Ni4yNjU4IDg4LjQ2NzgYMjY2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDE2Ni40NDg2IDY2LjAxODMgMjYzLjU4NiA2Ni4wMTgzIDk2LjMzNzIgMjYzLjU4NiA2Ni4xMDI4IDgyLjg1MTUgMjYwLjQwNyA2Ni4yNjU4IDg4LjQ2NzgYMjY2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDE2Ni40NDg2IDY2LjAxODMgMjYzLjU4NiA2Ni4wMTgzIDk2LjMzNzIgMjYzLjU4NiA2Ni4xMDI4IDgyLjg1MTUgMjYwLjQwNyA2Ni4yNjU4IDg4LjQ2NzgYMjY2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDE2Ni40NDg2IDY2LjAxODMgMjYzLjU4NiA2Ni4wMTgzIDk2LjMzNzIgMjYzLjU4NiA2Ni4xMDI4IDgyLjg1MTUgMjYwLjQwNyA2Ni4yNjU4IDg4LjQ2NzgYMjY2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDE2Ni40NDg2IDY2LjAxODMgMjYzLjU4NiA2Ni4wMTgzIDk2LjMzNzIgMjYzLjU4NiA2Ni4xMDI4IDgyLjg1MTUgMjYwLjQwNyA2Ni4yNjU4IDg4LjQ2NzgYMjY2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDE4OS42NzEgMzMuMzA2IDIyNy4yNzMzIDMyLjcwNTkgMzMuNjQ0MyA5Mi42MDggMzMuNjQ0MyAxMjMuMzYwMSAxMjMuMzYwMSAxMjMuMzYwMSDEuNjcxNzYgMzMuNzYyOCA1MC45NjU0IDEyMy43NzIgMTIzLjMzNjkgMzMuNzYyOCA0My44NTggMzMuMzA2IDMuMDQ0NiA1LjY0OTUgMy41NDAzIDEyMi42MTY3IDMwLjA2MTMgMTIzLjMzNjkgMzUuMzA2IDMiIHN0cm9rZT0iIzAwQzEzNSIgc3Ryb2tlLXdpZHRoPSIxIiBvcGFjaXR5PSIxIiBzdHJva2UtbGluZWNhcD0icm91bmQiIC8+PC9nPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; + background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA9NC4wODE1IDI5MSA9NC42NzgyIDI5MSA9Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDg2IDY2LjAxODMgMjYzLjU4NiA2Ni4wMTgzWk0yNjMuNTg2IDk2LjMzNzIgMjYzLjU4NiA2Ni4xMDI4IDgyLjg1MTUgMjYwLjQwNyA2Ni4yNjU4IDg4LjQ2NzhaIiBmaWxsPSIjNzA3MDcwIi8+PC9nPjwvc3ZnPg==) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } @@ -85,6 +91,49 @@ code { color: #c02d76; } +/* Enhanced mobile responsiveness */ +@media (max-width: 768px) { + html { + /* Prevent zoom on input focus for iOS Safari */ + -webkit-text-size-adjust: 100%; + } + + body { + /* Ensure body allows scrolling on mobile */ + overflow-y: auto; + -webkit-overflow-scrolling: touch; + } + + #app { + /* Ensure proper mobile viewport handling */ + min-height: 100vh; + min-height: 100dvh; + } +} + +/* Very large screens - maintain good proportions */ +@media (min-width: 1200px) { + .hero-section { + max-width: 700px; + } + + .input-container { + gap: 20px; + } + + .url-input { + font-size: 1.1rem; + padding: 18px 24px; + } + + .download-btn { + min-width: 180px; + max-width: 220px; + font-size: 1.1rem; + padding: 18px 28px; + } +} + /* Responsive styles for download components */ @media (max-width: 768px) { .download-item { @@ -97,4 +146,22 @@ code { align-self: stretch !important; justify-content: center !important; } -} \ No newline at end of file +} + +/* Better touch targets for mobile */ +@media (hover: none) and (pointer: coarse) { + button, .btn, input[type="button"], input[type="submit"] { + min-height: 44px; + min-width: 44px; + } +} + +/* Improve performance on mobile */ +@media (max-width: 768px) { + * { + -webkit-transform: translateZ(0); + transform: translateZ(0); + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + } +}} \ No newline at end of file