MrUnknownDE/medien-dl
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/medien-dl.git synced 2026-05-06 05:06:04 +02:00
Code Issues Packages Projects Releases Wiki Activity
Files
353f9b9e9bf77a78380ac2e1cd0297887b639c0b
medien-dl/templates/index.html
T
MrUnknownDE 353f9b9e9b remove server-sid history
2026-05-05 20:27:42 +02:00

221 lines
11 KiB
HTML
Raw Blame History

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>unknownMedien.dl</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<!-- Background layers -->
<div class="bg-base"></div>
<div class="bg-mesh"></div>
<div class="bg-glow bg-glow-1"></div>
<div class="bg-glow bg-glow-2"></div>
<div class="bg-glow bg-glow-3"></div>
<div class="bg-noise"></div>
<!-- Floating particles (CSS-animated) -->
<div class="particles" aria-hidden="true">
<span class="particle p1"></span>
<span class="particle p2"></span>
<span class="particle p3"></span>
<span class="particle p4"></span>
<span class="particle p5"></span>
<span class="particle p6"></span>
</div>
<!-- Navbar -->
<nav class="navbar fixed-top w-100 px-4 py-3 d-flex justify-content-between align-items-center">
<div class="brand">
unknown<span class="brand-accent">Medien</span><span class="brand-dot">.dl</span>
</div>
<button class="btn btn-glass-icon" data-bs-toggle="modal" data-bs-target="#historyModal" title="History">
<i class="fas fa-clock-rotate-left"></i>
</button>
</nav>
<!-- Main -->
<main class="page-center">
<div class="hero-wrapper">
<!-- Eyebrow -->
<div class="eyebrow fade-in">
<span class="eyebrow-dot"></span>
<span>Media Downloader</span>
</div>
<!-- Title -->
<h1 class="hero-title fade-in delay-1">
Download<br>anything.
</h1>
<p class="hero-sub fade-in delay-2">
Paste your link — we'll handle the rest.
</p>
<!-- Form -->
<div class="form-container fade-in delay-3">
<form id="upload-form" autocomplete="off">
<input type="hidden" name="platform" id="input-platform" value="SoundCloud">
<!-- URL Input Row -->
<div class="input-row">
<div class="glass-input-wrapper" id="input-wrapper">
<span class="input-icon" id="url-icon"><i class="fas fa-link"></i></span>
<input type="url" class="url-field" id="url" name="url" required
placeholder="https://soundcloud.com/..." />
<button class="start-btn" type="submit" id="submit-button">
<span class="start-label">Start</span>
<i class="fas fa-arrow-right start-arrow"></i>
<span class="btn-ripple"></span>
</button>
</div>
</div>
<!-- Platform detection -->
<div id="detection-area" class="detection-area">
<div class="platform-badge" id="platform-badge">
<span class="platform-pulse" id="platform-pulse"></span>
<i id="detected-icon" class="fab fa-soundcloud"></i>
<span id="detected-text">SoundCloud detected</span>
</div>
<!-- Options drawer -->
<div id="options-container" class="options-container">
<!-- YouTube -->
<div id="youtube-options" class="d-none option-block">
<div class="d-flex gap-4 justify-content-center flex-wrap">
<div class="option-col">
<div class="option-label">Format</div>
<div class="switch-toggle">
<input type="radio" name="yt_format" id="format-mp3" value="mp3" checked>
<label for="format-mp3">MP3</label>
<input type="radio" name="yt_format" id="format-mp4" value="mp4">
<label for="format-mp4">MP4</label>
<div class="toggle-pill"></div>
</div>
</div>
<div class="option-col" id="quality-wrapper">
<div class="option-label">Quality</div>
<select class="glass-select" id="mp3_bitrate" name="mp3_bitrate">
<option>Best</option>
<option selected>192k</option>
<option>128k</option>
<option>64k</option>
</select>
<select class="glass-select d-none" id="mp4_quality" name="mp4_quality">
<option selected>Best</option>
<option>Medium (~720p)</option>
<option>Low (~480p)</option>
</select>
</div>
</div>
</div>
<!-- Codec -->
<div id="codec-options-section" class="d-none option-block text-center">
<div class="codec-row">
<span class="option-label me-3">H.264 Compatibility</span>
<label class="toggle-switch">
<input class="ts-input" type="checkbox" role="switch" id="codec-switch">
<span class="ts-track"><span class="ts-thumb"></span></span>
<input type="hidden" name="codec_preference" id="codec_preference" value="original">
</label>
</div>
</div>
</div>
</div>
<!-- Error -->
<div id="error-message" class="error-alert d-none" role="alert"></div>
</form>
</div>
<!-- Processing view -->
<div id="process-view" class="d-none process-view">
<div class="process-header">
<h3 id="status-message" class="status-msg">INITIALIZING...</h3>
<span id="progress-pct" class="progress-pct">0%</span>
</div>
<div class="progress-track">
<div id="progress-bar" class="progress-fill" style="width:0%"></div>
</div>
<div class="terminal-window">
<div class="terminal-bar">
<span class="tdot tdot-r"></span>
<span class="tdot tdot-y"></span>
<span class="tdot tdot-g"></span>
<span class="tbar-label">worker@unknown-dl ~ process</span>
</div>
<div id="pseudo-log-content" class="terminal-body"></div>
</div>
</div>
<!-- Result view -->
<div id="result-view" class="d-none result-view">
<div class="result-card">
<div class="result-icon-wrap success-ripple">
<div class="result-icon">
<i class="fas fa-check"></i>
</div>
</div>
<h2 class="result-title">Done!</h2>
<p class="result-sub">Your file is ready to download.</p>
<a id="result-url" href="#" target="_blank" class="btn-download">
<i class="fas fa-download me-2"></i>Download
</a>
<div class="result-retry">
<button class="btn-retry" onclick="location.reload()">
<i class="fas fa-rotate-left me-1"></i>Convert another
</button>
</div>
</div>
</div>
</div>
</main>
<!-- 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 glass-modal">
<div class="modal-header">
<div>
<h5 class="modal-title">History</h5>
<p class="modal-hint">Stored locally in your browser · 7 days</p>
</div>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body p-0">
<div class="table-responsive" style="max-height: 55vh;">
<table class="history-table" id="history-table">
<thead>
<tr>
<th class="ps-4">Time</th>
<th>Platform</th>
<th>Title</th>
<th class="text-center">Source</th>
<th class="text-end pe-4">File</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button id="clear-history-button" class="btn-clear-history">
<i class="fas fa-trash-can me-1"></i>Clear all
</button>
<span class="modal-footer-hint">Your data never leaves this browser</span>
</div>
</div>
</div>
</div>
<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>
Reference in New Issue View Git Blame Copy Permalink