---

base.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %} {% endblock %}</title>
    {% load static %}
    <link rel="stylesheet" type="text/css" href="{% static 'main/css/base.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'main/css/page2.css' %}">
</head>
<body>

    <div class="hat">
        <img class="logo" src="{% static 'main/image/logo.jpg' %}" alt="Логотип">
        <nav>
            <a href="/">Главная</a>
            <a href="https://vk.com/">Мы в соц сетях</a>
            <a href="/admin">Вход</a>
            <a href="add_info/">Добавить фильм</a>
        </nav>
    </div>

    {% block content %} {% endblock %}

</body>
</html>

-------------------------------------------------------------------------------------
home.html:

{% extends 'main/base.html' %}
{% load static %}

{% block content %}
   <div class="films_block">
   {% for el in table %}
        <div class="film">
            {% if el.image %}
                <img src="{{ el.image.url }}" alt="{{ el.title }}" class="film-image">
            {% endif %}
            <h2>{{ el.title }}</h2>
            <p>{{ el.text }}</p>
        </div>
    {% endfor %}
   </div>

{% endblock %}

-------------------------------------------------------------------------------------
page2.html

{% extends 'main/base.html' %}

{% block title %}
Вторая страница
{% endblock %}

{% block content %}
<div class="add_info">
    <h1>Добавить фильм</h1>
    <form method="post" enctype="multipart/form-data" class="add-form">
        {% csrf_token %}
        {{ form.title }}
        {{ form.text }}
        {{ form.image }}
        <button type="submit" class="but">Добавить</button>
    </form>
</div>
{% endblock %}

-------------------------------------------------------------------------------------
forms.py

from .models import Table
from django.forms import ModelForm, TextInput, Textarea
from django.forms import ClearableFileInput

class TableForm(ModelForm):
   class Meta:
       model =Table
       fields = ['title', 'text', 'image']
       widgets = {
           'title': TextInput(attrs={"class": "form_control", "placeholder": "Введите название"}),
           'text': Textarea(attrs={"class": "form_control", "placeholder": "Введите описание"}),
          'image': ClearableFileInput(attrs={"class": "form_control", "placeholder": "Загрузите картинку"}),
       }

-------------------------------------------------------------------------------------
models.py

from django.db import models
from django.forms import ModelForm, TextInput, Textarea, ImageField,ClearableFileInput

class Table(models.Model):
    title = models.CharField("Введите название: ", max_length=50)
    text = models.TextField("Введите описание: ")
    image = models.ImageField(
        "Загрузите изображение",
        upload_to='table_images/',
        null=True,
        blank=True
    )

    def __str__(self):
        return self.title

    class Meta():
        verbose_name = "Table"
        verbose_name_plural = "Tables"

class TableForm(ModelForm):
    class Meta:
        model = Table
        fields = ["title" , "text" , "image"]
        widgets = {
            "title": TextInput(attrs={"class": "form-control", "placeholder": "Введите название"}),
            "text": Textarea(attrs={"class": "form-control", "placeholder": "Введите описание"}),
            'image': ClearableFileInput(attrs={"class": "form_control", "placeholder": "Загрузите картинку"}),
        }

-------------------------------------------------------------------------------------
views.py

def add_info(request):
    if request.method == 'POST':
        form = TableForm(request.POST, request.FILES)   # обязательно request.FILES
        if form.is_valid():
            form.save()
            return redirect('home')  
    else:
        form = TableForm()
    return render(request, 'main/page2.html', {'form': form})
	
	

-------------------------------------------------------------------------------------
base.css

body {
    background-color: #1f1f1f;          /* добавлен # для корректного цвета */
    background-image: url("../image/cat.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    padding-top: 100px;                /* отступ, чтобы контент не залезал под абсолютную шапку */
    margin: 0;                         /* убираем возможные браузерные отступы */
}

/* Шапка */
.hat {
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.5);
    width: 100%;
    height: 70px;
    display: flex;                     /* выравниваем логотип и навигацию в строку */
    align-items: center;               /* вертикальное центрирование */
    justify-content: space-between;    /* логотип слева, навигация справа */
    padding: 0 20px;                   /* небольшие боковые отступы */
    box-sizing: border-box;
    z-index: 10;                       /* шапка поверх контента, если нужно */
}

/* Логотип – без гигантских смещений */
.logo {
    height: 50px;                      /* или подгони под реальный размер */
    width: auto;
    position: static;                  /* отменяет наследуемый absolute, если был */
}

/* Навигация – убираем принудительный левый сдвиг */
nav {
    display: flex;
    gap: 15px;                         /* расстояние между ссылками */
    flex-wrap: wrap;                   /* чтобы ссылки не вылезали на маленьких экранах */
    justify-content: flex-end;
}

