515 lines
29 KiB
HTML
515 lines
29 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-theme="light">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Transmission RSS Manager</title>
|
|
<meta name="description" content="Web interface for the Transmission RSS Manager, automating torrent downloads from RSS feeds">
|
|
<link rel="stylesheet" href="/css/styles.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
|
|
<!-- Favicon -->
|
|
<link rel="icon" href="/favicon.ico" type="image/x-icon">
|
|
<!-- Add Apple touch icon for iOS devices -->
|
|
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
|
|
<!-- Theme color for browser UI -->
|
|
<meta name="theme-color" content="#3498db">
|
|
</head>
|
|
<body>
|
|
<!-- Loading Spinner -->
|
|
<div id="loading-spinner" class="loader-overlay">
|
|
<div class="loader"></div>
|
|
</div>
|
|
|
|
<!-- Authentication Form (Hidden by default) -->
|
|
<div id="login-container" class="d-none">
|
|
<div class="auth-container">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2><i class="fas fa-sign-in-alt"></i> Login</h2>
|
|
</div>
|
|
<div class="card-body">
|
|
<form id="login-form">
|
|
<div class="form-group">
|
|
<label class="form-label" for="username">Username</label>
|
|
<input type="text" id="username" class="form-control" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label" for="password">Password</label>
|
|
<input type="password" id="password" class="form-control" required>
|
|
</div>
|
|
<div class="mt-3 text-center">
|
|
<button type="submit" class="btn btn-primary btn-lg">
|
|
<i class="fas fa-unlock-alt"></i> Login
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main App Content -->
|
|
<div id="app-container">
|
|
<header>
|
|
<div class="navbar">
|
|
<a href="#" class="navbar-brand">
|
|
<i class="fas fa-rss"></i> Transmission RSS Manager
|
|
</a>
|
|
|
|
<ul class="navbar-menu">
|
|
<li class="navbar-item">
|
|
<a href="#" class="navbar-link nav-link active" data-tab="home-tab">
|
|
<i class="fas fa-home"></i> Dashboard
|
|
</a>
|
|
</li>
|
|
<li class="navbar-item">
|
|
<a href="#" class="navbar-link nav-link" data-tab="rss-tab">
|
|
<i class="fas fa-rss"></i> RSS Feeds
|
|
</a>
|
|
</li>
|
|
<li class="navbar-item">
|
|
<a href="#" class="navbar-link nav-link" data-tab="torrents-tab">
|
|
<i class="fas fa-download"></i> Torrents
|
|
</a>
|
|
</li>
|
|
<li class="navbar-item">
|
|
<a href="#" class="navbar-link nav-link" data-tab="media-tab">
|
|
<i class="fas fa-photo-video"></i> Media Library
|
|
</a>
|
|
</li>
|
|
<li class="navbar-item">
|
|
<a href="#" class="navbar-link nav-link" data-tab="settings-tab">
|
|
<i class="fas fa-cog"></i> Settings
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="navbar-right">
|
|
<span id="user-info"></span>
|
|
<button id="theme-toggle" class="theme-toggle" aria-label="Toggle Theme">
|
|
<i id="theme-toggle-icon" class="fas fa-moon"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="container">
|
|
<!-- Tab Content -->
|
|
<div id="home-tab" class="tab-content active">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2><i class="fas fa-tachometer-alt"></i> Dashboard</h2>
|
|
<button id="btn-refresh-status" class="btn btn-outline">
|
|
<i class="fas fa-sync-alt"></i> Refresh
|
|
</button>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="status-container">
|
|
<p>Loading system status...</p>
|
|
</div>
|
|
|
|
<h3 class="mt-3">Quick Actions</h3>
|
|
<div class="row">
|
|
<div class="col-md-4 mb-3">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4><i class="fas fa-rss"></i> RSS Manager</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<p>Manage your RSS feeds and automatic downloads</p>
|
|
</div>
|
|
<div class="card-footer">
|
|
<button id="btn-update-feeds" class="btn btn-success">
|
|
<i class="fas fa-sync"></i> Update Feeds Now
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4 mb-3">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4><i class="fas fa-cogs"></i> Post-Processing</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<p>Process completed downloads to your media library</p>
|
|
</div>
|
|
<div class="card-footer">
|
|
<button id="btn-start-processor" class="btn btn-success">
|
|
<i class="fas fa-play"></i> Start
|
|
</button>
|
|
<button id="btn-stop-processor" class="btn btn-warning">
|
|
<i class="fas fa-stop"></i> Stop
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4 mb-3">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4><i class="fas fa-magnet"></i> Add New Torrent</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<form id="add-torrent-form">
|
|
<div class="form-group">
|
|
<label class="form-label" for="torrent-url">Torrent URL or Magnet Link</label>
|
|
<input type="text" id="torrent-url" class="form-control" placeholder="Enter torrent URL or magnet link">
|
|
</div>
|
|
<div class="form-group">
|
|
<button type="submit" class="btn btn-success">
|
|
<i class="fas fa-plus"></i> Add Torrent
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- RSS Tab -->
|
|
<div id="rss-tab" class="tab-content">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2><i class="fas fa-rss"></i> RSS Feeds</h2>
|
|
<button id="btn-add-feed" class="btn btn-success">
|
|
<i class="fas fa-plus"></i> Add New Feed
|
|
</button>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="feeds-container">
|
|
<p>Loading feeds...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card mt-3">
|
|
<div class="card-header">
|
|
<h2><i class="fas fa-list"></i> Available Items</h2>
|
|
<div>
|
|
<label class="form-check form-check-inline">
|
|
<input type="radio" name="item-filter" value="all" checked class="form-check-input">
|
|
<span class="form-check-label">All Items</span>
|
|
</label>
|
|
<label class="form-check form-check-inline">
|
|
<input type="radio" name="item-filter" value="undownloaded" class="form-check-input">
|
|
<span class="form-check-label">Undownloaded Only</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="items-container">
|
|
<p>Loading items...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Torrents Tab -->
|
|
<div id="torrents-tab" class="tab-content">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2><i class="fas fa-download"></i> Active Torrents</h2>
|
|
<button id="refresh-torrents" class="btn btn-primary">
|
|
<i class="fas fa-sync"></i> Refresh
|
|
</button>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="torrents-container">
|
|
<p>Loading torrents...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Media Library Tab -->
|
|
<div id="media-tab" class="tab-content">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2><i class="fas fa-photo-video"></i> Media Library</h2>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row mb-3">
|
|
<div class="col-md-8">
|
|
<div class="form-group">
|
|
<label for="library-search" class="form-label">Search Library</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="fas fa-search"></i></span>
|
|
<input type="text" id="library-search" class="form-control" placeholder="Search your library...">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label class="form-label">Filter by Category</label>
|
|
<div class="form-group">
|
|
<label class="form-check">
|
|
<input type="radio" name="library-filter" value="all" checked class="form-check-input">
|
|
<span class="form-check-label">All</span>
|
|
</label>
|
|
<label class="form-check">
|
|
<input type="radio" name="library-filter" value="movies" class="form-check-input">
|
|
<span class="form-check-label">Movies</span>
|
|
</label>
|
|
<label class="form-check">
|
|
<input type="radio" name="library-filter" value="tvShows" class="form-check-input">
|
|
<span class="form-check-label">TV Shows</span>
|
|
</label>
|
|
<label class="form-check">
|
|
<input type="radio" name="library-filter" value="music" class="form-check-input">
|
|
<span class="form-check-label">Music</span>
|
|
</label>
|
|
<label class="form-check">
|
|
<input type="radio" name="library-filter" value="books" class="form-check-input">
|
|
<span class="form-check-label">Books</span>
|
|
</label>
|
|
<label class="form-check">
|
|
<input type="radio" name="library-filter" value="magazines" class="form-check-input">
|
|
<span class="form-check-label">Magazines</span>
|
|
</label>
|
|
<label class="form-check">
|
|
<input type="radio" name="library-filter" value="software" class="form-check-input">
|
|
<span class="form-check-label">Software</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="library-container">
|
|
<p>Loading media library...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Settings Tab -->
|
|
<div id="settings-tab" class="tab-content">
|
|
<form id="settings-form">
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2><i class="fas fa-exchange-alt"></i> Transmission Settings</h2>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="form-group">
|
|
<label class="form-label" for="transmission-host">Host:</label>
|
|
<input type="text" id="transmission-host" class="form-control" placeholder="localhost">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label" for="transmission-port">Port:</label>
|
|
<input type="number" id="transmission-port" class="form-control" placeholder="9091">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label" for="transmission-user">Username:</label>
|
|
<input type="text" id="transmission-user" class="form-control">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label" for="transmission-pass">Password:</label>
|
|
<input type="password" id="transmission-pass" class="form-control">
|
|
</div>
|
|
</div>
|
|
<div class="card-footer">
|
|
<button type="button" id="test-connection" class="btn btn-outline" onclick="testTransmissionConnection()">
|
|
<i class="fas fa-plug"></i> Test Connection
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2><i class="fas fa-shield-alt"></i> Security Settings</h2>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="form-check mb-3">
|
|
<input type="checkbox" id="https-enabled" class="form-check-input">
|
|
<label class="form-check-label" for="https-enabled">
|
|
Enable HTTPS
|
|
</label>
|
|
<small class="text-muted d-block mt-1">
|
|
Requires valid SSL certificate (not self-signed)
|
|
</small>
|
|
</div>
|
|
|
|
<div class="form-check mb-3">
|
|
<input type="checkbox" id="auth-enabled" class="form-check-input">
|
|
<label class="form-check-label" for="auth-enabled">
|
|
Enable Authentication
|
|
</label>
|
|
<small class="text-muted d-block mt-1">
|
|
Requires login to access the application
|
|
</small>
|
|
</div>
|
|
|
|
<div id="auth-settings" class="mt-3 d-none">
|
|
<div class="form-group">
|
|
<label class="form-label" for="admin-username">Admin Username:</label>
|
|
<input type="text" id="admin-username" class="form-control" placeholder="admin">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label" for="admin-password">Admin Password:</label>
|
|
<input type="password" id="admin-password" class="form-control">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card mb-3">
|
|
<div class="card-header">
|
|
<h2><i class="fas fa-cogs"></i> Post-Processing Settings</h2>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<h3>Seeding Requirements</h3>
|
|
<div class="form-group">
|
|
<label class="form-label" for="seeding-ratio">Minimum Seeding Ratio:</label>
|
|
<input type="number" id="seeding-ratio" class="form-control" min="0" step="0.1" placeholder="1.0">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label" for="seeding-time">Minimum Seeding Time (minutes):</label>
|
|
<input type="number" id="seeding-time" class="form-control" min="0" placeholder="60">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label" for="check-interval">Check Interval (seconds):</label>
|
|
<input type="number" id="check-interval" class="form-control" min="30" placeholder="300">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<h3>Media Paths</h3>
|
|
<div class="form-group">
|
|
<label class="form-label" for="movies-path">Movies Path:</label>
|
|
<input type="text" id="movies-path" class="form-control" placeholder="/mnt/media/movies">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label" for="tvshows-path">TV Shows Path:</label>
|
|
<input type="text" id="tvshows-path" class="form-control" placeholder="/mnt/media/tvshows">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label" for="music-path">Music Path:</label>
|
|
<input type="text" id="music-path" class="form-control" placeholder="/mnt/media/music">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label" for="books-path">Books Path:</label>
|
|
<input type="text" id="books-path" class="form-control" placeholder="/mnt/media/books">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label" for="magazines-path">Magazines Path:</label>
|
|
<input type="text" id="magazines-path" class="form-control" placeholder="/mnt/media/magazines">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label" for="software-path">Software Path:</label>
|
|
<input type="text" id="software-path" class="form-control" placeholder="/mnt/media/software">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<h3>Processing Options</h3>
|
|
<div class="form-check mb-2">
|
|
<input type="checkbox" id="extract-archives" class="form-check-input">
|
|
<label class="form-check-label" for="extract-archives">
|
|
Extract Archives
|
|
</label>
|
|
</div>
|
|
<div class="form-check mb-2">
|
|
<input type="checkbox" id="delete-archives" class="form-check-input">
|
|
<label class="form-check-label" for="delete-archives">
|
|
Delete Archives After Extraction
|
|
</label>
|
|
</div>
|
|
<div class="form-check mb-2">
|
|
<input type="checkbox" id="create-category-folders" class="form-check-input">
|
|
<label class="form-check-label" for="create-category-folders">
|
|
Create Category Folders
|
|
</label>
|
|
</div>
|
|
<div class="form-check mb-2">
|
|
<input type="checkbox" id="rename-files" class="form-check-input">
|
|
<label class="form-check-label" for="rename-files">
|
|
Rename Files
|
|
</label>
|
|
</div>
|
|
<div class="form-check mb-2">
|
|
<input type="checkbox" id="ignore-sample" class="form-check-input">
|
|
<label class="form-check-label" for="ignore-sample">
|
|
Ignore Sample Files
|
|
</label>
|
|
</div>
|
|
<div class="form-check mb-2">
|
|
<input type="checkbox" id="ignore-extras" class="form-check-input">
|
|
<label class="form-check-label" for="ignore-extras">
|
|
Ignore Extras Files
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card mb-3">
|
|
<div class="card-header">
|
|
<h2><i class="fas fa-rss"></i> RSS Settings</h2>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="form-group">
|
|
<label class="form-label" for="rss-interval">Update Interval (minutes):</label>
|
|
<input type="number" id="rss-interval" class="form-control" min="5" placeholder="60">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label" for="notification-type">Notifications:</label>
|
|
<select id="notification-type" class="form-control">
|
|
<option value="none">None</option>
|
|
<option value="email">Email</option>
|
|
<option value="telegram">Telegram</option>
|
|
<option value="discord">Discord</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div id="notification-settings" class="d-none mt-3">
|
|
<!-- This will be populated dynamically based on notification type -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card mb-3">
|
|
<div class="card-footer text-right">
|
|
<button type="submit" class="btn btn-success btn-lg">
|
|
<i class="fas fa-save"></i> Save All Settings
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer mt-3">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<p>Transmission RSS Manager v1.2.0</p>
|
|
</div>
|
|
<div class="col-md-6 text-right">
|
|
<p><a href="https://github.com/your-repo/transmission-rss-manager" target="_blank" rel="noopener noreferrer">GitHub</a> | <a href="#" id="show-about-modal">About</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<!-- JavaScript Files -->
|
|
<script src="/js/app.js"></script>
|
|
</body>
|
|
</html> |