Поиск по тегам

Создание Manga_catalog.html js

1.py

@@ -0,0 +1,21 @@
+from pymongo import MongoClient
+
+
+def clean_tags_in_database():
+    client = MongoClient('mongodb://localhost:27017/')
+    db = client['Manga']
+    collection = db['Hentai_Manga']
+
+    for manga in collection.find():
+        if 'tags' in manga:
+            cleaned_tags = [tag.strip() for tag in manga['tags'] if tag.strip()]
+            if cleaned_tags != manga['tags']:
+                collection.update_one(
+                    {'_id': manga['_id']},
+                    {'$set': {'tags': cleaned_tags}}
+                )
+    print("Теги успешно очищены от пробелов")
+
+
+# Вызовите эту функцию один раз
+clean_tags_in_database()

DJ_Hentai_manga/asgi.py

@@ -0,0 +1,16 @@
+"""
+ASGI config for DJ_Hentai_manga project.
+
+It exposes the ASGI callable as a module-level variable named ``application``.
+
+For more information on this file, see
+https://docs.djangoproject.com/en/5.1/howto/deployment/asgi/
+"""
+
+import os
+
+from django.core.asgi import get_asgi_application
+
+os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'DJ_Hentai_manga.settings')
+
+application = get_asgi_application()

DJ_Hentai_manga/settings.py

@@ -0,0 +1,132 @@
+"""
+Django settings for DJ_Hentai_manga project.
+
+Generated by 'django-admin startproject' using Django 5.1.7.
+
+For more information on this file, see
+https://docs.djangoproject.com/en/5.1/topics/settings/
+
+For the full list of settings and their values, see
+https://docs.djangoproject.com/en/5.1/ref/settings/
+"""
+from os import path
+from pathlib import Path
+
+# Build paths inside the project like this: BASE_DIR / 'subdir'.
+BASE_DIR = Path(__file__).resolve().parent.parent
+
+
+# Quick-start development settings - unsuitable for production
+# See https://docs.djangoproject.com/en/5.1/howto/deployment/checklist/
+
+# SECURITY WARNING: keep the secret key used in production secret!
+SECRET_KEY = 'django-insecure-=hh&$!xqkdm1=pg2sp8p@aybl$#%)$c!b&jy(7qxwq-7kv!!@n'
+
+# SECURITY WARNING: don't run with debug turned on in production!
+DEBUG = True
+
+ALLOWED_HOSTS = ['*']
+
+
+# Application definition
+
+INSTALLED_APPS = [
+    'django.contrib.admin',
+    'django.contrib.auth',
+    'django.contrib.contenttypes',
+    'django.contrib.sessions',
+    'django.contrib.messages',
+    'django.contrib.staticfiles',
+    'Hentai_manga_model.apps.HentaiMangaModelConfig'
+]
+
+MIDDLEWARE = [
+    'django.middleware.security.SecurityMiddleware',
+    'django.contrib.sessions.middleware.SessionMiddleware',
+    'django.middleware.common.CommonMiddleware',
+    'django.middleware.csrf.CsrfViewMiddleware',
+    'django.contrib.auth.middleware.AuthenticationMiddleware',
+    'django.contrib.messages.middleware.MessageMiddleware',
+    'django.middleware.clickjacking.XFrameOptionsMiddleware',
+]
+
+ROOT_URLCONF = 'DJ_Hentai_manga.urls'
+
+TEMPLATES = [
+    {
+        'BACKEND': 'django.template.backends.django.DjangoTemplates',
+        'DIRS': [BASE_DIR / 'templates']
+        ,
+        'APP_DIRS': True,
+        'OPTIONS': {
+            'context_processors': [
+                'django.template.context_processors.debug',
+                'django.template.context_processors.request',
+                'django.contrib.auth.context_processors.auth',
+                'django.contrib.messages.context_processors.messages',
+            ],
+        },
+    },
+]
+
+WSGI_APPLICATION = 'DJ_Hentai_manga.wsgi.application'
+
+
+# Database
+# https://docs.djangoproject.com/en/5.1/ref/settings/#databases
+
+DATABASES = {
+    'default': {
+        'ENGINE': 'django.db.backends.sqlite3',
+        'NAME': BASE_DIR / 'db.sqlite3',
+    }
+}
+
+
+# Password validation
+# https://docs.djangoproject.com/en/5.1/ref/settings/#auth-password-validators
+
+AUTH_PASSWORD_VALIDATORS = [
+    {
+        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
+    },
+    {
+        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
+    },
+    {
+        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
+    },
+    {
+        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
+    },
+]
+
+
+# Internationalization
+# https://docs.djangoproject.com/en/5.1/topics/i18n/
+
+LANGUAGE_CODE = 'en-us'
+
+TIME_ZONE = 'UTC'
+
+USE_I18N = True
+
+USE_TZ = True
+
+
+# Static files (CSS, JavaScript, Images)
+# https://docs.djangoproject.com/en/5.1/howto/static-files/
+
+import os
+
+STATIC_URL = '/templates/static/'
+
+# Указываем Django искать статику в вашей папке templates/static
+STATICFILES_DIRS = [
+    os.path.join(BASE_DIR, 'templates/static'),
+]
+
+# Default primary key field type
+# https://docs.djangoproject.com/en/5.1/ref/settings/#default-auto-field
+
+DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

