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
set -euo pipefail
set -eo pipefail
read -rsp "Set password for admin (HTTP Basic Auth): " pass1; 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
read -rp "Enter downloads directory [/app/data/downloads]: " downloads_dir
downloads_dir=${downloads_dir:-/app/data/downloads}
set -euo pipefail
mkdir -p /app/data/public/bin "$downloads_dir"
/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
@ -26,12 +32,10 @@ AuthUserFile /app/data/.htpasswd
Require valid-user
EOF
set +u
{
echo "[settings]"
echo "downloads_dir=$downloads_dir"
} > /app/data/config.ini
set -u
cat > /app/data/public/index.php <<'EOF'
<?php
@ -72,44 +76,77 @@ if ($_SERVER["REQUEST_METHOD"] === "POST") {
?>
<!DOCTYPE html>
<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>
<h1>yt-dlp Downloader</h1>
<form method="post">
<textarea name="urls" rows="10" cols="80" placeholder="One URL per line"></textarea><br><br>
<button type="submit">Download</button>
</form>
<header>
<div class="container">
<h1><i class="fas fa-download"></i> yt-dlp Downloader</h1>
<p><a href="/log.php" style="color: white; text-decoration: underline;">View Live Log</a></p>
</div>
</header>
<h2>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><br><br>
<button type="submit">Upload Cookies.txt</button>
</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>
<main class="container">
<form method="post">
<h2><i class="fas fa-link"></i> Video Download</h2>
<textarea name="urls" rows="8" placeholder="Paste URLs, one per line..." required></textarea>
<button type="submit"><i class="fas fa-cloud-download-alt"></i> Download Videos</button>
</form>
<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>
<ul>
<?php
$lines = @file("/tmp/yt-dlp.log", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES) ?: [];
$success = array_filter($lines, function($line) {
return preg_match("/Destination:/", $line);
});
$success = array_reverse($success);
$success = array_slice($success, 0, 5);
foreach ($success as $entry) {
echo "<li>" . htmlspecialchars($entry) . "</li>";
}
?>
</ul>
<div class="box">
<h2><i class="fas fa-clock"></i> Latest Downloads</h2>
<ul class="latest-downloads">
<?php
$lines = @file("/tmp/yt-dlp.log", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES) ?: [];
$success = array_filter($lines, fn($line) => preg_match("/Destination:/", $line));
$success = array_reverse($success);
$success = array_slice($success, 0, 5);
foreach ($success as $entry) {
echo "<li>" . htmlspecialchars($entry) . "</li>";
}
?>
</ul>
</div>
</main>
<footer>
<p>Powered by <a href="https://github.com/yt-dlp/yt-dlp" target="_blank">yt-dlp</a></p>
</footer>
</body>
</html>