added manual matching on anime
This commit is contained in:
@@ -61,13 +61,15 @@
|
||||
|
||||
<div class="header-right">
|
||||
<button class="btn-icon-glass" id="download-btn" title="Download Episode" style="display: none;">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
|
||||
<polyline points="7 10 12 15 17 10"></polyline>
|
||||
<line x1="12" y1="15" x2="12" y2="3"></line>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div class="settings-group">
|
||||
<button class="btn-icon-glass" id="manual-match-btn" title="Manual Match" style="display: none;">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<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>
|
||||
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="sd-toggle" id="sd-toggle" data-state="sub">
|
||||
<div class="sd-bg"></div>
|
||||
<div class="sd-option active" id="opt-sub">Sub</div>
|
||||
@@ -78,6 +80,21 @@
|
||||
<select id="extension-select" class="glass-select"></select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-overlay" id="match-modal">
|
||||
<div class="modal-content download-settings-content">
|
||||
<button class="modal-close" id="close-match-modal">✕</button>
|
||||
<h2 class="modal-title">Manual Match</h2>
|
||||
|
||||
<div class="dl-section">
|
||||
<input type="text" id="match-search-input" class="glass-input" placeholder="Search in this extension..." autocomplete="off">
|
||||
</div>
|
||||
|
||||
<div class="download-sections-wrapper">
|
||||
<div id="match-results-list" class="dl-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="video-frame">
|
||||
|
||||
@@ -709,7 +709,7 @@ body.stop-scrolling {
|
||||
MODAL DE DESCARGAS - REDISEÑO "GLASS"
|
||||
========================================= */
|
||||
|
||||
#download-modal {
|
||||
#download-modal, #match-modal {
|
||||
position: fixed !important;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@@ -727,7 +727,7 @@ body.stop-scrolling {
|
||||
}
|
||||
|
||||
/* Estado visible activado por JS */
|
||||
#download-modal.show {
|
||||
#download-modal.show, #match-modal.show {
|
||||
display: flex !important;
|
||||
opacity: 1 !important;
|
||||
pointer-events: auto !important;
|
||||
@@ -752,7 +752,8 @@ body.stop-scrolling {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#download-modal.show .download-settings-content {
|
||||
#download-modal.show .download-settings-content,
|
||||
#match-modal.show .download-settings-content {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
@@ -916,4 +917,96 @@ body.stop-scrolling {
|
||||
background: #7c3aed; /* Un tono más oscuro del brand */
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
|
||||
}
|
||||
|
||||
.glass-input {
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
color: white;
|
||||
padding: 12px 16px;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
outline: none;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.glass-input:focus {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-color: var(--brand-color);
|
||||
box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
|
||||
}
|
||||
|
||||
/* Reutilización para los resultados de búsqueda */
|
||||
.match-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
padding: 10px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.match-item:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.match-item img {
|
||||
width: 40px;
|
||||
height: 56px;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
background: #222;
|
||||
}
|
||||
|
||||
.match-title {
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.match-meta {
|
||||
font-size: 0.8rem;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
/* Estado activo (seleccionado actualmente si quisieras marcarlo) */
|
||||
.match-item.active {
|
||||
border: 1px solid var(--brand-color);
|
||||
background: rgba(139, 92, 246, 0.1);
|
||||
}
|
||||
|
||||
.btn-view-source {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 8px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 6px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
transition: all 0.2s ease;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
text-decoration: none;
|
||||
margin-left: auto; /* Empuja el botón a la derecha */
|
||||
}
|
||||
|
||||
.btn-view-source:hover {
|
||||
background: var(--brand-color);
|
||||
color: white;
|
||||
border-color: var(--brand-color-light);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* Ajuste para que el texto no choque con el botón */
|
||||
.match-info {
|
||||
flex: 1;
|
||||
margin-right: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
Reference in New Issue
Block a user