ui(cloudron) add colors and CSS-bloat

I hate CF CDNs ;p
This commit is contained in:
SansGuidon 2025-04-28 14:00:55 +00:00
parent f773d65453
commit a89696f8b6

View File

@ -1,13 +1,19 @@
#!/bin/bash #!/bin/bash
set -euo pipefail set -eo pipefail
read -rsp "Set password for admin (HTTP Basic Auth): " pass1; echo read -rsp "Set password for admin (HTTP Basic Auth): " pass1; echo
read -rsp "Confirm password: " pass2; echo read -rsp "Confirm password: " pass2; echo
if [ -z "${pass1:-}" ] || [ -z "${pass2:-}" ]; then
echo "Password not set. Aborting."
exit 1
fi
[ "$pass1" != "$pass2" ] && echo "Passwords do not match." && exit 1 [ "$pass1" != "$pass2" ] && echo "Passwords do not match." && exit 1
read -rp "Enter downloads directory [/app/data/downloads]: " downloads_dir read -rp "Enter downloads directory [/app/data/downloads]: " downloads_dir
downloads_dir=${downloads_dir:-/app/data/downloads} downloads_dir=${downloads_dir:-/app/data/downloads}
set -euo pipefail
mkdir -p /app/data/public/bin "$downloads_dir" mkdir -p /app/data/public/bin "$downloads_dir"
/bin/rm -f /app/data/public/bin/yt-dlp /bin/rm -f /app/data/public/bin/yt-dlp
curl -sSL https://github.com/yt-dlp/yt-dlp/releases/latest/download/yt-dlp -o /app/data/public/bin/yt-dlp curl -sSL https://github.com/yt-dlp/yt-dlp/releases/latest/download/yt-dlp -o /app/data/public/bin/yt-dlp
@ -26,12 +32,10 @@ AuthUserFile /app/data/.htpasswd
Require valid-user Require valid-user
EOF EOF
set +u
{ {
echo "[settings]" echo "[settings]"
echo "downloads_dir=$downloads_dir" echo "downloads_dir=$downloads_dir"
} > /app/data/config.ini } > /app/data/config.ini
set -u
cat > /app/data/public/index.php <<'EOF' cat > /app/data/public/index.php <<'EOF'
<?php <?php
@ -72,44 +76,77 @@ if ($_SERVER["REQUEST_METHOD"] === "POST") {
?> ?>
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head><meta charset="UTF-8"><title>yt-dlp Downloader</title></head> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>yt-dlp Downloader</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
body { margin: 0; font-family: system-ui, sans-serif; background: #f9fafb; color: #111; }
header { background: linear-gradient(135deg, #6366f1, #8b5cf6, #d946ef); color: white; padding: 1rem; }
.container { max-width: 900px; margin: 2rem auto; padding: 1rem; }
h1, h2 { margin: 1rem 0; }
form, .box { background: white; border-radius: 0.5rem; padding: 1.5rem; box-shadow: 0 1px 4px rgba(0,0,0,0.1); margin-bottom: 2rem; }
textarea, input[type="file"] { width: 100%; margin-top: 0.5rem; margin-bottom: 1rem; }
button { background: #6366f1; color: white; padding: 0.7rem 1.2rem; border: none; border-radius: 0.5rem; cursor: pointer; font-weight: bold; transition: background 0.2s; }
button:hover { background: #4f46e5; }
a { color: #8b5cf6; }
.latest-downloads li { margin: 0.5rem 0; list-style: inside; }
footer { text-align: center; font-size: 0.8rem; margin-top: 4rem; color: #666; }
</style>
</head>
<body> <body>
<h1>yt-dlp Downloader</h1>
<form method="post"> <header>
<textarea name="urls" rows="10" cols="80" placeholder="One URL per line"></textarea><br><br> <div class="container">
<button type="submit">Download</button> <h1><i class="fas fa-download"></i> yt-dlp Downloader</h1>
</form> <p><a href="/log.php" style="color: white; text-decoration: underline;">View Live Log</a></p>
</div>
</header>
<h2>Cookies Management</h2> <main class="container">
<?php if (!file_exists("/app/data/cookies.txt")): ?> <form method="post">
<form method="post" enctype="multipart/form-data"> <h2><i class="fas fa-link"></i> Video Download</h2>
<input type="file" name="cookies" accept=".txt" required><br><br> <textarea name="urls" rows="8" placeholder="Paste URLs, one per line..." required></textarea>
<button type="submit">Upload Cookies.txt</button> <button type="submit"><i class="fas fa-cloud-download-alt"></i> Download Videos</button>
</form> </form>
<?php else: ?>
<form method="post">
<button type="submit" name="clearcookies" value="1">Clear Cookies.txt</button>
</form>
<?php endif; ?>
<p><small>Need help with cookies? <a href="https://github.com/yt-dlp/yt-dlp/wiki/FAQ#how-do-i-pass-cookies-to-yt-dlp" target="_blank">Learn how to export your cookies.txt</a>.</small></p>
<p><a href="/log.php" target="_blank">View Download Log</a></p> <div class="box">
<h2><i class="fas fa-cookie"></i> Cookies Management</h2>
<?php if (!file_exists("/app/data/cookies.txt")): ?>
<form method="post" enctype="multipart/form-data">
<input type="file" name="cookies" accept=".txt" required>
<button type="submit"><i class="fas fa-upload"></i> Upload cookies.txt</button>
</form>
<?php else: ?>
<form method="post">
<button type="submit" name="clearcookies" value="1"><i class="fas fa-trash"></i> Clear cookies.txt</button>
</form>
<?php endif; ?>
<p style="margin-top: 1rem;">
Need help? <a href="https://github.com/yt-dlp/yt-dlp/wiki/FAQ#how-do-i-pass-cookies-to-yt-dlp" target="_blank">How to export cookies.txt</a>
</p>
</div>
<h2>Latest Downloads</h2> <div class="box">
<ul> <h2><i class="fas fa-clock"></i> Latest Downloads</h2>
<?php <ul class="latest-downloads">
$lines = @file("/tmp/yt-dlp.log", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES) ?: []; <?php
$success = array_filter($lines, function($line) { $lines = @file("/tmp/yt-dlp.log", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES) ?: [];
return preg_match("/Destination:/", $line); $success = array_filter($lines, fn($line) => preg_match("/Destination:/", $line));
}); $success = array_reverse($success);
$success = array_reverse($success); $success = array_slice($success, 0, 5);
$success = array_slice($success, 0, 5); foreach ($success as $entry) {
foreach ($success as $entry) { echo "<li>" . htmlspecialchars($entry) . "</li>";
echo "<li>" . htmlspecialchars($entry) . "</li>"; }
} ?>
?> </ul>
</ul> </div>
</main>
<footer>
<p>Powered by <a href="https://github.com/yt-dlp/yt-dlp" target="_blank">yt-dlp</a></p>
</footer>
</body> </body>
</html> </html>