guide/formatting.php - master - codxplr/voprosovNET

guide/formatting.php
338 строк16 KB
codxplr
Create: style.css, formatting.php, howtopost.php, subscriptions.php, 3myP4ibv3tAib88QV-_auN8n6nSLC1NDYlcGaE9PQa4ek71BOJIY5S7YRUr5Ikqawb91hZTdoA-KvUE6harf8Ru_.jpg, default-avatar.png, favicon.png, admheader.php, footer.php, header.php, paidservice.php, privacy.php, tos.php, access_denied.php, admin.php, config.php, db_setup.sql, edit_profile.php, functions.php, index.php, login.php, logout.php, moderator.php, notifications.php, profile.php, register.php, set_admin_pass.php, stats.php, warn.php
04 авг 2026, 10:43
Верифицирован
04 авг 2026, 10:4303ec57b
<?php
require_once '../config.php';
session_start();
require_once '../functions.php';

// --- Базовая настройка ошибок ---
error_reporting(E_ALL);
ini_set('display_errors', 0);

// --- Авторизация (для отображения профиля в шапке) ---
$currentUser = null;
if (!empty($_SESSION['user_id'])) {
    $stmt = $pdo->prepare('SELECT * FROM users WHERE id = ?');
    $stmt->execute([$_SESSION['user_id']]);
    $currentUser = $stmt->fetch(PDO::FETCH_ASSOC);
}

