diff --git a/Hentai_manga_model/urls.py b/Hentai_manga_model/urls.py index a23eaa6..359f927 100644 --- a/Hentai_manga_model/urls.py +++ b/Hentai_manga_model/urls.py @@ -3,5 +3,5 @@ from .views import show_manga, show_manga_page urlpatterns = [ path('manga//', show_manga, name='show_manga'), - path('manga//page//', show_manga_page, name='show_manga_page'), # новый маршрут -] + path('manga//page//', show_manga_page, name='show_manga_page'), +] \ No newline at end of file diff --git a/Hentai_manga_model/views.py b/Hentai_manga_model/views.py index dbfe9b9..d749308 100644 --- a/Hentai_manga_model/views.py +++ b/Hentai_manga_model/views.py @@ -2,9 +2,9 @@ from django.shortcuts import render from .models import manga_collection 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: - return render(request, "not_found.html") # Если нет манги, показываем заглушку + return render(request, "not_found.html") return render(request, "manga_view.html", {"manga": manga}) 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']: return render(request, "not_found.html") - img_url = manga['imgs_manga'][page_number - 1] # Индекс страницы манги (начинаем с 0) - return render(request, "manga_page.html", {"manga": manga, "img_url": img_url, "page_number": page_number}) - - - + img_url = manga['imgs_manga'][page_number - 1] + return render(request, "manga_page.html", { + "manga": manga, + "img_url": img_url, + "page_number": page_number + }) \ No newline at end of file diff --git a/templates/manga_page.html b/templates/manga_page.html new file mode 100644 index 0000000..d7b5677 --- /dev/null +++ b/templates/manga_page.html @@ -0,0 +1,45 @@ + + + + {% load static %} + + + {{ manga.original_title }} - Страница {{ page_number }} + + + +
+ +
+ +
+ + +
+
+ Страница {{ page_number }} +
+ +
+ {% if page_number > 1 %} + ← Назад + {% endif %} + + К превью + + {% if page_number < manga.len_manga %} + Вперед → + {% endif %} +
+
+
+ + \ No newline at end of file diff --git a/templates/manga_view.html b/templates/manga_view.html index 30c545e..52de041 100644 --- a/templates/manga_view.html +++ b/templates/manga_view.html @@ -6,12 +6,10 @@ {{ manga.original_title }} -
- - +
  • @@ -22,32 +20,17 @@
- -
-
- Страница -
-
-
- {% for img in manga.imgs_manga %} -
- Стр {{ forloop.counter }} -
- {% endfor %} -
-
-
- - -
- +
diff --git a/templates/static/css/manga_view.css b/templates/static/css/manga_view.css index a8ba46e..f67471b 100644 --- a/templates/static/css/manga_view.css +++ b/templates/static/css/manga_view.css @@ -1,116 +1,78 @@ /* Основные стили */ -/* Центрируем основной контейнер */ .main-container { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; max-width: 900px; - margin: 20px auto; + margin: 0 auto; padding: 20px; - background: #f9f9f9; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); - border-radius: 8px; } -/* Бокс с названием и каталогом */ -.info-box { - width: 100%; - padding: 15px; - background: #e0e0e0; - border-radius: 5px; - text-align: center; - margin-bottom: 15px; -} - -/* Блок с сеткой превью и изображением */ -.preview-box { - width: 100%; +/* Навигационная цепочка */ +.breadcrumb { display: flex; - flex-direction: column; align-items: center; - background: #fff; - padding: 15px; - border-radius: 5px; - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); + list-style: none; + padding: 0; + margin: 0 0 20px 0; + font-size: 16px; } -/* Сетка манги */ +.breadcrumb span { + margin: 0 5px; + color: #666; +} + +/* Сетка превью */ .manga-grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); - gap: 10px; - justify-content: center; - width: 100%; - max-width: 600px; + grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); + gap: 15px; } -/* Превью картинок */ .manga-preview { width: 100px; height: 140px; overflow: hidden; border-radius: 5px; - background: #eee; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); - cursor: pointer; - transition: transform 0.2s; + box-shadow: 0 2px 5px rgba(0,0,0,0.2); } .manga-preview img { width: 100%; height: 100%; object-fit: cover; + transition: transform 0.3s; } -.manga-preview:hover { +.manga-preview:hover img { transform: scale(1.05); } -/* Основное изображение */ -.image-box { - display: none; - width: 100%; +/* Страница манги */ +.image-navigation-container { + margin-top: 20px; text-align: center; - margin-top: 15px; } -#mangaImage { +.image-box img { max-width: 100%; max-height: 80vh; object-fit: contain; } -/* Блок с выпадающим списком */ -.select-box { - width: 100%; - margin-top: 15px; - text-align: center; +.page-navigation { + margin-top: 20px; + display: flex; + justify-content: center; + gap: 15px; } -.select-box select { - padding: 8px; - font-size: 16px; - border-radius: 5px; - border: 1px solid #ccc; - cursor: pointer; +.nav-button { + padding: 8px 15px; + background: #f0f0f0; + border-radius: 4px; + text-decoration: none; + color: #333; } -/* Адаптивность */ -@media (max-width: 768px) { - .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); - } -} +.nav-button:hover { + background: #e0e0e0; +} \ No newline at end of file