0.0.5s
This commit is contained in:
Hell13Cat
@@ -1,6 +1,8 @@
|
|||||||
# ---> Python
|
# ---> Python
|
||||||
# Secure data
|
# Secure data
|
||||||
|
.vscode
|
||||||
old/
|
old/
|
||||||
|
data_test/
|
||||||
config_gb.json
|
config_gb.json
|
||||||
migration.py
|
migration.py
|
||||||
|
|
||||||
|
|||||||
+1
-1
@@ -12,6 +12,6 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"file":{
|
"file":{
|
||||||
"repos":["data/files"]
|
"repos":["data/files", "E:/local_booru/img"]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
from system_module import db, gelbooru, logger
|
from system_module import db, gelbooru, logger
|
||||||
from flask import Flask, render_template, jsonify, send_from_directory, render_template_string
|
from flask import Flask, render_template, jsonify, send_from_directory, render_template_string, request
|
||||||
import json
|
import json
|
||||||
import requests
|
import requests
|
||||||
from pathlib import Path
|
from pathlib import Path
|
||||||
@@ -13,11 +13,11 @@ GB_ID = CONFIG_ROOT_S["gb"]["id"]
|
|||||||
GB_HASH = CONFIG_ROOT_S["gb"]["hash"]
|
GB_HASH = CONFIG_ROOT_S["gb"]["hash"]
|
||||||
GB_HEADERS = CONFIG_ROOT["gb"]["headers"]
|
GB_HEADERS = CONFIG_ROOT["gb"]["headers"]
|
||||||
FILE_FOLDERS = CONFIG_ROOT["file"]["repos"]
|
FILE_FOLDERS = CONFIG_ROOT["file"]["repos"]
|
||||||
THUMB_FOLDER = "data/thumb"
|
THUMB_FOLDER = "data_test/thumb"
|
||||||
|
|
||||||
gb = gelbooru.GB(GB_ID, GB_HASH, GB_HEADERS)
|
gb = gelbooru.GB(GB_ID, GB_HASH, GB_HEADERS)
|
||||||
log = logger.Logger()
|
log = logger.Logger()
|
||||||
database = db.DB()
|
database = db.DB(True)
|
||||||
app = Flask(__name__)
|
app = Flask(__name__)
|
||||||
|
|
||||||
def find_file(filename, file_folders):
|
def find_file(filename, file_folders):
|
||||||
@@ -85,10 +85,15 @@ def dw_api():
|
|||||||
@app.route("/api", methods=["GET", "POST"])
|
@app.route("/api", methods=["GET", "POST"])
|
||||||
def api():
|
def api():
|
||||||
data = request.get_json()
|
data = request.get_json()
|
||||||
if data["type"] == "post":
|
if data["type"] == "search":
|
||||||
search_query = data["query"].split(" ")
|
search_query = data["query"]
|
||||||
search_rating = data["rating"].split("+")
|
search_rating = data["rating"]
|
||||||
results = database.get_search(search_query, search_rating)
|
if search_query == "" and search_rating == "e+q+s+g":
|
||||||
|
results = database.get_all()
|
||||||
|
else:
|
||||||
|
search_query = search_query.split(" ")
|
||||||
|
search_rating = search_rating.split("+")
|
||||||
|
results = database.get_search(search_rating, search_query)
|
||||||
if len(results) <= PAGINATION_COUNT:
|
if len(results) <= PAGINATION_COUNT:
|
||||||
results_send = {"results_info":{"total":len(results), "page":int(data["page"]), "count_page":PAGINATION_COUNT}, "results":results}
|
results_send = {"results_info":{"total":len(results), "page":int(data["page"]), "count_page":PAGINATION_COUNT}, "results":results}
|
||||||
return jsonify(results_send)
|
return jsonify(results_send)
|
||||||
@@ -100,6 +105,10 @@ def api():
|
|||||||
tag_slise = data["q"]
|
tag_slise = data["q"]
|
||||||
result_autocomplete = database.get_autocomplete(tag_slise)
|
result_autocomplete = database.get_autocomplete(tag_slise)
|
||||||
return jsonify(result_autocomplete)
|
return jsonify(result_autocomplete)
|
||||||
|
elif data["type"] == "post":
|
||||||
|
post_id = data["post_id"]
|
||||||
|
result_post = database.get_from_id(post_id)
|
||||||
|
return jsonify(result_post)
|
||||||
else:
|
else:
|
||||||
pass
|
pass
|
||||||
return "", 204
|
return "", 204
|
||||||
|
|||||||
+26
-14
@@ -2,15 +2,17 @@ from tinydb import TinyDB, Query
|
|||||||
import os
|
import os
|
||||||
import json
|
import json
|
||||||
from collections import Counter
|
from collections import Counter
|
||||||
import gelbooru
|
from system_module import gelbooru
|
||||||
from datetime import datetime
|
from datetime import datetime
|
||||||
|
|
||||||
class DB:
|
class DB:
|
||||||
def __init__(self):
|
def __init__(self, debug):
|
||||||
db_path = "datas"
|
if debug:
|
||||||
if not os.path.exists(db_path):
|
db_path = "data_test"
|
||||||
os.makedirs(os.path.dirname(db_path), exist_ok=True)
|
else:
|
||||||
json.dump({}, open(db_path+"/db.json", "w", encoding="utf-8"))
|
db_path = "data"
|
||||||
|
if not os.path.exists(os.path.join(db_path, "db.json")):
|
||||||
|
json.dump({}, open(os.path.join(db_path, "db.json"), "w", encoding="utf-8"))
|
||||||
self.db = TinyDB(db_path+"/db.json")
|
self.db = TinyDB(db_path+"/db.json")
|
||||||
self.File = Query()
|
self.File = Query()
|
||||||
|
|
||||||
@@ -39,7 +41,6 @@ class DB:
|
|||||||
"height": data_add["height"]
|
"height": data_add["height"]
|
||||||
}
|
}
|
||||||
self.db.insert(add_data)
|
self.db.insert(add_data)
|
||||||
pass
|
|
||||||
|
|
||||||
def get_all(self):
|
def get_all(self):
|
||||||
sorted_records = sorted(
|
sorted_records = sorted(
|
||||||
@@ -52,12 +53,20 @@ class DB:
|
|||||||
)
|
)
|
||||||
return sorted_records
|
return sorted_records
|
||||||
|
|
||||||
def get_search(self, ratings, tags):
|
def get_search(self, rating_tmp, tags):
|
||||||
ratings
|
mapping_rating = {
|
||||||
results = self.db.search(
|
"e": "explicit",
|
||||||
self.File.rating.one_of(self.ratings) &
|
"g": "general",
|
||||||
self.File.tags.any(self.tags)
|
"s": "sensitive",
|
||||||
)
|
"q": "questionable"
|
||||||
|
}
|
||||||
|
rating = [mapping_rating.get(x, x) for x in rating_tmp]
|
||||||
|
if rating:
|
||||||
|
query = self.File.rating.one_of(rating)
|
||||||
|
if tags != [""]:
|
||||||
|
tag_query = self.File.tags.test(lambda t: set(tags).issubset(set(t or [])))
|
||||||
|
query = tag_query if query is None else query & tag_query
|
||||||
|
results = self.db.search(query) if query else self.db.all()
|
||||||
sorted_records = sorted(
|
sorted_records = sorted(
|
||||||
results,
|
results,
|
||||||
key=lambda x: datetime.strptime(
|
key=lambda x: datetime.strptime(
|
||||||
@@ -89,4 +98,7 @@ class DB:
|
|||||||
return top_10
|
return top_10
|
||||||
|
|
||||||
def edit_data(self, id_file, edit_data):
|
def edit_data(self, id_file, edit_data):
|
||||||
self.db.update(self.edit_data, self.File.md5 == self.id_file)
|
self.db.update(self.edit_data, self.File.md5 == self.id_file)
|
||||||
|
|
||||||
|
def get_from_id(self, id_file):
|
||||||
|
return self.db.get(self.File.md5 == id_file)
|
||||||
@@ -2,7 +2,7 @@ import requests
|
|||||||
from datetime import datetime
|
from datetime import datetime
|
||||||
|
|
||||||
def gelbooru_date_parse(date_str):
|
def gelbooru_date_parse(date_str):
|
||||||
if not self.date_str:
|
if not date_str:
|
||||||
return 0, "Unknown"
|
return 0, "Unknown"
|
||||||
try:
|
try:
|
||||||
dt = datetime.strptime(date_str, "%a %b %d %H:%M:%S %z %Y")
|
dt = datetime.strptime(date_str, "%a %b %d %H:%M:%S %z %Y")
|
||||||
|
|||||||
@@ -12,11 +12,11 @@ class Logger:
|
|||||||
console_handler = logging.StreamHandler()
|
console_handler = logging.StreamHandler()
|
||||||
console_handler.setFormatter(formatter)
|
console_handler.setFormatter(formatter)
|
||||||
|
|
||||||
logger_file.setLevel(logging.DEBUG)
|
self.logger_file.setLevel(logging.DEBUG)
|
||||||
logger_file.addHandler(file_handler)
|
self.logger_file.addHandler(file_handler)
|
||||||
|
|
||||||
logger_cli.setLevel(logging.INFO)
|
self.logger_cli.setLevel(logging.INFO)
|
||||||
logger_cli.addHandler(console_handler)
|
self.logger_cli.addHandler(console_handler)
|
||||||
|
|
||||||
def send(self, level_log, type_log, message):
|
def send(self, level_log, type_log, message):
|
||||||
if self.type_log == "file":
|
if self.type_log == "file":
|
||||||
|
|||||||
+75
-290
@@ -5,140 +5,47 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Analytics - LocalBooru</title>
|
<title>Analytics - LocalBooru</title>
|
||||||
<style>
|
<style>
|
||||||
:root {
|
:root { --bg-main: #1e1e1e; --bg-header: #252525; --bg-panel: #222; --bg-box: #2a2a2a; --bg-input: #333; --text-main: #eee; --text-muted: #aaa; --border-color: #444; --link-color: #4da8da; --color-g: #4caf50; --color-s: #ff9800; --color-q: #ffeb3b; --color-e: #f44336; }
|
||||||
--bg-main: #1e1e1e;
|
|
||||||
--bg-header: #252525;
|
|
||||||
--bg-panel: #222222;
|
|
||||||
--bg-box: #2a2a2a;
|
|
||||||
--bg-input: #333;
|
|
||||||
--text-main: #eee;
|
|
||||||
--text-muted: #aaa;
|
|
||||||
--border-color: #444;
|
|
||||||
--link-color: #4da8da;
|
|
||||||
|
|
||||||
--color-g: #4caf50;
|
|
||||||
--color-s: #ff9800;
|
|
||||||
--color-q: #ffeb3b;
|
|
||||||
--color-e: #f44336;
|
|
||||||
}
|
|
||||||
|
|
||||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||||
|
body { background-color: var(--bg-main); color: var(--text-main); font-family: sans-serif; font-size: 13px; }
|
||||||
|
|
||||||
body {
|
header { display: flex; align-items: center; background-color: var(--bg-header); padding: 10px 20px; border-bottom: 1px solid var(--border-color); gap: 15px; flex-wrap: wrap; }
|
||||||
background-color: var(--bg-main);
|
|
||||||
color: var(--text-main);
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
header {
|
|
||||||
display: flex; align-items: center; background-color: var(--bg-header);
|
|
||||||
padding: 10px 20px; border-bottom: 1px solid var(--border-color); gap: 15px; flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
.logo { font-weight: bold; font-size: 18px; color: white; text-decoration: none; }
|
.logo { font-weight: bold; font-size: 18px; color: white; text-decoration: none; }
|
||||||
.analytics-link { color: var(--link-color); text-decoration: none; font-size: 12px; font-weight: bold;}
|
.analytics-link { color: var(--link-color); text-decoration: none; font-size: 12px; font-weight: bold;}
|
||||||
|
|
||||||
/* Search & Autocomplete */
|
|
||||||
.search-wrapper { flex-grow: 1; max-width: 400px; position: relative; }
|
.search-wrapper { flex-grow: 1; max-width: 400px; position: relative; }
|
||||||
.search-wrapper input {
|
.search-wrapper input { width: 100%; background-color: var(--bg-input); border: 1px solid var(--border-color); color: white; padding: 6px 10px; border-radius: 3px; outline: none; }
|
||||||
width: 100%; background-color: var(--bg-input); border: 1px solid var(--border-color);
|
.autocomplete-list { position: absolute; top: 100%; left: 0; right: 0; background-color: var(--bg-box); border: 1px solid var(--border-color); border-radius: 3px; margin-top: 4px; list-style: none; z-index: 1000; max-height: 250px; overflow-y: auto; box-shadow: 0 4px 10px rgba(0,0,0,0.5); display: none; }
|
||||||
color: white; padding: 6px 10px; border-radius: 3px; outline: none;
|
|
||||||
}
|
|
||||||
.search-wrapper input:focus { border-color: var(--text-muted); }
|
|
||||||
.autocomplete-list {
|
|
||||||
position: absolute; top: 100%; left: 0; right: 0; background-color: var(--bg-box);
|
|
||||||
border: 1px solid var(--border-color); border-radius: 3px; margin-top: 4px;
|
|
||||||
list-style: none; z-index: 1000; max-height: 250px; overflow-y: auto;
|
|
||||||
box-shadow: 0 4px 10px rgba(0,0,0,0.5); display: none;
|
|
||||||
}
|
|
||||||
.autocomplete-item { padding: 8px 10px; cursor: pointer; display: flex; justify-content: space-between; border-bottom: 1px solid #333; }
|
.autocomplete-item { padding: 8px 10px; cursor: pointer; display: flex; justify-content: space-between; border-bottom: 1px solid #333; }
|
||||||
.autocomplete-item:last-child { border-bottom: none; }
|
|
||||||
.autocomplete-item:hover { background-color: var(--bg-input); }
|
.autocomplete-item:hover { background-color: var(--bg-input); }
|
||||||
.autocomplete-count { color: var(--text-muted); font-size: 12px; }
|
.autocomplete-count { color: var(--text-muted); font-size: 12px; }
|
||||||
|
|
||||||
main { padding: 20px; max-width: 1400px; margin: 0 auto; }
|
main { padding: 20px; max-width: 1400px; margin: 0 auto; }
|
||||||
h1 { font-size: 20px; margin-bottom: 20px; color: white; }
|
h1 { font-size: 20px; margin-bottom: 20px; color: white; }
|
||||||
|
.dashboard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
|
||||||
.dashboard-grid {
|
.panel { background-color: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 4px; padding: 15px; display: flex; flex-direction: column; gap: 15px; }
|
||||||
display: grid;
|
.panel-header { font-size: 16px; font-weight: bold; color: var(--link-color); border-bottom: 1px solid var(--border-color); padding-bottom: 10px; }
|
||||||
grid-template-columns: repeat(3, 1fr);
|
|
||||||
gap: 20px;
|
|
||||||
align-items: start;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Панели */
|
|
||||||
.panel {
|
|
||||||
background-color: var(--bg-panel); border: 1px solid var(--border-color);
|
|
||||||
border-radius: 4px; padding: 15px; display: flex; flex-direction: column; gap: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel-header {
|
|
||||||
font-size: 16px; font-weight: bold; color: var(--link-color);
|
|
||||||
display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--border-color);
|
|
||||||
padding-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Левая колонка - Статистика */
|
|
||||||
.left-col { display: flex; flex-direction: column; gap: 20px; }
|
.left-col { display: flex; flex-direction: column; gap: 20px; }
|
||||||
|
|
||||||
.rating-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
|
.rating-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
|
||||||
.rating-box {
|
.rating-box { background-color: var(--bg-box); border: 1px solid var(--border-color); border-radius: 4px; padding: 15px; text-align: center; }
|
||||||
background-color: var(--bg-box); border: 1px solid var(--border-color);
|
|
||||||
border-radius: 4px; padding: 15px; text-align: center;
|
|
||||||
}
|
|
||||||
.rating-box.e { border-top: 2px solid var(--color-e); }
|
|
||||||
.rating-box.s { border-top: 2px solid var(--color-s); }
|
|
||||||
.rating-box.q { border-top: 2px solid var(--color-q); }
|
|
||||||
.rating-box.g { border-top: 2px solid var(--color-g); }
|
|
||||||
|
|
||||||
.rating-title { font-weight: bold; font-size: 15px; margin-bottom: 5px; }
|
|
||||||
.rating-box.e .rating-title { color: var(--color-e); }
|
|
||||||
.rating-box.s .rating-title { color: var(--color-s); }
|
|
||||||
.rating-box.q .rating-title { color: var(--color-q); }
|
|
||||||
.rating-box.g .rating-title { color: var(--color-g); }
|
|
||||||
|
|
||||||
.rating-count { color: var(--text-muted); margin-bottom: 3px; }
|
|
||||||
.rating-size { font-weight: bold; }
|
|
||||||
|
|
||||||
.data-list { list-style: none; display: flex; flex-direction: column; gap: 8px;}
|
.data-list { list-style: none; display: flex; flex-direction: column; gap: 8px;}
|
||||||
.data-row { display: flex; justify-content: space-between; border-bottom: 1px solid #333; padding-bottom: 4px; }
|
.data-row { display: flex; justify-content: space-between; border-bottom: 1px solid #333; padding-bottom: 4px; }
|
||||||
.data-row.total { color: var(--color-g); font-weight: bold; border-top: 1px solid var(--border-color); padding-top: 8px; border-bottom: none;}
|
.table-header { display: flex; justify-content: space-between; font-weight: bold; margin-bottom: 10px; color: white;}
|
||||||
.data-row .val { font-weight: bold; }
|
.tag-row { display: flex; justify-content: space-between; margin-bottom: 8px; }
|
||||||
|
.tag-row a { color: var(--link-color); text-decoration: none; }
|
||||||
.sub-text { font-size: 11px; color: var(--text-muted); margin-top: 5px; }
|
.tag-row a:hover { text-decoration: underline; }
|
||||||
|
.pagination { display: flex; justify-content: center; gap: 5px; margin-top: 15px; align-items: center; }
|
||||||
|
.page-btn { background: transparent; border: 1px solid var(--border-color); color: white; padding: 4px 10px; border-radius: 3px; cursor: pointer; }
|
||||||
|
|
||||||
.ext-block { margin-bottom: 10px; }
|
.ext-block { margin-bottom: 10px; }
|
||||||
.ext-block a { color: var(--link-color); text-decoration: none; word-break: break-all; }
|
.ext-block a { color: var(--link-color); text-decoration: none; word-break: break-all; }
|
||||||
.ext-block a:hover { text-decoration: underline; }
|
.ext-block a:hover { text-decoration: underline; }
|
||||||
|
|
||||||
/* Таблицы тегов (Центр и Правая) */
|
@media (max-width: 1000px) { .dashboard-grid { grid-template-columns: 1fr 1fr; } .left-col { grid-column: 1/-1; display: grid; grid-template-columns: 1fr 1fr; } }
|
||||||
.table-header { display: flex; justify-content: space-between; font-weight: bold; margin-bottom: 10px; color: white;}
|
@media (max-width: 700px) { .dashboard-grid, .left-col { grid-template-columns: 1fr; } header { flex-wrap: wrap; } .search-wrapper { order: 3; min-width: 100%; margin-top: 10px;} }
|
||||||
.tag-row { display: flex; justify-content: space-between; margin-bottom: 8px; }
|
|
||||||
.tag-row a { color: var(--link-color); text-decoration: none; }
|
|
||||||
.tag-row a:hover { text-decoration: underline; }
|
|
||||||
|
|
||||||
/* Пагинация */
|
|
||||||
.pagination { display: flex; justify-content: center; gap: 5px; margin-top: 15px; align-items: center; }
|
|
||||||
.page-btn {
|
|
||||||
background-color: transparent; border: 1px solid var(--border-color); color: white;
|
|
||||||
padding: 4px 10px; border-radius: 3px; cursor: pointer;
|
|
||||||
}
|
|
||||||
.page-btn:hover { background-color: var(--bg-input); }
|
|
||||||
.page-info { font-weight: bold; padding: 0 10px; }
|
|
||||||
|
|
||||||
@media (max-width: 1000px) {
|
|
||||||
.dashboard-grid { grid-template-columns: 1fr 1fr; }
|
|
||||||
.left-col { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
|
|
||||||
}
|
|
||||||
@media (max-width: 700px) {
|
|
||||||
.dashboard-grid, .left-col { grid-template-columns: 1fr; }
|
|
||||||
header { justify-content: space-between; }
|
|
||||||
.search-wrapper { order: 3; max-width: 100%; width: 100%; margin-top: 10px;}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<header>
|
<header>
|
||||||
<a href="index.html" class="logo">LocalBooru</a>
|
<a href="index.html" class="logo">LocalBooru</a>
|
||||||
<a href="analytics.html" class="analytics-link">📊 Analytics</a>
|
<a href="analytics.html" class="analytics-link">📊 Analytics</a>
|
||||||
@@ -150,68 +57,42 @@
|
|||||||
|
|
||||||
<main>
|
<main>
|
||||||
<h1>Database Analytics</h1>
|
<h1>Database Analytics</h1>
|
||||||
|
|
||||||
<div class="dashboard-grid" id="analyticsGrid" style="display: none;">
|
<div class="dashboard-grid" id="analyticsGrid" style="display: none;">
|
||||||
|
|
||||||
<!-- Левая колонка -->
|
|
||||||
<div class="left-col">
|
<div class="left-col">
|
||||||
<div class="panel">
|
<div class="panel">
|
||||||
<div class="panel-header">⭐ Rating Breakdown</div>
|
<div class="panel-header">⭐ Rating Breakdown</div>
|
||||||
<div class="rating-grid" id="ratingContainer">
|
<div class="rating-grid" id="ratingContainer"></div>
|
||||||
<!-- JS inject -->
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="panel">
|
<div class="panel">
|
||||||
<div class="panel-header">📁 Storage Breakdown</div>
|
<div class="panel-header">📁 Storage Breakdown</div>
|
||||||
<div class="data-list" id="storageContainer">
|
<div class="data-list" id="storageContainer"></div>
|
||||||
<!-- JS inject -->
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="panel">
|
<div class="panel">
|
||||||
<div class="panel-header">🎨 Media Types (in img/)</div>
|
<div class="panel-header">🎨 Media Types (in img/)</div>
|
||||||
<div class="data-list" id="mediaContainer">
|
<div class="data-list" id="mediaContainer"></div>
|
||||||
<!-- JS inject -->
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="panel">
|
<div class="panel">
|
||||||
<div class="panel-header">📏 Extremes (Click to view)</div>
|
<div class="panel-header">📏 Extremes (Click to view)</div>
|
||||||
<div id="extremesContainer">
|
<div id="extremesContainer"></div>
|
||||||
<!-- JS inject -->
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Центральная колонка -->
|
|
||||||
<div class="panel">
|
<div class="panel">
|
||||||
<div class="panel-header">🏷️ All Tags List</div>
|
<div class="panel-header">🏷️ All Tags List</div>
|
||||||
<div class="table-header"><span>Tag</span><span>Count</span></div>
|
<div class="table-header"><span>Tag</span><span>Count</span></div>
|
||||||
<div class="data-list" id="tagsListContainer"></div>
|
<div class="data-list" id="tagsListContainer"></div>
|
||||||
<div class="pagination">
|
<div class="pagination"><button class="page-btn" onclick="prevTagPage()">‹</button><span id="tagPageInfo" style="font-weight:bold; padding:0 10px;"></span><button class="page-btn" onclick="nextTagPage()">›</button></div>
|
||||||
<button class="page-btn" onclick="prevTagPage()">«</button>
|
|
||||||
<button class="page-btn" onclick="prevTagPage()">‹</button>
|
|
||||||
<span class="page-info" id="tagPageInfo">1 / 1</span>
|
|
||||||
<button class="page-btn" onclick="nextTagPage()">›</button>
|
|
||||||
<button class="page-btn" onclick="nextTagPage()">»</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Правая колонка -->
|
|
||||||
<div class="panel">
|
<div class="panel">
|
||||||
<div class="panel-header">🔗 Top 30 Tag Pairs</div>
|
<div class="panel-header">🔗 Top 30 Tag Pairs</div>
|
||||||
<div class="table-header"><span>Pair</span><span>Count</span></div>
|
<div class="table-header"><span>Pair</span><span>Count</span></div>
|
||||||
<div class="data-list" id="pairsContainer">
|
<div class="data-list" id="pairsContainer"></div>
|
||||||
<!-- JS inject -->
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// Инициализация поиска с автодополнением
|
|
||||||
const searchInput = document.getElementById('searchInput');
|
const searchInput = document.getElementById('searchInput');
|
||||||
const list = document.getElementById('autocompleteList');
|
const list = document.getElementById('autocompleteList');
|
||||||
let debounceTimer;
|
let debounceTimer;
|
||||||
@@ -220,22 +101,15 @@
|
|||||||
clearTimeout(debounceTimer);
|
clearTimeout(debounceTimer);
|
||||||
const words = searchInput.value.split(' ');
|
const words = searchInput.value.split(' ');
|
||||||
const currentWord = words[words.length - 1];
|
const currentWord = words[words.length - 1];
|
||||||
|
|
||||||
if (currentWord.length < 2) { list.style.display = 'none'; return; }
|
if (currentWord.length < 2) { list.style.display = 'none'; return; }
|
||||||
|
|
||||||
debounceTimer = setTimeout(async () => {
|
debounceTimer = setTimeout(async () => {
|
||||||
const req = { type: "autocomplete", q: currentWord };
|
const req = { type: "autocomplete", q: currentWord };
|
||||||
|
const data = await mockAutocompleteAPI(req);
|
||||||
|
|
||||||
// РЕАЛЬНОЕ API: const data = await fetch('/api', ...);
|
|
||||||
const data = await mockAutocompleteAPI(req);
|
|
||||||
|
|
||||||
if (data.length === 0) { list.style.display = 'none'; return; }
|
if (data.length === 0) { list.style.display = 'none'; return; }
|
||||||
|
|
||||||
list.innerHTML = data.map(item => `
|
list.innerHTML = data.map(item => `<li class="autocomplete-item" data-tag="${item.tag}"><span>${item.tag}</span><span class="autocomplete-count">${item.count}</span></li>`).join('');
|
||||||
<li class="autocomplete-item" data-tag="${item.tag}">
|
|
||||||
<span>${item.tag}</span><span class="autocomplete-count">${item.count}</span>
|
|
||||||
</li>
|
|
||||||
`).join('');
|
|
||||||
list.style.display = 'block';
|
list.style.display = 'block';
|
||||||
|
|
||||||
list.querySelectorAll('.autocomplete-item').forEach(li => {
|
list.querySelectorAll('.autocomplete-item').forEach(li => {
|
||||||
@@ -249,167 +123,78 @@
|
|||||||
}, 200);
|
}, 200);
|
||||||
});
|
});
|
||||||
|
|
||||||
document.addEventListener('click', (e) => {
|
document.addEventListener('click', (e) => { if (e.target !== searchInput && e.target !== list) list.style.display = 'none'; });
|
||||||
if (e.target !== searchInput && e.target !== list) list.style.display = 'none';
|
searchInput.addEventListener('keypress', (e) => { if(e.key === 'Enter') window.location.href = `index.html?query=${searchInput.value.trim()}`; });
|
||||||
});
|
|
||||||
|
|
||||||
searchInput.addEventListener('keypress', (e) => {
|
let allTags = [], currentTagPage = 1, tagsPerPage = 22;
|
||||||
if(e.key === 'Enter') window.location.href = `index.html?query=${searchInput.value.trim()}`;
|
|
||||||
});
|
|
||||||
|
|
||||||
// Состояние для пагинации тегов (для имитации UI)
|
|
||||||
let allTags = [];
|
|
||||||
let currentTagPage = 1;
|
|
||||||
const tagsPerPage = 22; // Примерно столько строк влезает на скрине
|
|
||||||
|
|
||||||
async function fetchAnalytics() {
|
async function fetchAnalytics() {
|
||||||
const requestBody = { type: "analytics" };
|
const data = await mockAnalyticsAPI({ type: "analytics" });
|
||||||
|
|
||||||
|
document.getElementById('ratingContainer').innerHTML = Object.keys(data.ratings).map(k => `
|
||||||
|
<div class="rating-box" style="border-top: 2px solid var(--color-${k[0]})">
|
||||||
|
<div style="font-weight:bold; color:var(--color-${k[0]}); margin-bottom:5px;">${k.charAt(0).toUpperCase() + k.slice(1)}</div>
|
||||||
|
<div style="color:var(--text-muted); margin-bottom:3px;">${data.ratings[k].count} items</div>
|
||||||
|
<div style="font-weight:bold;">${data.ratings[k].size}</div>
|
||||||
|
</div>
|
||||||
|
`).join('');
|
||||||
|
|
||||||
try {
|
|
||||||
// РЕАЛЬНОЕ API: fetch('/api', ...);
|
|
||||||
const data = await generateMockAnalyticsData();
|
|
||||||
renderAnalytics(data);
|
|
||||||
document.getElementById('analyticsGrid').style.display = 'grid';
|
|
||||||
} catch (error) {
|
|
||||||
console.error(error);
|
|
||||||
document.body.innerHTML += `<div style="text-align:center; padding:50px;">Ошибка загрузки</div>`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderAnalytics(data) {
|
|
||||||
// 1. Ratings
|
|
||||||
const r = data.ratings;
|
|
||||||
document.getElementById('ratingContainer').innerHTML = `
|
|
||||||
<div class="rating-box e"><div class="rating-title">Explicit</div><div class="rating-count">${r.explicit.count} items</div><div class="rating-size">${r.explicit.size}</div></div>
|
|
||||||
<div class="rating-box s"><div class="rating-title">Sensitive</div><div class="rating-count">${r.sensitive.count} items</div><div class="rating-size">${r.sensitive.size}</div></div>
|
|
||||||
<div class="rating-box q"><div class="rating-title">Questionable</div><div class="rating-count">${r.questionable.count} items</div><div class="rating-size">${r.questionable.size}</div></div>
|
|
||||||
<div class="rating-box g"><div class="rating-title">General</div><div class="rating-count">${r.general.count} items</div><div class="rating-size">${r.general.size}</div></div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
// 2. Storage
|
|
||||||
const s = data.storage;
|
const s = data.storage;
|
||||||
document.getElementById('storageContainer').innerHTML = `
|
document.getElementById('storageContainer').innerHTML = `
|
||||||
<div class="data-row"><span>Logs (logs/):</span><span class="val">${s.logs}</span></div>
|
<div class="data-row"><span>Logs:</span><span class="val">${s.logs}</span></div>
|
||||||
<div class="data-row"><span>Database (json_db/):</span><span class="val">${s.db}</span></div>
|
<div class="data-row"><span>DB:</span><span class="val">${s.db}</span></div>
|
||||||
<div class="data-row"><span>Thumbnails (thumb/):</span><span class="val">${s.thumb}</span></div>
|
<div class="data-row"><span>Thumb:</span><span class="val">${s.thumb}</span></div>
|
||||||
<div class="data-row"><span>Main Media (img/):</span><span class="val">${s.main}</span></div>
|
<div class="data-row"><span>Img:</span><span class="val">${s.main}</span></div>
|
||||||
<div class="data-row total"><span>GRAND TOTAL:</span><span class="val">${s.total}</span></div>
|
<div class="data-row" style="color:var(--color-g); font-weight:bold; border-top:1px solid #444; border-bottom:none; padding-top:8px;"><span>GRAND TOTAL:</span><span>${s.total}</span></div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
// 3. Media Types
|
|
||||||
const m = data.media;
|
const m = data.media;
|
||||||
document.getElementById('mediaContainer').innerHTML = `
|
document.getElementById('mediaContainer').innerHTML = `
|
||||||
<div class="data-row"><span>Static Images (IMG):</span><span class="val">${m.img_size}</span></div>
|
<div class="data-row"><span>IMG:</span><span class="val">${m.img_size}</span></div>
|
||||||
<div class="data-row"><span>Videos (VID):</span><span class="val">${m.vid_size}</span></div>
|
<div class="data-row"><span>VID:</span><span class="val">${m.vid_size}</span></div>
|
||||||
<div class="data-row"><span>Animations (GIF):</span><span class="val">${m.gif_size}</span></div>
|
<div class="data-row"><span>GIF:</span><span class="val">${m.gif_size}</span></div>
|
||||||
<div class="sub-text">Total Valid Items Analyzed: <b>${m.total_items}</b><br>Average Weight per item: <b>${m.avg_weight}</b></div>
|
<div style="font-size:11px; color:var(--text-muted); margin-top:5px;">Total: <b>${m.total_items}</b> | Avg: <b>${m.avg_weight}</b></div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
// 4. Extremes
|
|
||||||
const e = data.extremes;
|
const e = data.extremes;
|
||||||
document.getElementById('extremesContainer').innerHTML = `
|
document.getElementById('extremesContainer').innerHTML = `
|
||||||
<div class="ext-block"><b>Largest Resolution:</b> ${e.largest.val}<br>(<a href="post.html?id=${e.largest.id}">${e.largest.file}</a>)</div>
|
<div class="ext-block"><b>Largest:</b> ${e.largest.val}<br>(<a href="post.html?id=${e.largest.id}">${e.largest.file}</a>)</div>
|
||||||
<div class="ext-block"><b>Smallest Resolution:</b> ${e.smallest.val}<br>(<a href="post.html?id=${e.smallest.id}">${e.smallest.file}</a>)</div>
|
<div class="ext-block"><b>Smallest:</b> ${e.smallest.val}<br>(<a href="post.html?id=${e.smallest.id}">${e.smallest.file}</a>)</div>
|
||||||
<div class="ext-block"><b>Heaviest File:</b> ${e.heaviest.val}<br>(<a href="post.html?id=${e.heaviest.id}">${e.heaviest.file}</a>)</div>
|
<div class="ext-block"><b>Heaviest:</b> ${e.heaviest.val}<br>(<a href="post.html?id=${e.heaviest.id}">${e.heaviest.file}</a>)</div>
|
||||||
<div class="ext-block"><b>Lightest File:</b> ${e.lightest.val}<br>(<a href="post.html?id=${e.lightest.id}">${e.lightest.file}</a>)</div>
|
<div class="ext-block"><b>Lightest:</b> ${e.lightest.val}<br>(<a href="post.html?id=${e.lightest.id}">${e.lightest.file}</a>)</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
// 5. Pairs (Right Column)
|
document.getElementById('pairsContainer').innerHTML = data.top_pairs.map(p => `<div class="tag-row"><a href="index.html?query=${p.pair.replace(/ \+ /g, '+')}">${p.pair}</a> <span>${p.count}</span></div>`).join('');
|
||||||
const pairsHtml = data.top_pairs.map(p => `
|
|
||||||
<div class="tag-row"><a href="index.html?query=${p.pair.replace(/ \+ /g, '+')}">${p.pair}</a> <span>${p.count}</span></div>
|
|
||||||
`).join('');
|
|
||||||
document.getElementById('pairsContainer').innerHTML = pairsHtml;
|
|
||||||
|
|
||||||
// 6. Tags (Center Column + Pagination Setup)
|
allTags = data.all_tags; renderTagsPage();
|
||||||
allTags = data.all_tags;
|
document.getElementById('analyticsGrid').style.display = 'grid';
|
||||||
renderTagsPage();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Логика пагинации для тегов
|
|
||||||
function renderTagsPage() {
|
function renderTagsPage() {
|
||||||
const totalPages = Math.ceil(allTags.length / tagsPerPage);
|
document.getElementById('tagPageInfo').innerText = `${currentTagPage} / ${Math.ceil(allTags.length / tagsPerPage)}`;
|
||||||
document.getElementById('tagPageInfo').innerText = `${currentTagPage} / ${totalPages}`;
|
|
||||||
|
|
||||||
const start = (currentTagPage - 1) * tagsPerPage;
|
const start = (currentTagPage - 1) * tagsPerPage;
|
||||||
const end = start + tagsPerPage;
|
document.getElementById('tagsListContainer').innerHTML = allTags.slice(start, start + tagsPerPage).map(t => `<div class="tag-row"><a href="index.html?query=${t.name}">${t.name}</a> <span>${t.count}</span></div>`).join('');
|
||||||
const pageTags = allTags.slice(start, end);
|
|
||||||
|
|
||||||
document.getElementById('tagsListContainer').innerHTML = pageTags.map(t => `
|
|
||||||
<div class="tag-row"><a href="index.html?query=${t.name}">${t.name}</a> <span>${t.count}</span></div>
|
|
||||||
`).join('');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
window.prevTagPage = () => { if(currentTagPage > 1) { currentTagPage--; renderTagsPage(); }};
|
window.prevTagPage = () => { if(currentTagPage > 1) { currentTagPage--; renderTagsPage(); }};
|
||||||
window.nextTagPage = () => { if(currentTagPage < Math.ceil(allTags.length / tagsPerPage)) { currentTagPage++; renderTagsPage(); }};
|
window.nextTagPage = () => { if(currentTagPage < Math.ceil(allTags.length/tagsPerPage)) { currentTagPage++; renderTagsPage(); }};
|
||||||
|
|
||||||
// --- ВРЕМЕННЫЕ ЗАГЛУШКИ ДЛЯ API ---
|
// --- ЗАГЛУШКИ ---
|
||||||
function mockAutocompleteAPI(req) {
|
function mockAutocompleteAPI(req) { return new Promise(res => { const db = [{tag: "long_hair", count: 8184}, {tag: "1girl", count: 11061}]; res(db.filter(t => t.tag.includes(req.q.toLowerCase()))); }); }
|
||||||
return new Promise(res => {
|
|
||||||
const db = [
|
function mockAnalyticsAPI() {
|
||||||
{tag: "long_hair", count: 8184}, {tag: "long_sleeves", count: 2828},
|
return new Promise(res => { setTimeout(() => { res({
|
||||||
{tag: "looking_at_viewer", count: 8062}, {tag: "1girl", count: 11061},
|
ratings: { explicit: { count: 1605, size: "4.52 GB" }, sensitive: { count: 6623, size: "19.35 GB" }, questionable: { count: 1591, size: "4.72 GB" }, general: { count: 4184, size: "10.29 GB" } },
|
||||||
{tag: "blue_hair", count: 3279}, {tag: "blue_eyes", count: 3279}
|
storage: { logs: "14.44 MB", db: "24.39 MB", thumb: "331.45 MB", main: "38.88 GB", total: "39.24 GB" },
|
||||||
];
|
media: { img_size: "38.56 GB", vid_size: "140.80 MB", gif_size: "181.30 MB", total_items: 14003, avg_weight: "2.84 MB" },
|
||||||
res(db.filter(t => t.tag.includes(req.q.toLowerCase())));
|
extremes: {
|
||||||
});
|
largest: { val: "9921x14031", id: "5a63c", file: "5a63c28906dc7e0e...png" },
|
||||||
}
|
smallest: { val: "240x280", id: "8fc61", file: "8fc614e712ae2ad...gif" },
|
||||||
|
heaviest: { val: "65.21 MB", id: "4ab6a", file: "4ab6acf0a32c61...png" },
|
||||||
function generateMockAnalyticsData() {
|
lightest: { val: "6.49 KB", id: "28c67", file: "28c679ea3483e1...png" }
|
||||||
return new Promise(resolve => {
|
},
|
||||||
setTimeout(() => {
|
all_tags: Array.from({length: 100}, (_,i) => ({name:`tag_${i}`, count:100-i})),
|
||||||
resolve({
|
top_pairs: [{ pair: "1girl + highres", count: 10236 }, { pair: "1girl + solo", count: 8902 }]
|
||||||
ratings: {
|
}); }, 300);});
|
||||||
explicit: { count: 1605, size: "4.52 GB" },
|
|
||||||
sensitive: { count: 6623, size: "19.35 GB" },
|
|
||||||
questionable: { count: 1591, size: "4.72 GB" },
|
|
||||||
general: { count: 4184, size: "10.29 GB" }
|
|
||||||
},
|
|
||||||
storage: {
|
|
||||||
logs: "14.44 MB", db: "24.39 MB", thumb: "331.45 MB",
|
|
||||||
main: "38.88 GB", total: "39.24 GB"
|
|
||||||
},
|
|
||||||
media: {
|
|
||||||
img_size: "38.56 GB", vid_size: "140.80 MB", gif_size: "181.30 MB",
|
|
||||||
total_items: 14003, avg_weight: "2.84 MB"
|
|
||||||
},
|
|
||||||
extremes: {
|
|
||||||
largest: { val: "9921x14031", id: "5a63c", file: "5a63c28906dc7e0e...png" },
|
|
||||||
smallest: { val: "240x280", id: "8fc61", file: "8fc614e712ae2ad...gif" },
|
|
||||||
heaviest: { val: "65.21 MB", id: "4ab6a", file: "4ab6acf0a32c61...png" },
|
|
||||||
lightest: { val: "6.49 KB", id: "28c67", file: "28c679ea3483e1...png" }
|
|
||||||
},
|
|
||||||
// Генерируем массив на 765 страниц для имитации пагинации
|
|
||||||
all_tags: Array.from({length: 765 * 22}, (_, i) => ({
|
|
||||||
name: ["highres", "1girl", "solo", "virtual_youtuber", "long_hair", "looking_at_viewer", "breasts", "absurdres", "blush", "hololive", "smile", "open_mouth", "animal_ears", "multicolored_hair"][i % 14] + (i > 13 ? `_${i}` : ''),
|
|
||||||
count: 12700 - i
|
|
||||||
})),
|
|
||||||
top_pairs: [
|
|
||||||
{ pair: "1girl + highres", count: 10236 },
|
|
||||||
{ pair: "1girl + solo", count: 8902 },
|
|
||||||
{ pair: "highres + solo", count: 8557 },
|
|
||||||
{ pair: "highres + virtual_youtuber", count: 8192 },
|
|
||||||
{ pair: "highres + long_hair", count: 7531 },
|
|
||||||
{ pair: "highres + looking_at_viewer", count: 7479 },
|
|
||||||
{ pair: "1girl + virtual_youtuber", count: 7315 },
|
|
||||||
{ pair: "breasts + highres", count: 7096 },
|
|
||||||
{ pair: "1girl + looking_at_viewer", count: 7015 },
|
|
||||||
{ pair: "absurdres + highres", count: 6742 },
|
|
||||||
{ pair: "1girl + long_hair", count: 6560 },
|
|
||||||
{ pair: "1girl + breasts", count: 6407 },
|
|
||||||
{ pair: "looking_at_viewer + solo", count: 6230 },
|
|
||||||
{ pair: "solo + virtual_youtuber", count: 6011 },
|
|
||||||
{ pair: "1girl + absurdres", count: 5572 },
|
|
||||||
{ pair: "blush + highres", count: 5552 },
|
|
||||||
{ pair: "hololive + virtual_youtuber", count: 5494 },
|
|
||||||
{ pair: "long_hair + solo", count: 5490 },
|
|
||||||
{ pair: "looking_at_viewer + virtual_youtuber", count: 5332 },
|
|
||||||
{ pair: "breasts + solo", count: 5316 },
|
|
||||||
{ pair: "highres + hololive", count: 5073 },
|
|
||||||
{ pair: "breasts + virtual_youtuber", count: 5039 }
|
|
||||||
]
|
|
||||||
});
|
|
||||||
}, 300);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
fetchAnalytics();
|
fetchAnalytics();
|
||||||
|
|||||||
+143
-98
@@ -6,44 +6,29 @@
|
|||||||
<title>LocalBooru</title>
|
<title>LocalBooru</title>
|
||||||
<style>
|
<style>
|
||||||
:root {
|
:root {
|
||||||
--bg-main: #1e1e1e;
|
--bg-main: #1e1e1e; --bg-header: #252525; --bg-card: #2a2a2a;
|
||||||
--bg-header: #252525;
|
--bg-panel: #222; --bg-input: #333; --text-main: #eee;
|
||||||
--bg-card: #2a2a2a;
|
--text-muted: #aaa; --border-color: #444;
|
||||||
--bg-panel: #222;
|
|
||||||
--bg-input: #333;
|
|
||||||
--text-main: #eee;
|
|
||||||
--text-muted: #aaa;
|
|
||||||
--border-color: #444;
|
|
||||||
--color-g: #4caf50; --color-s: #ff9800; --color-q: #ffeb3b; --color-e: #f44336;
|
--color-g: #4caf50; --color-s: #ff9800; --color-q: #ffeb3b; --color-e: #f44336;
|
||||||
}
|
}
|
||||||
|
|
||||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||||
body { background-color: var(--bg-main); color: var(--text-main); font-family: sans-serif; font-size: 14px; }
|
body { background-color: var(--bg-main); color: var(--text-main); font-family: sans-serif; font-size: 14px; }
|
||||||
|
|
||||||
/* Header */
|
|
||||||
header { display: flex; align-items: center; background-color: var(--bg-header); padding: 10px 20px; border-bottom: 1px solid var(--border-color); gap: 15px; flex-wrap: wrap; }
|
header { display: flex; align-items: center; background-color: var(--bg-header); padding: 10px 20px; border-bottom: 1px solid var(--border-color); gap: 15px; flex-wrap: wrap; }
|
||||||
.logo { font-weight: bold; font-size: 18px; color: white; text-decoration: none; }
|
.logo { font-weight: bold; font-size: 18px; color: white; text-decoration: none; }
|
||||||
.analytics { color: #88bece; text-decoration: none; font-size: 12px; }
|
.analytics { color: #88bece; text-decoration: none; font-size: 12px; }
|
||||||
|
|
||||||
/* Search & Autocomplete */
|
|
||||||
.search-wrapper { flex-grow: 1; max-width: 400px; position: relative; }
|
.search-wrapper { flex-grow: 1; max-width: 400px; position: relative; }
|
||||||
.search-wrapper input { width: 100%; background-color: var(--bg-input); border: 1px solid var(--border-color); color: white; padding: 6px 10px; border-radius: 3px; outline: none; }
|
.search-wrapper input { width: 100%; background-color: var(--bg-input); border: 1px solid var(--border-color); color: white; padding: 6px 10px; border-radius: 3px; outline: none; }
|
||||||
.search-wrapper input:focus { border-color: var(--text-muted); }
|
.search-wrapper input:focus { border-color: var(--text-muted); }
|
||||||
|
|
||||||
.autocomplete-list {
|
.autocomplete-list { position: absolute; top: 100%; left: 0; right: 0; background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: 3px; margin-top: 4px; list-style: none; z-index: 1000; max-height: 250px; overflow-y: auto; box-shadow: 0 4px 10px rgba(0,0,0,0.5); display: none; }
|
||||||
position: absolute; top: 100%; left: 0; right: 0; background-color: var(--bg-card);
|
.autocomplete-item { padding: 8px 10px; cursor: pointer; display: flex; justify-content: space-between; border-bottom: 1px solid #333; }
|
||||||
border: 1px solid var(--border-color); border-radius: 3px; margin-top: 4px;
|
|
||||||
list-style: none; z-index: 1000; max-height: 250px; overflow-y: auto;
|
|
||||||
box-shadow: 0 4px 10px rgba(0,0,0,0.5); display: none;
|
|
||||||
}
|
|
||||||
.autocomplete-item {
|
|
||||||
padding: 8px 10px; cursor: pointer; display: flex; justify-content: space-between; border-bottom: 1px solid #333;
|
|
||||||
}
|
|
||||||
.autocomplete-item:last-child { border-bottom: none; }
|
.autocomplete-item:last-child { border-bottom: none; }
|
||||||
.autocomplete-item:hover { background-color: var(--bg-input); }
|
.autocomplete-item:hover { background-color: var(--bg-input); }
|
||||||
.autocomplete-count { color: var(--text-muted); font-size: 12px; }
|
.autocomplete-count { color: var(--text-muted); font-size: 12px; }
|
||||||
|
|
||||||
/* Filters */
|
|
||||||
.rating-filters { display: flex; gap: 5px; }
|
.rating-filters { display: flex; gap: 5px; }
|
||||||
.rating-btn { background: transparent; color: white; border: 1px solid; width: 24px; height: 24px; border-radius: 3px; cursor: pointer; font-size: 12px; font-weight: bold; }
|
.rating-btn { background: transparent; color: white; border: 1px solid; width: 24px; height: 24px; border-radius: 3px; cursor: pointer; font-size: 12px; font-weight: bold; }
|
||||||
.rating-btn.active { opacity: 1; }
|
.rating-btn.active { opacity: 1; }
|
||||||
@@ -53,16 +38,22 @@
|
|||||||
#btn-s { border-color: var(--color-s); color: var(--color-s); }
|
#btn-s { border-color: var(--color-s); color: var(--color-s); }
|
||||||
#btn-g { border-color: var(--color-g); color: var(--color-g); }
|
#btn-g { border-color: var(--color-g); color: var(--color-g); }
|
||||||
|
|
||||||
/* Main Content */
|
|
||||||
main { padding: 20px; max-width: 1600px; margin: 0 auto; }
|
main { padding: 20px; max-width: 1600px; margin: 0 auto; }
|
||||||
.results-header { font-size: 18px; font-weight: bold; margin-bottom: 20px; }
|
.results-header { font-size: 18px; font-weight: bold; margin-bottom: 20px; }
|
||||||
.pagination-container { display: flex; justify-content: center; gap: 10px; margin: 20px 0; }
|
|
||||||
|
/* Pagination */
|
||||||
|
.pagination-container { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 20px 0; }
|
||||||
.pagination-btn { background-color: var(--bg-header); border: 1px solid var(--border-color); color: var(--text-muted); padding: 5px 12px; cursor: pointer; border-radius: 3px; }
|
.pagination-btn { background-color: var(--bg-header); border: 1px solid var(--border-color); color: var(--text-muted); padding: 5px 12px; cursor: pointer; border-radius: 3px; }
|
||||||
.pagination-btn:hover:not(:disabled) { background-color: var(--bg-input); color: white; }
|
.pagination-btn:hover:not(:disabled) { background-color: var(--bg-input); color: white; }
|
||||||
|
.pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||||
|
|
||||||
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
|
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
|
||||||
.card { background-color: var(--bg-card); display: flex; flex-direction: column; border-radius: 3px; overflow: hidden; }
|
.card { background-color: var(--bg-card); display: flex; flex-direction: column; border-radius: 3px; overflow: hidden; text-decoration: none; color: inherit; transition: transform 0.1s;}
|
||||||
.card-image-container { width: 100%; aspect-ratio: 1/1; background-color: #333; }
|
.card:hover { transform: translateY(-2px); }
|
||||||
|
.card-image-container { width: 100%; aspect-ratio: 1/1; background-color: #333; position: relative; }
|
||||||
|
.card-image-container img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||||||
.card-meta { padding: 6px; text-align: center; font-size: 10px; color: var(--text-muted); }
|
.card-meta { padding: 6px; text-align: center; font-size: 10px; color: var(--text-muted); }
|
||||||
|
|
||||||
.loader { text-align: center; padding: 50px; color: var(--text-muted); grid-column: 1/-1; }
|
.loader { text-align: center; padding: 50px; color: var(--text-muted); grid-column: 1/-1; }
|
||||||
|
|
||||||
@media (max-width: 600px) { .search-wrapper { order: 3; max-width: 100%; width: 100%; margin-top: 10px; } }
|
@media (max-width: 600px) { .search-wrapper { order: 3; max-width: 100%; width: 100%; margin-top: 10px; } }
|
||||||
@@ -71,8 +62,8 @@
|
|||||||
<body>
|
<body>
|
||||||
|
|
||||||
<header>
|
<header>
|
||||||
<a href="index.html" class="logo">LocalBooru</a>
|
<a href="/" class="logo">LocalBooru</a>
|
||||||
<a class="analytics" href="analytics.html">📊 Analytics</a>
|
<a class="analytics" href="/analytics">📊 Analytics</a>
|
||||||
<div class="search-wrapper">
|
<div class="search-wrapper">
|
||||||
<input type="text" id="searchInput" placeholder="Search tags...">
|
<input type="text" id="searchInput" placeholder="Search tags...">
|
||||||
<ul id="autocompleteList" class="autocomplete-list"></ul>
|
<ul id="autocompleteList" class="autocomplete-list"></ul>
|
||||||
@@ -93,13 +84,19 @@
|
|||||||
</main>
|
</main>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
const state = { page: 0, query: "", ratings: { e: true, q: true, s: true, g: true }, totalPages: 1, totalResults: 0 };
|
const state = {
|
||||||
|
page: 0,
|
||||||
|
query: "",
|
||||||
|
ratings: { e: true, q: true, s: true, g: true },
|
||||||
|
totalPages: 1,
|
||||||
|
totalResults: 0
|
||||||
|
};
|
||||||
|
|
||||||
// Инициализация
|
|
||||||
function init() {
|
function init() {
|
||||||
setupAutocomplete('searchInput', 'autocompleteList');
|
setupAutocomplete('searchInput', 'autocompleteList');
|
||||||
|
|
||||||
const searchInput = document.getElementById('searchInput');
|
const searchInput = document.getElementById('searchInput');
|
||||||
|
|
||||||
searchInput.addEventListener('keypress', (e) => {
|
searchInput.addEventListener('keypress', (e) => {
|
||||||
if (e.key === 'Enter') {
|
if (e.key === 'Enter') {
|
||||||
document.getElementById('autocompleteList').style.display = 'none';
|
document.getElementById('autocompleteList').style.display = 'none';
|
||||||
@@ -114,14 +111,21 @@
|
|||||||
const r = e.target.getAttribute('data-rating');
|
const r = e.target.getAttribute('data-rating');
|
||||||
state.ratings[r] = !state.ratings[r];
|
state.ratings[r] = !state.ratings[r];
|
||||||
e.target.classList.toggle('active', state.ratings[r]);
|
e.target.classList.toggle('active', state.ratings[r]);
|
||||||
state.page = 0; fetchData();
|
state.page = 0;
|
||||||
|
fetchData();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const urlQuery = new URLSearchParams(window.location.search).get('query');
|
||||||
|
if (urlQuery) {
|
||||||
|
state.query = urlQuery;
|
||||||
|
searchInput.value = urlQuery;
|
||||||
|
}
|
||||||
|
|
||||||
fetchData();
|
fetchData();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Логика автозаполнения
|
// --- АВТОДОПОЛНЕНИЕ ---
|
||||||
function setupAutocomplete(inputId, listId) {
|
function setupAutocomplete(inputId, listId) {
|
||||||
const input = document.getElementById(inputId);
|
const input = document.getElementById(inputId);
|
||||||
const list = document.getElementById(listId);
|
const list = document.getElementById(listId);
|
||||||
@@ -132,100 +136,141 @@
|
|||||||
const words = input.value.split(' ');
|
const words = input.value.split(' ');
|
||||||
const currentWord = words[words.length - 1];
|
const currentWord = words[words.length - 1];
|
||||||
|
|
||||||
if (currentWord.length < 2) {
|
if (currentWord.length < 2) {
|
||||||
list.style.display = 'none';
|
list.style.display = 'none';
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
debounceTimer = setTimeout(async () => {
|
debounceTimer = setTimeout(async () => {
|
||||||
const req = { type: "autocomplete", q: currentWord };
|
const req = { type: "autocomplete", q: currentWord };
|
||||||
console.log("-> Отправка API Автозаполнения:", JSON.stringify(req));
|
|
||||||
|
|
||||||
// Заглушка API. Для реального бэка: fetch('/api', { body: JSON.stringify(req)... })
|
try {
|
||||||
const data = await mockAutocompleteAPI(req);
|
const response = await fetch('/api', {
|
||||||
|
method: 'POST',
|
||||||
if (data.length === 0) {
|
headers: { 'Content-Type': 'application/json' },
|
||||||
list.style.display = 'none';
|
body: JSON.stringify(req)
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
list.innerHTML = data.map(item => `
|
|
||||||
<li class="autocomplete-item" data-tag="${item.tag}">
|
|
||||||
<span>${item.tag}</span><span class="autocomplete-count">${item.count}</span>
|
|
||||||
</li>
|
|
||||||
`).join('');
|
|
||||||
list.style.display = 'block';
|
|
||||||
|
|
||||||
list.querySelectorAll('.autocomplete-item').forEach(li => {
|
|
||||||
li.addEventListener('click', () => {
|
|
||||||
words[words.length - 1] = li.getAttribute('data-tag');
|
|
||||||
input.value = words.join(' ') + ' ';
|
|
||||||
list.style.display = 'none';
|
|
||||||
input.focus();
|
|
||||||
});
|
});
|
||||||
});
|
|
||||||
}, 200); // 200ms задержка перед запросом
|
if (!response.ok) throw new Error('Ошибка API');
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
if (!data || data.length === 0) {
|
||||||
|
list.style.display = 'none';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
list.innerHTML = data.map(item => `
|
||||||
|
<li class="autocomplete-item" data-tag="${item.tag}">
|
||||||
|
<span>${item.tag}</span><span class="autocomplete-count">${item.count}</span>
|
||||||
|
</li>
|
||||||
|
`).join('');
|
||||||
|
list.style.display = 'block';
|
||||||
|
|
||||||
|
list.querySelectorAll('.autocomplete-item').forEach(li => {
|
||||||
|
li.addEventListener('click', () => {
|
||||||
|
words[words.length - 1] = li.getAttribute('data-tag');
|
||||||
|
input.value = words.join(' ') + ' ';
|
||||||
|
list.style.display = 'none';
|
||||||
|
input.focus();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
}
|
||||||
|
}, 200);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Скрываем список при клике вне него
|
|
||||||
document.addEventListener('click', (e) => {
|
document.addEventListener('click', (e) => {
|
||||||
if (e.target !== input && e.target !== list) list.style.display = 'none';
|
if (e.target !== input && e.target !== list) list.style.display = 'none';
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// --- ПОИСК И ВЫВОД РЕЗУЛЬТАТОВ ---
|
||||||
async function fetchData() {
|
async function fetchData() {
|
||||||
const grid = document.getElementById('imageGrid');
|
const grid = document.getElementById('imageGrid');
|
||||||
grid.innerHTML = `<div class="loader">Загрузка...</div>`;
|
grid.innerHTML = `<div class="loader">Загрузка...</div>`;
|
||||||
const activeRatings = Object.keys(state.ratings).filter(k => state.ratings[k]).join('+');
|
|
||||||
const req = { page: state.page, query: state.query.trim(), rating: activeRatings };
|
|
||||||
|
|
||||||
// Заглушка API Поиска
|
|
||||||
const data = await mockSearchAPI(req);
|
|
||||||
state.totalResults = data.total_results; state.totalPages = data.total_pages;
|
|
||||||
|
|
||||||
document.getElementById('resultsCount').textContent = `Results (${state.totalResults})`;
|
const activeRatings = Object.keys(state.ratings).filter(k => state.ratings[k]).join('+');
|
||||||
grid.innerHTML = data.items.map(i => `
|
const req = {
|
||||||
<div class="card">
|
type: "search",
|
||||||
<div class="card-image-container" style="background-color: hsl(${Math.random() * 360}, 20%, 30%);"></div>
|
page: state.page,
|
||||||
<div class="card-meta">Date: ${i.date}<br>Score: ${i.score} | Rating: <span style="color:var(--color-${i.rating[0].toLowerCase()})">${i.rating}</span></div>
|
query: state.query.trim(),
|
||||||
</div>
|
rating: activeRatings
|
||||||
`).join('');
|
};
|
||||||
renderPagination();
|
|
||||||
|
try {
|
||||||
|
const response = await fetch('/api', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify(req)
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) throw new Error('Ошибка сервера');
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
// Синхронизация состояния: вычисляем количество страниц (Math.ceil(всего / элементов_на_странице))
|
||||||
|
state.totalResults = data.results_info.total;
|
||||||
|
state.page = data.results_info.page;
|
||||||
|
|
||||||
|
const itemsPerPage = data.results_info.count_page || 1; // защита от деления на 0
|
||||||
|
state.totalPages = Math.ceil(state.totalResults / itemsPerPage);
|
||||||
|
|
||||||
|
document.getElementById('resultsCount').textContent = `Results (${state.totalResults})`;
|
||||||
|
|
||||||
|
if (data.results.length === 0) {
|
||||||
|
grid.innerHTML = `<div class="loader">Ничего не найдено</div>`;
|
||||||
|
} else {
|
||||||
|
grid.innerHTML = data.results.map(i => `
|
||||||
|
<a href="/post/${i.md5}" class="card">
|
||||||
|
<div class="card-image-container">
|
||||||
|
<img src="/thumb/${i.md5}.jpg" alt="thumbnail" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<div class="card-meta">
|
||||||
|
Date: ${i.display_date[1]}<br>
|
||||||
|
Score: ${i.score} | Rating: <span style="color:var(--color-${i.rating[0].toLowerCase()})">${i.rating}</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
`).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
renderPagination();
|
||||||
|
} catch (err) {
|
||||||
|
console.error(err);
|
||||||
|
grid.innerHTML = `<div class="loader">Ошибка связи с API</div>`;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// --- ПАГИНАЦИЯ ---
|
||||||
function renderPagination() {
|
function renderPagination() {
|
||||||
|
const totalPages = Math.max(0, state.totalPages);
|
||||||
|
const currentPage = state.page;
|
||||||
|
|
||||||
|
const hasPrev = currentPage > 0;
|
||||||
|
const hasNext = currentPage < totalPages - 1;
|
||||||
|
|
||||||
|
const displayPage = totalPages === 0 ? 1 : currentPage + 1;
|
||||||
|
const displayTotal = totalPages === 0 ? 1 : totalPages;
|
||||||
|
|
||||||
const html = `
|
const html = `
|
||||||
<button class="pagination-btn" onclick="changePage(0)" ${state.page === 0 ? 'disabled' : ''}>« First</button>
|
<button class="pagination-btn" onclick="changePage(0)" ${!hasPrev ? 'disabled' : ''}>« First</button>
|
||||||
<button class="pagination-btn" onclick="changePage(${state.page - 1})" ${state.page === 0 ? 'disabled' : ''}>‹ Prev</button>
|
<button class="pagination-btn" onclick="changePage(${currentPage - 1})" ${!hasPrev ? 'disabled' : ''}>‹ Prev</button>
|
||||||
<span style="font-size:12px; font-weight:bold;">Page ${state.page + 1} of ${state.totalPages}</span>
|
<span style="font-size:12px; font-weight:bold;">Page ${displayPage} of ${displayTotal}</span>
|
||||||
<button class="pagination-btn" onclick="changePage(${state.page + 1})" ${state.page >= state.totalPages - 1 ? 'disabled' : ''}>Next ›</button>
|
<button class="pagination-btn" onclick="changePage(${currentPage + 1})" ${!hasNext ? 'disabled' : ''}>Next ›</button>
|
||||||
<button class="pagination-btn" onclick="changePage(${state.totalPages - 1})" ${state.page >= state.totalPages - 1 ? 'disabled' : ''}>Last »</button>
|
<button class="pagination-btn" onclick="changePage(${totalPages - 1})" ${!hasNext ? 'disabled' : ''}>Last »</button>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
document.getElementById('paginationTop').innerHTML = html;
|
document.getElementById('paginationTop').innerHTML = html;
|
||||||
document.getElementById('paginationBottom').innerHTML = html;
|
document.getElementById('paginationBottom').innerHTML = html;
|
||||||
}
|
}
|
||||||
|
|
||||||
window.changePage = (p) => { state.page = p; fetchData(); window.scrollTo(0,0); };
|
// Смена страницы
|
||||||
|
window.changePage = (newPage) => {
|
||||||
// --- ВРЕМЕННЫЕ API ЗАГЛУШКИ ---
|
if (newPage < 0 || (state.totalPages > 0 && newPage >= state.totalPages)) return;
|
||||||
function mockAutocompleteAPI(req) {
|
|
||||||
return new Promise(res => {
|
state.page = newPage;
|
||||||
const db = [{tag: "long_hair", count: 8184}, {tag: "long_sleeves", count: 2828}, {tag: "looking_at_viewer", count: 8062}, {tag: "1girl", count: 11061}, {tag: "highres", count: 12700}, {tag: "absurdres", count: 6742}];
|
fetchData();
|
||||||
res(db.filter(t => t.tag.includes(req.q.toLowerCase())));
|
window.scrollTo(0, 0);
|
||||||
});
|
};
|
||||||
}
|
|
||||||
|
|
||||||
function mockSearchAPI(req) {
|
|
||||||
return new Promise(res => { setTimeout(() => {
|
|
||||||
const items = [];
|
|
||||||
if(req.rating.length > 0) {
|
|
||||||
const rArr = req.rating.split('+');
|
|
||||||
const rMap = {'g':'general','s':'sensitive','q':'questionable','e':'explicit'};
|
|
||||||
for(let i=0; i<48; i++) items.push({ date: '2026-05-20', score: 10, rating: rMap[rArr[Math.floor(Math.random()*rArr.length)]] });
|
|
||||||
}
|
|
||||||
res({ total_results: 14003, total_pages: 281, items });
|
|
||||||
}, 300);});
|
|
||||||
}
|
|
||||||
|
|
||||||
init();
|
init();
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
+115
-190
@@ -6,104 +6,42 @@
|
|||||||
<title>Post - LocalBooru</title>
|
<title>Post - LocalBooru</title>
|
||||||
<style>
|
<style>
|
||||||
:root {
|
:root {
|
||||||
--bg-main: #1e1e1e;
|
--bg-main: #1e1e1e; --bg-header: #252525; --bg-panel: #2a2a2a; --bg-input: #333;
|
||||||
--bg-header: #252525;
|
--text-main: #eee; --text-muted: #aaa; --border-color: #444; --link-color: #4da8da;
|
||||||
--bg-panel: #2a2a2a;
|
--color-g: #4caf50; --color-s: #ff9800; --color-q: #ffeb3b; --color-e: #f44336;
|
||||||
--bg-input: #333;
|
|
||||||
--text-main: #eee;
|
|
||||||
--text-muted: #aaa;
|
|
||||||
--border-color: #444;
|
|
||||||
--link-color: #4da8da;
|
|
||||||
|
|
||||||
--color-g: #4caf50;
|
|
||||||
--color-s: #ff9800;
|
|
||||||
--color-q: #ffeb3b;
|
|
||||||
--color-e: #f44336;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||||
|
body { background-color: var(--bg-main); color: var(--text-main); font-family: sans-serif; font-size: 14px; }
|
||||||
|
|
||||||
body {
|
header { display: flex; align-items: center; background-color: var(--bg-header); padding: 10px 20px; border-bottom: 1px solid var(--border-color); gap: 15px; }
|
||||||
background-color: var(--bg-main);
|
|
||||||
color: var(--text-main);
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
header {
|
|
||||||
display: flex; align-items: center; background-color: var(--bg-header);
|
|
||||||
padding: 10px 20px; border-bottom: 1px solid var(--border-color); gap: 15px;
|
|
||||||
}
|
|
||||||
.logo { font-weight: bold; font-size: 18px; color: white; text-decoration: none; }
|
.logo { font-weight: bold; font-size: 18px; color: white; text-decoration: none; }
|
||||||
|
|
||||||
/* Search & Autocomplete */
|
|
||||||
.search-wrapper { flex-grow: 1; max-width: 400px; position: relative; }
|
.search-wrapper { flex-grow: 1; max-width: 400px; position: relative; }
|
||||||
.search-wrapper input {
|
.search-wrapper input { width: 100%; background-color: var(--bg-input); border: 1px solid var(--border-color); color: white; padding: 6px 10px; border-radius: 3px; outline: none; }
|
||||||
width: 100%; background-color: var(--bg-input); border: 1px solid var(--border-color);
|
.autocomplete-list { position: absolute; top: 100%; left: 0; right: 0; background-color: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 3px; margin-top: 4px; list-style: none; z-index: 1000; max-height: 250px; overflow-y: auto; box-shadow: 0 4px 10px rgba(0,0,0,0.5); display: none; }
|
||||||
color: white; padding: 6px 10px; border-radius: 3px; outline: none;
|
|
||||||
}
|
|
||||||
.search-wrapper input:focus { border-color: var(--text-muted); }
|
|
||||||
.autocomplete-list {
|
|
||||||
position: absolute; top: 100%; left: 0; right: 0; background-color: var(--bg-panel);
|
|
||||||
border: 1px solid var(--border-color); border-radius: 3px; margin-top: 4px;
|
|
||||||
list-style: none; z-index: 1000; max-height: 250px; overflow-y: auto;
|
|
||||||
box-shadow: 0 4px 10px rgba(0,0,0,0.5); display: none;
|
|
||||||
}
|
|
||||||
.autocomplete-item { padding: 8px 10px; cursor: pointer; display: flex; justify-content: space-between; border-bottom: 1px solid #333; }
|
.autocomplete-item { padding: 8px 10px; cursor: pointer; display: flex; justify-content: space-between; border-bottom: 1px solid #333; }
|
||||||
.autocomplete-item:last-child { border-bottom: none; }
|
.autocomplete-item:last-child { border-bottom: none; }
|
||||||
.autocomplete-item:hover { background-color: var(--bg-input); }
|
.autocomplete-item:hover { background-color: var(--bg-input); }
|
||||||
.autocomplete-count { color: var(--text-muted); font-size: 12px; }
|
.autocomplete-count { color: var(--text-muted); font-size: 12px; }
|
||||||
|
|
||||||
main {
|
main { padding: 20px; max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: start; }
|
||||||
padding: 20px;
|
.sidebar { background-color: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 4px; padding: 15px; display: flex; flex-direction: column; gap: 20px; }
|
||||||
max-width: 1600px;
|
|
||||||
margin: 0 auto;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 300px 1fr;
|
|
||||||
gap: 20px;
|
|
||||||
align-items: start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar {
|
|
||||||
background-color: var(--bg-panel); border: 1px solid var(--border-color);
|
|
||||||
border-radius: 4px; padding: 15px; display: flex; flex-direction: column; gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-title { font-size: 16px; font-weight: bold; border-bottom: 1px solid var(--border-color); padding-bottom: 8px; margin-bottom: 10px; }
|
.section-title { font-size: 16px; font-weight: bold; border-bottom: 1px solid var(--border-color); padding-bottom: 8px; margin-bottom: 10px; }
|
||||||
.stat-row { margin-bottom: 6px; line-height: 1.4; word-break: break-all;}
|
.stat-row { margin-bottom: 6px; word-break: break-all; line-height: 1.4;}
|
||||||
.stat-label { font-weight: bold; }
|
.stat-label { font-weight: bold; }
|
||||||
|
.tags-list { display: flex; flex-direction: column; gap: 6px; }
|
||||||
.stat-val-g { color: var(--color-g); }
|
.tags-list a { color: var(--link-color); text-decoration: none; }
|
||||||
.stat-val-s { color: var(--color-s); }
|
|
||||||
.stat-val-q { color: var(--color-q); }
|
|
||||||
.stat-val-e { color: var(--color-e); }
|
|
||||||
|
|
||||||
.tags-list { display: flex; flex-direction: column; gap: 6px; }
|
|
||||||
.tags-list a { color: var(--link-color); text-decoration: none; word-break: break-word; }
|
|
||||||
.tags-list a:hover { text-decoration: underline; }
|
.tags-list a:hover { text-decoration: underline; }
|
||||||
|
.media-container { background-color: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 4px; padding: 20px; display: flex; justify-content: center; align-items: center; min-height: 400px; }
|
||||||
.media-container {
|
|
||||||
background-color: var(--bg-panel); border: 1px solid var(--border-color);
|
|
||||||
border-radius: 4px; padding: 20px; display: flex; justify-content: center;
|
|
||||||
align-items: center; min-height: 400px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-container img, .media-container video { max-width: 100%; max-height: 85vh; object-fit: contain; border-radius: 2px; }
|
.media-container img, .media-container video { max-width: 100%; max-height: 85vh; object-fit: contain; border-radius: 2px; }
|
||||||
|
.loader { grid-column: 1/-1; text-align: center; padding: 50px; color: var(--text-muted); }
|
||||||
|
|
||||||
.loader { grid-column: 1 / -1; text-align: center; padding: 50px; color: var(--text-muted); }
|
@media (max-width: 900px) { main { grid-template-columns: 1fr; } .media-container { order: -1; } header { flex-wrap: wrap; } .search-wrapper { min-width: 100%; order: 3; margin-top: 10px; } }
|
||||||
|
|
||||||
@media (max-width: 900px) {
|
|
||||||
main { grid-template-columns: 1fr; }
|
|
||||||
.media-container { order: -1; }
|
|
||||||
header { flex-wrap: wrap; }
|
|
||||||
.search-wrapper { min-width: 100%; order: 3; margin-top: 10px; }
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<header>
|
<header>
|
||||||
<a href="index.html" class="logo">LocalBooru</a>
|
<a href="/" class="logo">LocalBooru</a>
|
||||||
<div class="search-wrapper">
|
<div class="search-wrapper">
|
||||||
<input type="text" id="searchInput" placeholder="Search tags...">
|
<input type="text" id="searchInput" placeholder="Search tags...">
|
||||||
<ul id="autocompleteList" class="autocomplete-list"></ul>
|
<ul id="autocompleteList" class="autocomplete-list"></ul>
|
||||||
@@ -111,11 +49,11 @@
|
|||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main id="mainContent">
|
<main id="mainContent">
|
||||||
<div class="loader" id="loader">Загрузка поста...</div>
|
<div class="loader">Загрузка поста...</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// Инициализация поиска с автодополнением
|
// Инициализация автодополнения
|
||||||
const searchInput = document.getElementById('searchInput');
|
const searchInput = document.getElementById('searchInput');
|
||||||
const list = document.getElementById('autocompleteList');
|
const list = document.getElementById('autocompleteList');
|
||||||
let debounceTimer;
|
let debounceTimer;
|
||||||
@@ -125,142 +63,129 @@
|
|||||||
const words = searchInput.value.split(' ');
|
const words = searchInput.value.split(' ');
|
||||||
const currentWord = words[words.length - 1];
|
const currentWord = words[words.length - 1];
|
||||||
|
|
||||||
if (currentWord.length < 2) { list.style.display = 'none'; return; }
|
if (currentWord.length < 2) {
|
||||||
|
list.style.display = 'none';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
debounceTimer = setTimeout(async () => {
|
debounceTimer = setTimeout(async () => {
|
||||||
const req = { type: "autocomplete", q: currentWord };
|
const req = { type: "autocomplete", q: currentWord };
|
||||||
|
|
||||||
// РЕАЛЬНОЕ API: const data = await fetch('/api', ...);
|
try {
|
||||||
const data = await mockAutocompleteAPI(req);
|
const response = await fetch('/api', {
|
||||||
|
method: 'POST',
|
||||||
if (data.length === 0) { list.style.display = 'none'; return; }
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify(req)
|
||||||
list.innerHTML = data.map(item => `
|
|
||||||
<li class="autocomplete-item" data-tag="${item.tag}">
|
|
||||||
<span>${item.tag}</span><span class="autocomplete-count">${item.count}</span>
|
|
||||||
</li>
|
|
||||||
`).join('');
|
|
||||||
list.style.display = 'block';
|
|
||||||
|
|
||||||
list.querySelectorAll('.autocomplete-item').forEach(li => {
|
|
||||||
li.addEventListener('click', () => {
|
|
||||||
words[words.length - 1] = li.getAttribute('data-tag');
|
|
||||||
searchInput.value = words.join(' ') + ' ';
|
|
||||||
list.style.display = 'none';
|
|
||||||
searchInput.focus();
|
|
||||||
});
|
});
|
||||||
});
|
|
||||||
|
if (!response.ok) throw new Error('Ошибка API автодополнения');
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
if (!data || data.length === 0) {
|
||||||
|
list.style.display = 'none';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
list.innerHTML = data.map(item => `
|
||||||
|
<li class="autocomplete-item" data-tag="${item.tag}">
|
||||||
|
<span>${item.tag}</span><span class="autocomplete-count">${item.count}</span>
|
||||||
|
</li>
|
||||||
|
`).join('');
|
||||||
|
list.style.display = 'block';
|
||||||
|
|
||||||
|
list.querySelectorAll('.autocomplete-item').forEach(li => {
|
||||||
|
li.addEventListener('click', () => {
|
||||||
|
words[words.length - 1] = li.getAttribute('data-tag');
|
||||||
|
searchInput.value = words.join(' ') + ' ';
|
||||||
|
list.style.display = 'none';
|
||||||
|
searchInput.focus();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Автодополнение недоступно:", error);
|
||||||
|
}
|
||||||
}, 200);
|
}, 200);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Скрываем список при клике вне него
|
// Скрытие списка автодополнения при клике вне него
|
||||||
document.addEventListener('click', (e) => {
|
document.addEventListener('click', (e) => {
|
||||||
if (e.target !== searchInput && e.target !== list) list.style.display = 'none';
|
if (e.target !== searchInput && e.target !== list) {
|
||||||
|
list.style.display = 'none';
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Переход на главную при нажатии Enter
|
// Переход на главную при поиске
|
||||||
searchInput.addEventListener('keypress', (e) => {
|
searchInput.addEventListener('keypress', (e) => {
|
||||||
if(e.key === 'Enter') window.location.href = `index.html?query=${searchInput.value.trim()}`;
|
if(e.key === 'Enter') {
|
||||||
|
window.location.href = `index.html?query=${encodeURIComponent(searchInput.value.trim())}`;
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Загрузка данных поста
|
||||||
// Загрузка поста
|
|
||||||
async function fetchPost() {
|
async function fetchPost() {
|
||||||
let postId = new URLSearchParams(window.location.search).get('id');
|
// Получаем ID из параметра ?id=... или из конца URL пути
|
||||||
if (!postId) postId = window.location.pathname.split('/').pop();
|
let postId = new URLSearchParams(window.location.search).get('id') || window.location.pathname.split('/').pop();
|
||||||
|
|
||||||
if (!postId || postId.includes('.html')) {
|
if (!postId || postId.includes('.html')) {
|
||||||
document.getElementById('mainContent').innerHTML = `<div class="loader">Ошибка: ID поста не найден</div>`;
|
document.getElementById('mainContent').innerHTML = `<div class="loader">ID поста не указан</div>`;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const requestBody = { type: "post", post_id: postId };
|
const req = { type: "post", post_id: postId };
|
||||||
|
|
||||||
try {
|
|
||||||
// РЕАЛЬНОЕ API: fetch('/api', ...);
|
|
||||||
const data = await generateMockPostData(requestBody);
|
|
||||||
renderPost(data);
|
|
||||||
} catch (error) {
|
|
||||||
document.getElementById('mainContent').innerHTML = `<div class="loader">Ошибка загрузки</div>`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderPost(data) {
|
|
||||||
const main = document.getElementById('mainContent');
|
|
||||||
|
|
||||||
let mediaHtml = '';
|
try {
|
||||||
if (data.media_type === 'video') {
|
const response = await fetch('/api', {
|
||||||
mediaHtml = `<video controls autoplay loop src="${data.media_url}"></video>`;
|
method: 'POST',
|
||||||
} else {
|
headers: { 'Content-Type': 'application/json' },
|
||||||
mediaHtml = `<img src="${data.media_url}" alt="Post Media">`;
|
body: JSON.stringify(req)
|
||||||
}
|
});
|
||||||
|
|
||||||
|
if (!response.ok) throw new Error('Ошибка загрузки данных с сервера');
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
// Рендер медиа (предполагается, что оригиналы лежат в /img/)
|
||||||
|
let mediaHtml = '';
|
||||||
|
const mediaUrl = `/file/${data.local_filename}`;
|
||||||
|
|
||||||
|
if (data.is_video) {
|
||||||
|
mediaHtml = `<video controls autoplay loop src="${mediaUrl}"></video>`;
|
||||||
|
} else {
|
||||||
|
// И для изображений, и для GIF подойдет тег <img>
|
||||||
|
mediaHtml = `<img src="${mediaUrl}" alt="Post Media">`;
|
||||||
|
}
|
||||||
|
|
||||||
const tagsHtml = data.tags.map(tag => `<a href="index.html?query=${tag}">${tag}</a>`).join('');
|
// Рендер тегов
|
||||||
|
const tagsHtml = data.tags.map(t => `<a href="/?query=${encodeURIComponent(t)}">${t}</a>`).join('');
|
||||||
|
|
||||||
main.innerHTML = `
|
// Рендер всей страницы
|
||||||
<aside class="sidebar">
|
document.getElementById('mainContent').innerHTML = `
|
||||||
<div class="statistics">
|
<aside class="sidebar">
|
||||||
<div class="section-title">Statistics</div>
|
<div class="statistics">
|
||||||
<div class="stat-row"><span class="stat-label">File:</span> ${data.file_name}</div>
|
<div class="section-title">Statistics</div>
|
||||||
<div class="stat-row"><span class="stat-label">Date:</span> ${data.date}</div>
|
<div class="stat-row"><span class="stat-label">File:</span> ${data.local_filename}</div>
|
||||||
<div class="stat-row"><span class="stat-label">Rating:</span> <span class="stat-val-${data.rating[0].toLowerCase()}">${data.rating}</span></div>
|
<div class="stat-row"><span class="stat-label">Date:</span> ${data.display_date[1]}</div>
|
||||||
<div class="stat-row"><span class="stat-label">Score:</span> ${data.score}</div>
|
<div class="stat-row"><span class="stat-label">Rating:</span> <span style="color:var(--color-${data.rating[0].toLowerCase()})">${data.rating}</span></div>
|
||||||
<div class="stat-row"><span class="stat-label">Size:</span> ${data.size}</div>
|
<div class="stat-row"><span class="stat-label">Score:</span> ${data.score}</div>
|
||||||
<div class="stat-row"><span class="stat-label">Source:</span> <a href="${data.source}" style="color: var(--link-color); text-decoration: none;">Link</a></div>
|
<div class="stat-row"><span class="stat-label">Resolution:</span> ${data.width}x${data.height}</div>
|
||||||
</div>
|
<div class="stat-row"><span class="stat-label">Source:</span> <a href="${data.source}" target="_blank" rel="noopener noreferrer" style="color: var(--link-color); text-decoration: none;">Link</a></div>
|
||||||
|
|
||||||
<div class="tags">
|
|
||||||
<div class="section-title">Tags</div>
|
|
||||||
<div class="tags-list">
|
|
||||||
${tagsHtml}
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="tags">
|
||||||
|
<div class="section-title">Tags</div>
|
||||||
|
<div class="tags-list">${tagsHtml}</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
<div class="media-container">
|
||||||
|
${mediaHtml}
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
`;
|
||||||
|
} catch (err) {
|
||||||
<div class="media-container">
|
console.error(err);
|
||||||
${mediaHtml}
|
document.getElementById('mainContent').innerHTML = `<div class="loader">Ошибка загрузки поста. Проверьте соединение с сервером.</div>`;
|
||||||
</div>
|
}
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- ВРЕМЕННЫЕ ЗАГЛУШКИ ДЛЯ API ---
|
|
||||||
function mockAutocompleteAPI(req) {
|
|
||||||
return new Promise(res => {
|
|
||||||
const db = [
|
|
||||||
{tag: "long_hair", count: 8184}, {tag: "long_sleeves", count: 2828},
|
|
||||||
{tag: "looking_at_viewer", count: 8062}, {tag: "1girl", count: 11061},
|
|
||||||
{tag: "blue_hair", count: 3279}, {tag: "blue_eyes", count: 3279}
|
|
||||||
];
|
|
||||||
res(db.filter(t => t.tag.includes(req.q.toLowerCase())));
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function generateMockPostData(req) {
|
|
||||||
return new Promise(resolve => {
|
|
||||||
setTimeout(() => {
|
|
||||||
resolve({
|
|
||||||
post_id: req.post_id,
|
|
||||||
file_name: `${req.post_id}.jpg`,
|
|
||||||
date: "2026-05-24",
|
|
||||||
rating: "general",
|
|
||||||
score: 0,
|
|
||||||
size: "3916x3062",
|
|
||||||
source: "#",
|
|
||||||
media_type: "image",
|
|
||||||
media_url: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22600%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23444%22%2F%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20font-size%3D%2224%22%20text-anchor%3D%22middle%22%3E%D0%9F%D0%BB%D0%B5%D0%B9%D1%81%D1%85%D0%BE%D0%BB%D0%B4%D0%B5%D1%80%3C%2Ftext%3E%3C%2Fsvg%3E",
|
|
||||||
tags: [
|
|
||||||
"1boy", "absurdres", "arknights", "blue_hair", "blue_neckerchief",
|
|
||||||
"commentary", "english_commentary", "gloves", "hat", "highres",
|
|
||||||
"holding", "holding_umbrella", "infection_monitor_(arknights)",
|
|
||||||
"looking_at_viewer", "male_focus", "mizuki_(arknights)", "neckerchief",
|
|
||||||
"pink_eyes", "pppmepl", "rain", "smile", "solo", "teruterubouzu",
|
|
||||||
"trap", "umbrella", "upper_body"
|
|
||||||
]
|
|
||||||
});
|
|
||||||
}, 300);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Вызов функции при старте
|
||||||
fetchPost();
|
fetchPost();
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
Reference in New Issue
Block a user