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