templates/admin-teh.html - main - AlexStudio-Code/global-warming

templates/admin-teh.html
221 строка10 KB
AlexStudio Code
Add files via upload
19 апр 2025, 13:18
19 апр 2025, 13:18765272d
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Админская панель</title>
   <link rel="shortcut icon" href="https://i.imgur.com/Svz1Ed7.png"/>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            padding: 20px;
            background-color: #1e1e1e; /* Темный цвет фона */
            color: #ffffff; /* Белый цвет текста */
        }
        h1 {
            font-size: 24px;
            text-align: center;
            color:  #3a3a3a; /* Цвет заголовка */
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            padding: 10px;
            text-align: left;
            border: 1px solid #444; /* Темная граница для ячеек */
        }
        th {
            background-color: #3a3a3a; /* Темный фон для заголовков таблицы */
            color: #ffffff; /* Цвет текста заголовков */
        }
        td {
            background-color: #2a2a2a; /* Темный фон для ячеек */
            color: #ffffff; /* Цвет текста ячеек */
        }
        img {
            max-width: 80%; /* Уменьшение размера изображений для мобильных */
            height: auto; /* Автоматическая высота для сохранения пропорций */
        }
        form {
            display: inline; /* Отображение формы в одной строке */
        }
        input[type="text"] {
            width: auto; /* Ширина поля ввода по умолчанию */
            padding: 5px;
            margin-right: 5px;
            background-color: #333; /* Темный фон для поля ввода */
            color: #ffffff; /* Белый текст в поле ввода */
            border: 1px solid #444; /* Темная граница для поля ввода */
            border-radius: 4px; /* Скругление углов */
        }
        button {
            padding: 5px 10px;
            cursor: pointer;
            border: none;
            background-color: #007bff; /* Цвет фона кнопок */
            color: white; /* Цвет текста */
            border-radius: 4px; /* Скругление углов */
            margin-right: 5px; /* Отступ между кнопками */
        }
        button:hover {
            background-color: #0056b3; /* Цвет фона при наведении */
        }

        /* Медиа-запросы для адаптации */
        @media (max-width: 600px) {
            table, th, td {
                display: block; /* Блоковое отображение для мобильных устройств */
                width: 100%;
                box-sizing: border-box; /* Включение границ в ширину */
            }
            th {
                display: none; /* Скрытие заголовков на мобильных */
            }
            tr {
                margin-bottom: 15px; /* Отступ между строками */
                border: 1px solid #444; /* Темная граница вокруг каждой строки */
                padding: 10px; /* Отступ внутри строки */
                background-color: #2a2a2a; /* Темный фон для строк */
                color: #ffffff; /* Цвет текста строк */
            }
            td {
                text-align: right; /* Выравнивание текста вправо */
                position: relative; /* Для позиционирования псевдоэлементов */
                padding-left: 50%; /* Отступ слева для создания пространства для меток */
            }
            td::before {
                content: attr(data-label); /* Использование атрибута data-label для меток */
                position: absolute;
                left: 10px; /* Отступ от левого края */
                text-align: left; /* Выравнивание текста влево */
                font-weight: bold; /* Полужирный шрифт для меток */
                color: #ffffff; /* Цвет меток */
            }
        }

        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            padding: 20px;
            background-color: #f9f9f9;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            padding: 10px;
            text-align: left;
            border: 1px solid #ddd;
            word-wrap: break-word; /* Позволяет переносить длинные слова */
            max-width: 200px; /* Максимальная ширина для ячеек */
        }
        th {
            background-color:  #3a3a3a;
        }
        .description {
            white-space: pre-wrap; /* Сохраняет переносы строк */
        }
        .button {
            background-color: green; /* Зеленый фон */
            color: white; /* Белый текст */
            padding: 5px 10px; /* Отступы */
            text-decoration: none; /* Убираем подчеркивание */
            border-radius: 5px; /* Закругленные углы */
            display: inline-block; /* Чтобы кнопки были в строке */
        }
        .button:hover {
            background-color: darkgreen; /* Темно-зеленый при наведении */
        }


        .button2 {
            background-color: red; /* Зеленый фон */
            color: white; /* Белый текст */
            padding: 5px 10px; /* Отступы */
            text-decoration: none; /* Убираем подчеркивание */
            border-radius: 5px; /* Закругленные углы */
            display: inline-block; /* Чтобы кнопки были в строке */
        }
        .button2:hover {
            background-color: darkred; /* Темно-зеленый при наведении */
        }


        .button3 {
            background-color: yellow; /* Зеленый фон */
            color: white; /* Белый текст */
            padding: 5px 10px; /* Отступы */
            text-decoration: none; /* Убираем подчеркивание */
            border-radius: 5px; /* Закругленные углы */
            display: inline-block; /* Чтобы кнопки были в строке */
        }
        .button3:hover {
            background-color: rgb(158, 158, 0); /* Темно-зеленый при наведении */
        }


        .back-button {
            display: block;
            margin: 20px auto; /* Центрирование кнопки */
            padding: 10px 20px; /* Отступы для кнопки */
            background-color: blue; /* Синий фон */
            color: white; /* Белый текст */
            text-align: center; /* Центрирование текста */
            border-radius: 5px; /* Закругленные углы */
            font-size: 18px; /* Размер шрифта */
            text-decoration: none; /* Убираем подчеркивание */
            transition: background-color 0.3s; /* Плавный переход цвета */
        }
        .back-button:hover {
            background-color: darkblue; /* Темно-синий при наведении */
        }
        
    </style>
</head>
<body>
    <h1>Админская панель</h1>

    <table>
        <tr>
            <th>Имя пользователя</th>
            <th>Описание</th>
            <th>Статус</th>
            <th>Действия</th>
        </tr>
        {% for application in applications %}
        <tr>
            <td data-label="Имя пользователя">{{ application.user.username }}</td>
            <td data-label="Описание" class="description">{{ application.description }}</td>
            <td data-label="Статус">
                {% if application.status == 'Отказано' %}
                    <img src="{{ url_for('static', filename='images/отказано.gif') }}" alt="{{ application.status }}" width="150" height="60">
                {% elif application.status == 'Ожидание' %}
                    <p>Ожидание</p>
                {% elif application.status == 'Одобрено' %}
                    <img src="{{ url_for('static', filename='images/одобрено.gif') }}" alt="{{ application.status }}" width="150" height="60">
                {% else %}
                    <img src="{{ url_for('static', filename='images/Ожидание.gif') }}" alt="{{ application.status }}" width="150" height="60">
                {% endif %}
            </td>
            <td data-label="Действия">
                <a href="/teh_help/{{ application.id }}" class="button3">Посмотреть</a>
                <form action="/respond/{{ application.id }}" method="POST" style="display:inline;">
                    <input type="text" name="response" placeholder="Ваш ответ">
                    <button type="submit">Ответить</button>
                </form>
                <a href="/mark_as_reviewed/{{ application.id }}" class="button">Отметить как Одобрено</a>
                <a href="/mark_as_rejected/{{ application.id }}" class="button2">Отметить как Отказано</a>
            </td>
        </tr>
        {% endfor %}
    </table>

    <a href="/admin" class="back-button">Назад</a> <!-- Кнопка "Назад" -->
</body>
</html>