ajout de la page de lecture des chapitres
This commit is contained in:
parent
5c573181c6
commit
4d27f4579a
@ -389,6 +389,80 @@ body {
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
/* Styles spécifiques aux chapitres */
|
||||
.chapter-content {
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.8;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Styles pour le contenu Quill */
|
||||
.chapter-content strong {
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.chapter-content em {
|
||||
font-style: italic;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.chapter-content u {
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
|
||||
.chapter-content a {
|
||||
color: var(--accent-primary);
|
||||
text-decoration: none;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.chapter-content a:hover {
|
||||
color: var(--accent-secondary);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.chapter-content p {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
.chapter-content img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
margin: 1.5em 0;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.chapter-navigation {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: var(--spacing-xl);
|
||||
padding-top: var(--spacing-lg);
|
||||
border-top: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.chapter-nav {
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
border-radius: var(--radius-sm);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.chapter-nav:hover {
|
||||
background-color: var(--bg-secondary);
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.prev-chapter {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.next-chapter {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.back-to-home a:hover {
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
@ -448,6 +522,17 @@ body {
|
||||
.novel-cover {
|
||||
height: 320px;
|
||||
}
|
||||
|
||||
.chapter-navigation {
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-md);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.chapter-nav {
|
||||
display: block;
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
|
||||
178
chapitre.php
Normal file
178
chapitre.php
Normal file
@ -0,0 +1,178 @@
|
||||
<?php
|
||||
require_once 'includes/config.php';
|
||||
require_once 'includes/stories.php';
|
||||
|
||||
// Récupération des paramètres
|
||||
$storyId = $_GET['story'] ?? '';
|
||||
$chapterId = $_GET['chapter'] ?? '';
|
||||
|
||||
if (!$storyId || !$chapterId) {
|
||||
header('Location: index.php');
|
||||
exit;
|
||||
}
|
||||
|
||||
// Chargement du roman
|
||||
$story = Stories::get($storyId);
|
||||
if (!$story) {
|
||||
header('Location: index.php');
|
||||
exit;
|
||||
}
|
||||
|
||||
// Recherche du chapitre
|
||||
$currentChapter = null;
|
||||
$currentIndex = -1;
|
||||
foreach ($story['chapters'] as $index => $chapter) {
|
||||
if ($chapter['id'] === $chapterId) {
|
||||
$currentChapter = $chapter;
|
||||
$currentIndex = $index;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (!$currentChapter) {
|
||||
header('Location: roman.php?id=' . urlencode($storyId));
|
||||
exit;
|
||||
}
|
||||
|
||||
// Fonction pour convertir le contenu Delta en HTML
|
||||
function deltaToHtml($content) {
|
||||
if (empty($content)) return '';
|
||||
|
||||
// Si le contenu est déjà en HTML (ancien format)
|
||||
if (is_string($content) && !isJson($content)) {
|
||||
return $content;
|
||||
}
|
||||
|
||||
// Convertir la chaîne JSON en tableau si nécessaire
|
||||
if (is_string($content)) {
|
||||
$delta = json_decode($content, true);
|
||||
} else {
|
||||
$delta = $content;
|
||||
}
|
||||
|
||||
if (!isset($delta['ops'])) return '';
|
||||
|
||||
$html = '';
|
||||
foreach ($delta['ops'] as $op) {
|
||||
if (is_string($op['insert'])) {
|
||||
$text = htmlspecialchars($op['insert']);
|
||||
|
||||
// Gérer les styles de texte
|
||||
if (isset($op['attributes'])) {
|
||||
if (!empty($op['attributes']['bold'])) {
|
||||
$text = "<strong>{$text}</strong>";
|
||||
}
|
||||
if (!empty($op['attributes']['italic'])) {
|
||||
$text = "<em>{$text}</em>";
|
||||
}
|
||||
if (!empty($op['attributes']['underline'])) {
|
||||
$text = "<u>{$text}</u>";
|
||||
}
|
||||
// Ajouter d'autres styles si nécessaire
|
||||
}
|
||||
|
||||
// Convertir les retours à la ligne en paragraphes
|
||||
if ($text === "\n") {
|
||||
$html .= "<br>";
|
||||
} else {
|
||||
$html .= $text;
|
||||
}
|
||||
}
|
||||
// Gérer les images
|
||||
elseif (is_array($op['insert']) && isset($op['insert']['image'])) {
|
||||
$imageUrl = htmlspecialchars($op['insert']['image']);
|
||||
// Retirer le "../" du début de l'URL si présent
|
||||
$imageUrl = preg_replace('/^\.\.\//', '', $imageUrl);
|
||||
$html .= "<img src=\"{$imageUrl}\" alt=\"Image du chapitre\">";
|
||||
}
|
||||
}
|
||||
|
||||
// Envelopper le contenu dans des balises p si nécessaire
|
||||
if (!empty($html)) {
|
||||
$paragraphs = explode("\n\n", $html);
|
||||
$html = '';
|
||||
foreach ($paragraphs as $p) {
|
||||
if (trim($p) !== '') {
|
||||
$html .= "<p>{$p}</p>";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return $html;
|
||||
}
|
||||
|
||||
function isJson($string) {
|
||||
json_decode($string);
|
||||
return json_last_error() === JSON_ERROR_NONE;
|
||||
}
|
||||
|
||||
// Récupération des chapitres précédent et suivant
|
||||
$prevChapter = $currentIndex > 0 ? $story['chapters'][$currentIndex - 1] : null;
|
||||
$nextChapter = $currentIndex < count($story['chapters']) - 1 ? $story['chapters'][$currentIndex + 1] : null;
|
||||
|
||||
$config = Config::load();
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title><?= htmlspecialchars($currentChapter['title']) ?> - <?= htmlspecialchars($story['title']) ?> - <?= htmlspecialchars($config['site']['name']) ?></title>
|
||||
|
||||
<?php if (file_exists(__DIR__ . '/assets/images/site/favicon.png')): ?>
|
||||
<link rel="icon" type="image/png" href="assets/images/site/favicon.png">
|
||||
<?php endif; ?>
|
||||
|
||||
<link rel="stylesheet" href="assets/css/public.css">
|
||||
|
||||
<meta name="description" content="<?= htmlspecialchars($story['title']) ?> - <?= htmlspecialchars($currentChapter['title']) ?>">
|
||||
</head>
|
||||
<body>
|
||||
<!-- En-tête simple -->
|
||||
<header class="novel-header" style="height: 180px;">
|
||||
<h1><?= htmlspecialchars($currentChapter['title']) ?></h1>
|
||||
</header>
|
||||
|
||||
<!-- Contenu principal -->
|
||||
<div class="novel-content">
|
||||
<div class="novel-description chapter-content">
|
||||
<?= deltaToHtml($currentChapter['content']) ?>
|
||||
|
||||
<!-- Navigation entre chapitres -->
|
||||
<div class="chapter-navigation">
|
||||
<?php if ($prevChapter): ?>
|
||||
<a href="?story=<?= urlencode($storyId) ?>&chapter=<?= urlencode($prevChapter['id']) ?>"
|
||||
class="chapter-nav prev-chapter">
|
||||
← <?= htmlspecialchars($prevChapter['title']) ?>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($nextChapter): ?>
|
||||
<a href="?story=<?= urlencode($storyId) ?>&chapter=<?= urlencode($nextChapter['id']) ?>"
|
||||
class="chapter-nav next-chapter">
|
||||
<?= htmlspecialchars($nextChapter['title']) ?> →
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="chapters-menu">
|
||||
<h2>Chapitres</h2>
|
||||
<ul class="chapters-list">
|
||||
<?php foreach ($story['chapters'] as $chapter): ?>
|
||||
<li>
|
||||
<a href="?story=<?= urlencode($storyId) ?>&chapter=<?= urlencode($chapter['id']) ?>"
|
||||
class="<?= $chapter['id'] === $chapterId ? 'current-chapter' : '' ?>">
|
||||
<?= htmlspecialchars($chapter['title']) ?>
|
||||
</a>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<div class="back-to-home">
|
||||
<a href="index.php">← Retour à l'accueil</a> | <a href="roman.php?id=<?= urlencode($storyId) ?>">← Retour au roman</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user