480 lines
24 KiB
HTML
480 lines
24 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>AniWorld Manager</title>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
|
|
|
<!-- UX Enhancement and Mobile & Accessibility CSS -->
|
|
<link rel="stylesheet" href="{{ url_for('static.ux_features_css') }}">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="app-container">
|
|
<!-- Header -->
|
|
<header class="header">
|
|
<div class="header-content">
|
|
<div class="header-title">
|
|
<i class="fas fa-play-circle"></i>
|
|
<h1>AniWorld Manager</h1>
|
|
</div>
|
|
<div class="header-actions">
|
|
<!-- Process Status Indicators -->
|
|
<div class="process-status" id="process-status">
|
|
<div class="status-indicator" id="rescan-status" title="Scan is idle">
|
|
<i class="fas fa-sync-alt"></i>
|
|
<div class="status-dot idle"></div>
|
|
</div>
|
|
<div class="status-indicator" id="download-status" title="Download is idle">
|
|
<i class="fas fa-download"></i>
|
|
<div class="status-dot idle"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<a href="/queue" class="btn btn-secondary" title="Download Queue">
|
|
<i class="fas fa-list-alt"></i>
|
|
<span data-text="queue">Queue</span>
|
|
</a>
|
|
|
|
<button id="logout-btn" class="btn btn-secondary" title="Logout" style="display: none;">
|
|
<i class="fas fa-sign-out-alt"></i>
|
|
<span data-text="logout">Logout</span>
|
|
</button>
|
|
<button id="config-btn" class="btn btn-secondary" title="Show configuration">
|
|
<i class="fas fa-cog"></i>
|
|
<span data-text="config-title">Config</span>
|
|
</button>
|
|
<button id="theme-toggle" class="btn btn-icon" title="Toggle theme" data-title="toggle-theme">
|
|
<i class="fas fa-moon"></i>
|
|
</button>
|
|
<button id="rescan-btn" class="btn btn-primary">
|
|
<i class="fas fa-sync-alt"></i>
|
|
<span data-text="rescan">Rescan</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main content -->
|
|
<main class="main-content">
|
|
<!-- Search section -->
|
|
<section class="search-section">
|
|
<div class="search-container">
|
|
<div class="search-input-group">
|
|
<input type="text" id="search-input" data-text="search-placeholder"
|
|
placeholder="Search for anime..." class="search-input">
|
|
<button id="search-btn" class="btn btn-primary">
|
|
<i class="fas fa-search"></i>
|
|
</button>
|
|
<button id="clear-search" class="btn btn-secondary">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Search results -->
|
|
<div id="search-results" class="search-results hidden">
|
|
<h3>Search Results</h3>
|
|
<div id="search-results-list" class="search-results-list"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Download Queue Section -->
|
|
<section id="download-queue-section" class="download-queue-section hidden">
|
|
<div class="queue-header">
|
|
<h2>
|
|
<i class="fas fa-download"></i>
|
|
<span data-text="download-queue">Download Queue</span>
|
|
</h2>
|
|
<div class="queue-stats">
|
|
<span id="queue-progress" class="queue-progress">0/0 series</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Current Download -->
|
|
<div id="current-download" class="current-download hidden">
|
|
<div class="current-download-header">
|
|
<h3 data-text="currently-downloading">Currently Downloading</h3>
|
|
</div>
|
|
<div class="current-download-item">
|
|
<div class="download-info">
|
|
<div id="current-serie-name" class="serie-name">-</div>
|
|
<div id="current-episode" class="episode-info">-</div>
|
|
</div>
|
|
<div class="download-progress">
|
|
<div class="progress-bar-mini">
|
|
<div id="current-progress-fill" class="progress-fill-mini"></div>
|
|
</div>
|
|
<div id="current-progress-text" class="progress-text-mini">0%</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Queue List -->
|
|
<div id="queue-list-container" class="queue-list-container">
|
|
<h3 data-text="queued-series">Queued Series</h3>
|
|
<div id="queue-list" class="queue-list">
|
|
<!-- Queue items will be populated here -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Series management section -->
|
|
<section class="series-section">
|
|
<div class="series-header">
|
|
<h2 data-text="series-collection">Series Collection</h2>
|
|
<div class="series-filters">
|
|
<button id="show-missing-only" class="btn btn-secondary" data-active="false">
|
|
<i class="fas fa-filter"></i>
|
|
<span data-text="show-missing-only">Missing Episodes Only</span>
|
|
</button>
|
|
<button id="sort-alphabetical" class="btn btn-secondary" data-active="false">
|
|
<i class="fas fa-sort-alpha-down"></i>
|
|
<span data-text="sort-alphabetical">A-Z Sort</span>
|
|
</button>
|
|
</div>
|
|
<div class="series-actions">
|
|
<button id="select-all" class="btn btn-secondary">
|
|
<i class="fas fa-check-double"></i>
|
|
<span data-text="select-all">Select All</span>
|
|
</button>
|
|
<button id="download-selected" class="btn btn-success" disabled>
|
|
<i class="fas fa-download"></i>
|
|
<span data-text="download-selected">Download Selected</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Series grid -->
|
|
<div id="series-grid" class="series-grid">
|
|
<!-- Series cards will be populated here -->
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- Status panel -->
|
|
<div id="status-panel" class="status-panel hidden">
|
|
<div class="status-header">
|
|
<h3 id="status-title">Status</h3>
|
|
<button id="close-status" class="btn btn-icon">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<div class="status-content">
|
|
<div id="status-message" class="status-message"></div>
|
|
<div id="progress-container" class="progress-container hidden">
|
|
<div class="progress-bar">
|
|
<div id="progress-fill" class="progress-fill"></div>
|
|
</div>
|
|
<div id="progress-text" class="progress-text">0%</div>
|
|
</div>
|
|
<div id="download-controls" class="download-controls hidden">
|
|
<button id="pause-download" class="btn btn-secondary btn-small">
|
|
<i class="fas fa-pause"></i>
|
|
<span data-text="pause">Pause</span>
|
|
</button>
|
|
<button id="resume-download" class="btn btn-primary btn-small hidden">
|
|
<i class="fas fa-play"></i>
|
|
<span data-text="resume">Resume</span>
|
|
</button>
|
|
<button id="cancel-download" class="btn btn-small"
|
|
style="background-color: var(--color-error); color: white;">
|
|
<i class="fas fa-stop"></i>
|
|
<span data-text="cancel">Cancel</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Configuration Modal -->
|
|
<div id="config-modal" class="modal hidden">
|
|
<div class="modal-overlay"></div>
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3 data-text="config-title">Configuration</h3>
|
|
<button id="close-config" class="btn btn-icon">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="config-item">
|
|
<label for="anime-directory-input" data-text="anime-directory">Anime Directory:</label>
|
|
<div class="input-group">
|
|
<input type="text" id="anime-directory-input" class="input-field"
|
|
placeholder="Enter anime directory path...">
|
|
<button id="browse-directory" class="btn btn-secondary">
|
|
<i class="fas fa-folder"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="config-item">
|
|
<label for="series-count-input" data-text="series-count">Series Count:</label>
|
|
<input type="number" id="series-count-input" class="input-field" readonly
|
|
title="This value is automatically calculated">
|
|
</div>
|
|
<div class="config-item">
|
|
<label data-text="connection-status">Connection Status:</label>
|
|
<div id="connection-status-display" class="config-value">
|
|
<span class="status-indicator"></span>
|
|
<span class="status-text">Disconnected</span>
|
|
</div>
|
|
<button id="test-connection" class="btn btn-secondary">
|
|
<i class="fas fa-network-wired"></i>
|
|
<span data-text="test-connection">Test Connection</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Main Configuration Actions -->
|
|
<div class="config-actions">
|
|
<button id="save-main-config" class="btn btn-primary">
|
|
<i class="fas fa-save"></i>
|
|
<span data-text="save-main-config">Save Configuration</span>
|
|
</button>
|
|
<button id="reset-main-config" class="btn btn-secondary">
|
|
<i class="fas fa-undo"></i>
|
|
<span data-text="reset-main-config">Reset</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Scheduler Configuration -->
|
|
<div class="config-section">
|
|
<h4 data-text="scheduler-config">Scheduled Operations</h4>
|
|
|
|
<div class="config-item">
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" id="scheduled-rescan-enabled">
|
|
<span class="checkbox-custom"></span>
|
|
<span data-text="enable-scheduled-rescan">Enable Daily Rescan</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="config-item" id="rescan-time-config">
|
|
<label for="scheduled-rescan-time" data-text="rescan-time">Rescan Time (24h format):</label>
|
|
<input type="time" id="scheduled-rescan-time" value="03:00" class="input-field">
|
|
</div>
|
|
|
|
<div class="config-item">
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" id="auto-download-after-rescan">
|
|
<span class="checkbox-custom"></span>
|
|
<span data-text="auto-download-after-rescan">Auto-download missing episodes after
|
|
rescan</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="config-item scheduler-status" id="scheduler-status">
|
|
<div class="scheduler-info">
|
|
<div class="info-row">
|
|
<span data-text="next-rescan">Next Scheduled Rescan:</span>
|
|
<span id="next-rescan-time" class="info-value">-</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span data-text="last-rescan">Last Scheduled Rescan:</span>
|
|
<span id="last-rescan-time" class="info-value">-</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span data-text="scheduler-running">Scheduler Status:</span>
|
|
<span id="scheduler-running-status" class="info-value status-badge">Stopped</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="config-actions">
|
|
<button id="save-scheduler-config" class="btn btn-primary">
|
|
<i class="fas fa-save"></i>
|
|
<span data-text="save-config">Save Configuration</span>
|
|
</button>
|
|
<button id="test-scheduled-rescan" class="btn btn-secondary">
|
|
<i class="fas fa-play"></i>
|
|
<span data-text="test-rescan">Test Rescan Now</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Logging Configuration -->
|
|
<div class="config-section">
|
|
<h4 data-text="logging-config">Logging Configuration</h4>
|
|
|
|
<div class="config-item">
|
|
<label for="log-level" data-text="log-level">Log Level:</label>
|
|
<select id="log-level" class="input-field">
|
|
<option value="DEBUG">DEBUG</option>
|
|
<option value="INFO">INFO</option>
|
|
<option value="WARNING">WARNING</option>
|
|
<option value="ERROR">ERROR</option>
|
|
<option value="CRITICAL">CRITICAL</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="config-item">
|
|
<div class="checkbox-container">
|
|
<input type="checkbox" id="enable-console-logging">
|
|
<label for="enable-console-logging">
|
|
<span data-text="enable-console-logging">Enable Console Logging</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="config-item">
|
|
<div class="checkbox-container">
|
|
<input type="checkbox" id="enable-console-progress">
|
|
<label for="enable-console-progress">
|
|
<span data-text="enable-console-progress">Show Progress Bars in Console</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="config-item">
|
|
<div class="checkbox-container">
|
|
<input type="checkbox" id="enable-fail2ban-logging">
|
|
<label for="enable-fail2ban-logging">
|
|
<span data-text="enable-fail2ban-logging">Enable Fail2Ban Logging</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="config-item">
|
|
<h5 data-text="log-files">Log Files</h5>
|
|
<div id="log-files-list" class="log-files-container">
|
|
<!-- Log files will be populated here -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="config-actions">
|
|
<button id="save-logging-config" class="btn btn-primary">
|
|
<i class="fas fa-save"></i>
|
|
<span data-text="save-logging-config">Save Logging Config</span>
|
|
</button>
|
|
<button id="test-logging" class="btn btn-secondary">
|
|
<i class="fas fa-bug"></i>
|
|
<span data-text="test-logging">Test Logging</span>
|
|
</button>
|
|
<button id="refresh-log-files" class="btn btn-secondary">
|
|
<i class="fas fa-refresh"></i>
|
|
<span data-text="refresh-logs">Refresh Log Files</span>
|
|
</button>
|
|
<button id="cleanup-logs" class="btn btn-warning">
|
|
<i class="fas fa-trash"></i>
|
|
<span data-text="cleanup-logs">Cleanup Old Logs</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Configuration Management -->
|
|
<div class="config-section">
|
|
<h4 data-text="config-management">Configuration Management</h4>
|
|
|
|
<div class="config-item">
|
|
<h5 data-text="config-backup-restore">Backup & Restore</h5>
|
|
<p class="config-description" data-text="backup-description">
|
|
Create backups of your configuration or restore from previous backups.
|
|
</p>
|
|
|
|
<div class="config-actions">
|
|
<button id="create-config-backup" class="btn btn-secondary">
|
|
<i class="fas fa-save"></i>
|
|
<span data-text="create-backup">Create Backup</span>
|
|
</button>
|
|
<button id="view-config-backups" class="btn btn-secondary">
|
|
<i class="fas fa-history"></i>
|
|
<span data-text="view-backups">View Backups</span>
|
|
</button>
|
|
<button id="export-config" class="btn btn-secondary">
|
|
<i class="fas fa-download"></i>
|
|
<span data-text="export-config">Export Config</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="config-item">
|
|
<h5 data-text="config-validation">Configuration Validation</h5>
|
|
<p class="config-description" data-text="validation-description">
|
|
Validate your current configuration for errors and warnings.
|
|
</p>
|
|
|
|
<div id="validation-results" class="validation-results hidden">
|
|
<!-- Validation results will be displayed here -->
|
|
</div>
|
|
|
|
<div class="config-actions">
|
|
<button id="validate-config" class="btn btn-primary">
|
|
<i class="fas fa-check"></i>
|
|
<span data-text="validate-config">Validate Configuration</span>
|
|
</button>
|
|
<button id="reset-config" class="btn btn-warning">
|
|
<i class="fas fa-undo"></i>
|
|
<span data-text="reset-config">Reset to Defaults</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="config-item">
|
|
<h5 data-text="advanced-config">Advanced Settings</h5>
|
|
|
|
<label for="max-concurrent-downloads" data-text="max-downloads">Max Concurrent
|
|
Downloads:</label>
|
|
<input type="number" id="max-concurrent-downloads" min="1" max="20" value="3"
|
|
class="input-field">
|
|
|
|
<label for="provider-timeout" data-text="provider-timeout">Provider Timeout
|
|
(seconds):</label>
|
|
<input type="number" id="provider-timeout" min="5" max="300" value="30" class="input-field">
|
|
|
|
<div class="checkbox-container">
|
|
<input type="checkbox" id="enable-debug-mode">
|
|
<label for="enable-debug-mode">
|
|
<span data-text="enable-debug">Enable Debug Mode</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="config-actions">
|
|
<button id="save-advanced-config" class="btn btn-primary">
|
|
<i class="fas fa-save"></i>
|
|
<span data-text="save-advanced">Save Advanced Settings</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Toast notifications -->
|
|
<div id="toast-container" class="toast-container"></div>
|
|
</div>
|
|
|
|
<!-- Loading overlay -->
|
|
<div id="loading-overlay" class="loading-overlay hidden">
|
|
<div class="loading-spinner">
|
|
<i class="fas fa-spinner fa-spin"></i>
|
|
<p>Loading...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scripts -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
|
|
<script src="{{ url_for('static', filename='js/localization.js') }}"></script>
|
|
|
|
<!-- UX Enhancement Scripts -->
|
|
<script src="{{ url_for('static.keyboard_shortcuts_js') }}"></script>
|
|
<script src="{{ url_for('static.drag_drop_js') }}"></script>
|
|
<script src="{{ url_for('static.bulk_operations_js') }}"></script>
|
|
<script src="{{ url_for('static.user_preferences_js') }}"></script>
|
|
<script src="{{ url_for('static.advanced_search_js') }}"></script>
|
|
<script src="{{ url_for('static.undo_redo_js') }}"></script>
|
|
|
|
<!-- Mobile & Accessibility Scripts -->
|
|
<script src="{{ url_for('static.mobile_responsive_js') }}"></script>
|
|
<script src="{{ url_for('static.touch_gestures_js') }}"></script>
|
|
<script src="{{ url_for('static.accessibility_features_js') }}"></script>
|
|
<script src="{{ url_for('static.screen_reader_support_js') }}"></script>
|
|
<script src="{{ url_for('static.color_contrast_compliance_js') }}"></script>
|
|
<script src="{{ url_for('static.multi_screen_support_js') }}"></script>
|
|
|
|
<script src="{{ url_for('static', filename='js/app.js') }}"></script>
|
|
</body>
|
|
|
|
</html> |