Zein/hentai_manga_site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

разделение сайта на 2 стр

Browse Source
This commit is contained in:
Vinejar
2025-03-30 05:06:59 +03:00
parent b4fdcee09b
commit f8ebe1a9d8
5 changed files with 101 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
Hentai_manga_model/urls.py
View File

@@ -3,5 +3,5 @@ from .views import show_manga, show_manga_page
urlpatterns = [ urlpatterns = [
path('manga/<int:manga_id>/', show_manga, name='show_manga'), path('manga/<int:manga_id>/', show_manga, name='show_manga'),
path('manga/<int:manga_id>/page/<int:page_number>/', show_manga_page, name='show_manga_page'), # новый маршрут path('manga/<int:manga_id>/page/<int:page_number>/', show_manga_page, name='show_manga_page'),
] ]

15
Hentai_manga_model/views.py
View File

@@ -2,9 +2,9 @@ from django.shortcuts import render
from .models import manga_collection from .models import manga_collection
def show_manga(request, manga_id): def show_manga(request, manga_id):
manga = manga_collection.find_one({"id": int(manga_id)}) # Ищем мангу по ID manga = manga_collection.find_one({"id": int(manga_id)})
if not manga: if not manga:
return render(request, "not_found.html") # Если нет манги, показываем заглушку return render(request, "not_found.html")
return render(request, "manga_view.html", {"manga": manga}) return render(request, "manga_view.html", {"manga": manga})
def show_manga_page(request, manga_id, page_number): def show_manga_page(request, manga_id, page_number):
@@ -12,8 +12,9 @@ def show_manga_page(request, manga_id, page_number):
if not manga or page_number < 1 or page_number > manga['len_manga']: if not manga or page_number < 1 or page_number > manga['len_manga']:
return render(request, "not_found.html") return render(request, "not_found.html")
img_url = manga['imgs_manga'][page_number - 1] # Индекс страницы манги (начинаем с 0) img_url = manga['imgs_manga'][page_number - 1]
return render(request, "manga_page.html", {"manga": manga, "img_url": img_url, "page_number": page_number}) return render(request, "manga_page.html", {
"manga": manga,
"img_url": img_url,
"page_number": page_number
})

45
templates/manga_page.html Normal file
View File

@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="ru">
<head>
{% load static %}
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ manga.original_title }} - Страница {{ page_number }}</title>
<link rel="stylesheet" type="text/css" href="{% static 'css/manga_view.css' %}">
</head>
<body>
<div class="main-container">
<!-- Навигация -->
<div class="navigation-box">
<ul>
<li class="breadcrumb">
<a href="/manga/111">Каталог</a>
<span>-</span>
<a href="/manga/111">{{ manga.original_title }}</a>
<span>-</span>
<span>Страница {{ page_number }}</span>
</li>
</ul>
</div>
<!-- Изображение и навигация -->
<div class="image-navigation-container">
<div class="image-box">
<img src="{{ img_url }}" alt="Страница {{ page_number }}">
</div>
<div class="page-navigation">
{% if page_number > 1 %}
<a href="{% url 'show_manga_page' manga.id page_number|add:'-1' %}" class="nav-button">← Назад</a>
{% endif %}
<a href="{% url 'show_manga' manga.id %}" class="nav-button">К превью</a>
{% if page_number < manga.len_manga %}
<a href="{% url 'show_manga_page' manga.id page_number|add:'1' %}" class="nav-button">Вперед →</a>
{% endif %}
</div>
</div>
</div>
</body>
</html>

37
templates/manga_view.html
View File

