MrUnknownDE/medien-dl
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/medien-dl.git synced 2026-05-05 12:46:06 +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
templates/index.html
+71 -85
View File
@@ -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 -->
<div class="bg-shape shape-1"></div>
<div class="bg-shape shape-2"></div>
<!-- Terminal-ähnlicher Hintergrundeffekt -->
<div class="terminal-backdrop">
<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 -->
<div class="hero-card text-center fade-in-up">
<h1 class="display-4 fw-bold mb-2 text-gradient">Media Downloader</h1>
<p class="text-muted mb-4 lead">Füge einfach deinen Link ein. Wir erledigen den Rest.</p>
<!-- Main Content Card -->
<div class="cli-card text-center fade-in-up">
<h1 class="display-4 fw-bold mb-2 text-shadow logo-text">unknownMedien.dl</h1>
<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 main-input-group">
<span class="input-group-text bg-white border-0 ps-4">
<i class="fas fa-link text-muted" id="url-icon"></i>
</span>
<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>
<div class="input-group input-group-lg shadow-sm mb-3 cli-input-group">
<span class="input-group-text bg-transparent border-0 text-success ps-4"><i class="fas fa-keyboard"></i></span>
<input type="url" class="form-control bg-transparent border-0 cli-input" id="url" name="url" required placeholder="Link hier einfügen..." autocomplete="off">
<button class="btn btn-success cli-button px-4 fw-bold" type="submit" id="submit-button">
<i class="fas fa-terminal"></i> EXEC
</button>
</div>
<!-- Detected Platform Badge (Animated) -->
<div id="platform-badge-container" class="mb-3" style="height: 30px; opacity: 0; transition: all 0.3s ease;">
<span class="badge rounded-pill bg-light text-dark border px-3 py-2">
<i id="detected-icon" class="fas fa-question-circle me-1"></i>
<span id="detected-text">Warte auf Link...</span>
<!-- Detected Platform Badge (CLI Style) -->
<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-transparent cli-badge border px-3 py-2">
<i id="detected-icon" class="fas fa-question-circle me-1 cli-icon"></i>
<span id="detected-text">SCANNING...</span>
</span>
</div>
<!-- Options Container (Collapsible) -->
<div id="options-container" class="options-wrapper">
<div class="card card-body border-0 shadow-sm bg-white-50 mt-2 text-start">
<!-- Options Container -->
<div id="options-container" class="options-wrapper cli-card-body-overlay">
<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">
<h6 class="fw-bold text-uppercase small text-muted mb-3"><i class="fab fa-youtube text-danger"></i> YouTube Einstellungen</h6>
<div id="youtube-options" class="d-none animate-options mb-3 pb-3 border-bottom cli-section">
<h6 class="fw-bold text-uppercase small text-success mb-2"><i class="fab fa-youtube text-danger me-1"></i> YOUTUBE CONFIG</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>
<!-- MP3 Select -->
<select class="form-select form-select-sm" id="mp3_bitrate" name="mp3_bitrate">
<option>Best</option>
<option selected>192k</option>
<option>128k</option>
<label class="form-label small fw-bold text-info">QUALITY</label>
<select class="form-select form-select-sm cli-select" id="mp3_bitrate" name="mp3_bitrate">
<option>BEST</option> <option selected>192k</option> <option>128k</option>
</select>
<!-- MP4 Select -->
<select class="form-select form-select-sm d-none" id="mp4_quality" name="mp4_quality">
<option selected>Best</option>
<option>Medium (~720p)</option>
<option>Low (~480p)</option>
<select class="form-select form-select-sm cli-select d-none" id="mp4_quality" name="mp4_quality">
<option selected>BEST</option> <option>MEDIUM</option> <option>LOW</option>
</select>
</div>
</div>
</div>
<!-- Video Codec Options (Shared) -->
<div id="codec-options-section" class="d-none animate-options mt-3 pt-3 border-top">
<div id="codec-options-section" class="d-none animate-options cli-section">
<div class="d-flex justify-content-between align-items-center">
<div>
<label class="form-label small fw-bold mb-0">Kompatibilitäts-Modus</label>
<div class="text-muted extra-small" style="font-size: 0.75rem;">Konvertiert zu H.264 (für WhatsApp/alte Geräte).</div>
<label class="form-label small fw-bold text-info mb-0">COMPATIBILITY MODE</label>
<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 -->
<div id="error-message" class="alert alert-danger mt-3 d-none shadow-sm text-start" role="alert"></div>
<!-- Pseudo-Logs Area -->
<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>
<div class="progress" style="height: 10px; border-radius: 10px;">
<div id="progress-bar" class="progress-bar bg-gradient-primary" role="progressbar" style="width: 0%"></div>
<h5 id="status-message" class="fw-bold mb-3 cli-output-line cli-highlight"></h5>
<div class="progress cli-progress mb-2">
<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>
<a id="result-url" href="#" target="_blank" class="btn btn-success btn-lg mt-2 shadow-lg hover-lift">
<i class="fas fa-download me-2"></i> Datei herunterladen
<h4 class="fw-bold">COMPLETE.</h4>
<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> 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 -->
<div class="mt-4 text-center">
<button class="btn btn-sm btn-white-glass rounded-pill px-3" data-bs-toggle="modal" data-bs-target="#historyModal">
<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>
<!-- Footer -->
<div class="mt-auto py-4 text-center text-muted extra-small opacity-75">
&copy; 2025 unknownMedien.dl &bull; Links expire in 7 days.
</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-header border-0 bg-light">
<h5 class="modal-title fw-bold"><i class="fas fa-history me-2"></i>Verlauf</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="modal-content border-0 shadow-lg cli-modal-content">
<div class="modal-header border-0 bg-dark cli-modal-header">
<h5 class="modal-title fw-bold text-success"><i class="fas fa-history me-2"></i>HISTORY</h5>
<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">
<thead class="table-light sticky-top">
<table id="history-table" class="table table-hover mb-0 align-middle cli-table">
<thead class="cli-table-header sticky-top">
<tr>
<th>Zeit</th>
<th class="text-center">Plattform</th>
<th>Titel</th>
<th class="text-end">Link</th>
<th>TIME</th>
<th class="text-center">TYPE</th>
<th>TITLE</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">
<button id="clear-history-button" class="btn btn-outline-danger btn-sm">Alles löschen</button>
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Schließen</button>
<div class="modal-footer border-0 bg-dark cli-modal-footer">
<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">CLOSE</button>
</div>
</div>
</div>
</div>
<!-- Context Menu -->
<ul id="context-menu" class="context-menu list-group position-absolute d-none shadow-lg">
<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>
<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>Copy Link</li>
</ul>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>