From 4e1a0b24f448b5af3da08a6cae1a7cdac1827761 Mon Sep 17 00:00:00 2001 From: dick Date: Wed, 10 Jun 2026 16:24:37 -0400 Subject: [PATCH] :art: Remise au propre --- my-library/src/App.jsx | 21 +- my-library/src/components/Layout.jsx | 11 + my-library/src/index.css | 13 - my-library/src/pages/Books.jsx | 3 + my-library/src/pages/Home.jsx | 82 ------ my-library/src/pages/NotFound.jsx | 3 + my-library/src/pages/Orders.jsx | 3 + my-library/src/pages/Profile.jsx | 3 + my-library/src/styles/global.css | 52 ---- my-library/src/styles/home.css | 372 --------------------------- my-library/src/styles/navbar.css | 98 ------- 11 files changed, 37 insertions(+), 624 deletions(-) create mode 100644 my-library/src/components/Layout.jsx create mode 100644 my-library/src/pages/Books.jsx create mode 100644 my-library/src/pages/NotFound.jsx create mode 100644 my-library/src/pages/Orders.jsx create mode 100644 my-library/src/pages/Profile.jsx diff --git a/my-library/src/App.jsx b/my-library/src/App.jsx index 93d3a43..ec7c2b3 100644 --- a/my-library/src/App.jsx +++ b/my-library/src/App.jsx @@ -1,14 +1,21 @@ import { Routes, Route } from 'react-router-dom'; -import Navbar from './components/Navbar'; +import Layout from './components/Layout'; import Home from './pages/Home'; +import Books from './pages/Books'; +import Orders from './pages/Orders'; +import Profile from './pages/Profile'; +import NotFound from './pages/NotFound'; export default function App() { return ( - <> - - - } /> - - + + }> + } /> + } /> + } /> + } /> + } /> + + ); } \ No newline at end of file diff --git a/my-library/src/components/Layout.jsx b/my-library/src/components/Layout.jsx new file mode 100644 index 0000000..c510cc0 --- /dev/null +++ b/my-library/src/components/Layout.jsx @@ -0,0 +1,11 @@ +import { Outlet } from 'react-router-dom'; +import Navbar from './Navbar'; + +export default function Layout() { + return ( + <> + + + + ); +} \ No newline at end of file diff --git a/my-library/src/index.css b/my-library/src/index.css index ec2585e..e69de29 100644 --- a/my-library/src/index.css +++ b/my-library/src/index.css @@ -1,13 +0,0 @@ -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} diff --git a/my-library/src/pages/Books.jsx b/my-library/src/pages/Books.jsx new file mode 100644 index 0000000..7ff328f --- /dev/null +++ b/my-library/src/pages/Books.jsx @@ -0,0 +1,3 @@ +export default function Books() { + return

Catalogue

; +} \ No newline at end of file diff --git a/my-library/src/pages/Home.jsx b/my-library/src/pages/Home.jsx index 6639b48..09ca41a 100644 --- a/my-library/src/pages/Home.jsx +++ b/my-library/src/pages/Home.jsx @@ -1,91 +1,9 @@ import { Link } from 'react-router-dom'; import '../styles/home.css'; -const features = [ - { icon: '📚', title: 'Enregistrer un livre', desc: 'Ajoutez un nouveau titre au catalogue de la bibliothèque.', role: 'admin', path: '/books/new' }, - { icon: '🛒', title: 'Passer une commande', desc: 'Commandez vos livres préférés en quelques secondes.', role: 'user', path: '/orders/new' }, - { icon: '🏷️', title: 'Appliquer une promotion', desc: 'Créez et gérez vos codes promotionnels.', role: 'admin', path: '/promotions/new' }, - { icon: '📌', title: 'Réserver un livre', desc: 'Réservez un exemplaire avant sa disponibilité.', role: 'user', path: '/reservations/new' }, - { icon: '↩️', title: 'Retour de livre', desc: 'Gérez les retours et remises en stock.', role: 'admin', path: '/returns/new' }, - { icon: '⭐', title: 'Points de fidélité', desc: 'Consultez et utilisez vos points cumulés.', role: 'user', path: '/loyalty' }, - { icon: '💬', title: 'Laisser un avis', desc: 'Partagez votre opinion sur vos dernières lectures.', role: 'user', path: '/reviews/new' }, - { icon: '🎫', title: 'Créer un abonnement', desc: 'Souscrivez à un abonnement mensuel ou annuel.', role: 'user', path: '/subscriptions/new' }, - { icon: '🤝', title: 'Prêt entre lecteurs', desc: "Prêtez vos livres à d'autres membres de la communauté.", role: 'user', path: '/loans/new' }, - { icon: '👥', title: 'Commande groupée', desc: 'Participez à des achats groupés avantageux.', role: 'user', path: '/group-orders' }, -]; - -const stats = [ - { value: '10 000+', label: 'Livres disponibles' }, - { value: '5 000+', label: 'Lecteurs actifs' }, - { value: '50+', label: 'Catégories' }, -]; - export default function Home() { return (
- {/* Hero */} -
-

Votre bibliothèque en ligne

-

- Des livres pour tous, - partout, toujours. -

-
-

- Commandez, réservez, prêtez et partagez vos lectures. - Une plateforme pensée pour les vrais amoureux des livres. -

-
- - - - -
-
- - {/* Stats */} -
- {stats.map(({ value, label }) => ( -
-
{value}
-
{label}
-
- ))} -
- - {/* Features */} -
-

Fonctionnalités

-

Tout ce dont vous avez besoin

-
- -
-
- {features.map((f) => ( - -
{f.icon}
- - {f.role === 'admin' ? 'Administrateur' : 'Utilisateur'} - -

{f.title}

-

{f.desc}

- → Accéder - - ))} -
-
- - {/* Footer CTA */} -
-
-

- Prêt à commencer
votre aventure ? -

-

Rejoignez des milliers de lecteurs dès aujourd'hui.

- - Créer un compte gratuit - -
); } \ No newline at end of file diff --git a/my-library/src/pages/NotFound.jsx b/my-library/src/pages/NotFound.jsx new file mode 100644 index 0000000..ffe5bb5 --- /dev/null +++ b/my-library/src/pages/NotFound.jsx @@ -0,0 +1,3 @@ +export default function NotFound() { + return

404 Page introuvable

; +} \ No newline at end of file diff --git a/my-library/src/pages/Orders.jsx b/my-library/src/pages/Orders.jsx new file mode 100644 index 0000000..a909337 --- /dev/null +++ b/my-library/src/pages/Orders.jsx @@ -0,0 +1,3 @@ +export default function Orders() { + return

Mes commandes

; +} \ No newline at end of file diff --git a/my-library/src/pages/Profile.jsx b/my-library/src/pages/Profile.jsx new file mode 100644 index 0000000..581f560 --- /dev/null +++ b/my-library/src/pages/Profile.jsx @@ -0,0 +1,3 @@ +export default function Profile() { + return

Mon compte

; +} \ No newline at end of file diff --git a/my-library/src/styles/global.css b/my-library/src/styles/global.css index f159411..e69de29 100644 --- a/my-library/src/styles/global.css +++ b/my-library/src/styles/global.css @@ -1,52 +0,0 @@ -*, *::before, *::after { - box-sizing: border-box; - margin: 0; - padding: 0; - } - - :root { - --bg: #0d0b08; - --bg-raised: #111009; - --bg-card: #0f0d0a; - --gold: #c9a84c; - --gold-dim: rgba(201, 168, 76, 0.45); - --gold-faint:rgba(201, 168, 76, 0.1); - --parchment: #f0e6d0; - --text: #e8dcc8; - --text-muted:rgba(232, 220, 200, 0.45); - --text-dim: rgba(232, 220, 200, 0.25); - --rust: #c05a2a; - --rust-dim: rgba(192, 90, 42, 0.4); - --border: rgba(180, 150, 80, 0.15); - --border-hi: rgba(180, 150, 80, 0.3); - --font-title:'Cinzel', 'Palatino Linotype', Georgia, serif; - --font-body: 'Cormorant Garamond', 'Palatino Linotype', Georgia, serif; - } - - html { scroll-behavior: smooth; } - - body { - background-color: var(--bg); - color: var(--text); - font-family: var(--font-body); - font-size: 18px; - line-height: 1.7; - -webkit-font-smoothing: antialiased; - } - - h1, h2, h3, h4 { - font-family: var(--font-title); - } - - a { - color: inherit; - text-decoration: none; - } - - button { - cursor: pointer; - font-family: var(--font-title); - border: none; - outline: none; - background: none; - } \ No newline at end of file diff --git a/my-library/src/styles/home.css b/my-library/src/styles/home.css index 0437172..e69de29 100644 --- a/my-library/src/styles/home.css +++ b/my-library/src/styles/home.css @@ -1,372 +0,0 @@ -/* ── Hero ───────────────────────────── */ -.hero { - padding: 110px 48px 90px; - text-align: center; - border-bottom: 1px solid var(--border); - position: relative; - overflow: hidden; - } - - .hero::before { - content: ''; - position: absolute; - top: -80px; - left: 50%; - transform: translateX(-50%); - width: 600px; - height: 400px; - background: radial-gradient(ellipse, rgba(180, 140, 50, 0.06) 0%, transparent 70%); - pointer-events: none; - } - - .hero__eyebrow { - font-family: var(--font-title); - font-size: 0.65rem; - letter-spacing: 0.28em; - text-transform: uppercase; - color: var(--gold); - opacity: 0.75; - margin-bottom: 22px; - opacity: 0; - animation: fadeUp 0.7s 0.1s ease forwards; - } - - .hero__title { - font-family: var(--font-title); - font-size: clamp(2.4rem, 5.5vw, 4.5rem); - font-weight: 600; - letter-spacing: 0.02em; - line-height: 1.1; - color: var(--parchment); - max-width: 820px; - margin: 0 auto 0; - opacity: 0; - animation: fadeUp 0.7s 0.2s ease forwards; - } - - .hero__title-italic { - display: block; - font-family: var(--font-body); - font-style: italic; - font-weight: 400; - font-size: clamp(2.8rem, 6vw, 5rem); - color: var(--gold); - margin-top: 4px; - letter-spacing: 0; - } - - .hero__rule { - width: 80px; - height: 1px; - background: linear-gradient(90deg, transparent, var(--gold), transparent); - margin: 28px auto; - opacity: 0; - animation: fadeUp 0.7s 0.3s ease forwards; - } - - .hero__subtitle { - font-family: var(--font-body); - font-style: italic; - font-size: 1.1rem; - color: var(--text-muted); - max-width: 500px; - margin: 0 auto 40px; - line-height: 1.85; - opacity: 0; - animation: fadeUp 0.7s 0.35s ease forwards; - } - - .hero__actions { - display: flex; - gap: 16px; - justify-content: center; - flex-wrap: wrap; - opacity: 0; - animation: fadeUp 0.7s 0.45s ease forwards; - } - - .hero__btn-primary { - font-family: var(--font-title); - font-size: 0.68rem; - letter-spacing: 0.16em; - text-transform: uppercase; - color: var(--gold); - padding: 13px 30px; - border: 1px solid var(--gold-dim); - background: var(--gold-faint); - transition: background 0.2s, border-color 0.2s; - } - - .hero__btn-primary:hover { - background: rgba(201, 168, 76, 0.2); - border-color: var(--gold); - } - - .hero__btn-secondary { - font-family: var(--font-title); - font-size: 0.68rem; - letter-spacing: 0.16em; - text-transform: uppercase; - color: var(--text-muted); - padding: 13px 30px; - border: 1px solid rgba(232, 220, 200, 0.15); - transition: color 0.2s, border-color 0.2s; - } - - .hero__btn-secondary:hover { - color: var(--text); - border-color: rgba(232, 220, 200, 0.35); - } - - @keyframes fadeUp { - from { opacity: 0; transform: translateY(20px); } - to { opacity: 1; transform: translateY(0); } - } - - /* ── Stats ───────────────────────────── */ - .stats { - display: flex; - justify-content: center; - border-bottom: 1px solid var(--border); - } - - .stats__item { - flex: 1; - max-width: 240px; - text-align: center; - padding: 36px 16px; - border-right: 1px solid var(--border); - } - - .stats__item:last-child { - border-right: none; - } - - .stats__value { - font-family: var(--font-title); - font-size: 2rem; - font-weight: 600; - color: var(--gold); - letter-spacing: 0.04em; - } - - .stats__label { - font-family: var(--font-title); - font-size: 0.6rem; - letter-spacing: 0.18em; - text-transform: uppercase; - color: var(--text-dim); - margin-top: 6px; - } - - /* ── Section header ──────────────────── */ - .section-header { - text-align: center; - padding: 80px 24px 0; - } - - .section-header__eyebrow { - font-family: var(--font-title); - font-size: 0.6rem; - letter-spacing: 0.28em; - text-transform: uppercase; - color: rgba(201, 168, 76, 0.55); - margin-bottom: 14px; - } - - .section-header__title { - font-family: var(--font-title); - font-size: clamp(1.4rem, 3vw, 2.2rem); - font-weight: 600; - color: var(--parchment); - letter-spacing: 0.04em; - } - - /* ── Features ────────────────────────── */ - .features { - padding: 40px 0 80px; - } - - .features__grid { - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 1px; - background: var(--border); - border-top: 1px solid var(--border); - border-bottom: 1px solid var(--border); - } - - @media (max-width: 1000px) { - .features__grid { grid-template-columns: repeat(3, 1fr); } - } - - @media (max-width: 700px) { - .features__grid { grid-template-columns: repeat(2, 1fr); } - .hero { padding: 80px 24px 60px; } - .navbar { padding: 0 20px; } - .stats { flex-direction: column; align-items: center; } - .stats__item { border-right: none; border-bottom: 1px solid var(--border); max-width: 100%; width: 100%; } - } - - @media (max-width: 420px) { - .features__grid { grid-template-columns: 1fr; } - } - - /* ── Feature card ────────────────────── */ - .feature-card { - background: var(--bg); - padding: 30px 24px 26px; - display: flex; - flex-direction: column; - gap: 9px; - text-decoration: none; - color: var(--text); - transition: background 0.25s; - position: relative; - overflow: hidden; - } - - .feature-card::after { - content: ''; - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 1px; - background: linear-gradient(90deg, transparent, var(--gold), transparent); - opacity: 0; - transition: opacity 0.3s; - } - - .feature-card:hover { - background: #131007; - } - - .feature-card:hover::after { - opacity: 1; - } - - .feature-card__glyph { - font-size: 1.4rem; - margin-bottom: 4px; - opacity: 0.8; - line-height: 1; - } - - .feature-card__title { - font-family: var(--font-title); - font-size: 0.8rem; - font-weight: 600; - letter-spacing: 0.05em; - color: var(--parchment); - line-height: 1.4; - } - - .feature-card__desc { - font-family: var(--font-body); - font-style: italic; - font-size: 0.9rem; - color: var(--text-muted); - line-height: 1.65; - flex: 1; - } - - .feature-card__arrow { - font-family: var(--font-title); - font-size: 0.65rem; - letter-spacing: 0.12em; - text-transform: uppercase; - color: var(--text-dim); - transition: color 0.2s; - margin-top: 6px; - } - - .feature-card:hover .feature-card__arrow { - color: var(--gold); - } - - .badge { - display: inline-block; - font-family: var(--font-title); - font-size: 0.55rem; - letter-spacing: 0.12em; - text-transform: uppercase; - padding: 3px 9px; - align-self: flex-start; - margin-bottom: 2px; - } - - .badge--admin { - border: 1px solid var(--rust-dim); - color: var(--rust); - } - - .badge--user { - border: 1px solid var(--gold-dim); - color: rgba(201, 168, 76, 0.65); - } - - /* ── Footer CTA ──────────────────────── */ - .home-cta { - padding: 100px 24px; - text-align: center; - border-top: 1px solid var(--border); - position: relative; - overflow: hidden; - } - - .home-cta::before { - content: ''; - position: absolute; - bottom: -60px; - left: 50%; - transform: translateX(-50%); - width: 500px; - height: 300px; - background: radial-gradient(ellipse, rgba(180, 140, 50, 0.05) 0%, transparent 70%); - pointer-events: none; - } - - .home-cta__rule { - width: 60px; - height: 1px; - background: linear-gradient(90deg, transparent, var(--gold), transparent); - margin: 0 auto 32px; - } - - .home-cta__title { - font-family: var(--font-title); - font-size: clamp(1.8rem, 4vw, 3rem); - font-weight: 600; - letter-spacing: 0.04em; - color: var(--parchment); - margin-bottom: 16px; - line-height: 1.15; - } - - .home-cta__sub { - font-family: var(--font-body); - font-style: italic; - font-size: 1rem; - color: var(--text-muted); - margin-bottom: 40px; - } - - .home-cta__btn { - display: inline-block; - font-family: var(--font-title); - font-size: 0.68rem; - letter-spacing: 0.18em; - text-transform: uppercase; - color: var(--gold); - padding: 13px 36px; - border: 1px solid var(--gold-dim); - background: var(--gold-faint); - transition: background 0.2s, border-color 0.2s; - cursor: pointer; - } - - .home-cta__btn:hover { - background: rgba(201, 168, 76, 0.2); - border-color: var(--gold); - } \ No newline at end of file diff --git a/my-library/src/styles/navbar.css b/my-library/src/styles/navbar.css index 52f8a24..e69de29 100644 --- a/my-library/src/styles/navbar.css +++ b/my-library/src/styles/navbar.css @@ -1,98 +0,0 @@ -.navbar { - position: sticky; - top: 0; - z-index: 200; - height: 56px; - display: flex; - align-items: center; - justify-content: space-between; - padding: 0 48px; - background: rgba(13, 11, 8, 0.94); - border-bottom: 1px solid var(--border); - backdrop-filter: blur(12px); - -webkit-backdrop-filter: blur(12px); - } - - .navbar__logo { - font-family: var(--font-title); - font-size: 1.05rem; - font-weight: 600; - letter-spacing: 0.22em; - color: var(--gold); - text-transform: uppercase; - } - - .navbar__links { - display: flex; - gap: 8px; - list-style: none; - } - - .navbar__links a { - font-family: var(--font-title); - font-size: 0.7rem; - letter-spacing: 0.14em; - text-transform: uppercase; - color: var(--text-muted); - padding: 6px 14px; - transition: color 0.2s; - position: relative; - } - - .navbar__links a::after { - content: ''; - position: absolute; - bottom: 0; - left: 14px; - right: 14px; - height: 1px; - background: var(--gold); - transform: scaleX(0); - transition: transform 0.25s ease; - } - - .navbar__links a:hover { - color: var(--gold); - } - - .navbar__links a:hover::after { - transform: scaleX(1); - } - - .navbar__actions { - display: flex; - gap: 10px; - } - - .btn-ghost { - font-family: var(--font-title); - font-size: 0.65rem; - letter-spacing: 0.14em; - text-transform: uppercase; - color: var(--text-muted); - padding: 7px 16px; - border: 1px solid rgba(232, 220, 200, 0.15); - transition: color 0.2s, border-color 0.2s; - } - - .btn-ghost:hover { - color: var(--text); - border-color: rgba(232, 220, 200, 0.35); - } - - .btn-cta { - font-family: var(--font-title); - font-size: 0.65rem; - letter-spacing: 0.14em; - text-transform: uppercase; - color: var(--gold); - padding: 7px 16px; - border: 1px solid var(--gold-dim); - background: var(--gold-faint); - transition: background 0.2s, border-color 0.2s; - } - - .btn-cta:hover { - background: rgba(201, 168, 76, 0.18); - border-color: var(--gold); - } \ No newline at end of file