masterdraco/torrent-man
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit with UI fixes for dark mode

Browse Source 
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>
This commit is contained in:
Claude
2025-03-13 17:16:41 +00:00
commit 9e544456db
66 changed files with 20187 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
wwwroot/css/dark-mode.css Normal file
View File

@@ -0,0 +1,70 @@
/* Dark mode specific overrides - Created to fix dark mode text visibility */
/* These styles ensure proper text contrast in dark mode */
body.dark-mode .form-check-label,
body.dark-mode label,
body.dark-mode .form-text,
body.dark-mode .card-body label,
body.dark-mode .nav-tabs .nav-link {
color: #f5f5f5 \!important;
}
/* Tab navigation in dark mode */
body.dark-mode .nav-tabs .nav-link.active {
background-color: #375a7f;
border-color: #444 #444 #375a7f;
color: #ffffff \!important;
font-weight: bold;
}
body.dark-mode .nav-tabs .nav-link:not(.active):hover {
border-color: #444;
background-color: #2c2c2c;
color: #ffffff \!important;
}
/* Ensure form elements in dark mode are visible */
body.dark-mode .form-control::placeholder {
color: #adb5bd;
opacity: 0.7;
}
/* Top navigation in dark mode */
body.dark-mode .navbar-nav .nav-link.active {
background-color: #375a7f;
color: #ffffff \!important;
font-weight: bold;
border-radius: 4px;
}
/* Advanced tab specific fixes */
body.dark-mode #tab-advanced .form-check-label,
body.dark-mode #tab-advanced label,
body.dark-mode #tab-advanced .form-text {
color: #ffffff \!important;
}
/* Ensure all tabs have proper text color */
body.dark-mode #tab-transmission,
body.dark-mode #tab-rss,
body.dark-mode #tab-processing,
body.dark-mode #tab-appearance,
body.dark-mode #tab-advanced {
color: #f5f5f5 \!important;
}
body.dark-mode #tab-transmission *,
body.dark-mode #tab-rss *,
body.dark-mode #tab-processing *,
body.dark-mode #tab-appearance *,
body.dark-mode #tab-advanced * {
color: #f5f5f5 \!important;
}
/* Emergency fix for specific labels that were still problematic */
body.dark-mode #detailed-logging-label,
body.dark-mode #show-completed-torrents-label,
body.dark-mode #confirm-delete-label {
color: white \!important;
font-weight: 500 \!important;
}

724
wwwroot/css/styles.css Normal file
View File

