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

2025-03-30 05:06:59 +03:00
parent b4fdcee09b
commit f8ebe1a9d8
5 changed files with 101 additions and 110 deletions
--- 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/<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'),
+]
--- 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
+    })
--- a/templates/manga_page.html
+++ b/templates/manga_page.html
@@ -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>
--- a/templates/manga_view.html
+++ b/templates/manga_view.html
@@ -6,12 +6,10 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ manga.original_title }}</title>
    <link rel="stylesheet" type="text/css" href="{% static 'css/manga_view.css' %}">
-    <script src="{% static 'js/manga_view.js' %}" defer></script>
 </head>
 <body>
    <div class="main-container">
-        
-        <!-- Блок с навигацией -->
+        <!-- Навигация -->
        <div class="navigation-box">
            <ul>
                <li class="breadcrumb">
@@ -22,32 +20,17 @@
            </ul>
        </div>

-        <!-- Блок с изображениями -->
-        <div class="image-container">
-            <div class="image-box" id="imageBox">
-                <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>
+        <!-- Сетка превью -->
+        <div class="manga-grid-container">
+            <div class="manga-grid">
                {% 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 %}
-            </select>
+            </div>
        </div>
    </div>
 </body>
--- 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;
+}