feat: dark-mode + cli style

static/script.js

@@ -1,51 +1,55 @@
 document.addEventListener('DOMContentLoaded', () => {
-    // --- Selektoren ---
     const dom = {
         form: document.getElementById('upload-form'),
         urlInput: document.getElementById('url'),
         platformInput: document.getElementById('input-platform'),
         submitBtn: document.getElementById('submit-button'),
         
-        // Detection Feedback
         badgeContainer: document.getElementById('platform-badge-container'),
         detectedIcon: document.getElementById('detected-icon'),
         detectedText: document.getElementById('detected-text'),
         urlIcon: document.getElementById('url-icon'),
 
-        // Options
         optionsContainer: document.getElementById('options-container'),
         ytOptions: document.getElementById('youtube-options'),
         codecSection: document.getElementById('codec-options-section'),
         
-        // YouTube Specifics
         ytFormatRadios: document.querySelectorAll('input[name="yt_format"]'),
         qualityWrapper: document.getElementById('quality-wrapper'),
         mp3Select: document.getElementById('mp3_bitrate'),
         mp4Select: document.getElementById('mp4_quality'),
         
-        // Codec Switch
         codecSwitch: document.getElementById('codec-switch'),
         codecPreference: document.getElementById('codec_preference'),
 
-        // Progress & Result
         progressContainer: document.getElementById('progress-container'),
         progressBar: document.getElementById('progress-bar'),
         statusMessage: document.getElementById('status-message'),
-        logContent: document.getElementById('log-content'),
+        logContent: document.getElementById('log-content'), // Für den letzten Log-Eintrag
+        
         resultContainer: document.getElementById('result-container'),
         resultUrl: document.getElementById('result-url'),
         errorMessage: document.getElementById('error-message'),
 
-        // History
+        // History Elements
         historyTableBody: document.querySelector('#history-table tbody'),
         clearHistoryBtn: document.getElementById('clear-history-button'),
-        contextMenu: document.getElementById('context-menu')
+        contextMenu: document.getElementById('context-menu'),
+        
+        // Pseudo Log Elements
+        pseudoLogArea: document.getElementById('pseudo-log-area'),
+        pseudoLogContent: document.getElementById('pseudo-log-content'),
+        terminalLines: document.querySelectorAll('.terminal-line')
     };
 
     let currentJobId = null;
     let pollingInterval = null;
+    let pseudoLogInterval = null;
+    let pseudoLogLines = [];
+    const LOG_ENTRY_DELAY = 80; // Millisekunden zwischen Buchstaben
+    const PSEUDO_LOG_MAX_LINES = 10;
+    const HISTORY_EXPIRY_DAYS = 7;
 
-    // --- Plattform Definitionen (Regex & Farben) ---
     const platforms = [
         { name: 'SoundCloud', pattern: /soundcloud\.com/, icon: 'fa-soundcloud', color: '#ff5500' },
         { name: 'YouTube', pattern: /(youtube\.com|youtu\.be)/, icon: 'fa-youtube', color: '#ff0000' },
@@ -54,33 +58,41 @@ document.addEventListener('DOMContentLoaded', () => {
         { name: 'Twitter', pattern: /(twitter\.com|x\.com)/, icon: 'fa-x-twitter', color: '#000000' }
     ];
 
-    // --- Init ---
+    const pseudoLogCommands = [
+        "Initializing environment...",
+        "Connecting to media servers...",
+        "Authenticating with unknownMedien.dl API...",
+        "Scanning URL for media info...",
+        "Detecting stream type...",
+        "Negotiating download protocol...",
+        "Allocating buffer space...",
+        "Pre-compiling conversion modules...",
+        "Establishing S3 connection...",
+        "Generating secure download token...",
+        "Preparing download stream...",
+        "Initiating download sequence...",
+        "Syncing metadata...",
+        "Finalizing file handles...",
+    ];
+
+    // --- Initialisierung ---
     function init() {
         setupEventListeners();
-        loadHistory();
+        loadClientHistory();
+        startPseudoLogging();
     }
 
+    // --- Event Listeners ---
     function setupEventListeners() {
-        // Auto-Detect bei Eingabe
         dom.urlInput.addEventListener('input', handleUrlInput);
-        
-        // Form Submit
         dom.form.addEventListener('submit', handleFormSubmit);
-
+        dom.ytFormatRadios.forEach(radio => radio.addEventListener('change', updateYtQualityVisibility));
-        // YouTube Format Toggle (MP3/MP4)
-        dom.ytFormatRadios.forEach(radio => {
-            radio.addEventListener('change', updateYtQualityVisibility);
-        });
-
-        // Codec Switch Toggle
         if(dom.codecSwitch) {
             dom.codecSwitch.addEventListener('change', (e) => {
                 dom.codecPreference.value = e.target.checked ? 'h264' : 'original';
             });
         }
-
+        if(dom.clearHistoryBtn) dom.clearHistoryBtn.addEventListener('click', clearClientHistory);
-        // History
-        if(dom.clearHistoryBtn) dom.clearHistoryBtn.addEventListener('click', clearHistory);
         document.addEventListener('click', hideContextMenu);
         if(dom.historyTableBody) {
              dom.historyTableBody.addEventListener('contextmenu', handleHistoryRightClick);
@@ -88,29 +100,23 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     }
 
-    // --- Logik: URL Erkennung ---
+    // --- URL Erkennung & Optionen ---
     function handleUrlInput() {
         const url = dom.urlInput.value.trim();
         const detected = platforms.find(p => p.pattern.test(url));
 
         if (detected) {
-            // UI Feedback
             dom.platformInput.value = detected.name;
-            dom.detectedText.textContent = `${detected.name} erkannt`;
+            dom.detectedText.textContent = `${detected.name} DETECTED`;
-            dom.detectedIcon.className = `fab ${detected.icon}`;
+            dom.detectedIcon.className = `fas ${detected.icon}`;
             dom.detectedIcon.style.color = detected.color;
             dom.badgeContainer.style.opacity = '1';
-            
+            dom.urlIcon.className = `fas ${detected.icon}`;
-            // Icon im Input Feld färben
-            dom.urlIcon.className = `fab ${detected.icon}`;
             dom.urlIcon.style.color = detected.color;
-
-            // Optionen anzeigen
             showOptionsForPlatform(detected.name);
         } else {
-            // Reset wenn unbekannt oder leer
             dom.badgeContainer.style.opacity = '0';
-            dom.urlIcon.className = 'fas fa-link text-muted';
+            dom.urlIcon.className = 'fas fa-keyboard'; // Default CLI icon
             dom.urlIcon.style.color = '';
             hideAllOptions();
         }
@@ -118,17 +124,15 @@ document.addEventListener('DOMContentLoaded', () => {
 
     function showOptionsForPlatform(platformName) {
         dom.optionsContainer.classList.add('show');
-        
-        // Reset specific sections
         dom.ytOptions.classList.add('d-none');
         dom.codecSection.classList.add('d-none');
 
         if (platformName === 'YouTube') {
             dom.ytOptions.classList.remove('d-none');
+            updateYtQualityVisibility(); // Initial call
         } else if (['TikTok', 'Instagram', 'Twitter'].includes(platformName)) {
             dom.codecSection.classList.remove('d-none');
         } else {
-            // SoundCloud braucht keine extra Optionen in diesem Design (Default ist MP3 Best)
             dom.optionsContainer.classList.remove('show');
         }
     }
@@ -138,38 +142,85 @@ document.addEventListener('DOMContentLoaded', () => {
         setTimeout(() => {
             dom.ytOptions.classList.add('d-none');
             dom.codecSection.classList.add('d-none');
-        }, 500); // Warten bis Animation fertig
+        }, 500);
     }
 
     function updateYtQualityVisibility() {
-        const format = document.querySelector('input[name="yt_format"]:checked').value;
+        const format = document.querySelector('input[name="yt_format"]:checked')?.value;
+        if (!format) return;
+        
         if (format === 'mp3') {
             dom.mp3Select.classList.remove('d-none');
             dom.mp4Select.classList.add('d-none');
             dom.codecSection.classList.add('d-none');
-        } else {
+        } else { // mp4
             dom.mp3Select.classList.add('d-none');
             dom.mp4Select.classList.remove('d-none');
             dom.codecSection.classList.remove('d-none');
         }
     }
 
-    // --- Logik: Submit & Polling ---
+    // --- Pseudo Logging Animation ---
+    function startPseudoLogging() {
+        let currentLine = 0;
+        let charIndex = 0;
+        let commandIndex = 0;
+        
+        function displayNextLogLine() {
+            if (pseudoLogInterval) clearInterval(pseudoLogInterval);
+            if (commandIndex >= pseudoLogCommands.length) {
+                pseudoLogInterval = setTimeout(startPseudoLogging, 15000); // Restart after delay
+                return;
+            }
+            
+            const command = pseudoLogCommands[commandIndex];
+            const lineElement = document.createElement('div');
+            lineElement.classList.add('cli-output-line');
+            lineElement.style.opacity = '0'; // Start hidden
+            dom.pseudoLogContent.appendChild(lineElement);
+
+            charIndex = 0;
+            function typeWriter() {
+                if (charIndex < command.length) {
+                    lineElement.textContent += command.charAt(charIndex);
+                    charIndex++;
+                    setTimeout(typeWriter, LOG_ENTRY_DELAY);
+                } else {
+                    // Fade in effect for the completed line
+                    let fadeEffect = setInterval(() => {
+                        if (parseFloat(lineElement.style.opacity) < 1) {
+                            lineElement.style.opacity = (parseFloat(lineElement.style.opacity) + 0.1).toString();
+                        } else {
+                            clearInterval(fadeEffect);
+                            // Add new line after a short pause
+                            commandIndex++;
+                            setTimeout(displayNextLogLine, 300); 
+                        }
+                    }, 50);
+                    
+                    // Scroll to bottom
+                    dom.pseudoLogArea.scrollTop = dom.pseudoLogArea.scrollHeight;
+                }
+            }
+            typeWriter();
+        }
+        
+        // Start the logging process
+        dom.pseudoLogArea.style.opacity = '1'; // Make log area visible
+        displayNextLogLine();
+    }
+
+    // --- Form Submit & Progress ---
     async function handleFormSubmit(e) {
         e.preventDefault();
-        
+        stopPseudoLogging(); // Stop the fake logs
-        // Validierung
-        if(dom.badgeContainer.style.opacity === '0' && dom.urlInput.value.length > 0) {
-            // Fallback für unbekannte URLs -> Standard SoundCloud probieren oder Warnen
-            dom.platformInput.value = "SoundCloud"; 
-        }
 
-        // UI Transition
+        // Transition to Progress State
         dom.form.classList.add('d-none');
         dom.progressContainer.classList.remove('d-none');
         dom.resultContainer.classList.add('d-none');
         dom.errorMessage.classList.add('d-none');
-        dom.logContent.textContent = "Verbindung wird hergestellt...";
+        dom.logContent.textContent = "INITIALIZING...";
         dom.progressBar.style.width = "5%";
 
         const formData = new FormData(dom.form);
@@ -182,18 +233,21 @@ document.addEventListener('DOMContentLoaded', () => {
                 currentJobId = result.job_id;
                 startPolling();
             } else {
-                showError(result.error || "Serverfehler beim Starten.");
+                showError(result.error || "Server error during submission.");
             }
         } catch (err) {
-            showError(`Verbindungsfehler: ${err.message}`);
+            showError(`Connection Error: ${err.message}`);
         }
     }
 
     function startPolling() {
         pollingInterval = setInterval(async () => {
             try {
+                if (!currentJobId) { stopPolling(); return; }
                 const res = await fetch(`/status?job_id=${currentJobId}`);
-                if (res.status === 404) { stopPolling(); showError("Job verloren gegangen."); return; }
+                
+                if (res.status === 404) { stopPolling(); showError("Job not found (expired or invalid)."); return; }
+                if (!res.ok) { throw new Error(`HTTP error! status: ${res.status}`); }
                 
                 const status = await res.json();
                 updateProgressUI(status);
@@ -203,88 +257,136 @@ document.addEventListener('DOMContentLoaded', () => {
                     showResult(status.result_url);
                 } else if (status.status === 'error' || status.error) {
                     stopPolling();
-                    showError(status.error || status.message);
+                    showError(status.error || status.message || "An unknown error occurred.");
                 }
             } catch (err) {
-                console.error(err);
+                console.error("Polling Error:", err);
+                showError(`Polling failed: ${err.message}`);
+                stopPolling();
             }
         }, 1500);
     }
 
     function stopPolling() {
         clearInterval(pollingInterval);
+        pollingInterval = null;
     }
 
     function updateProgressUI(status) {
         const pct = status.progress || 0;
         dom.progressBar.style.width = `${pct}%`;
         
-        if(status.message) dom.statusMessage.textContent = status.message;
+        // Display the latest log message
-        
         if(status.logs && status.logs.length > 0) {
             dom.logContent.textContent = status.logs[status.logs.length - 1];
+        } else {
+            dom.logContent.textContent = status.message || "...";
+        }
+
+        if(status.message) {
+            dom.statusMessage.textContent = status.message.toUpperCase();
         }
     }
 
+    // --- Result & Error Display ---
     function showResult(url) {
         dom.progressContainer.classList.add('d-none');
         dom.resultContainer.classList.remove('d-none');
         dom.resultUrl.href = url;
-        loadHistory(); // Verlauf aktualisieren
+        dom.resultUrl.textContent = "DOWNLOAD LINK"; // Button text
+        saveToClientHistory(url); // Save to client-side history
     }
 
     function showError(msg) {
         dom.progressContainer.classList.add('d-none');
-        dom.form.classList.remove('d-none'); // Form wieder zeigen
+        dom.form.classList.remove('d-none'); // Show form again for retry
-        dom.errorMessage.textContent = msg;
+        dom.errorMessage.textContent = msg.toUpperCase();
         dom.errorMessage.classList.remove('d-none');
+        dom.submitBtn.innerHTML = '<i class="fas fa-exclamation-triangle"></i> RETRY';
     }
 
-    // --- History Logic (Minimal) ---
+    // --- Client-Side History ---
-    async function loadHistory() {
+    function getHistory() {
-        if(!dom.historyTableBody) return;
+        const history = localStorage.getItem('mediaDlHistory');
+        if (!history) return [];
         try {
-            const res = await fetch('/history');
+            const parsed = JSON.parse(history);
-            const data = await res.json();
+            // Filter out expired entries
-            renderHistory(data);
+            const now = new Date();
-        } catch(e) { console.error("History Error", e); }
+            return parsed.filter(item => {
+                const expiryDate = new Date(item.expiry);
+                return expiryDate > now;
+            });
+        } catch (e) {
+            console.error("Error parsing history:", e);
+            return [];
+        }
+    }
+
+    function saveToClientHistory(url, title = "Unknown Title", platform = "Unknown") {
+        const history = getHistory();
+        const expiryDate = new Date();
+        expiryDate.setDate(expiryDate.getDate() + HISTORY_EXPIRY_DAYS);
+
+        const newItem = {
+            url: url,
+            title: title,
+            platform: platform,
+            timestamp: new Date().toISOString(),
+            expiry: expiryDate.toISOString()
+        };
+        
+        // Add new item and limit history size (e.g., last 50)
+        history.unshift(newItem); 
+        if (history.length > 50) history.pop();
+
+        localStorage.setItem('mediaDlHistory', JSON.stringify(history));
+        renderHistory(history); // Update UI immediately
+    }
+
+    function loadClientHistory() {
+        const history = getHistory();
+        renderHistory(history);
     }
 
     function renderHistory(data) {
+        if (!dom.historyTableBody) return;
         dom.historyTableBody.innerHTML = '';
-        if(!data || !data.length) {
+        if (!data || data.length === 0) {
-            dom.historyTableBody.innerHTML = '<tr><td colspan="4" class="text-center text-muted">Kein Verlauf vorhanden.</td></tr>';
+            dom.historyTableBody.innerHTML = '<tr><td colspan="4" class="text-center text-muted py-4">NO HISTORY YET.</td></tr>';
             return;
         }
         data.forEach(item => {
             const row = document.createElement('tr');
+            const itemDate = new Date(item.timestamp);
+            const expiryDate = new Date(item.expiry);
+            const timeStr = `${itemDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`;
+            const platformIcon = getPlatformIcon(item.platform);
+
             row.innerHTML = `
-                <td class="small text-muted">${item.timestamp.split(' ')[1]}</td>
+                <td class="text-muted small">${timeStr}</td>
-                <td class="text-center"><i class="fab fa-${getIconForPlatform(item.platform)}"></i></td>
+                <td class="text-center"><i class="${platformIcon.class}" style="color: ${platformIcon.color};"></i></td>
-                <td class="text-truncate" style="max-width: 150px;" title="${item.title}">${item.title}</td>
+                <td class="text-truncate" style="max-width: 180px;" title="${item.title}">${item.title.substring(0, 25)}...</td>
-                <td class="text-end"><a href="${item.s3_url}" target="_blank" class="btn btn-sm btn-light border" data-url="${item.s3_url}"><i class="fas fa-download"></i></a></td>
+                <td class="text-end"><a href="${item.url}" target="_blank" data-url="${item.url}" class="btn btn-sm btn-link text-success hover-underline"><i class="fas fa-link"></i></a></td>
             `;
             dom.historyTableBody.appendChild(row);
         });
     }
-
+    
-    function getIconForPlatform(p) {
+    function getPlatformIcon(p) {
-        if(p === 'SoundCloud') return 'soundcloud text-warning';
+        const platformData = platforms.find(pl => pl.name === p);
-        if(p === 'YouTube') return 'youtube text-danger';
+        if (platformData) return { class: `fas ${platformData.icon}`, color: platformData.color };
-        if(p === 'TikTok') return 'tiktok';
+        return { class: `fas fa-question-circle`, color: '#808080' };
-        if(p === 'Instagram') return 'instagram text-danger';
-        if(p === 'Twitter') return 'x-twitter';
-        return 'question';
     }
 
-    async function clearHistory() {
+    async function clearClientHistory() {
-        if(confirm("Verlauf wirklich löschen?")) {
+        if(confirm("Clear ALL history? This cannot be undone.")) {
-            await fetch('/clear_history', {method: 'POST'});
+            localStorage.removeItem('mediaDlHistory');
-            loadHistory();
+            renderHistory([]); // Clear the table
         }
     }
 
-    // Context Menu Logic
+    // --- Context Menu ---
     let contextUrl = null;
     function handleHistoryRightClick(e) {
         const linkBtn = e.target.closest('a[data-url]');
@@ -300,12 +402,29 @@ document.addEventListener('DOMContentLoaded', () => {
     function handleContextMenuClick(e) {
         if(e.target.closest('[data-action="copy"]') && contextUrl) {
             navigator.clipboard.writeText(contextUrl);
-            dom.contextMenu.classList.add('d-none');
+            // Temporary notification for copy action
+            const notification = document.createElement('div');
+            notification.textContent = 'Link Copied!';
+            notification.style.cssText = `position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #39ff14; color: #0a0a0a; padding: 10px 20px; border-radius: 5px; z-index: 10000; font-weight: bold; opacity: 0; transition: opacity 0.5s; font-family: 'Consolas', monospace;`;
+            document.body.appendChild(notification);
+            setTimeout(() => notification.style.opacity = '1', 10);
+            setTimeout(() => {
+                notification.style.opacity = '0';
+                setTimeout(() => notification.remove(), 500);
+            }, 1500);
         }
+        hideContextMenu();
     }
-    
     function hideContextMenu() {
         if(dom.contextMenu) dom.contextMenu.classList.add('d-none');
+        contextUrl = null;
+    }
+    
+    // --- Stop Pseudo Logging ---
+    function stopPseudoLogging() {
+        if (pseudoLogInterval) clearInterval(pseudoLogInterval);
+        // Keep logs visible until progress starts
+        // Optionally hide it after transition: setTimeout(() => dom.pseudoLogArea.style.display = 'none', 800);
     }
 
     init();

static/style.css

@@ -1,180 +1,281 @@
-/* Modern Reset & Base */
+/* Terminal/CLI Theme - Dark & Monospace */
+
 :root {
-    --primary-color: #6366f1; /* Indigo */
+    --bg-dark: #0a0a0a;
-    --secondary-color: #a855f7; /* Purple */
+    --text-color: #00ff00; /* Classic Green */
-    --bg-dark: #0f172a;
+    --text-muted: #008000; /* Darker Green */
-    --text-main: #1e293b;
+    --text-highlight: #39ff14; /* Bright Green */
+    --accent-primary: #00ff00;
+    --accent-secondary: #39ff14;
+    --input-bg: rgba(0, 255, 0, 0.05);
+    --input-border: rgba(0, 255, 0, 0.2);
+    --card-bg: rgba(10, 10, 10, 0.7);
+    --card-border: rgba(0, 255, 0, 0.1);
+    --shadow-color: rgba(0, 255, 0, 0.2);
+    --progress-bg: rgba(0, 255, 0, 0.15);
+    --progress-bar: linear-gradient(90deg, #00ff00, #39ff14);
+    --error-bg: rgba(255, 0, 0, 0.1);
+    --error-border: rgba(255, 0, 0, 0.3);
+    --success-color: #39ff14;
 }
 
 body {
-    font-family: 'Inter', sans-serif;
+    background-color: var(--bg-dark);
-    background-color: #f1f5f9;
+    color: var(--text-color);
-    color: var(--text-main);
+    font-family: 'Consolas', 'Monaco', 'Andale Mono', 'Ubuntu Mono', monospace;
-    overflow-x: hidden;
+    line-height: 1.5;
+    overflow-x: hidden; /* Verhindert horizontale Scrollbalken */
 }
 
-/* Animated Background Shapes */
+/* Terminal Background Animation */
-.bg-shape {
+.terminal-backdrop {
     position: fixed;
-    border-radius: 50%;
+    top: 0;
-    filter: blur(80px);
+    left: 0;
-    z-index: -1;
-    opacity: 0.6;
-    animation: float 10s infinite ease-in-out;
-}
-
-.shape-1 {
-    top: -10%;
-    left: -10%;
-    width: 600px;
-    height: 600px;
-    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
-}
-
-.shape-2 {
-    bottom: -10%;
-    right: -10%;
-    width: 500px;
-    height: 500px;
-    background: linear-gradient(to left, #3b82f6, #06b6d4);
-    animation-delay: -5s;
-}
-
-@keyframes float {
-    0%, 100% { transform: translate(0, 0); }
-    50% { transform: translate(30px, 20px); }
-}
-
-/* Hero Card */
-.hero-card {
-    background: rgba(255, 255, 255, 0.85);
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    border: 1px solid rgba(255, 255, 255, 0.5);
-    border-radius: 24px;
-    padding: 3rem;
     width: 100%;
-    max-width: 650px;
+    height: 100%;
-    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
+    background: var(--bg-dark);
+    overflow: hidden;
+    z-index: -1;
 }
 
-.text-gradient {
+.terminal-line {
-    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+    position: absolute;
+    background: linear-gradient(to right, rgba(0, 255, 0, 0.02), rgba(57, 255, 20, 0.01));
+    animation: scanline 15s linear infinite;
+}
+.terminal-line:nth-child(1) { top: 10%; width: 80%; left: 10%; animation-duration: 12s; }
+.terminal-line:nth-child(2) { top: 50%; width: 60%; left: 20%; animation-duration: 18s; animation-delay: -6s; }
+.terminal-line:nth-child(3) { top: 80%; width: 70%; left: 15%; animation-duration: 14s; animation-delay: -4s; }
+
+@keyframes scanline {
+    0% { opacity: 0; transform: translateX(-100%); }
+    50% { opacity: 0.5; }
+    100% { opacity: 0; transform: translateX(100%); }
+}
+
+/* Main Container */
+.container {
+    z-index: 2;
+}
+
+/* CLI Card */
+.cli-card {
+    background: var(--card-bg);
+    border: 1px solid var(--card-border);
+    border-radius: 8px;
+    padding: 2rem 2.5rem;
+    width: 100%;
+    max-width: 700px;
+    box-shadow: 0 0 15px var(--shadow-color);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+.cli-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 30px var(--shadow-color);
+}
+
+.logo-text {
+    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
+    text-shadow: 0 0 10px var(--shadow-color);
 }
 
-/* Input Styling */
+/* CLI Input Group */
-.main-input-group {
+.cli-input-group {
-    border-radius: 16px;
+    background: var(--input-bg);
+    border: 1px solid var(--input-border);
+    border-radius: 6px;
     overflow: hidden;
-    transition: transform 0.2s, box-shadow 0.2s;
 }
 
-.main-input-group:focus-within {
+.cli-input-group .input-group-text {
-    transform: translateY(-2px);
+    background: transparent;
-    box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.3) !important;
-}
-
-.main-input-group input {
-    font-size: 1.1rem;
-    background: white;
-}
-.main-input-group input:focus {
-    box-shadow: none;
-    background: white;
-}
-
-#submit-button {
-    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
     border: none;
-    transition: filter 0.2s;
+    color: var(--text-muted);
-}
-#submit-button:hover {
-    filter: brightness(110%);
 }
 
-/* Options Animation */
+.cli-input {
-.options-wrapper {
+    color: var(--text-color);
-    overflow: hidden;
+    caret-color: var(--text-highlight);
-    max-height: 0;
+    border-radius: 0; /* Ensures no rounded corners inside */
-    opacity: 0;
+}
-    transition: max-height 0.5s ease-in-out, opacity 0.4s ease-in-out;
+.cli-input::placeholder {
+    color: var(--text-muted);
+    opacity: 0.7;
 }
 
-.options-wrapper.show {
+.cli-button {
-    max-height: 500px; /* Groß genug */
+    background: var(--accent-primary);
-    opacity: 1;
+    border: none;
+    color: var(--bg-dark);
+    font-weight: bold;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    transition: background 0.2s ease, transform 0.2s ease;
+}
+.cli-button:hover {
+    background: var(--accent-secondary);
+    transform: translateX(2px);
 }
 
-.animate-options {
+/* CLI Badge */
-    animation: fadeIn 0.5s ease;
+.cli-badge {
+    background: rgba(0, 255, 0, 0.1);
+    border: 1px solid var(--input-border);
+    color: var(--text-highlight);
+}
+.cli-icon {
+    color: var(--text-highlight);
 }
 
-/* Glass Button */
+/* CLI Output & Options */
-.btn-white-glass {
+.cli-output-line {
-    background: rgba(255, 255, 255, 0.5);
+    font-family: 'Consolas', monospace;
-    border: 1px solid rgba(255, 255, 255, 0.2);
+    text-align: left;
-    backdrop-filter: blur(5px);
+    color: var(--text-muted);
-    color: var(--text-main);
+    font-size: 0.9rem;
-    transition: all 0.2s;
 }
-.btn-white-glass:hover {
+.cli-highlight {
-    background: white;
+    color: var(--text-highlight);
-    transform: translateY(-2px);
+    animation: blink 1s infinite step-end;
-    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
+}
+@keyframes blink {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0; }
+}
+
+.cli-output-box {
+    background: rgba(10, 20, 10, 0.5);
+    border: 1px solid var(--card-border);
+    padding: 1rem;
+    border-radius: 4px;
+    text-align: left;
+    overflow: hidden; /* Important for smooth fade-in */
+}
+.cli-output-box pre {
+    margin: 0;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+
+.cli-card-inner {
+    background: rgba(20, 40, 20, 0.4);
+    border-radius: 6px;
+}
+
+.cli-section {
+    animation: fadeInUpCli 0.5s ease-out;
+}
+@keyframes fadeInUpCli {
+    from { opacity: 0; transform: translateY(15px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+/* Options Styling */
+.form-label.small { font-size: 0.8rem; font-weight: bold; color: var(--text-muted); }
+.text-success { color: var(--accent-secondary) !important; }
+.btn-outline-success { border-color: var(--accent-primary); color: var(--accent-primary); }
+.btn-outline-success:hover { background-color: var(--accent-primary); color: var(--bg-dark); }
+.btn-check:checked + .btn-outline-success { background-color: var(--accent-primary); border-color: var(--accent-primary); color: var(--bg-dark); }
+
+.cli-select {
+    background: var(--input-bg);
+    border: 1px solid var(--input-border);
+    color: var(--text-color);
+    border-radius: 4px;
+}
+
+/* Switch Button */
+.form-switch .form-check-input {
+    background-color: var(--text-muted);
+    border-color: var(--input-border);
+    transition: background-color 0.2s, border-color 0.2s;
+}
+.form-switch .form-check-input:checked {
+    background-color: var(--accent-primary);
+    border-color: var(--accent-secondary);
 }
 
 /* Progress Bar */
-.bg-gradient-primary {
+.cli-progress {
-    background: linear-gradient(90deg, var(--primary-color), #06b6d4);
+    height: 10px;
-    background-size: 200% 100%;
+    border-radius: 5px;
-    animation: gradientMove 2s linear infinite;
+    background: var(--progress-bg);
+    border: 1px solid var(--input-border);
+}
+.cli-progress-bar {
+    background: var(--progress-bar);
+    border-radius: 5px;
+    transition: width 0.3s ease-out;
+    box-shadow: 0 0 5px var(--shadow-color);
 }
 
-@keyframes gradientMove {
+/* Alerts & Modals */
-    0% { background-position: 100% 0; }
+.cli-alert {
-    100% { background-position: -100% 0; }
+    background: var(--error-bg);
+    border: 1px solid var(--error-border);
+    color: var(--text-color);
+    border-radius: 4px;
+}
+.cli-modal-content {
+    background-color: var(--bg-dark);
+    border: 1px solid var(--card-border);
+    border-radius: 12px;
+}
+.cli-modal-header, .cli-modal-footer {
+    background-color: rgba(15, 15, 15, 0.8);
+    border: none;
+}
+.cli-table {
+    background-color: transparent;
+}
+.cli-table th {
+    background-color: rgba(10, 20, 10, 0.6);
+    color: var(--text-highlight);
+    border: none !important;
+    font-size: 0.8rem;
+}
+.cli-table td {
+    border-top: 1px solid var(--card-border);
+    color: var(--text-muted);
+}
+.cli-table tbody tr:hover td {
+    background-color: rgba(0, 255, 0, 0.1) !important;
+}
+.cli-table td a {
+    color: var(--accent-secondary);
 }
 
-.animate-pulse {
+/* Context Menu */
-    animation: pulse 1.5s infinite;
+.cli-context-menu {
+    background: var(--card-bg);
+    border: 1px solid var(--card-border);
+    border-radius: 6px;
 }
-@keyframes pulse {
+.cli-context-menu .list-group-item {
-    0%, 100% { opacity: 1; }
+    background: transparent;
-    50% { opacity: 0.5; }
+    color: var(--text-color);
-}
+    border: none;
-
+    transition: background 0.2s ease;
-/* Helpers */
+}
-.hover-lift:hover {
+.cli-context-menu .list-group-item:hover {
-    transform: translateY(-3px);
+    background: rgba(0, 255, 0, 0.1);
-}
-.fade-in-up {
-    animation: fadeInUp 0.8s ease-out;
 }
 
+/* General Animation */
+.fade-in-up { animation: fadeInUp 0.8s ease-out forwards; }
 @keyframes fadeInUp {
     from { opacity: 0; transform: translateY(20px); }
     to { opacity: 1; transform: translateY(0); }
 }
 
-.extra-small {
+.animate-options { animation: fadeInCli 0.5s ease-out forwards; }
-    font-size: 0.75rem;
-}
 
-/* Context Menu */
+/* Responsive adjustments */
-.context-menu {
+@media (max-width: 768px) {
-    z-index: 9999;
+    .cli-card { padding: 1.5rem; }
-    min-width: 150px;
+    .logo-text { font-size: 2.5rem; }
-    border-radius: 8px;
+    .input-group-lg .form-control, .input-group-lg .form-select, .input-group-lg .input-group-text { font-size: 1rem; }
-    overflow: hidden;
-    border: none;
-}
-.context-menu .list-group-item {
-    cursor: pointer;
-    font-size: 0.9rem;
-    border: none;
-}
-.context-menu .list-group-item:hover {
-    background-color: #f3f4f6;
 }

templates/index.html

@@ -2,95 +2,83 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>medien.mrunk.de - Smart Downloader</title>
+    <title>unknownMedien.dl - Smart Downloader</title>
     
     <!-- Bootstrap CSS -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
     <!-- Font Awesome -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
-    <!-- Google Fonts -->
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
     <!-- Custom CSS -->
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
 </head>
 <body>
 
-    <!-- Background Shapes for Atmosphere -->
+    <!-- Terminal-ähnlicher Hintergrundeffekt -->
-    <div class="bg-shape shape-1"></div>
+    <div class="terminal-backdrop">
-    <div class="bg-shape shape-2"></div>
+        <div class="terminal-line" id="terminal-line-1"></div>
+        <div class="terminal-line" id="terminal-line-2"></div>
+        <div class="terminal-line" id="terminal-line-3"></div>
+    </div>
 
-    <div class="container d-flex flex-column min-vh-100 justify-content-center align-items-center position-relative z-1">
+    <div class="container d-flex flex-column min-vh-100 justify-content-center align-items-center position-relative z-1 p-3">
         
-        <!-- Hero Section -->
+        <!-- Main Content Card -->
-        <div class="hero-card text-center fade-in-up">
+        <div class="cli-card text-center fade-in-up">
-            <h1 class="display-4 fw-bold mb-2 text-gradient">Media Downloader</h1>
+            <h1 class="display-4 fw-bold mb-2 text-shadow logo-text">unknownMedien.dl</h1>
-            <p class="text-muted mb-4 lead">Füge einfach deinen Link ein. Wir erledigen den Rest.</p>
+            <p class="text-muted mb-4 lead">Der schnelle Weg zu deinen Medien.</p>
 
             <form id="upload-form">
-                <!-- Hidden Platform Input (Auto-Detected) -->
                 <input type="hidden" name="platform" id="input-platform" value="SoundCloud">
 
-                <!-- Main Input Group -->
+                <div class="input-group input-group-lg shadow-sm mb-3 cli-input-group">
-                <div class="input-group input-group-lg shadow-sm mb-3 main-input-group">
+                    <span class="input-group-text bg-transparent border-0 text-success ps-4"><i class="fas fa-keyboard"></i></span>
-                    <span class="input-group-text bg-white border-0 ps-4">
+                    <input type="url" class="form-control bg-transparent border-0 cli-input" id="url" name="url" required placeholder="Link hier einfügen..." autocomplete="off">
-                        <i class="fas fa-link text-muted" id="url-icon"></i>
+                    <button class="btn btn-success cli-button px-4 fw-bold" type="submit" id="submit-button">
-                    </span>
+                        <i class="fas fa-terminal"></i> EXEC
-                    <input type="url" class="form-control border-0 py-3" id="url" name="url" required placeholder="https://soundcloud.com/..." autocomplete="off">
-                    <button class="btn btn-primary px-4 fw-bold" type="submit" id="submit-button">
-                        <i class="fas fa-arrow-right"></i>
                     </button>
                 </div>
 
-                <!-- Detected Platform Badge (Animated) -->
+                <!-- Detected Platform Badge (CLI Style) -->
-                <div id="platform-badge-container" class="mb-3" style="height: 30px; opacity: 0; transition: all 0.3s ease;">
+                <div id="platform-badge-container" class="mb-3 p-2 cli-output-line" style="height: 30px; opacity: 0; transition: all 0.3s ease;">
-                    <span class="badge rounded-pill bg-light text-dark border px-3 py-2">
+                    <span class="badge rounded-pill bg-transparent cli-badge border px-3 py-2">
-                        <i id="detected-icon" class="fas fa-question-circle me-1"></i>
+                        <i id="detected-icon" class="fas fa-question-circle me-1 cli-icon"></i>
-                        <span id="detected-text">Warte auf Link...</span>
+                        <span id="detected-text">SCANNING...</span>
                     </span>
                 </div>
 
-                <!-- Options Container (Collapsible) -->
+                <!-- Options Container -->
-                <div id="options-container" class="options-wrapper">
+                <div id="options-container" class="options-wrapper cli-card-body-overlay">
-                    <div class="card card-body border-0 shadow-sm bg-white-50 mt-2 text-start">
+                    <div class="card card-body border-0 shadow-sm cli-card-inner p-3 mt-2">
                         
-                        <!-- YouTube Options -->
+                        <div id="youtube-options" class="d-none animate-options mb-3 pb-3 border-bottom cli-section">
-                        <div id="youtube-options" class="d-none animate-options">
+                            <h6 class="fw-bold text-uppercase small text-success mb-2"><i class="fab fa-youtube text-danger me-1"></i> YOUTUBE CONFIG</h6>
-                            <h6 class="fw-bold text-uppercase small text-muted mb-3"><i class="fab fa-youtube text-danger"></i> YouTube Einstellungen</h6>
                             <div class="row g-3">
                                 <div class="col-md-6">
-                                    <label class="form-label small fw-bold">Format</label>
+                                    <label class="form-label small fw-bold text-info">FORMAT</label>
                                     <div class="btn-group w-100" role="group">
                                         <input type="radio" class="btn-check" name="yt_format" id="format-mp3" value="mp3" checked>
-                                        <label class="btn btn-outline-primary btn-sm" for="format-mp3">Audio (MP3)</label>
+                                        <label class="btn btn-outline-success btn-sm" for="format-mp3">AUDIO</label>
-
                                         <input type="radio" class="btn-check" name="yt_format" id="format-mp4" value="mp4">
-                                        <label class="btn btn-outline-primary btn-sm" for="format-mp4">Video (MP4)</label>
+                                        <label class="btn btn-outline-success btn-sm" for="format-mp4">VIDEO</label>
                                     </div>
                                 </div>
                                 <div class="col-md-6" id="quality-wrapper">
-                                    <label class="form-label small fw-bold">Qualität</label>
+                                    <label class="form-label small fw-bold text-info">QUALITY</label>
-                                    <!-- MP3 Select -->
+                                    <select class="form-select form-select-sm cli-select" id="mp3_bitrate" name="mp3_bitrate">
-                                    <select class="form-select form-select-sm" id="mp3_bitrate" name="mp3_bitrate">
+                                        <option>BEST</option> <option selected>192k</option> <option>128k</option>
-                                        <option>Best</option>
-                                        <option selected>192k</option>
-                                        <option>128k</option>
                                     </select>
-                                    <!-- MP4 Select -->
+                                    <select class="form-select form-select-sm cli-select d-none" id="mp4_quality" name="mp4_quality">
-                                    <select class="form-select form-select-sm d-none" id="mp4_quality" name="mp4_quality">
+                                        <option selected>BEST</option> <option>MEDIUM</option> <option>LOW</option>
-                                        <option selected>Best</option>
-                                        <option>Medium (~720p)</option>
-                                        <option>Low (~480p)</option>
                                     </select>
                                 </div>
                             </div>
                         </div>
 
-                        <!-- Video Codec Options (Shared) -->
+                        <div id="codec-options-section" class="d-none animate-options cli-section">
-                        <div id="codec-options-section" class="d-none animate-options mt-3 pt-3 border-top">
                             <div class="d-flex justify-content-between align-items-center">
                                 <div>
-                                    <label class="form-label small fw-bold mb-0">Kompatibilitäts-Modus</label>
+                                    <label class="form-label small fw-bold text-info mb-0">COMPATIBILITY MODE</label>
-                                    <div class="text-muted extra-small" style="font-size: 0.75rem;">Konvertiert zu H.264 (für WhatsApp/alte Geräte).</div>
+                                    <div class="text-muted extra-small">H.264 (for max compatibility)</div>
                                 </div>
                                 <div class="form-check form-switch">
                                     <input class="form-check-input" type="checkbox" role="switch" id="codec-switch">
@@ -98,22 +86,25 @@
                                 </div>
                             </div>
                         </div>
-
                     </div>
                 </div>
 
-                <!-- Error Message -->
+                <!-- Pseudo-Logs Area -->
-                <div id="error-message" class="alert alert-danger mt-3 d-none shadow-sm text-start" role="alert"></div>
+                <div id="pseudo-log-area" class="cli-output-box shadow-sm text-start" style="max-height: 250px; opacity: 0;">
+                    <div id="pseudo-log-content"></div>
+                </div>
 
+                <!-- Error Message -->
+                <div id="error-message" class="alert alert-danger mt-3 d-none shadow-sm cli-alert text-start" role="alert"></div>
             </form>
 
-            <!-- Processing / Progress View -->
+            <!-- Progress View -->
             <div id="progress-container" class="d-none mt-4 text-center">
-                <h5 id="status-message" class="fw-bold mb-3 animate-pulse">Starte...</h5>
+                <h5 id="status-message" class="fw-bold mb-3 cli-output-line cli-highlight"></h5>
-                <div class="progress" style="height: 10px; border-radius: 10px;">
+                <div class="progress cli-progress mb-2">
-                    <div id="progress-bar" class="progress-bar bg-gradient-primary" role="progressbar" style="width: 0%"></div>
+                    <div id="progress-bar" class="progress-bar cli-progress-bar" style="width: 0%"></div>
                 </div>
-                <div id="log-content" class="text-muted mt-2 extra-small text-truncate" style="max-width: 100%;">Details...</div>
+                <div id="log-content" class="text-muted mt-2 extra-small text-truncate cli-output-line"></div>
             </div>
 
             <!-- Result View -->
@@ -121,25 +112,20 @@
                 <div class="success-checkmark mb-3">
                     <i class="fas fa-check-circle text-success display-4"></i>
                 </div>
-                <h4 class="fw-bold">Fertig!</h4>
+                <h4 class="fw-bold">COMPLETE.</h4>
-                <a id="result-url" href="#" target="_blank" class="btn btn-success btn-lg mt-2 shadow-lg hover-lift">
+                <a id="result-url" href="#" target="_blank" class="btn btn-success cli-button btn-lg mt-2 shadow-lg hover-lift">
-                    <i class="fas fa-download me-2"></i> Datei herunterladen
+                    <i class="fas fa-download me-2"></i> DOWNLOAD
                 </a>
                 <button class="btn btn-link text-muted mt-3 d-block mx-auto" onclick="location.reload()">
-                    Weitere Datei laden
+                    NEW SESSION
                 </button>
             </div>
 
         </div>
 
-        <!-- Footer Links -->
+        <!-- Footer -->
-        <div class="mt-4 text-center">
+        <div class="mt-auto py-4 text-center text-muted extra-small opacity-75">
-            <button class="btn btn-sm btn-white-glass rounded-pill px-3" data-bs-toggle="modal" data-bs-target="#historyModal">
+            &copy; 2025 unknownMedien.dl &bull; Links expire in 7 days.
-                <i class="fas fa-history me-1"></i> Verlauf ansehen
-            </button>
-            <div class="mt-3 text-muted extra-small opacity-75">
-                &copy; 2025 MrUnknownDE &bull; Links gültig für 7 Tage
-            </div>
         </div>
 
     </div>
@@ -147,20 +133,20 @@
     <!-- History Modal -->
     <div class="modal fade" id="historyModal" tabindex="-1" aria-hidden="true">
         <div class="modal-dialog modal-lg modal-dialog-centered">
-            <div class="modal-content border-0 shadow-lg" style="border-radius: 20px; overflow: hidden;">
+            <div class="modal-content border-0 shadow-lg cli-modal-content">
-                <div class="modal-header border-0 bg-light">
+                <div class="modal-header border-0 bg-dark cli-modal-header">
-                    <h5 class="modal-title fw-bold"><i class="fas fa-history me-2"></i>Verlauf</h5>
+                    <h5 class="modal-title fw-bold text-success"><i class="fas fa-history me-2"></i>HISTORY</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body p-0">
                     <div class="table-responsive" style="max-height: 400px;">
-                        <table id="history-table" class="table table-hover mb-0 align-middle">
+                        <table id="history-table" class="table table-hover mb-0 align-middle cli-table">
-                            <thead class="table-light sticky-top">
+                            <thead class="cli-table-header sticky-top">
                                 <tr>
-                                    <th>Zeit</th>
+                                    <th>TIME</th>
-                                    <th class="text-center">Plattform</th>
+                                    <th class="text-center">TYPE</th>
-                                    <th>Titel</th>
+                                    <th>TITLE</th>
-                                    <th class="text-end">Link</th>
+                                    <th class="text-end">ACTION</th>
                                 </tr>
                             </thead>
                             <tbody class="border-top-0">
@@ -169,17 +155,17 @@
                         </table>
                     </div>
                 </div>
-                <div class="modal-footer border-0 bg-light justify-content-between">
+                <div class="modal-footer border-0 bg-dark cli-modal-footer">
-                    <button id="clear-history-button" class="btn btn-outline-danger btn-sm">Alles löschen</button>
+                    <button id="clear-history-button" class="btn btn-outline-danger btn-sm">CLEAR ALL</button>
-                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Schließen</button>
+                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">CLOSE</button>
                 </div>
             </div>
         </div>
     </div>
 
     <!-- Context Menu -->
-    <ul id="context-menu" class="context-menu list-group position-absolute d-none shadow-lg">
+    <ul id="context-menu" class="context-menu list-group position-absolute d-none shadow-lg cli-context-menu">
-        <li class="list-group-item list-group-item-action py-2 px-3" data-action="copy"><i class="fas fa-copy me-2"></i>Link kopieren</li>
+        <li class="list-group-item list-group-item-action py-2 px-3" data-action="copy"><i class="fas fa-copy me-2"></i>Copy Link</li>
     </ul>
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>