création de la page d'accueil coté public
This commit is contained in:
parent
78eeb6e140
commit
f6a9f031c0
309
assets/css/public.css
Normal file
309
assets/css/public.css
Normal file
@ -0,0 +1,309 @@
|
|||||||
|
/* Import Google Fonts */
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Parisienne&display=swap');
|
||||||
|
|
||||||
|
/* Variables globales */
|
||||||
|
:root {
|
||||||
|
/* Couleurs de fond */
|
||||||
|
--bg-primary: #2c2424;
|
||||||
|
--bg-secondary: #3e3232;
|
||||||
|
--bg-tertiary: #4a3f3f;
|
||||||
|
|
||||||
|
/* Textes */
|
||||||
|
--text-primary: #e6d8cc;
|
||||||
|
--text-secondary: #cfbfa3;
|
||||||
|
--text-tertiary: #2c2420;
|
||||||
|
|
||||||
|
/* Accents */
|
||||||
|
--accent-primary: #d2a679;
|
||||||
|
--accent-secondary: #e6b88a;
|
||||||
|
|
||||||
|
/* Utilitaires */
|
||||||
|
--border-color: #5a4b4b;
|
||||||
|
--success-color: #5a8c54;
|
||||||
|
--error-color: #8c4646;
|
||||||
|
|
||||||
|
/* Espacements */
|
||||||
|
--spacing-xs: 0.5rem;
|
||||||
|
--spacing-sm: 0.75rem;
|
||||||
|
--spacing-md: 1rem;
|
||||||
|
--spacing-lg: 1.5rem;
|
||||||
|
--spacing-xl: 2rem;
|
||||||
|
|
||||||
|
/* Layout */
|
||||||
|
--content-width: 1200px;
|
||||||
|
--card-width: 280px;
|
||||||
|
|
||||||
|
/* Effets */
|
||||||
|
--shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
|
||||||
|
--transition: all 0.3s ease;
|
||||||
|
--radius-sm: 4px;
|
||||||
|
--radius-md: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Reset et styles de base */
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
background-color: var(--bg-primary);
|
||||||
|
color: var(--text-primary);
|
||||||
|
line-height: 1.6;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header container */
|
||||||
|
.header-container {
|
||||||
|
width: 100%;
|
||||||
|
background: var(--bg-secondary);
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
padding: var(--spacing-lg) 0;
|
||||||
|
margin-bottom: var(--spacing-xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* En-tête du site */
|
||||||
|
.site-header {
|
||||||
|
max-width: var(--content-width);
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 var(--spacing-lg);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-xl);
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-header img {
|
||||||
|
height: 160px;
|
||||||
|
width: auto;
|
||||||
|
object-fit: contain;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-header-content {
|
||||||
|
flex: 0 1 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-header h1 {
|
||||||
|
font-family: 'Parisienne', cursive;
|
||||||
|
font-size: 3.5rem;
|
||||||
|
margin-bottom: var(--spacing-sm);
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-header p {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
max-width: 800px;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Conteneur principal */
|
||||||
|
.main-content {
|
||||||
|
max-width: var(--content-width);
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 var(--spacing-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Grille des romans */
|
||||||
|
.novels-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(var(--card-width), 1fr));
|
||||||
|
gap: var(--spacing-lg);
|
||||||
|
margin-top: var(--spacing-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Carte de roman */
|
||||||
|
.novel-card {
|
||||||
|
display: block;
|
||||||
|
text-decoration: none;
|
||||||
|
background: var(--bg-tertiary);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||||
|
position: relative;
|
||||||
|
will-change: transform;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.novel-card:hover {
|
||||||
|
transform: translateY(-5px) !important;
|
||||||
|
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.novel-card.new-release::before {
|
||||||
|
content: 'Nouveau !';
|
||||||
|
position: absolute;
|
||||||
|
top: 1rem;
|
||||||
|
right: 1rem;
|
||||||
|
background-color: var(--accent-primary);
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
border-radius: 20px;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.novel-cover {
|
||||||
|
width: 100%;
|
||||||
|
height: 380px;
|
||||||
|
object-fit: cover;
|
||||||
|
border-bottom: 3px solid var(--accent-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.novel-info {
|
||||||
|
padding: var(--spacing-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.novel-info h2 {
|
||||||
|
font-size: 1.4rem;
|
||||||
|
margin-bottom: var(--spacing-xs);
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.novel-info p {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
margin-bottom: var(--spacing-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.novel-link {
|
||||||
|
display: inline-block;
|
||||||
|
background-color: var(--accent-primary);
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 0.8rem 1.5rem;
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
transition: var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
.novel-link:hover {
|
||||||
|
background-color: var(--accent-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Étiquette de date */
|
||||||
|
.novel-date {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
margin-top: var(--spacing-xs);
|
||||||
|
margin-bottom: var(--spacing-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Scrollbar personnalisée */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: var(--bg-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: var(--accent-primary);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: var(--accent-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* États de focus */
|
||||||
|
:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
:focus-visible {
|
||||||
|
box-shadow: 0 0 0 2px var(--accent-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Animations */
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(10px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.novel-card {
|
||||||
|
animation: fadeIn 0.5s ease-out;
|
||||||
|
animation-fill-mode: backwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Animation décalée pour chaque carte */
|
||||||
|
.novel-card:nth-child(n) {
|
||||||
|
animation-delay: calc(0.1s * var(--i, 0));
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive */
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
:root {
|
||||||
|
--content-width: 95%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.site-header {
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: center;
|
||||||
|
padding: var(--spacing-lg) var(--spacing-sm);
|
||||||
|
gap: var(--spacing-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-header img {
|
||||||
|
height: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-header-content {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-header h1 {
|
||||||
|
font-size: 2.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-header p {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.novels-grid {
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
||||||
|
gap: var(--spacing-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.novel-cover {
|
||||||
|
height: 320px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.novels-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.novel-card {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.novel-cover {
|
||||||
|
height: 280px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.novel-info {
|
||||||
|
padding: var(--spacing-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-header h1 {
|
||||||
|
font-size: 2.4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
85
index.php
85
index.php
@ -4,6 +4,34 @@ require_once 'includes/stories.php';
|
|||||||
|
|
||||||
$config = Config::load();
|
$config = Config::load();
|
||||||
$stories = Stories::getAll();
|
$stories = Stories::getAll();
|
||||||
|
|
||||||
|
// Trier les romans par date de mise à jour (du plus récent au plus ancien)
|
||||||
|
usort($stories, function($a, $b) {
|
||||||
|
return strtotime($b['updated']) - strtotime($a['updated']);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Fonction pour vérifier si un roman est une nouvelle parution (moins d'une semaine)
|
||||||
|
function isNewRelease($story) {
|
||||||
|
$updateTime = strtotime($story['updated']);
|
||||||
|
$weekAgo = strtotime('-1 week');
|
||||||
|
return $updateTime > $weekAgo;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fonction pour formater la date en français
|
||||||
|
function formatDate($date) {
|
||||||
|
$timestamp = strtotime($date);
|
||||||
|
$months = [
|
||||||
|
'janvier', 'février', 'mars', 'avril', 'mai', 'juin',
|
||||||
|
'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre'
|
||||||
|
];
|
||||||
|
|
||||||
|
return sprintf(
|
||||||
|
"%d %s %d",
|
||||||
|
date('j', $timestamp),
|
||||||
|
$months[date('n', $timestamp) - 1],
|
||||||
|
date('Y', $timestamp)
|
||||||
|
);
|
||||||
|
}
|
||||||
?>
|
?>
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="fr">
|
<html lang="fr">
|
||||||
@ -11,30 +39,51 @@ $stories = Stories::getAll();
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title><?= htmlspecialchars($config['site']['name']) ?></title>
|
<title><?= htmlspecialchars($config['site']['name']) ?></title>
|
||||||
|
|
||||||
<?php if (file_exists(__DIR__ . '/assets/images/site/favicon.png')): ?>
|
<?php if (file_exists(__DIR__ . '/assets/images/site/favicon.png')): ?>
|
||||||
<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/style.css">
|
|
||||||
|
<link rel="stylesheet" href="assets/css/public.css">
|
||||||
|
|
||||||
|
<meta name="description" content="<?= htmlspecialchars($config['site']['description']) ?>">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<div class="header-container">
|
||||||
<?php if (!empty($config['site']['logo'])): ?>
|
<header class="site-header">
|
||||||
<img src="<?= htmlspecialchars($config['site']['logo']) ?>"
|
<?php if (!empty($config['site']['logo'])): ?>
|
||||||
alt="<?= htmlspecialchars($config['site']['name']) ?>">
|
<img src="<?= htmlspecialchars($config['site']['logo']) ?>"
|
||||||
<?php endif; ?>
|
alt="<?= htmlspecialchars($config['site']['name']) ?>"
|
||||||
<h1><?= htmlspecialchars($config['site']['name']) ?></h1>
|
class="site-logo">
|
||||||
<p><?= htmlspecialchars($config['site']['description']) ?></p>
|
<?php endif; ?>
|
||||||
</header>
|
|
||||||
|
<div class="site-header-content">
|
||||||
<main>
|
<h1><?= htmlspecialchars($config['site']['name']) ?></h1>
|
||||||
<div class="stories-grid">
|
<p><?= nl2br(htmlspecialchars($config['site']['description'])) ?></p>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<main class="main-content">
|
||||||
|
<div class="novels-grid">
|
||||||
<?php foreach ($stories as $story): ?>
|
<?php foreach ($stories as $story): ?>
|
||||||
<article class="story-card">
|
<a href="roman.php?id=<?= htmlspecialchars($story['id']) ?>" class="novel-card <?= isNewRelease($story) ? 'new-release' : '' ?>">
|
||||||
<img src="<?= htmlspecialchars($story['cover']) ?>" alt="">
|
<img src="<?= htmlspecialchars($story['cover']) ?>"
|
||||||
<h2><?= htmlspecialchars($story['title']) ?></h2>
|
alt="Couverture de <?= htmlspecialchars($story['title']) ?>"
|
||||||
<p><?= htmlspecialchars($story['description']) ?></p>
|
class="novel-cover"
|
||||||
<a href="story.php?id=<?= htmlspecialchars($story['id']) ?>">Lire</a>
|
loading="lazy">
|
||||||
</article>
|
|
||||||
|
<div class="novel-info">
|
||||||
|
<h2><?= htmlspecialchars($story['title']) ?></h2>
|
||||||
|
<p>
|
||||||
|
<?= count($story['chapters'] ?? []) ?>
|
||||||
|
chapitre<?= count($story['chapters'] ?? []) > 1 ? 's' : '' ?>
|
||||||
|
</p>
|
||||||
|
<div class="novel-date">
|
||||||
|
Mis à jour le <?= formatDate($story['updated']) ?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
<?php endforeach; ?>
|
<?php endforeach; ?>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user