TALLAN Signal'Ressources - Application Web

🌱 Description

TALLAN Signal'Ressources est une application web mobile-first qui permet aux enseignants de signaler rapidement la présence de matières premières disponibles dans leur école (fruits, légumes, lait, volaille), facilitant ainsi leur collecte par l'entreprise TALLAN.

✨ Fonctionnalités principales

Pour les enseignants :

• Signalement rapide : Interface ultra-simple avec 3 clics pour signaler une ressource
• Catégories intuitives : Fruits, légumes, lait, volaille avec icônes visuelles
• Système de photo : Prise de photo compressée (< 300ko) pour chaque signalement
• Estimation de quantité : Slider visuel (XS à XL) avec estimation en kg
• Mode offline : Stockage local avec synchronisation automatique
• Système de points : Récompenses fidélité échangeables contre du matériel scolaire
• Suivi en temps réel : Statut des signalements (envoyé, accepté, collecté)

Pour l'entreprise (Dashboard Hub) :

• Vue d'ensemble : Statistiques en temps réel des collectes
• Carte interactive : Localisation des signalements avec clusters
• Gestion des tournées : Planification et optimisation des itinéraires
• Tableau de bord analytique : Graphiques de performance et tendances

🎨 Design et expérience utilisateur

Identité visuelle :

• Palette de couleurs : Vert naturel (#6b7c32) avec tons neutres épurés
• Typographie : Inter (sans-serif moderne) pour une lisibilité optimale
• Style visuel : Minimaliste avec éléments naturels et évoquant l'agriculture
• Animations : Transitions fluides avec Anime.js pour une expérience moderne

Interface mobile-first :

• Design responsive optimisé pour les smartphones
• Navigation intuitive avec boutons larges et accessibles
• Feedback visuel immédiat pour toutes les interactions
• Mode sombre/clair automatique selon les préférences système

📱 Pages de l'application

1. index.html - Page d'accueil principale

   • Bouton central de signalement
   • Statistiques personnelles
   • Historique des signalements récents
   • Catégories rapides d'accès

2. detail.html - Détail d'un signalement

   • Informations complètes du signalement
   • Timeline de suivi
   • Localisation sur carte
   • Code QR de ramassage

3. dashboard.html - Tableau de bord entreprise

   • Vue d'ensemble des statistiques
   • Carte des signalements
   • Gestion des tournées
   • Analytiques et graphiques

4. profile.html - Profil utilisateur

   • Informations personnelles
   • Système de récompenses
   • Boutique de points
   • Paramètres et configuration

🛠️ Technologies utilisées

Frontend :

• HTML5 - Structure sémantique
• Tailwind CSS - Framework CSS utilitaire
• JavaScript ES6+ - Logique interactive
• Anime.js - Animations fluides
• Font Awesome - Icônes vectorielles
• Google Fonts (Inter) - Typographie moderne

Backend (simulé) :

• JavaScript local - Gestion des données mock
• LocalStorage - Persistance des données
• File API - Gestion des photos

Visualisations :

• Plotly.js - Graphiques interactifs pour le dashboard

🚀 Installation et utilisation

1. Cloner ou télécharger le projet
2. Ouvrir index.html dans un navigateur moderne
3. Naviguer entre les pages via les boutons de navigation
4. Tester les fonctionnalités de signalement

Navigation :

• Page d'accueil : Bouton flottant (+) pour créer un signalement
• Détail : Cliquez sur un signalement dans la liste
• Profil : Bouton d'engrenage dans la navigation
• Dashboard : Accès via dashboard.html

📊 Fonctionnalités techniques

Gestion des données :

• Structure de données JSON pour les signalements
• Système de points avec historique des transactions
• Stockage local avec synchronisation simulée

Gestion des photos :

• Compression automatique des images
• Prévisualisation avant envoi
• Stockage en base64 pour la démo

Animations et transitions :

• Animations d'entrée/sortie des modales
• Effets de survol sur les cartes
• Indicateurs de chargement fluides
• Feedback visuel pour toutes les actions

🔒 Sécurité et confidentialité

• Aucune donnée personnelle sensible stockée
• Position GPS floutée pour la confidentialité
• Suppression automatique des photos après 90 jours
• Consentement explicite pour l'utilisation des données

📈 Performance

• Optimisation des images (< 300ko)
• Chargement progressif des contenus
• Animations optimisées pour mobile
• Design léger et rapide

🎯 Objectifs atteints

✅ Interface ultra-simple (3 clics maximum) ✅ Mode offline avec synchronisation ✅ Système de récompenses gamifié ✅ Dashboard analytique complet ✅ Design moderne et accessible ✅ Expérience mobile optimisée

🔮 Évolutions futures

• Intégration avec API backend réelle
• Notifications push
• Partage sur les réseaux sociaux
• Mode multilingue
• Export des données
• Intégration avec des partenaires

👥 Équipe projet

Développé dans le cadre du projet TALLAN Signal'Ressources

---

Cette application est une démonstration technique du concept TALLAN Signal'Ressources. Elle illustre les fonctionnalités principales et l'expérience utilisateur envisagée.