DJ_Hentai_manga/urls.py

@@ -0,0 +1,8 @@
+from django.contrib import admin
+from django.urls import path, include  # include — важен
+
+urlpatterns = [
+    path('admin/', admin.site.urls),
+    path('', include('Hentai_manga_model.urls')),  # тут подключаем urls твоего приложения
+]
+

DJ_Hentai_manga/wsgi.py

@@ -0,0 +1,16 @@
+"""
+WSGI config for DJ_Hentai_manga project.
+
+It exposes the WSGI callable as a module-level variable named ``application``.
+
+For more information on this file, see
+https://docs.djangoproject.com/en/5.1/howto/deployment/wsgi/
+"""
+
+import os
+
+from django.core.wsgi import get_wsgi_application
+
+os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'DJ_Hentai_manga.settings')
+
+application = get_wsgi_application()

Hentai_manga_model/admin.py

@@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.

Hentai_manga_model/apps.py

@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class HentaiMangaModelConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'Hentai_manga_model'

Hentai_manga_model/urls.py

@@ -1,7 +1,9 @@
 from django.urls import path
-from .views import show_manga, show_manga_page
+from .views import show_manga, show_manga_page, manga_catalog
+
 
 urlpatterns = [
+    path('catalog/', manga_catalog, name='manga_catalog'),
     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'),
 ]

Hentai_manga_model/views.py

@@ -1,6 +1,38 @@
 from django.shortcuts import render
+from django.core.paginator import Paginator
 from .models import manga_collection
 
+
+def manga_catalog(request):
+    # Получаем список всех уникальных тегов
+    all_tags = manga_collection.distinct("tags")
+
+    # Получаем выбранные теги из GET-параметров
+    selected_tags = request.GET.getlist('tags')
+
+    # Формируем запрос для фильтрации
+    query = {}
+    if selected_tags:
+        query['tags'] = {'$all': selected_tags}
+
+    # Получаем отфильтрованные записи
+    filtered_manga = list(manga_collection.find(query))
+
+    # Пагинация
+    paginator = Paginator(filtered_manga, 20)
+    page_number = request.GET.get('page')
+    page_obj = paginator.get_page(page_number)
+
+    total_manga_count = manga_collection.count_documents({})
+
+    return render(request, 'manga_catalog.html', {
+        'page_obj': page_obj,
+        'manga_list': page_obj.object_list,
+        'total_manga_count': total_manga_count,
+        'all_tags': sorted(all_tags),
+        'selected_tags': selected_tags
+    })
+
 def show_manga(request, manga_id):
     manga = manga_collection.find_one({"id": int(manga_id)})
     if not manga:

manage.py

@@ -0,0 +1,22 @@
+#!/usr/bin/env python
+"""Django's command-line utility for administrative tasks."""
+import os
+import sys
+
+
+def main():
+    """Run administrative tasks."""
+    os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'DJ_Hentai_manga.settings')
+    try:
+        from django.core.management import execute_from_command_line
+    except ImportError as exc:
+        raise ImportError(
+            "Couldn't import Django. Are you sure it's installed and "
+            "available on your PYTHONPATH environment variable? Did you "
+            "forget to activate a virtual environment?"
+        ) from exc
+    execute_from_command_line(sys.argv)
+
+
+if __name__ == '__main__':
+    main()

templates/base_manga.html

