revamp
This commit is contained in:
+269
-267
@@ -1,328 +1,330 @@
|
||||
/* === RESET SIMPLE === */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
/* global.css */
|
||||
|
||||
:root {
|
||||
--primary: #3b82f6;
|
||||
--primary-dark: #1d4ed8;
|
||||
--text-main: #0f172a;
|
||||
--text-muted: #64748b;
|
||||
--bg-page: #f8fafc;
|
||||
--bg-panel: #ffffff;
|
||||
--border-light: #e2e8f0;
|
||||
--danger: #ef4444;
|
||||
--radius: 12px;
|
||||
--shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
}
|
||||
|
||||
/* === BASE HTML / BODY === */
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family:
|
||||
system-ui,
|
||||
"Inter",
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
"Segoe UI",
|
||||
Roboto,
|
||||
sans-serif;
|
||||
background: #f5f5f5;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
/* === LAYOUT GLOBAL (structure page + footer collé en bas) === */
|
||||
|
||||
.pf-page {
|
||||
min-height: 100vh; /* au minimum la hauteur de la fenêtre */
|
||||
background-color: var(--bg-page);
|
||||
color: var(--text-main);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.pf-main {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
.pf-footer {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* === LAYOUT CONTAINER / HEADER / NAV / FOOTER === */
|
||||
|
||||
.pf-container {
|
||||
max-width: 1440px;
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
/* === HEADER === */
|
||||
.pf-header {
|
||||
background: #243b53;
|
||||
color: #fff;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.pf-header-content {
|
||||
background: white;
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
padding: 0 20px;
|
||||
height: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
.pf-header-actions {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.pf-logo {
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
font-size: 1.25rem;
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
|
||||
/* Navigation Desktop */
|
||||
.pf-nav {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.pf-nav-link {
|
||||
color: #d9e2ec;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.pf-nav-link:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: #f1f5f9;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.pf-nav-link--active {
|
||||
background: #102a43;
|
||||
color: #f0f4f8;
|
||||
background: #eff6ff;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.pf-main {
|
||||
padding: 24px 10px 48px;
|
||||
/* Actions Header (User) */
|
||||
.pf-header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.pf-section {
|
||||
margin-top: 32px;
|
||||
.pf-user-badge {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.pf-section--panel {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 10px 10px 10px 10px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
|
||||
.pf-logout-btn {
|
||||
color: var(--danger);
|
||||
font-weight: 600;
|
||||
font-size: 0.85rem;
|
||||
text-decoration: none;
|
||||
padding: 6px 12px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.pf-logout-btn:hover {
|
||||
background: #fef2f2;
|
||||
border-color: #fecaca;
|
||||
}
|
||||
|
||||
.pf-footer {
|
||||
border-top: 1px solid #d9e2ec;
|
||||
padding: 8px 0;
|
||||
font-size: 12px;
|
||||
color: #627d98;
|
||||
background: #f0f4f8;
|
||||
/* Menu Burger (Mobile) */
|
||||
.pf-burger-btn {
|
||||
display: none;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
/* Sur certaines pages (comme la home), on pourra override le header via une classe de body */
|
||||
|
||||
/* === FLEX & CARDS GÉNÉRIQUES === */
|
||||
|
||||
.pf-flex {
|
||||
.pf-mobile-menu {
|
||||
display: none; /* caché par défaut */
|
||||
position: fixed;
|
||||
top: 64px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: white;
|
||||
padding: 20px;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
z-index: 99;
|
||||
}
|
||||
.pf-mobile-menu.is-open {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.pf-flex--wrap {
|
||||
flex-wrap: wrap;
|
||||
/* === MAIN CONTENT === */
|
||||
.pf-main {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 32px 20px;
|
||||
}
|
||||
|
||||
.pf-gap-lg {
|
||||
.pf-container {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* === TYPOGRAPHY === */
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
font-weight: 800;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--text-main);
|
||||
line-height: 1.2;
|
||||
}
|
||||
p {
|
||||
color: var(--text-muted);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
/* === CARDS (Modules) === */
|
||||
.pf-modules-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 24px;
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.pf-card {
|
||||
background: #f8fafc;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #d9e2ec;
|
||||
padding: 12px 14px;
|
||||
}
|
||||
|
||||
.pf-card--small {
|
||||
min-width: 240px;
|
||||
max-width: 260px;
|
||||
}
|
||||
|
||||
/* Large card (utilisée pour le tableau des vacances) */
|
||||
.pf-card.pf-card--wide {
|
||||
min-width: 400px;
|
||||
flex: 1 1 400px;
|
||||
}
|
||||
|
||||
.pf-card-title {
|
||||
margin: 0 0 8px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.pf-card-body {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* === TABLES GÉNÉRIQUES === */
|
||||
|
||||
.pf-table-wrapper {
|
||||
max-height: 600px;
|
||||
overflow: auto;
|
||||
border-radius: 12px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #d9e2ec;
|
||||
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
|
||||
.pf-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.pf-table th,
|
||||
.pf-table td {
|
||||
border: 1px solid #d9e2ec;
|
||||
padding: 4px 6px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.pf-table thead th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #f0f4f8;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.pf-table--compact th,
|
||||
.pf-table--compact td {
|
||||
padding: 3px 4px;
|
||||
}
|
||||
|
||||
/* === FORMULAIRES / TEXTE GÉNÉRIQUE === */
|
||||
|
||||
label {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
width: 150px;
|
||||
font-size: 11px;
|
||||
padding: 2px 3px;
|
||||
}
|
||||
|
||||
/* Récapitulatif global (utilisé dans le calendrier mais style simple) */
|
||||
#globalSummary p {
|
||||
margin: 4px 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#globalSummary strong {
|
||||
font-weight: 600;
|
||||
color: #243b53;
|
||||
}
|
||||
|
||||
.pf-greeting {
|
||||
color: #f0f4f8;
|
||||
font-weight: 500;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
line-height: 1.2;
|
||||
}
|
||||
/* === Mobile Comfort v2: header + textes plus grands et mieux alignés === */
|
||||
@media (pointer: coarse), (max-width: 780px) {
|
||||
/* Container */
|
||||
.pf-container {
|
||||
max-width: none;
|
||||
margin-left: 0;
|
||||
padding: 0 14px;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.pf-header {
|
||||
padding: 16px 0;
|
||||
}
|
||||
.pf-header-content {
|
||||
padding: 0 14px;
|
||||
.pf-module-card {
|
||||
background: white;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius);
|
||||
padding: 24px;
|
||||
text-decoration: none;
|
||||
transition:
|
||||
transform 0.2s,
|
||||
box-shadow 0.2s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.pf-module-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: var(--shadow);
|
||||
border-color: #cbd5e1;
|
||||
}
|
||||
|
||||
.pf-card-icon {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.pf-card-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-main);
|
||||
margin: 0;
|
||||
}
|
||||
.pf-card-desc {
|
||||
font-size: 0.95rem;
|
||||
color: var(--text-muted);
|
||||
flex: 1;
|
||||
}
|
||||
.pf-card-cta {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: var(--primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.pf-logo {
|
||||
font-size: 22px;
|
||||
}
|
||||
.pf-header-actions {
|
||||
gap: 10px;
|
||||
}
|
||||
gap: 4px;
|
||||
}
|
||||
.pf-card-cta::after {
|
||||
content: "→";
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.pf-module-card:hover .pf-card-cta::after {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.pf-greeting {
|
||||
color: #f0f4f8;
|
||||
font-weight: 500;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
line-height: 1.2;
|
||||
font-size: 18px;
|
||||
}
|
||||
.pf-nav-link--secondary {
|
||||
font-size: 18px;
|
||||
padding: 12px 14px;
|
||||
min-height: 48px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
/* Si tu utilises un avatar/icône dedans */
|
||||
.pf-greeting img,
|
||||
.pf-greeting .avatar {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.pf-card--disabled {
|
||||
opacity: 0.6;
|
||||
pointer-events: none;
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
.pf-nav {
|
||||
gap: 10px;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
.pf-nav::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
/* === FORMS (Login) === */
|
||||
.pf-login-container {
|
||||
max-width: 400px;
|
||||
margin: 60px auto;
|
||||
background: white;
|
||||
padding: 40px;
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow);
|
||||
border: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
.pf-nav-link {
|
||||
font-size: 18px;
|
||||
padding: 12px 14px;
|
||||
min-height: 48px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* Main + sections */
|
||||
.pf-main {
|
||||
padding: 20px 14px 34px;
|
||||
}
|
||||
.pf-section {
|
||||
margin-top: 18px;
|
||||
}
|
||||
.pf-section--panel {
|
||||
padding: 14px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
.pf-table {
|
||||
font-size: 14px;
|
||||
}
|
||||
.pf-table th,
|
||||
.pf-table td {
|
||||
padding: 8px 8px;
|
||||
}
|
||||
.pf-table--compact th,
|
||||
.pf-table--compact td {
|
||||
padding: 7px 7px;
|
||||
}
|
||||
|
||||
/* Formulaires */
|
||||
label {
|
||||
font-size: 15px;
|
||||
}
|
||||
input[type="number"] {
|
||||
.pf-form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.pf-form-group label {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.pf-form-group input {
|
||||
width: 100%;
|
||||
max-width: 240px;
|
||||
font-size: 17px; /* >=16px évite le zoom iOS */
|
||||
padding: 12px 12px;
|
||||
border-radius: 10px;
|
||||
padding: 12px;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.pf-form-group input:focus {
|
||||
outline: 2px solid var(--primary);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.pf-btn {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.pf-btn:hover {
|
||||
background: var(--primary-dark);
|
||||
}
|
||||
|
||||
.pf-error {
|
||||
background: #fef2f2;
|
||||
color: #b91c1c;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
font-size: 0.9rem;
|
||||
border: 1px solid #fecaca;
|
||||
}
|
||||
|
||||
/* === FOOTER === */
|
||||
.pf-footer {
|
||||
border-top: 1px solid var(--border-light);
|
||||
background: white;
|
||||
padding: 24px;
|
||||
text-align: center;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted);
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
/* === MOBILE RESPONSIVE === */
|
||||
@media (max-width: 768px) {
|
||||
.pf-header {
|
||||
padding: 0 16px;
|
||||
}
|
||||
.pf-nav {
|
||||
display: none;
|
||||
} /* Caché sur mobile, activé via burger */
|
||||
.pf-header-actions {
|
||||
display: none;
|
||||
} /* Caché sur mobile, dans le menu */
|
||||
|
||||
.pf-burger-btn {
|
||||
display: block;
|
||||
} /* Affiché sur mobile */
|
||||
|
||||
/* Menu Mobile Ouvert */
|
||||
.pf-mobile-nav-link {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
color: var(--text-main);
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
}
|
||||
.pf-mobile-logout {
|
||||
color: var(--danger);
|
||||
}
|
||||
}
|
||||
|
||||
+47
-37
@@ -1,57 +1,67 @@
|
||||
<?php
|
||||
// S'assurer que la session est démarrée si on veut afficher l'utilisateur
|
||||
if (session_status() === PHP_SESSION_NONE) {
|
||||
session_start();
|
||||
}
|
||||
|
||||
if (!isset($pageTitle)) {
|
||||
$pageTitle = "PachaFamily";
|
||||
}
|
||||
if (!isset($activePage)) {
|
||||
$activePage = "";
|
||||
}
|
||||
if (session_status() === PHP_SESSION_NONE) session_start();
|
||||
$pageTitle = $pageTitle ?? "PachaFamily";
|
||||
$activePage = $activePage ?? "";
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr" class="<?= htmlspecialchars($bodyClass ?? '') ?>">
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title><?= htmlspecialchars($pageTitle, ENT_QUOTES, 'UTF-8'); ?></title>
|
||||
|
||||
<!-- CSS globale -->
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title><?= htmlspecialchars($pageTitle) ?></title>
|
||||
<link rel="stylesheet" href="/global.css">
|
||||
|
||||
<!-- CSS spécifique à la page (optionnel) -->
|
||||
<?php if (!empty($pageCss)): ?>
|
||||
<link rel="stylesheet" href="<?= htmlspecialchars($pageCss, ENT_QUOTES, 'UTF-8') ?>">
|
||||
<link rel="stylesheet" href="<?= htmlspecialchars($pageCss) ?>">
|
||||
<?php endif; ?>
|
||||
</head>
|
||||
<body class="<?= htmlspecialchars($bodyClass ?? '') ?>">
|
||||
<div class="pf-page"><!-- WRAPPER OUVERT ICI -->
|
||||
|
||||
<header class="pf-header">
|
||||
<div class="pf-container pf-header-content">
|
||||
<div class="pf-logo">PachaFamily</div>
|
||||
<a href="/index.php" class="pf-logo">PachaFamily</a>
|
||||
|
||||
<nav class="pf-nav">
|
||||
<a href="/index.php"
|
||||
class="pf-nav-link <?= $activePage === 'home' ? 'pf-nav-link--active' : ''; ?>">Accueil</a>
|
||||
<a href="/family-calendar.php"
|
||||
class="pf-nav-link <?= $activePage === 'family-calendar' ? 'pf-nav-link--active' : ''; ?>">Family calendar</a>
|
||||
<a href="/holidays.php"
|
||||
class="pf-nav-link <?= $activePage === 'holidays' ? 'pf-nav-link--active' : ''; ?>">Holidays</a>
|
||||
<a href="/gift-list.php"
|
||||
class="pf-nav-link <?= $activePage === 'gift-list' ? 'pf-nav-link--active' : ''; ?>">Gift list</a>
|
||||
<a href="/index.php" class="pf-nav-link <?= $activePage === 'home' ? 'pf-nav-link--active' : '' ?>">Accueil</a>
|
||||
<a href="/family-calendar.php" class="pf-nav-link <?= $activePage === 'family-calendar' ? 'pf-nav-link--active' : '' ?>">Calendrier</a>
|
||||
<a href="/holidays.php" class="pf-nav-link <?= $activePage === 'holidays' ? 'pf-nav-link--active' : '' ?>">Vacances</a>
|
||||
<a href="/gift-list.php" class="pf-nav-link <?= $activePage === 'gift-list' ? 'pf-nav-link--active' : '' ?>">Cadeaux</a>
|
||||
</nav>
|
||||
|
||||
<div class="pf-header-actions">
|
||||
<?php if (isset($_SESSION['user'])): ?>
|
||||
<span class="pf-greeting">
|
||||
Bonjour <?= htmlspecialchars($_SESSION['user']['display_name'] ?? $_SESSION['user']['username'], ENT_QUOTES, 'UTF-8'); ?>
|
||||
</span>
|
||||
<a href="/logout.php" class="pf-nav-link pf-nav-link--secondary">Se déconnecter</a>
|
||||
<div class="pf-user-badge">
|
||||
<?= htmlspecialchars($_SESSION['user']['display_name'] ?? $_SESSION['user']['username']) ?>
|
||||
</div>
|
||||
<a href="/logout.php" class="pf-logout-btn">Déconnexion</a>
|
||||
<?php else: ?>
|
||||
<a href="/login.php" class="pf-nav-link pf-nav-link--secondary">Se connecter</a>
|
||||
<a href="/login.php" class="pf-nav-link">Connexion</a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="pf-burger-btn" aria-label="Menu">☰</button>
|
||||
</header>
|
||||
|
||||
<main class="pf-container pf-main">
|
||||
<div class="pf-mobile-menu">
|
||||
<a href="/index.php" class="pf-mobile-nav-link">Accueil</a>
|
||||
<a href="/family-calendar.php" class="pf-mobile-nav-link">Calendrier</a>
|
||||
<a href="/holidays.php" class="pf-mobile-nav-link">Vacances</a>
|
||||
<a href="/gift-list.php" class="pf-mobile-nav-link">Cadeaux</a>
|
||||
<?php if (isset($_SESSION['user'])): ?>
|
||||
<a href="/logout.php" class="pf-mobile-nav-link pf-mobile-logout">Se déconnecter</a>
|
||||
<?php else: ?>
|
||||
<a href="/login.php" class="pf-mobile-nav-link">Se connecter</a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<main class="pf-main">
|
||||
|
||||
<script>
|
||||
// Script simple pour le menu mobile
|
||||
const burgerBtn = document.querySelector('.pf-burger-btn');
|
||||
const mobileMenu = document.querySelector('.pf-mobile-menu');
|
||||
|
||||
if(burgerBtn) {
|
||||
burgerBtn.addEventListener('click', () => {
|
||||
const isOpen = mobileMenu.classList.toggle('is-open');
|
||||
burgerBtn.textContent = isOpen ? '✕' : '☰';
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@@ -6,64 +6,62 @@ require_login('/login.php');
|
||||
// Configuration de la page
|
||||
$pageTitle = "PachaFamily - Accueil";
|
||||
$activePage = "home";
|
||||
$bodyClass = "pf-home";
|
||||
$bodyClass = "pf-home"; // Important pour l'image de fond définie dans home.css
|
||||
$pageCss = "/modules/home/home.css";
|
||||
|
||||
require __DIR__ . '/header.php';
|
||||
?>
|
||||
|
||||
<div class="pf-container">
|
||||
|
||||
<div class="pf-hero">
|
||||
<h1>Bienvenue sur PachaFamily</h1>
|
||||
<p>Centre de contrôle de l'organisation familiale.</p>
|
||||
|
||||
<?php if (isset($_SESSION['user'])): ?>
|
||||
<div class="pf-user-info">
|
||||
<div class="pf-user-info" style="margin-top: 12px; font-weight: 500;">
|
||||
Connecté en tant que
|
||||
<strong><?= htmlspecialchars($_SESSION['user']['display_name'] ?? $_SESSION['user']['username']) ?></strong>
|
||||
– <a href="/logout.php">Se déconnecter</a>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<section class="pf-section">
|
||||
<h2>Modules</h2>
|
||||
<h2 style="color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.6);">Modules</h2>
|
||||
|
||||
<div class="pf-flex pf-flex--wrap pf-gap-lg pf-modules-cards">
|
||||
<!-- Card : Family calendar -->
|
||||
<a href="/family-calendar.php" class="pf-card pf-card--module">
|
||||
<div class="pf-modules-grid">
|
||||
|
||||
<a href="/family-calendar.php" class="pf-module-card">
|
||||
<div class="pf-card-icon">📅</div>
|
||||
<h3 class="pf-card-title">Family calendar</h3>
|
||||
<div class="pf-card-body">
|
||||
Gérez les congés, vacances et la garde sur un calendrier partagé
|
||||
pour toute la famille.
|
||||
<div class="pf-card-desc">
|
||||
Gérez les congés, vacances et la garde sur un calendrier partagé pour toute la famille.
|
||||
</div>
|
||||
<span class="pf-card-cta">Accéder au module</span>
|
||||
</a>
|
||||
|
||||
<!-- Module : holidays -->
|
||||
<a href="/holidays.php" class="pf-card pf-card--module">
|
||||
<div class="pf-card-icon">🎁</div>
|
||||
<a href="/holidays.php" class="pf-module-card">
|
||||
<div class="pf-card-icon">🏖️</div>
|
||||
<h3 class="pf-card-title">Holidays</h3>
|
||||
<div class="pf-card-body">
|
||||
Plannification des vacances.
|
||||
<div class="pf-card-desc">
|
||||
Planification des vacances.
|
||||
</div>
|
||||
<span class="pf-card-cta">Accéder au module</span>
|
||||
</a>
|
||||
|
||||
<!-- Module : gift list -->
|
||||
<a href="/gift-list.php" class="pf-card pf-card--module">
|
||||
<a href="/gift-list.php" class="pf-module-card">
|
||||
<div class="pf-card-icon">🎁</div>
|
||||
<h3 class="pf-card-title">Gift list</h3>
|
||||
<div class="pf-card-body">
|
||||
Planifica els regals de cada nen, per al Tió, el Nadal i els Reis.
|
||||
<div class="pf-card-desc">
|
||||
Planifiez les cadeaux pour chaque enfant, pour Noël, les anniversaires et les Rois.
|
||||
</div>
|
||||
<span class="pf-card-cta">Accedir al mòdul</span>
|
||||
<span class="pf-card-cta">Accéder au module</span>
|
||||
</a>
|
||||
|
||||
<!-- Exemple de futur module -->
|
||||
<div class="pf-card pf-card--module pf-card--disabled">
|
||||
<div class="pf-module-card pf-card--disabled">
|
||||
<div class="pf-card-icon">💰</div>
|
||||
<h3 class="pf-card-title">Budget familial</h3>
|
||||
<div class="pf-card-body">
|
||||
<div class="pf-card-desc">
|
||||
Bientôt disponible : suivi des dépenses, catégories et budget mensuel.
|
||||
</div>
|
||||
<span class="pf-card-cta">À venir</span>
|
||||
@@ -75,3 +73,4 @@ require __DIR__ . '/header.php';
|
||||
|
||||
<?php
|
||||
require __DIR__ . '/footer.php';
|
||||
?>
|
||||
@@ -1,12 +1,10 @@
|
||||
<?php
|
||||
session_start();
|
||||
require __DIR__ . '/includes/db.php';
|
||||
|
||||
require __DIR__ . '/includes/db.php'; // Doit définir $pdo (PDO connecté à ta DB)
|
||||
|
||||
$pageTitle = "PachaFamily - Login";
|
||||
$pageTitle = "Connexion";
|
||||
$activePage = "login";
|
||||
|
||||
// Si l'utilisateur est déjà connecté, on le renvoie à l'accueil
|
||||
if (isset($_SESSION['user'])) {
|
||||
header('Location: /index.php');
|
||||
exit;
|
||||
@@ -18,28 +16,19 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
||||
$username = trim($_POST['username'] ?? '');
|
||||
$password = $_POST['password'] ?? '';
|
||||
|
||||
if ($username === '' || $password === '') {
|
||||
$error = "Merci de renseigner identifiant et mot de passe.";
|
||||
if (!$username || !$password) {
|
||||
$error = "Champs obligatoires.";
|
||||
} else {
|
||||
// On récupère l'utilisateur dans la table pf_users
|
||||
$stmt = $pdo->prepare("
|
||||
SELECT id, username, password_hash, display_name
|
||||
FROM pf_users
|
||||
WHERE username = :username
|
||||
");
|
||||
$stmt->execute([':username' => $username]);
|
||||
$stmt = $pdo->prepare("SELECT id, username, password_hash, display_name FROM pf_users WHERE username = ?");
|
||||
$stmt->execute([$username]);
|
||||
$user = $stmt->fetch(PDO::FETCH_ASSOC);
|
||||
|
||||
// Vérification du mot de passe
|
||||
if ($user && password_verify($password, $user['password_hash'])) {
|
||||
// Connexion OK : on stocke les infos utiles en session
|
||||
$_SESSION['user'] = [
|
||||
'id' => (int)$user['id'],
|
||||
'username' => $user['username'],
|
||||
'display_name' => $user['display_name'],
|
||||
];
|
||||
|
||||
// Redirection : soit la page demandée, soit l'accueil
|
||||
$redirectTo = $_GET['redirect'] ?? '/index.php';
|
||||
header('Location: ' . $redirectTo);
|
||||
exit;
|
||||
@@ -52,25 +41,26 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
||||
require __DIR__ . '/header.php';
|
||||
?>
|
||||
|
||||
<h1>Connexion</h1>
|
||||
<div class="pf-login-container">
|
||||
<h1 style="text-align:center; font-size:1.8rem;">Connexion</h1>
|
||||
|
||||
<?php if ($error): ?>
|
||||
<?php if ($error): ?>
|
||||
<div class="pf-error"><?= htmlspecialchars($error) ?></div>
|
||||
<?php endif; ?>
|
||||
<?php endif; ?>
|
||||
|
||||
<form method="post" action="/login.php<?= isset($_GET['redirect']) ? '?redirect=' . urlencode($_GET['redirect']) : '' ?>">
|
||||
<form method="post" action="/login.php<?= isset($_GET['redirect']) ? '?redirect=' . urlencode($_GET['redirect']) : '' ?>">
|
||||
<div class="pf-form-group">
|
||||
<label for="username">Identifiant</label>
|
||||
<input type="text" id="username" name="username" required autofocus>
|
||||
<input type="text" id="username" name="username" required autofocus placeholder="ex: pacha">
|
||||
</div>
|
||||
|
||||
<div class="pf-form-group">
|
||||
<label for="password">Mot de passe</label>
|
||||
<input type="password" id="password" name="password" required>
|
||||
<input type="password" id="password" name="password" required placeholder="••••••">
|
||||
</div>
|
||||
|
||||
<button type="submit">Se connecter</button>
|
||||
</form>
|
||||
<button type="submit" class="pf-btn">Se connecter</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
require __DIR__ . '/footer.php';
|
||||
<?php require __DIR__ . '/footer.php'; ?>
|
||||
+96
-118
@@ -1,161 +1,139 @@
|
||||
/* === HOME : fond et overlay === */
|
||||
/* modules/home/home.css */
|
||||
|
||||
/* Fond image uniquement pour la home */
|
||||
/* === 1. CONFIGURATION DU FOND & DU BODY === */
|
||||
body.pf-home {
|
||||
position: relative;
|
||||
/* Image de fond desktop */
|
||||
background-image: url("/modules/home/assets/img/background.jpg");
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
background-attachment: fixed; /* Effet parallax léger */
|
||||
background-repeat: no-repeat;
|
||||
|
||||
/* Texte global plutôt clair sur la home (sur l'image) */
|
||||
color: #f9fafb;
|
||||
/* Couleur de texte par défaut sur la home (Blanc) */
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* Header translucide par-dessus l'image sur la home */
|
||||
.pf-home .pf-header {
|
||||
background: rgba(36, 59, 83, 0.85);
|
||||
backdrop-filter: blur(4px); /* optionnel, si supporté */
|
||||
}
|
||||
|
||||
/* Voile sombre sur toute la page home */
|
||||
/* Voile sombre pour garantir la lisibilité du texte blanc */
|
||||
body.pf-home::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(15, 23, 42, 0.35);
|
||||
z-index: -1;
|
||||
background: rgba(15, 23, 42, 0.5); /* Bleu nuit semi-transparent */
|
||||
z-index: -1; /* Derrière le contenu */
|
||||
}
|
||||
|
||||
/* S'assurer que le contenu passe au-dessus du voile */
|
||||
body.pf-home > * {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
/* === 2. HEADER SPÉCIFIQUE (Translucide) === */
|
||||
body.pf-home .pf-header {
|
||||
background: rgba(36, 59, 83, 0.85); /* Ton ancien bleu sombre */
|
||||
backdrop-filter: blur(8px); /* Effet verre dépoli */
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Descendre légèrement le contenu sous le header sur la home */
|
||||
body.pf-home .pf-main {
|
||||
padding-top: 80px;
|
||||
/* Adaptation des couleurs des liens du header sur fond sombre */
|
||||
body.pf-home .pf-logo {
|
||||
color: #ffffff;
|
||||
}
|
||||
body.pf-home .pf-burger-btn {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* === HOME / MODULES CARDS === */
|
||||
|
||||
/* Container des cartes de modules */
|
||||
.pf-modules-cards {
|
||||
margin-top: 16px;
|
||||
body.pf-home .pf-nav-link {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
body.pf-home .pf-nav-link:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: #ffffff;
|
||||
}
|
||||
body.pf-home .pf-nav-link--active {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
color: #243b53; /* Texte foncé sur fond blanc */
|
||||
}
|
||||
|
||||
/* Card module : réutilise .pf-card mais plus "clicable" */
|
||||
.pf-card--module {
|
||||
min-width: 240px;
|
||||
max-width: 320px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
background: #ffffff;
|
||||
cursor: pointer;
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease,
|
||||
border-color 0.15s ease, background-color 0.15s ease;
|
||||
box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
|
||||
/* Badge utilisateur */
|
||||
body.pf-home .pf-user-badge {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
body.pf-home .pf-logout-btn {
|
||||
color: #fca5a5;
|
||||
} /* Rouge clair */
|
||||
body.pf-home .pf-logout-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-color: #fca5a5;
|
||||
}
|
||||
|
||||
.pf-card--module:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
|
||||
border-color: #bcccdc;
|
||||
background-color: #f8fafc;
|
||||
/* === 3. HERO SECTION (Message de Bienvenue) === */
|
||||
.pf-hero {
|
||||
margin-top: 40px;
|
||||
margin-bottom: 60px;
|
||||
text-align: right; /* Aligné à droite comme demandé */
|
||||
}
|
||||
|
||||
/* Désactivation / "à venir" */
|
||||
.pf-card--disabled {
|
||||
cursor: default;
|
||||
opacity: 0.7;
|
||||
.pf-hero h1 {
|
||||
color: #ffffff;
|
||||
font-size: 2.5rem;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); /* Ombre pour détacher le texte de l'image */
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.pf-card--disabled:hover {
|
||||
transform: none;
|
||||
box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
|
||||
border-color: #d9e2ec;
|
||||
background-color: #f8fafc;
|
||||
}
|
||||
|
||||
/* Icône dans la card */
|
||||
.pf-card-icon {
|
||||
font-size: 24px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
/* CTA (texte en bas de card) */
|
||||
.pf-card-cta {
|
||||
margin-top: 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #243b53;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.pf-card-cta::after {
|
||||
content: "→";
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* Assure que le CTA reste en bas quand le texte est plus long */
|
||||
.pf-card--module .pf-card-body {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Bloc user info */
|
||||
.pf-user-info {
|
||||
margin-top: 12px;
|
||||
font-size: 13px;
|
||||
color: #f9fafb; /* lisible sur le fond */
|
||||
}
|
||||
|
||||
.pf-user-info a {
|
||||
color: #ffb4b4;
|
||||
text-decoration: none;
|
||||
.pf-hero p {
|
||||
color: #e2e8f0; /* Gris très clair */
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.pf-user-info a:hover {
|
||||
text-decoration: underline;
|
||||
/* === 4. GRILLE DES MODULES === */
|
||||
|
||||
/* Titre de section "Modules" */
|
||||
body.pf-home .pf-modules-grid {
|
||||
/* On ajoute un titre visuel ou on espace simplement */
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
/* Dans les cards (fond clair) : texte foncé */
|
||||
body.pf-home .pf-card,
|
||||
body.pf-home .pf-section--panel {
|
||||
color: #222;
|
||||
/* Les cartes restent blanches, donc on force le texte foncé à l'intérieur */
|
||||
.pf-module-card {
|
||||
background: rgba(255, 255, 255, 0.95); /* Presque opaque */
|
||||
border: none;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
||||
color: var(--text-main); /* Retour à la couleur sombre globale */
|
||||
}
|
||||
|
||||
/* S’assurer que les titres / textes intro sont bien à gauche et lisibles */
|
||||
body.pf-home h1,
|
||||
body.pf-home .pf-container > p,
|
||||
body.pf-home .pf-user-info,
|
||||
body.pf-home .pf-section > h2 {
|
||||
text-align: left;
|
||||
color: #f9fafb;
|
||||
}
|
||||
/* === ALIGNEMENT À DROITE DU BLOC INTRO SUR LA HOME === */
|
||||
|
||||
/* On aligne à droite uniquement le bloc d'intro */
|
||||
body.pf-home .pf-container > h1,
|
||||
body.pf-home .pf-container > p,
|
||||
body.pf-home .pf-container > .pf-user-info {
|
||||
text-align: right;
|
||||
.pf-module-card:hover {
|
||||
background: #ffffff;
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* On garde le titre "Modules" à gauche, sauf si tu veux aussi le mettre à droite */
|
||||
body.pf-home .pf-section > h2 {
|
||||
text-align: left;
|
||||
/* On s'assure que les titres et textes DANS les cartes ne sont pas blancs */
|
||||
.pf-module-card h3.pf-card-title {
|
||||
color: var(--text-main);
|
||||
}
|
||||
.pf-module-card p.pf-card-desc {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Image de fond spécifique pour le mobile */
|
||||
/* === 5. MOBILE RESPONSIVE === */
|
||||
@media (max-width: 768px) {
|
||||
body.pf-home {
|
||||
/* Image spécifique mobile */
|
||||
background-image: url("/modules/home/assets/img/background_m.jpg");
|
||||
background-position: center center;
|
||||
background-attachment: scroll; /* Fixed bug souvent sur mobile, scroll est mieux */
|
||||
}
|
||||
|
||||
/* Sur mobile, on recentre le texte pour l'équilibre */
|
||||
.pf-hero {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.pf-hero h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
/* Ajustement header mobile */
|
||||
body.pf-home .pf-header {
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user