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;
|
||||
}
|
||||
}
|
||||
75
index.php
75
index.php
@ -4,6 +4,34 @@ require_once 'includes/stories.php';
|
||||
|
||||
$config = Config::load();
|
||||
$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>
|
||||
<html lang="fr">
|
||||
@ -11,30 +39,51 @@ $stories = Stories::getAll();
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<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/style.css">
|
||||
|
||||
<link rel="stylesheet" href="assets/css/public.css">
|
||||
|
||||
<meta name="description" content="<?= htmlspecialchars($config['site']['description']) ?>">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="header-container">
|
||||
<header class="site-header">
|
||||
<?php if (!empty($config['site']['logo'])): ?>
|
||||
<img src="<?= htmlspecialchars($config['site']['logo']) ?>"
|
||||
alt="<?= htmlspecialchars($config['site']['name']) ?>">
|
||||
alt="<?= htmlspecialchars($config['site']['name']) ?>"
|
||||
class="site-logo">
|
||||
<?php endif; ?>
|
||||
<h1><?= htmlspecialchars($config['site']['name']) ?></h1>
|
||||
<p><?= htmlspecialchars($config['site']['description']) ?></p>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div class="stories-grid">
|
||||
<div class="site-header-content">
|
||||
<h1><?= htmlspecialchars($config['site']['name']) ?></h1>
|
||||
<p><?= nl2br(htmlspecialchars($config['site']['description'])) ?></p>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<main class="main-content">
|
||||
<div class="novels-grid">
|
||||
<?php foreach ($stories as $story): ?>
|
||||
<article class="story-card">
|
||||
<img src="<?= htmlspecialchars($story['cover']) ?>" alt="">
|
||||
<a href="roman.php?id=<?= htmlspecialchars($story['id']) ?>" class="novel-card <?= isNewRelease($story) ? 'new-release' : '' ?>">
|
||||
<img src="<?= htmlspecialchars($story['cover']) ?>"
|
||||
alt="Couverture de <?= htmlspecialchars($story['title']) ?>"
|
||||
class="novel-cover"
|
||||
loading="lazy">
|
||||
|
||||
<div class="novel-info">
|
||||
<h2><?= htmlspecialchars($story['title']) ?></h2>
|
||||
<p><?= htmlspecialchars($story['description']) ?></p>
|
||||
<a href="story.php?id=<?= htmlspecialchars($story['id']) ?>">Lire</a>
|
||||
</article>
|
||||
<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; ?>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user