@@ -5,16 +5,32 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{% block title %}{{ manga.original_title }}{% endblock %}</title>
+    
     <link rel="stylesheet" href="{% static 'css/manga_view.css' %}">
+        <!-- Меняем размер пикч -->
+        <style>
+            :root {
+                /* Масштабы */
+                --page-scale: 0.8;    /* Для страниц манги */
+                /* Общие настройки */
+                --preview-scale: 0.9;       /* Масштаб превью (0.5-1.5) */
+                --grid-columns: 5;          /* Число столбцов */
+                --grid-gap: 10px;           /* Фиксированный отступ (в пикселях) */
+                
+                /* Базовые размеры превью (до масштабирования) */
+                --preview-base-width: 170px;
+                --preview-base-height: 240px;
+            }
+        </style>
 </head>
 <body>
     <div class="main-container">
+        <div class="frame_content">
         <!-- Хедер -->
             <header class="navigation-box">
                 <ul>
                     <li class="breadcrumb">
-                    <a href="/manga/111">Каталог</a>
+                        <a href="/catalog/">Каталог</a>
-                    <span>-</span>
                         <a href="/manga/111">{{ manga.original_title }}</a>
                         {% block page_title %}{% endblock %}
                     </li>
@@ -22,7 +38,7 @@
             </header>
     
             <!-- Основной контент -->
-        <main>
+            <main class="content-area">
                 {% block content %}{% endblock %}
             </main>
     
@@ -38,6 +54,7 @@
                 </div>
             </footer>
         </div>
