Esenjin_Asakha/Lectures
Esenjin_Asakha/Lectures
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 9 Wiki Activity

ajout d'une page "à propos"

Browse Source
This commit is contained in:
Esenjin 2025-02-16 22:22:37 +01:00
parent 5727c54b1c
commit dced7ae0db
7 changed files with 429 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
about.php Normal file
View File

@ -0,0 +1,74 @@
<?php
require_once 'includes/config.php';
require_once 'includes/DeltaConverter.php';
$config = Config::load();
$about = $config['about'] ?? [
'title' => 'À propos',
'content' => '',
'background' => ''
];
// Fonction pour convertir le contenu Delta en HTML
function deltaToHtml($content) {
return DeltaConverter::toHtml($content);
}
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= htmlspecialchars($about['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">
<link rel="stylesheet" href="assets/css/content.css">
</head>
<body>
<!-- En-tête avec image de fond -->
<header class="novel-header">
<?php if (!empty($about['background'])): ?>
<div class="novel-header-background" style="background-image: url('<?= htmlspecialchars($about['background']) ?>');"></div>
<?php endif; ?>
<h1><?= htmlspecialchars($about['title']) ?></h1>
</header>
<!-- Contenu principal -->
<div class="novel-content single-column">
<div class="novel-description">
<?= deltaToHtml($about['content']) ?>
</div>
</div>
<div class="back-to-home">
<a href="index.php">&larr; Retour à l'accueil</a>
</div>
<button class="scroll-top" aria-label="Retour en haut de page">↑</button>
<script>
document.addEventListener('DOMContentLoaded', function() {
const scrollTopBtn = document.querySelector('.scroll-top');
window.addEventListener('scroll', function() {
if (window.pageYOffset > 300) {
scrollTopBtn.classList.add('visible');
} else {
scrollTopBtn.classList.remove('visible');
}
});
scrollTopBtn.addEventListener('click', function() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
});
</script>
</body>
</html>

265
admin/options.php
View File

@ -17,10 +17,14 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
try { try {
$config = Config::load(); $config = Config::load();
// Mise à jour des valeurs textuelles // Mise à jour des valeurs textuelles du site
$config['site']['name'] = trim($_POST['site_name'] ?? ''); $config['site']['name'] = trim($_POST['site_name'] ?? '');
$config['site']['description'] = trim($_POST['site_description'] ?? ''); $config['site']['description'] = trim($_POST['site_description'] ?? '');
// Mise à jour des valeurs de la page À propos
$config['about']['title'] = trim($_POST['about_title'] ?? 'À propos');
$config['about']['content'] = $_POST['about_content'] ?? '';
// Validation // Validation
if (empty($config['site']['name'])) { if (empty($config['site']['name'])) {
throw new Exception('Le nom du site est requis'); throw new Exception('Le nom du site est requis');
@ -31,6 +35,12 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$uploadHandler = new SiteUploadHandler(); $uploadHandler = new SiteUploadHandler();
$config['site']['logo'] = $uploadHandler->handleLogoUpload($_FILES['site_logo']); $config['site']['logo'] = $uploadHandler->handleLogoUpload($_FILES['site_logo']);
} }
// Gestion de l'upload du background de la page À propos
if (isset($_FILES['about_background']) && $_FILES['about_background']['error'] !== UPLOAD_ERR_NO_FILE) {
$uploadHandler = new SiteUploadHandler();
$config['about']['background'] = $uploadHandler->handleBackgroundUpload($_FILES['about_background']);
}
// Sauvegarde // Sauvegarde
Config::save($config); Config::save($config);
@ -54,13 +64,12 @@ $config = Config::load();
<link rel="icon" type="image/png" href="../assets/images/site/favicon.png"> <link rel="icon" type="image/png" href="../assets/images/site/favicon.png">
<?php endif; ?> <?php endif; ?>
<link rel="stylesheet" href="../assets/css/main.css"> <link rel="stylesheet" href="../assets/css/main.css">
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
</head> </head>
<body> <body>
<nav class="admin-nav"> <nav class="admin-nav">
<div class="nav-brand"> <div class="nav-brand">
<?php <?php if (!empty($config['site']['logo'])): ?>
$config = Config::load();
if (!empty($config['site']['logo'])): ?>
<img src="<?= htmlspecialchars('../' . $config['site']['logo']) ?>" <img src="<?= htmlspecialchars('../' . $config['site']['logo']) ?>"
alt="<?= htmlspecialchars($config['site']['name']) ?>"> alt="<?= htmlspecialchars($config['site']['name']) ?>">
<?php endif; ?> <?php endif; ?>
@ -82,68 +91,201 @@ $config = Config::load();
<div class="error-message"><?= htmlspecialchars($error) ?></div> <div class="error-message"><?= htmlspecialchars($error) ?></div>
<?php endif; ?> <?php endif; ?>
<form method="POST" class="options-form" enctype="multipart/form-data"> <div class="options-container">
<div class="form-group"> <!-- Section Options du Site -->
<label for="site_name">Nom du site</label> <section class="options-section">
<input type="text" <h2>Options générales</h2>
id="site_name" <form method="POST" class="options-form" enctype="multipart/form-data">
name="site_name" <div class="form-group">
value="<?= htmlspecialchars($config['site']['name']) ?>" <label for="site_name">Nom du site</label>
required> <input type="text"
</div> id="site_name"
name="site_name"
<div class="form-group"> value="<?= htmlspecialchars($config['site']['name']) ?>"
<label for="site_description">Description du site</label> required>
<textarea id="site_description"
name="site_description"
rows="4"><?= htmlspecialchars($config['site']['description']) ?></textarea>
</div>
<div class="form-group">
<label for="site_logo">Logo du site</label>
<?php if (!empty($config['site']['logo'])): ?>
<div class="current-logo">
<img src="<?= htmlspecialchars('../' . $config['site']['logo']) ?>"
alt="Logo actuel"
style="max-height: 100px; margin: 10px 0;">
</div> </div>
<?php endif; ?>
<input type="file" <div class="form-group">
id="site_logo" <label for="site_description">Description du site</label>
name="site_logo" <textarea id="site_description"
accept="image/jpeg,image/png,image/gif,image/svg+xml"> name="site_description"
<small>Formats acceptés : JPG, PNG, GIF, SVG. Taille maximum : 2MB</small> rows="4"><?= htmlspecialchars($config['site']['description']) ?></textarea>
</div> </div>
<button type="submit" class="button">Enregistrer les modifications</button> <div class="form-group">
</form> <label for="site_logo">Logo du site</label>
<?php if (!empty($config['site']['logo'])): ?>
<div class="current-logo">
<img src="<?= htmlspecialchars('../' . $config['site']['logo']) ?>"
alt="Logo actuel"
style="max-height: 100px; margin: 10px 0;">
</div>
<?php endif; ?>
<input type="file"
id="site_logo"
name="site_logo"
accept="image/jpeg,image/png,image/gif,image/svg+xml">
<small>Formats acceptés : JPG, PNG, GIF, SVG. Taille maximum : 2MB</small>
</div>
<!-- Section À Propos -->
<h2>Page "À propos"</h2>
<div class="form-group">
<label for="about_title">Titre de la page</label>
<input type="text"
id="about_title"
name="about_title"
value="<?= htmlspecialchars($config['about']['title'] ?? 'À propos') ?>">
</div>
<div class="form-group">
<label for="about_background">Image de fond</label>
<?php if (!empty($config['about']['background'])): ?>
<div class="current-background">
<img src="<?= htmlspecialchars('../' . $config['about']['background']) ?>"
alt="Image de fond actuelle"
style="max-height: 100px; margin: 10px 0;">
</div>
<?php endif; ?>
<input type="file"
id="about_background"
name="about_background"
accept="image/*">
<small>Format recommandé : 1920x250px, JPG/PNG</small>
</div>
<div class="form-group">
<label for="about_content">Contenu de la page</label>
<input type="hidden" id="about_content" name="about_content">
<div id="aboutEditor"></div>
</div>
<button type="submit" class="button">Enregistrer les modifications</button>
</form>
</section>
</div>
</main> </main>
<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
<script> <script>
// Prévisualisation du logo
document.getElementById('site_logo').addEventListener('change', function(e) {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
let currentLogo = document.querySelector('.current-logo');
if (!currentLogo) {
currentLogo = document.createElement('div');
currentLogo.className = 'current-logo';
e.target.parentElement.insertBefore(currentLogo, e.target.nextSibling);
}
currentLogo.innerHTML = `
<img src="${e.target.result}"
alt="Aperçu du logo"
style="max-height: 100px; margin: 10px 0;">
`;
};
reader.readAsDataURL(file);
}
});
// Détection des changements non sauvegardés
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
// Prévisualisation du logo
document.getElementById('site_logo').addEventListener('change', function(e) {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
let currentLogo = document.querySelector('.current-logo');
if (!currentLogo) {
currentLogo = document.createElement('div');
currentLogo.className = 'current-logo';
e.target.parentElement.insertBefore(currentLogo, e.target.nextSibling);
}
currentLogo.innerHTML = `
<img src="${e.target.result}"
alt="Aperçu du logo"
style="max-height: 100px; margin: 10px 0;">
`;
};
reader.readAsDataURL(file);
}
});
// Prévisualisation du background
document.getElementById('about_background').addEventListener('change', function(e) {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
let currentBackground = document.querySelector('.current-background');
if (!currentBackground) {
currentBackground = document.createElement('div');
currentBackground.className = 'current-background';
e.target.parentElement.insertBefore(currentBackground, e.target.nextSibling);
}
currentBackground.innerHTML = `
<img src="${e.target.result}"
alt="Aperçu du fond"
style="max-height: 100px; margin: 10px 0;">
`;
};
reader.readAsDataURL(file);
}
});
// Configuration de l'éditeur Quill
const aboutEditor = new Quill('#aboutEditor', {
theme: 'snow',
modules: {
toolbar: {
container: [
[{ 'header': [1, 2, 3, false] }],
['bold', 'italic', 'underline', 'strike'],
[{ 'color': [] }, { 'background': [] }],
[{ 'font': [] }],
[{ 'align': [] }],
['blockquote', 'code-block'],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'script': 'sub'}, { 'script': 'super' }],
[{ 'indent': '-1'}, { 'indent': '+1' }],
[{ 'direction': 'rtl' }],
['link', 'image', 'video'],
['clean']
],
handlers: {
image: function() {
const input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/*');
input.click();
input.onchange = async () => {
const file = input.files[0];
if (file) {
const formData = new FormData();
formData.append('image', file);
try {
const response = await fetch('api/upload-image.php', {
method: 'POST',
body: formData
});
if (!response.ok) throw new Error('Upload failed');
const result = await response.json();
if (result.success) {
const range = aboutEditor.getSelection(true);
aboutEditor.insertEmbed(range.index, 'image', result.url);
aboutEditor.setSelection(range.index + 1);
} else {
showNotification(result.error || 'Erreur lors de l\'upload', 'error');
}
} catch (error) {
console.error('Error:', error);
showNotification('Erreur lors de l\'upload de l\'image', 'error');
}
}
};
}
}
}
},
placeholder: 'Commencez à écrire le contenu de la page À propos...'
});
// Initialiser le contenu si existant
<?php if (!empty($config['about']['content'])): ?>
aboutEditor.root.innerHTML = <?= json_encode($config['about']['content']) ?>;
<?php endif; ?>
// Mise à jour du champ caché avant la soumission
document.querySelector('form').addEventListener('submit', function() {
document.querySelector('#about_content').value = aboutEditor.root.innerHTML;
});
// Détection des changements non sauvegardés
const form = document.querySelector('form'); const form = document.querySelector('form');
const initialState = new FormData(form).toString(); const initialState = new FormData(form).toString();
@ -155,6 +297,7 @@ $config = Config::load();
}); });
}); });
</script> </script>
<link rel="stylesheet" href="../assets/css/dialog.css"> <link rel="stylesheet" href="../assets/css/dialog.css">
<script src="../assets/js/dialog.js"></script> <script src="../assets/js/dialog.js"></script>
</body> </body>

20
assets/css/public.css
View File

@ -101,6 +101,26 @@ body {
line-height: 1.6; line-height: 1.6;
} }
.header-actions {
position: absolute;
top: var(--spacing-md);
right: var(--spacing-md);
}
.about-button {
display: inline-block;
padding: var(--spacing-sm) var(--spacing-md);
background-color: var(--accent-primary);
color: var(--text-tertiary);
text-decoration: none;
border-radius: var(--radius-sm);
transition: var(--transition);
}
.about-button:hover {
background-color: var(--accent-secondary);
}
/* Conteneur principal */ /* Conteneur principal */
.main-content { .main-content {
max-width: var(--content-width); max-width: var(--content-width);

5
config.json
View File

@ -3,6 +3,11 @@
"name": "Nom du Site", "name": "Nom du Site",
"description": "Description du site" "description": "Description du site"
}, },
"about": {
"title": "À propos",
"content": "",
"background": "assets/images/site/about-bg.jpg"
},
"users": [ "users": [
{ {
"id": "admin", "id": "admin",

128
includes/site-upload.php
View File

@ -1,8 +1,8 @@
<?php <?php
class SiteUploadHandler { class SiteUploadHandler {
private $uploadDir; private $uploadDir;
private $allowedTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/svg+xml']; private $allowedTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
private $maxFileSize = 2097152; // 2MB private $maxFileSize = 5242880; // 5MB
public function __construct() { public function __construct() {
$this->uploadDir = __DIR__ . '/../assets/images/site/'; $this->uploadDir = __DIR__ . '/../assets/images/site/';
@ -18,11 +18,11 @@ class SiteUploadHandler {
$finfo = new finfo(FILEINFO_MIME_TYPE); $finfo = new finfo(FILEINFO_MIME_TYPE);
$mimeType = $finfo->file($file['tmp_name']); $mimeType = $finfo->file($file['tmp_name']);
if (!in_array($mimeType, $this->allowedTypes)) { if (!in_array($mimeType, $this->allowedTypes)) {
throw new Exception('Type de fichier non autorisé. Types acceptés : JPG, PNG, GIF, SVG'); throw new Exception('Type de fichier non autorisé. Types acceptés : JPG, PNG, GIF, WEBP');
} }
if ($file['size'] > $this->maxFileSize) { if ($file['size'] > $this->maxFileSize) {
throw new Exception('Fichier trop volumineux. Taille maximum : 2MB'); throw new Exception('Fichier trop volumineux. Taille maximum : 5MB');
} }
$extension = $this->getExtensionFromMimeType($mimeType); $extension = $this->getExtensionFromMimeType($mimeType);
@ -46,6 +46,103 @@ class SiteUploadHandler {
throw $e; throw $e;
} }
} }
public function handleBackgroundUpload($file) {
try {
if ($file['error'] !== UPLOAD_ERR_OK) {
throw new Exception($this->getUploadErrorMessage($file['error']));
}
$finfo = new finfo(FILEINFO_MIME_TYPE);
$mimeType = $finfo->file($file['tmp_name']);
if (!in_array($mimeType, $this->allowedTypes)) {
throw new Exception('Type de fichier non autorisé. Types acceptés : JPG, PNG, GIF, WEBP');
}
if ($file['size'] > $this->maxFileSize) {
throw new Exception('Fichier trop volumineux. Taille maximum : 5MB');
}
// Vérifier les dimensions de l'image
list($width, $height) = getimagesize($file['tmp_name']);
$minWidth = 1200;
$minHeight = 600;
if ($width < $minWidth || $height < $minHeight) {
throw new Exception("L'image doit faire au moins {$minWidth}x{$minHeight} pixels");
}
$extension = $this->getExtensionFromMimeType($mimeType);
$filename = 'about-bg.' . $extension;
$targetPath = $this->uploadDir . $filename;
// Supprimer l'ancien background s'il existe
$this->removeOldBackground();
// Redimensionner l'image si nécessaire
$maxWidth = 1920;
$maxHeight = 1080;
if ($width > $maxWidth || $height > $maxHeight) {
$this->resizeImage(
$file['tmp_name'],
$targetPath,
$mimeType,
$maxWidth,
$maxHeight
);
} else {
if (!move_uploaded_file($file['tmp_name'], $targetPath)) {
throw new Exception('Erreur lors du déplacement du fichier uploadé');
}
}
return 'assets/images/site/' . $filename;
} catch (Exception $e) {
throw $e;
}
}
private function removeOldBackground() {
foreach (glob($this->uploadDir . 'about-bg.*') as $file) {
unlink($file);
}
}
private function resizeImage($sourcePath, $targetPath, $mimeType, $maxWidth, $maxHeight) {
list($width, $height) = getimagesize($sourcePath);
// Calculer les nouvelles dimensions en conservant le ratio
$ratio = min($maxWidth / $width, $maxHeight / $height);
$newWidth = round($width * $ratio);
$newHeight = round($height * $ratio);
// Créer la nouvelle image
$sourceImage = $this->createImageFromFile($sourcePath, $mimeType);
$newImage = imagecreatetruecolor($newWidth, $newHeight);
// Préserver la transparence pour PNG
if ($mimeType === 'image/png') {
imagealphablending($newImage, false);
imagesavealpha($newImage, true);
}
// Redimensionner
imagecopyresampled(
$newImage, $sourceImage,
0, 0, 0, 0,
$newWidth, $newHeight,
$width, $height
);
// Sauvegarder l'image redimensionnée
$this->saveImage($newImage, $targetPath, $mimeType);
// Libérer la mémoire
imagedestroy($sourceImage);
imagedestroy($newImage);
}
private function ensureUploadDirectory() { private function ensureUploadDirectory() {
if (!file_exists($this->uploadDir)) { if (!file_exists($this->uploadDir)) {
@ -113,8 +210,25 @@ class SiteUploadHandler {
return imagecreatefrompng($file); return imagecreatefrompng($file);
case 'image/gif': case 'image/gif':
return imagecreatefromgif($file); return imagecreatefromgif($file);
case 'image/webp':
return imagecreatefromwebp($file);
default: default:
throw new Exception('Type d\'image non supporté pour le favicon'); throw new Exception('Type d\'image non supporté');
}
}
private function saveImage($image, $path, $mimeType) {
switch ($mimeType) {
case 'image/jpeg':
return imagejpeg($image, $path, 85);
case 'image/png':
return imagepng($image, $path, 9);
case 'image/gif':
return imagegif($image, $path);
case 'image/webp':
return imagewebp($image, $path, 85);
default:
throw new Exception('Type d\'image non supporté');
} }
} }
@ -123,9 +237,9 @@ class SiteUploadHandler {
'image/jpeg' => 'jpg', 'image/jpeg' => 'jpg',
'image/png' => 'png', 'image/png' => 'png',
'image/gif' => 'gif', 'image/gif' => 'gif',
'image/svg+xml' => 'svg' 'image/webp' => 'webp'
]; ];
return $map[$mimeType] ?? 'png'; return $map[$mimeType] ?? 'jpg';
} }
private function getUploadErrorMessage($error) { private function getUploadErrorMessage($error) {

4
index.php
View File

@ -61,6 +61,10 @@ function formatDate($date) {
<h1><?= htmlspecialchars($config['site']['name']) ?></h1> <h1><?= htmlspecialchars($config['site']['name']) ?></h1>
<p><?= nl2br(htmlspecialchars($config['site']['description'])) ?></p> <p><?= nl2br(htmlspecialchars($config['site']['description'])) ?></p>
</div> </div>
<div class="header-actions">
<a href="about.php" class="about-button">À propos</a>
</div>
</header> </header>
</div> </div>

2
version.txt
View File

@ -1 +1 @@
1.1.0 1.1.1