$siteName = ($config['site_name'] ?? 'Вопрософф.НЕТ') . ' | Форматирование';
?>
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= htmlspecialchars($siteName, ENT_QUOTES | ENT_HTML5, 'UTF-8') ?></title>
    <link rel="stylesheet" href="../css/style.css">
	<link rel="icon" type="image/png" href="img/favicon.png">
    <style>
        :root {
            --bg: #f4f6f8;
            --card: #ffffff;
            --text: #2b2d32;
            --muted: #6c757d;
            --accent: #ff4500;
            --accent-hover: #e53b00;
            --border: #e9ecef;
            --code-bg: #1e1e1e;
            --code-text: #d4d4d4;
            --good: #0f5132;
            --warn: #856404;
        }

        body {
            margin: 0;
            padding: 0;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: var(--bg);
            color: var(--text);
        }

        .fmt-container {
            max-width: 900px;
            margin: 40px auto;
            padding: 0 16px;
        }

        header.fmt-header {
            text-align: center;
            margin-bottom: 40px;
        }

        .fmt-title {
            font-size: 2.2rem;
            line-height: 1.1;
            margin: 0 0 8px 0;
            color: var(--text);
        }

        .fmt-subtitle {
            color: var(--muted);
            font-size: 1.1rem;
        }

        article.fmt-section {
            background: var(--card);
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
            padding: 32px;
            margin-bottom: 32px;
            border: 1px solid var(--border);
        }

        h2.section-title {
            font-size: 1.6rem;
            margin: 0 0 20px 0;
            color: var(--text);
            border-bottom: 1px solid var(--border);
            padding-bottom: 10px;
        }

        p, li {
            line-height: 1.6;
            color: var(--text);
        }

        /* Таблица стилей */
        table.fmt-table {
            width: 100%;
            border-collapse: collapse;
            margin: 16px 0;
            background: #fff;
        }
        table.fmt-table th,
        table.fmt-table td {
            border: 1px solid var(--border);
            padding: 12px;
            text-align: left;
        }
        table.fmt-table th {
            background: #fafafa;
            color: var(--text);
        }
        table.fmt-table tr:nth-child(even) {
            background: #fcfcfc;
        }

        pre.fmt-code {
            background: var(--code-bg);
            color: var(--code-text);
            padding: 16px;
            border-radius: 8px;
            overflow-x: auto;
            margin: 12px 0;
            font-family: "Consolas", "Monaco", monospace;
            font-size: 0.9rem;
        }

        code.fmt-inline {
            font-family: "Consolas", "Monaco", monospace;
            padding: 2px 6px;
            border-radius: 4px;
            background: #f8f9fa;
        }

        .example-rendered {
            padding: 16px;
            background: #fff;
            border: 1px dashed var(--border);
            border-radius: 8px;
            margin: 16px 0;
        }

        .badge {
            display: inline-block;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 600;
        }
        .badge-good { background: #d1e7dd; color: var(--good); }
        .badge-warn { background: #fff3cd; color: var(--warn); }

        .btn-primary {
            display: inline-block;
            background: var(--accent);
            color: #fff;
            padding: 10px 20px;
            text-decoration: none;
            border-radius: 6px;
            font-weight: 600;
            transition: background 0.2s;
        }
        .btn-primary:hover { background: var(--accent-hover); }

        @media (max-width: 640px) {
            .fmt-container { margin: 20px auto; padding: 0 12px; }
            article.fmt-section { padding: 24px; }
            .fmt-title { font-size: 1.8rem; }
        }
    </style>
</head>
<body>
    <?php require_once '../inc/header.php'; ?>

    <div class="fmt-container">
        <header class="fmt-header">
            <h1 class="fmt-title">Форматирование текста на форуме</h1>
            <p class="fmt-subtitle">BB‑коды, примеры, что работает, а что нет</p>
        </header>

        <!-- Важное предупреждение -->
        <article class="fmt-section">
            <h2 class="section-title">Важно: безопасность и ограничения</h2>
            <p>
                На форуме <strong>не поддерживается HTML</strong>. Все теги вида <code>&lt;b&gt;</code>, <code>&lt;script&gt;</code> и т.п. будут экранированы и показаны как обычный текст. Это защита от XSS.
            </p>
            <p>
                Для оформления используйте <strong>BB‑коды</strong> — они безопасны и работают стабильно.
            </p>
            <div style="padding:12px; background:#fff8f8; border:1px solid #ffc1c1; border-radius:8px;">
                <strong>⚠️ Не пытайтесь обходить защиту:</strong> любые попытки вставить скрипты, iframe, onclick и т.д. приведут к удалению сообщения и могут стать причиной блокировки аккаунта.
            </div>
        </article>

        <!-- Основные BB-коды -->
        <article class="fmt-section">
            <h2 class="section-title">Основные BB‑коды</h2>
            <table class="fmt-table">
                <thead>
                    <tr>
                        <th>Код</th>
                        <th>Как писать</th>
                        <th>Результат</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><b>Жирный</b></td>
                        <td><code class="fmt-inline">[b]Текст[/b]</code></td>
                        <td><b>Жирный текст</b></td>
                    </tr>
                    <tr>
                        <td><i>Курсив</i></td>
                        <td><code class="fmt-inline">[i]Текст[/i]</code></td>
                        <td><i>Курсив</i></td>
                    </tr>
                    <tr>
                        <td><u>Подчёркнутый</u></td>
                        <td><code class="fmt-inline">[u]Текст[/u]</code></td>
                        <td><u>Подчёркнутый текст</u></td>
                    </tr>
                    <tr>
                        <td>Ссылка</td>
                        <td><code class="fmt-inline">[url=https://example.com]Текст ссылки[/url]</code></td>
                        <td><a href="#">Текст ссылки</a></td>
                    </tr>
                    <tr>
                        <td>Цитата</td>
                        <td><pre style="margin:0; padding:0; background:none; border:none; font-size:0.9rem;">[quote]
Текст цитаты
[/quote]</pre></td>
                        <td>
                            <blockquote style="border-left:4px solid var(--accent); padding-left:12px; margin:0; color:var(--muted);">
                                Текст цитаты
                            </blockquote>
                        </td>
                    </tr>
                </tbody>
            </table>
        </article>

        <!-- Пример реального сообщения -->
        <article class="fmt-section">
            <h2 class="section-title">Пример: как это выглядит в теме</h2>
            <p>Ниже — то, что пользователь вводит в поле, и то, как это отобразится на странице.</p>

            <div class="example-rendered">
                <h3>Что вы пишете (BB‑код):</h3>
                <pre class="fmt-code">[b]Срыв после 3 месяцев трезвости — как не сдаться?[/b]

Всем привет. Я [i]уже 3 месяца держался[/i], вчера сорвался и выпил алкоголь. Чувствую вину и стыд, но хочу продолжать.

[quote]
Когда накрывает, я стараюсь просто выйти на улицу и пройтись 15 минут.
[/quote]
Это не чудо‑средство, но помогает не принимать решений на эмоциях.

Если у кого-то был похожий опыт — поделитесь, пожалуйста.</pre>

                <hr style="border:0; border-top:1px solid var(--border); margin:20px 0;">

                <h3>Как это отобразится:</h3>
                <div style="line-height:1.6;">
                    <h3 style="margin:0 0 10px;"><b>Срыв после 3 месяцев трезвости — как не сдаться?</b></h3>
                    <p>
                        Всем привет. Я <i>уже 3 месяца держался</i>, вчера сорвался и выпил алкоголь. Чувствую вину и стыд, но хочу продолжать.
                    </p>
                    <blockquote style="border-left:4px solid var(--accent); padding-left:12px; margin:16px 0; color:var(--muted);">
                        Когда накрывает, я стараюсь просто выйти на улицу и пройтись 15 минут.
                    </blockquote>
                    <p>
                        Это не чудо‑средство, но помогает не принимать решений на эмоциях.
                    </p>
                    <p>
                        Если у кого-то был похожий опыт — поделитесь, пожалуйста.
                    </p>
                </div>
            </div>
        </article>

        <!-- Продвинутые приёмы -->
        <article class="fmt-section">
            <h2 class="section-title">Полезные приёмы</h2>
            <ul>
                <li>
                    <strong>Разбивайте текст на абзацы.</strong> Один большой блок сложно читать. Лучше несколько коротких.
                </li>
                <li>
                    <strong>Используйте цитаты умеренно.</strong> Цитата без собственного текста выглядит как «копипаста». Добавьте 1–2 предложения от себя.
                </li>
                <li>
                    <strong>Ссылки — только по делу.</strong> Не стоит вставлять десятки ссылок подряд. Если их много — лучше оформить списком.
                </li>
            </ul>
        </article>

        <!-- Чего не работает -->
        <article class="fmt-section">
            <h2 class="section-title">Чего не работает (и не пытайтесь)</h2>
            <ul class="steps" style="list-style:none; counter-reset:step;">
                <li style="position:relative; padding-left:36px; margin-bottom:10px;">
                    <span style="position:absolute; left:0; top:2px; width:28px; height:28px; background:var(--warn); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:bold; font-size:0.8rem;">!</span>
                    HTML‑теги: <code class="fmt-inline">&lt;b&gt;, &lt;div&gt;, &lt;span&gt;</code> — будут показаны как текст.
                </li>
                <li style="position:relative; padding-left:36px; margin-bottom:10px;">
                    <span style="position:absolute; left:0; top:2px; width:28px; height:28px; background:var(--warn); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:bold; font-size:0.8rem;">!</span>
                    JavaScript, скрипты, <code class="fmt-inline">onclick</code>, <code class="fmt-inline">onmouseover</code> — не выполняются.
                </li>
                <li style="position:relative; padding-left:36px; margin-bottom:10px;">
                    <span style="position:absolute; left:0; top:2px; width:28px; height:28px; background:var(--warn); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:bold; font-size:0.8rem;">!</span>
                    CSS‑стили в атрибутах: <code class="fmt-inline">style="color:red"</code> — игнорируются.
                </li>
                <li style="position:relative; padding-left:36px; margin-bottom:10px;">
                    <span style="position:absolute; left:0; top:2px; width:28px; height:28px; background:var(--warn); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:bold; font-size:0.8rem;">!</span>
                    iframe, embed, object — не поддерживаются.
                </li>
            </ul>
            <p>
                Если вы видите, что форматирование «не работает» — скорее всего, вы использовали HTML. Используйте только BB‑коды из таблицы выше.
            </p>
        </article>

        <!-- CTA -->
        <div style="text-align:center; margin-top:40px;">
            <?php if ($currentUser && $currentUser['role'] !== 'guest'): ?>
                <a href="../index.php" class="btn-primary">Вернуться к форуму</a>
                <a href="../index.php?create=1" style="display:inline-block; margin-left:12px; color:var(--accent); font-weight:600;">Создать тему</a>
            <?php else: ?>
                <p style="margin-bottom:12px;">Чтобы создавать темы и отвечать, нужно войти или зарегистрироваться.</p>
                <a href="../login.php" class="btn-primary">Войти</a>
                <a href="../register.php" style="display:inline-block; margin-left:12px; color:var(--accent); font-weight:600;">Регистрация</a>
            <?php endif; ?>
        </div>
    </div>

    <?php require_once '../inc/footer.php'; ?>
</body>
</html>