Siteweb-Mangas-Kawaii

🌸 SAKURA MANGA — 桜漫画

Un site web élégant et kawaii dédié à la découverte et la consultation de mangas. Avec son design moderne et ses animations fluides, SAKURA MANGA offre une expérience utilisateur immersive et agréable.

✨ Fonctionnalités

• Design Kawaii : Palette de couleurs rose pastel avec animations fluides
• Catalogue Dynamique : Grille de mangas avec chargement et animations
• Spotlight : Section mettant en avant un manga en détail
• Genres : Classification des mangas par genre avec emojis
• Responsive : Adaptable à tous les appareils (desktop, tablet, mobile)
• Curseur Personnalisé : Curseur animé exclusive au design du site (desktop)
• Navigation Fluide : Menu avec effets hover et animations
• Formulaire Newsletter : Section d’inscription à la newsletter

🎨 Design & Style

Palette de Couleurs

• Lavender (#FDC9DA) : Rose clair
• Pink (#FDBFD3) : Rose principal
• Misty (#E9EDF6) : Bleu pâle
• Deep (#e8a0bd) : Rose profond
• Text (#7a5c6e) : Texte principal

Typographie

• Pacifico : Titres (cursive)
• Quicksand : Corps de texte (sans-serif)
• Noto Serif JP : Texte japonais (serif)

📁 Structure du Projet

Siteweb-Mangas-Kawaii/
├── manga-kawaii.html    # Page principale avec tout le contenu
├── README.md            # Documentation du projet
└── (ressources en ligne via CDN)

🚀 Sections Principales

1. Navigation Globale

• Logo SAKURA MANGA avec kanji
• Menu de navigation responsive
• Hamburger menu pour mobile

2. Section Héroïque

• Titre accrocheur avec animation
• Sous-titre en japonais
• Bouton d’action CTA
• Éléments décorés flottants

3. Marquee

• Bande défilante avec texte animé
• Design dynamique et attractif

4. Catalogue de Mangas

• Grille responsive (4 colonnes → 2 colonnes mobile)
• Cartes avec images, titres et genres
• Badge de notation
• Effet hover avec animation d’agrandissement
• Overlay au survol avec bouton “Lire”
• État de chargement avec skeleton loaders

5. Section Spotlight

• Présentation détaillée d’un manga
• Statistiques (chapitres, lecteurs, année)
• Layout en deux colonnes (image + contenu)

6. Genres

• Grille de 3 colonnes (responsive)
• Cartes avec emoji et nombre de mangas
• Effets hover personnalisés

7. Newsletter (CTA)

• Formulaire d’inscription email
• Bouton d’envoi intégré
• Design moderne et accessible

8. Footer

• Logo du site
• Liens de navigation
• Copyright

🛠️ Technologies Utilisées

Frontend

• HTML5 : Structure sémantique
• CSS3 : Animations, gradients, flexbox, grid
• JavaScript : Interactivité et animations

Bibliothèques & Ressources Externes

• Locomotive Scroll 4.1.4 : Scroll fluide
• Google Fonts : Polices personnalisées
• Font Awesome : Icônes (optionnel)

CDN Utilisés

<!-- Locomotive Scroll CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.4/dist/locomotive-scroll.min.css" />

<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=Noto+Serif+JP:wght@400;700;900&family=Pacifico&display=swap" rel="stylesheet" />

📱 Responsive Design

Points de rupture

• Desktop : 4 colonnes pour le catalogue
• Tablet (max 1024px) : 3 colonnes
• Mobile Portrait (max 768px) : 2 colonnes, navigation en hamburger
• Mobile Petit (max 480px) : 2 colonnes, icônes réduites

Adaptations Mobiles

• Curseur personnalisé désactivé (mobile)
• Navigation burger au lieu du menu horizontal
• Réduction des espacements et marges
• Textes fluidifiés avec clamp()

⌨️ Fonctionnalités Interactives

Curseur Personnalisé (Desktop)

• Cercle de 18px avec anneau de 36px
• Suivi fluide du mouvement de la souris
• Agrandissement au survol des éléments interactifs
• Désactivé sur mobile pour optimiser les performances

Animations

• Pop In : Apparition du tag héroïque (0.6s)
• Float In : Apparition progressive des éléments (0.7-1.2s)
• Float : Mouvement flottant continu (4s)
• Marquee : Défilement horizontal infini (16s)
• Shimmer : Effet de chargement (1.5s)

Effets Hover

• Cartes de manga : agrandissement + élévation
• Liens de navigation : changement de couleur + indicateur fleur
• Cartes de genre : élévation + changement de fond
• Boutons : transition de couleur/ombre

🎯 Usage

Ouvrir le Site

1. Ouvrir manga-kawaii.html dans un navigateur web
2. Naviguer à travers les différentes sections
3. Survoler les cartes pour voir les effets
4. Sur mobile, utiliser le hamburger menu pour naviguer

Modifier le Contenu

• Mangas : Modifier le JSON/données dans la section JavaScript
• Couleurs : Éditer les variables CSS :root
• Textes : Modifier directement le HTML

💡 Conseils de Développement

Pour Ajouter un Nouveau Manga

1. Préparer une image (ratio 3:4 recommandé)
2. Ajouter les données dans la section <script>
3. Ajouter l’image en tant que ressource

Pour Personnaliser les Couleurs

Éditer les variables CSS dans le :root du <style> :

:root {
  --lavender: #FDC9DA;
  --misty:    #E9EDF6;
  --pink:     #FDBFD3;
  /* ... */
}

Pour Ajouter des Fonts

Ajouter dans le lien Google Fonts et mettre à jour les font-family

📊 Performance

• Lazy Loading : Images chargées à la demande
• Skeleton Loaders : État de chargement fluide
• CSS Optimized : Animations GPU-accelerées
• Responsive Images : Adaptation à la taille de l’écran

♿ Accessibilité

• Structure sémantique HTML5
• Contraste des couleurs respectant WCAG
• Textes alternatifs sur les images
• Navigation au clavier possible
• Support du mode sombre (CSS custom properties)

🐛 Signaler un Problème

Si vous trouvez un bug ou avez une suggestion, n’hésitez pas à créer une issue.

🎓 Ressources Utiles

• MDN Web Docs : Documentation HTML/CSS/JS
• CSS Tricks : Astuces CSS avancées
• Locomotive Scroll Docs : Documentation du scroll
• Google Fonts : Polices gratuites

---

Prêt à découvrir des mangas kawaii ? 🌸✨