| {% extends "shared/base.html" %}
|
|
|
| {% block title %}Settings - AniCove{% endblock %}
|
| {% block meta_description %}Manage your AniCove account settings, playback preferences, and appearance.{% endblock %}
|
| {% block og_title %}{{ self.title() }}{% endblock %}
|
| {% block og_description %}{{ self.meta_description() }}{% endblock %}
|
| {% block og_image %}{{ url_for('static', filename='images/logos/no-bg-logo.png', _external=True) }}{% endblock %}
|
|
|
| {% block content %}
|
| <div class="container">
|
| <div class="settings-container">
|
| <h1 style="margin-bottom: var(--space-xl);">Settings</h1>
|
|
|
|
|
| <div class="settings-section">
|
| <h2 class="settings-section-title">
|
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
| <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
|
| <circle cx="12" cy="7" r="4" />
|
| </svg>
|
| Account
|
| </h2>
|
|
|
| <div class="settings-row">
|
| <div class="settings-label">
|
| <span class="settings-label-text">Username</span>
|
| <span class="settings-label-desc">{{ user.username }}</span>
|
| </div>
|
| </div>
|
|
|
| <div class="settings-row">
|
| <div class="settings-label">
|
| <span class="settings-label-text">Email</span>
|
| <span class="settings-label-desc">{{ user.email or 'Not set' }}</span>
|
| </div>
|
| </div>
|
|
|
| <div class="settings-row">
|
| <div class="settings-label">
|
| <span class="settings-label-text">Member Since</span>
|
| <span class="settings-label-desc">{{ user.created_at.strftime('%B %d, %Y') if user.created_at else
|
| 'Unknown' }}</span>
|
| </div>
|
| </div>
|
|
|
| {% if user.auth_method == 'local' or not user.auth_method %}
|
| <div class="settings-row">
|
| <div class="settings-label">
|
| <span class="settings-label-text">Password</span>
|
| <span class="settings-label-desc">Update your account password</span>
|
| </div>
|
| <button class="btn btn-secondary" id="change-password-btn">
|
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 4px;">
|
| <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
|
| <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
|
| </svg>
|
| Change Password
|
| </button>
|
| </div>
|
| {% endif %}
|
| </div>
|
|
|
|
|
| <div class="settings-section">
|
| <h2 class="settings-section-title">
|
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
| <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
|
| <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
|
| </svg>
|
| AniList Connection
|
| </h2>
|
|
|
| {% if user.anilist_authenticated %}
|
| <div class="anilist-card" style="margin-bottom: var(--space-md);">
|
| <div class="anilist-card-avatar">
|
| {% if user.avatar %}
|
| <img src="{{ user.avatar }}" alt="AniList avatar">
|
| {% else %}
|
| <img src="https://ui-avatars.com/api/?name={{ user.username }}&size=104&background=1a1a1a&color=fff&bold=true"
|
| alt="Avatar">
|
| {% endif %}
|
| </div>
|
| <div class="anilist-card-info">
|
| <div class="anilist-card-title">
|
| <span style="color: var(--success);">●</span> Connected
|
| </div>
|
| <div class="anilist-card-sub">AniList ID: {{ user.anilist_id }}</div>
|
| </div>
|
| </div>
|
|
|
| <div style="display: flex; gap: 8px; flex-wrap: wrap;">
|
| <button class="btn btn-secondary" id="disconnect-anilist" style="color: var(--error);">
|
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
| <path d="M18.36 6.64a9 9 0 1 1-12.73 0" />
|
| <line x1="12" y1="2" x2="12" y2="12" />
|
| </svg>
|
| Disconnect
|
| </button>
|
| </div>
|
| {% else %}
|
| <div class="anilist-connect-cta">
|
| <div class="cta-icon">🔗</div>
|
| <h3>Connect Your AniList</h3>
|
| <p class="text-muted">Sync your anime list with AniList to track progress across platforms.</p>
|
| <a href="{{ url_for('auth.connect_anilist_account') }}" class="btn btn-primary">
|
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
| <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
|
| <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
|
| </svg>
|
| Connect
|
| </a>
|
| </div>
|
| {% endif %}
|
|
|
|
|
| <h2 class="settings-section-title" style="margin-top: 2rem; border-top: 1px solid var(--border); padding-top: 2rem;">
|
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
| <circle cx="12" cy="12" r="10"></circle>
|
| <path d="M16 12l-4-4-4 4"></path>
|
| <path d="M12 8v8"></path>
|
| </svg>
|
| MyAnimeList
|
| </h2>
|
| {% if user.mal_authenticated %}
|
| <div class="anilist-card" style="margin-bottom: var(--space-md);">
|
| <div class="anilist-card-avatar" style="background: transparent; display: flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; padding: 0;">
|
| <img src="https://upload.wikimedia.org/wikipedia/commons/7/7a/MyAnimeList_Logo.png" alt="MAL" style="width: 100%; height: 100%; object-fit: cover;">
|
| </div>
|
| <div class="anilist-card-info">
|
| <div class="anilist-card-title">
|
| <span style="color: var(--success);">●</span> Connected
|
| </div>
|
| <div class="anilist-card-sub">MyAnimeList: {{ user.mal_username }}</div>
|
| </div>
|
| </div>
|
|
|
| <div style="display: flex; gap: 8px; flex-wrap: wrap;">
|
| <button class="btn btn-secondary" id="disconnect-mal" style="color: var(--error);" onclick="disconnectMAL()">
|
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
| <path d="M18.36 6.64a9 9 0 1 1-12.73 0" />
|
| <line x1="12" y1="2" x2="12" y2="12" />
|
| </svg>
|
| Disconnect
|
| </button>
|
| </div>
|
| {% else %}
|
| <div class="anilist-connect-cta">
|
| <div class="cta-icon" style="background: transparent; display: flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; padding: 0;">
|
| <img src="https://upload.wikimedia.org/wikipedia/commons/7/7a/MyAnimeList_Logo.png" alt="MAL" style="width: 100%; height: 100%; object-fit: cover;">
|
| </div>
|
| <h3>Connect MyAnimeList</h3>
|
| <p class="text-muted">Sync your anime list with MyAnimeList to track progress across platforms.</p>
|
| <a href="{{ url_for('auth.connect_mal_account') }}" class="btn btn-primary" style="background: #2e51a2; border-color: #2e51a2; color: white;">
|
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
| <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
|
| <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
|
| </svg>
|
| Connect
|
| </a>
|
| </div>
|
| {% endif %}
|
| </div>
|
|
|
|
|
| <div class="settings-section">
|
| <h2 class="settings-section-title">
|
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
| <polygon points="5 3 19 12 5 21 5 3" />
|
| </svg>
|
| Playback
|
| </h2>
|
|
|
| <div class="settings-row">
|
| <div class="settings-label">
|
| <span class="settings-label-text">Preferred Language</span>
|
| <span class="settings-label-desc">Default audio language for episodes</span>
|
| </div>
|
| <select class="server-select" id="preferred-lang">
|
| <option value="sub">Subbed (Japanese)</option>
|
| <option value="dub">Dubbed (English)</option>
|
| </select>
|
| </div>
|
|
|
| <div class="settings-row">
|
| <div class="settings-label">
|
| <span class="settings-label-text">Autoplay Next Episode</span>
|
| <span class="settings-label-desc">Automatically play the next episode</span>
|
| </div>
|
| <div class="toggle" id="autoplay-toggle" data-setting="autoplay"></div>
|
| </div>
|
|
|
| <div class="settings-row">
|
| <div class="settings-label">
|
| <span class="settings-label-text">Skip Intro/Outro</span>
|
| <span class="settings-label-desc">Automatically skip intro and outro when available</span>
|
| </div>
|
| <div class="toggle" id="skip-toggle" data-setting="skip_intro"></div>
|
| </div>
|
|
|
| <div class="settings-row">
|
| <div class="settings-label">
|
| <span class="settings-label-text">Player Source</span>
|
| <span class="settings-label-desc">Choose your preferred video player</span>
|
| </div>
|
| <select class="server-select" id="preferred-player">
|
| <option value="internal">Internal</option>
|
| <option value="external">External (Megaplay)</option>
|
| </select>
|
| </div>
|
|
|
| <div class="settings-row">
|
| <div class="settings-label">
|
| <span class="settings-label-text">MyAnimeList Sync</span>
|
| <span class="settings-label-desc">Automatically track watched episodes to MyAnimeList at 80% progress</span>
|
| </div>
|
| <div class="toggle" id="mal-sync-toggle" data-setting="mal_sync"></div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="settings-section">
|
| <h2 class="settings-section-title">
|
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
| <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
|
| <circle cx="12" cy="7" r="4" />
|
| </svg>
|
| Profile Customization
|
| </h2>
|
|
|
| <div class="settings-row">
|
| <div class="settings-label">
|
| <span class="settings-label-text">Profile Picture</span>
|
| <span class="settings-label-desc">Upload a custom profile picture (PNG, JPG, GIF, WebP - Max 5MB)</span>
|
| </div>
|
| <div style="display: flex; align-items: center; gap: 12px;">
|
| <div id="avatar-preview" style="width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: var(--surface-2);">
|
| {% if user.avatar %}
|
| <img src="{{ user.avatar }}" alt="Current avatar" style="width: 100%; height: 100%; object-fit: cover;">
|
| {% else %}
|
| <img src="https://ui-avatars.com/api/?name={{ user.username }}&size=48&background=1a1a1a&color=fff&bold=true" alt="Avatar" style="width: 100%; height: 100%; object-fit: cover;">
|
| {% endif %}
|
| </div>
|
| <input type="file" id="avatar-input" accept="image/png,image/jpeg,image/gif,image/webp" style="display: none;">
|
| <button class="btn btn-secondary" id="upload-avatar-btn">
|
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 4px;">
|
| <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
|
| <polyline points="17 8 12 3 7 8"></polyline>
|
| <line x1="12" y1="3" x2="12" y2="15"></line>
|
| </svg>
|
| Upload
|
| </button>
|
| </div>
|
| </div>
|
|
|
| <div class="settings-row">
|
| <div class="settings-label">
|
| <span class="settings-label-text">Banner Image</span>
|
| <span class="settings-label-desc">Upload a custom banner image (PNG, JPG, GIF, WebP - Max 10MB)</span>
|
| </div>
|
| <div style="display: flex; align-items: center; gap: 12px;">
|
| <div id="banner-preview" style="width: 80px; height: 48px; border-radius: 4px; overflow: hidden; background: var(--surface-2);">
|
| {% if user.banner_image %}
|
| <img src="{{ user.banner_image }}" alt="Current banner" style="width: 100%; height: 100%; object-fit: cover;">
|
| {% else %}
|
| <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 12px;">No banner</div>
|
| {% endif %}
|
| </div>
|
| <input type="file" id="banner-input" accept="image/png,image/jpeg,image/gif,image/webp" style="display: none;">
|
| <button class="btn btn-secondary" id="upload-banner-btn">
|
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 4px;">
|
| <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
|
| <polyline points="17 8 12 3 7 8"></polyline>
|
| <line x1="12" y1="3" x2="12" y2="15"></line>
|
| </svg>
|
| Upload
|
| </button>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="settings-section">
|
| <h2 class="settings-section-title">
|
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
| <circle cx="12" cy="12" r="5" />
|
| <line x1="12" y1="1" x2="12" y2="3" />
|
| <line x1="12" y1="21" x2="12" y2="23" />
|
| <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
|
| <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
|
| <line x1="1" y1="12" x2="3" y2="12" />
|
| <line x1="21" y1="12" x2="23" y2="12" />
|
| <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
|
| <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
|
| </svg>
|
| Appearance
|
| </h2>
|
|
|
| <div class="settings-row">
|
| <div class="settings-label">
|
| <span class="settings-label-text">Show Episode Titles</span>
|
| <span class="settings-label-desc">Display episode titles in lists (may contain spoilers)</span>
|
| </div>
|
| <div class="toggle" id="show-titles-toggle" data-setting="show_episode_titles"></div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="settings-section">
|
| <h2 class="settings-section-title">
|
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
| <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
|
| </svg>
|
| Content
|
| </h2>
|
|
|
| <div class="settings-row">
|
| <div class="settings-label">
|
| <span class="settings-label-text">Show 18+ Anime</span>
|
| <span class="settings-label-desc">Show adult anime content in search and browse results</span>
|
| </div>
|
| <div class="toggle" id="anime-adult-toggle" data-setting="show_adult_anime"></div>
|
| </div>
|
|
|
| <div class="settings-row">
|
| <div class="settings-label">
|
| <span class="settings-label-text">Hide NSFW Manga</span>
|
| <span class="settings-label-desc">Hide 18+ manga content from search and browse results</span>
|
| </div>
|
| <div class="toggle" id="manga-nsfw-toggle" data-setting="manga_hide_nsfw"></div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="settings-section danger-section">
|
| <h2 class="settings-section-title">
|
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
| <path
|
| d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
|
| <line x1="12" y1="9" x2="12" y2="13" />
|
| <line x1="12" y1="17" x2="12.01" y2="17" />
|
| </svg>
|
| Danger Zone
|
| </h2>
|
|
|
| <div class="settings-row">
|
| <div class="settings-label">
|
| <span class="settings-label-text">Clear Watch History</span>
|
| <span class="settings-label-desc">Remove all watch progress data</span>
|
| </div>
|
| <button class="btn btn-secondary" id="clear-history" style="color: var(--error);">
|
| Clear
|
| </button>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="modal" id="change-password-modal" style="display: none;">
|
| <div class="modal-backdrop" id="close-password-backdrop"></div>
|
| <div class="modal-content" style="max-width: 400px;">
|
| <button type="button" class="modal-close" id="close-password-modal" aria-label="Close">
|
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
| <line x1="18" y1="6" x2="6" y2="18" />
|
| <line x1="6" y1="6" x2="18" y2="18" />
|
| </svg>
|
| </button>
|
|
|
| <div>
|
| <h2 style="margin-bottom: var(--space-lg); text-align: center;">Change Password</h2>
|
| <form id="change-password-form">
|
| <div class="form-group">
|
| <label class="form-label" for="current-password">Current Password</label>
|
| <input type="password" id="current-password" class="form-input" placeholder="Current password" required minlength="6">
|
| </div>
|
| <div class="form-group">
|
| <label class="form-label" for="new-password">New Password</label>
|
| <input type="password" id="new-password" class="form-input" placeholder="New password" required minlength="6">
|
| </div>
|
|
|
| <div id="password-error-msg" class="text-error text-sm" style="display: none; margin-bottom: var(--space-md); text-align: center;"></div>
|
|
|
|
|
| <button type="submit" class="btn btn-primary w-full" id="submit-password-btn">
|
| <span id="submit-password-btn-text">Update Password</span>
|
| </button>
|
| </form>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| {% endblock %}
|
|
|
| {% block extra_js %}
|
| <script src="{{ url_for('static', filename='js/settings.js') }}"></script>
|
| {% endblock %}
|
|
|
