feat: Revamp anime search UI with modern design, glass cards, and introduce new search result template.`
This commit is contained in:
@@ -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 %}
|
||||
|
||||
Reference in New Issue
Block a user