feat: Revamp anime search UI with modern design, glass cards, and introduce new search result template.`
This commit is contained in:
@@ -669,6 +669,20 @@ class LogicAniLife(PluginModuleBase):
|
||||
except Exception as img_err:
|
||||
logger.error(f"Image proxy error for {image_url}: {img_err}")
|
||||
return Response("Proxy error", status=500)
|
||||
elif sub == "add_whitelist":
|
||||
try:
|
||||
params = request.get_json()
|
||||
logger.debug(f"add_whitelist params: {params}")
|
||||
if params and "data_code" in params:
|
||||
code = params["data_code"]
|
||||
ret = LogicAniLife.add_whitelist(code)
|
||||
else:
|
||||
ret = LogicAniLife.add_whitelist()
|
||||
return jsonify(ret)
|
||||
except Exception as e:
|
||||
logger.error(f"Exception: {e}")
|
||||
logger.error(traceback.format_exc())
|
||||
return jsonify({"ret": False, "log": str(e)})
|
||||
except Exception as e:
|
||||
P.logger.error("Exception:%s", e)
|
||||
P.logger.error(traceback.format_exc())
|
||||
|
||||
@@ -274,7 +274,19 @@ class LogicLinkkf(PluginModuleBase):
|
||||
elif sub == "db_remove":
|
||||
return jsonify({"ret": "not_implemented"})
|
||||
elif sub == "add_whitelist":
|
||||
return jsonify({"ret": "not_implemented"})
|
||||
try:
|
||||
params = request.get_json()
|
||||
logger.debug(f"add_whitelist params: {params}")
|
||||
if params and "data_code" in params:
|
||||
code = params["data_code"]
|
||||
ret = LogicLinkkf.add_whitelist(code)
|
||||
else:
|
||||
ret = LogicLinkkf.add_whitelist()
|
||||
return jsonify(ret)
|
||||
except Exception as e:
|
||||
logger.error(f"Exception: {e}")
|
||||
logger.error(traceback.format_exc())
|
||||
return jsonify({"ret": False, "log": str(e)})
|
||||
elif sub == "command":
|
||||
# command = queue_command와 동일
|
||||
cmd = request.form.get("cmd", "")
|
||||
@@ -975,44 +987,58 @@ class LogicLinkkf(PluginModuleBase):
|
||||
|
||||
def get_search_result(self, query, page, cate):
|
||||
try:
|
||||
_query = urllib.parse.quote(query)
|
||||
url = f"{P.ModelSetting.get('linkkf_url')}/search/-------------.html?wd={_query}&page={page}"
|
||||
|
||||
logger.info("get_search_result()::url> %s", url)
|
||||
data = {"ret": "success", "page": page}
|
||||
response_data = LogicLinkkf.get_html(url, timeout=10)
|
||||
tree = html.fromstring(response_data)
|
||||
|
||||
# linkkf 검색 결과는 일반 목록과 동일한 구조
|
||||
tmp_items = tree.xpath('//div[@class="myui-vodlist__box"]')
|
||||
|
||||
data["episode_count"] = len(tmp_items)
|
||||
data["episode"] = []
|
||||
|
||||
if tree.xpath('//div[@id="wp_page"]//text()'):
|
||||
data["total_page"] = tree.xpath('//div[@id="wp_page"]//text()')[-1]
|
||||
# API URL: https://linkkf.5imgdarr.top/api/search.php
|
||||
api_url = "https://linkkf.5imgdarr.top/api/search.php"
|
||||
params = {
|
||||
"keyword": query,
|
||||
"page": page,
|
||||
"limit": 20
|
||||
}
|
||||
logger.info(f"get_search_result API: {api_url}, params: {params}")
|
||||
|
||||
headers = {
|
||||
"User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36",
|
||||
"Referer": "https://linkkf.live/"
|
||||
}
|
||||
|
||||
response = requests.get(api_url, params=params, headers=headers, timeout=10)
|
||||
result_json = response.json()
|
||||
|
||||
data = {"ret": "success", "page": page, "episode": []}
|
||||
|
||||
if result_json.get("status") == "success":
|
||||
items = result_json.get("data", [])
|
||||
pagination = result_json.get("pagination", {})
|
||||
|
||||
data["total_page"] = pagination.get("total_pages", 0)
|
||||
data["episode_count"] = pagination.get("total_results", 0)
|
||||
|
||||
for item in items:
|
||||
entity = {}
|
||||
entity["code"] = str(item.get("postid"))
|
||||
entity["title"] = item.get("name")
|
||||
|
||||
thumb = item.get("thumb")
|
||||
if thumb:
|
||||
if thumb.startswith("http"):
|
||||
entity["image_link"] = thumb
|
||||
else:
|
||||
entity["image_link"] = f"https://rez1.ims1.top/350x/{thumb}"
|
||||
else:
|
||||
entity["image_link"] = ""
|
||||
|
||||
entity["chapter"] = item.get("postnoti") or item.get("seasontype") or ""
|
||||
entity["link"] = f"https://linkkf.live/{entity['code']}"
|
||||
|
||||
data["episode"].append(entity)
|
||||
else:
|
||||
data["total_page"] = 0
|
||||
|
||||
for item in tmp_items:
|
||||
entity = {}
|
||||
entity["link"] = item.xpath(".//a/@href")[0]
|
||||
entity["code"] = re.search(r"[0-9]+", entity["link"]).group()
|
||||
entity["title"] = item.xpath('.//a[@class="text-fff"]//text()')[
|
||||
0
|
||||
].strip()
|
||||
entity["image_link"] = item.xpath("./a/@data-original")[0]
|
||||
entity["chapter"] = (
|
||||
item.xpath("./a/span//text()")[0].strip()
|
||||
if len(item.xpath("./a/span//text()")) > 0
|
||||
else ""
|
||||
)
|
||||
data["episode"].append(entity)
|
||||
data["total_page"] = 0
|
||||
data["episode_count"] = 0
|
||||
|
||||
return data
|
||||
except Exception as e:
|
||||
P.logger.error(f"Exception: {str(e)}")
|
||||
P.logger.error(traceback.format_exc())
|
||||
logger.error(f"Exception: {str(e)}")
|
||||
logger.error(traceback.format_exc())
|
||||
return {"ret": "exception", "log": str(e)}
|
||||
|
||||
def get_series_info(self, code):
|
||||
|
||||
810
search_result.html
Normal file
810
search_result.html
Normal file
@@ -0,0 +1,810 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="kr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||||
<meta name='robots' content='noindex, follow, max-image-preview:large' />
|
||||
<script type='text/javascript' id='mv_jquery-js-extra'>
|
||||
/* <![CDATA[ */
|
||||
var mv_base = {"ajaxurl":"https:\/\/linkkf.live\/wp-admin\/admin-ajax.php"};
|
||||
/* ]]> */
|
||||
</script>
|
||||
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js' id='mv_jquery-js'></script>
|
||||
<script type='text/javascript' src='https://linkkf.live/wp-content/themes/kfbeta16/assets/js/layer/layer.js' id='mv_layui-js'></script>
|
||||
<script type='text/javascript' src='https://linkkf.live/wp-content/themes/kfbeta16/assets/js/mytheme-ui.js' id='mv_mytheme_ui-js'></script>
|
||||
<script type='text/javascript' src='https://linkkf.live/wp-content/themes/kfbeta16/assets/js/mytheme-cms.js' id='mv_mytheme_cms-js'></script>
|
||||
<script type='text/javascript'>
|
||||
/* <![CDATA[ */
|
||||
var taqyeem = {"ajaxurl":"https://linkkf.live/wp-admin/admin-ajax.php" , "your_rating":"Your Rating:"};
|
||||
/* ]]> */
|
||||
</script>
|
||||
<link rel="icon" href="https://linkkf.live/wp-content/uploads/2020/09/cropped-logo-32x32.png" sizes="32x32" />
|
||||
<link rel="icon" href="https://linkkf.live/wp-content/uploads/2020/09/cropped-logo-192x192.png" sizes="192x192" />
|
||||
<link rel="apple-touch-icon" href="https://linkkf.live/wp-content/uploads/2020/09/cropped-logo-180x180.png" />
|
||||
<meta name="msapplication-TileImage" content="https://linkkf.live/wp-content/uploads/2020/09/cropped-logo-270x270.png" />
|
||||
<link href="https://linkkf.live/wp-content/themes/kfbeta16/style.css" rel="stylesheet" type="text/css" />
|
||||
<link rel="author" href="https://1.bp.blogspot.com/-yjRTBw8mtN4/X2f2XSQ8o5I/AAAAAAAAKn8/oCxwBIPZo5AEgaR-Ak7tVvPJiHEHKTjpQCLcBGAsYHQ/s52/logo.png" />
|
||||
|
||||
|
||||
<!-- Google tag (gtag.js) -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-YKQT0BN847"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'G-YKQT0BN847');
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
#masthead {
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
padding: 0 16px; height: 56px; background-color: #202020;
|
||||
top: 0; z-index: 100; border-bottom: 1px solid #2a2a2a;
|
||||
}
|
||||
|
||||
.header-left { display: flex; align-items: center; gap: 15px; min-width: 150px; z-index: 2; }
|
||||
.logo-text { font-size: 18px; font-weight: bold; color: #fff; letter-spacing: -0.5px; display: flex; align-items: center; gap: 5px; }
|
||||
|
||||
.header-center { flex: 0 1 700px; display: flex; justify-content: center; margin: 0 20px; }
|
||||
|
||||
.yt-search-form { display: flex; width: 100%; max-width: 600px; position: relative; }
|
||||
|
||||
.yt-search-input {
|
||||
width: 100%; padding: 0 15px; height: 40px; background-color: #121212;
|
||||
border: 1px solid #303030; border-right: none; border-radius: 40px 0 0 40px;
|
||||
color: #fff; font-size: 16px; outline: none; box-shadow: inset 0 1px 2px #000000;
|
||||
}
|
||||
.yt-search-input:focus { border-color: #1c62b9; }
|
||||
|
||||
.yt-search-btn {
|
||||
width: 64px; height: 40px; background-color: #222; border: 1px solid #303030;
|
||||
border-radius: 0 40px 40px 0; display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.yt-search-btn:hover { background-color: #303030; }
|
||||
.yt-search-btn svg { fill: #fff; width: 24px; height: 24px; }
|
||||
|
||||
.mobile-back-btn {
|
||||
display: none; background: transparent; border: none; padding: 10px; margin-right: 5px;
|
||||
}
|
||||
.mobile-back-btn svg { fill: #fff; width: 24px; height: 24px; }
|
||||
|
||||
.header-right { display: flex; align-items: center; gap: 10px; min-width: auto; justify-content: flex-end; z-index: 2; }
|
||||
|
||||
.mobile-search-trigger {
|
||||
display: none; background: transparent; border: none; padding: 8px; border-radius: 50%;
|
||||
}
|
||||
.mobile-search-trigger:active { background-color: #2a2a2a; }
|
||||
.mobile-search-trigger svg { fill: #fff; width: 24px; height: 24px; }
|
||||
|
||||
.auth-btn-link {
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
padding: 6px 12px; border: 1px solid #303030; border-radius: 18px;
|
||||
color: #3ea6ff; font-size: 14px; font-weight: 500; background: rgba(38, 56, 80, 0.3);
|
||||
}
|
||||
|
||||
.user-avatar-wrap {
|
||||
width: 32px; height: 32px; border-radius: 50%; overflow: hidden;
|
||||
cursor: pointer; background: #333; border: 1px solid #444;
|
||||
display: block;
|
||||
}
|
||||
.user-avatar-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||||
|
||||
.header-avatar-letter {
|
||||
width: 100%; height: 100%; display: flex;
|
||||
justify-content: center; align-items: center;
|
||||
color: #fff; font-weight: bold; text-transform: uppercase;
|
||||
font-size: 14px; user-select: none;
|
||||
}
|
||||
|
||||
.btn-logout-mini {
|
||||
font-size: 12px; color: #aaa; background: transparent; border: none; cursor: pointer; padding: 5px;
|
||||
}
|
||||
|
||||
#sub-nav {
|
||||
display: flex; justify-content: center; gap: 10px; padding: 10px 15px;
|
||||
background-color: #202020; border-bottom: 1px solid #2a2a2a;
|
||||
overflow-x: auto; white-space: nowrap; top: 56px; z-index: 99;
|
||||
}
|
||||
#sub-nav::-webkit-scrollbar { display: none; }
|
||||
.nav-chip {
|
||||
display: flex; align-items: center; gap: 6px; padding: 6px 14px;
|
||||
background-color: #222; border: 1px solid #333; color: #fff;
|
||||
border-radius: 8px; font-size: 14px; font-weight: 500;
|
||||
}
|
||||
.nav-chip.active { background-color: #f1f1f1; color: #0f0f0f; }
|
||||
.nav-chip svg { width: 16px; height: 16px; fill: currentColor; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.header-center { display: none; }
|
||||
.mobile-search-trigger { display: block; }
|
||||
.header-right { min-width: auto; }
|
||||
|
||||
body.search-active .header-left { display: none; }
|
||||
body.search-active .header-right { display: none; }
|
||||
|
||||
body.search-active .header-center {
|
||||
display: flex; flex: 1; margin: 0; padding: 0 5px;
|
||||
animation: fadeIn 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
body.search-active .mobile-back-btn { display: block; }
|
||||
body.search-active .yt-search-input { border-radius: 20px 0 0 20px; }
|
||||
body.search-active .yt-search-btn { border-radius: 0 20px 20px 0; background: #2a2a2a; }
|
||||
|
||||
#sub-nav { justify-content: flex-start; padding-left: 10px; }
|
||||
.auth-btn-link span { display: none; }
|
||||
}
|
||||
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
|
||||
|
||||
.auth-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); backdrop-filter: blur(3px); }
|
||||
.auth-content { background-color: #1e1e1e; margin: 10% auto; padding: 30px; border: 1px solid #444; width: 350px; border-radius: 10px; position: relative; color: #eee; }
|
||||
.close-auth { position: absolute; top: 10px; right: 15px; cursor: pointer; font-size: 24px; }
|
||||
.auth-form input { width: 100%; padding: 12px; margin: 10px 0; background: #2a2a2a; border: 1px solid #444; color: #fff; border-radius: 4px; box-sizing: border-box;}
|
||||
.submit-btn { width: 100%; background: #0073aa; color: #fff; padding: 12px; border: none; border-radius: 4px; font-weight: bold; margin-top: 10px; }
|
||||
.auth-switch { text-align: center; margin-top: 15px; font-size: 0.9em; color: #aaa; }
|
||||
.auth-msg { text-align: center; margin-top: 10px; min-height: 20px; font-size: 0.9em; }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<header id="masthead">
|
||||
<div class="header-left">
|
||||
<a href="/" class="logo-text"><strong>Linkkf</strong></a>
|
||||
<div style="display:flex; gap:8px; margin-left:10px; opacity:0.7;">
|
||||
<a href="https://www.youtube.com/@linkkfanime" target="_blank"><img src="https://cdn.jsdelivr.net/gh/756751uosmaqy/wpp@main/yt.png" width="18" height="18"></a>
|
||||
<a href="https://x.com/linkkfcom" target="_blank"><img src="https://cdn.jsdelivr.net/gh/756751uosmaqy/wpp@main/tw.png" width="18" height="18"></a>
|
||||
<a href="https://www.tiktok.com/@linkkfani" target="_blank"><img src="https://cdn.jsdelivr.net/gh/756751uosmaqy/wpp@main/tt.png" width="18" height="18"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="header-center">
|
||||
<form role="search" method="get" class="yt-search-form" action="https://linkkf.live/">
|
||||
<button type="button" class="mobile-back-btn" onclick="toggleMobileSearch(false)">
|
||||
<svg viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"></path></svg>
|
||||
</button>
|
||||
|
||||
<input type="text" class="yt-search-input" placeholder="검색 ..." value="원펀맨" name="s" id="masthead-search-term">
|
||||
|
||||
<button type="submit" class="yt-search-btn">
|
||||
<svg viewBox="0 0 24 24"><path d="M20.87,20.17l-5.59-5.59C16.35,13.35,17,11.75,17,10c0-3.87-3.13-7-7-7s-7,3.13-7,7s3.13,7,7,7c1.75,0,3.35-0.65,4.58-1.71 l5.59,5.59L20.87,20.17z M10,16c-3.31,0-6-2.69-6-6s2.69-6,6-6s6,2.69,6,6S13.31,16,10,16z"></path></svg>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="header-right">
|
||||
<button class="mobile-search-trigger" onclick="toggleMobileSearch(true)">
|
||||
<svg viewBox="0 0 24 24"><path d="M20.87,20.17l-5.59-5.59C16.35,13.35,17,11.75,17,10c0-3.87-3.13-7-7-7s-7,3.13-7,7s3.13,7,7,7c1.75,0,3.35-0.65,4.58-1.71 l5.59,5.59L20.87,20.17z M10,16c-3.31,0-6-2.69-6-6s2.69-6,6-6s6,2.69,6,6S13.31,16,10,16z"></path></svg>
|
||||
</button>
|
||||
|
||||
<div id="guest-buttons" style="display:flex;">
|
||||
<a href="/login/" class="auth-btn-link">
|
||||
<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/></svg>
|
||||
<span>로그인</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div id="user-info" style="display:none; align-items:center; gap:10px;">
|
||||
<a href="/login/" class="user-avatar-wrap" id="header-avatar-link" title="user-info">
|
||||
<img id="header-user-avatar" src="" alt="Avatar">
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav id="sub-nav">
|
||||
<a href="/" class="nav-chip ">
|
||||
<svg viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg> 홈
|
||||
</a>
|
||||
<a href="/rr/" class="nav-chip">
|
||||
<svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg> 리뷰
|
||||
</a>
|
||||
<a href="/gg" class="nav-chip">
|
||||
<svg viewBox="0 0 24 24"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/></svg> 추천
|
||||
</a>
|
||||
<a href="/favorites/" class="nav-chip ">
|
||||
<svg viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg> 찜 목록
|
||||
</a>
|
||||
<a href="/history/" class="nav-chip ">
|
||||
<svg viewBox="0 0 24 24"><path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"/></svg> 시청 기록
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
|
||||
<div id="auth-modal" class="auth-modal">
|
||||
<div class="auth-content">
|
||||
<span class="close-auth" onclick="closeAuthModal()">×</span>
|
||||
|
||||
<div id="form-login" class="auth-form">
|
||||
<h2>로그인</h2>
|
||||
<input type="email" id="login-email" placeholder="이메일">
|
||||
<input type="password" id="login-pass" placeholder="비밀번호">
|
||||
<button onclick="handleLogin()" class="submit-btn">로그인</button>
|
||||
<p class="auth-switch">계정이 없으신가요? <a href="#" onclick="switchAuth('register')">회원가입</a></p>
|
||||
</div>
|
||||
|
||||
<div id="form-register" class="auth-form" style="display:none;">
|
||||
<h2>회원가입</h2>
|
||||
<input type="text" id="reg-name" placeholder="닉네임">
|
||||
<input type="email" id="reg-email" placeholder="이메일">
|
||||
<input type="password" id="reg-pass" placeholder="비밀번호">
|
||||
<button onclick="handleRegister()" class="submit-btn">회원가입</button>
|
||||
<p class="auth-switch">이미 계정이 있으신가요? <a href="#" onclick="switchAuth('login')">로그인</a></p>
|
||||
</div>
|
||||
|
||||
<p id="auth-msg" class="auth-msg"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const AUTH_API = 'https://ro2.ani19962004.top/api/auth.php';
|
||||
|
||||
function toggleMobileSearch(show) {
|
||||
if (show) {
|
||||
document.body.classList.add('search-active');
|
||||
setTimeout(() => document.getElementById('masthead-search-term').focus(), 100);
|
||||
} else {
|
||||
document.body.classList.remove('search-active');
|
||||
}
|
||||
}
|
||||
|
||||
function stringToHeaderColor(str) {
|
||||
let hash = 0; for (let i = 0; i < str.length; i++) hash = str.charCodeAt(i) + ((hash << 5) - hash);
|
||||
const c = (hash & 0x00FFFFFF).toString(16).toUpperCase();
|
||||
return '#' + '00000'.substring(0, 6 - c.length) + c;
|
||||
}
|
||||
|
||||
function createHeaderLetterAvatar(name, container) {
|
||||
const letter = name ? name.charAt(0) : 'U';
|
||||
const div = document.createElement('div');
|
||||
div.className = 'header-avatar-letter';
|
||||
div.textContent = letter;
|
||||
div.style.backgroundColor = stringToHeaderColor(name || 'User');
|
||||
container.appendChild(div);
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const userStr = localStorage.getItem('anime_user');
|
||||
const guestBtns = document.getElementById('guest-buttons');
|
||||
const userInfo = document.getElementById('user-info');
|
||||
|
||||
if(userStr) {
|
||||
const user = JSON.parse(userStr);
|
||||
if (guestBtns) guestBtns.style.display = 'none';
|
||||
if (userInfo) {
|
||||
userInfo.style.display = 'flex';
|
||||
const avatarWrap = document.getElementById('header-avatar-link');
|
||||
const avatarImg = document.getElementById('header-user-avatar');
|
||||
const oldLetter = avatarWrap.querySelector('.header-avatar-letter');
|
||||
if(oldLetter) oldLetter.remove();
|
||||
|
||||
if (user.avatar_path && user.avatar_path.length > 5) {
|
||||
avatarImg.style.display = 'block';
|
||||
avatarImg.src = user.avatar_path;
|
||||
avatarImg.onerror = function() {
|
||||
this.style.display = 'none';
|
||||
createHeaderLetterAvatar(user.name, avatarWrap);
|
||||
};
|
||||
} else {
|
||||
avatarImg.style.display = 'none';
|
||||
createHeaderLetterAvatar(user.name, avatarWrap);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (guestBtns) guestBtns.style.display = 'flex';
|
||||
if (userInfo) userInfo.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
function showAuthModal(type) { document.getElementById('auth-modal').style.display = 'block'; switchAuth(type); }
|
||||
function closeAuthModal() { document.getElementById('auth-modal').style.display = 'none'; }
|
||||
function switchAuth(type) { document.getElementById('form-login').style.display = (type=='login')?'block':'none'; document.getElementById('form-register').style.display = (type=='register')?'block':'none'; document.getElementById('auth-msg').textContent = ''; }
|
||||
async function handleLogin(){ /* ... ... */ }
|
||||
async function handleRegister(){ /* ... ... */ }
|
||||
|
||||
function doLogout(){ if(confirm('로그아웃 ? 0.o ?')){localStorage.removeItem('anime_user'); window.location.href='/';}}
|
||||
|
||||
</script>
|
||||
|
||||
<div id="body">
|
||||
<title>원펀맨 애니 자막 Linkkf</title>
|
||||
|
||||
<style>
|
||||
|
||||
#primary .entry-header {
|
||||
background: none; border: none; padding: 0 0 15px 0;
|
||||
margin-bottom: 25px; border-bottom: 3px solid #0073aa;
|
||||
display: flex; justify-content: space-between; align-items: flex-end;
|
||||
}
|
||||
#primary .entry-title {
|
||||
color: #ffffff; font-size: 2.2em; font-weight: 700;
|
||||
margin: 0; padding: 0; line-height: 1.3;
|
||||
}
|
||||
#primary .search-total-count {
|
||||
font-size: 1.1em; font-weight: 500; color: #aaa; margin-top: 5px;
|
||||
}
|
||||
|
||||
.external-search-container {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
border: none;
|
||||
margin: 30px auto;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
#external-search-form {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#external-search-input {
|
||||
flex-grow: 1;
|
||||
padding: 10px 20px;
|
||||
background-color: #121212;
|
||||
color: #fff;
|
||||
border: 1px solid #303030;
|
||||
border-right: none;
|
||||
border-radius: 40px 0 0 40px;
|
||||
font-size: 1.1em;
|
||||
outline: none;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
|
||||
#external-search-input:focus {
|
||||
border-color: #1c62b9;
|
||||
box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
#external-search-form button {
|
||||
padding: 10px 25px;
|
||||
background-color: #222222;
|
||||
color: #aaa;
|
||||
border: 1px solid #303030;
|
||||
cursor: pointer;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#external-search-form button:hover {
|
||||
background-color: #333333;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
.ext-json-grid { display: grid; gap: 15px; margin-top: 20px; grid-template-columns: repeat(2, 1fr); }
|
||||
@media (min-width: 768px) { .ext-json-grid { grid-template-columns: repeat(4, 1fr); } }
|
||||
|
||||
.ext-json-grid .loading, .ext-json-grid .error {
|
||||
font-style: italic; color: #777; font-size: 1.2em; padding: 20px 0; grid-column: 1 / -1; text-align: center;
|
||||
}
|
||||
.ext-json-grid .error { color: #d9534f; }
|
||||
|
||||
|
||||
.ext-json-item { background-color: #2a2a2a; border-radius: 8px; overflow: hidden; border: 1px solid #333; transition: transform 0.2s ease; }
|
||||
.ext-json-item:hover { transform: translateY(-5px); }
|
||||
.ext-json-item a { text-decoration: none; }
|
||||
|
||||
.ext-json-thumb { position: relative; display: block; aspect-ratio: 16 / 9; background-color: #1a1a1a; }
|
||||
.ext-json-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||||
|
||||
.ext-json-noti { position: absolute; top: 8px; left: 8px; background-color: #5bb7fe; color: white; padding: 3px 8px; border-radius: 4px; font-size: 0.8em; font-weight: bold; z-index: 2; }
|
||||
|
||||
.ext-json-info { padding: 12px; }
|
||||
.ext-json-name { font-size: 0.9em; color: #eee; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
|
||||
.ext-json-info .ext-json-meta { font-size: 0.8em; color: #999; margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.ext-json-info .ext-json-meta .ext-json-season { margin-left: 5px; padding-left: 5px; border-left: 1px solid #555; }
|
||||
|
||||
|
||||
@keyframes skeleton-shimmer {
|
||||
0% { background-position: -200% 0; }
|
||||
100% { background-position: 200% 0; }
|
||||
}
|
||||
|
||||
.skeleton-item {
|
||||
background-color: #2a2a2a;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #333;
|
||||
}
|
||||
|
||||
.skeleton-animate {
|
||||
background: #2a2a2a;
|
||||
background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: skeleton-shimmer 1.5s infinite linear;
|
||||
}
|
||||
|
||||
.skeleton-thumb {
|
||||
aspect-ratio: 16 / 9;
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.skeleton-info { padding: 12px; }
|
||||
|
||||
.skeleton-text {
|
||||
height: 14px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.skeleton-title { width: 85%; height: 18px; margin-bottom: 12px; }
|
||||
.skeleton-meta { width: 50%; }
|
||||
/* ---------------------------- */
|
||||
|
||||
/* Pagination */
|
||||
#pagination-container.pagination-dark { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 30px; padding: 15px; background: #2a2a2a; border-radius: 8px; font-family: Arial, sans-serif; border: 1px solid #333; }
|
||||
#pagination-container.pagination-dark button { padding: 12px 12px; background-color: #444; color: #eee; border: 1px solid #555; border-radius: 4px; cursor: pointer; font-size: 0.9em; }
|
||||
#pagination-container.pagination-dark button:hover:not(:disabled) { background-color: #0073aa; color: #fff; border-color: #0073aa; }
|
||||
#pagination-container.pagination-dark button:disabled { background-color: #333; color: #777; border-color: #444; cursor: not-allowed; }
|
||||
#pagination-container.pagination-dark .page-info { color: #ccc; font-size: 0.9em; }
|
||||
#pagination-container.pagination-dark input[type="number"] { width: 50px; padding: 7px; text-align: center; background-color: #333; color: #fff; border: 1px solid #555; border-radius: 4px; margin: 0 5px; -moz-appearance: textfield; }
|
||||
#pagination-container.pagination-dark input[type="number"]::-webkit-outer-spin-button, #pagination-container.pagination-dark input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
|
||||
</style>
|
||||
|
||||
<div id="primary" class="content-area">
|
||||
<main id="main" class="site-main">
|
||||
|
||||
<article>
|
||||
<header class="entry-header">
|
||||
<h1 class="entry-title" id="search-page-title">검색: 원펀맨</h1>
|
||||
<span class="search-total-count" id="search-total-count-display" style="display: none;"></span>
|
||||
</header>
|
||||
|
||||
<div class="entry-content">
|
||||
|
||||
<div class="external-search-container">
|
||||
<form id="external-search-form" action="https://linkkf.live/" method="get">
|
||||
<input type="text" name="s" id="external-search-input"
|
||||
placeholder="......"
|
||||
value="원펀맨" required>
|
||||
<button type="submit"> 검색 </button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="results-grid" class="ext-json-grid">
|
||||
</div>
|
||||
|
||||
<div id="pagination-container" class="pagination-dark" style="display: none;">
|
||||
<button id="page-first" disabled>« « «</button>
|
||||
<button id="page-prev" disabled>‹ </button>
|
||||
<span class="page-info">
|
||||
page <input type="number" id="page-input" min="1" value="1" disabled> / <span id="page-total">1</span>
|
||||
</span>
|
||||
<button id="page-next" disabled> ›</button>
|
||||
<button id="page-last" disabled> » » »</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
const API_SEARCH_URL = 'https://linkkf.5imgdarr.top/api/search.php';
|
||||
const POSTS_PER_PAGE = 20;
|
||||
|
||||
// DOM Elements
|
||||
const searchForm = document.getElementById('external-search-form');
|
||||
const searchInput = document.getElementById('external-search-input');
|
||||
const pageTitle = document.getElementById('search-page-title');
|
||||
|
||||
const resultsContainer = document.getElementById('results-grid');
|
||||
const paginationContainer = document.getElementById('pagination-container');
|
||||
const btnFirst = document.getElementById('page-first');
|
||||
const btnPrev = document.getElementById('page-prev');
|
||||
const btnNext = document.getElementById('page-next');
|
||||
const btnLast = document.getElementById('page-last');
|
||||
const pageInput = document.getElementById('page-input');
|
||||
const pageTotal = document.getElementById('page-total');
|
||||
const totalCountDisplay = document.getElementById('search-total-count-display');
|
||||
|
||||
let currentKeyword = "원펀맨";
|
||||
let currentPage = 1;
|
||||
let totalPages = 1;
|
||||
|
||||
|
||||
function showSkeleton() {
|
||||
|
||||
let skeletonHTML = '';
|
||||
for(let i=0; i<8; i++) {
|
||||
skeletonHTML += `
|
||||
<div class="skeleton-item">
|
||||
<div class="skeleton-thumb skeleton-animate"></div>
|
||||
<div class="skeleton-info">
|
||||
<div class="skeleton-text skeleton-title skeleton-animate"></div>
|
||||
<div class="skeleton-text skeleton-meta skeleton-animate"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
resultsContainer.innerHTML = skeletonHTML;
|
||||
}
|
||||
// ---------------------------------
|
||||
|
||||
function getPageFromURL() {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const pageFromUrl = parseInt(urlParams.get('page'), 10);
|
||||
if (!isNaN(pageFromUrl) && pageFromUrl > 0) return pageFromUrl;
|
||||
return 1;
|
||||
}
|
||||
|
||||
function updateURL(keyword, page) {
|
||||
const newUrl = new URL(window.location.href);
|
||||
newUrl.searchParams.set('s', keyword);
|
||||
|
||||
if (page > 1) {
|
||||
newUrl.searchParams.set('page', page);
|
||||
} else {
|
||||
newUrl.searchParams.delete('page');
|
||||
}
|
||||
|
||||
if (newUrl.href !== window.location.href) {
|
||||
history.pushState({s: keyword, page: page}, '', newUrl.href);
|
||||
}
|
||||
|
||||
pageTitle.textContent = ' o.o? ' + keyword;
|
||||
}
|
||||
|
||||
async function fetchResults(page) {
|
||||
if (!currentKeyword) {
|
||||
resultsContainer.innerHTML = '<p class="error">....</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
if (page < 1) page = 1;
|
||||
if (page > totalPages && totalPages > 1) page = totalPages;
|
||||
currentPage = page;
|
||||
|
||||
updateURL(currentKeyword, page);
|
||||
|
||||
showSkeleton();
|
||||
|
||||
paginationContainer.style.display = 'none';
|
||||
totalCountDisplay.style.display = 'none';
|
||||
|
||||
const params = new URLSearchParams();
|
||||
params.append('keyword', currentKeyword);
|
||||
params.append('page', page);
|
||||
params.append('limit', POSTS_PER_PAGE);
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_SEARCH_URL}?${params.toString()}`);
|
||||
if (!response.ok) { throw new Error(` HTTP: ${response.status}`); }
|
||||
const data = await response.json();
|
||||
|
||||
if (data.status === 'success') {
|
||||
displayResults(data.data);
|
||||
displayPagination(data.pagination);
|
||||
|
||||
if (data.pagination.total_results != null) {
|
||||
totalCountDisplay.textContent = `( + ${data.pagination.total_results} anime )`;
|
||||
totalCountDisplay.style.display = 'block';
|
||||
}
|
||||
} else {
|
||||
resultsContainer.innerHTML = '<p class="error"> ....</p>';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(' :', error);
|
||||
resultsContainer.innerHTML = `<p class="error"> ....0.o </p>`;
|
||||
}
|
||||
}
|
||||
|
||||
function displayResults(items) {
|
||||
if (!items || items.length === 0) {
|
||||
resultsContainer.innerHTML = '<p class="error"> ...</p>';
|
||||
return;
|
||||
}
|
||||
let htmlOutput = '';
|
||||
items.forEach(item => {
|
||||
const postUrl = `https://linkkf.live/${item.postid}`;
|
||||
const thumbHtml = item.thumb ? `<img src="https://rez1.ims1.top/350x/${item.thumb}" alt="${item.name}" loading="lazy">` : '';
|
||||
const notiHtml = item.postnoti ? `<span class="ext-json-noti">${item.postnoti}</span>` : '';
|
||||
|
||||
const year = item.year || 'N/A';
|
||||
const season = item.seasontype || 'N/A';
|
||||
|
||||
htmlOutput += `
|
||||
<div class="ext-json-item">
|
||||
<a href="${postUrl}" title="${item.name}">
|
||||
<div class="ext-json-thumb">${thumbHtml}${notiHtml}</div>
|
||||
<div class="ext-json-info">
|
||||
<h3 class="ext-json-name">${item.name}</h3>
|
||||
<div class="ext-json-meta">
|
||||
<span class="ext-json-year">${year}</span>
|
||||
<span class="ext-json-season">${season}</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>`;
|
||||
});
|
||||
resultsContainer.innerHTML = htmlOutput;
|
||||
}
|
||||
|
||||
function displayPagination(pagination) {
|
||||
const { current_page, total_pages } = pagination;
|
||||
currentPage = current_page; totalPages = total_pages;
|
||||
if (total_pages <= 1) { paginationContainer.style.display = 'none'; return; }
|
||||
|
||||
paginationContainer.style.display = 'flex';
|
||||
pageInput.value = current_page; pageInput.max = total_pages; pageTotal.textContent = total_pages;
|
||||
|
||||
const isFirstPage = (current_page === 1);
|
||||
btnFirst.disabled = isFirstPage; btnPrev.disabled = isFirstPage;
|
||||
const isLastPage = (current_page === total_pages);
|
||||
btnNext.disabled = isLastPage; btnLast.disabled = isLastPage;
|
||||
pageInput.disabled = false;
|
||||
}
|
||||
|
||||
searchForm.addEventListener('submit', function(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const newKeyword = searchInput.value.trim();
|
||||
if (newKeyword) {
|
||||
currentKeyword = newKeyword;
|
||||
fetchResults(1);
|
||||
}
|
||||
});
|
||||
|
||||
btnFirst.addEventListener('click', () => { if (currentPage > 1) fetchResults(1); });
|
||||
btnPrev.addEventListener('click', () => { if (currentPage > 1) fetchResults(currentPage - 1); });
|
||||
btnNext.addEventListener('click', () => { if (currentPage < totalPages) fetchResults(currentPage + 1); });
|
||||
btnLast.addEventListener('click', () => { if (currentPage < totalPages) fetchResults(totalPages); });
|
||||
pageInput.addEventListener('keydown', (event) => {
|
||||
if (event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
let targetPage = parseInt(pageInput.value, 10);
|
||||
if (isNaN(targetPage)) { pageInput.value = currentPage; return; }
|
||||
if (targetPage < 1) targetPage = 1;
|
||||
if (targetPage > totalPages) targetPage = totalPages;
|
||||
fetchResults(targetPage);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
window.addEventListener('popstate', function(event) {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const page = parseInt(urlParams.get('page'), 10) || 1;
|
||||
const keyword = urlParams.get('s') || '';
|
||||
|
||||
if (keyword) {
|
||||
currentKeyword = keyword;
|
||||
searchInput.value = keyword;
|
||||
|
||||
|
||||
showSkeleton();
|
||||
|
||||
const params = new URLSearchParams();
|
||||
params.append('keyword', currentKeyword);
|
||||
params.append('page', page);
|
||||
params.append('limit', POSTS_PER_PAGE);
|
||||
|
||||
fetch(`${API_SEARCH_URL}?${params.toString()}`)
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
if (data.status === 'success') {
|
||||
displayResults(data.data);
|
||||
displayPagination(data.pagination);
|
||||
if (data.pagination.total_results != null) {
|
||||
totalCountDisplay.textContent = `( + ${data.pagination.total_results} anime )`;
|
||||
totalCountDisplay.style.display = 'block';
|
||||
}
|
||||
} else { resultsContainer.innerHTML = '<p class="error"> 0o0 .</p>'; }
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const initialPage = getPageFromURL();
|
||||
if (currentKeyword) {
|
||||
fetchResults(initialPage);
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<nav id="head-menu" role="navigation">
|
||||
<ul>
|
||||
|
||||
<li> <a href="/" rel="home"style="
|
||||
height: 30px;"> <span style='font-size:13px;'>😀</span> </br> <strong>메인</strong></a> </li>
|
||||
<li> <a href="https://linkkf.live/anime-list/" rel="home"style="
|
||||
height: 30px;
|
||||
"> <span style='font-size:13px;'>😐</span> </br> <strong>신작</strong></a> </li>
|
||||
|
||||
<li> <a href="https://linkkf.live/menulist" rel="home"style="
|
||||
height: 30px;
|
||||
"> <span style='font-size:13px;'>😶</span> </br> <strong>장르</strong></a> </li>
|
||||
|
||||
|
||||
|
||||
<li> <a href="https://linkkf.live/topanime" rel="home"style="
|
||||
height: 30px;
|
||||
"> <span style='font-size:13px;'>🌟</span> </br> <strong>TOP</strong></a> </li>
|
||||
|
||||
|
||||
<li> <a href="https://linkkf.tv" rel="home"style="
|
||||
height: 30px;
|
||||
"> <span style='font-size:13px;'> 😆 </span> </br> <strong>링크2</strong></a> </li>
|
||||
|
||||
</ul></nav>
|
||||
|
||||
|
||||
<article style="height:53px;width:100%px;">
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div id="toast-notification" class="toast-container">
|
||||
<div class="toast-icon"></div>
|
||||
<div class="toast-message"> 0.o </div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
.toast-container {
|
||||
position: fixed;
|
||||
bottom: 130px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(100px);
|
||||
background-color: #1e1e1e;
|
||||
color: #fff;
|
||||
padding: 12px 25px;
|
||||
border-radius: 50px;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
z-index: 9999;
|
||||
opacity: 0;
|
||||
transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
|
||||
border: 1px solid #333;
|
||||
min-width: 250px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toast-container.show {
|
||||
transform: translateX(-50%) translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.toast-icon {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
|
||||
.toast-success .toast-icon { color: #4caf50; }
|
||||
.toast-error .toast-icon { color: #f44336; }
|
||||
.toast-info .toast-icon { color: #2196f3; }
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,5 +1,5 @@
|
||||
{% extends "base.html" %} {% block content %}
|
||||
<div id="anime_downloader_wrapper">
|
||||
<div id="anime_downloader_wrapper" style="max-width: 100%;">
|
||||
<div id="preloader">
|
||||
<div class='demo'>
|
||||
<!-- <div class="loader-inner">-->
|
||||
@@ -53,6 +53,8 @@
|
||||
};
|
||||
|
||||
const wait3seconds = function () {
|
||||
// Force parent container to be fluid to allow full width
|
||||
$("#main_container").removeClass("container").addClass("container-fluid");
|
||||
// REFERENCE: https://www.w3schools.com/jsref/met_win_settimeout.asp
|
||||
const result = setTimeout(dismissLoadingScreen, 2000);
|
||||
};
|
||||
@@ -95,76 +97,77 @@
|
||||
|
||||
function make_program(data) {
|
||||
current_data = data;
|
||||
{#$("body").css({"background":"url("+data.poster_url+")"})#}
|
||||
|
||||
// console.log('current_data:: ', data)
|
||||
str = "";
|
||||
tmp = '<div class="form-inline w-100">';
|
||||
tmp += m_button("check_download_btn", "선택 다운로드 추가", []);
|
||||
tmp += m_button("all_check_on_btn", "전체 선택", []);
|
||||
tmp += m_button("all_check_off_btn", "전체 해제", []);
|
||||
tmp += m_button("down_subtitle_btn", "자막만 전체 받기", [])
|
||||
tmp +=
|
||||
' <input id="new_title" name="new_title" class="form-control form-control-sm" value="' +
|
||||
data.title +
|
||||
'">';
|
||||
tmp += "</div>";
|
||||
tmp += '<div class="form-inline">';
|
||||
tmp += m_button("apply_new_title_btn", "저장폴더명 변경", []);
|
||||
tmp +=
|
||||
' <input id="new_season" name="new_season" class="form-control form-control-sm" value="' +
|
||||
data.season +
|
||||
'">';
|
||||
tmp += m_button("apply_new_season_btn", "시즌 변경 (숫자만 가능)", []);
|
||||
tmp += m_button("search_tvdb_btn", "TVDB", []);
|
||||
tmp += m_button("add_whitelist", "스케쥴링 추가", []);
|
||||
|
||||
tmp += "</div>";
|
||||
tmp = m_button_group(tmp);
|
||||
str += tmp;
|
||||
// program
|
||||
// str += m_hr_black();
|
||||
str += "<div class='card p-lg-5 mt-md-3 p-md-3 border-light'>"
|
||||
|
||||
str += m_row_start(0);
|
||||
tmp = "";
|
||||
if (data.poster_url != null)
|
||||
tmp = '<img src="' + data.poster_url + '" class="img-fluid">';
|
||||
str += m_col(3, tmp);
|
||||
tmp = "";
|
||||
tmp += m_row_start(0);
|
||||
tmp += m_col(3, "제목", "right");
|
||||
tmp += m_col(9, data.title);
|
||||
tmp += m_row_end();
|
||||
tmp += m_row_start(0);
|
||||
tmp += m_col(3, "시즌", "right");
|
||||
tmp += m_col(9, data.season);
|
||||
tmp += m_row_end();
|
||||
for (i in data.detail) {
|
||||
tmp += m_row_start(0);
|
||||
key = Object.keys(data.detail[i])[0];
|
||||
value = data.detail[i][key];
|
||||
tmp += m_col(3, key, "right");
|
||||
tmp += m_col(9, value);
|
||||
tmp += m_row_end();
|
||||
}
|
||||
|
||||
str += m_col(9, tmp);
|
||||
str += m_row_end();
|
||||
|
||||
// str += m_hr_black();
|
||||
str += "</div>"
|
||||
|
||||
// 에피소드 카드 그리드 레이아웃
|
||||
let str = "";
|
||||
|
||||
// 1. Info Card (Top)
|
||||
str += `<div class='card p-4 mb-4 border-light' style="background: rgba(30,30,40,0.6); backdrop-filter: blur(10px);">`;
|
||||
str += `<div class="row">`;
|
||||
|
||||
// Poster
|
||||
str += `<div class="col-md-3 text-center mb-3 mb-md-0">`;
|
||||
if (data.poster_url) {
|
||||
str += `<img src="${data.poster_url}" class="img-fluid rounded shadow-lg" style="max-height: 350px; width: auto;">`;
|
||||
}
|
||||
str += `</div>`;
|
||||
|
||||
// Details
|
||||
str += `<div class="col-md-9">`;
|
||||
str += `<h2 class="font-weight-bold text-white mb-2">${data.title}</h2>`;
|
||||
str += `<div class="mb-4">`;
|
||||
str += `<span class="badge badge-primary mr-2" style="font-size: 1em; padding: 6px 12px;">Season ${data.season}</span>`;
|
||||
str += `</div>`;
|
||||
|
||||
// Table for details
|
||||
str += `<div class="row mb-4" style="font-size: 0.95em; color: #ccc;">`;
|
||||
if(data.detail) {
|
||||
for(let i in data.detail) {
|
||||
const key = Object.keys(data.detail[i])[0];
|
||||
const value = data.detail[i][key];
|
||||
str += `<div class="col-md-6 mb-2"><span class="font-weight-bold text-info mr-2">${key}:</span> <span class="text-light">${value}</span></div>`;
|
||||
}
|
||||
}
|
||||
str += `</div>`; // End detail row
|
||||
|
||||
// Actions Toolbar
|
||||
str += `<div class="d-flex flex-wrap align-items-center gap-2 p-3 rounded" style="background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.05);">`;
|
||||
|
||||
// Standard Actions
|
||||
str += `<button id="check_download_btn" class="btn btn-primary btn-sm mr-2"><i class="fa fa-download"></i> 선택 다운로드</button>`;
|
||||
str += `<button id="all_check_on_btn" class="btn btn-outline-light btn-sm mr-1">전체 선택</button>`;
|
||||
str += `<button id="all_check_off_btn" class="btn btn-outline-secondary btn-sm mr-3">해제</button>`;
|
||||
str += `<button id="down_subtitle_btn" class="btn btn-outline-warning btn-sm mr-3">자막만 다운로드</button>`;
|
||||
|
||||
// Scheduling (Heart)
|
||||
str += `<button id="add_whitelist" class="btn btn-outline-danger btn-sm mr-3" style="min-width: 120px;"><i class="bi bi-heart"></i> 스케쥴링 추가</button>`;
|
||||
|
||||
str += `</div>`; // End Action Toolbar Main
|
||||
|
||||
// Edit Tools (Secondary Toolbar)
|
||||
str += `<div class="d-flex flex-wrap align-items-center gap-2 mt-2 p-2 rounded" style="">`;
|
||||
str += `<span class="text-muted small mr-2">저장 옵션:</span>`;
|
||||
str += `<input id="new_title" class="form-control form-control-sm mr-1" style="width:200px; background:#222; border:1px solid #444; color:#ddd;" value="${data.title}">`;
|
||||
str += `<button id="apply_new_title_btn" class="btn btn-dark btn-sm mr-3">폴더명 변경</button>`;
|
||||
str += `<input id="new_season" class="form-control form-control-sm mr-1" style="width:60px; background:#222; border:1px solid #444; color:#ddd;" value="${data.season}">`;
|
||||
str += `<button id="apply_new_season_btn" class="btn btn-dark btn-sm mr-2">시즌 변경</button>`;
|
||||
str += `<button id="search_tvdb_btn" class="btn btn-dark btn-sm">TVDB 확인</button>`;
|
||||
str += `</div>`;
|
||||
|
||||
|
||||
str += `</div>`; // End Col-9
|
||||
str += `</div>`; // End Row
|
||||
str += `</div>`; // End Card
|
||||
|
||||
// 2. Episode List
|
||||
str += '<div class="episode-list-container">';
|
||||
for (i in data.episode) {
|
||||
for (let i in data.episode) {
|
||||
str += '<div class="episode-card">';
|
||||
str += '<div class="episode-thumb">';
|
||||
str += '<span class="episode-num">' + (parseInt(i) + 1) + '화</span>';
|
||||
str += '</div>';
|
||||
str += '<div class="episode-info">';
|
||||
str += '<div class="episode-title">' + data.episode[i].title + '</div>';
|
||||
str += '<div class="episode-filename">' + data.episode[i].filename + '</div>';
|
||||
str += '<div class="episode-filename" title="' + data.episode[i].filename + '">' + data.episode[i].filename + '</div>';
|
||||
str += '<div class="episode-actions">';
|
||||
str += '<input id="checkbox_' + i + '" name="checkbox_' + i + '" type="checkbox" checked data-toggle="toggle" data-on="선택" data-off="-" data-onstyle="success" data-offstyle="secondary" data-size="small">';
|
||||
str += m_button("add_queue_btn", "다운로드", [{key: "idx", value: i}]);
|
||||
@@ -173,6 +176,7 @@
|
||||
str += '</div>';
|
||||
}
|
||||
str += '</div>';
|
||||
|
||||
document.getElementById("episode_list").innerHTML = str;
|
||||
$('input[id^="checkbox_"]').bootstrapToggle();
|
||||
}
|
||||
@@ -243,6 +247,33 @@
|
||||
});
|
||||
|
||||
|
||||
$("body").on('click', '#add_whitelist', function (e) {
|
||||
e.preventDefault();
|
||||
const code = document.getElementById("code").value || params.code;
|
||||
const $btn = $(this);
|
||||
$.ajax({
|
||||
url: '/' + package_name + '/ajax/' + sub + '/add_whitelist',
|
||||
type: "POST",
|
||||
cache: false,
|
||||
data: JSON.stringify({data_code: code}),
|
||||
contentType: "application/json;charset=UTF-8",
|
||||
dataType: "json",
|
||||
success: function (ret) {
|
||||
if (ret.ret) {
|
||||
$.notify('<strong>스케쥴링 목록에 추가하였습니다.</strong>', {type: 'success'});
|
||||
$btn.html('<i class="bi bi-heart-fill"></i> 추가됨').removeClass('btn-outline-danger').addClass('btn-danger');
|
||||
} else {
|
||||
if (ret.log == "이미 추가되어 있습니다.") {
|
||||
$.notify('<strong>이미 추가되어 있습니다.</strong>', {type: 'warning'});
|
||||
$btn.html('<i class="bi bi-heart-fill"></i> 추가됨').removeClass('btn-outline-danger').addClass('btn-danger');
|
||||
} else {
|
||||
$.notify('<strong>추가 실패</strong><br>' + ret.log, {type: 'warning'});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$("body").on('click', '#go_ohli24_btn', function (e) {
|
||||
e.preventDefault();
|
||||
window.open("{{arg['ohli24_url']}}", "_blank");
|
||||
|
||||
@@ -52,7 +52,7 @@
|
||||
<div id="airing_list"></div>
|
||||
</form>
|
||||
<form id="screen_movie_list_form">
|
||||
<div id="screen_movie_list" class="container"></div>
|
||||
<div id="screen_movie_list" class="container-fluid px-0"></div>
|
||||
</form>
|
||||
{#
|
||||
<div class="text-center">
|
||||
@@ -174,7 +174,7 @@
|
||||
dataType: "json",
|
||||
success: (ret) => {
|
||||
current_screen_movie_data = ret
|
||||
console.log('ret::>', ret)
|
||||
// console.log('ret::>', ret)
|
||||
|
||||
if (current_screen_movie_data !== '') {
|
||||
if (type === "ing") {
|
||||
@@ -191,7 +191,7 @@
|
||||
make_screen_movie_list(ret.data, page)
|
||||
}
|
||||
div_visible = true
|
||||
console.log(div_visible)
|
||||
// console.log(div_visible)
|
||||
}
|
||||
next_page = page + 1
|
||||
}
|
||||
@@ -260,45 +260,44 @@
|
||||
function make_search_result_list(data, page) {
|
||||
let str = ''
|
||||
let tmp = ''
|
||||
|
||||
console.log(data.anime_list, page)
|
||||
|
||||
let list = data.anime_list || data.episode || [];
|
||||
|
||||
str += '<div>';
|
||||
str += '<button type="button" class="btn btn-info">Page <span class="badge bg-warning">' + page + '</span></button>';
|
||||
str += '</div>';
|
||||
// str += '<div class="card-columns">'
|
||||
str += '<div id="inner_screen_movie" class="row infinite-scroll">';
|
||||
for (let i in data.anime_list) {
|
||||
if (data.anime_list[i].wr_id !== '') {
|
||||
|
||||
for (let i in list) {
|
||||
let item = list[i];
|
||||
if (item.wr_id !== undefined && item.wr_id !== '') {
|
||||
const re = /bo_table=([^&]+)/
|
||||
const bo_table = data.anime_list[i].link.match(re)
|
||||
console.log(bo_table)
|
||||
const bo_table = item.link.match(re)
|
||||
if (bo_table != null) {
|
||||
request_url = './request?code=' + data.anime_list[i].code + '&wr_id=' + data.anime_list[i].wr_id + '&bo_table=' + bo_table[1]
|
||||
request_url = './request?code=' + item.code + '&wr_id=' + item.wr_id + '&bo_table=' + bo_table[1]
|
||||
} else {
|
||||
request_url = './request?code=' + data.anime_list[i].code
|
||||
request_url = './request?code=' + item.code
|
||||
}
|
||||
} else {
|
||||
request_url = './request?code=' + data.anime_list[i].code
|
||||
request_url = './request?code=' + item.code
|
||||
}
|
||||
|
||||
tmp = '<div class="col-6 col-sm-4 col-md-3">';
|
||||
tmp += '<div class="card">';
|
||||
tmp += '<img class="card-img-top" src="' + data.anime_list[i].image_link + '" />';
|
||||
tmp += '<img class="card-img-top" src="' + item.image_link + '" style="cursor: pointer" onclick="location.href=\'' + request_url + '\'"/>';
|
||||
tmp += '<div class="card-body">'
|
||||
// {#tmp += '<button id="code_button" data-code="' + data.episode[i].code + '" type="button" class="btn btn-primary code-button bootstrap-tooltip" data-toggle="button" data-tooltip="true" aria-pressed="true" autocomplete="off" data-placement="top">' +#}
|
||||
// {# '<span data-tooltip-text="'+data.episode[i].title+'">' + data.episode[i].code + '</span></button></div>';#}
|
||||
tmp += '<h5 class="card-title">' + data.anime_list[i].title + '</h5>';
|
||||
tmp += '<p class="card-text">' + data.anime_list[i].code + '</p>';
|
||||
tmp += '<a href="' + request_url + '" class="btn btn-primary cut-text">' + data.anime_list[i].title + '</a>';
|
||||
tmp += '<h5 class="card-title">' + item.title + '</h5>';
|
||||
tmp += '<div class="d-flex justify-content-between align-items-center mb-2">';
|
||||
tmp += '<span class="card-text mb-0">' + item.code + '</span>';
|
||||
tmp += '<button id="add_whitelist" name="add_whitelist" class="btn btn-sm btn-favorite" data-code="' + item.code + '"><i class="bi bi-heart-fill"></i></button>';
|
||||
tmp += '</div>';
|
||||
tmp += '<a href="' + request_url + '" class="btn btn-primary cut-text">' + item.title + '</a>';
|
||||
tmp += '</div>';
|
||||
tmp += '</div>';
|
||||
tmp += '</div>';
|
||||
str += tmp
|
||||
|
||||
}
|
||||
str += '</div>';
|
||||
str += '</div><!-- .card-columns -->';
|
||||
str += m_hr_black();
|
||||
|
||||
if (page > 1) {
|
||||
@@ -321,9 +320,9 @@
|
||||
let tmp = "";
|
||||
let new_anime = true;
|
||||
let new_style = ''
|
||||
console.log('page a: ', page)
|
||||
console.log(data)
|
||||
console.log(data.data)
|
||||
// console.log('page a: ', page)
|
||||
// console.log(data)
|
||||
// console.log(data.data)
|
||||
//console.log(data.episode)
|
||||
|
||||
let page_elem = "";
|
||||
@@ -341,8 +340,8 @@
|
||||
str += "</div>";
|
||||
str += '<div id="inner_screen_movie" class="row infinite-scroll">';
|
||||
for (let i in data.data) {
|
||||
console.log(i)
|
||||
console.log(data.data[i])
|
||||
// console.log(i)
|
||||
// console.log(data.data[i])
|
||||
if (data.data[i].postid === data.latest_anime_code) {
|
||||
new_anime = false
|
||||
}
|
||||
@@ -374,12 +373,10 @@
|
||||
// tmp += '<div class="card-body '+ new_anime ? 'new-anime' : '' +'">';
|
||||
tmp += '<div class="card-body">';
|
||||
tmp += '<h5 class="card-title">' + data.data[i].postname + "</h5>";
|
||||
tmp +=
|
||||
'<button id="add_whitelist" name="add_whitelist" class="btn btn-sm btn-favorite mb-1" data-code="' +
|
||||
data.data[i].postid +
|
||||
'"><p class="card-text">' +
|
||||
data.data[i].postid +
|
||||
" <i class=\"bi bi-heart-fill\"></i></p></button>";
|
||||
tmp += '<div class="d-flex justify-content-between align-items-center mb-2">';
|
||||
tmp += '<span class="card-text mb-0">' + data.data[i].postid + '</span>';
|
||||
tmp += '<button id="add_whitelist" name="add_whitelist" class="btn btn-sm btn-favorite" data-code="' + data.data[i].postid + '"><i class="bi bi-heart-fill"></i></button>';
|
||||
tmp += '</div>';
|
||||
tmp +=
|
||||
'<a href="./request?code=' +
|
||||
data.data[i].postid +
|
||||
@@ -440,12 +437,12 @@
|
||||
$("body").on("click", "#btn_search", function (e) {
|
||||
e.preventDefault();
|
||||
let query = $("#input_search").val();
|
||||
console.log(query);
|
||||
// console.log(query);
|
||||
current_cate = "search"
|
||||
current_query = query
|
||||
|
||||
if ($("#input_search").val() === "") {
|
||||
console.log("search keyword nothing");
|
||||
// console.log("search keyword nothing");
|
||||
return false;
|
||||
}
|
||||
|
||||
@@ -458,7 +455,7 @@
|
||||
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
|
||||
success: function (ret) {
|
||||
if (ret.ret) {
|
||||
console.log('ret:::', ret)
|
||||
// console.log('ret:::', ret)
|
||||
make_search_result_list(ret.data, 1);
|
||||
next_page = page + 1
|
||||
} else {
|
||||
@@ -477,29 +474,29 @@
|
||||
|
||||
switch (e.target.id) {
|
||||
case "ing":
|
||||
console.log("ing.....")
|
||||
// console.log("ing.....")
|
||||
|
||||
{#spinner_loading.style.display = "block";#}
|
||||
current_cate = "ing";
|
||||
get_anime_list(1, "ing");
|
||||
break;
|
||||
case "movie":
|
||||
console.log("movie")
|
||||
// console.log("movie")
|
||||
current_cate = "movie";
|
||||
get_anime_screen_movie(1);
|
||||
break;
|
||||
case "complete_anilist":
|
||||
console.log("complete")
|
||||
// console.log("complete")
|
||||
current_cate = "complete";
|
||||
get_complete_anilist(1);
|
||||
break;
|
||||
case "top_view":
|
||||
console.log("top_view")
|
||||
// console.log("top_view")
|
||||
current_cate = "top_view";
|
||||
get_anime_list(1, "top_view");
|
||||
break;
|
||||
default:
|
||||
console.log("default")
|
||||
// console.log("default")
|
||||
spinner_loading.style.display = "block";
|
||||
current_cate = "ing";
|
||||
get_anime_list(1, "ing");
|
||||
@@ -514,7 +511,7 @@
|
||||
$("body").on('click', '#analysis_btn', function (e) {
|
||||
e.preventDefault();
|
||||
const code = document.getElementById("code").value
|
||||
console.log(code)
|
||||
// console.log(code)
|
||||
$.ajax({
|
||||
url: '/' + package_name + '/ajax/' + sub + '/analysis',
|
||||
type: "POST",
|
||||
@@ -524,7 +521,7 @@
|
||||
success: function (ret) {
|
||||
if (ret.ret === 'success' && ret.data != null) {
|
||||
// console.log(ret.code)
|
||||
console.log(ret.data)
|
||||
// console.log(ret.data)
|
||||
make_program(ret.data)
|
||||
} else {
|
||||
$.notify('<strong>분석 실패</strong><br>' + ret.log, {type: 'warning'});
|
||||
@@ -542,8 +539,9 @@
|
||||
|
||||
$("body").on("click", "#add_whitelist", function (e) {
|
||||
e.preventDefault();
|
||||
let data_code = $(this).attr("data-code");
|
||||
console.log(data_code);
|
||||
let $btn = $(this);
|
||||
let data_code = $btn.attr("data-code");
|
||||
|
||||
$.ajax({
|
||||
url: "/" + package_name + "/ajax/" + sub + "/add_whitelist",
|
||||
type: "POST",
|
||||
@@ -553,14 +551,18 @@
|
||||
dataType: "json",
|
||||
success: function (ret) {
|
||||
if (ret.ret) {
|
||||
$.notify("<strong>추가하였습니다.</strong><br>", {
|
||||
$.notify("<strong>추가하였습니다. [" + data_code + "]</strong>", {
|
||||
type: "success",
|
||||
});
|
||||
// make_program(ret);
|
||||
// 시각적 피드백: 하트 색상 변경
|
||||
$btn.addClass('active').css('color', '#ef4444');
|
||||
} else {
|
||||
$.notify("<strong>추가 실패</strong><br>" + ret.log, {
|
||||
$.notify("<strong>" + ret.log + "</strong>", {
|
||||
type: "warning",
|
||||
});
|
||||
if (ret.log === "이미 추가되어 있습니다.") {
|
||||
$btn.addClass('active').css('color', '#ef4444');
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
@@ -579,7 +581,7 @@
|
||||
$("body").on('click', '#add_queue_btn', function (e) {
|
||||
e.preventDefault();
|
||||
data = current_data.episode[$(this).data('idx')];
|
||||
console.log('data:::>', data)
|
||||
// console.log('data:::>', data)
|
||||
$.ajax({
|
||||
url: '/' + package_name + '/ajax/' + sub + '/add_queue',
|
||||
type: "POST",
|
||||
@@ -603,7 +605,7 @@
|
||||
// const el = document.querySelector('img');
|
||||
// const observer = lozad(el); // passing a `NodeList` (e.g. `document.querySelectorAll()`) is also valid
|
||||
// observer.observe();
|
||||
console.log('scroll 세로크기:', document.body.scrollHeight)
|
||||
// console.log('scroll 세로크기:', document.body.scrollHeight)
|
||||
|
||||
const loadNextAnimes = (cate, page, ch) => {
|
||||
// spinner.style.display = "block";
|
||||
@@ -648,7 +650,7 @@
|
||||
.then((response) => {
|
||||
// console.log("Success:", JSON.stringify(response));
|
||||
// {#imagesContainer.appendChild()#}
|
||||
console.log("return page:::> ", String(response.page));
|
||||
// console.log("return page:::> ", String(response.page));
|
||||
// {#page = response.page#}
|
||||
loader.style.display = "block";
|
||||
if (current_cate === 'search') {
|
||||
@@ -658,8 +660,8 @@
|
||||
make_screen_movie_list(response.data, response.page);
|
||||
}
|
||||
|
||||
console.log(document.body.scrollHeight)
|
||||
console.log(ch)
|
||||
// console.log(document.body.scrollHeight)
|
||||
// console.log(ch)
|
||||
window.scrollBy({
|
||||
top: ch + 35,
|
||||
left: 0,
|
||||
@@ -679,9 +681,9 @@
|
||||
const {scrollTop, scrollHeight, clientHeight} = e.target.scrollingElement;
|
||||
if (Math.round(scrollHeight - scrollTop) <= clientHeight + 170) {
|
||||
{#document.getElementById("spinner").style.display = "block";#}
|
||||
console.log("loading");
|
||||
console.log("now page::> ", page);
|
||||
console.log("next_page::> ", String(next_page));
|
||||
// console.log("loading");
|
||||
// console.log("now page::> ", page);
|
||||
// console.log("next_page::> ", String(next_page));
|
||||
loadNextAnimes(current_cate, next_page, clientHeight);
|
||||
/*window.scrollBy({
|
||||
top: e.target.scrollingElement.scrollHeight + 200,
|
||||
@@ -793,400 +795,289 @@
|
||||
></script>
|
||||
|
||||
<style>
|
||||
#anime_downloader_wrapper {
|
||||
font-family: NanumSquareNeo, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Noto Sans, Liberation Sans, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
|
||||
:root {
|
||||
--bg-primary: #0f172a;
|
||||
--bg-secondary: #1e293b;
|
||||
--bg-card: rgba(30, 41, 59, 0.85);
|
||||
--text-primary: #f1f5f9;
|
||||
--text-secondary: #94a3b8;
|
||||
--accent-primary: #60a5fa;
|
||||
--accent-secondary: #818cf8;
|
||||
--accent-success: #34d399;
|
||||
--accent-warning: #fbbf24;
|
||||
--accent-danger: #f87171;
|
||||
--border-color: rgba(148, 163, 184, 0.2);
|
||||
--shadow-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
body {
|
||||
background-image: linear-gradient(90deg, #33242c, #263341, #17273a);
|
||||
|
||||
background: linear-gradient(135deg, var(--bg-primary) 0%, #1a2744 50%, var(--bg-secondary) 100%) !important;
|
||||
min-height: 100vh;
|
||||
font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
|
||||
}
|
||||
|
||||
#anime_downloader_wrapper {
|
||||
|
||||
color: #d6eaf8;
|
||||
color: var(--text-primary);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
button.code-button {
|
||||
min-width: 82px !important;
|
||||
#yommi_wrapper {
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position: relative;
|
||||
display: block;
|
||||
.container, .container-fluid {
|
||||
max-width: 100% !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
[data-tooltip-text]:hover {
|
||||
position: relative;
|
||||
.input-group {
|
||||
max-width: 600px;
|
||||
margin: 0 auto 24px;
|
||||
}
|
||||
|
||||
[data-tooltip-text]:after {
|
||||
-webkit-transition: bottom 0.3s ease-in-out, opacity 0.3s ease-in-out;
|
||||
-moz-transition: bottom 0.3s ease-in-out, opacity 0.3s ease-in-out;
|
||||
transition: bottom 0.3s ease-in-out, opacity 0.3s ease-in-out;
|
||||
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
|
||||
-webkit-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
|
||||
-moz-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
|
||||
box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
|
||||
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
|
||||
color: #ffffff;
|
||||
font-size: 12px;
|
||||
margin-bottom: 10px;
|
||||
padding: 7px 12px;
|
||||
position: absolute;
|
||||
width: auto;
|
||||
min-width: 50px;
|
||||
max-width: 300px;
|
||||
word-wrap: break-word;
|
||||
|
||||
z-index: 9999;
|
||||
|
||||
opacity: 0;
|
||||
left: -9999px;
|
||||
top: 90%;
|
||||
|
||||
content: attr(data-tooltip-text);
|
||||
#input_search {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px 0 0 12px !important;
|
||||
color: var(--text-primary);
|
||||
padding: 14px 20px;
|
||||
font-size: 1rem;
|
||||
backdrop-filter: blur(12px);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
[data-tooltip-text]:hover:after {
|
||||
top: 230%;
|
||||
left: 0;
|
||||
opacity: 1;
|
||||
#input_search:focus {
|
||||
background: rgba(30, 41, 59, 0.95);
|
||||
border-color: var(--accent-primary);
|
||||
box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
[data-tooltip-text]:hover {
|
||||
position: relative;
|
||||
#input_search::placeholder { color: var(--text-secondary); }
|
||||
|
||||
#btn_search {
|
||||
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
|
||||
border: none;
|
||||
border-radius: 0 12px 12px 0 !important;
|
||||
padding: 14px 28px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
[data-tooltip-text]:after {
|
||||
-webkit-transition: bottom 0.3s ease-in-out, opacity 0.3s ease-in-out;
|
||||
-moz-transition: bottom 0.3s ease-in-out, opacity 0.3s ease-in-out;
|
||||
transition: bottom 0.3s ease-in-out, opacity 0.3s ease-in-out;
|
||||
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
|
||||
-webkit-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
|
||||
-moz-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
|
||||
box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
|
||||
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
|
||||
color: #ffffff;
|
||||
font-size: 12px;
|
||||
margin-bottom: 10px;
|
||||
padding: 7px 12px;
|
||||
position: absolute;
|
||||
width: auto;
|
||||
min-width: 50px;
|
||||
max-width: 300px;
|
||||
word-wrap: break-word;
|
||||
|
||||
z-index: 9999;
|
||||
|
||||
opacity: 0;
|
||||
left: -9999px;
|
||||
top: -210% !important;
|
||||
|
||||
content: attr(data-tooltip-text);
|
||||
#btn_search:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(96, 165, 250, 0.4);
|
||||
}
|
||||
|
||||
[data-tooltip-text]:hover:after {
|
||||
top: 130%;
|
||||
left: 0;
|
||||
opacity: 1;
|
||||
#anime_category {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 28px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
#airing_list {
|
||||
display: none;
|
||||
#anime_category .btn {
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
padding: 10px 24px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.cut-text {
|
||||
text-overflow: ellipsis;
|
||||
#anime_category .btn-success { background: linear-gradient(135deg, #10b981, #059669); }
|
||||
#anime_category .btn-success:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4); }
|
||||
#anime_category .btn-primary { background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); }
|
||||
#anime_category .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(96, 165, 250, 0.4); }
|
||||
#anime_category .btn-dark { background: linear-gradient(135deg, #475569, #334155); }
|
||||
#anime_category .btn-dark:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(71, 85, 105, 0.4); }
|
||||
#anime_category .btn-yellow { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #1e293b; }
|
||||
#anime_category .btn-yellow:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(251, 191, 36, 0.4); }
|
||||
|
||||
#screen_movie_list { margin-top: 20px; }
|
||||
|
||||
#page_caption { text-align: center; margin-bottom: 20px; }
|
||||
#page_caption .btn-info { background: linear-gradient(135deg, #06b6d4, #0891b2); border: none; border-radius: 20px; padding: 8px 20px; }
|
||||
#page_caption .badge { background: var(--accent-warning) !important; color: #1e293b; font-weight: 700; }
|
||||
|
||||
.card {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
backdrop-filter: blur(12px);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 20px 40px var(--shadow-color);
|
||||
border-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.card img, .card-img-top {
|
||||
width: 100%;
|
||||
aspect-ratio: 3/4;
|
||||
object-fit: cover;
|
||||
transition: transform 0.4s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.card:hover img { transform: scale(1.05); }
|
||||
|
||||
.card-body {
|
||||
padding: 16px !important;
|
||||
background: linear-gradient(to bottom, transparent, rgba(15, 23, 42, 0.9));
|
||||
}
|
||||
|
||||
.card-title {
|
||||
color: var(--text-primary);
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
padding: 0 !important;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-text { color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 12px; }
|
||||
|
||||
.card .btn-primary {
|
||||
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
padding: 10px 16px;
|
||||
font-weight: 600;
|
||||
font-size: 0.85rem;
|
||||
width: 100%;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.card .btn-primary:hover { box-shadow: 0 4px 15px rgba(96, 165, 250, 0.4); transform: translateY(-2px); }
|
||||
|
||||
button#add_whitelist, .btn-favorite {
|
||||
background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
|
||||
border: none !important;
|
||||
border-radius: 8px !important;
|
||||
padding: 6px 12px !important;
|
||||
color: #1e293b !important;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
button#add_whitelist:hover, .btn-favorite:hover { transform: scale(1.1); box-shadow: 0 4px 15px rgba(251, 191, 36, 0.4); }
|
||||
|
||||
.new-anime { border: 2px solid var(--accent-warning) !important; position: relative; }
|
||||
.new-anime::before {
|
||||
content: 'NEW';
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
background: linear-gradient(135deg, #f87171, #ef4444);
|
||||
color: white;
|
||||
padding: 4px 10px;
|
||||
border-radius: 6px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.badge-on-image {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
/*bottom: 2px; !* position where you want it *!*/
|
||||
right: 2px;
|
||||
padding: 5px 12px;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
background: linear-gradient(135deg, #f87171, #ef4444) !important;
|
||||
padding: 6px 14px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
font-size: 0.8rem;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
#screen_movie_list {
|
||||
margin-top: 10px;
|
||||
#screen_movie_list .row {
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
|
||||
gap: 16px !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
#screen_movie_list .row > div {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
min-width: 0 !important;
|
||||
flex: none !important;
|
||||
padding: 0 !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
padding: 1rem !important;
|
||||
#screen_movie_list .row > div img {
|
||||
max-width: 100% !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
button#add_whitelist {
|
||||
float: right;
|
||||
}
|
||||
|
||||
button.btn-favorite {
|
||||
background-color: #e0ff42;
|
||||
}
|
||||
|
||||
/*.card-columns {*/
|
||||
/* @include media-breakpoint-only(lg) {*/
|
||||
/* column-count: 4;*/
|
||||
/* }*/
|
||||
/* @include media-breakpoint-only(xl) {*/
|
||||
/* column-count: 5;*/
|
||||
/* }*/
|
||||
/*}*/
|
||||
@media (min-width: 576px) {
|
||||
.container {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.card-columns {
|
||||
column-count: 2;
|
||||
column-gap: 1.25rem;
|
||||
}
|
||||
|
||||
.card-columns .card {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.card-columns {
|
||||
column-count: 3;
|
||||
}
|
||||
}
|
||||
|
||||
/* Large devices (desktops, 992px and up) */
|
||||
@media (min-width: 992px) {
|
||||
.card-columns {
|
||||
column-count: 3;
|
||||
}
|
||||
}
|
||||
|
||||
/* Extra large devices (large desktops, 1200px and up) */
|
||||
@media (min-width: 1200px) {
|
||||
.card-columns {
|
||||
column-count: 5;
|
||||
}
|
||||
|
||||
#yommi_wrapper {
|
||||
max-width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.card-columns .card {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.card-columns .card img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button#add_whitelist {
|
||||
/*top: -70px;*/
|
||||
position: relative;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: NanumSquareNeo, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Noto Sans, Liberation Sans, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
|
||||
}
|
||||
|
||||
body {
|
||||
background-image: linear-gradient(90deg, #233f48, #6c6fa2, #768dae);
|
||||
#screen_movie_list .card {
|
||||
max-width: 100% !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
@media (min-width: 576px) { #screen_movie_list .row { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
|
||||
@media (min-width: 768px) { #screen_movie_list .row { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
|
||||
@media (min-width: 992px) { #screen_movie_list .row { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } }
|
||||
@media (min-width: 1200px) { #screen_movie_list .row { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 20px !important; } }
|
||||
#yommi_wrapper { max-width: 100%; padding: 0 20px; overflow-x: hidden; }
|
||||
|
||||
#preloader {
|
||||
/*background-color: green;*/
|
||||
/*color: white;*/
|
||||
/*height: 100vh;*/
|
||||
/*width: 100%;*/
|
||||
/*position: fixed;*/
|
||||
/*z-index: 100;*/
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
background: radial-gradient(#222, #000);
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
background: rgba(15, 23, 42, 0.9);
|
||||
backdrop-filter: blur(8px);
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
inset: 0;
|
||||
z-index: 99999;
|
||||
opacity: 0.5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/*.loader {*/
|
||||
/* background: rgb(0, 0, 0, 0.8);*/
|
||||
/* background: radial-gradient(#222, #000);*/
|
||||
/* bottom: 0;*/
|
||||
/* left: 0;*/
|
||||
/* overflow: hidden;*/
|
||||
/* position: fixed;*/
|
||||
/* right: 0;*/
|
||||
/* top: 0;*/
|
||||
/* z-index: 99999;*/
|
||||
/*}*/
|
||||
.loader-inner, .loader-line-wrap { display: none; }
|
||||
|
||||
.loader-inner {
|
||||
bottom: 0;
|
||||
height: 60px;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.loader-line-wrap {
|
||||
animation: spin 2000ms cubic-bezier(.175, .885, .32, 1.275) infinite;
|
||||
box-sizing: border-box;
|
||||
#preloader::after {
|
||||
content: '';
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transform-origin: 50% 100%;
|
||||
width: 100px;
|
||||
border: 4px solid rgba(96, 165, 250, 0.2);
|
||||
border-top-color: #60a5fa;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
.loader-line {
|
||||
border: 4px solid transparent;
|
||||
border-radius: 100%;
|
||||
box-sizing: border-box;
|
||||
height: 100px;
|
||||
left: 0;
|
||||
margin: 0 auto;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 100px;
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
|
||||
#loading { background: rgba(15, 23, 42, 0.85) !important; backdrop-filter: blur(8px) !important; }
|
||||
#loading img, #loading svg { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; }
|
||||
#loading::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 4px solid rgba(96, 165, 250, 0.2);
|
||||
border-top-color: #60a5fa;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
z-index: 100001;
|
||||
}
|
||||
|
||||
.loader-line-wrap:nth-child(1) {
|
||||
animation-delay: -50ms;
|
||||
}
|
||||
|
||||
.loader-line-wrap:nth-child(2) {
|
||||
animation-delay: -100ms;
|
||||
}
|
||||
|
||||
.loader-line-wrap:nth-child(3) {
|
||||
animation-delay: -150ms;
|
||||
}
|
||||
|
||||
.loader-line-wrap:nth-child(4) {
|
||||
animation-delay: -200ms;
|
||||
}
|
||||
|
||||
.loader-line-wrap:nth-child(5) {
|
||||
animation-delay: -250ms;
|
||||
}
|
||||
|
||||
.loader-line-wrap:nth-child(1) .loader-line {
|
||||
border-color: hsl(0, 80%, 60%);
|
||||
height: 90px;
|
||||
width: 90px;
|
||||
top: 7px;
|
||||
}
|
||||
|
||||
.loader-line-wrap:nth-child(2) .loader-line {
|
||||
border-color: hsl(60, 80%, 60%);
|
||||
height: 76px;
|
||||
width: 76px;
|
||||
top: 14px;
|
||||
}
|
||||
|
||||
.loader-line-wrap:nth-child(3) .loader-line {
|
||||
border-color: hsl(120, 80%, 60%);
|
||||
height: 62px;
|
||||
width: 62px;
|
||||
top: 21px;
|
||||
}
|
||||
|
||||
.loader-line-wrap:nth-child(4) .loader-line {
|
||||
border-color: hsl(180, 80%, 60%);
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
top: 28px;
|
||||
}
|
||||
|
||||
.loader-line-wrap:nth-child(5) .loader-line {
|
||||
border-color: hsl(240, 80%, 60%);
|
||||
height: 34px;
|
||||
width: 34px;
|
||||
top: 35px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0%, 15% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.new-anime {
|
||||
border-color: darksalmon;
|
||||
border-width: 4px;
|
||||
border-style: dashed;
|
||||
|
||||
}
|
||||
|
||||
.card-title {
|
||||
padding: 1rem !important;
|
||||
}
|
||||
|
||||
button#add_whitelist {
|
||||
float: right;
|
||||
}
|
||||
|
||||
button.btn-favorite {
|
||||
background-color: #e0ff42;
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: NanumSquareNeo, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Noto Sans, Liberation Sans, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
|
||||
}
|
||||
|
||||
body {
|
||||
background-image: linear-gradient(90deg, #233f48, #6c6fa2, #768dae);
|
||||
.cut-text { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
|
||||
hr { border-color: var(--border-color); margin: 24px 0; }
|
||||
::-webkit-scrollbar { width: 8px; }
|
||||
::-webkit-scrollbar-track { background: var(--bg-primary); }
|
||||
::-webkit-scrollbar-thumb { background: var(--accent-primary); border-radius: 4px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: var(--accent-secondary); }
|
||||
</style>
|
||||
<link
|
||||
href="{{ url_for('.static', filename='css/bootstrap.min.css') }}"
|
||||
type="text/css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/bootstrap-icons.css"
|
||||
/>
|
||||
<link href="{{ url_for('.static', filename='css/bootstrap.min.css') }}" type="text/css" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/bootstrap-icons.css" />
|
||||
{% endblock %}
|
||||
|
||||
@@ -166,4 +166,44 @@
|
||||
|
||||
|
||||
</script>
|
||||
<style>
|
||||
/* Navigation Menu Override */
|
||||
ul.nav.nav-pills.bg-light {
|
||||
background-color: rgba(30, 41, 59, 0.6) !important;
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 50rem !important;
|
||||
padding: 6px !important;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
|
||||
display: inline-flex !important;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
width: auto !important;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
ul.nav.nav-pills .nav-item {
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
ul.nav.nav-pills .nav-link {
|
||||
border-radius: 50rem !important;
|
||||
padding: 8px 20px !important;
|
||||
color: #94a3b8 !important;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
ul.nav.nav-pills .nav-link:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
color: #fff !important;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
ul.nav.nav-pills .nav-link.active {
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
|
||||
color: #fff !important;
|
||||
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
@@ -411,11 +411,49 @@
|
||||
transform: translate(-50%, -50%);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 3px solid rgba(96, 165, 250, 0.2);
|
||||
border-top-color: #60a5fa;
|
||||
border-color: #60a5fa;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
/* Navigation Menu Override */
|
||||
ul.nav.nav-pills.bg-light {
|
||||
background-color: rgba(30, 41, 59, 0.6) !important;
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 50rem !important;
|
||||
padding: 6px !important;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
|
||||
display: inline-flex !important;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
width: auto !important;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
ul.nav.nav-pills .nav-item {
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
ul.nav.nav-pills .nav-link {
|
||||
border-radius: 50rem !important;
|
||||
padding: 8px 20px !important;
|
||||
color: #94a3b8 !important;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
ul.nav.nav-pills .nav-link:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
color: #fff !important;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
ul.nav.nav-pills .nav-link.active {
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
|
||||
color: #fff !important;
|
||||
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="{{ url_for('.static', filename='js/sjva_ui14.js') }}"></script>
|
||||
|
||||
@@ -20,11 +20,24 @@
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div id="yommi_wrapper" class="container-fluid mt-4 mx-auto" style="max-width: 100%;">
|
||||
<form id="program_list">
|
||||
{{ macros.setting_input_text_and_buttons('code', '작품 Code', [['analysis_btn', '분석'],
|
||||
['go_ohli24_btn', 'Go OHLI24']], desc='예) "https://ohli24.net/c/녹을 먹는 비스코" 이나 "녹을
|
||||
먹는 비스코"') }}
|
||||
<div class="card p-4 mb-4 border-light" style="background: rgba(30,30,40,0.6); backdrop-filter: blur(10px); box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
|
||||
<div class="form-group mb-0">
|
||||
<label for="code" class="text-white font-weight-bold mb-2"><i class="fa fa-search mr-2"></i>작품 Code / 제목</label>
|
||||
<div class="input-group input-group-lg">
|
||||
<input type="text" id="code" name="code" class="form-control border-0" placeholder="URL 또는 제목을 입력하세요 (예: 녹을 먹는 비스코)" style="background: rgba(0,0,0,0.4); color: #fff; box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);">
|
||||
<div class="input-group-append">
|
||||
<button id="analysis_btn" class="btn btn-primary px-4 font-weight-bold" style="box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);">분석</button>
|
||||
<button id="go_ohli24_btn" class="btn btn-outline-light px-3">Go OHLI24</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center mt-2 text-muted small">
|
||||
<i class="fa fa-info-circle mr-1"></i>
|
||||
<span>예) "https://ohli24.net/c/녹을 먹는 비스코" 또는 "녹을 먹는 비스코"</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<form id="program_auto_form">
|
||||
<div id="episode_list"></div>
|
||||
@@ -53,6 +66,8 @@
|
||||
};
|
||||
|
||||
const wait3seconds = function () {
|
||||
// Force parent container to be fluid to allow full width
|
||||
$("#main_container").removeClass("container").addClass("container-fluid");
|
||||
// REFERENCE: https://www.w3schools.com/jsref/met_win_settimeout.asp
|
||||
const result = setTimeout(dismissLoadingScreen, 2000);
|
||||
};
|
||||
@@ -102,50 +117,74 @@
|
||||
|
||||
function make_program(data) {
|
||||
current_data = data;
|
||||
console.log(data)
|
||||
console.log("current_data::", current_data)
|
||||
let str = '';
|
||||
let tmp = '';
|
||||
tmp = '<div class="form-inline">'
|
||||
tmp += m_button('check_download_btn', '선택 다운로드 추가', []);
|
||||
tmp += m_button('all_check_on_btn', '전체 선택', []);
|
||||
tmp += m_button('all_check_off_btn', '전체 해제', []);
|
||||
/*
|
||||
tmp += ' <input id="new_title" name="new_title" class="form-control form-control-sm" value="'+data.title+'">'
|
||||
tmp += '</div>'
|
||||
tmp += m_button('apply_new_title_btn', '저장폴더명, 파일명 제목 변경', []);
|
||||
tmp += m_button('search_tvdb_btn', 'TVDB', []);
|
||||
tmp = m_button_group(tmp)
|
||||
*/
|
||||
str += tmp
|
||||
// program
|
||||
{#str += m_hr_black();#}
|
||||
str += "<div class='card p-lg-5 mt-md-3 p-md-3 border-light'>"
|
||||
str += m_row_start(0);
|
||||
tmp = ''
|
||||
if (data.image != null)
|
||||
tmp = '<img src="' + data.image + '" class="img-fluid" />';
|
||||
str += m_col(3, tmp)
|
||||
tmp = ''
|
||||
var des = data.des || {};
|
||||
tmp += m_row_start(2) + m_col(3, '제목', 'right') + m_col(9, data.title || '') + m_row_end();
|
||||
tmp += m_row_start(2) + m_col(3, '원제', 'right') + m_col(9, des._otit || '') + m_row_end();
|
||||
tmp += m_row_start(2) + m_col(3, '감독', 'right') + m_col(9, des._dir || '') + m_row_end();
|
||||
tmp += m_row_start(2) + m_col(3, '제작사', 'right') + m_col(9, des._pub || '') + m_row_end();
|
||||
tmp += m_row_start(2) + m_col(3, '장르', 'right') + m_col(9, des._tag || '') + m_row_end();
|
||||
tmp += m_row_start(2) + m_col(3, '분류', 'right') + m_col(9, des._classifi || '') + m_row_end();
|
||||
tmp += m_row_start(2) + m_col(3, '방영일', 'right') + m_col(9, (data.date || '') + '(' + (data.day || '') + ')') + m_row_end();
|
||||
tmp += m_row_start(2) + m_col(3, '등급', 'right') + m_col(9, des._grade || '') + m_row_end();
|
||||
tmp += m_row_start(2) + m_col(3, '총화수', 'right') + m_col(9, des._total_chapter || '') + m_row_end();
|
||||
tmp += m_row_start(2) + m_col(3, '상영시간', 'right') + m_col(9, des._show_time || '') + m_row_end();
|
||||
tmp += m_row_start(2) + m_col(3, '줄거리', 'right') + m_col(9, data.ser_description || '') + m_row_end();
|
||||
str += m_col(9, tmp)
|
||||
str += m_row_end();
|
||||
console.log(data);
|
||||
|
||||
let str = "";
|
||||
|
||||
// 1. Info Card (Top)
|
||||
str += `<div class='card p-4 mb-4 border-light' style="background: rgba(30,30,40,0.6); backdrop-filter: blur(10px);">`;
|
||||
str += `<div class="row">`;
|
||||
|
||||
// Poster
|
||||
str += `<div class="col-md-3 text-center mb-3 mb-md-0">`;
|
||||
if (data.image) {
|
||||
str += `<img src="${data.image}" class="img-fluid rounded shadow-lg" style="max-height: 350px; width: auto;">`;
|
||||
}
|
||||
str += `</div>`;
|
||||
|
||||
// Details
|
||||
str += `<div class="col-md-9">`;
|
||||
str += `<h2 class="font-weight-bold text-white mb-2">${data.title || ''}</h2>`;
|
||||
|
||||
// Subtitle / Original Title
|
||||
const des = data.des || {};
|
||||
if (des._otit) {
|
||||
str += `<h5 class="text-muted mb-3">${des._otit}</h5>`;
|
||||
}
|
||||
|
||||
str += "</div>"
|
||||
{#str += m_hr_black();#}
|
||||
|
||||
// 에피소드 카드 그리드 레이아웃
|
||||
// Tags (Genre, etc.)
|
||||
str += `<div class="mb-4">`;
|
||||
if (des._tag) str += `<span class="badge badge-info mr-2" style="padding: 6px 12px; font-size:0.9em;">${des._tag}</span>`;
|
||||
if (des._grade) str += `<span class="badge badge-secondary mr-2" style="padding: 6px 12px; font-size:0.9em;">${des._grade}</span>`;
|
||||
if (data.date || data.day) str += `<span class="badge badge-dark mr-2" style="padding: 6px 12px; font-size:0.9em;">${data.date || ''} (${data.day || ''})</span>`;
|
||||
str += `</div>`;
|
||||
|
||||
// Table for details (Grid)
|
||||
str += `<div class="row mb-4" style="font-size: 0.95em; color: #ccc;">`;
|
||||
// Helper to add detail item
|
||||
const addDetail = (label, val) => {
|
||||
if(val) str += `<div class="col-md-6 mb-2"><span class="font-weight-bold text-info mr-2">${label}:</span> <span class="text-light">${val}</span></div>`;
|
||||
};
|
||||
|
||||
addDetail("감독", des._dir);
|
||||
addDetail("제작사", des._pub);
|
||||
addDetail("분류", des._classifi);
|
||||
addDetail("총화수", des._total_chapter);
|
||||
addDetail("상영시간", des._show_time);
|
||||
|
||||
if (data.ser_description) {
|
||||
str += `<div class="col-12 mt-3"><span class="font-weight-bold text-info mr-2">줄거리:</span> <p class="text-light mt-1" style="line-height:1.6;">${data.ser_description}</p></div>`;
|
||||
}
|
||||
str += `</div>`; // End detail row
|
||||
|
||||
// Actions Toolbar
|
||||
str += `<div class="d-flex flex-wrap align-items-center gap-2 p-3 rounded" style="background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.05);">`;
|
||||
|
||||
// Standard Actions
|
||||
str += `<button id="check_download_btn" class="btn btn-primary btn-sm mr-2"><i class="fa fa-download"></i> 선택 다운로드</button>`;
|
||||
str += `<button id="all_check_on_btn" class="btn btn-outline-light btn-sm mr-1">전체 선택</button>`;
|
||||
str += `<button id="all_check_off_btn" class="btn btn-outline-secondary btn-sm mr-3">해제</button>`;
|
||||
|
||||
// Scheduling (Heart)
|
||||
str += `<button id="add_whitelist" class="btn btn-outline-danger btn-sm mr-3" style="min-width: 120px;"><i class="bi bi-heart"></i> 스케쥴링 추가</button>`;
|
||||
|
||||
str += `</div>`; // End Action Toolbar
|
||||
|
||||
str += `</div>`; // End Col-9
|
||||
str += `</div>`; // End Row
|
||||
str += `</div>`; // End Card
|
||||
|
||||
// Episode List (Reuse existing logic or standard logic)
|
||||
str += '<div class="episode-list-container">';
|
||||
for (let i in data.episode) {
|
||||
let epThumbSrc = data.episode[i].thumbnail || '';
|
||||
@@ -177,6 +216,7 @@
|
||||
str += '</div>';
|
||||
}
|
||||
str += '</div>';
|
||||
|
||||
document.getElementById("episode_list").innerHTML = str;
|
||||
$('input[id^="checkbox_"]').bootstrapToggle()
|
||||
}
|
||||
@@ -267,6 +307,33 @@
|
||||
});
|
||||
|
||||
|
||||
$("body").on('click', '#add_whitelist', function (e) {
|
||||
e.preventDefault();
|
||||
const code = document.getElementById("code").value || params.code;
|
||||
const $btn = $(this);
|
||||
$.ajax({
|
||||
url: '/' + package_name + '/ajax/' + sub + '/add_whitelist',
|
||||
type: "POST",
|
||||
cache: false,
|
||||
data: JSON.stringify({data_code: code}),
|
||||
contentType: "application/json;charset=UTF-8",
|
||||
dataType: "json",
|
||||
success: function (ret) {
|
||||
if (ret.ret) {
|
||||
$.notify('<strong>스케쥴링 목록에 추가하였습니다.</strong>', {type: 'success'});
|
||||
$btn.html('<i class="bi bi-heart-fill"></i> 추가됨').removeClass('btn-outline-danger').addClass('btn-danger');
|
||||
} else {
|
||||
if (ret.log == "이미 추가되어 있습니다.") {
|
||||
$.notify('<strong>이미 추가되어 있습니다.</strong>', {type: 'warning'});
|
||||
$btn.html('<i class="bi bi-heart-fill"></i> 추가됨').removeClass('btn-outline-danger').addClass('btn-danger');
|
||||
} else {
|
||||
$.notify('<strong>추가 실패</strong><br>' + ret.log, {type: 'warning'});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$("body").on('click', '#go_ohli24_btn', function (e) {
|
||||
e.preventDefault();
|
||||
window.open("{{arg['ohli24_url']}}", "_blank");
|
||||
@@ -1024,6 +1091,45 @@
|
||||
border-color: #0dcaf0 !important;
|
||||
}
|
||||
|
||||
/* Navigation Menu Override */
|
||||
ul.nav.nav-pills.bg-light {
|
||||
background-color: rgba(30, 41, 59, 0.6) !important;
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 50rem !important;
|
||||
padding: 6px !important;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
|
||||
display: inline-flex !important;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
width: auto !important;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
ul.nav.nav-pills .nav-item {
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
ul.nav.nav-pills .nav-link {
|
||||
border-radius: 50rem !important;
|
||||
padding: 8px 20px !important;
|
||||
color: #94a3b8 !important;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
ul.nav.nav-pills .nav-link:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
color: #fff !important;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
ul.nav.nav-pills .nav-link.active {
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
|
||||
color: #fff !important;
|
||||
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
|
||||
}
|
||||
|
||||
/* 로딩 인디케이터 오버라이드 */
|
||||
#loading {
|
||||
background: rgba(15, 23, 42, 0.85) !important;
|
||||
|
||||
@@ -19,39 +19,45 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="yommi_wrapper">
|
||||
<div class="input-group mb-2">
|
||||
<input
|
||||
id="input_search"
|
||||
type="search"
|
||||
class="form-control rounded"
|
||||
placeholder="Search"
|
||||
aria-label="Search"
|
||||
aria-describedby="search-addon"
|
||||
/>
|
||||
<button id="btn_search" type="button" class="btn btn-primary">
|
||||
search
|
||||
</button>
|
||||
<div id="yommi_wrapper" class="container-fluid mt-4 mx-auto" style="max-width: 100%;">
|
||||
<!-- Search Section -->
|
||||
<div class="card p-4 mb-4 border-0" style="background: rgba(30,30,40,0.6); backdrop-filter: blur(10px); border-radius: 16px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-8 mx-auto">
|
||||
<div class="input-group input-group-lg">
|
||||
<input
|
||||
id="input_search"
|
||||
type="search"
|
||||
class="form-control border-0 text-white"
|
||||
placeholder="애니메이션 제목 검색..."
|
||||
aria-label="Search"
|
||||
style="background: rgba(0,0,0,0.4); border-radius: 12px 0 0 12px !important; box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);"
|
||||
/>
|
||||
<div class="input-group-append">
|
||||
<button id="btn_search" type="button" class="btn btn-primary px-4 font-weight-bold" style="border-radius: 0 12px 12px 0 !important; box-shadow: 0 0 15px rgba(59, 130, 246, 0.4);">
|
||||
<i class="bi bi-search"></i> 검색
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Category Buttons -->
|
||||
<div class="row mt-4 justify-content-center">
|
||||
<div id="anime_category" class="d-flex flex-wrap justify-content-center gap-2" role="group">
|
||||
<button id="ing" type="button" class="btn btn-outline-success btn-pill px-4 mx-1 active-glow">방영중</button>
|
||||
<button id="theater" type="button" class="btn btn-outline-primary btn-pill px-4 mx-1 active-glow">극장판</button>
|
||||
<button id="complete_anilist" type="button" class="btn btn-outline-light btn-pill px-4 mx-1 active-glow">완결</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div
|
||||
id="anime_category"
|
||||
class="btn-group"
|
||||
role="group"
|
||||
aria-label="Basic example"
|
||||
>
|
||||
<button id="ing" type="button" class="btn btn-success">방영중</button>
|
||||
<button id="theater" type="button" class="btn btn-primary">극장판</button>
|
||||
<button id="complete_anilist" type="button" class="btn btn-dark">
|
||||
완결
|
||||
</button>
|
||||
</div>
|
||||
<form id="airing_list_form">
|
||||
<div id="airing_list"></div>
|
||||
</form>
|
||||
<form id="screen_movie_list_form">
|
||||
<div id="screen_movie_list" class="container"></div>
|
||||
<div id="screen_movie_list" class="container-fluid px-0"></div>
|
||||
</form>
|
||||
|
||||
<form id="program_auto_form">
|
||||
@@ -159,176 +165,153 @@
|
||||
})
|
||||
}
|
||||
|
||||
// Common card HTML generator to ensure consistency
|
||||
function generate_card_html(item, linkUrl) {
|
||||
let tmp = '<div class="anime-card-wrapper">';
|
||||
tmp += '<div class="card glass-card w-100 border-0 h-100">';
|
||||
tmp += '<div class="position-relative overflow-hidden" style="border-radius: 12px 12px 0 0;">';
|
||||
|
||||
// Image with hover effect wrapper
|
||||
tmp += '<div class="img-wrapper">';
|
||||
tmp += '<img class="card-img-top lazyload" src="../static/img_loader_x200.svg" data-original="' + item.image_link + '" style="cursor: pointer; aspect-ratio: 2/3; object-fit: cover;" onclick="location.href=\'' + linkUrl + '\'"/>';
|
||||
tmp += '</div>'; // End img-wrapper
|
||||
|
||||
tmp += '</div>'; // End relative container
|
||||
|
||||
tmp += '<div class="card-body p-3 d-flex flex-column">';
|
||||
|
||||
// Title
|
||||
tmp += '<h6 class="card-title text-white font-weight-bold mb-2 text-truncate" title="' + item.title + '">' + item.title + '</h6>';
|
||||
|
||||
// Code & Heart Button Row
|
||||
tmp += '<div class="d-flex justify-content-between align-items-center mt-auto mb-3">';
|
||||
tmp += '<span class="badge badge-secondary opacity-75 small">' + item.code + '</span>';
|
||||
tmp += '<button id="add_whitelist" name="add_whitelist" class="btn btn-sm btn-circle btn-outline-danger border-0" data-code="' + item.code + '" title="스케쥴링 추가"><i class="bi bi-heart-fill"></i></button>';
|
||||
tmp += '</div>';
|
||||
|
||||
// Action Button
|
||||
tmp += '<a href="' + linkUrl + '" class="btn btn-primary btn-sm btn-block shadow-sm">상세보기</a>';
|
||||
|
||||
tmp += '</div>'; // End card-body
|
||||
tmp += '</div>'; // End card
|
||||
tmp += '</div>'; // End wrapper
|
||||
return tmp;
|
||||
}
|
||||
|
||||
function make_airing_list(data, page) {
|
||||
let str = ''
|
||||
let tmp = ''
|
||||
|
||||
str += '<div>';
|
||||
str += '<button type="button" class="btn btn-info">Page <span class="badge bg-warning">' + page + '</span></button>';
|
||||
|
||||
str += '<div class="d-flex justify-content-between align-items-center mb-3">';
|
||||
str += '<h5 class="text-white font-weight-bold border-left pl-3" style="border-width: 4px !important; border-color: #00d4ff !important;">방영중 애니메이션</h5>';
|
||||
str += '<button type="button" class="btn btn-sm btn-dark rounded-pill px-3">Page <span class="badge badge-warning ml-1">' + page + '</span></button>';
|
||||
str += '</div>';
|
||||
// str += '<div class="card-columns">'
|
||||
str += '<div id="inner_screen_movie" class="row infinite-scroll">';
|
||||
|
||||
str += '<div id="inner_screen_movie" class="anime-grid infinite-scroll">';
|
||||
for (let i in data.anime_list) {
|
||||
|
||||
tmp = '<div class="col-6 col-sm-4 col-md-3">';
|
||||
tmp += '<div class="card">';
|
||||
// tmp += '<img class="lozad" data-src="' + data.anime_list[i].image_link + '" />';
|
||||
tmp += '<img class="lazyload" src="../static/img_loader_x200.svg" data-original="' + data.anime_list[i].image_link + '" style="cursor: pointer" onclick="location.href=\'./request?code=' + data.anime_list[i].code + '\'"/>';
|
||||
tmp += '<div class="card-body">'
|
||||
// {#tmp += '<button id="code_button" data-code="' + data.episode[i].code + '" type="button" class="btn btn-primary code-button bootstrap-tooltip" data-toggle="button" data-tooltip="true" aria-pressed="true" autocomplete="off" data-placement="top">' +#}
|
||||
// {# '<span data-tooltip-text="'+data.episode[i].title+'">' + data.episode[i].code + '</span></button></div>';#}
|
||||
tmp += '<h5 class="card-title">' + data.anime_list[i].title + '</h5>';
|
||||
tmp += '<p class="card-text"><button id="add_whitelist" name="add_whitelist" class="btn btn-sm btn-favorite mb-1" data-code="' +
|
||||
data.anime_list[i].code +
|
||||
'"><i class="bi bi-heart-fill"></i></button></p>';
|
||||
tmp += '<a href="./request?code=' + data.anime_list[i].code + '" class="btn btn-primary cut-text">' + data.anime_list[i].title + '</a>';
|
||||
// tmp +=
|
||||
// '<button id="add_whitelist" name="add_whitelist" class="btn btn-sm btn-favorite mb-1" data-code="' +
|
||||
// data.anime_list[i].code +
|
||||
// '"><i class="bi bi-heart-fill"></i></button>';
|
||||
tmp += '</div><!-- .card -->';
|
||||
tmp += '</div>';
|
||||
tmp += '</div>';
|
||||
str += tmp
|
||||
|
||||
let item = data.anime_list[i];
|
||||
let request_url = './request?code=' + item.code;
|
||||
str += generate_card_html(item, request_url);
|
||||
}
|
||||
str += '</div>';
|
||||
// str += '</div><!-- .card-columns -->';
|
||||
|
||||
str += m_hr_black();
|
||||
|
||||
if (page > 1) {
|
||||
|
||||
const temp = document.createElement('div')
|
||||
temp.innerHTML = str;
|
||||
while (temp.firstChild) {
|
||||
document.getElementById("screen_movie_list").appendChild(temp.firstChild);
|
||||
}
|
||||
page++
|
||||
|
||||
} else {
|
||||
|
||||
document.getElementById("screen_movie_list").innerHTML = str;
|
||||
|
||||
}
|
||||
|
||||
$("img.lazyload").lazyload({
|
||||
threshold: 10,
|
||||
effect: "fadeIn",
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function make_search_result_list(data, page) {
|
||||
let str = ''
|
||||
let tmp = ''
|
||||
|
||||
console.log(data.anime_list, page)
|
||||
|
||||
str += '<div>';
|
||||
str += '<button type="button" class="btn btn-info">Page <span class="badge bg-warning">' + page + '</span></button>';
|
||||
let list = data.anime_list || [];
|
||||
|
||||
str += '<div class="d-flex justify-content-between align-items-center mb-3">';
|
||||
str += '<h5 class="text-white font-weight-bold border-left pl-3" style="border-width: 4px !important; border-color: #ff007f !important;">검색 결과</h5>';
|
||||
str += '<button type="button" class="btn btn-sm btn-dark rounded-pill px-3">Page <span class="badge badge-warning ml-1">' + page + '</span></button>';
|
||||
str += '</div>';
|
||||
// str += '<div class="card-columns">'
|
||||
str += '<div id="inner_screen_movie" class="row infinite-scroll">';
|
||||
for (let i in data.anime_list) {
|
||||
if (data.anime_list[i].wr_id !== '') {
|
||||
|
||||
str += '<div id="inner_screen_movie" class="anime-grid infinite-scroll">';
|
||||
|
||||
for (let i in list) {
|
||||
let item = list[i];
|
||||
let request_url = './request?code=' + item.code;
|
||||
|
||||
if (item.wr_id !== '' && item.wr_id !== undefined) {
|
||||
const re = /bo_table=([^&]+)/
|
||||
const bo_table = data.anime_list[i].link.match(re)
|
||||
console.log(bo_table)
|
||||
const bo_table = item.link.match(re)
|
||||
if (bo_table != null) {
|
||||
request_url = './request?code=' + data.anime_list[i].code + '&wr_id=' + data.anime_list[i].wr_id + '&bo_table=' + bo_table[1]
|
||||
} else {
|
||||
request_url = './request?code=' + data.anime_list[i].code
|
||||
request_url += '&wr_id=' + item.wr_id + '&bo_table=' + bo_table[1];
|
||||
}
|
||||
} else {
|
||||
request_url = './request?code=' + data.anime_list[i].code
|
||||
}
|
||||
|
||||
tmp = '<div class="col-6 col-sm-4 col-md-3">';
|
||||
tmp += '<div class="card">';
|
||||
tmp += '<img class="card-img-top" src="' + data.anime_list[i].image_link + '" />';
|
||||
tmp += '<div class="card-body">'
|
||||
// {#tmp += '<button id="code_button" data-code="' + data.episode[i].code + '" type="button" class="btn btn-primary code-button bootstrap-tooltip" data-toggle="button" data-tooltip="true" aria-pressed="true" autocomplete="off" data-placement="top">' +#}
|
||||
// {# '<span data-tooltip-text="'+data.episode[i].title+'">' + data.episode[i].code + '</span></button></div>';#}
|
||||
tmp += '<h5 class="card-title">' + data.anime_list[i].title + '</h5>';
|
||||
tmp += '<p class="card-text">' + data.anime_list[i].code + '</p>';
|
||||
tmp += '<a href="' + request_url + '" class="btn btn-primary cut-text">' + data.anime_list[i].title + '</a>';
|
||||
tmp += '</div>';
|
||||
tmp += '</div>';
|
||||
tmp += '</div>';
|
||||
str += tmp
|
||||
|
||||
|
||||
str += generate_card_html(item, request_url);
|
||||
}
|
||||
str += '</div>';
|
||||
str += '</div><!-- .card-columns -->';
|
||||
str += m_hr_black();
|
||||
|
||||
if (page > 1) {
|
||||
|
||||
const temp = document.createElement('div')
|
||||
temp.innerHTML = str;
|
||||
while (temp.firstChild) {
|
||||
document.getElementById("screen_movie_list").appendChild(temp.firstChild);
|
||||
}
|
||||
page++
|
||||
|
||||
} else {
|
||||
document.getElementById("screen_movie_list").innerHTML = str;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function make_screen_movie_list(data, page) {
|
||||
let str = ''
|
||||
let tmp = ''
|
||||
|
||||
console.log(data.anime_list, page)
|
||||
|
||||
str += '<div>';
|
||||
str += '<button type="button" class="btn btn-info">Page <span class="badge bg-warning">' + page + '</span></button>';
|
||||
let str = '';
|
||||
|
||||
str += '<div class="d-flex justify-content-between align-items-center mb-3">';
|
||||
let title = current_cate === 'movie' ? '극장판' : (current_cate === 'theater' ? '극장판(구)' : '완결 애니메이션');
|
||||
str += '<h5 class="text-white font-weight-bold border-left pl-3" style="border-width: 4px !important; border-color: #ffd700 !important;">' + title + '</h5>';
|
||||
str += '<button type="button" class="btn btn-sm btn-dark rounded-pill px-3">Page <span class="badge badge-warning ml-1">' + page + '</span></button>';
|
||||
str += '</div>';
|
||||
// str += '<div class="card-columns">'
|
||||
str += '<div id="inner_screen_movie" class="row infinite-scroll">';
|
||||
|
||||
str += '<div id="inner_screen_movie" class="anime-grid infinite-scroll">';
|
||||
for (let i in data.anime_list) {
|
||||
|
||||
tmp = '<div class="col-sm-4">';
|
||||
tmp += '<div class="card">';
|
||||
tmp += '<img class="card-img-top" src="' + data.anime_list[i].image_link + '" />';
|
||||
tmp += '<div class="card-body">'
|
||||
tmp += '<h5 class="card-title">' + data.anime_list[i].title + '</h5>';
|
||||
tmp += '<p class="card-text">' + data.anime_list[i].code + '</p>';
|
||||
tmp += '<a href="./request?code=' + data.anime_list[i].code + '" class="btn btn-primary cut-text">' + data.anime_list[i].title + '</a>';
|
||||
tmp += '</div>';
|
||||
tmp += '</div>';
|
||||
tmp += '</div>';
|
||||
str += tmp
|
||||
|
||||
let item = data.anime_list[i];
|
||||
let request_url = './request?code=' + item.code;
|
||||
|
||||
str += generate_card_html(item, request_url);
|
||||
}
|
||||
str += '</div>';
|
||||
// str += '</div><!-- .card-columns -->';
|
||||
str += m_hr_black();
|
||||
|
||||
if (page > 1) {
|
||||
|
||||
const temp = document.createElement('div')
|
||||
temp.innerHTML = str;
|
||||
while (temp.firstChild) {
|
||||
document.getElementById("screen_movie_list").appendChild(temp.firstChild);
|
||||
}
|
||||
page++
|
||||
|
||||
} else {
|
||||
document.getElementById("screen_movie_list").innerHTML = str;
|
||||
}
|
||||
|
||||
$("img.lazyload").lazyload({
|
||||
threshold: 10,
|
||||
effect: "fadeIn",
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
$(document).ready(function () {
|
||||
// Force parent container to be fluid to allow full width
|
||||
$("#main_container").removeClass("container").addClass("container-fluid");
|
||||
|
||||
// if ( "{{arg['anilife_current_code']}}" !== "" ) {
|
||||
// document.getElementById("code").value = "{{arg['anilife_current_code']}}";
|
||||
@@ -579,351 +562,164 @@
|
||||
document.addEventListener("scroll", debounce(onScroll, 300));
|
||||
</script>
|
||||
<style>
|
||||
button.code-button {
|
||||
min-width: 82px !important;
|
||||
body {
|
||||
font-family: 'NamumSquareNeo', system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Noto Sans, Liberation Sans, Arial, sans-serif;
|
||||
background-image: linear-gradient(135deg, #1f2937, #111827, #0f172a);
|
||||
color: #e2e8f0;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position: relative;
|
||||
display: block;
|
||||
/* Responsive Grid System */
|
||||
.anime-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
gap: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
[data-tooltip-text]:hover {
|
||||
position: relative;
|
||||
.anime-card-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Adjust for smaller screens */
|
||||
@media (max-width: 576px) {
|
||||
.anime-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
gap: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
[data-tooltip-text]:after {
|
||||
-webkit-transition: bottom 0.3s ease-in-out, opacity 0.3s ease-in-out;
|
||||
-moz-transition: bottom 0.3s ease-in-out, opacity 0.3s ease-in-out;
|
||||
transition: bottom 0.3s ease-in-out, opacity 0.3s ease-in-out;
|
||||
/* Navigation Menu Override */
|
||||
ul.nav.nav-pills.bg-light {
|
||||
background-color: rgba(30, 41, 59, 0.6) !important;
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 50rem !important;
|
||||
padding: 6px !important;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
|
||||
display: inline-flex !important;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
width: auto !important;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
ul.nav.nav-pills .nav-item {
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
-webkit-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
|
||||
-moz-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
|
||||
box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
|
||||
ul.nav.nav-pills .nav-link {
|
||||
border-radius: 50rem !important;
|
||||
padding: 8px 20px !important;
|
||||
color: #94a3b8 !important;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
ul.nav.nav-pills .nav-link:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
color: #fff !important;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
color: #ffffff;
|
||||
font-size: 12px;
|
||||
margin-bottom: 10px;
|
||||
padding: 7px 12px;
|
||||
position: absolute;
|
||||
width: auto;
|
||||
min-width: 50px;
|
||||
max-width: 300px;
|
||||
word-wrap: break-word;
|
||||
ul.nav.nav-pills .nav-link.active {
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
|
||||
color: #fff !important;
|
||||
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
|
||||
}
|
||||
|
||||
/* Glassmorphism Cards */
|
||||
.glass-card {
|
||||
background: rgba(30, 41, 59, 0.7) !important;
|
||||
backdrop-filter: blur(12px) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08) !important;
|
||||
border-radius: 16px !important;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease !important;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.glass-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1) !important;
|
||||
border-color: rgba(96, 165, 250, 0.5) !important;
|
||||
}
|
||||
|
||||
/* Image Wrapper for Hover Zoom */
|
||||
.img-wrapper {
|
||||
overflow: hidden;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.05);
|
||||
}
|
||||
|
||||
.img-wrapper img {
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
|
||||
.glass-card:hover .img-wrapper img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* Category Buttons */
|
||||
.btn-pill {
|
||||
border-radius: 50rem !important;
|
||||
font-weight: 600;
|
||||
border-width: 2px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-pill:hover, .btn-pill:focus, .btn-pill.active {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
/* Preloader (Original but styled) */
|
||||
#preloader {
|
||||
background-color: #0f172a;
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
z-index: 9999;
|
||||
|
||||
opacity: 0;
|
||||
left: -9999px;
|
||||
top: 90%;
|
||||
|
||||
content: attr(data-tooltip-text);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
[data-tooltip-text]:hover:after {
|
||||
top: 230%;
|
||||
left: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
[data-tooltip-text]:hover {
|
||||
|
||||
.loader-inner {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
[data-tooltip-text]:after {
|
||||
-webkit-transition: bottom 0.3s ease-in-out, opacity 0.3s ease-in-out;
|
||||
-moz-transition: bottom 0.3s ease-in-out, opacity 0.3s ease-in-out;
|
||||
transition: bottom 0.3s ease-in-out, opacity 0.3s ease-in-out;
|
||||
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
|
||||
-webkit-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
|
||||
-moz-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
|
||||
box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
|
||||
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
|
||||
color: #ffffff;
|
||||
font-size: 12px;
|
||||
margin-bottom: 10px;
|
||||
padding: 7px 12px;
|
||||
position: absolute;
|
||||
width: auto;
|
||||
min-width: 50px;
|
||||
max-width: 300px;
|
||||
word-wrap: break-word;
|
||||
|
||||
z-index: 9999;
|
||||
|
||||
opacity: 0;
|
||||
left: -9999px;
|
||||
top: -210% !important;
|
||||
|
||||
content: attr(data-tooltip-text);
|
||||
}
|
||||
|
||||
[data-tooltip-text]:hover:after {
|
||||
top: 130%;
|
||||
left: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#airing_list {
|
||||
display: none;
|
||||
/* Scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: #0f172a;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #475569;
|
||||
border-radius: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #64748b;
|
||||
}
|
||||
|
||||
/* Utilities */
|
||||
.cut-text {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#screen_movie_list {
|
||||
margin-top: 10px;
|
||||
|
||||
.btn-circle {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
border-radius: 50%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
padding: 1rem !important;
|
||||
}
|
||||
|
||||
button#add_whitelist {
|
||||
float: right;
|
||||
}
|
||||
|
||||
button.btn-favorite {
|
||||
background-color: #e0ff42;
|
||||
color: #2a7aaf;
|
||||
}
|
||||
|
||||
/*.card-columns {*/
|
||||
/* @include media-breakpoint-only(lg) {*/
|
||||
/* column-count: 4;*/
|
||||
/* }*/
|
||||
/* @include media-breakpoint-only(xl) {*/
|
||||
/* column-count: 5;*/
|
||||
/* }*/
|
||||
/*}*/
|
||||
@media (min-width: 576px) {
|
||||
.container {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.card-columns {
|
||||
column-count: 2;
|
||||
column-gap: 1.25rem;
|
||||
}
|
||||
|
||||
.card-columns .card {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.card-columns {
|
||||
column-count: 3;
|
||||
}
|
||||
}
|
||||
|
||||
/* Large devices (desktops, 992px and up) */
|
||||
@media (min-width: 992px) {
|
||||
.card-columns {
|
||||
column-count: 3;
|
||||
}
|
||||
}
|
||||
|
||||
/* Extra large devices (large desktops, 1200px and up) */
|
||||
@media (min-width: 1200px) {
|
||||
.card-columns {
|
||||
column-count: 5;
|
||||
}
|
||||
|
||||
#yommi_wrapper {
|
||||
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 85%!important;
|
||||
}
|
||||
#screen_movie_list {
|
||||
max-width: 100%!important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.card {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.card-columns .card {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.card-columns .card img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button#add_whitelist {
|
||||
/*top: -70px;*/
|
||||
position: relative;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: NanumSquareNeo, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Noto Sans, Liberation Sans, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
|
||||
}
|
||||
|
||||
body {
|
||||
background-image: linear-gradient(90deg, #233f48, #6c6fa2, #768dae);
|
||||
}
|
||||
|
||||
#preloader {
|
||||
/*background-color: green;*/
|
||||
/*color: white;*/
|
||||
/*height: 100vh;*/
|
||||
/*width: 100%;*/
|
||||
/*position: fixed;*/
|
||||
/*z-index: 100;*/
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
background: radial-gradient(#222, #000);
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 99999;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/*.loader {*/
|
||||
/* background: rgb(0, 0, 0, 0.8);*/
|
||||
/* background: radial-gradient(#222, #000);*/
|
||||
/* bottom: 0;*/
|
||||
/* left: 0;*/
|
||||
/* overflow: hidden;*/
|
||||
/* position: fixed;*/
|
||||
/* right: 0;*/
|
||||
/* top: 0;*/
|
||||
/* z-index: 99999;*/
|
||||
/*}*/
|
||||
|
||||
.loader-inner {
|
||||
bottom: 0;
|
||||
height: 60px;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.loader-line-wrap {
|
||||
animation: spin 2000ms cubic-bezier(.175, .885, .32, 1.275) infinite;
|
||||
box-sizing: border-box;
|
||||
height: 50px;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transform-origin: 50% 100%;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.loader-line {
|
||||
border: 4px solid transparent;
|
||||
border-radius: 100%;
|
||||
box-sizing: border-box;
|
||||
height: 100px;
|
||||
left: 0;
|
||||
margin: 0 auto;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.loader-line-wrap:nth-child(1) {
|
||||
animation-delay: -50ms;
|
||||
}
|
||||
|
||||
.loader-line-wrap:nth-child(2) {
|
||||
animation-delay: -100ms;
|
||||
}
|
||||
|
||||
.loader-line-wrap:nth-child(3) {
|
||||
animation-delay: -150ms;
|
||||
}
|
||||
|
||||
.loader-line-wrap:nth-child(4) {
|
||||
animation-delay: -200ms;
|
||||
}
|
||||
|
||||
.loader-line-wrap:nth-child(5) {
|
||||
animation-delay: -250ms;
|
||||
}
|
||||
|
||||
.loader-line-wrap:nth-child(1) .loader-line {
|
||||
border-color: hsl(0, 80%, 60%);
|
||||
height: 90px;
|
||||
width: 90px;
|
||||
top: 7px;
|
||||
}
|
||||
|
||||
.loader-line-wrap:nth-child(2) .loader-line {
|
||||
border-color: hsl(60, 80%, 60%);
|
||||
height: 76px;
|
||||
width: 76px;
|
||||
top: 14px;
|
||||
}
|
||||
|
||||
.loader-line-wrap:nth-child(3) .loader-line {
|
||||
border-color: hsl(120, 80%, 60%);
|
||||
height: 62px;
|
||||
width: 62px;
|
||||
top: 21px;
|
||||
}
|
||||
|
||||
.loader-line-wrap:nth-child(4) .loader-line {
|
||||
border-color: hsl(180, 80%, 60%);
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
top: 28px;
|
||||
}
|
||||
|
||||
.loader-line-wrap:nth-child(5) .loader-line {
|
||||
border-color: hsl(240, 80%, 60%);
|
||||
height: 34px;
|
||||
width: 34px;
|
||||
top: 35px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0%, 15% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/bootstrap-icons.css">
|
||||
<link href="{{ url_for('.static', filename='css/bootstrap.min.css') }}" type="text/css" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,49 +1,242 @@
|
||||
{% extends "base.html" %}
|
||||
{% block content %}
|
||||
<div>
|
||||
{{ macros.m_button_group([['globalSettingSaveBtn', '설정 저장']])}}
|
||||
{{ macros.m_row_start('5') }}
|
||||
{{ macros.m_row_end() }}
|
||||
<nav>
|
||||
{{ macros.m_tab_head_start() }}
|
||||
{{ macros.m_tab_head('normal', '일반', true) }}
|
||||
{{ macros.m_tab_head('auto', '홈화면 자동', false) }}
|
||||
{{ macros.m_tab_head('action', '기타', false) }}
|
||||
{{ macros.m_tab_head_end() }}
|
||||
</nav>
|
||||
<form id="setting">
|
||||
<div class="tab-content" id="nav-tabContent">
|
||||
{{ macros.m_tab_content_start('normal', true) }}
|
||||
{{ macros.setting_input_text_and_buttons('ohli24_url', 'ohli24 URL', [['go_btn', 'GO']], value=arg['ohli24_url']) }}
|
||||
{{ macros.setting_input_text('ohli24_download_path', '저장 폴더', value=arg['ohli24_download_path'], desc='정상적으로 다운 완료 된 파일이 이동할 폴더 입니다. ') }}
|
||||
{{ macros.setting_input_int('ohli24_max_ffmpeg_process_count', '동시 다운로드 수', value=arg['ohli24_max_ffmpeg_process_count'], desc='동시에 다운로드 할 에피소드 갯수입니다.') }}
|
||||
{{ macros.setting_select('ohli24_download_method', '다운로드 방법', [['ffmpeg', 'ffmpeg (기본)'], ['ytdlp', 'yt-dlp']], value=arg.get('ohli24_download_method', 'ffmpeg'), desc='m3u8 다운로드에 사용할 도구를 선택합니다.') }}
|
||||
{{ macros.setting_checkbox('ohli24_order_desc', '요청 화면 최신순 정렬', value=arg['ohli24_order_desc'], desc='On : 최신화부터, Off : 1화부터') }}
|
||||
{{ macros.setting_checkbox('ohli24_auto_make_folder', '제목 폴더 생성', value=arg['ohli24_auto_make_folder'], desc='제목으로 폴더를 생성하고 폴더 안에 다운로드합니다.') }}
|
||||
<div id="ohli24_auto_make_folder_div" class="collapse">
|
||||
{{ macros.setting_input_text('ohli24_finished_insert', '완결 표시', col='3', value=arg['ohli24_finished_insert'], desc=['완결된 컨텐츠 폴더명 앞에 넣을 문구입니다.']) }}
|
||||
{{ macros.setting_checkbox('ohli24_auto_make_season_folder', '시즌 폴더 생성', value=arg['ohli24_auto_make_season_folder'], desc=['On : Season 번호 폴더를 만듭니다.']) }}
|
||||
<div id="ohli24_setting_wrapper" class="container-fluid mt-4 mx-auto" style="max-width: 100%;">
|
||||
|
||||
<div class="glass-card p-4">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h2 class="text-white font-weight-bold"><i class="bi bi-gear-fill mr-2"></i>Ohli24 설정</h2>
|
||||
{{ macros.m_button_group([['globalSettingSaveBtn', '설정 저장']])}}
|
||||
</div>
|
||||
{{ macros.setting_checkbox('ohli24_uncompleted_auto_enqueue', '자동으로 다시 받기', value=arg['ohli24_uncompleted_auto_enqueue'], desc=['On : 플러그인 로딩시 미완료인 항목은 자동으로 다시 받습니다.']) }}
|
||||
{{ macros.m_tab_content_end() }}
|
||||
|
||||
{{ macros.m_tab_content_start('auto', false) }}
|
||||
{{ macros.global_setting_scheduler_button(arg['scheduler'], arg['is_running']) }}
|
||||
{{ macros.setting_input_text('ohli24_interval', '스케쥴링 실행 정보', value=arg['ohli24_interval'], col='3', desc=['Inverval(minute 단위)이나 Cron 설정']) }}
|
||||
{{ macros.setting_checkbox('ohli24_auto_start', '시작시 자동실행', value=arg['ohli24_auto_start'], desc='On : 시작시 자동으로 스케쥴러에 등록됩니다.') }}
|
||||
{{ macros.setting_input_textarea('ohli24_auto_code_list', '자동 다운로드할 작품 코드', desc=['구분자 | 또는 엔터'], value=arg['ohli24_auto_code_list'], row='10') }}
|
||||
{{ macros.setting_checkbox('ohli24_auto_mode_all', '에피소드 모두 받기', value=arg['ohli24_auto_mode_all'], desc=['On : 이전 에피소드를 모두 받습니다.', 'Off : 최신 에피소드만 받습니다.']) }}
|
||||
{{ macros.m_tab_content_end() }}
|
||||
|
||||
{{ macros.m_tab_content_start('action', false) }}
|
||||
{{ macros.setting_buttons([['global_one_execute_btn', '1회 실행']], left='1회 실행' ) }}
|
||||
{{ macros.setting_buttons([['global_reset_db_btn', 'DB 초기화']], left='DB정리' ) }}
|
||||
{{ macros.m_tab_content_end() }}
|
||||
|
||||
</div><!--tab-content-->
|
||||
</form>
|
||||
{{ macros.m_row_start('5') }}
|
||||
{{ macros.m_row_end() }}
|
||||
|
||||
<nav>
|
||||
{{ macros.m_tab_head_start() }}
|
||||
{{ macros.m_tab_head('normal', '일반', true) }}
|
||||
{{ macros.m_tab_head('auto', '홈화면 자동', false) }}
|
||||
{{ macros.m_tab_head('action', '기타', false) }}
|
||||
{{ macros.m_tab_head_end() }}
|
||||
</nav>
|
||||
|
||||
<form id="setting" class="mt-4">
|
||||
<div class="tab-content" id="nav-tabContent">
|
||||
{{ macros.m_tab_content_start('normal', true) }}
|
||||
{{ macros.setting_input_text_and_buttons('ohli24_url', 'ohli24 URL', [['go_btn', 'GO']], value=arg['ohli24_url']) }}
|
||||
{{ macros.setting_input_text('ohli24_download_path', '저장 폴더', value=arg['ohli24_download_path'], desc='정상적으로 다운 완료 된 파일이 이동할 폴더 입니다. ') }}
|
||||
{{ macros.setting_input_int('ohli24_max_ffmpeg_process_count', '동시 다운로드 수', value=arg['ohli24_max_ffmpeg_process_count'], desc='동시에 다운로드 할 에피소드 갯수입니다.') }}
|
||||
{{ macros.setting_select('ohli24_download_method', '다운로드 방법', [['ffmpeg', 'ffmpeg (기본)'], ['ytdlp', 'yt-dlp']], value=arg.get('ohli24_download_method', 'ffmpeg'), desc='m3u8 다운로드에 사용할 도구를 선택합니다.') }}
|
||||
{{ macros.setting_checkbox('ohli24_order_desc', '요청 화면 최신순 정렬', value=arg['ohli24_order_desc'], desc='On : 최신화부터, Off : 1화부터') }}
|
||||
{{ macros.setting_checkbox('ohli24_auto_make_folder', '제목 폴더 생성', value=arg['ohli24_auto_make_folder'], desc='제목으로 폴더를 생성하고 폴더 안에 다운로드합니다.') }}
|
||||
<div id="ohli24_auto_make_folder_div" class="collapse pl-4 border-left ml-3" style="border-color: rgba(255,255,255,0.1) !important;">
|
||||
{{ macros.setting_input_text('ohli24_finished_insert', '완결 표시', col='3', value=arg['ohli24_finished_insert'], desc=['완결된 컨텐츠 폴더명 앞에 넣을 문구입니다.']) }}
|
||||
{{ macros.setting_checkbox('ohli24_auto_make_season_folder', '시즌 폴더 생성', value=arg['ohli24_auto_make_season_folder'], desc=['On : Season 번호 폴더를 만듭니다.']) }}
|
||||
</div>
|
||||
{{ macros.setting_checkbox('ohli24_uncompleted_auto_enqueue', '자동으로 다시 받기', value=arg['ohli24_uncompleted_auto_enqueue'], desc=['On : 플러그인 로딩시 미완료인 항목은 자동으로 다시 받습니다.']) }}
|
||||
{{ macros.m_tab_content_end() }}
|
||||
|
||||
{{ macros.m_tab_content_start('auto', false) }}
|
||||
{{ macros.global_setting_scheduler_button(arg['scheduler'], arg['is_running']) }}
|
||||
{{ macros.setting_input_text('ohli24_interval', '스케쥴링 실행 정보', value=arg['ohli24_interval'], col='3', desc=['Inverval(minute 단위)이나 Cron 설정']) }}
|
||||
{{ macros.setting_checkbox('ohli24_auto_start', '시작시 자동실행', value=arg['ohli24_auto_start'], desc='On : 시작시 자동으로 스케쥴러에 등록됩니다.') }}
|
||||
{{ macros.setting_input_textarea('ohli24_auto_code_list', '자동 다운로드할 작품 코드', desc=['구분자 | 또는 엔터'], value=arg['ohli24_auto_code_list'], row='10') }}
|
||||
{{ macros.setting_checkbox('ohli24_auto_mode_all', '에피소드 모두 받기', value=arg['ohli24_auto_mode_all'], desc=['On : 이전 에피소드를 모두 받습니다.', 'Off : 최신 에피소드만 받습니다.']) }}
|
||||
{{ macros.m_tab_content_end() }}
|
||||
|
||||
{{ macros.m_tab_content_start('action', false) }}
|
||||
<div class="p-3" style="background: rgba(0,0,0,0.2); border-radius: 8px;">
|
||||
<h5 class="text-info mb-3"><i class="bi bi-lightning-charge-fill mr-2"></i>Actions</h5>
|
||||
{{ macros.setting_buttons([['global_one_execute_btn', '1회 실행']], left='1회 실행' ) }}
|
||||
<hr style="border-color: rgba(255,255,255,0.1);">
|
||||
{{ macros.setting_buttons([['global_reset_db_btn', 'DB 초기화']], left='DB정리' ) }}
|
||||
</div>
|
||||
{{ macros.m_tab_content_end() }}
|
||||
|
||||
</div><!--tab-content-->
|
||||
</form>
|
||||
</div>
|
||||
</div> <!--전체-->
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
|
||||
|
||||
<style>
|
||||
/* Navigation Menu Override (Top Sub-menu) */
|
||||
ul.nav.nav-pills.bg-light {
|
||||
background-color: rgba(30, 41, 59, 0.6) !important;
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 50rem !important; /* Pill shape container */
|
||||
padding: 6px !important;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
|
||||
display: inline-flex !important; /* Fit content */
|
||||
flex-wrap: wrap; /* allow wrap on small screens */
|
||||
justify-content: center;
|
||||
width: auto !important; /* Prevent full width */
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
ul.nav.nav-pills .nav-item {
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
ul.nav.nav-pills .nav-link {
|
||||
border-radius: 50rem !important;
|
||||
padding: 8px 20px !important;
|
||||
color: #94a3b8 !important; /* Muted text */
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
ul.nav.nav-pills .nav-link:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
color: #fff !important;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
ul.nav.nav-pills .nav-link.active {
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
|
||||
color: #fff !important;
|
||||
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
|
||||
}
|
||||
|
||||
/* Global Background */
|
||||
body {
|
||||
font-family: 'NamumSquareNeo', system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Noto Sans, Liberation Sans, Arial, sans-serif;
|
||||
background-image: linear-gradient(135deg, #1f2937, #111827, #0f172a);
|
||||
color: #e2e8f0;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Glass Card Container */
|
||||
.glass-card {
|
||||
background: rgba(30, 41, 59, 0.7);
|
||||
backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
/* Tabs Styling */
|
||||
.nav-tabs {
|
||||
border-bottom: 2px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.nav-tabs .nav-link {
|
||||
color: #94a3b8;
|
||||
border: none;
|
||||
font-weight: 600;
|
||||
padding: 10px 20px;
|
||||
border-radius: 8px 8px 0 0;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.nav-tabs .nav-link:hover {
|
||||
color: #e2e8f0;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.nav-tabs .nav-link.active {
|
||||
color: #60a5fa !important;
|
||||
background: rgba(30, 41, 59, 0.8) !important;
|
||||
border-bottom: 2px solid #60a5fa !important;
|
||||
}
|
||||
|
||||
/* Form Controls */
|
||||
.form-control, .custom-select, textarea {
|
||||
background-color: rgba(0, 0, 0, 0.3) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1) !important;
|
||||
color: #f1f5f9 !important;
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
|
||||
.form-control:focus, .custom-select:focus, textarea:focus {
|
||||
background-color: rgba(0, 0, 0, 0.5) !important;
|
||||
border-color: #3b82f6 !important;
|
||||
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25) !important;
|
||||
}
|
||||
|
||||
/* Labels & Text */
|
||||
label, .col-form-label {
|
||||
font-weight: 600;
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: #94a3b8 !important;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
padding: 8px 16px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.btn-primary, #globalSettingSaveBtn {
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
|
||||
color: white;
|
||||
box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
|
||||
}
|
||||
|
||||
.btn-primary:hover, #globalSettingSaveBtn:hover {
|
||||
background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.6);
|
||||
}
|
||||
|
||||
/* GO Button specific (Input Group) */
|
||||
#go_btn {
|
||||
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
||||
color: white;
|
||||
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
|
||||
border-radius: 0 8px 8px 0 !important; /* Fix for input group */
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
#go_btn:hover {
|
||||
background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 6px 20px rgba(16, 185, 129, 0.6);
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.btn-outline-primary {
|
||||
color: #60a5fa;
|
||||
border: 1px solid #60a5fa;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.btn-outline-primary:hover {
|
||||
background: rgba(96, 165, 250, 0.1);
|
||||
color: #93c5fd;
|
||||
box-shadow: 0 0 15px rgba(96, 165, 250, 0.3);
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: translateY(0) !important;
|
||||
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2) !important;
|
||||
}
|
||||
|
||||
/* Custom Checkbox/Switch Override (if Bootstrap switch is used) */
|
||||
.custom-control-label::before {
|
||||
background-color: rgba(0,0,0,0.3);
|
||||
border-color: rgba(255,255,255,0.2);
|
||||
}
|
||||
.custom-control-input:checked ~ .custom-control-label::before {
|
||||
background-color: #3b82f6;
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
|
||||
/* Collapse Borders */
|
||||
.border-left {
|
||||
border-left: 3px solid rgba(255,255,255,0.1) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
var package_name = "{{arg['package_name'] }}";
|
||||
var sub = "{{arg['sub'] }}";
|
||||
@@ -51,6 +244,9 @@ var current_data = null;
|
||||
|
||||
|
||||
$(document).ready(function(){
|
||||
// Width Fix
|
||||
$("#main_container").removeClass("container").addClass("container-fluid");
|
||||
|
||||
use_collapse('ohli24_auto_make_folder');
|
||||
});
|
||||
|
||||
@@ -75,13 +271,13 @@ $("body").on('click', '#global_one_execute_btn', function(e){
|
||||
dataType: "json",
|
||||
success: function(ret) {
|
||||
if (ret.ret == 'success') {
|
||||
notify('스케줄러 1회 실행을 시작합니다.', 'success');
|
||||
$.notify('스케줄러 1회 실행을 시작합니다.', {type:'success'});
|
||||
} else {
|
||||
notify(ret.msg || '실행 실패', 'danger');
|
||||
$.notify(ret.msg || '실행 실패', {type:'danger'});
|
||||
}
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
notify('에러: ' + error, 'danger');
|
||||
$.notify('에러: ' + error, {type:'danger'});
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -97,13 +293,13 @@ $("body").on('click', '#global_reset_db_btn', function(e){
|
||||
dataType: "json",
|
||||
success: function(ret) {
|
||||
if (ret.ret == 'success') {
|
||||
notify('DB가 초기화되었습니다.', 'success');
|
||||
$.notify('DB가 초기화되었습니다.', {type:'success'});
|
||||
} else {
|
||||
notify(ret.msg || '초기화 실패', 'danger');
|
||||
$.notify(ret.msg || '초기화 실패', {type:'danger'});
|
||||
}
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
notify('에러: ' + error, 'danger');
|
||||
$.notify('에러: ' + error, {type:'danger'});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user