9e544456db
This repository contains Transmission RSS Manager with the following changes: - Fixed dark mode navigation tab visibility issue - Improved text contrast in dark mode throughout the app - Created dedicated dark-mode.css for better organization - Enhanced JavaScript for dynamic styling in dark mode - Added complete installation scripts 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
771 lines
46 KiB
HTML
771 lines
46 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Transmission RSS Manager</title>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js">
|
|
<link rel="stylesheet" href="css/styles.css">
|
|
<link rel="stylesheet" href="css/dark-mode.css">
|
|
</head>
|
|
<body>
|
|
<nav class="navbar navbar-expand-lg">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="#"><i class="bi bi-rss-fill me-2"></i>Transmission RSS Manager</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
<ul class="navbar-nav me-auto">
|
|
<li class="nav-item"><a class="nav-link" href="#" data-page="dashboard"><i class="bi bi-speedometer2 me-1"></i>Dashboard</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="#" data-page="feeds"><i class="bi bi-rss me-1"></i>RSS Feeds</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="#" data-page="torrents"><i class="bi bi-cloud-download me-1"></i>Torrents</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="#" data-page="logs"><i class="bi bi-journal-text me-1"></i>Logs</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="#" data-page="settings"><i class="bi bi-gear me-1"></i>Settings</a></li>
|
|
</ul>
|
|
<div class="d-flex align-items-center">
|
|
<button id="dark-mode-toggle" class="btn dark-mode-toggle" title="Toggle Dark Mode">
|
|
<i class="bi bi-moon-fill"></i>
|
|
</button>
|
|
<span class="ms-2 me-2 app-version">v1.0.0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Toast Container for Notifications -->
|
|
<div class="toast-container"></div>
|
|
|
|
<div class="container mt-4">
|
|
<div id="page-dashboard" class="page-content">
|
|
<h2 class="mb-4"><i class="bi bi-speedometer2 me-2"></i>Dashboard</h2>
|
|
|
|
<!-- Dashboard Stats Cards -->
|
|
<div class="dashboard-stats mb-4">
|
|
<div class="stat-card">
|
|
<i class="bi bi-cloud-download text-primary mb-2" style="font-size: 2rem;"></i>
|
|
<div class="stat-value" id="active-downloads">-</div>
|
|
<div class="stat-label">Active Downloads</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<i class="bi bi-cloud-upload text-success mb-2" style="font-size: 2rem;"></i>
|
|
<div class="stat-value" id="seeding-torrents">-</div>
|
|
<div class="stat-label">Seeding Torrents</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<i class="bi bi-rss text-info mb-2" style="font-size: 2rem;"></i>
|
|
<div class="stat-value" id="active-feeds">-</div>
|
|
<div class="stat-label">Active Feeds</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<i class="bi bi-check2-circle text-success mb-2" style="font-size: 2rem;"></i>
|
|
<div class="stat-value" id="completed-today">-</div>
|
|
<div class="stat-label">Completed Today</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Download and Upload Speed -->
|
|
<div class="row mb-4">
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<span><i class="bi bi-arrow-down-up me-2"></i>Download/Upload Speed</span>
|
|
<span class="badge bg-primary" id="current-speed">-</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between mb-2">
|
|
<div>
|
|
<span class="text-primary"><i class="bi bi-arrow-down me-1"></i>Download:</span>
|
|
<span id="download-speed">0 KB/s</span>
|
|
</div>
|
|
<div>
|
|
<span class="text-success"><i class="bi bi-arrow-up me-1"></i>Upload:</span>
|
|
<span id="upload-speed">0 KB/s</span>
|
|
</div>
|
|
</div>
|
|
<div class="progress mb-3">
|
|
<div id="download-speed-bar" class="progress-bar bg-primary" style="width: 0%"></div>
|
|
</div>
|
|
<div class="progress">
|
|
<div id="upload-speed-bar" class="progress-bar bg-success" style="width: 0%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<i class="bi bi-clock-history me-2"></i>Activity Summary
|
|
</div>
|
|
<div class="card-body">
|
|
<ul class="list-group list-group-flush">
|
|
<li class="list-group-item d-flex justify-content-between align-items-center">
|
|
Added Today
|
|
<span class="badge bg-primary" id="added-today">-</span>
|
|
</li>
|
|
<li class="list-group-item d-flex justify-content-between align-items-center">
|
|
Completed Today
|
|
<span class="badge bg-success" id="finished-today">-</span>
|
|
</li>
|
|
<li class="list-group-item d-flex justify-content-between align-items-center">
|
|
Active RSS Feeds
|
|
<span class="badge bg-info" id="feeds-count">-</span>
|
|
</li>
|
|
<li class="list-group-item d-flex justify-content-between align-items-center">
|
|
Matched Items
|
|
<span class="badge bg-warning" id="matched-count">-</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Download History Chart -->
|
|
<div class="row mb-4">
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<i class="bi bi-graph-up me-2"></i>Download History (Last 30 Days)
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="chart-container">
|
|
<canvas id="download-history-chart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Active Torrents and Recent Matches -->
|
|
<div class="row">
|
|
<div class="col-lg-7">
|
|
<div class="card">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<span><i class="bi bi-cloud-download me-2"></i>Active Torrents</span>
|
|
<a href="#" data-page="torrents" class="btn btn-sm btn-outline-primary">View All</a>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="active-torrents-list">Loading...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-5">
|
|
<div class="card">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<span><i class="bi bi-lightning-charge me-2"></i>Recent Matches</span>
|
|
<a href="#" data-page="feeds" class="btn btn-sm btn-outline-primary">View All</a>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="recent-matches-list">Loading...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="page-feeds" class="page-content d-none">
|
|
<h2>RSS Feeds</h2>
|
|
<div class="mb-3">
|
|
<button id="btn-add-feed" class="btn btn-primary">Add Feed</button>
|
|
<button id="btn-refresh-feeds" class="btn btn-secondary">Refresh Feeds</button>
|
|
</div>
|
|
<div id="feeds-list">Loading...</div>
|
|
|
|
<div class="mt-4">
|
|
<h3>Feed Items</h3>
|
|
<ul class="nav nav-tabs" id="feedTabs">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" data-bs-toggle="tab" href="#all-items">All Items</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-bs-toggle="tab" href="#matched-items">Matched Items</a>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content mt-2">
|
|
<div class="tab-pane fade show active" id="all-items">
|
|
<div id="all-items-list">Loading...</div>
|
|
</div>
|
|
<div class="tab-pane fade" id="matched-items">
|
|
<div id="matched-items-list">Loading...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="page-torrents" class="page-content d-none">
|
|
<h2>Torrents</h2>
|
|
<div class="mb-3">
|
|
<button id="btn-add-torrent" class="btn btn-primary">Add Torrent</button>
|
|
<button id="btn-refresh-torrents" class="btn btn-secondary">Refresh Torrents</button>
|
|
</div>
|
|
<div id="torrents-list">Loading...</div>
|
|
</div>
|
|
|
|
<div id="page-logs" class="page-content d-none">
|
|
<h2 class="mb-4"><i class="bi bi-journal-text me-2"></i>System Logs</h2>
|
|
|
|
<div class="card mb-4">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<span><i class="bi bi-funnel me-2"></i>Log Filters</span>
|
|
<div>
|
|
<button class="btn btn-sm btn-outline-secondary" id="btn-refresh-logs">
|
|
<i class="bi bi-arrow-clockwise me-1"></i>Refresh
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-danger ms-2" id="btn-clear-logs">
|
|
<i class="bi bi-trash me-1"></i>Clear Logs
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<div class="mb-3">
|
|
<label for="log-level" class="form-label">Log Level</label>
|
|
<select class="form-select" id="log-level">
|
|
<option value="All">All Levels</option>
|
|
<option value="Debug">Debug</option>
|
|
<option value="Information">Information</option>
|
|
<option value="Warning">Warning</option>
|
|
<option value="Error">Error</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="mb-3">
|
|
<label for="log-search" class="form-label">Search</label>
|
|
<input type="text" class="form-control" id="log-search" placeholder="Search logs...">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="mb-3">
|
|
<label for="log-date-range" class="form-label">Date Range</label>
|
|
<select class="form-select" id="log-date-range">
|
|
<option value="today">Today</option>
|
|
<option value="yesterday">Yesterday</option>
|
|
<option value="week" selected>Last 7 days</option>
|
|
<option value="month">Last 30 days</option>
|
|
<option value="all">All time</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="d-flex justify-content-between mb-2">
|
|
<div>
|
|
<button class="btn btn-sm btn-outline-primary" id="btn-apply-log-filters">
|
|
<i class="bi bi-funnel-fill me-1"></i>Apply Filters
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-secondary ms-2" id="btn-reset-log-filters">
|
|
<i class="bi bi-x-circle me-1"></i>Reset Filters
|
|
</button>
|
|
</div>
|
|
<div>
|
|
<button class="btn btn-sm btn-outline-primary" id="btn-export-logs">
|
|
<i class="bi bi-download me-1"></i>Export Logs
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<span><i class="bi bi-list-ul me-2"></i>Log Entries</span>
|
|
<span class="badge bg-secondary" id="log-count">0 entries</span>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 180px;">Timestamp</th>
|
|
<th style="width: 100px;">Level</th>
|
|
<th>Message</th>
|
|
<th style="width: 120px;">Context</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="logs-table-body">
|
|
<tr>
|
|
<td colspan="4" class="text-center py-4">Loading logs...</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<span id="logs-pagination-info">Showing 0 of 0 entries</span>
|
|
</div>
|
|
<div>
|
|
<nav aria-label="Logs pagination">
|
|
<ul class="pagination pagination-sm mb-0" id="logs-pagination">
|
|
<li class="page-item disabled">
|
|
<a class="page-link" href="#" aria-label="Previous">
|
|
<span aria-hidden="true">«</span>
|
|
</a>
|
|
</li>
|
|
<li class="page-item active"><a class="page-link" href="#">1</a></li>
|
|
<li class="page-item disabled">
|
|
<a class="page-link" href="#" aria-label="Next">
|
|
<span aria-hidden="true">»</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="page-settings" class="page-content d-none">
|
|
<h2 class="mb-4"><i class="bi bi-gear me-2"></i>Settings</h2>
|
|
<form id="settings-form">
|
|
<ul class="nav nav-tabs mb-4" id="settings-tabs">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" data-bs-toggle="tab" href="#tab-transmission">
|
|
<i class="bi bi-cloud me-1"></i>Transmission
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-bs-toggle="tab" href="#tab-rss">
|
|
<i class="bi bi-rss me-1"></i>RSS
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-bs-toggle="tab" href="#tab-processing">
|
|
<i class="bi bi-tools me-1"></i>Processing
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-bs-toggle="tab" href="#tab-appearance">
|
|
<i class="bi bi-palette me-1"></i>Appearance
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-bs-toggle="tab" href="#tab-advanced">
|
|
<i class="bi bi-sliders me-1"></i>Advanced
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="tab-content">
|
|
<!-- Transmission Settings Tab -->
|
|
<div class="tab-pane fade show active" id="tab-transmission">
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<i class="bi bi-cloud me-2"></i>Primary Transmission Instance
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label for="transmission-host" class="form-label">Host</label>
|
|
<input type="text" class="form-control" id="transmission-host" name="transmission.host">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label for="transmission-port" class="form-label">Port</label>
|
|
<input type="number" class="form-control" id="transmission-port" name="transmission.port">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="mb-3">
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="transmission-use-https" name="transmission.useHttps">
|
|
<label class="form-check-label" for="transmission-use-https">Use HTTPS</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label for="transmission-username" class="form-label">Username</label>
|
|
<input type="text" class="form-control" id="transmission-username" name="transmission.username">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label for="transmission-password" class="form-label">Password</label>
|
|
<input type="password" class="form-control" id="transmission-password" name="transmission.password">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Additional Transmission Instances -->
|
|
<div class="card mb-4">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<span><i class="bi bi-hdd-stack me-2"></i>Additional Transmission Instances</span>
|
|
<button type="button" class="btn btn-sm btn-primary" id="add-transmission-instance">
|
|
<i class="bi bi-plus-circle me-1"></i>Add Instance
|
|
</button>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="transmission-instances-list">
|
|
<div class="text-center text-muted py-3">No additional instances configured</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- RSS Settings Tab -->
|
|
<div class="tab-pane fade" id="tab-rss">
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<i class="bi bi-rss me-2"></i>RSS General Settings
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="auto-download-enabled" name="autoDownloadEnabled">
|
|
<label class="form-check-label" for="auto-download-enabled">Enable Auto Download</label>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="check-interval" class="form-label">Default Check Interval (minutes)</label>
|
|
<input type="number" class="form-control" id="check-interval" name="checkIntervalMinutes">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="max-feed-items" class="form-label">Maximum Items per Feed</label>
|
|
<input type="number" class="form-control" id="max-feed-items" name="maxFeedItems" value="100">
|
|
<div class="form-text">Maximum number of items to keep per feed (for performance)</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<i class="bi bi-filter-circle me-2"></i>Content Filtering
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="enable-regex-matching" name="enableRegexMatching">
|
|
<label class="form-check-label" for="enable-regex-matching">Enable Regular Expression Matching</label>
|
|
</div>
|
|
<div class="form-text">When enabled, feed rules can use regular expressions for more advanced matching</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="case-sensitive-matching" name="caseSensitiveMatching">
|
|
<label class="form-check-label" for="case-sensitive-matching">Case Sensitive Matching</label>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="global-exclude-patterns" class="form-label">Global Exclude Patterns (one per line)</label>
|
|
<textarea class="form-control" id="global-exclude-patterns" name="globalExcludePatterns" rows="3"></textarea>
|
|
<div class="form-text">Items matching these patterns will be ignored regardless of feed rules</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Processing Tab -->
|
|
<div class="tab-pane fade" id="tab-processing">
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<i class="bi bi-folder me-2"></i>Directories
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<label for="download-directory" class="form-label">Default Download Directory</label>
|
|
<input type="text" class="form-control" id="download-directory" name="downloadDirectory">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="media-library" class="form-label">Media Library Path</label>
|
|
<input type="text" class="form-control" id="media-library" name="mediaLibraryPath">
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="create-category-folders" name="createCategoryFolders">
|
|
<label class="form-check-label" for="create-category-folders">Create Category Folders</label>
|
|
</div>
|
|
<div class="form-text">Create subfolders based on feed categories</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<i class="bi bi-tools me-2"></i>Post Processing
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="post-processing-enabled" name="postProcessing.enabled">
|
|
<label class="form-check-label" for="post-processing-enabled">Enable Post Processing</label>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="extract-archives" name="postProcessing.extractArchives">
|
|
<label class="form-check-label" for="extract-archives">Extract Archives</label>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="organize-media" name="postProcessing.organizeMedia">
|
|
<label class="form-check-label" for="organize-media">Organize Media</label>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="auto-organize-media-type" name="postProcessing.autoOrganizeByMediaType">
|
|
<label class="form-check-label" for="auto-organize-media-type">Auto-organize by Media Type</label>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="rename-files" name="postProcessing.renameFiles">
|
|
<label class="form-check-label" for="rename-files">Rename Files</label>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="compress-completed" name="postProcessing.compressCompletedFiles">
|
|
<label class="form-check-label" for="compress-completed">Compress Completed Files</label>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="minimum-seed-ratio" class="form-label">Minimum Seed Ratio</label>
|
|
<input type="number" class="form-control" id="minimum-seed-ratio" name="postProcessing.minimumSeedRatio">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="delete-completed-after" class="form-label">Delete Completed After (days)</label>
|
|
<input type="number" class="form-control" id="delete-completed-after" name="postProcessing.deleteCompletedAfterDays" value="0">
|
|
<div class="form-text">Number of days after which completed torrents will be removed (0 = never)</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="media-extensions" class="form-label">Media Extensions (comma separated)</label>
|
|
<input type="text" class="form-control" id="media-extensions" name="mediaExtensions">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Appearance Tab -->
|
|
<div class="tab-pane fade" id="tab-appearance">
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<i class="bi bi-palette me-2"></i>User Interface
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="enable-dark-mode" name="userPreferences.enableDarkMode">
|
|
<label class="form-check-label" for="enable-dark-mode">Enable Dark Mode</label>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="auto-refresh-ui" name="userPreferences.autoRefreshUIEnabled">
|
|
<label class="form-check-label" for="auto-refresh-ui">Auto Refresh UI</label>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="auto-refresh-interval" class="form-label">Auto Refresh Interval (seconds)</label>
|
|
<input type="number" class="form-control" id="auto-refresh-interval" name="userPreferences.autoRefreshIntervalSeconds" value="30">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="default-view" class="form-label">Default View</label>
|
|
<select class="form-select" id="default-view" name="userPreferences.defaultView">
|
|
<option value="dashboard">Dashboard</option>
|
|
<option value="feeds">RSS Feeds</option>
|
|
<option value="torrents">Torrents</option>
|
|
<option value="settings">Settings</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="items-per-page" class="form-label">Items Per Page</label>
|
|
<input type="number" class="form-control" id="items-per-page" name="userPreferences.maxItemsPerPage" value="25">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="date-format" class="form-label">Date Format</label>
|
|
<input type="text" class="form-control" id="date-format" name="userPreferences.dateTimeFormat" value="yyyy-MM-dd HH:mm:ss">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<i class="bi bi-bell me-2"></i>Notifications
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="enable-notifications" name="userPreferences.notificationsEnabled">
|
|
<label class="form-check-label" for="enable-notifications">Enable Notifications</label>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Notification Events</label>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="notify-torrent-added" name="notificationEvents" value="torrent-added">
|
|
<label class="form-check-label" for="notify-torrent-added">Torrent Added</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="notify-torrent-completed" name="notificationEvents" value="torrent-completed">
|
|
<label class="form-check-label" for="notify-torrent-completed">Torrent Completed</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="notify-torrent-error" name="notificationEvents" value="torrent-error">
|
|
<label class="form-check-label" for="notify-torrent-error">Torrent Error</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="notify-feed-error" name="notificationEvents" value="feed-error">
|
|
<label class="form-check-label" for="notify-feed-error">Feed Error</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Advanced Tab -->
|
|
<div class="tab-pane fade" id="tab-advanced">
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<i class="bi bi-sliders me-2"></i>Advanced Settings
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="detailed-logging" name="enableDetailedLogging">
|
|
<label class="form-check-label" for="detailed-logging" id="detailed-logging-label" style="color: inherit !important;">Enable Detailed Logging</label>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="show-completed-torrents" name="userPreferences.showCompletedTorrents">
|
|
<label class="form-check-label" for="show-completed-torrents" id="show-completed-torrents-label" style="color: white !important;">Show Completed Torrents</label>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="confirm-delete" name="userPreferences.confirmBeforeDelete">
|
|
<label class="form-check-label" for="confirm-delete" id="confirm-delete-label" style="color: white !important;">Confirm Before Delete</label>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="history-days" class="form-label">Keep History (days)</label>
|
|
<input type="number" class="form-control" id="history-days" name="userPreferences.keepHistoryDays" value="30">
|
|
<div class="form-text">Number of days to keep historical data</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<i class="bi bi-database me-2"></i>Database
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="alert alert-warning">
|
|
<i class="bi bi-exclamation-triangle-fill me-2"></i>Warning: These operations affect your data permanently.
|
|
</div>
|
|
<div class="d-flex gap-2 mt-3">
|
|
<button type="button" class="btn btn-outline-primary" id="btn-backup-db">
|
|
<i class="bi bi-download me-1"></i>Backup Database
|
|
</button>
|
|
<button type="button" class="btn btn-outline-secondary" id="btn-clean-db">
|
|
<i class="bi bi-trash me-1"></i>Clean Old Data
|
|
</button>
|
|
<button type="button" class="btn btn-outline-danger" id="btn-reset-db">
|
|
<i class="bi bi-arrow-repeat me-1"></i>Reset Database
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-between mt-4">
|
|
<button type="button" class="btn btn-outline-secondary" id="btn-reset-settings">Reset to Defaults</button>
|
|
<button type="submit" class="btn btn-primary"><i class="bi bi-save me-1"></i>Save Settings</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modals -->
|
|
<div class="modal fade" id="add-feed-modal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Add RSS Feed</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="add-feed-form">
|
|
<div class="mb-3">
|
|
<label for="feed-name" class="form-label">Name</label>
|
|
<input type="text" class="form-control" id="feed-name" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="feed-url" class="form-label">URL</label>
|
|
<input type="url" class="form-control" id="feed-url" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="feed-rules" class="form-label">Match Rules (one per line)</label>
|
|
<textarea class="form-control" id="feed-rules" rows="5"></textarea>
|
|
<div class="form-text">Use regular expressions to match feed items.</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="feed-auto-download">
|
|
<label class="form-check-label" for="feed-auto-download">Auto Download</label>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-primary" id="save-feed-btn">Add Feed</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="add-torrent-modal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Add Torrent</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="add-torrent-form">
|
|
<div class="mb-3">
|
|
<label for="torrent-url" class="form-label">Torrent URL or Magnet Link</label>
|
|
<input type="text" class="form-control" id="torrent-url" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="torrent-download-dir" class="form-label">Download Directory (optional)</label>
|
|
<input type="text" class="form-control" id="torrent-download-dir">
|
|
<div class="form-text">Leave empty to use default download directory.</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-primary" id="save-torrent-btn">Add Torrent</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/luxon@3.4.4/build/global/luxon.min.js"></script>
|
|
<script src="js/app.js"></script>
|
|
</body>
|
|
</html> |