mirror of
https://github.com/MrUnknownDE/medien-dl.git
synced 2026-05-03 19:56:05 +02:00
188 lines
10 KiB
HTML
188 lines
10 KiB
HTML
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>medien.mrunk.de - 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>
|
|
|
|
<div class="container d-flex flex-column min-vh-100 justify-content-center align-items-center position-relative z-1">
|
|
|
|
<!-- 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>
|
|
|
|
<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>
|
|
</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>
|
|
</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">
|
|
|
|
<!-- 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 class="row g-3">
|
|
<div class="col-md-6">
|
|
<label class="form-label small fw-bold">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>
|
|
|
|
<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>
|
|
</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>
|
|
</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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Video Codec Options (Shared) -->
|
|
<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>
|
|
<div class="text-muted extra-small" style="font-size: 0.75rem;">Konvertiert zu H.264 (für WhatsApp/alte Geräte).</div>
|
|
</div>
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" role="switch" id="codec-switch">
|
|
<input type="hidden" name="codec_preference" id="codec_preference" value="original">
|
|
</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>
|
|
|
|
</form>
|
|
|
|
<!-- Processing / 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>
|
|
</div>
|
|
<div id="log-content" class="text-muted mt-2 extra-small text-truncate" style="max-width: 100%;">Details...</div>
|
|
</div>
|
|
|
|
<!-- Result View -->
|
|
<div id="result-container" class="d-none mt-4">
|
|
<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
|
|
</a>
|
|
<button class="btn btn-link text-muted mt-3 d-block mx-auto" onclick="location.reload()">
|
|
Weitere Datei laden
|
|
</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">
|
|
© 2025 MrUnknownDE • Links gültig für 7 Tage
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- 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>
|
|
<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">
|
|
<tr>
|
|
<th>Zeit</th>
|
|
<th class="text-center">Plattform</th>
|
|
<th>Titel</th>
|
|
<th class="text-end">Link</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="border-top-0">
|
|
<!-- JS fills this -->
|
|
</tbody>
|
|
</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>
|
|
</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>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="{{ url_for('static', filename='script.js') }}"></script>
|
|
</body>
|
|
</html> |