new folder structure
This commit is contained in:
0
src/server/web/templates/__init__.py
Normal file
0
src/server/web/templates/__init__.py
Normal file
0
src/server/web/templates/admin/__init__.py
Normal file
0
src/server/web/templates/admin/__init__.py
Normal file
0
src/server/web/templates/anime/__init__.py
Normal file
0
src/server/web/templates/anime/__init__.py
Normal file
0
src/server/web/templates/auth/__init__.py
Normal file
0
src/server/web/templates/auth/__init__.py
Normal file
0
src/server/web/templates/base/__init__.py
Normal file
0
src/server/web/templates/base/__init__.py
Normal file
491
src/server/web/templates/base/index.html
Normal file
491
src/server/web/templates/base/index.html
Normal file
@@ -0,0 +1,491 @@
|
||||
<!DOCTYPE html>
|
||||
<html <div class="header-actions">
|
||||
<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="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="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="rescan-btn" class="btn btn-primary">
|
||||
<i class="fas fa-sync-alt"></i>
|
||||
<span data-text="rescan">Rescan</span>
|
||||
</button>
|
||||
</div>ta-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('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">
|
||||
<i class="fas fa-sync-alt"></i>
|
||||
<span class="status-text">Scan</span>
|
||||
<div class="status-dot idle"></div>
|
||||
</div>
|
||||
<div class="status-indicator" id="download-status">
|
||||
<i class="fas fa-download"></i>
|
||||
<span class="status-text">Download</span>
|
||||
<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('keyboard_shortcuts_js') }}"></script>
|
||||
<script src="{{ url_for('drag_drop_js') }}"></script>
|
||||
<script src="{{ url_for('bulk_operations_js') }}"></script>
|
||||
<script src="{{ url_for('user_preferences_js') }}"></script>
|
||||
<script src="{{ url_for('advanced_search_js') }}"></script>
|
||||
<script src="{{ url_for('undo_redo_js') }}"></script>
|
||||
|
||||
<!-- Mobile & Accessibility Scripts -->
|
||||
<script src="{{ url_for('mobile_responsive_js') }}"></script>
|
||||
<script src="{{ url_for('touch_gestures_js') }}"></script>
|
||||
<script src="{{ url_for('accessibility_features_js') }}"></script>
|
||||
<script src="{{ url_for('screen_reader_support_js') }}"></script>
|
||||
<script src="{{ url_for('color_contrast_compliance_js') }}"></script>
|
||||
<script src="{{ url_for('multi_screen_support_js') }}"></script>
|
||||
|
||||
<script src="{{ url_for('static', filename='js/app.js') }}"></script>
|
||||
</body>
|
||||
</html>
|
||||
380
src/server/web/templates/base/login.html
Normal file
380
src/server/web/templates/base/login.html
Normal file
@@ -0,0 +1,380 @@
|
||||
<!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 - Login</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">
|
||||
<style>
|
||||
.login-container {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
background: var(--color-surface);
|
||||
border-radius: 16px;
|
||||
padding: 2rem;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.login-header {
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.login-header .logo {
|
||||
font-size: 3rem;
|
||||
color: var(--color-primary);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.login-header h1 {
|
||||
margin: 0;
|
||||
color: var(--color-text);
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.login-header p {
|
||||
margin: 0.5rem 0 0 0;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-weight: 500;
|
||||
color: var(--color-text);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.password-input-group {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.password-input {
|
||||
width: 100%;
|
||||
padding: 0.75rem 3rem 0.75rem 1rem;
|
||||
border: 2px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
transition: all 0.2s ease;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.password-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
|
||||
}
|
||||
|
||||
.password-toggle {
|
||||
position: absolute;
|
||||
right: 0.75rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
padding: 0.25rem;
|
||||
border-radius: 4px;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.password-toggle:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.login-button {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
background: var(--color-primary);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.login-button:hover:not(:disabled) {
|
||||
background: var(--color-primary-dark);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.3);
|
||||
}
|
||||
|
||||
.login-button:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background: var(--color-error-light);
|
||||
color: var(--color-error);
|
||||
padding: 0.75rem;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--color-error);
|
||||
font-size: 0.9rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.success-message {
|
||||
background: var(--color-success-light);
|
||||
color: var(--color-success);
|
||||
padding: 0.75rem;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--color-success);
|
||||
font-size: 0.9rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
color: white;
|
||||
padding: 0.5rem;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.theme-toggle:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.security-info {
|
||||
margin-top: 1.5rem;
|
||||
padding: 1rem;
|
||||
background: var(--color-info-light);
|
||||
border: 1px solid var(--color-info);
|
||||
border-radius: 8px;
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-text-secondary);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border: 2px solid transparent;
|
||||
border-top: 2px solid currentColor;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="login-container">
|
||||
<button class="theme-toggle" id="theme-toggle" title="Toggle theme">
|
||||
<i class="fas fa-moon"></i>
|
||||
</button>
|
||||
|
||||
<div class="login-card">
|
||||
<div class="login-header">
|
||||
<div class="logo">
|
||||
<i class="fas fa-play-circle"></i>
|
||||
</div>
|
||||
<h1>AniWorld Manager</h1>
|
||||
<p>Please enter your master password to continue</p>
|
||||
</div>
|
||||
|
||||
<form class="login-form" id="login-form">
|
||||
<div class="form-group">
|
||||
<label for="password" class="form-label">Master Password</label>
|
||||
<div class="password-input-group">
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
name="password"
|
||||
class="password-input"
|
||||
placeholder="Enter your password"
|
||||
required
|
||||
autocomplete="current-password"
|
||||
autofocus>
|
||||
<button type="button" class="password-toggle" id="password-toggle" tabindex="-1">
|
||||
<i class="fas fa-eye"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="message-container"></div>
|
||||
|
||||
<button type="submit" class="login-button" id="login-button">
|
||||
<i class="fas fa-sign-in-alt"></i>
|
||||
<span>Login</span>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="security-info">
|
||||
<i class="fas fa-shield-alt"></i>
|
||||
Your session will expire after {{ session_timeout }} hours of inactivity.
|
||||
<br>
|
||||
After {{ max_attempts }} failed attempts, this IP will be locked for {{ lockout_duration }} minutes.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Theme toggle functionality
|
||||
const themeToggle = document.getElementById('theme-toggle');
|
||||
const htmlElement = document.documentElement;
|
||||
|
||||
// Load saved theme
|
||||
const savedTheme = localStorage.getItem('theme') || 'light';
|
||||
htmlElement.setAttribute('data-theme', savedTheme);
|
||||
updateThemeIcon(savedTheme);
|
||||
|
||||
themeToggle.addEventListener('click', () => {
|
||||
const currentTheme = htmlElement.getAttribute('data-theme');
|
||||
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
||||
|
||||
htmlElement.setAttribute('data-theme', newTheme);
|
||||
localStorage.setItem('theme', newTheme);
|
||||
updateThemeIcon(newTheme);
|
||||
});
|
||||
|
||||
function updateThemeIcon(theme) {
|
||||
const icon = themeToggle.querySelector('i');
|
||||
icon.className = theme === 'dark' ? 'fas fa-sun' : 'fas fa-moon';
|
||||
}
|
||||
|
||||
// Password visibility toggle
|
||||
const passwordToggle = document.getElementById('password-toggle');
|
||||
const passwordInput = document.getElementById('password');
|
||||
|
||||
passwordToggle.addEventListener('click', () => {
|
||||
const type = passwordInput.getAttribute('type');
|
||||
const newType = type === 'password' ? 'text' : 'password';
|
||||
const icon = passwordToggle.querySelector('i');
|
||||
|
||||
passwordInput.setAttribute('type', newType);
|
||||
icon.className = newType === 'password' ? 'fas fa-eye' : 'fas fa-eye-slash';
|
||||
});
|
||||
|
||||
// Form submission
|
||||
const loginForm = document.getElementById('login-form');
|
||||
const loginButton = document.getElementById('login-button');
|
||||
const messageContainer = document.getElementById('message-container');
|
||||
|
||||
loginForm.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const password = passwordInput.value.trim();
|
||||
if (!password) {
|
||||
showMessage('Please enter your password', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/auth/login', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ password })
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.status === 'success') {
|
||||
showMessage(data.message, 'success');
|
||||
setTimeout(() => {
|
||||
window.location.href = '/';
|
||||
}, 1000);
|
||||
} else {
|
||||
showMessage(data.message, 'error');
|
||||
passwordInput.value = '';
|
||||
passwordInput.focus();
|
||||
}
|
||||
} catch (error) {
|
||||
showMessage('Connection error. Please try again.', 'error');
|
||||
console.error('Login error:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
});
|
||||
|
||||
function showMessage(message, type) {
|
||||
messageContainer.innerHTML = `
|
||||
<div class="${type}-message">
|
||||
${message}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function setLoading(loading) {
|
||||
loginButton.disabled = loading;
|
||||
const buttonText = loginButton.querySelector('span');
|
||||
const buttonIcon = loginButton.querySelector('i');
|
||||
|
||||
if (loading) {
|
||||
buttonIcon.className = 'loading-spinner';
|
||||
buttonText.textContent = 'Logging in...';
|
||||
} else {
|
||||
buttonIcon.className = 'fas fa-sign-in-alt';
|
||||
buttonText.textContent = 'Login';
|
||||
}
|
||||
}
|
||||
|
||||
// Clear message on input
|
||||
passwordInput.addEventListener('input', () => {
|
||||
messageContainer.innerHTML = '';
|
||||
});
|
||||
|
||||
// Enter key on password toggle
|
||||
passwordToggle.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
passwordToggle.click();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
241
src/server/web/templates/base/queue.html
Normal file
241
src/server/web/templates/base/queue.html
Normal file
@@ -0,0 +1,241 @@
|
||||
<!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>Download Queue - 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">
|
||||
</head>
|
||||
<body>
|
||||
<div class="app-container">
|
||||
<!-- Header -->
|
||||
<header class="header">
|
||||
<div class="header-content">
|
||||
<div class="header-title">
|
||||
<i class="fas fa-download"></i>
|
||||
<h1>Download Queue</h1>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<a href="/" class="btn btn-secondary">
|
||||
<i class="fas fa-arrow-left"></i>
|
||||
<span>Back to Main</span>
|
||||
</a>
|
||||
<button id="theme-toggle" class="btn btn-icon" title="Toggle theme">
|
||||
<i class="fas fa-moon"></i>
|
||||
</button>
|
||||
<button id="logout-btn" class="btn btn-secondary" title="Logout" style="display: none;">
|
||||
<i class="fas fa-sign-out-alt"></i>
|
||||
<span>Logout</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main content -->
|
||||
<main class="main-content">
|
||||
<!-- Queue Statistics -->
|
||||
<section class="queue-stats-section">
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">
|
||||
<i class="fas fa-download text-primary"></i>
|
||||
</div>
|
||||
<div class="stat-info">
|
||||
<div class="stat-value" id="total-items">0</div>
|
||||
<div class="stat-label">Total Items</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">
|
||||
<i class="fas fa-clock text-warning"></i>
|
||||
</div>
|
||||
<div class="stat-info">
|
||||
<div class="stat-value" id="pending-items">0</div>
|
||||
<div class="stat-label">In Queue</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">
|
||||
<i class="fas fa-check-circle text-success"></i>
|
||||
</div>
|
||||
<div class="stat-info">
|
||||
<div class="stat-value" id="completed-items">0</div>
|
||||
<div class="stat-label">Completed</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">
|
||||
<i class="fas fa-exclamation-triangle text-error"></i>
|
||||
</div>
|
||||
<div class="stat-info">
|
||||
<div class="stat-value" id="failed-items">0</div>
|
||||
<div class="stat-label">Failed</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Speed and ETA -->
|
||||
<div class="speed-eta-section">
|
||||
<div class="speed-info">
|
||||
<div class="speed-current">
|
||||
<span class="label">Current Speed:</span>
|
||||
<span class="value" id="current-speed">0 MB/s</span>
|
||||
</div>
|
||||
<div class="speed-average">
|
||||
<span class="label">Average Speed:</span>
|
||||
<span class="value" id="average-speed">0 MB/s</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="eta-info">
|
||||
<span class="label">Estimated Time Remaining:</span>
|
||||
<span class="value" id="eta-time">--:--</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Active Downloads -->
|
||||
<section class="active-downloads-section">
|
||||
<div class="section-header">
|
||||
<h2>
|
||||
<i class="fas fa-play-circle"></i>
|
||||
Active Downloads
|
||||
</h2>
|
||||
<div class="section-actions">
|
||||
<button id="pause-all-btn" class="btn btn-secondary" disabled>
|
||||
<i class="fas fa-pause"></i>
|
||||
Pause All
|
||||
</button>
|
||||
<button id="resume-all-btn" class="btn btn-primary" disabled style="display: none;">
|
||||
<i class="fas fa-play"></i>
|
||||
Resume All
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="active-downloads-list" id="active-downloads">
|
||||
<div class="empty-state">
|
||||
<i class="fas fa-pause-circle"></i>
|
||||
<p>No active downloads</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Pending Queue -->
|
||||
<section class="pending-queue-section">
|
||||
<div class="section-header">
|
||||
<h2>
|
||||
<i class="fas fa-clock"></i>
|
||||
Download Queue
|
||||
</h2>
|
||||
<div class="section-actions">
|
||||
<button id="clear-queue-btn" class="btn btn-secondary" disabled>
|
||||
<i class="fas fa-trash"></i>
|
||||
Clear Queue
|
||||
</button>
|
||||
<button id="reorder-queue-btn" class="btn btn-secondary" disabled>
|
||||
<i class="fas fa-sort"></i>
|
||||
Reorder
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pending-queue-list" id="pending-queue">
|
||||
<div class="empty-state">
|
||||
<i class="fas fa-list"></i>
|
||||
<p>No items in queue</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Completed Downloads -->
|
||||
<section class="completed-downloads-section">
|
||||
<div class="section-header">
|
||||
<h2>
|
||||
<i class="fas fa-check-circle"></i>
|
||||
Recent Completed
|
||||
</h2>
|
||||
<div class="section-actions">
|
||||
<button id="clear-completed-btn" class="btn btn-secondary">
|
||||
<i class="fas fa-broom"></i>
|
||||
Clear Completed
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="completed-downloads-list" id="completed-downloads">
|
||||
<div class="empty-state">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<p>No completed downloads</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Failed Downloads -->
|
||||
<section class="failed-downloads-section">
|
||||
<div class="section-header">
|
||||
<h2>
|
||||
<i class="fas fa-exclamation-triangle"></i>
|
||||
Failed Downloads
|
||||
</h2>
|
||||
<div class="section-actions">
|
||||
<button id="retry-all-btn" class="btn btn-warning" disabled>
|
||||
<i class="fas fa-redo"></i>
|
||||
Retry All
|
||||
</button>
|
||||
<button id="clear-failed-btn" class="btn btn-secondary">
|
||||
<i class="fas fa-trash"></i>
|
||||
Clear Failed
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="failed-downloads-list" id="failed-downloads">
|
||||
<div class="empty-state">
|
||||
<i class="fas fa-check-circle text-success"></i>
|
||||
<p>No failed downloads</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- Confirmation Modal -->
|
||||
<div id="confirm-modal" class="modal hidden">
|
||||
<div class="modal-overlay"></div>
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3 id="confirm-title">Confirm Action</h3>
|
||||
<button id="close-confirm" class="btn btn-icon">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p id="confirm-message">Are you sure you want to perform this action?</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button id="confirm-cancel" class="btn btn-secondary">Cancel</button>
|
||||
<button id="confirm-ok" class="btn btn-primary">Confirm</button>
|
||||
</div>
|
||||
</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/queue.js') }}"></script>
|
||||
</body>
|
||||
</html>
|
||||
563
src/server/web/templates/base/setup.html
Normal file
563
src/server/web/templates/base/setup.html
Normal file
@@ -0,0 +1,563 @@
|
||||
<!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 - Setup</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">
|
||||
<style>
|
||||
.setup-container {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.setup-card {
|
||||
background: var(--color-surface);
|
||||
border-radius: 16px;
|
||||
padding: 2rem;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.setup-header {
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.setup-header .logo {
|
||||
font-size: 3rem;
|
||||
color: var(--color-primary);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.setup-header h1 {
|
||||
margin: 0;
|
||||
color: var(--color-text);
|
||||
font-size: 1.8rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.setup-header p {
|
||||
margin: 1rem 0 0 0;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.setup-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-weight: 500;
|
||||
color: var(--color-text);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem;
|
||||
border: 2px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
transition: all 0.2s ease;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
|
||||
}
|
||||
|
||||
.password-input-group {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.password-input {
|
||||
padding-right: 3rem;
|
||||
}
|
||||
|
||||
.password-toggle {
|
||||
position: absolute;
|
||||
right: 0.75rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
padding: 0.25rem;
|
||||
border-radius: 4px;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.password-toggle:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.password-strength {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.strength-bar {
|
||||
flex: 1;
|
||||
height: 4px;
|
||||
background: var(--color-border);
|
||||
border-radius: 2px;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.strength-bar.active.weak { background: var(--color-error); }
|
||||
.strength-bar.active.fair { background: var(--color-warning); }
|
||||
.strength-bar.active.good { background: var(--color-info); }
|
||||
.strength-bar.active.strong { background: var(--color-success); }
|
||||
|
||||
.strength-text {
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-text-secondary);
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.form-help {
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-text-secondary);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.setup-button {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
background: var(--color-primary);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.setup-button:hover:not(:disabled) {
|
||||
background: var(--color-primary-dark);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.3);
|
||||
}
|
||||
|
||||
.setup-button:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background: var(--color-error-light);
|
||||
color: var(--color-error);
|
||||
padding: 0.75rem;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--color-error);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.success-message {
|
||||
background: var(--color-success-light);
|
||||
color: var(--color-success);
|
||||
padding: 0.75rem;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--color-success);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.security-tips {
|
||||
margin-top: 1.5rem;
|
||||
padding: 1rem;
|
||||
background: var(--color-info-light);
|
||||
border: 1px solid var(--color-info);
|
||||
border-radius: 8px;
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.security-tips h4 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
color: var(--color-info);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.security-tips ul {
|
||||
margin: 0;
|
||||
padding-left: 1.2rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
color: white;
|
||||
padding: 0.5rem;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.theme-toggle:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border: 2px solid transparent;
|
||||
border-top: 2px solid currentColor;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="setup-container">
|
||||
<button class="theme-toggle" id="theme-toggle" title="Toggle theme">
|
||||
<i class="fas fa-moon"></i>
|
||||
</button>
|
||||
|
||||
<div class="setup-card">
|
||||
<div class="setup-header">
|
||||
<div class="logo">
|
||||
<i class="fas fa-play-circle"></i>
|
||||
</div>
|
||||
<h1>Welcome to AniWorld Manager</h1>
|
||||
<p>Let's set up your master password to secure your anime collection.</p>
|
||||
</div>
|
||||
|
||||
<form class="setup-form" id="setup-form">
|
||||
<div class="form-group">
|
||||
<label for="directory" class="form-label">Anime Directory</label>
|
||||
<input
|
||||
type="text"
|
||||
id="directory"
|
||||
name="directory"
|
||||
class="form-input"
|
||||
placeholder="C:\Anime"
|
||||
value="{{ current_directory }}"
|
||||
required>
|
||||
<div class="form-help">
|
||||
The directory where your anime series are stored. This can be changed later in settings.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password" class="form-label">Master Password</label>
|
||||
<div class="password-input-group">
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
name="password"
|
||||
class="form-input password-input"
|
||||
placeholder="Create a strong password"
|
||||
required
|
||||
minlength="8">
|
||||
<button type="button" class="password-toggle" id="password-toggle" tabindex="-1">
|
||||
<i class="fas fa-eye"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="password-strength">
|
||||
<div class="strength-bar" id="strength-1"></div>
|
||||
<div class="strength-bar" id="strength-2"></div>
|
||||
<div class="strength-bar" id="strength-3"></div>
|
||||
<div class="strength-bar" id="strength-4"></div>
|
||||
</div>
|
||||
<div class="strength-text" id="strength-text">Password strength will be shown here</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="confirm-password" class="form-label">Confirm Password</label>
|
||||
<div class="password-input-group">
|
||||
<input
|
||||
type="password"
|
||||
id="confirm-password"
|
||||
name="confirm-password"
|
||||
class="form-input password-input"
|
||||
placeholder="Confirm your password"
|
||||
required
|
||||
minlength="8">
|
||||
<button type="button" class="password-toggle" id="confirm-password-toggle" tabindex="-1">
|
||||
<i class="fas fa-eye"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="message-container"></div>
|
||||
|
||||
<button type="submit" class="setup-button" id="setup-button">
|
||||
<i class="fas fa-check"></i>
|
||||
<span>Complete Setup</span>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="security-tips">
|
||||
<h4><i class="fas fa-shield-alt"></i> Security Tips</h4>
|
||||
<ul>
|
||||
<li>Use a password with at least 12 characters</li>
|
||||
<li>Include uppercase, lowercase, numbers, and symbols</li>
|
||||
<li>Don't use personal information or common words</li>
|
||||
<li>Consider using a password manager</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Theme toggle functionality
|
||||
const themeToggle = document.getElementById('theme-toggle');
|
||||
const htmlElement = document.documentElement;
|
||||
|
||||
const savedTheme = localStorage.getItem('theme') || 'light';
|
||||
htmlElement.setAttribute('data-theme', savedTheme);
|
||||
updateThemeIcon(savedTheme);
|
||||
|
||||
themeToggle.addEventListener('click', () => {
|
||||
const currentTheme = htmlElement.getAttribute('data-theme');
|
||||
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
||||
|
||||
htmlElement.setAttribute('data-theme', newTheme);
|
||||
localStorage.setItem('theme', newTheme);
|
||||
updateThemeIcon(newTheme);
|
||||
});
|
||||
|
||||
function updateThemeIcon(theme) {
|
||||
const icon = themeToggle.querySelector('i');
|
||||
icon.className = theme === 'dark' ? 'fas fa-sun' : 'fas fa-moon';
|
||||
}
|
||||
|
||||
// Password visibility toggles
|
||||
document.querySelectorAll('.password-toggle').forEach(toggle => {
|
||||
toggle.addEventListener('click', () => {
|
||||
const input = toggle.parentElement.querySelector('input');
|
||||
const type = input.getAttribute('type');
|
||||
const newType = type === 'password' ? 'text' : 'password';
|
||||
const icon = toggle.querySelector('i');
|
||||
|
||||
input.setAttribute('type', newType);
|
||||
icon.className = newType === 'password' ? 'fas fa-eye' : 'fas fa-eye-slash';
|
||||
});
|
||||
});
|
||||
|
||||
// Password strength checker
|
||||
const passwordInput = document.getElementById('password');
|
||||
const strengthBars = document.querySelectorAll('.strength-bar');
|
||||
const strengthText = document.getElementById('strength-text');
|
||||
|
||||
passwordInput.addEventListener('input', () => {
|
||||
const password = passwordInput.value;
|
||||
const strength = calculatePasswordStrength(password);
|
||||
updatePasswordStrength(strength);
|
||||
});
|
||||
|
||||
function calculatePasswordStrength(password) {
|
||||
let score = 0;
|
||||
let feedback = [];
|
||||
|
||||
// Length check
|
||||
if (password.length >= 8) score++;
|
||||
if (password.length >= 12) score++;
|
||||
|
||||
// Character variety
|
||||
if (/[a-z]/.test(password)) score++;
|
||||
if (/[A-Z]/.test(password)) score++;
|
||||
if (/[0-9]/.test(password)) score++;
|
||||
if (/[^A-Za-z0-9]/.test(password)) score++;
|
||||
|
||||
// Penalties
|
||||
if (password.length < 8) {
|
||||
feedback.push('Too short');
|
||||
score = Math.max(0, score - 2);
|
||||
}
|
||||
|
||||
if (!/[A-Z]/.test(password)) feedback.push('Add uppercase');
|
||||
if (!/[0-9]/.test(password)) feedback.push('Add numbers');
|
||||
if (!/[^A-Za-z0-9]/.test(password)) feedback.push('Add symbols');
|
||||
|
||||
const strengthLevels = ['Very Weak', 'Weak', 'Fair', 'Good', 'Strong', 'Very Strong'];
|
||||
const strengthLevel = Math.min(Math.floor(score / 1.2), 5);
|
||||
|
||||
return {
|
||||
score: Math.min(score, 6),
|
||||
level: strengthLevel,
|
||||
text: strengthLevels[strengthLevel],
|
||||
feedback
|
||||
};
|
||||
}
|
||||
|
||||
function updatePasswordStrength(strength) {
|
||||
const colors = ['weak', 'weak', 'fair', 'good', 'strong', 'strong'];
|
||||
const color = colors[strength.level];
|
||||
|
||||
strengthBars.forEach((bar, index) => {
|
||||
bar.className = 'strength-bar';
|
||||
if (index < strength.score) {
|
||||
bar.classList.add('active', color);
|
||||
}
|
||||
});
|
||||
|
||||
if (passwordInput.value) {
|
||||
let text = `Password strength: ${strength.text}`;
|
||||
if (strength.feedback.length > 0) {
|
||||
text += ` (${strength.feedback.join(', ')})`;
|
||||
}
|
||||
strengthText.textContent = text;
|
||||
strengthText.style.color = strength.level >= 3 ? 'var(--color-success)' : 'var(--color-warning)';
|
||||
} else {
|
||||
strengthText.textContent = 'Password strength will be shown here';
|
||||
strengthText.style.color = 'var(--color-text-secondary)';
|
||||
}
|
||||
}
|
||||
|
||||
// Form submission
|
||||
const setupForm = document.getElementById('setup-form');
|
||||
const setupButton = document.getElementById('setup-button');
|
||||
const messageContainer = document.getElementById('message-container');
|
||||
const confirmPasswordInput = document.getElementById('confirm-password');
|
||||
const directoryInput = document.getElementById('directory');
|
||||
|
||||
// Real-time password confirmation
|
||||
confirmPasswordInput.addEventListener('input', validatePasswordMatch);
|
||||
passwordInput.addEventListener('input', validatePasswordMatch);
|
||||
|
||||
function validatePasswordMatch() {
|
||||
const password = passwordInput.value;
|
||||
const confirmPassword = confirmPasswordInput.value;
|
||||
|
||||
if (confirmPassword && password !== confirmPassword) {
|
||||
confirmPasswordInput.setCustomValidity('Passwords do not match');
|
||||
confirmPasswordInput.style.borderColor = 'var(--color-error)';
|
||||
} else {
|
||||
confirmPasswordInput.setCustomValidity('');
|
||||
confirmPasswordInput.style.borderColor = 'var(--color-border)';
|
||||
}
|
||||
}
|
||||
|
||||
setupForm.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const password = passwordInput.value;
|
||||
const confirmPassword = confirmPasswordInput.value;
|
||||
const directory = directoryInput.value.trim();
|
||||
|
||||
if (password !== confirmPassword) {
|
||||
showMessage('Passwords do not match', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
const strength = calculatePasswordStrength(password);
|
||||
if (strength.level < 2) {
|
||||
showMessage('Password is too weak. Please use a stronger password.', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!directory) {
|
||||
showMessage('Please enter a valid anime directory', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/auth/setup', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
password,
|
||||
directory
|
||||
})
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.status === 'success') {
|
||||
showMessage('Setup completed successfully! Redirecting...', 'success');
|
||||
setTimeout(() => {
|
||||
window.location.href = '/';
|
||||
}, 2000);
|
||||
} else {
|
||||
showMessage(data.message, 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
showMessage('Setup failed. Please try again.', 'error');
|
||||
console.error('Setup error:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
});
|
||||
|
||||
function showMessage(message, type) {
|
||||
messageContainer.innerHTML = `
|
||||
<div class="${type}-message">
|
||||
${message}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function setLoading(loading) {
|
||||
setupButton.disabled = loading;
|
||||
const buttonText = setupButton.querySelector('span');
|
||||
const buttonIcon = setupButton.querySelector('i');
|
||||
|
||||
if (loading) {
|
||||
buttonIcon.className = 'loading-spinner';
|
||||
buttonText.textContent = 'Setting up...';
|
||||
} else {
|
||||
buttonIcon.className = 'fas fa-check';
|
||||
buttonText.textContent = 'Complete Setup';
|
||||
}
|
||||
}
|
||||
|
||||
// Clear message on input
|
||||
[passwordInput, confirmPasswordInput, directoryInput].forEach(input => {
|
||||
input.addEventListener('input', () => {
|
||||
messageContainer.innerHTML = '';
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
0
src/server/web/templates/config/__init__.py
Normal file
0
src/server/web/templates/config/__init__.py
Normal file
0
src/server/web/templates/downloads/__init__.py
Normal file
0
src/server/web/templates/downloads/__init__.py
Normal file
0
src/server/web/templates/errors/__init__.py
Normal file
0
src/server/web/templates/errors/__init__.py
Normal file
Reference in New Issue
Block a user