Une application web moderne et complète pour maximiser votre productivité d'étude
Study Hub est une application web tout-en-un conçue pour les étudiants modernes. Combinant design glassmorphism, animations fluides et fonctionnalités puissantes, elle vous aide à rester concentré, organisé et productif.
- 🎯 Mode Étude Flashcards - Modal immersif avec navigation et progression
- 🔄 Export/Import - Sauvegardez et transférez vos données
- 🎨 Filtres Tâches - Visualisez toutes/actives/complétées
- ⌨️ Raccourcis Clavier - Navigation rapide au clavier
- 💾 Auto-Save - Sauvegarde automatique toutes les 10s
- 🌙 Dark Mode - Design dark par défaut
- ♿ Accessibilité WCAG AA - Pour tous les utilisateurs
- ⚡ Presets rapides : 15, 25, 45 minutes
- 🔔 Notifications navigateur : Alertes à la fin
- 🎵 Musique d'ambiance : Lecteur audio intégré
- ⌨️ Raccourcis : Ctrl+Space, Ctrl+R, Ctrl+M
- 📊 Titre dynamique : Affiche le temps restant
- ✨ Checkbox interactifs : Animation au clic
- 🎯 Filtres : Toutes / Actives / Complétées
- 📈 Statistiques : Total et complétées en temps réel
- 🗑️ Suppression facile : Bouton au survol
- 💾 Persistence : LocalStorage automatique
- 📅 Horodatage : Date de création automatique
- 🎨 Grid responsive : Adapté à tous les écrans
- ✏️ Édition simple : Créez et supprimez facilement
- 🌈 Cards modernes : Design glassmorphism
Mode Liste :
- 🔄 Flip 3D : Retournement fluide
- 🎲 Carte aléatoire : Révision surprise
- 🎨 Design différencié : Question vs Réponse
Mode Étude (NOUVEAU) :
- 📺 Affichage plein écran : Une carte à la fois
- ⬅️➡️ Navigation : Précédent/Suivant avec flèches
- 📊 Barre de progression : Visualisation de l'avancement
- 🔀 Mélange : Ordre aléatoire
- ⏱️ Auto-flip : Retournement automatique après 3s
- ⌨️ Raccourcis : ←/→ navigation, Espace/Enter flip, Esc fermer
- 📤 Export JSON : Téléchargez toutes vos données
- 📥 Import JSON : Restaurez ou transférez vos données
- 💽 Auto-Save : Sauvegarde automatique toutes les 10s
- 🔒 LocalStorage : Persistence locale des données
- 🎨 Multi-Fonts : Outfit (titres) + Inter (corps) + Caveat (accents)
- 🌈 Palette Cohérente : #00BFFF avec variations et gradients
- 💎 Glassmorphism : backdrop-blur sur toutes les cartes
- ✨ Animations Fluides : 0.3-0.6s avec easing naturel
- 🌙 Dark Mode : Fond #0A0E1A par défaut
- 🔆 Glow Effects : Ombres lumineuses sur éléments importants
| Device | Breakpoint | Layout |
|---|---|---|
| 📱 Mobile | 320px+ | Stack vertical, full width |
| 📲 Tablet | 768px+ | Grids 2 colonnes |
| 💻 Desktop | 1024px+ | Espacements généreux |
| 🖥️ Large | 1280px+ | Max 1200px container |
- ✅ aria-labels sur tous les boutons
- ✅ Focus states visibles avec outline
- ✅ Contraste WCAG AA : 4.5:1 minimum
- ✅ Navigation clavier complète
- ✅ Roles ARIA pour screen readers
- ✅ Reduced motion support
| Raccourci | Action |
|---|---|
Ctrl/Cmd + Space |
Démarrer/Pause le timer |
Ctrl/Cmd + R |
Réinitialiser le timer |
Ctrl/Cmd + M |
Toggle musique |
| Raccourci | Action |
|---|---|
← Flèche Gauche |
Carte précédente |
→ Flèche Droite |
Carte suivante |
Espace ou Enter |
Retourner la carte |
Esc |
Fermer le mode étude |
- Cliquez sur le bouton Code → Download ZIP
- Extrayez le fichier ZIP dans un dossier
- Ouvrez
index.htmldans votre navigateur
git clone https://github.com/GlamgarOnDiscord/study-website.git
cd study-website
# Ouvrir index.html dans votre navigateur# Avec VS Code Live Server extension
npm install -g live-server
live-server- HTML5 - Structure sémantique
- CSS3 - Variables CSS, Grid, Flexbox, Animations
- JavaScript ES6+ - Modules, Arrow functions, Destructuring
- Outfit - Google Fonts (Titres)
- Inter - Google Fonts (Corps)
- Caveat - Google Fonts (Accents)
- LocalStorage API - Persistence des données
- Notification API - Alertes timer
- FileReader API - Import/Export JSON
study-website/
├── index.html # Page principale
├── README.md # Documentation
├── src/
│ ├── css/
│ │ └── style.css # Styles (1594 lignes)
│ ├── js/
│ │ └── main.js # Logique (750+ lignes)
│ └── musique/
│ ├── music1.mp3 # Ambiance chill
│ └── music2.mp3 # Son TikTok
└── .vscode/
└── settings.json # Config VS Code
| Métrique | Valeur |
|---|---|
| HTML | ~420 lignes |
| CSS | ~1594 lignes |
| JavaScript | ~750 lignes |
| Fonts | 3 polices |
| SVG | 100% inline |
| Animations | 20+ keyframes |
| Responsive | 5 breakpoints |
- ⚡ Lazy Loading : SVG backgrounds avec IntersectionObserver
- 🎨 GPU Acceleration : transform/opacity uniquement
- 💾 Optimisation Mémoire : Cleanup des timeouts/intervals
- 📦 Pas de Framework : Vanilla JS pour performance maximale
// Auto-save toutes les 10 secondes
setInterval(saveToLocalStorage, 10000);
// Save avant fermeture
window.addEventListener('beforeunload', saveToLocalStorage);{
"todos": [...],
"notes": [...],
"flashcards": [...],
"exportDate": "2025-01-15T10:30:00.000Z",
"version": "1.0"
}- 🌈 Thèmes de couleurs - Personnalisation de la palette
- 📊 Statistiques avancées - Temps d'étude, graphiques
- 🔄 Synchronisation Cloud - Firebase/Supabase
- 📱 PWA - App installable
- 🧠 Spaced Repetition - Algorithme de révision
- 🎤 Voice Notes - Enregistrement audio
- 🌐 Multi-langue - i18n support
- 🤝 Collaboration - Partage de flashcards
Si vous trouvez un bug ou avez une suggestion :
- Vérifiez les Issues existantes
- Créez une Nouvelle Issue
- Fournissez un maximum de détails :
- Navigateur et version
- Étapes pour reproduire
- Screenshots si possible
Les contributions sont les bienvenues ! Voici comment :
- Fork le projet
- Créez une branche (
git checkout -b feature/AmazingFeature) - Commit vos changements (
git commit -m 'Add AmazingFeature') - Push vers la branche (
git push origin feature/AmazingFeature) - Ouvrez une Pull Request
- ✅ Code propre et commenté
- ✅ Respecter le style existant
- ✅ Tester sur mobile/desktop
- ✅ Pas d'emojis en production (SVG uniquement)
- ✅ Accessibilité WCAG AA minimum
Open Source - Vous pouvez utiliser et modifier librement ce projet.
- ✅ Attribution requise (lien vers le projet original)
- ✅ Conserver les crédits dans le footer
- ✅ Partager vos améliorations (apprécié)
<!-- Attribution footer -->
Créé avec ❤️ par GlamgarUn grand merci à :
- Claude AI - Pour l'assistance au développement
- Google Fonts - Pour les polices gratuites
- La communauté GitHub - Pour l'inspiration
Glamgar - @GlamgarOnDiscord
Project Link : https://github.com/GlamgarOnDiscord/study-website
⭐ Si ce projet vous a aidé, laissez une étoile !
© 2023-2025 Study Hub by Glamgar. Tous droits réservés.
Fait avec ❤️ et beaucoup de ☕