60 lines
2.6 KiB
HTML
60 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>YouTube Downloader</title>
|
|
<style>
|
|
body { font-family: sans-serif; margin: 20px; background-color: #f4f4f4; color: #333; }
|
|
.container { background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
|
|
h1 { color: #c00; text-align: center; }
|
|
form { margin-bottom: 20px; display: flex; }
|
|
input[type="text"] { flex-grow: 1; padding: 10px; border: 1px solid #ddd; border-radius: 4px; margin-right: 10px;}
|
|
input[type="submit"] { padding: 10px 15px; background-color: #c00; color: white; border: none; border-radius: 4px; cursor: pointer; }
|
|
input[type="submit"]:hover { background-color: #a00; }
|
|
ul { list-style-type: none; padding: 0; }
|
|
li { background-color: #eee; margin-bottom: 8px; padding: 10px; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; }
|
|
li a { text-decoration: none; color: #337ab7; }
|
|
li a:hover { text-decoration: underline; }
|
|
.message {
|
|
padding: 10px;
|
|
margin-bottom: 15px;
|
|
border-radius: 4px;
|
|
}
|
|
.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
|
|
.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
|
|
.info { background-color: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>YouTube Video Downloader</h1>
|
|
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% if messages %}
|
|
{% for category, message in messages %}
|
|
<div class="message {{ category }}">{{ message }}</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endwith %}
|
|
|
|
<form action="{{ url_for('download_video') }}" method="post">
|
|
<input type="text" name="youtube_url" placeholder="YouTube Video URL hier einfügen" required>
|
|
<input type="submit" value="Herunterladen">
|
|
</form>
|
|
|
|
<h2>Bereits heruntergeladene Videos:</h2>
|
|
{% if files %}
|
|
<ul>
|
|
{% for file in files %}
|
|
<li>
|
|
<a href="{{ url_for('play_video', filename=file) }}" target="_blank">{{ file }}</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% else %}
|
|
<p>Noch keine Videos heruntergeladen.</p>
|
|
{% endif %}
|
|
</div>
|
|
</body>
|
|
</html> |