@@ -0,0 +1,724 @@
:root {
/* Light Theme Variables */
--primary-color: #0d6efd;
--secondary-color: #6c757d;
--dark-color: #212529;
--light-color: #f8f9fa;
--success-color: #198754;
--danger-color: #dc3545;
--warning-color: #ffc107;
--info-color: #0dcaf0;
/* Common Variables */
--border-radius: 4px;
--shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
--transition: all 0.3s ease;
/* Light Theme Specific */
--bg-color: #ffffff;
--text-color: #212529;
--card-bg: #f8f9fa;
--card-header-bg: #e9ecef;
--card-border: 1px solid rgba(0, 0, 0, 0.125);
--hover-bg: #e9ecef;
--table-border: #dee2e6;
--input-bg: #fff;
--input-border: #ced4da;
--dropdown-bg: #fff;
--modal-bg: #fff;
--feed-item-bg: #f8f9fa;
--torrent-item-bg: #f8f9fa;
}
/* Dark Theme */
body.dark-mode {
--bg-color: #121212;
--text-color: #f5f5f5;
--card-bg: #1e1e1e;
--card-header-bg: #252525;
--card-border: 1px solid rgba(255, 255, 255, 0.125);
--hover-bg: #2c2c2c;
--table-border: #333;
--input-bg: #2c2c2c;
--input-border: #444;
--dropdown-bg: #2c2c2c;
--modal-bg: #1e1e1e;
--feed-item-bg: #1e1e1e;
--torrent-item-bg: #1e1e1e;
color-scheme: dark;
}
/* Global forced text color for dark mode */
body.dark-mode * {
color: #f5f5f5;
}
/* Fix for dark mode text colors */
body.dark-mode .text-dark,
body.dark-mode .text-body,
body.dark-mode .text-primary,
body.dark-mode .modal-title,
body.dark-mode .form-label,
body.dark-mode .form-check-label,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode label,
body.dark-mode .card-title,
body.dark-mode .form-text,
body.dark-mode .tab-content {
color: #f5f5f5 !important;
}
body.dark-mode .text-secondary,
body.dark-mode .text-muted {
color: #adb5bd !important;
}
body.dark-mode .nav-link {
color: #f5f5f5;
}
body.dark-mode .nav-link:hover,
body.dark-mode .nav-link:focus {
color: #0d6efd;
}
body.dark-mode .nav-link.active {
color: #f5f5f5;
background-color: #375a7f !important;
font-weight: bold;
}
body.dark-mode .dropdown-menu {
background-color: #1e1e1e;
border-color: rgba(255, 255, 255, 0.125);
}
body.dark-mode .dropdown-item {
color: #f5f5f5;
}
body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
background-color: #2c2c2c;
color: #f5f5f5;
}
body.dark-mode .list-group-item {
background-color: #1e1e1e;
color: #f5f5f5;
border-color: rgba(255, 255, 255, 0.125);
}
body.dark-mode .feed-item-date,
body.dark-mode .torrent-item-details {
color: #adb5bd;
}
/* Links in dark mode */
body.dark-mode a:not(.btn):not(.badge) {
color: #6ea8fe;
}
body.dark-mode a:not(.btn):not(.badge):hover {
color: #8bb9fe;
}
/* Ensure tab navs in dark mode have proper styling */
body.dark-mode .nav-tabs .nav-link.active {
background-color: #375a7f;
border-color: #444 #444 #375a7f;
color: #fff !important;
}
body.dark-mode .nav-tabs .nav-link:not(.active):hover {
border-color: #444;
background-color: #2c2c2c;
color: #fff !important;
}
/* Table in dark mode */
body.dark-mode .table {
color: #f5f5f5;
}
/* Alerts in dark mode */
body.dark-mode .alert-info {
background-color: #0d3251;
color: #6edff6;
border-color: #0a3a5a;
}
body.dark-mode .alert-success {
background-color: #051b11;
color: #75b798;
border-color: #0c2a1c;
}
body.dark-mode .alert-warning {
background-color: #332701;
color: #ffda6a;
border-color: #473b08;
}
body.dark-mode .alert-danger {
background-color: #2c0b0e;
color: #ea868f;
border-color: #401418;
}
/* Advanced tab fix */
body.dark-mode #tab-advanced,
body.dark-mode #tab-advanced * {
color: #f5f5f5 !important;
}
body.dark-mode #tab-advanced .form-check-label,
body.dark-mode .form-switch .form-check-label,
body.dark-mode label[for="show-completed-torrents"] {
color: #f5f5f5 !important;
}
/* Base Elements */
body {
padding-bottom: 2rem;
background-color: var(--bg-color);
color: var(--text-color);
transition: var(--transition);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
/* Navigation */
.navbar {
margin-bottom: 1rem;
background-color: var(--card-bg);
border-bottom: var(--card-border);
transition: var(--transition);
}
.navbar-brand, .nav-link {
color: var(--text-color);
transition: var(--transition);
}
.navbar-toggler {
border-color: var(--input-border);
}
.page-content {
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Cards */
.card {
margin-bottom: 1rem;
box-shadow: var(--shadow);
background-color: var(--card-bg);
border: var(--card-border);
border-radius: var(--border-radius);
transition: var(--transition);
}
.card-header {
background-color: var(--card-header-bg);
font-weight: 500;
border-bottom: var(--card-border);
transition: var(--transition);
}
/* Tables */
.table {
margin-bottom: 0;
color: var(--text-color);
transition: var(--transition);
}
.table thead th {
border-bottom-color: var(--table-border);
}
.table td, .table th {
border-top-color: var(--table-border);
}
/* Progress Bars */
.progress {
height: 10px;
background-color: var(--card-header-bg);
border-radius: var(--border-radius);
}
/* Badges */
.badge {
padding: 0.35em 0.65em;
border-radius: 50rem;
}
.badge-downloading {
background-color: var(--info-color);
color: var(--dark-color);
}
.badge-seeding {
background-color: var(--success-color);
color: white;
}
.badge-stopped {
background-color: var(--secondary-color);
color: white;
}
.badge-checking {
background-color: var(--warning-color);
color: var(--dark-color);
}
.badge-queued {
background-color: var(--secondary-color);
color: white;
}
.badge-error {
background-color: var(--danger-color);
color: white;
}
/* Buttons */
.btn {
border-radius: var(--border-radius);
transition: var(--transition);
}
.btn-icon {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
}
.btn-primary {
background-color: var(--primary-color);
border-color: var(--primary-color);
}
.btn-secondary {
background-color: var(--secondary-color);
border-color: var(--secondary-color);
}
.btn-success {
background-color: var(--success-color);
border-color: var(--success-color);
}
.btn-danger {
background-color: var(--danger-color);
border-color: var(--danger-color);
}
.btn-warning {
background-color: var(--warning-color);
border-color: var(--warning-color);
color: var(--dark-color);
}
.btn-info {
background-color: var(--info-color);
border-color: var(--info-color);
color: var(--dark-color);
}
/* Inputs & Forms */
.form-control, .form-select {
background-color: var(--input-bg);
border-color: var(--input-border);
color: var(--text-color);
border-radius: var(--border-radius);
transition: var(--transition);
}
.form-control:focus, .form-select:focus {
background-color: var(--input-bg);
color: var(--text-color);
border-color: var(--primary-color);
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
body.dark-mode .form-control,
body.dark-mode .form-select {
color: #f5f5f5;
background-color: #2c2c2c;
border-color: #444;
}
body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
background-color: #2c2c2c;
color: #f5f5f5;
}
body.dark-mode .form-control::placeholder {
color: #adb5bd;
opacity: 0.7;
}
/* Form switches in dark mode */
body.dark-mode .form-check-input:checked {
background-color: #0d6efd;
border-color: #0d6efd;
}
body.dark-mode .form-check-input:not(:checked) {
background-color: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.25);
}
body.dark-mode .form-check {
color: #f5f5f5 !important;
}
body.dark-mode .form-check-label,
body.dark-mode label.form-check-label,
body.dark-mode .form-switch label,
body.dark-mode label[for],
body.dark-mode .card-body label,
body.dark-mode #show-completed-torrents + label,
body.dark-mode label[for="show-completed-torrents"] {
color: #f5f5f5 !important;
}
/* Direct fix for the show completed torrents label */
html body.dark-mode div#tab-advanced div.card-body div.form-check label.form-check-label[for="show-completed-torrents"],
html body.dark-mode div#tab-advanced div.mb-3 div.form-check-label,
html body.dark-mode div#tab-advanced label.form-check-label {
color: #ffffff !important;
font-weight: 500 !important;
text-shadow: 0 0 1px #000 !important;
}
/* Fix all form check labels in dark mode */
html body.dark-mode .form-check-label {
color: #ffffff !important;
}
/* Fix for all tabs in dark mode */
body.dark-mode #tab-advanced,
body.dark-mode #tab-advanced *,
body.dark-mode #tab-appearance,
body.dark-mode #tab-appearance *,
body.dark-mode #tab-processing,
body.dark-mode #tab-processing *,
body.dark-mode #tab-rss,
body.dark-mode #tab-rss *,
body.dark-mode #tab-transmission,
body.dark-mode #tab-transmission * {
color: #f5f5f5 !important;
}
body.dark-mode .tab-content,
body.dark-mode .tab-content * {
color: #f5f5f5 !important;
}
/* Emergency fix for advanced tab */
body.dark-mode .form-check-label {
color: white !important;
}
/* Super specific advanced tab fix */
body.dark-mode #detailed-logging + label,
body.dark-mode #show-completed-torrents + label,
body.dark-mode #confirm-delete + label,
body.dark-mode div.form-check-label,
body.dark-mode label.form-check-label {
color: white !important;
}
/* Feed Items */
.feed-item {
border-left: 3px solid transparent;
padding: 15px;
margin-bottom: 15px;
background-color: var(--feed-item-bg);
border-radius: var(--border-radius);
transition: var(--transition);
}
.feed-item:hover {
background-color: var(--hover-bg);
}
.feed-item.matched {
border-left-color: var(--success-color);
}
.feed-item.downloaded {
opacity: 0.7;
}
.feed-item-title {
font-weight: 500;
margin-bottom: 8px;
}
.feed-item-date {
font-size: 0.85rem;
color: var(--secondary-color);
}
.feed-item-buttons {
margin-top: 12px;
display: flex;
gap: 8px;
}
/* Torrent Items */
.torrent-item {
margin-bottom: 20px;
padding: 15px;
border-radius: var(--border-radius);
background-color: var(--torrent-item-bg);
transition: var(--transition);
border: var(--card-border);
}
.torrent-item-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.torrent-item-title {
font-weight: 500;
margin-right: 10px;
word-break: break-word;
}
.torrent-item-progress {
margin: 12px 0;
}
.torrent-item-details {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: space-between;
font-size: 0.9rem;
color: var(--secondary-color);
}
.torrent-item-buttons {
margin-top: 12px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
/* Dashboard panels */
.dashboard-stats {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 15px;
margin-bottom: 20px;
}
.stat-card {
background-color: var(--card-bg);
border-radius: var(--border-radius);
padding: 20px;
border: var(--card-border);
transition: var(--transition);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.stat-card .stat-value {
font-size: 2rem;
font-weight: bold;
margin: 10px 0;
}
.stat-card .stat-label {
font-size: 0.9rem;
color: var(--secondary-color);
}
/* Dark Mode Toggle */
.dark-mode-toggle {
cursor: pointer;
padding: 5px 10px;
border-radius: var(--border-radius);
transition: var(--transition);
color: var(--text-color);
background-color: transparent;
border: 1px solid var(--input-border);
}
.dark-mode-toggle:hover {
background-color: var(--hover-bg);
}
.dark-mode-toggle i {
font-size: 1.2rem;
}
body.dark-mode .dark-mode-toggle {
color: #f5f5f5;
border-color: #444;
}
/* Notifications */
.toast-container {
position: fixed;
top: 20px;
right: 20px;
z-index: 9999;
}
.toast {
background-color: var(--card-bg);
color: var(--text-color);
border: var(--card-border);
margin-bottom: 10px;
max-width: 350px;
}
.toast-header {
background-color: var(--card-header-bg);
color: var(--text-color);
border-bottom: var(--card-border);
}
/* Modals */
.modal-content {
background-color: var(--modal-bg);
color: var(--text-color);
border: var(--card-border);
}
.modal-header {
border-bottom: var(--card-border);
}
.modal-footer {
border-top: var(--card-border);
}
/* Charts and Graphs */
.chart-container {
position: relative;
height: 300px;
margin-bottom: 20px;
}
/* Mobile Responsive Design */
@media (max-width: 768px) {
.container {
padding-left: 15px;
padding-right: 15px;
max-width: 100%;
}
.card-body {
padding: 15px;
}
.torrent-item-header {
flex-direction: column;
align-items: flex-start;
}
.torrent-item-buttons {
width: 100%;
}
.torrent-item-buttons .btn {
flex: 1;
text-align: center;
padding: 8px;
}
.dashboard-stats {
grid-template-columns: 1fr;
}
.stat-card {
margin-bottom: 10px;
}
.feed-item-buttons {
flex-direction: column;
}
.feed-item-buttons .btn {
width: 100%;
margin-bottom: 5px;
}
.table-responsive {
margin-bottom: 15px;
}
}
/* Tablet Responsive Design */
@media (min-width: 769px) and (max-width: 992px) {
.dashboard-stats {
grid-template-columns: repeat(2, 1fr);
}
}
/* Print Styles */
@media print {
.no-print {
display: none !important;
}
body {
background-color: white !important;
color: black !important;
}
.card, .torrent-item, .feed-item {
break-inside: avoid;
border: 1px solid #ddd !important;
}
}
/* Accessibility */
@media (prefers-reduced-motion) {
* {
transition: none !important;
animation: none !important;
}
}
/* Utilities */
.text-truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cursor-pointer {
cursor: pointer;
}
.flex-grow-1 {
flex-grow: 1;
}
.word-break-all {
word-break: break-all;
}

771
wwwroot/index.html Normal file
View File

@@ -0,0 +1,771 @@
<!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" style="color: inherit;">All Items</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#matched-items" style="color: inherit;">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">&laquo;</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">&raquo;</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" style="color: inherit;">
<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" style="color: inherit;">
<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" style="color: inherit;">
<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" style="color: inherit;">
<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" style="color: inherit;">
<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>

1599
wwwroot/js/app.js Normal file
View File

File diff suppressed because it is too large Load Diff