mirror of
https://github.com/MrUnknownDE/medien-dl.git
synced 2026-05-01 03:13:45 +02:00
174 lines
9.7 KiB
HTML
174 lines
9.7 KiB
HTML
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<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" />
|
|
<!-- Custom CSS -->
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
|
</head>
|
|
<body>
|
|
|
|
<!-- 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 p-3">
|
|
|
|
<!-- 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">
|
|
<input type="hidden" name="platform" id="input-platform" value="SoundCloud">
|
|
|
|
<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 (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 -->
|
|
<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">
|
|
|
|
<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 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-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-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 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>
|
|
<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>
|
|
|
|
<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 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">
|
|
<input type="hidden" name="codec_preference" id="codec_preference" value="original">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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>
|
|
|
|
<!-- Progress View -->
|
|
<div id="progress-container" class="d-none mt-4 text-center">
|
|
<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 cli-output-line"></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">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()">
|
|
NEW SESSION
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="mt-auto py-4 text-center text-muted extra-small opacity-75">
|
|
© 2025 unknownMedien.dl • Links expire in 7 days.
|
|
</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 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 cli-table">
|
|
<thead class="cli-table-header sticky-top">
|
|
<tr>
|
|
<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">
|
|
<!-- JS fills this -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<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 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>
|
|
<script src="{{ url_for('static', filename='script.js') }}"></script>
|
|
</body>
|
|
</html> |