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

Enhance Home page with a floating musical notes background for a more engaging visual experience. Added markup and CSS for animated notes, including responsive adjustments. Removed obsolete inline styles from Home.razor.
---
 TuneRipper/Pages/Home.razor     | 358 ++------------------------------
 TuneRipper/Pages/Home.razor.css |  73 +++++++
 2 files changed, 86 insertions(+), 345 deletions(-)

diff --git a/TuneRipper/Pages/Home.razor b/TuneRipper/Pages/Home.razor
index fa2763c..e0790f5 100644
--- a/TuneRipper/Pages/Home.razor
+++ b/TuneRipper/Pages/Home.razor
@@ -6,6 +6,19 @@
 
 <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" />
@@ -169,351 +182,6 @@
     </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 1f71edd..12b52bc 100644
--- a/TuneRipper/Pages/Home.razor.css
+++ b/TuneRipper/Pages/Home.razor.css
@@ -1,4 +1,65 @@
+/* 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;
@@ -148,6 +209,7 @@
     font-size: 0.9rem;
 }
 
+/* Responsive Design */
 @media (min-width: 640px) {
     .input-container {
         flex-direction: row;
@@ -180,4 +242,15 @@
     .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