@@ -6,12 +6,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ manga.original_title }}</title> <title>{{ manga.original_title }}</title>
<link rel="stylesheet" type="text/css" href="{% static 'css/manga_view.css' %}"> <link rel="stylesheet" type="text/css" href="{% static 'css/manga_view.css' %}">
<script src="{% static 'js/manga_view.js' %}" defer></script>
</head> </head>
<body> <body>
<div class="main-container"> <div class="main-container">
<!-- Навигация -->
<!-- Блок с навигацией -->
<div class="navigation-box"> <div class="navigation-box">
<ul> <ul>
<li class="breadcrumb"> <li class="breadcrumb">
@@ -22,32 +20,17 @@
</ul> </ul>
</div> </div>
<!-- Блок с изображениями --> <!-- Сетка превью -->
<div class="image-container"> <div class="manga-grid-container">
<div class="image-box" id="imageBox"> <div class="manga-grid">
<img id="mangaImage" src="" alt="Страница">
</div>
<div class="manga-grid-container" id="previewContainer">
<div id="previewGrid" class="manga-grid">
{% for img in manga.imgs_manga %}
<div class="manga-preview">
<img src="{{ img }}"
onclick="showImage('{{ img }}')"
alt="Стр {{ forloop.counter }}">
</div>
{% endfor %}
</div>
</div>
</div>
<!-- Блок с выпадающим списком -->
<div class="dropdown-box">
<select id="drop" onchange="changePage(this)">
<option value="preview">🔍 Превью</option>
{% for img in manga.imgs_manga %} {% for img in manga.imgs_manga %}
<option value="{{ img }}">Стр {{ forloop.counter }}</option> <div class="manga-preview">
<a href="{% url 'show_manga_page' manga.id forloop.counter %}">
<img src="{{ img }}" alt="Стр {{ forloop.counter }}">
</a>
</div>
{% endfor %} {% endfor %}
</select> </div>
</div> </div>
</div> </div>
</body> </body>

110
templates/static/css/manga_view.css
View File

@@ -1,116 +1,78 @@
/* Основные стили */ /* Основные стили */
/* Центрируем основной контейнер */
.main-container { .main-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
max-width: 900px; max-width: 900px;
margin: 20px auto; margin: 0 auto;
padding: 20px; padding: 20px;
background: #f9f9f9;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
border-radius: 8px;
} }
/* Бокс с названием и каталогом */ /* Навигационная цепочка */
.info-box { .breadcrumb {
width: 100%;
padding: 15px;
background: #e0e0e0;
border-radius: 5px;
text-align: center;
margin-bottom: 15px;
}
/* Блок с сеткой превью и изображением */
.preview-box {
width: 100%;
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
background: #fff; list-style: none;
padding: 15px; padding: 0;
border-radius: 5px; margin: 0 0 20px 0;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); font-size: 16px;
} }
/* Сетка манги */ .breadcrumb span {
margin: 0 5px;
color: #666;
}
/* Сетка превью */
.manga-grid { .manga-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 10px; gap: 15px;
justify-content: center;
width: 100%;
max-width: 600px;
} }
/* Превью картинок */
.manga-preview { .manga-preview {
width: 100px; width: 100px;
height: 140px; height: 140px;
overflow: hidden; overflow: hidden;
border-radius: 5px; border-radius: 5px;
background: #eee; box-shadow: 0 2px 5px rgba(0,0,0,0.2);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
cursor: pointer;
transition: transform 0.2s;
} }
.manga-preview img { .manga-preview img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
transition: transform 0.3s;
} }
.manga-preview:hover { .manga-preview:hover img {
transform: scale(1.05); transform: scale(1.05);
} }
/* Основное изображение */ /* Страница манги */
.image-box { .image-navigation-container {
display: none; margin-top: 20px;
width: 100%;
text-align: center; text-align: center;
margin-top: 15px;
} }
#mangaImage { .image-box img {
max-width: 100%; max-width: 100%;
max-height: 80vh; max-height: 80vh;
object-fit: contain; object-fit: contain;
} }
/* Блок с выпадающим списком */ .page-navigation {
.select-box { margin-top: 20px;
width: 100%; display: flex;
margin-top: 15px; justify-content: center;
text-align: center; gap: 15px;
} }
.select-box select { .nav-button {
padding: 8px; padding: 8px 15px;
font-size: 16px; background: #f0f0f0;
border-radius: 5px; border-radius: 4px;
border: 1px solid #ccc; text-decoration: none;
cursor: pointer; color: #333;
} }
/* Адаптивность */ .nav-button:hover {
@media (max-width: 768px) { background: #e0e0e0;
.manga-grid { }
grid-template-columns: repeat(4, 1fr);
}
}
@media (max-width: 480px) {
.manga-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 360px) {
.manga-grid {
grid-template-columns: repeat(2, 1fr);
}
}