+    </div>
 
     <script>
         function changePage(select) {

templates/manga_catalog.html

@@ -0,0 +1,101 @@
+{% load static %}
+
+<link rel="stylesheet" href="{% static 'css/manga_catalog.css' %}">    
+<div class="catalog-header">
+    <h1 class="title-site">Дроч.кам</h1>
+    <h5 class="titles-cont">Манги на сайте: {{ total_manga_count }}</h5>
+</div>
+
+<!-- Боковая панель фильтрации (добавлена в начало, но будет справа благодаря CSS) -->
+<div class="filter-sidebar">
+    <h3>Фильтр по тегам</h3>
+    <form method="get" action="{% url 'manga_catalog' %}">
+        <div class="tag-filters">
+            {% for tag in all_tags %}
+            <div class="tag-filter-item">
+                <input type="checkbox" id="tag-{{ forloop.counter }}" name="tags" value="{{ tag }}"
+                       {% if tag in selected_tags %}checked{% endif %}>
+                <label for="tag-{{ forloop.counter }}">{{ tag }}</label>
+            </div>
+            {% endfor %}
+        </div>
+        <button type="submit" class="filter-button">Применить фильтр</button>
+        {% if selected_tags %}
+        <a href="{% url 'manga_catalog' %}" class="clear-filter">Сбросить</a>
+        {% endif %}
+    </form>
+</div>
+
+<div class="catalog-container">
+    <div class="manga-list">
+        {% for manga in manga_list %}
+        <div class="manga-item">
+            <div class="manga-cover-container">
+                <div class="manga-cover">
+                    {% if manga.img %}
+                        <a href={% url 'show_manga' manga.id %}>
+                            <img src="{{ manga.img }}" alt="{{ manga.original_title }}" 
+                                onerror="this.src='{% static 'images/default_cover.jpg' %}'">
+                        </a>
+                    {% else %}
+                        <a href={% url 'show_manga' manga.id %}>
+                            <img src="{% static 'images/default_cover.jpg' %}" alt="Обложка отсутствует">
+                        </a>
+                    {% endif %}
+                </div>
+                <a href="{% url 'show_manga' manga.id %}" class="read-button">Читать</a>
+            </div>
+            
+            <div class="manga-details">
+                <div class="manga-title">
+                    <h3>{{ manga.original_title }}</h3>
+                </div>
+                
+                {% if manga.tags %}
+                <div class="tags">
+                    {% for tag in manga.tags %}
+                    <span class="tag">{{ tag }}</span>
+                    {% endfor %}
+                </div>
+                {% endif %}
+                
+                <div class="manga-meta">
+                    <div class="meta-item">
+                        <span class="meta-label">Страниц:</span>
+                        <span class="meta-value">{{ manga.len_manga }}</span>
+                    </div>
+            
+                    <div class="meta-row">
+                        <div class="date-post">
+                            <span class="date-label">Дата:</span>
+                            <span class="date-value">{{ manga.date }}</span>
+                        </div>
+                        
+                        {% if manga.manga_link %}
+                        <a href="{{ manga.manga_link }}" target="_blank" class="read-original-button">
+                            Читать в источнике
+                        </a>
+                        {% endif %}
+                    </div>
+                </div>
+            </div>
+        </div>
+        {% endfor %}
+    </div>
+    
+    <div class="pagination">
+        {% if page_obj.has_previous %}
+            <a href="?page=1">&laquo; первая</a>
+            <a href="?page={{ page_obj.previous_page_number }}">предыдущая</a>
+        {% endif %}
+        
+        <span class="current">
+            Страница {{ page_obj.number }} из {{ page_obj.paginator.num_pages }}
+        </span>
+        
+        {% if page_obj.has_next %}
+            <a href="?page={{ page_obj.next_page_number }}">следующая</a>
+            <a href="?page={{ page_obj.paginator.num_pages }}">последняя &raquo;</a>
+        {% endif %}
+    </div>
+</div>

templates/manga_page.html

@@ -8,8 +8,8 @@
 {% endblock %}
 
 {% block content %}
-<div class="image-container">
+<div class="image-scaling-container">
-    <img src="{{ img_url }}" alt="Страница {{ page_number }}" class="manga-page">
+    <img src="{{ img_url }}" alt="Страница {{ page_number }}" class="scalable-image">
 </div>
 {% endblock %}
 

templates/manga_view.html

@@ -2,10 +2,8 @@
 
 {% block title %}{{ manga.original_title }} - Превью{% endblock %}
 
-{% block page_title %}{% endblock %}
-
 {% block content %}
-<div class="manga-grid-container">
+<div class="grid-container">
     <div class="manga-grid">
         {% for img in manga.imgs_manga %}
             <div class="manga-preview">
@@ -26,7 +24,3 @@
         </option>
     {% endfor %}
 {% endblock %}
-
-{% block page_buttons %}
-    <!-- Пусто, так как в превью не нужны кнопки навигации -->
-{% endblock %}

templates/static/css/manga_catalog.css

@@ -0,0 +1,315 @@
+/* Базовые стили */
+body {
+    margin: 0;
+    padding: 0;
+    background: #f8f9fa;
+    font-family: Arial, sans-serif;
+    position: relative;
+}
+
+.content-wrapper {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+.center-container {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    max-width: 800px;
+}
+
+.catalog-header {
+    min-height: 50px;
+    display: flex;
+    position: sticky;
+    margin: 0 auto;
+    top: 0;
+    width: 50%;
+    height: 5%;
+    background-color: #3987cf;
+    z-index: 1000;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 20px;
+    border-bottom-left-radius: 15px;
+    border-bottom-right-radius: 15px;
+}
+
+.title-site {
+    color: #ffffff;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    margin: 0;
+}
+
+.titles-cont {
+    position: absolute;
+    color: #ffffff;
+    left: 65%;
+    top: 10%;
+}
+
+.catalog-container {
+    max-width: 900px;
+    margin: 0 auto;
+    padding: 20px;
+    position: relative;
+    z-index: 1;
+}
+
+/* Карточка манги */
+.manga-item {
+    display: flex;
+    gap: 20px;
+    background: white;
+    border-radius: 8px;
+    overflow: hidden;
+    margin-bottom: 20px;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+}
+
+/* Контейнер для обложки и кнопки */
+.manga-cover-container {
+    width: 200px;
+    flex-shrink: 0;
+    position: relative;
+}
+
+/* Изображение */
+.manga-cover {
+    width: 100%;
+    height: 100%;
+}
+
+.manga-cover img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+    box-shadow: 0 0 15px #39accf;
+}
+
+/* Кнопка "Читать" поверх изображения */
+.read-button {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 12px 0;
+    background: #2478c2;
+    color: white;
+    text-align: center;
+    text-decoration: none;
+    font-weight: bold;
+    transition: background 0.3s;
+}
+
+.read-button:hover {
+    background: #2478c2;
+}
+
+/* Информация справа */
+.manga-details {
+    padding: 20px;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.manga-title h3 {
+    width: 100%;
+    padding-bottom: 3px;
+    border-bottom: 1px solid #3987cf;
+    margin: 0 0 8px 0;
+    color: #333;
+    font-size: 20px;
+}
+
+/* Теги под заголовком */
+.tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin: 10px 0 15px 0;
+}
+
+.tag {
+    background: #f0f0f0;
+    padding: 4px 10px;
+    border-radius: 4px;
+    font-size: 12px;
+    color: #555;
+}
+
+/* Мета-информация внизу блока */
+.manga-meta {
+    margin-top: auto;
+}
+
+.meta-item {
+    margin-bottom: 10px;
+}
+
+.manga-meta {
+    font-weight: bold;
+    color: #555;
+    margin-right: 5px;
+}
+
+/* Строка с мета-информацией */
+.meta-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    margin-top: auto;
+}
+
+/* Кнопка "Читать в источнике" */
+.read-original-button {
+    padding: 6px 12px;
+    background: #6497c5;
+    color: white;
+    text-decoration: none;
+    border-radius: 4px;
+    font-size: 14px;
+    transition: background 0.3s;
+    white-space: nowrap;
+    margin-left: 15px;
+}
+
+.read-original-button:hover {
+    background: #5a6268;
+}
+
+/* Боковая панель */
+.filter-sidebar {
+    width: 250px;
+    background: white;
+    padding: 15px;
+    border-radius: 8px;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+    position: fixed;
+    right: 180px;
+    top: 70px;
+    z-index: 100;
+}
+
+.filter-sidebar h3 {
+    margin-top: 0;
+    color: #333;
+    border-bottom: 1px solid #eee;
+    padding-bottom: 10px;
+}
+
+.tag-filters {
+    max-height: 500px;
+    overflow-y: auto;
+    margin-bottom: 15px;
+}
+
+.tag-filter-item {
+    margin-bottom: 8px;
+}
+
+.tag-filter-item label {
+    margin-left: 8px;
+    cursor: pointer;
+}
+
+.filter-button {
+    width: 100%;
+    padding: 10px;
+    background: #3987cf;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-weight: bold;
+    margin-bottom: 10px;
+}
+
+.filter-button:hover {
+    background: #2c6db1;
+}
+
+.clear-filter {
+    display: block;
+    text-align: center;
+    color: #666;
+    text-decoration: none;
+    font-size: 14px;
+}
+
+.clear-filter:hover {
+    text-decoration: underline;
+}
+
+/* Пагинация */
+.pagination {
+    display: flex;
+    justify-content: center;
+    padding: 20px 0;
+    gap: 10px;
+}
+
+.pagination a {
+    color: #3987cf;
+    text-decoration: none;
+    padding: 5px 10px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+}
+
+.pagination a:hover {
+    background: #eee;
+}
+
+.pagination .current {
+    padding: 5px 10px;
+    color: #666;
+}
+
+/* Адаптивность */
+@media (max-width: 1000px) {
+    .content-wrapper {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .filter-sidebar {
+        width: 100%;
+        max-width: 500px;
+        position: static;
+        margin-top: 20px;
+    }
+
+    .catalog-header {
+        width: 100%;
+        border-radius: 0;
+    }
+}
+
+@media (max-width: 768px) {
+    .manga-item {
+        flex-direction: column;
+    }
+
+    .manga-cover-container {
+        width: 100%;
+    }
+
+    .manga-cover {
+        height: 350px;
+    }
+
+    .manga-details {
+        padding: 15px;
+    }
+}

templates/static/css/manga_view.css

@@ -1,111 +1,140 @@
-/* Основные стили */
+/* Базовые стили */
-.main-container {
+body {
-    max-width: 900px;
+    margin: 0;
-    margin: 0 auto;
-    padding: 20px;
-}
-
-/* Навигационная цепочка */
-.breadcrumb {
-    display: flex;
-    align-items: center;
-    list-style: none;
     padding: 0;
-    margin: 0 0 20px 0;
+    min-height: 100vh;
-    font-size: 16px;
-}
-
-.breadcrumb span {
-    margin: 0 5px;
-    color: #666;
-}
-
-/* Сетка превью */
-.manga-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
-    gap: 15px;
-}
-
-.manga-preview {
-    width: 100px;
-    height: 140px;
-    overflow: hidden;
-    border-radius: 5px;
-    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 img {
-    transform: scale(1.05);
-}
-
-/* Страница манги */
-.image-navigation-container {
-    margin-top: 20px;
-    text-align: center;
-}
-
-.image-box img {
-    max-width: 100%;
-    max-height: 80vh;
-    object-fit: contain;
-}
-
-.page-navigation {
-    margin-top: 20px;
     display: flex;
+    flex-direction: column;
+    background: #f8f9fa;
+}
+
+.main-container {
+    margin: 0 auto;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    min-height: 100vh;
+    align-items: center;
+    background-color: #ffffff;
     justify-content: center;
-    gap: 15px;
+
+
 }
 
-.nav-button {
+.frame_content{
-    padding: 8px 15px;
+    min-height: 100vh;
-    background: #f0f0f0;
+    width: 50%;
-    border-radius: 4px;
+    place-items: center;
-    text-decoration: none;
+    background-color: #cee6fd;
-    color: #333;
+    flex-direction: column;
-}
 
-.nav-button:hover {
-    background: #e0e0e0;
 }
 
 /* Хедер */
 .navigation-box {
     padding: 15px 0;
-    border-bottom: 1px solid #eee;
+    margin-bottom: 0;
-    margin-bottom: 20px;
+    width: 100%;
+    border-bottom: dashed #ffffff;
+
 }
 
 .breadcrumb {
+    justify-content: center;
     display: flex;
     align-items: center;
     list-style: none;
     padding: 0;
     margin: 0;
     font-size: 16px;
+    flex-wrap: wrap;
 }
 
 .breadcrumb a, .breadcrumb span {
     margin: 0 5px;
+    white-space: nowrap;
 }
 
+/* Основное содержимое */
+.content-area {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+
+
+/* Контейнер сетки */
+.manga-grid-container {
+    width: 100%;
+    overflow-x: auto; /* На случай узких экранов */
+}
+
+/* Сетка превью */
+.grid-container {
+    width: 100%;
+    margin: 20px;
+}
+
+.manga-grid {
+    display: grid;
+    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
+    gap: var(--grid-gap); /* Фиксированный отступ */
+    justify-items: center;
+    max-width: calc(
+        (var(--preview-base-width) * var(--preview-scale) * var(--grid-columns)) +
+        (var(--grid-gap) * (var(--grid-columns) - 1))
+    );
+}
+
+/* Элементы превью */
+.manga-preview {
+    width: calc(var(--preview-base-width) * var(--preview-scale));
+    height: calc(var(--preview-base-height) * var(--preview-scale));
+    overflow: hidden;
+    border-radius: 5px;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+    transition: transform 0.3s;
+}
+
+.manga-preview:hover {
+    transform: scale(1.05);
+}
+
+.manga-preview img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+
+/* Страница манги */
+.image-scaling-container {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    box-shadow: 0 0 20px rgba(0,0,0,0.4);
+}
+
+.scalable-image {
+    width: calc(100% * var(--page-scale));
+    height: auto;
+    max-width: 100%;
+    object-fit: contain;
+    box-shadow: 0 0 20px rgba(0,0,0,0.4);
+}
 /* Футер */
 .footer-navigation {
-    margin-top: 30px;
+    margin-top: 0;
-    padding-top: 20px;
+    padding: 15px 0;
-    border-top: 1px solid #eee;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 15px;
+    width: 100%;
+    border-top: dashed #ffffff;
+
 }
 
 .dropdown-box select {
@@ -113,11 +142,14 @@
     border-radius: 4px;
     border: 1px solid #ccc;
     min-width: 200px;
+    max-width: 100%;
 }
 
 .page-buttons {
     display: flex;
     gap: 10px;
+    flex-wrap: wrap;
+    justify-content: center;
 }
 
 .nav-button {
@@ -126,16 +158,30 @@
     border-radius: 4px;
     text-decoration: none;
     color: #333;
+    border: none;
+    cursor: pointer;
+    font-size: 14px;
 }
 
 .nav-button:hover {
     background: #e0e0e0;
 }
 
-/* Контент */
+/* Адаптивность */
-.manga-page {
+@media (max-width: 1200px) {
-    max-width: 100%;
+    :root { --grid-columns: 4; }
-    max-height: 70vh;
+}
-    display: block;
+
-    margin: 0 auto;
+@media (max-width: 768px) {
+    :root {
+        --grid-columns: 3;
+        --preview-scale: 0.7;
+    }
+}
+
+@media (max-width: 480px) {
+    :root {
+        --grid-columns: 2;
+        --grid-gap: 10px; /* Можно уменьшить для мобилок */
+    }
 }