MrUnknownDE/medien-dl
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/medien-dl.git synced 2026-05-06 21:16:05 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: dark-mode + cli style

Browse Source
This commit is contained in:
MrUnknownDE
2025-12-23 20:06:03 +01:00
parent eff8c3ee2f
commit cab061cec0
3 changed files with 516 additions and 310 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/script.js
+208 -89
View File
@@ -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);
// YouTube Format Toggle (MP3/MP4)
dom.ytFormatRadios.forEach(radio => {
radio.addEventListener('change', updateYtQualityVisibility);
});
// Codec Switch Toggle
dom.ytFormatRadios.forEach(radio => radio.addEventListener('change', updateYtQualityVisibility));
if(dom.codecSwitch) {
dom.codecSwitch.addEventListener('change', (e) => {
dom.codecPreference.value = e.target.checked ? 'h264' : 'original';
});
}
// History
if(dom.clearHistoryBtn) dom.clearHistoryBtn.addEventListener('click', clearHistory);
if(dom.clearHistoryBtn) dom.clearHistoryBtn.addEventListener('click', clearClientHistory);
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.detectedIcon.className = `fab ${detected.icon}`;
dom.detectedText.textContent = `${detected.name} DETECTED`;
dom.detectedIcon.className = `fas ${detected.icon}`;
dom.detectedIcon.style.color = detected.color;
dom.badgeContainer.style.opacity = '1';
// Icon im Input Feld färben
dom.urlIcon.className = `fab ${detected.icon}`;
dom.urlIcon.className = `fas ${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();
// 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";
}
stopPseudoLogging(); // Stop the fake logs
// 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.errorMessage.textContent = msg;
dom.form.classList.remove('d-none'); // Show form again for retry
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) ---
async function loadHistory() {
if(!dom.historyTableBody) return;
// --- Client-Side History ---
function getHistory() {
const history = localStorage.getItem('mediaDlHistory');
if (!history) return [];
try {
const res = await fetch('/history');
const data = await res.json();
renderHistory(data);
} catch(e) { console.error("History Error", e); }
const parsed = JSON.parse(history);
// Filter out expired entries
const now = new Date();
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) {
dom.historyTableBody.innerHTML = '<tr><td colspan="4" class="text-center text-muted">Kein Verlauf vorhanden.</td></tr>';
if (!data || data.length === 0) {
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-center"><i class="fab fa-${getIconForPlatform(item.platform)}"></i></td>
<td class="text-truncate" style="max-width: 150px;" title="${item.title}">${item.title}</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-muted small">${timeStr}</td>
<td class="text-center"><i class="${platformIcon.class}" style="color: ${platformIcon.color};"></i></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.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) {
if(p === 'SoundCloud') return 'soundcloud text-warning';
if(p === 'YouTube') return 'youtube text-danger';
if(p === 'TikTok') return 'tiktok';
if(p === 'Instagram') return 'instagram text-danger';
if(p === 'Twitter') return 'x-twitter';
return 'question';
function getPlatformIcon(p) {
const platformData = platforms.find(pl => pl.name === p);
if (platformData) return { class: `fas ${platformData.icon}`, color: platformData.color };
return { class: `fas fa-question-circle`, color: '#808080' };
}
async function clearHistory() {
if(confirm("Verlauf wirklich löschen?")) {
await fetch('/clear_history', {method: 'POST'});
loadHistory();
async function clearClientHistory() {
if(confirm("Clear ALL history? This cannot be undone.")) {
localStorage.removeItem('mediaDlHistory');
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
+237 -136
View File
@@ -1,180 +1,281 @@
/* Modern Reset & Base */
/* Terminal/CLI Theme - Dark & Monospace */
:root {
--primary-color: #6366f1; /* Indigo */
--secondary-color: #a855f7; /* Purple */
--bg-dark: #0f172a;
--text-main: #1e293b;
--bg-dark: #0a0a0a;
--text-color: #00ff00; /* Classic Green */
--text-muted: #008000; /* Darker Green */
--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: #f1f5f9;
color: var(--text-main);
overflow-x: hidden;
background-color: var(--bg-dark);
color: var(--text-color);
font-family: 'Consolas', 'Monaco', 'Andale Mono', 'Ubuntu Mono', monospace;
line-height: 1.5;
overflow-x: hidden; /* Verhindert horizontale Scrollbalken */
}
/* Animated Background Shapes */
.bg-shape {
/* Terminal Background Animation */
.terminal-backdrop {
position: fixed;
border-radius: 50%;
filter: blur(80px);
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;
top: 0;
left: 0;
width: 100%;
max-width: 650px;
box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
height: 100%;
background: var(--bg-dark);
overflow: hidden;
z-index: -1;
}
.text-gradient {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
.terminal-line {
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 */
.main-input-group {
border-radius: 16px;
/* CLI Input Group */
.cli-input-group {
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 {
transform: translateY(-2px);
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));
.cli-input-group .input-group-text {
background: transparent;
border: none;
transition: filter 0.2s;
}
#submit-button:hover {
filter: brightness(110%);
color: var(--text-muted);
}
/* Options Animation */
.options-wrapper {
overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height 0.5s ease-in-out, opacity 0.4s ease-in-out;
.cli-input {
color: var(--text-color);
caret-color: var(--text-highlight);
border-radius: 0; /* Ensures no rounded corners inside */
}
.cli-input::placeholder {
color: var(--text-muted);
opacity: 0.7;
}
.options-wrapper.show {
max-height: 500px; /* Groß genug */
opacity: 1;
.cli-button {
background: var(--accent-primary);
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 {
animation: fadeIn 0.5s ease;
/* CLI Badge */
.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 */
.btn-white-glass {
background: rgba(255, 255, 255, 0.5);
border: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(5px);
color: var(--text-main);
transition: all 0.2s;
/* CLI Output & Options */
.cli-output-line {
font-family: 'Consolas', monospace;
text-align: left;
color: var(--text-muted);
font-size: 0.9rem;
}
.btn-white-glass:hover {
background: white;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
.cli-highlight {
color: var(--text-highlight);
animation: blink 1s infinite step-end;
}
@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 {
background: linear-gradient(90deg, var(--primary-color), #06b6d4);
background-size: 200% 100%;
animation: gradientMove 2s linear infinite;
.cli-progress {
height: 10px;
border-radius: 5px;
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 {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
/* Alerts & Modals */
.cli-alert {
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 {
animation: pulse 1.5s infinite;
/* Context Menu */
.cli-context-menu {
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: 6px;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
/* Helpers */
.hover-lift:hover {
transform: translateY(-3px);
}
.fade-in-up {
animation: fadeInUp 0.8s ease-out;
.cli-context-menu .list-group-item {
background: transparent;
color: var(--text-color);
border: none;
transition: background 0.2s ease;
}
.cli-context-menu .list-group-item:hover {
background: rgba(0, 255, 0, 0.1);
}
/* 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 {
font-size: 0.75rem;
}
.animate-options { animation: fadeInCli 0.5s ease-out forwards; }
/* Context Menu */
.context-menu {
z-index: 9999;
min-width: 150px;
border-radius: 8px;
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;
/* Responsive adjustments */
@media (max-width: 768px) {
.cli-card { padding: 1.5rem; }
.logo-text { font-size: 2.5rem; }
.input-group-lg .form-control, .input-group-lg .form-select, .input-group-lg .input-group-text { font-size: 1rem; }
}