Change CSS framework from PicoCSS to Bootstrap 5.3
This commit is contained in:
@@ -1,18 +1,87 @@
|
||||
<?php
|
||||
// views/layouts/footer.php
|
||||
?>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="container" style="margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--muted-border-color);">
|
||||
<small>
|
||||
© <?= date('Y') ?> <?= e(APP_NAME) ?>.
|
||||
<?php if (is_logged_in()): ?>
|
||||
<a href="<?= SITE_URL ?>/author/<?= $_SESSION['user_id'] ?>" target="_blank">Моя публичная страница</a>
|
||||
<?php endif; ?>
|
||||
</small>
|
||||
<footer class="bg-light mt-5 py-4 border-top">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-6">
|
||||
<small class="text-muted">
|
||||
© <?= date('Y') ?> <?= e(APP_NAME) ?>
|
||||
</small>
|
||||
</div>
|
||||
<div class="col-md-6 text-md-end">
|
||||
<?php if (is_logged_in()): ?>
|
||||
<a href="<?= SITE_URL ?>/author/<?= $_SESSION['user_id'] ?>" target="_blank" class="text-muted text-decoration-none">
|
||||
<i class="bi bi-eye"></i> Моя публичная страница
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="<?= SITE_URL ?>/assets/js/quill.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script>
|
||||
// Функция для установки темы
|
||||
function setTheme(themeName) {
|
||||
// Устанавливаем cookie на 30 дней
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() + (30 * 24 * 60 * 60 * 1000));
|
||||
const expires = "expires=" + date.toUTCString();
|
||||
document.cookie = "bs_theme=" + themeName + ";" + expires + ";path=/";
|
||||
|
||||
// Перезагружаем страницу для применения темы
|
||||
window.location.reload();
|
||||
}
|
||||
|
||||
// Функция для получения цвета темы (для превью)
|
||||
function getThemeColor(theme) {
|
||||
const themeColors = {
|
||||
'default': '#0d6efd',
|
||||
'cerulean': '#2fa4e7',
|
||||
'cosmo': '#2780e3',
|
||||
'cyborg': '#060606',
|
||||
'darkly': '#375a7f',
|
||||
'flatly': '#2c3e50',
|
||||
'journal': '#eb6864',
|
||||
'litera': '#4582ec',
|
||||
'lumen': '#158cba',
|
||||
'lux': '#1a1a1a',
|
||||
'materia': '#2196f3',
|
||||
'minty': '#78c2ad',
|
||||
'morph': '#6750a4',
|
||||
'pulse': '#593196',
|
||||
'quartz': '#d7ccc8',
|
||||
'sandstone': '#325d88',
|
||||
'simplex': '#d9230f',
|
||||
'sketchy': '#333333',
|
||||
'slate': '#484e5a',
|
||||
'solar': '#b58900',
|
||||
'spacelab': '#446e9b',
|
||||
'superhero': '#4e5d6c',
|
||||
'united': '#e95420',
|
||||
'vapor': '#0d6efd',
|
||||
'yeti': '#008cba',
|
||||
'zephyr': '#0d6efd'
|
||||
};
|
||||
return themeColors[theme] || '#0d6efd';
|
||||
}
|
||||
|
||||
// Применяем цвет превью для всех элементов
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const themePreviews = document.querySelectorAll('.theme-preview');
|
||||
themePreviews.forEach(preview => {
|
||||
const themeOption = preview.closest('.theme-option');
|
||||
if (themeOption) {
|
||||
const theme = themeOption.getAttribute('onclick').match(/setTheme\('([^']+)'\)/)[1];
|
||||
preview.style.backgroundColor = getThemeColor(theme);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Глобальные функции JavaScript
|
||||
function confirmAction(message) {
|
||||
return confirm(message || 'Вы уверены?');
|
||||
|
||||
+171
-55
@@ -1,5 +1,36 @@
|
||||
<?php
|
||||
// views/layouts/header.php
|
||||
|
||||
// Получаем текущую тему из cookies
|
||||
$current_theme = $_COOKIE['bs_theme'] ?? 'default';
|
||||
$available_themes = [
|
||||
'default' => 'Bootstrap Default',
|
||||
'cerulean' => 'Cerulean',
|
||||
'cosmo' => 'Cosmo',
|
||||
'cyborg' => 'Cyborg',
|
||||
'darkly' => 'Darkly',
|
||||
'flatly' => 'Flatly',
|
||||
'journal' => 'Journal',
|
||||
'litera' => 'Litera',
|
||||
'lumen' => 'Lumen',
|
||||
'lux' => 'Lux',
|
||||
'materia' => 'Materia',
|
||||
'minty' => 'Minty',
|
||||
'morph' => 'Morph',
|
||||
'pulse' => 'Pulse',
|
||||
'quartz' => 'Quartz',
|
||||
'sandstone' => 'Sandstone',
|
||||
'simplex' => 'Simplex',
|
||||
'sketchy' => 'Sketchy',
|
||||
'slate' => 'Slate',
|
||||
'solar' => 'Solar',
|
||||
'spacelab' => 'Spacelab',
|
||||
'superhero' => 'Superhero',
|
||||
'united' => 'United',
|
||||
'vapor' => 'Vapor',
|
||||
'yeti' => 'Yeti',
|
||||
'zephyr' => 'Zephyr'
|
||||
];
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
@@ -7,68 +38,153 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title><?= e($page_title ?? 'Web Writer') ?></title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1.5.10/css/pico.min.css">
|
||||
|
||||
<!-- Подключаем выбранную тему Bootstrap -->
|
||||
<?php if ($current_theme === 'default'): ?>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<?php else: ?>
|
||||
<link href="<?= SITE_URL ?>/assets/bs/<?= e($current_theme) ?>/bootstrap.min.css" rel="stylesheet">
|
||||
<?php endif; ?>
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
|
||||
<link rel="stylesheet" href="<?= SITE_URL ?>/assets/css/style.css">
|
||||
<link href="<?= SITE_URL ?>/assets/css/quill.snow.css" rel="stylesheet">
|
||||
<script src="<?= SITE_URL ?>/assets/js/quill.js"></script>
|
||||
<style>
|
||||
.navbar-brand { font-weight: 600; }
|
||||
.dropdown-menu { min-width: 200px; }
|
||||
.alert { border: none; border-radius: 8px; }
|
||||
.main-container { min-height: calc(100vh - 120px); }
|
||||
.theme-option { padding: 8px 12px; cursor: pointer; }
|
||||
.theme-option:hover { background-color: var(--bs-light); }
|
||||
.theme-option.active { background-color: var(--bs-primary); color: white; }
|
||||
.theme-preview { width: 20px; height: 20px; border-radius: 3px; display: inline-block; margin-right: 8px; border: 1px solid #dee2e6; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="container-fluid">
|
||||
<ul>
|
||||
<li><strong><a href="<?= SITE_URL ?>/"><?= e(APP_NAME) ?></a></strong></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<?php if (is_logged_in()): ?>
|
||||
<li><a href="<?= SITE_URL ?>/dashboard">📊 Панель управления</a></li>
|
||||
<li><a href="<?= SITE_URL ?>/books">📚 Мои книги</a></li>
|
||||
<li><a href="<?= SITE_URL ?>/series">📑 Серии</a></li>
|
||||
<li>
|
||||
<details role="list" dir="rtl">
|
||||
<summary aria-haspopup="listbox" role="link">
|
||||
👤 <?= e($_SESSION['display_name']) ?>
|
||||
</summary>
|
||||
<ul role="listbox">
|
||||
<li><a href="<?= SITE_URL ?>/profile">⚙️ Профиль</a></li>
|
||||
<li><a href="<?= SITE_URL ?>/author/<?= $_SESSION['user_id'] ?>" target="_blank">👤 Моя публичная страница</a></li>
|
||||
<?php if ($_SESSION['user_id'] == 1): // Проверка на администратора ?>
|
||||
<li><a href="<?= SITE_URL ?>/admin/users">👥 Управление пользователями</a></li>
|
||||
<?php endif; ?>
|
||||
<li><a href="<?= SITE_URL ?>/logout">🚪 Выход</a></li>
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="<?= SITE_URL ?>/"><?= e(APP_NAME) ?></a>
|
||||
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav me-auto">
|
||||
<?php if (is_logged_in()): ?>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="<?= SITE_URL ?>/dashboard">
|
||||
<i class="bi bi-speedometer2"></i> Панель управления
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="<?= SITE_URL ?>/books">
|
||||
<i class="bi bi-journal-bookmark"></i> Мои книги
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="<?= SITE_URL ?>/series">
|
||||
<i class="bi bi-collection"></i> Серии
|
||||
</a>
|
||||
</li>
|
||||
<?php endif; ?>
|
||||
</ul>
|
||||
|
||||
<ul class="navbar-nav">
|
||||
<!-- Выбор темы -->
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
|
||||
<i class="bi bi-palette"></i> Тема
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-end">
|
||||
<li><h6 class="dropdown-header">Выбор темы</h6></li>
|
||||
<?php foreach ($available_themes as $theme_key => $theme_name): ?>
|
||||
<li>
|
||||
<a class="dropdown-item theme-option <?= $current_theme === $theme_key ? 'active' : '' ?>"
|
||||
href="#"
|
||||
onclick="setTheme('<?= $theme_key ?>')">
|
||||
<span class="theme-preview" style="background-color: getThemeColor('<?= $theme_key ?>')"></span>
|
||||
<?= e($theme_name) ?>
|
||||
<?php if ($current_theme === $theme_key): ?>
|
||||
<i class="bi bi-check float-end"></i>
|
||||
<?php endif; ?>
|
||||
</a>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
<?php else: ?>
|
||||
<li><a href="<?= SITE_URL ?>/login">🔑 Вход</a></li>
|
||||
<li><a href="<?= SITE_URL ?>/register">📝 Регистрация</a></li>
|
||||
<?php endif; ?>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<?php if (is_logged_in()): ?>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
|
||||
<i class="bi bi-person-circle"></i> <?= e($_SESSION['display_name']) ?>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-end">
|
||||
<li><a class="dropdown-item" href="<?= SITE_URL ?>/profile">
|
||||
<i class="bi bi-gear"></i> Профиль
|
||||
</a></li>
|
||||
<li><a class="dropdown-item" href="<?= SITE_URL ?>/author/<?= $_SESSION['user_id'] ?>" target="_blank">
|
||||
<i class="bi bi-eye"></i> Публичная страница
|
||||
</a></li>
|
||||
<?php if ($_SESSION['user_id'] == 1): ?>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="<?= SITE_URL ?>/admin/users">
|
||||
<i class="bi bi-people"></i> Управление пользователями
|
||||
</a></li>
|
||||
<?php endif; ?>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item text-danger" href="<?= SITE_URL ?>/logout">
|
||||
<i class="bi bi-box-arrow-right"></i> Выход
|
||||
</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<?php else: ?>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="<?= SITE_URL ?>/login">
|
||||
<i class="bi bi-box-arrow-in-right"></i> Вход
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="<?= SITE_URL ?>/register">
|
||||
<i class="bi bi-person-plus"></i> Регистрация
|
||||
</a>
|
||||
</li>
|
||||
<?php endif; ?>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main class="container">
|
||||
<?php if (isset($_SESSION['success'])): ?>
|
||||
<div class="alert alert-success">
|
||||
<?= e($_SESSION['success']) ?>
|
||||
<?php unset($_SESSION['success']); ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<main class="main-container">
|
||||
<div class="container mt-4">
|
||||
<?php if (isset($_SESSION['success'])): ?>
|
||||
<div class="alert alert-success alert-dismissible fade show">
|
||||
<?= e($_SESSION['success']) ?>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||||
<?php unset($_SESSION['success']); ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if (isset($_SESSION['error'])): ?>
|
||||
<div class="alert alert-error">
|
||||
<?= e($_SESSION['error']) ?>
|
||||
<?php unset($_SESSION['error']); ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php if (isset($_SESSION['error'])): ?>
|
||||
<div class="alert alert-danger alert-dismissible fade show">
|
||||
<?= e($_SESSION['error']) ?>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||||
<?php unset($_SESSION['error']); ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if (isset($_SESSION['warning'])): ?>
|
||||
<div class="alert alert-warning">
|
||||
<?= e($_SESSION['warning']) ?>
|
||||
<?php unset($_SESSION['warning']); ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php if (isset($_SESSION['warning'])): ?>
|
||||
<div class="alert alert-warning alert-dismissible fade show">
|
||||
<?= e($_SESSION['warning']) ?>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||||
<?php unset($_SESSION['warning']); ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if (isset($_SESSION['info'])): ?>
|
||||
<div class="alert alert-info">
|
||||
<?= e($_SESSION['info']) ?>
|
||||
<?php unset($_SESSION['info']); ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php if (isset($_SESSION['info'])): ?>
|
||||
<div class="alert alert-info alert-dismissible fade show">
|
||||
<?= e($_SESSION['info']) ?>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||||
<?php unset($_SESSION['info']); ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
Reference in New Issue
Block a user