mirivlad/web_writer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Change CSS framework from PicoCSS to Bootstrap 5.3

Browse Source
This commit is contained in:
mirivlad
2025-11-27 14:46:51 +08:00
parent e51768622f
commit 39cda7814f
245 changed files with 678223 additions and 2750 deletions
Download Patch File Download Diff File Expand all files Collapse all files
views/user/profile.php
+128 -128
View File
@@ -3,139 +3,139 @@
include 'views/layouts/header.php';
?>
<h1>Мой профиль</h1>
<?php if ($message): ?>
<div class="alert <?= strpos($message, 'Ошибка') !== false ? 'alert-error' : 'alert-success' ?>">
<?= e($message) ?>
<div class="container">
<div class="d-flex justify-content-between align-items-center mb-4">
<h1 class="h2">Мой профиль</h1>
<a href="<?= SITE_URL ?>/dashboard" class="btn btn-outline-secondary">
<i class="bi bi-arrow-left"></i> Назад в панель
</a>
</div>
<?php endif; ?>
<div class="grid">
<article>
<h2>Основная информация</h2>
<form method="post" enctype="multipart/form-data">
<input type="hidden" name="csrf_token" value="<?= generate_csrf_token() ?>">
<div style="margin-bottom: 1rem;">
<label for="username" style="display: block; margin-bottom: 0.5rem; font-weight: bold;">
Имя пользователя (нельзя изменить)
</label>
<input type="text" id="username" value="<?= e($user['username']) ?>" disabled style="width: 100%;">
</div>
<div style="margin-bottom: 1rem;">
<label for="display_name" style="display: block; margin-bottom: 0.5rem; font-weight: bold;">
Отображаемое имя *
</label>
<input type="text" id="display_name" name="display_name"
value="<?= e($user['display_name'] ?? $user['username']) ?>"
style="width: 100%;" required>
</div>
<div style="margin-bottom: 1.5rem;">
<label for="email" style="display: block; margin-bottom: 0.5rem; font-weight: bold;">
Email
</label>
<input type="email" id="email" name="email"
value="<?= e($user['email'] ?? '') ?>"
style="width: 100%;">
</div>
<div style="margin-bottom: 1.5rem;">
<label for="bio" style="display: block; margin-bottom: 0.5rem; font-weight: bold;">
О себе (отображается на вашей публичной странице)
</label>
<textarea id="bio" name="bio"
placeholder="Расскажите о себе, своих интересах, стиле письма..."
rows="6"
style="width: 100%;"><?= e($user['bio'] ?? '') ?></textarea>
<small style="color: var(--muted-color);">
Поддерживается Markdown форматирование
</small>
</div>
<div class="profile-buttons">
<button type="submit" class="profile-button primary">
💾 Сохранить изменения
</button>
<a href="<?= SITE_URL ?>/dashboard" class="profile-button secondary">
↩️ Назад
</a>
</div>
</form>
</article>
<article>
<h2>Аватарка</h2>
<div style="text-align: center; margin-bottom: 1.5rem;">
<?php if (!empty($user['avatar'])): ?>
<img src="<?= AVATARS_URL . e($user['avatar']) ?>"
alt="Аватарка"
style="max-width: 200px; height: auto; border-radius: 50%; border: 3px solid var(--primary);"
onerror="this.style.display='none'">
<?php else: ?>
<div style="width: 200px; height: 200px; border-radius: 50%; background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 4rem; margin: 0 auto;">
<?= mb_substr(e($user['display_name'] ?? $user['username']), 0, 1) ?>
</div>
<?php endif; ?>
<?php if ($message): ?>
<div class="alert <?= strpos($message, 'Ошибка') !== false ? 'alert-danger' : 'alert-success' ?>">
<?= e($message) ?>
</div>
<form method="post" enctype="multipart/form-data">
<input type="hidden" name="csrf_token" value="<?= generate_csrf_token() ?>">
<div style="margin-bottom: 1rem;">
<label for="avatar" style="display: block; margin-bottom: 0.5rem; font-weight: bold;">
Загрузить новую аватарку
</label>
<input type="file" id="avatar" name="avatar"
accept="image/jpeg, image/png, image/gif, image/webp"
style="height: 2.6rem;">
<small style="color: var(--muted-color);">
Разрешены: JPG, PNG, GIF, WebP. Максимальный размер: 2MB.
Рекомендуемый размер: 200×200 пикселей.
</small>
<?php if (!empty($avatar_error)): ?>
<div style="color: #d32f2f; margin-top: 0.5rem;">
❌ <?= e($avatar_error) ?>
<?php endif; ?>
<div class="row">
<div class="col-lg-8">
<div class="card mb-4">
<div class="card-header">
<h5 class="card-title mb-0">Основная информация</h5>
</div>
<div class="card-body">
<form method="post" enctype="multipart/form-data">
<input type="hidden" name="csrf_token" value="<?= generate_csrf_token() ?>">
<div class="mb-3">
<label for="username" class="form-label">Имя пользователя (нельзя изменить)</label>
<input type="text" class="form-control" id="username" value="<?= e($user['username']) ?>" disabled>
</div>
<div class="mb-3">
<label for="display_name" class="form-label">Отображаемое имя *</label>
<input type="text" class="form-control" id="display_name" name="display_name"
value="<?= e($user['display_name'] ?? $user['username']) ?>" required>
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" name="email"
value="<?= e($user['email'] ?? '') ?>">
</div>
<div class="mb-4">
<label for="bio" class="form-label">О себе</label>
<textarea class="form-control" id="bio" name="bio"
placeholder="Расскажите о себе, своих интересах, стиле письма..."
rows="6"><?= e($user['bio'] ?? '') ?></textarea>
<div class="form-text">
Отображается на вашей публичной странице. Поддерживается Markdown форматирование.
</div>
</div>
<button type="submit" class="btn btn-primary">
<i class="bi bi-check-circle"></i> Сохранить изменения
</button>
</form>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card mb-4">
<div class="card-header">
<h5 class="card-title mb-0">Аватарка</h5>
</div>
<div class="card-body text-center">
<?php if (!empty($user['avatar'])): ?>
<img src="<?= AVATARS_URL . e($user['avatar']) ?>"
alt="Аватарка"
class="rounded-circle mb-3 border border-3 border-primary"
style="width: 150px; height: 150px; object-fit: cover;"
onerror="this.style.display='none'">
<?php else: ?>
<div class="rounded-circle bg-primary bg-gradient d-flex align-items-center justify-content-center mx-auto mb-3"
style="width: 150px; height: 150px;">
<span class="text-white fw-bold fs-2">
<?= mb_substr(e($user['display_name'] ?? $user['username']), 0, 1) ?>
</span>
</div>
<?php endif; ?>
<form method="post" enctype="multipart/form-data">
<input type="hidden" name="csrf_token" value="<?= generate_csrf_token() ?>">
<div class="mb-3">
<label for="avatar" class="form-label">Загрузить новую аватарку</label>
<input type="file" class="form-control" id="avatar" name="avatar"
accept="image/jpeg, image/png, image/gif, image/webp">
<div class="form-text">
Разрешены: JPG, PNG, GIF, WebP. Максимальный размер: 2MB.
</div>
<?php if (!empty($avatar_error)): ?>
<div class="alert alert-danger mt-2">
<i class="bi bi-exclamation-triangle"></i> <?= e($avatar_error) ?>
</div>
<?php endif; ?>
</div>
<div class="d-grid gap-2">
<button type="submit" class="btn btn-primary">
<i class="bi bi-upload"></i> Загрузить аватарку
</button>
<?php if (!empty($user['avatar'])): ?>
<button type="submit" name="delete_avatar" value="1" class="btn btn-outline-danger">
<i class="bi bi-trash"></i> Удалить аватарку
</button>
<?php endif; ?>
</div>
</form>
</div>
</div>
<div class="card">
<div class="card-header">
<h5 class="card-title mb-0">Информация об аккаунте</h5>
</div>
<div class="card-body">
<div class="mb-3">
<a href="<?= SITE_URL ?>/author/<?= $_SESSION['user_id'] ?>" target="_blank" class="btn btn-outline-primary w-100">
<i class="bi bi-eye"></i> Посмотреть публичную страницу
</a>
</div>
<?php endif; ?>
<p><strong>Дата регистрации:</strong><br>
<small class="text-muted"><?= date('d.m.Y H:i', strtotime($user['created_at'])) ?></small></p>
<?php if ($user['last_login']): ?>
<p><strong>Последний вход:</strong><br>
<small class="text-muted"><?= date('d.m.Y H:i', strtotime($user['last_login'])) ?></small></p>
<?php endif; ?>
</div>
</div>
<div style="display: flex; gap: 10px;">
<button type="submit" class="contrast" style="flex: 1;">
📤 Загрузить аватарку
</button>
<?php if (!empty($user['avatar'])): ?>
<button type="submit" name="delete_avatar" value="1" class="secondary" style="flex: 1; background: #ff4444; border-color: #ff4444; color: white;">
🗑️ Удалить аватарку
</button>
<?php endif; ?>
</div>
</form>
<?php if (!empty($user['avatar'])): ?>
<div style="margin-top: 1rem; padding: 1rem; background: var(--card-background-color); border-radius: 5px;">
<p style="margin: 0; font-size: 0.9em; color: var(--muted-color);">
<strong>Примечание:</strong> Аватарка отображается на вашей публичной странице автора
</p>
</div>
<?php endif; ?>
</article>
</div>
</div>
</div>
<article>
<h3>Информация об аккаунте</h3>
<p><a href="<?= SITE_URL ?>/author/<?= $_SESSION['user_id'] ?>" target="_blank" class="adaptive-button secondary">
👁️ Посмотреть мою публичную страницу
</a></p>
<p><strong>Дата регистрации:</strong> <?= date('d.m.Y H:i', strtotime($user['created_at'])) ?></p>
<?php if ($user['last_login']): ?>
<p><strong>Последний вход:</strong> <?= date('d.m.Y H:i', strtotime($user['last_login'])) ?></p>
<?php endif; ?>
</article>
<?php include 'views/layouts/footer.php'; ?>
views/user/view_public.php
+116 -132
View File
@@ -3,153 +3,137 @@
include 'views/layouts/header.php';
?>
<div class="container" style="width:100%; margin-left: 0em; margin-right: 0em auto;">
<article>
<header style="text-align: center; margin-bottom: 2rem; border-bottom: 2px solid var(--muted-border-color); padding-bottom: 1rem;">
<!-- Аватарка автора -->
<div style="margin-bottom: 1rem;">
<?php if (!empty($user['avatar'])): ?>
<img src="<?= AVATARS_URL . e($user['avatar']) ?>"
alt="<?= e($user['display_name'] ?: $user['username']) ?>"
style="width: 150px; height: 150px; border-radius: 50%; border: 3px solid var(--primary); object-fit: cover;"
onerror="this.style.display='none'">
<?php else: ?>
<div style="width: 150px; height: 150px; border-radius: 50%; background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 3rem; margin: 0 auto;">
<?= mb_substr(e($user['display_name'] ?: $user['username']), 0, 1) ?>
</div>
<?php endif; ?>
</div>
<h1 style="margin-bottom: 0.5rem;"><?= e($user['display_name'] ?: $user['username']) ?></h1>
<!-- Биография автора -->
<?php if (!empty($user['bio'])): ?>
<div style="background: var(--card-background-color); padding: 1.5rem; border-radius: 8px; margin: 1rem 0; text-align: left;">
<?= e($user['bio']) ?>
</div>
<?php endif; ?>
<!-- Статистика автора -->
<div style="display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; font-size: 0.9em; color: var(--muted-color);">
<div style="text-align: center;">
<div style="font-size: 1.5em; font-weight: bold; color: var(--primary);"><?= $total_books ?></div>
<div>Книг</div>
</div>
<div style="text-align: center;">
<div style="font-size: 1.5em; font-weight: bold; color: var(--success);"><?= $total_chapters ?></div>
<div>Глав</div>
</div>
<div style="text-align: center;">
<div style="font-size: 1.5em; font-weight: bold; color: var(--warning);"><?= $total_words ?></div>
<div>Слов</div>
</div>
</div>
</header>
<h2 style="text-align: center; margin-bottom: 2rem;">Публикации автора</h2>
<?php if (empty($books)): ?>
<div style="text-align: center; padding: 3rem; background: var(--card-background-color); border-radius: 5px;">
<h3>У этого автора пока нет опубликованных книг</h3>
<p>Следите за обновлениями, скоро здесь появятся новые произведения!</p>
</div>
<?php else: ?>
<div class="author-books">
<?php foreach ($books as $book): ?>
<article style="display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 2rem; padding: 1.5rem; background: var(--card-background-color); border-radius: 8px;">
<?php if ($book['cover_image']): ?>
<div style="flex-shrink: 0;">
<img src="<?= COVERS_URL . e($book['cover_image']) ?>"
alt="<?= e($book['title']) ?>"
style="max-width: 120px; height: auto; border-radius: 4px; border: 1px solid var(--border-color);"
<div class="container py-4">
<div class="row justify-content-center">
<div class="col-lg-10">
<article class="card border-0 shadow-sm">
<div class="card-body p-4">
<header class="text-center mb-5">
<!-- Аватарка автора -->
<div class="mb-4">
<?php if (!empty($user['avatar'])): ?>
<img src="<?= AVATARS_URL . e($user['avatar']) ?>"
alt="<?= e($user['display_name'] ?: $user['username']) ?>"
class="rounded-circle border border-4 border-primary"
style="width: 150px; height: 150px; object-fit: cover;"
onerror="this.style.display='none'">
</div>
<?php else: ?>
<div style="flex-shrink: 0;">
<div class="cover-placeholder" style="width: 120px; height: 160px; background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); border-radius: 4px; display: flex; align-items: center; justify-content: center; color: white; font-size: 2rem;">
📚
<?php else: ?>
<div class="rounded-circle bg-primary bg-gradient d-flex align-items-center justify-content-center mx-auto"
style="width: 150px; height: 150px;">
<span class="text-white fw-bold display-6">
<?= mb_substr(e($user['display_name'] ?: $user['username']), 0, 1) ?>
</span>
</div>
<?php endif; ?>
</div>
<h1 class="display-5 mb-2"><?= e($user['display_name'] ?: $user['username']) ?></h1>
<!-- Биография автора -->
<?php if (!empty($user['bio'])): ?>
<div class="bg-light p-4 rounded mb-4">
<?= e($user['bio']) ?>
</div>
<?php endif; ?>
<div style="flex: 1;">
<h3 style="margin-top: 0;"><?= e($book['title']) ?></h3>
<?php if ($book['genre']): ?>
<p style="color: var(--muted-color); margin: 0.5rem 0;"><em><?= e($book['genre']) ?></em></p>
<?php endif; ?>
<?php if ($book['description']): ?>
<p style="margin-bottom: 1rem;"><?= nl2br(e($book['description'])) ?></p>
<?php endif; ?>
<?php
$book_stats = $bookModel->getBookStats($book['id'], true);
$chapter_count = $book_stats['chapter_count'] ?? 0;
$word_count = $book_stats['total_words'] ?? 0;
?>
<div style="display: flex; gap: 10px; flex-wrap: wrap; align-items: center;">
<a href="<?= SITE_URL ?>/book/<?= e($book['share_token']) ?>" class="adaptive-button">
Читать книгу
</a>
<small style="color: var(--muted-color);">
Глав: <?= $chapter_count ?> | Слов: <?= $word_count ?>
</small>
<!-- Статистика автора -->
<div class="d-flex justify-content-center gap-4 flex-wrap">
<div class="text-center">
<div class="h3 text-primary mb-0"><?= $total_books ?></div>
<small class="text-muted">Книг</small>
</div>
<div class="text-center">
<div class="h3 text-success mb-0"><?= $total_chapters ?></div>
<small class="text-muted">Глав</small>
</div>
<div class="text-center">
<div class="h3 text-warning mb-0"><?= $total_words ?></div>
<small class="text-muted">Слов</small>
</div>
</div>
</article>
<?php endforeach; ?>
</div>
<?php endif; ?>
</header>
<footer style="margin-top: 3rem; padding-top: 1rem; border-top: 2px solid var(--muted-border-color); text-align: center;">
<p style="color: var(--muted-color);">
Страница автора создана в <?= e(APP_NAME) ?> •
<?= date('Y') ?>
</p>
</footer>
</article>
<h2 class="h3 text-center mb-4">Публикации автора</h2>
<?php if (empty($books)): ?>
<div class="text-center py-5">
<i class="bi bi-journal-bookmark fs-1 text-muted"></i>
<h3 class="h4 text-muted mt-3">У этого автора пока нет опубликованных книг</h3>
<p class="text-muted">Следите за обновлениями, скоро здесь появятся новые произведения!</p>
</div>
<?php else: ?>
<div class="row g-4">
<?php foreach ($books as $book): ?>
<div class="col-md-6">
<div class="card h-100">
<div class="card-body">
<div class="d-flex align-items-start mb-3">
<?php if ($book['cover_image']): ?>
<img src="<?= COVERS_URL . e($book['cover_image']) ?>"
alt="<?= e($book['title']) ?>"
class="rounded me-3"
style="width: 60px; height: 80px; object-fit: cover;"
onerror="this.style.display='none'">
<?php else: ?>
<div class="bg-primary bg-gradient rounded d-flex align-items-center justify-content-center me-3"
style="width: 60px; height: 80px;">
<i class="bi bi-book text-white"></i>
</div>
<?php endif; ?>
<div class="flex-grow-1">
<h5 class="card-title"><?= e($book['title']) ?></h5>
<?php if ($book['genre']): ?>
<p class="text-muted small mb-1"><em><?= e($book['genre']) ?></em></p>
<?php endif; ?>
</div>
</div>
<?php if ($book['description']): ?>
<p class="card-text text-muted small mb-3">
<?= nl2br(e($book['description'])) ?>
</p>
<?php endif; ?>
<?php
$book_stats = $book_model->getBookStats($book['id'], true);
$chapter_count = $book_stats['chapter_count'] ?? 0;
$word_count = $book_stats['total_words'] ?? 0;
?>
<div class="d-flex justify-content-between align-items-center">
<a href="<?= SITE_URL ?>/book/<?= e($book['share_token']) ?>" class="btn btn-primary btn-sm">
<i class="bi bi-book"></i> Читать книгу
</a>
<small class="text-muted">
Глав: <?= $chapter_count ?> | Слов: <?= $word_count ?>
</small>
</div>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
<footer class="text-center mt-5 pt-4 border-top">
<p class="text-muted">
Страница автора создана в <?= e(APP_NAME) ?> • <?= date('Y') ?>
</p>
</footer>
</div>
</article>
</div>
</div>
</div>
<style>
.author-books article {
.card {
transition: transform 0.2s ease, box-shadow 0.2s ease;
border: 1px solid var(--border-color);
}
.author-books article:hover {
.card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.cover-placeholder {
width: 120px;
height: 160px;
background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2rem;
}
@media (max-width: 768px) {
.author-books article {
flex-direction: column;
text-align: center;
}
.author-books .book-cover {
align-self: center;
}
header .author-stats {
flex-direction: column;
gap: 1rem;
}
box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}
</style>