/* Ссылки */
a {
    color: black;
    font-size: 20px;
    font-family: "Comic Sans MS", cursive, sans-serif;
    display: inline-block;
    border: 2px solid rgba(255, 255, 255, 0.5);
    padding: 8px 12px;
    border-radius: 10px;
    text-decoration: none;
    white-space: nowrap;
}

a:hover {
    animation: UpScale 0.5s forwards;
}

@keyframes UpScale {
    0% {
        transform: scale(1);
        box-shadow: 0px 20px 40px rgba(0, 0, 0, 0);
    }
    100% {
        transform: scale(1.03);
        box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.5);
    }
}

/* --- Контейнер с фильмами --- */
.films_block {                  /* исправлен селектор (точка) */
    margin-top: 30px;           /* дополнительный отступ от шапки, если нужно */
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;        /* центрируем карточки */
    gap: 25px;
}

/* Карточка фильма */
.film {
    width: 650px;
    max-width: 90%;             /* чтобы на узких экранах не вылезало */
    padding: 20px;
    background-color: #3a65a6;
    border-radius: 25px;
    color: white;               /* белый текст на синем фоне – так читаемее */
    position: relative;         /* если понадобятся внутренние абсолютные элементы */
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* Заголовок фильма – теперь в потоке */
.film h2 {
    color: #ffffff;
    font-size: 26px;
    font-family: "Comic Sans MS", cursive, sans-serif;
    margin: 0 0 10px 0;
    text-align: center;
}

/* Описание фильма – в потоке */
.film p {
    color: #e0e0e0;
    font-size: 18px;
    font-family: "Comic Sans MS", cursive, sans-serif;
    line-height: 1.5;
    margin: 0;
}

/* --- Элементы, которые ты использовал на других страницах (panel, cat) --- */
/* оставляем, но они не должны портить главную */
.panel {
    position: absolute;
    width: 400px;
    height: 600px;
    background-color: rgba(255, 255, 255, 0.5);
    top: 150px;
    left: 100px;
    animation: Pulse 2s ease infinite;
}

.cat {
    position: absolute;
    width: 500px;
    height: 800px;
    background-color: rgba(255, 255, 255, 0.5);
    top: 150px;
    left: 800px;
}

@keyframes Pulse {
    0% {
        transform: scale(1);
        box-shadow: 0px 20px 60px rgba(255, 255, 255, 0.5);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0px 20px 60px rgba(255, 255, 255, 0.5);
    }
    100% {
        transform: scale(1);
        box-shadow: 0px 20px 60px rgba(255, 255, 255, 0.5);
    }
}

.film-image {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 15px;
    display: block;
}


-------------------------------------------------------------------------------------
page2.css

/* === Контейнер формы === */
.add_info {
    max-width: 650px;
    margin: 50px auto 0 auto;       /* центрируем блок */
    padding: 30px 40px;
    background-color: rgba(255, 255, 255, 0.85);  /* полупрозрачный белый, как у шапки */
    border-radius: 20px;
    box-shadow: 0px 20px 60px rgba(0, 0, 0, 0.5); /* тень для глубины */
}

/* Заголовок внутри блока */
.add_info h1 {
    color: #1c5e2b;
    font-size: 28px;
    font-family: "Comic Sans MS", cursive, sans-serif;
    text-align: center;
    margin-bottom: 30px;
    /* Переопределяем глобальные свойства, которые могли быть absolute и т.п. */
    position: static;
    left: auto;
    top: auto;
}

/* === Поля ввода === */
.form_control {
    display: block;
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 20px;
    font-size: 18px;
    font-family: "Comic Sans MS", cursive, sans-serif;
    border: 2px solid rgba(28, 94, 43, 0.3);    /* зеленоватая рамка */
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.9);
    color: #1f1f1f;
    box-sizing: border-box;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.form_control:focus {
    outline: none;
    border-color: #1c5e2b;
    box-shadow: 0 0 8px rgba(28, 94, 43, 0.4);
}

/* Стили для textarea – такая же ширина и высота побольше */
textarea.form_control {
    min-height: 120px;
    resize: vertical;
}

/* Стили для поля выбора файла (браузерный стандарт) */
input[type="file"].form_control {
    padding: 10px;
    cursor: pointer;
}

/* === Кнопка === */
.but {
    display: block;
    width: 100%;
    padding: 14px;
    font-size: 22px;
    font-family: "Comic Sans MS", cursive, sans-serif;
    color: white;
    background-color: #1c5e2b;      /* тёмно-зелёная, как твой текст */
    border: none;
    border-radius: 12px;
    cursor: pointer;
    margin-top: 10px;
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.2s;
}

.but:hover {
    background-color: #2a7a38;
    transform: scale(1.02);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.but:active {
    transform: scale(0.98);
}