mirror of
https://github.com/MrUnknownDE/medien-dl.git
synced 2026-04-23 08:03:44 +02:00
268 lines
19 KiB
HTML
268 lines
19 KiB
HTML
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<!-- SEO Meta Tags -->
|
|
<meta name="description" content="Nutzen Sie den MrUnknownDE Socialmedia Downloader, um Videos und Musik von YouTube (MP3/MP4), SoundCloud, TikTok, Instagram Reels und Twitter/X einfach herunterzuladen. Fügen Sie die URL ein und starten Sie den Download.">
|
|
<meta name="keywords" content="Social Media Downloader, YouTube Downloader, SoundCloud Downloader, TikTok Downloader, Instagram Reel Downloader, Twitter Downloader, X Downloader, Video Downloader, Audio Downloader, MP3, MP4, Herunterladen, Konvertieren, MrUnknownDE, medien.mrunk.de">
|
|
<meta name="author" content="MrUnknownDE">
|
|
<meta name="robots" content="index, follow"> <!-- Erlaubt Suchmaschinen das Indexieren und Folgen von Links -->
|
|
|
|
<!-- Open Graph / Facebook Meta Tags -->
|
|
<meta property="og:title" content="MrUnknownDE Socialmedia Downloader - Medien von YouTube, SC, TikTok, IG, Twitter herunterladen">
|
|
<meta property="og:description" content="Einfacher Download von Videos und Musik (MP3/MP4) von beliebten Social Media Plattformen wie YouTube, SoundCloud, TikTok, Instagram Reels und Twitter/X.">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://medien.mrunk.de/"> <!-- Ersetze dies mit der tatsächlichen URL deiner Seite -->
|
|
<meta property="og:image" content="https://medien.mrunk.de/static/og-image.png"> <!-- Ersetze dies mit der URL zu einem Vorschaubild (z.B. 1200x630px) -->
|
|
<meta property="og:site_name" content="medien.mrunk.de">
|
|
<meta property="og:locale" content="de_DE">
|
|
|
|
<!-- Twitter Card Meta Tags -->
|
|
<meta name="twitter:card" content="summary_large_image"> <!-- 'summary_large_image' ist oft ansprechender -->
|
|
<meta name="twitter:title" content="MrUnknownDE Socialmedia Downloader - Medien von YouTube, SC, TikTok, IG, Twitter herunterladen">
|
|
<meta name="twitter:description" content="Einfacher Download von Videos und Musik (MP3/MP4) von YouTube, SoundCloud, TikTok, Instagram Reels und Twitter/X.">
|
|
<meta name="twitter:image" content="https://medien.mrunk.de/static/og-image.png"> <!-- Gleiches Bild wie für Open Graph verwenden -->
|
|
<!-- Optional: Füge deinen Twitter-Benutzernamen hinzu -->
|
|
<!-- <meta name="twitter:site" content="@DeinTwitterHandle"> -->
|
|
<!-- <meta name="twitter:creator" content="@MrUnknownDE"> -->
|
|
|
|
<title>medien.mrunk.de - Social Media Downloader</title>
|
|
<!-- Bootstrap CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
|
<!-- Font Awesome CSS -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
|
<!-- Custom CSS -->
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
|
</head>
|
|
<body>
|
|
<!-- Hauptinhalts-Container -->
|
|
<div class="container mt-4 main-content">
|
|
<h1 class="mb-4 text-center"><i class="fas fa-cloud-upload-alt"></i> MrUnknownDE Socialmedia Downloader</h1>
|
|
|
|
<div class="row g-4">
|
|
<!-- Downloader Spalte -->
|
|
<div class="col-lg-5">
|
|
<div class="card shadow-sm">
|
|
<div class="card-header">
|
|
<i class="fas fa-upload"></i> Downloader
|
|
</div>
|
|
<div class="card-body">
|
|
<form id="upload-form">
|
|
<!-- Plattform Auswahl -->
|
|
<div class="mb-3">
|
|
<label class="form-label fw-bold">Plattform:</label>
|
|
<div>
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input" type="radio" name="platform" id="platform-sc" value="SoundCloud" checked>
|
|
<label class="form-check-label" for="platform-sc"><i class="fab fa-soundcloud text-warning"></i> SoundCloud</label>
|
|
</div>
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input" type="radio" name="platform" id="platform-yt" value="YouTube">
|
|
<label class="form-check-label" for="platform-yt"><i class="fab fa-youtube text-danger"></i> YouTube</label> <!-- (+ Reels) entfernt für Klarheit -->
|
|
</div>
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input" type="radio" name="platform" id="platform-tt" value="TikTok">
|
|
<label class="form-check-label" for="platform-tt"><i class="fab fa-tiktok"></i> TikTok</label>
|
|
</div>
|
|
<!-- NEU: Instagram Radio Button -->
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input" type="radio" name="platform" id="platform-ig" value="Instagram">
|
|
<label class="form-check-label" for="platform-ig"><i class="fab fa-instagram"></i> Instagram Reel</label>
|
|
</div>
|
|
<!-- NEU: Twitter Radio Button -->
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input" type="radio" name="platform" id="platform-tw" value="Twitter">
|
|
<!-- Verwende fab fa-x-twitter für das neue Logo oder fab fa-twitter für das alte -->
|
|
<label class="form-check-label" for="platform-tw"><i class="fab fa-x-twitter"></i> Twitter/X Video</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- URL Eingabe -->
|
|
<div class="mb-3">
|
|
<label for="url" class="form-label fw-bold"><i class="fas fa-link"></i> Quelle URL:</label>
|
|
<input type="url" class="form-control" id="url" name="url" required placeholder="https://...">
|
|
<small id="urlHelp" class="form-text text-muted">
|
|
Für Instagram nur Reel-Links (z.B. .../reel/...), für Twitter/X nur Tweet-Links (z.B. .../status/...).
|
|
</small>
|
|
</div>
|
|
|
|
<!-- YouTube Optionen (dynamisch) -->
|
|
<div id="youtube-options" class="mb-3 d-none border-top pt-3"> <!-- border-top hinzugefügt für visuelle Trennung -->
|
|
<label class="form-label fw-bold">YouTube Optionen:</label>
|
|
<div class="mb-2">
|
|
<label class="form-label small">Format:</label>
|
|
<div>
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input" type="radio" name="yt_format" id="format-mp3" value="mp3" checked>
|
|
<label class="form-check-label small" for="format-mp3"><i class="fas fa-file-audio text-primary"></i> MP3</label>
|
|
</div>
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input" type="radio" name="yt_format" id="format-mp4" value="mp4">
|
|
<label class="form-check-label small" for="format-mp4"><i class="fas fa-file-video text-info"></i> MP4</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="youtube-quality">
|
|
<div id="mp3-quality-section">
|
|
<label for="mp3_bitrate" class="form-label small"><i class="fas fa-sliders-h"></i> MP3 Bitrate:</label>
|
|
<select class="form-select form-select-sm d-inline-block w-auto" id="mp3_bitrate" name="mp3_bitrate">
|
|
<option>Best</option>
|
|
<option>256k</option>
|
|
<option selected>192k</option>
|
|
<option>128k</option>
|
|
<option>64k</option>
|
|
</select>
|
|
</div>
|
|
<div id="mp4-quality-section" class="d-none">
|
|
<label for="mp4_quality" class="form-label small"><i class="fas fa-photo-video"></i> MP4 Qualität:</label>
|
|
<select class="form-select form-select-sm d-inline-block w-auto" id="mp4_quality" name="mp4_quality">
|
|
<option selected>Best</option>
|
|
<option>Medium (~720p)</option>
|
|
<option>Low (~480p)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Codec Optionen (dynamisch für YT-MP4, TikTok, Instagram, Twitter) -->
|
|
<div id="codec-options-section" class="mb-3 d-none border-top pt-3">
|
|
<label class="form-label fw-bold">Video Codec:</label>
|
|
<div>
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input" type="radio" name="codec_preference" id="codec-original" value="original" checked>
|
|
<label class="form-check-label small" for="codec-original"><i class="fas fa-file-video text-info"></i> Original</label>
|
|
</div>
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input" type="radio" name="codec_preference" id="codec-h264" value="h264">
|
|
<label class="form-check-label small" for="codec-h264"><i class="fas fa-cogs text-secondary"></i> Kompatibel (H.264)</label>
|
|
</div>
|
|
</div>
|
|
<small class="form-text text-muted">
|
|
<i class="fas fa-exclamation-triangle text-warning"></i> H.264-Konvertierung kann die Verarbeitung erheblich verlängern.
|
|
</small>
|
|
</div>
|
|
|
|
<button type="submit" id="submit-button" class="btn btn-success w-100 mt-3">
|
|
<i class="fas fa-cloud-upload-alt"></i> Download starten
|
|
</button>
|
|
</form>
|
|
|
|
<!-- Status & Progress -->
|
|
<div id="status-area" class="mt-4 pt-3 border-top">
|
|
<h5 class="mb-2">Status <span id="queue-info" class="badge bg-secondary ms-2 d-none"></span></h5>
|
|
<div class="progress mb-2" role="progressbar" aria-label="Download/Upload Progress" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="height: 25px;">
|
|
<div id="progress-bar" class="progress-bar progress-bar-striped progress-bar-animated bg-info text-dark" style="width: 0%">0%</div>
|
|
</div>
|
|
<p id="status-message" class="text-muted mb-2">Bereit.</p>
|
|
<div id="log-output" class="border rounded p-2 bg-light mb-2">
|
|
<h6 class="mb-1">Log:</h6>
|
|
<pre id="log-content" class="small"></pre>
|
|
</div>
|
|
<p id="result-url-area" class="alert alert-success d-none" role="alert">
|
|
<i class="fas fa-check-circle"></i>→ Download-Link: <a id="result-url" href="#" target="_blank" class="alert-link"></a>
|
|
</p>
|
|
<p id="error-message" class="alert alert-danger d-none" role="alert"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- History Spalte -->
|
|
<div class="col-lg-7">
|
|
<div class="card shadow-sm">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<span><i class="fas fa-history"></i> Verlauf</span>
|
|
{# Button nur anzeigen, wenn History aktiviert ist #}
|
|
{% if history_enabled %}
|
|
<button id="clear-history-button" class="btn btn-sm btn-outline-danger" title="Verlauf löschen">
|
|
<i class="fas fa-trash-alt"></i> Löschen
|
|
</button>
|
|
{% else %}
|
|
<span class="badge bg-secondary">Deaktiviert</span>
|
|
{% endif %}
|
|
</div>
|
|
<div class="card-body">
|
|
{% if not history_enabled %}
|
|
<p class="text-muted text-center">Der Verlaufs-Speicher ist in der Konfiguration deaktiviert.</p>
|
|
{% endif %}
|
|
<div class="table-responsive">
|
|
<table id="history-table" class="table table-striped table-hover table-sm caption-top">
|
|
{% if history_enabled %}
|
|
<caption>Rechtsklick auf URLs für Optionen</caption>
|
|
{% endif %}
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th>Zeit</th>
|
|
<th><i class="fas fa-globe"></i></th> <!-- Plattform Icon -->
|
|
<th>Titel</th>
|
|
<th>Quelle URL</th>
|
|
<th>URL</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{# Inhalt wird per JS geladen, aber initiale Meldung kann hier stehen #}
|
|
{% if history_enabled %}
|
|
<tr><td colspan="5" class="text-center text-muted">Lade Verlauf...</td></tr>
|
|
{% else %}
|
|
<tr><td colspan="5" class="text-center text-muted">- Verlauf deaktiviert -</td></tr>
|
|
{% endif %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> <!-- Ende row -->
|
|
</div> <!-- Ende Hauptinhalts-Container -->
|
|
|
|
<!-- Kontextmenü (versteckt) -->
|
|
<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="open"><i class="fas fa-external-link-alt me-2"></i>Öffnen</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>Kopieren</li>
|
|
</ul>
|
|
|
|
<!-- Footer (jetzt außerhalb des .container) -->
|
|
<footer class="container-fluid mt-auto py-3 text-center text-muted small page-footer">
|
|
<hr class="container"> <!-- Trennlinie innerhalb der Container-Breite -->
|
|
<div class="container"> <!-- Inhalt wieder zentriert -->
|
|
<p>
|
|
<span title="Gesamtzahl verarbeiteter Aufträge (erfolgreich oder fehlgeschlagen)">
|
|
<i class="fas fa-tasks"></i> Aufträge gesamt: <strong id="stats-total-jobs">...</strong>
|
|
</span> |
|
|
<span title="Durchschnittliche Verarbeitungszeit für erfolgreiche Aufträge">
|
|
<i class="fas fa-stopwatch"></i> Ø Dauer: <strong id="stats-avg-duration">...</strong> Sek.
|
|
</span> |
|
|
<span title="Gesamtgröße aller erfolgreich hochgeladenen Dateien">
|
|
<i class="fas fa-database"></i> Gesamtgröße: <strong id="stats-total-size">...</strong>
|
|
</span>
|
|
</p>
|
|
<p>
|
|
<i class="fa-solid fa-circle-info"></i> Download-Links werden nach <strong>7 Tage</strong> gelöscht!
|
|
</p>
|
|
<p>
|
|
<i class="fab fa-discord"></i> Kontakt bei Fragen/Problemen: <strong><a href="https://www.discordapp.com/users/155076323612688384">MrUnknownDE</a></strong>
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Fullscreen Processing Overlay -->
|
|
<div id="processing-overlay">
|
|
<img src="https://media.giphy.com/media/YQitE4YNQNahy/giphy.gif" alt="Processing Animation" width="300">
|
|
<p id="overlay-message">Hacking the mainframe...</p>
|
|
|
|
<!-- NEU: Status-Container im Overlay -->
|
|
<div class="overlay-status-container">
|
|
<p id="overlay-status-text">Initialisiere...</p>
|
|
<div class="progress" role="progressbar" aria-label="Overlay Progress" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
|
|
<div id="overlay-progress-bar" class="progress-bar" style="width: 0%">0%</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bootstrap JS Bundle -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
|
|
<!-- Custom JS -->
|
|
<script src="{{ url_for('static', filename='script.js') }}"></script>
|
|
</body>
|
|
</html> |