Redesign UI for TuneRipper, add PWA support & branding

Major UI overhaul for TuneRipper: removed sidebar navigation, refactored layout to a centered, single-page experience with a modern hero section and input form for YouTube-to-MP3 conversion. Added new logo and high-res icons (logo.png, icon-192.png, icon-512.png), updated favicon and app icons, and introduced manifest.json for PWA support. Removed Counter, Weather, and NotFound pages; improved global and page-specific CSS for branding and responsiveness.
2025-12-11 13:31:59 +01:00
parent 41d5a757d9
commit 6e325e007e
19 changed files with 319 additions and 226 deletions
@@ -1,7 +1,75 @@
@page "/"

-<PageTitle>Home</PageTitle>
+<PageTitle>TuneRipper - YouTube to MP3 Downloader</PageTitle>

-<h1>Hello, world!</h1>
+<div class="hero-section">
+    <div class="logo-container">
+        <img src="images/logo.png" alt="TuneRipper Logo" class="logo" />
+        <h1 class="app-title">TuneRipper</h1>
+        <p class="app-subtitle">Convert YouTube videos to MP3 instantly</p>
+    </div>
+    
+    <div class="download-form">
+        <div class="input-container">
+            <input type="text" 
+                   @bind="youtubeUrl" 
+                   @onkeypress="HandleKeyPress"
+                   placeholder="Paste your YouTube link here..." 
+                   class="url-input" />
+            <button @onclick="DownloadMp3" 
+                    class="download-btn" 
+                    disabled="@string.IsNullOrWhiteSpace(youtubeUrl)">
+                <span class="btn-icon">🎵</span>
+                Download MP3
+            </button>
+        </div>
+        
+        @if (!string.IsNullOrWhiteSpace(outputMessage))
+        {
+            <div class="output-message">
+                <p>@outputMessage</p>
+            </div>
+        }
+    </div>
+    
+    <div class="features">
+        <div class="feature">
+            <span class="feature-icon">⚡</span>
+            <span>Fast Conversion</span>
+        </div>
+        <div class="feature">
+            <span class="feature-icon">🎧</span>
+            <span>High Quality</span>
+        </div>
+        <div class="feature">
+            <span class="feature-icon">🆓</span>
+            <span>Completely Free</span>
+        </div>
+    </div>
+</div>

-Welcome to your new app.
+@code {
+    private string youtubeUrl = "";
+    private string outputMessage = "";
+
+    private async Task DownloadMp3()
+    {
+        if (!string.IsNullOrWhiteSpace(youtubeUrl))
+        {
+            outputMessage = $"Processing YouTube URL: {youtubeUrl}";
+            
+            // Simulate processing delay
+            await Task.Delay(1000);
+            
+            outputMessage += "\n✅ Ready to download! (This is test functionality)";
+        }
+    }
+
+    private async Task HandleKeyPress(KeyboardEventArgs e)
+    {
+        if (e.Key == "Enter" && !string.IsNullOrWhiteSpace(youtubeUrl))
+        {
+            await DownloadMp3();
+        }
+    }
+}