diff --git a/TuneRipper/Pages/Home.razor b/TuneRipper/Pages/Home.razor index 0b95567..5c4b352 100644 --- a/TuneRipper/Pages/Home.razor +++ b/TuneRipper/Pages/Home.razor @@ -152,328 +152,6 @@ - - @code { private string youtubeUrl = ""; private string outputMessage = ""; diff --git a/TuneRipper/Pages/Home.razor.css b/TuneRipper/Pages/Home.razor.css index 1f71edd..c0e431e 100644 --- a/TuneRipper/Pages/Home.razor.css +++ b/TuneRipper/Pages/Home.razor.css @@ -107,18 +107,17 @@ } .output-message { - background: #f7fafc; - border: 1px solid #e2e8f0; + background: #f0f9ff; + border: 1px solid #bae6fd; border-radius: 8px; padding: 16px; margin-top: 20px; - text-align: left; + text-align: center; + color: #0369a1; } .output-message p { margin: 0; - color: #4a5568; - font-family: 'Courier New', monospace; font-size: 0.9rem; white-space: pre-line; } @@ -135,17 +134,295 @@ flex-direction: column; align-items: center; gap: 8px; - color: #4a5568; + color: #6b7280; } .feature-icon { - font-size: 2rem; + font-size: 1.8rem; margin-bottom: 8px; + opacity: 0.8; } .feature span:last-child { font-weight: 500; font-size: 0.9rem; + color: #4b5563; +} + +/* Progress styles moved from Home.razor */ +.progress-container { + margin-top: 20px; + width: 100%; +} + +.progress-container.with-video-details { + margin-top: 15px; + background: #f8f9ff; + padding: 15px; + border-radius: 8px; + border: 1px solid #e3e7ff; +} + +.progress-bar { + width: 100%; + height: 8px; + background-color: #e8ecf4; + border-radius: 4px; + overflow: hidden; + margin-bottom: 10px; +} + +.progress-container.with-video-details .progress-bar { + height: 6px; + background-color: #e1e5ed; +} + +.progress-fill { + height: 100%; + background: linear-gradient(90deg, #1e88e5, #2196f3); + border-radius: 4px; + transition: width 0.3s ease; + box-shadow: 0 0 8px rgba(33, 150, 243, 0.4); +} + +.progress-text { + text-align: center; + font-size: 14px; + color: #666; + font-weight: 500; +} + +.progress-container.with-video-details .progress-text { + font-size: 13px; + color: #4a5568; +} + +.progress-highlight { + color: #2d3748; + font-weight: 600; +} + +.progress-percentage { + color: #718096; + font-weight: 400; + margin-left: 4px; +} + +.download-links-section { + margin-top: 30px; + width: 100%; + max-width: 600px; +} + +.downloads-title { + color: #333; + margin-bottom: 20px; + text-align: center; + font-size: 20px; + font-weight: 600; +} + +.download-links { + display: flex; + flex-direction: column; + gap: 12px; +} + +.download-item { + display: flex; + justify-content: space-between; + align-items: center; + background: #f8f9fa; + border: 1px solid #e9ecef; + border-radius: 8px; + padding: 15px; + transition: all 0.2s ease; +} + +.download-item:hover { + background: #e9ecef; + transform: translateY(-1px); + box-shadow: 0 2px 8px rgba(0,0,0,0.1); +} + +.download-info { + flex: 1; + display: flex; + flex-direction: column; + gap: 4px; +} + +.download-title { + font-weight: 600; + color: #333; + font-size: 14px; +} + +.download-date { + font-size: 12px; + color: #666; +} + +.download-link-btn { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: white; + border: none; + padding: 8px 16px; + border-radius: 6px; + font-size: 13px; + font-weight: 600; + cursor: pointer; + transition: all 0.2s ease; + display: flex; + align-items: center; + gap: 6px; +} + +.download-link-btn:hover { + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); +} + +.download-icon { + font-size: 16px; +} + +/* Video Info Styles */ +.video-info-section { + margin-top: 20px; + width: 100%; + animation: slideIn 0.5s ease-out; +} + +.video-info-title { + color: #333; + margin-bottom: 15px; + text-align: center; + font-size: 18px; + font-weight: 600; +} + +.video-info-card { + background: #ffffff; + border: 1px solid #e0e0e0; + border-radius: 12px; + padding: 20px; + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); + display: flex; + gap: 20px; + align-items: flex-start; +} + +.video-info-card.processing { + border-color: #1e88e5; + box-shadow: 0 2px 12px rgba(30, 136, 229, 0.15); +} + +.video-thumbnail { + flex-shrink: 0; + position: relative; +} + +.thumbnail-img { + width: 160px; + height: 90px; + object-fit: cover; + border-radius: 8px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + transition: opacity 0.3s ease; +} + +.processing-overlay { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.7); + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + animation: fadeIn 0.3s ease-out; +} + +.processing-spinner { + font-size: 24px; + animation: spin 2s linear infinite; +} + +.video-details { + flex: 1; + min-width: 0; +} + +.video-title { + font-size: 16px; + font-weight: 600; + color: #333; + margin-bottom: 12px; + line-height: 1.4; + word-wrap: break-word; +} + +.error-message { + margin-top: 15px; + padding: 12px; + background: #ffebee; + border: 1px solid #ffcdd2; + border-radius: 8px; + color: #c62828; + text-align: center; +} + +.conversion-status { + margin-top: 8px; + padding: 8px 12px; + background: linear-gradient(90deg, #1e88e5, #2196f3); + color: white; + border-radius: 6px; + display: flex; + align-items: center; + gap: 8px; + font-size: 13px; + font-weight: 500; + animation: pulse 2s ease-in-out infinite; +} + +.status-icon { + font-size: 16px; +} + +@keyframes spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +@keyframes fadeIn { + from { opacity: 0; } + to { opacity: 1; } +} + +@keyframes pulse { + 0%, 100% { + transform: scale(1); + box-shadow: 0 0 0 0 rgba(30, 136, 229, 0.4); + } + 50% { + transform: scale(1.02); + box-shadow: 0 0 0 10px rgba(30, 136, 229, 0); + } +} + +@keyframes slideIn { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } } @media (min-width: 640px) { @@ -180,4 +457,39 @@ .feature { min-width: 100px; } +} + +/* Responsive Design */ +@media (max-width: 768px) { + .video-info-card { + flex-direction: column; + align-items: center; + text-align: center; + } + + .thumbnail-img { + width: 200px; + height: 112px; + } + + .video-meta { + justify-content: center; + } +} + +@media (max-width: 480px) { + .video-info-card { + padding: 15px; + } + + .thumbnail-img { + width: 160px; + height: 90px; + } + + .video-meta { + flex-direction: column; + align-items: center; + gap: 8px; + } } \ No newline at end of file