🦎 Caisse Chameleon - Project Story

Projet réalisé lors de ConUHacks X pour le défi Desjardins "Chameleon's Eye"

💡 Inspiration

L'idée de Caisse Chameleon est née d'un constat simple : les applications bancaires actuelles ne s'adaptent pas à leur utilisateur. Que ce soit dans le métro bondé où quelqu'un peut regarder votre écran, ou pour les personnes malvoyantes qui ont besoin d'alternatives visuelles, les apps bancaires restent rigides.

Nous voulions créer une banque qui s'adapte à vous — pas l'inverse. Comme un caméléon qui change selon son environnement.

✨ What it does

Caisse Chameleon est une application bancaire web accessible avec trois fonctionnalités clés:

Thème automatique jour/nuit : L'interface s'adapte selon l'heure (clair le jour, sombre la nuit)
Mode Espion : Une interface ultra-discrète où le solde est caché par défaut et révélé uniquement par un geste volontaire — parfait pour consulter ses finances en public
Commandes vocales : Contrôlez l'app sans regarder l'écran avec des commandes comme "mon solde", "mode espion", ou "aide"
Feedback vibratoire : Chaque action est confirmée par des vibrations, permettant une utilisation sans regarder

🛠️ How we built it

Nous avons utilisé uniquement des technologies web natives sans frameworks externes:

Technologie	Utilisation
HTML5/CSS3/JavaScript	Structure, styles et logique
Web Speech API	Reconnaissance vocale et text-to-speech
Vibration API	Feedback tactile sur mobile
LocalStorage	Persistance du thème

L'architecture est modulaire : chaque page (login, dashboard, spy mode) fonctionne indépendamment, et les fonctionnalités (thème, voix, vibrations) sont des couches séparées qui peuvent être activées ou désactivées sans affecter les autres.

🚧 Challenges we ran into

Conflit window.onload : Nos deux fichiers JS avaient chacun un window.onload, causant des bugs. Nous avons dû fusionner les initialisations.
Encodage UTF-8 : Les accents français et emojis étaient corrompus. Nous avons dû recréer les fichiers avec le bon encodage.
Speech Recognition : L'API ne fonctionne qu'en HTTPS ou localhost, ce qui compliquait les tests.
Classe CSS écrasée : loadTheme() écrasait la classe spy-mode, cassant le mode espion. Il a fallu ajouter une vérification.

🏆 Accomplishments that we're proud of

Une application 100% fonctionnelle avec navigation complète entre les pages
Le toggle switch cactus avec animation fluide — un détail visuel qui rend l'app unique
La voix style aventurier (grave et dramatique) qui donne une personnalité à l'app
Le mode espion qui offre une vraie solution de confidentialité comportementale, pas juste logicielle
Un code propre et modulaire facile à maintenir et étendre

📚 What we learned

L'importance de la modularité : séparer les fonctionnalités permet de débugger plus facilement
Les APIs web natives sont puissantes — pas besoin de librairies externes pour la voix ou les vibrations
L'accessibilité n'est pas qu'une fonctionnalité bonus, c'est une philosophie de design
La collaboration en équipe : diviser le travail (JS, HTML/CSS, présentation) tout en gardant une vision commune