From e5d2c104ac9b5cefe38003849aa2ae1417dd6f9d Mon Sep 17 00:00:00 2001
From: Michal Vrba <michal.vrba@gmai.com>
Date: Thu, 11 Dec 2025 15:53:47 +0100
Subject: [PATCH] Revert "Add animated floating musical notes background"

This reverts commit 95ca948743a137f65faa764a2b86877d91e03a8a.
---
 TuneRipper/Pages/Home.razor     | 358 ++++++++++++++++++++++++++++++--
 TuneRipper/Pages/Home.razor.css |  73 -------
 2 files changed, 345 insertions(+), 86 deletions(-)

diff --git a/TuneRipper/Pages/Home.razor b/TuneRipper/Pages/Home.razor
index e0790f5..fa2763c 100644
--- a/TuneRipper/Pages/Home.razor
+++ b/TuneRipper/Pages/Home.razor
@@ -6,19 +6,6 @@
 
 <PageTitle>TuneRipper - YouTube to MP3 Downloader</PageTitle>
 
-<!-- Floating Musical Notes Background -->
-<div class="music-notes">
-    <div class="note">♪</div>
-    <div class="note">♫</div>
-    <div class="note">♪</div>
-    <div class="note">♬</div>
-    <div class="note">♫</div>
-    <div class="note">♪</div>
-    <div class="note">♬</div>
-    <div class="note">♫</div>
-    <div class="note">♪</div>
-</div>
-
 <div class="hero-section">
     <div class="logo-container">
         <img src="images/logo.png" alt="TuneRipper Logo" class="logo" />
@@ -182,6 +169,351 @@
     </div>
 </div>
 
+<style>
+    .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: #e0e0e0;
+        border-radius: 4px;
+        overflow: hidden;
+        margin-bottom: 10px;
+    }
+
+    .progress-container.with-video-details .progress-bar {
+        height: 6px;
+        background-color: #d1d9ff;
+    }
+
+    .progress-fill {
+        height: 100%;
+        background: linear-gradient(90deg, #4CAF50, #45a049);
+        border-radius: 4px;
+        transition: width 0.3s ease;
+    }
+
+    .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: #4CAF50;
+        box-shadow: 0 2px 12px rgba(76, 175, 80, 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;
+    }
+
+    .video-meta {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 16px;
+        margin-bottom: 12px;
+    }
+
+    .meta-item {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        font-size: 13px;
+        color: #666;
+    }
+
+    .meta-icon {
+        font-size: 14px;
+    }
+
+    .video-tags {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 6px;
+    }
+
+    .tag {
+        background: #f0f0f0;
+        color: #666;
+        font-size: 11px;
+        padding: 4px 8px;
+        border-radius: 12px;
+        font-weight: 500;
+    }
+
+    .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, #4CAF50, #45a049);
+        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(76, 175, 80, 0.4);
+        }
+        50% { 
+            transform: scale(1.02);
+            box-shadow: 0 0 0 10px rgba(76, 175, 80, 0);
+        }
+    }
+
+    @@keyframes slideIn {
+        from {
+            opacity: 0;
+            transform: translateY(20px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+
+    /* 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;
+        }
+    }
+</style>
+
 @code {
     private string youtubeUrl = "";
     private string outputMessage = "";
diff --git a/TuneRipper/Pages/Home.razor.css b/TuneRipper/Pages/Home.razor.css
index 12b52bc..1f71edd 100644
--- a/TuneRipper/Pages/Home.razor.css
+++ b/TuneRipper/Pages/Home.razor.css
@@ -1,65 +1,4 @@
-/* Page Background and Floating Notes */
-.page-background {
-    position: relative;
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #1e88e5 100%);
-    padding: 40px 20px;
-}
-
-/* Floating Musical Notes */
-.music-notes {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    z-index: 1;
-}
-
-.note {
-    position: absolute;
-    font-size: 2rem;
-    color: rgba(255, 255, 255, 0.4);
-    animation: float-note 6s linear infinite;
-    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
-}
-
-.note:nth-child(1) { left: 10%; animation-delay: 0s; animation-duration: 8s; }
-.note:nth-child(2) { left: 20%; animation-delay: 1s; animation-duration: 7s; }
-.note:nth-child(3) { left: 30%; animation-delay: 2s; animation-duration: 9s; }
-.note:nth-child(4) { left: 40%; animation-delay: 0.5s; animation-duration: 6s; }
-.note:nth-child(5) { left: 50%; animation-delay: 3s; animation-duration: 8s; }
-.note:nth-child(6) { left: 60%; animation-delay: 1.5s; animation-duration: 7s; }
-.note:nth-child(7) { left: 70%; animation-delay: 2.5s; animation-duration: 9s; }
-.note:nth-child(8) { left: 80%; animation-delay: 4s; animation-duration: 6s; }
-.note:nth-child(9) { left: 90%; animation-delay: 0.8s; animation-duration: 8s; }
-
-@keyframes float-note {
-    0% {
-        transform: translateY(100vh) rotate(0deg);
-        opacity: 0;
-    }
-    10% {
-        opacity: 1;
-    }
-    90% {
-        opacity: 1;
-    }
-    100% {
-        transform: translateY(-100px) rotate(360deg);
-        opacity: 0;
-    }
-}
-
-/* Main Content Container */
 .hero-section {
-    position: relative;
-    z-index: 10;
     background: rgba(255, 255, 255, 0.95);
     backdrop-filter: blur(10px);
     border-radius: 20px;
@@ -209,7 +148,6 @@
     font-size: 0.9rem;
 }
 
-/* Responsive Design */
 @media (min-width: 640px) {
     .input-container {
         flex-direction: row;
@@ -242,15 +180,4 @@
     .feature {
         min-width: 100px;
     }
-}
-
-/* Responsive adjustments for notes */
-@media (max-width: 480px) {
-    .note {
-        font-size: 1.5rem;
-    }
-    
-    .page-background {
-        padding: 20px 10px;
-    }
 }
\ No newline at end of file