ff_plugins/anime_downloader
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

feat: update UI with new styling for queue, search, and request pages, and adjust module logic.

Browse Source
This commit is contained in:
projectdx
2026-01-01 02:19:22 +09:00
parent 3398558a9e
commit b1753a5e7e
11 changed files with 1135 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

258
templates/anime_downloader_linkkf_queue.html
View File

@@ -1,6 +1,135 @@
{% extends "base.html" %}
{% block content %}
<style>
:root {
--forest-950: #022c22;
--forest-900: #064e3b;
--forest-800: #065f46;
--forest-500: #10b981;
--forest-400: #34d399;
--forest-accent: #6ee7b7;
}
body { background-color: var(--forest-950) !important; color: #ecfdf5; }
/* Layout Expansion */
#main_container, .container, .container-fluid, #anime_downloader_wrapper {
max-width: 100% !important;
padding-left: 5px !important;
padding-right: 5px !important;
margin: 0 auto !important;
}
/* Navigation Menu Override */
ul.nav.nav-pills.bg-light {
background-color: rgba(6, 78, 59, 0.4) !important;
backdrop-filter: blur(10px);
border: 1px solid rgba(16, 185, 129, 0.1);
border-radius: 50rem !important;
padding: 6px !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
display: inline-flex !important;
gap: 4px;
margin-bottom: 20px;
}
ul.nav.nav-pills .nav-link {
color: #d1fae5 !important;
font-weight: 600 !important;
padding: 8px 20px !important;
border-radius: 50rem !important;
transition: all 0.3s ease !important;
border: 1px solid transparent !important;
}
ul.nav.nav-pills .nav-link:hover {
background-color: rgba(16, 185, 129, 0.1) !important;
color: #fff !important;
transform: translateY(-1px);
}
ul.nav.nav-pills .nav-link.active {
background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
color: #fff !important;
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}
.queue-header-container {
display: flex; justify-content: space-between; align-items: flex-end;
margin-bottom: 20px; border-bottom: 1px solid rgba(16, 185, 129, 0.2); padding-bottom: 10px;
}
.queue-title { color: var(--forest-accent); font-weight: 700; margin: 0; }
.queue-meta { font-size: 12px; color: #6ee7b7; opacity: 0.6; }
.custom-queue-table {
background: rgba(6, 78, 59, 0.2); border-collapse: separate; border-spacing: 0 4px; color: #ecfdf5;
}
.custom-queue-table thead th {
background: rgba(2, 44, 34, 0.8) !important; color: #6ee7b7; font-size: 13px;
text-transform: uppercase; border: none !important; padding: 12px 8px !important;
text-align: center;
}
.custom-queue-table tbody tr {
background: rgba(6, 78, 59, 0.3); transition: all 0.2s;
}
.custom-queue-table tbody tr:hover { background: rgba(6, 78, 59, 0.5) !important; }
.custom-queue-table td { border: none !important; vertical-align: middle !important; padding: 14px 8px !important; }
/* Badges & Status */
.badge-status {
padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700;
display: inline-block; min-width: 60px; text-align: center;
}
.status-downloading { background: rgba(16, 185, 129, 0.2); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.3); }
.status-wait { background: rgba(251, 191, 36, 0.1); color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.2); }
.status-completed { background: rgba(59, 130, 246, 0.2); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.3); }
.status-fail { background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); }
/* Progress Bar */
.custom-progress { height: 18px; background: rgba(0,0,0,0.4); border-radius: 9px; overflow: hidden; border: 1px solid rgba(16, 185, 129, 0.1); }
.custom-progress .progress-bar {
background: linear-gradient(90deg, #10b981, #059669) !important;
font-weight: 700; font-size: 11px;
transition: width 0.4s ease-out;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
/* Action Buttons */
.action-btn-mini {
width: 32px; height: 32px; border-radius: 8px; border: none; font-size: 14px;
display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s;
}
.action-btn-mini.btn-danger { background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); }
.action-btn-mini.btn-danger:hover { background: #ef4444; color: white; transform: scale(1.1); }
.action-btn-mini.btn-warning { background: rgba(245, 158, 11, 0.2); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); }
.action-btn-mini.btn-warning:hover { background: #f59e0b; color: white; transform: scale(1.1); }
.action-btn-group { display: flex; justify-content: center; gap: 4px; }
.header-buttons { display: flex; gap: 10px; align-items: center; }
.queue-btn-top {
display: flex; align-items: center; gap: 6px; padding: 6px 14px;
border: none; border-radius: 8px; font-weight: 600; font-size: 13px;
cursor: pointer; transition: all 0.3s ease;
}
.queue-btn-top.btn-danger { background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); }
.queue-btn-top.btn-danger:hover { background: #ef4444; color: white; box-shadow: 0 0 15px rgba(239, 68, 68, 0.4); }
.queue-btn-top.btn-warning { background: rgba(245, 158, 11, 0.2); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); }
.queue-btn-top.btn-warning:hover { background: #f59e0b; color: white; box-shadow: 0 0 15px rgba(245, 158, 11, 0.4); }
/* Details */
.queue-detail-container { color: #d1fae5; font-size: 13px; }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px 20px; }
.detail-item { display: flex; gap: 10px; align-items: flex-start; }
.detail-item .label { color: #6ee7b7; font-weight: 700; min-width: 100px; opacity: 0.7; font-size: 11px; text-transform: uppercase; }
.detail-item .value { color: #ecfdf5; word-break: break-all; }
/* Smooth Load */
.content-cloak { opacity: 0; transition: opacity 0.5s ease-out; }
.content-cloak.visible { opacity: 1; }
</style>
<div class="content-cloak">
<div class="queue-header-container">
<h4 class="queue-title"><i class="fa fa-download"></i> 다운로드 큐</h4>
@@ -271,135 +400,6 @@ function status_html(data) {
}
</script>
<style>
:root {
--forest-950: #022c22;
--forest-900: #064e3b;
--forest-800: #065f46;
--forest-500: #10b981;
--forest-400: #34d399;
--forest-accent: #6ee7b7;
}
body { background-color: var(--forest-950) !important; color: #ecfdf5; }
/* Layout Expansion */
#main_container, .container, .container-fluid, #anime_downloader_wrapper {
max-width: 100% !important;
padding-left: 5px !important;
padding-right: 5px !important;
margin: 0 auto !important;
}
/* Navigation (Tabs) Optimization */
.nav-pills {
background: rgba(6, 78, 59, 0.4) !important;
padding: 6px !important;
border-radius: 12px !important;
border: 1px solid rgba(16, 185, 129, 0.1) !important;
margin-bottom: 20px !important;
display: inline-flex !important;
gap: 4px !important;
box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
}
.nav-pills .nav-link {
color: #d1fae5 !important;
font-weight: 600 !important;
padding: 8px 20px !important;
border-radius: 8px !important;
transition: all 0.3s ease !important;
border: 1px solid transparent !important;
}
.nav-pills .nav-link:hover {
background: rgba(16, 185, 129, 0.1) !important;
color: #fff !important;
transform: translateY(-1px);
}
.nav-pills .nav-link.active {
background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
color: #fff !important;
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
border: 1px solid rgba(255,255,255,0.1) !important;
}
.queue-header-container {
display: flex; justify-content: space-between; align-items: flex-end;
margin-bottom: 20px; border-bottom: 1px solid rgba(16, 185, 129, 0.2); padding-bottom: 10px;
}
.queue-title { color: var(--forest-accent); font-weight: 700; margin: 0; }
.queue-meta { font-size: 12px; color: #6ee7b7; opacity: 0.6; }
.custom-queue-table {
background: rgba(6, 78, 59, 0.2); border-collapse: separate; border-spacing: 0 4px; color: #ecfdf5;
}
.custom-queue-table thead th {
background: rgba(2, 44, 34, 0.8) !important; color: #6ee7b7; font-size: 13px;
text-transform: uppercase; border: none !important; padding: 12px 8px !important;
text-align: center;
}
.custom-queue-table tbody tr {
background: rgba(6, 78, 59, 0.3); transition: all 0.2s;
}
.custom-queue-table tbody tr:hover { background: rgba(6, 78, 59, 0.5) !important; }
.custom-queue-table td { border: none !important; vertical-align: middle !important; padding: 14px 8px !important; }
/* Badges & Status */
.badge-status {
padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700;
display: inline-block; min-width: 60px; text-align: center;
}
.status-downloading { background: rgba(16, 185, 129, 0.2); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.3); }
.status-wait { background: rgba(251, 191, 36, 0.1); color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.2); }
.status-completed { background: rgba(59, 130, 246, 0.2); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.3); }
.status-fail { background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); }
/* Progress Bar */
.custom-progress { height: 18px; background: rgba(0,0,0,0.4); border-radius: 9px; overflow: hidden; border: 1px solid rgba(16, 185, 129, 0.1); }
.custom-progress .progress-bar {
background: linear-gradient(90deg, #10b981, #059669) !important;
font-weight: 700; font-size: 11px;
transition: width 0.4s ease-out;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
/* Action Buttons */
.action-btn-mini {
width: 32px; height: 32px; border-radius: 8px; border: none; font-size: 14px;
display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s;
}
.action-btn-mini.btn-danger { background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); }
.action-btn-mini.btn-danger:hover { background: #ef4444; color: white; transform: scale(1.1); }
.action-btn-mini.btn-warning { background: rgba(245, 158, 11, 0.2); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); }
.action-btn-mini.btn-warning:hover { background: #f59e0b; color: white; transform: scale(1.1); }
.action-btn-group { display: flex; justify-content: center; gap: 4px; }
.header-buttons { display: flex; gap: 10px; align-items: center; }
.queue-btn-top {
display: flex; align-items: center; gap: 6px; padding: 6px 14px;
border: none; border-radius: 8px; font-weight: 600; font-size: 13px;
cursor: pointer; transition: all 0.3s ease;
}
.queue-btn-top.btn-danger { background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); }
.queue-btn-top.btn-danger:hover { background: #ef4444; color: white; box-shadow: 0 0 15px rgba(239, 68, 68, 0.4); }
.queue-btn-top.btn-warning { background: rgba(245, 158, 11, 0.2); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); }
.queue-btn-top.btn-warning:hover { background: #f59e0b; color: white; box-shadow: 0 0 15px rgba(245, 158, 11, 0.4); }
/* Details */
.queue-detail-container { color: #d1fae5; font-size: 13px; }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px 20px; }
.detail-item { display: flex; gap: 10px; align-items: flex-start; }
.detail-item .label { color: #6ee7b7; font-weight: 700; min-width: 100px; opacity: 0.7; font-size: 11px; text-transform: uppercase; }
.detail-item .value { color: #ecfdf5; word-break: break-all; }
/* Smooth Load */
.content-cloak { opacity: 0; transition: opacity 0.5s ease-out; }
.content-cloak.visible { opacity: 1; }
</style>
<script type="text/javascript">
$(document).ready(function(){
setTimeout(function() { $('.content-cloak').addClass('visible'); }, 100);
});
</script>