Hugging Face's logo

Spaces:
hed72
/
cosmicoracleai
Running

App Files Community
hed72 commited on
Commit
4197532
·
verified ·
1 Parent(s): 739ee25

les 8 types de lectures ne fonctionnent pas, les rendre fonctionnel

Browse files
Files changed (1) hide show
  1. demo.html +284 -74
demo.html CHANGED
@@ -69,26 +69,74 @@
69
  <div class="bg-cosmic-800/50 rounded-xl p-8 border border-cosmic-700/50 mb-12">
70
  <h2 class="text-2xl font-medium text-cosmic-100 mb-6">1. Formule ta question</h2>
71
  <textarea class="w-full bg-cosmic-700/30 border border-cosmic-700 rounded-lg p-4 text-black mb-4 focus:outline-none focus:ring-2 focus:ring-cosmic-400 focus:border-transparent" rows="4" placeholder="Ex: Quelle attitude adopter pour mon entretien demain ?"></textarea>
72
- <div class="mb-8">
73
  <h3 class="text-lg text-cosmic-100 mb-3">2. Choisis ton type de lecture</h3>
74
- <div class="grid sm:grid-cols-2 gap-4">
75
- <button id="three-cards" class="bg-cosmic-700/30 rounded-lg p-4 border border-cosmic-600/30 hover:border-cosmic-400/50 transition text-left reading-type" data-type="three-cards">
76
- <div class="flex items-center">
77
- <div class="w-10 h-10 rounded-lg bg-cosmic-600/50 flex items-center justify-center mr-3">
78
- <i data-feather="layers" class="text-cosmic-400"></i>
 
 
79
  </div>
80
- <span class="font-medium text-cosmic-100">Tirage 3 cartes</span>
81
- </div>
82
- </button>
83
- <button id="oracle" class="bg-cosmic-700/30 rounded-lg p-4 border border-cosmic-600/30 hover:border-cosmic-400/50 transition text-left reading-type" data-type="oracle">
84
- <div class="flex items-center">
85
- <div class="w-10 h-10 rounded-lg bg-cosmic-600/50 flex items-center justify-center mr-3">
86
- <i data-feather="compass" class="text-cosmic-400"></i>
87
  </div>
88
- <span class="font-medium text-cosmic-100">Oracle posture</span>
89
- </div>
90
- </button>
91
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
92
  </div>
93
 
94
  <button id="submit-reading" class="w-full py-4 rounded-full bg-gradient-to-r from-cosmic-400 to-cosmic-600 text-cosmic-900 font-bold text-lg hover:opacity-90 transition cosmic-glow flex items-center justify-center">
@@ -380,65 +428,227 @@
380
  resultContainer.classList.remove('hidden');
381
 
382
  if (selectedReadingType === 'three-cards') {
383
- document.querySelector('#result-container .flex.flex-col').innerHTML = `
384
- <div class="bg-cosmic-700/30 rounded-xl p-4 border border-cosmic-600/30 tarot-card drawing-animation" style="animation-delay: 0.1s;">
385
- <div class="w-full h-48 bg-cosmic-600/20 rounded-lg mb-3 flex items-center justify-center">
386
- <i data-feather="image" class="w-12 h-12 text-cosmic-400"></i>
387
- </div>
388
- <h3 class="font-medium text-cosmic-100 mb-2 text-center">Passé</h3>
389
- <p class="text-sm text-cosmic-300 text-center">La Roue de Fortune</p>
390
- </div>
391
- <div class="bg-cosmic-700/30 rounded-xl p-4 border border-cosmic-600/30 tarot-card drawing-animation" style="animation-delay: 0.3s;">
392
- <div class="w-full h-48 bg-cosmic-600/20 rounded-lg mb-3 flex items-center justify-center">
393
- <i data-feather="image" class="w-12 h-12 text-cosmic-400"></i>
394
- </div>
395
- <h3 class="font-medium text-cosmic-100 mb-2 text-center">Présent</h3>
396
- <p class="text-sm text-cosmic-300 text-center">Le Pendu</p>
397
- </div>
398
- <div class="bg-cosmic-700/30 rounded-xl p-4 border border-cosmic-600/30 tarot-card drawing-animation" style="animation-delay: 0.5s;">
399
- <div class="w-full h-48 bg-cosmic-600/20 rounded-lg mb-3 flex items-center justify-center">
400
- <i data-feather="image" class="w-12 h-12 text-cosmic-400"></i>
401
- </div>
402
- <h3 class="font-medium text-cosmic-100 mb-2 text-center">Action</h3>
403
- <p class="text-sm text-cosmic-300 text-center">La Force</p>
404
- </div>
405
- `;
406
 
407
- document.querySelector('#result-container .space-y-6').innerHTML = `
408
- <div>
409
- <h3 class="text-lg font-medium text-cosmic-100 mb-2">Analyse</h3>
410
- <p class="text-cosmic-200">Votre situation actuelle montre une période d'attente et de réflexion (Le Pendu). Après une phase de changements rapides (La Roue de Fortune), il est temps de prendre du recul avant d'agir avec détermination (La Force).</p>
411
- </div>
412
- <div>
413
- <h3 class="text-lg font-medium text-cosmic-100 mb-2">Action concrète</h3>
414
- <p class="text-cosmic-200">Dans les 3 prochains jours, consacrez 30 minutes à visualiser clairement votre objectif avant de passer à l'action. Notez 3 étapes précises pour y parvenir.</p>
415
- </div>
416
- `;
417
- } else {
418
- document.querySelector('#result-container .flex.flex-col').innerHTML = `
419
- <div class="bg-cosmic-700/30 rounded-xl p-6 border border-cosmic-600/30 w-full tarot-card drawing-animation">
420
- <div class="w-full h-48 bg-cosmic-600/20 rounded-lg mb-4 flex items-center justify-center">
421
- <i data-feather="compass" class="w-12 h-12 text-cosmic-400"></i>
422
- </div>
423
- <h3 class="text-xl font-medium text-cosmic-100 mb-2 text-center">Posture recommandée</h3>
424
- <p class="text-lg text-cosmic-400 text-center mb-4 font-medium">Confiance active</p>
425
- <p class="text-cosmic-200 text-center">Une attitude qui allie assurance et ouverture, sans arrogance ni passivité.</p>
426
- </div>
427
- `;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
428
 
429
- document.querySelector('#result-container .space-y-6').innerHTML = `
430
- <div>
431
- <h3 class="text-lg font-medium text-cosmic-100 mb-2">Signification</h3>
432
- <p class="text-cosmic-200">Dans votre situation actuelle, l'univers suggère d'adopter une posture de confiance active. Cela signifie croire en vos capacités tout en restant réceptif aux signes et opportunités.</p>
433
- </div>
434
- <div>
435
- <h3 class="text-lg font-medium text-cosmic-100 mb-2">Application concrète</h3>
436
- <p class="text-cosmic-200">Dans les prochains jours :<br>
437
- 1. Commencez vos phrases par "Je choisis de..." plutôt que "Je dois..."<br>
438
- 2. Pratiquez 5 minutes de posture affirmée devant un miroir chaque matin<br>
439
- 3. Notez 3 petites victoires quotidiennes</p>
440
- </div>
441
- `;
442
  }
443
 
444
  feather.replace();
 
69
  <div class="bg-cosmic-800/50 rounded-xl p-8 border border-cosmic-700/50 mb-12">
70
  <h2 class="text-2xl font-medium text-cosmic-100 mb-6">1. Formule ta question</h2>
71
  <textarea class="w-full bg-cosmic-700/30 border border-cosmic-700 rounded-lg p-4 text-black mb-4 focus:outline-none focus:ring-2 focus:ring-cosmic-400 focus:border-transparent" rows="4" placeholder="Ex: Quelle attitude adopter pour mon entretien demain ?"></textarea>
72
+ <div class="mb-8">
73
  <h3 class="text-lg text-cosmic-100 mb-3">2. Choisis ton type de lecture</h3>
74
+ <div class="grid sm:grid-cols-2 gap-4">
75
+ <button id="three-cards" class="bg-cosmic-700/30 rounded-lg p-4 border border-cosmic-600/30 hover:border-cosmic-400/50 transition text-left reading-type" data-type="three-cards">
76
+ <div class="flex items-center">
77
+ <div class="w-10 h-10 rounded-lg bg-cosmic-600/50 flex items-center justify-center mr-3">
78
+ <i data-feather="layers" class="text-cosmic-400"></i>
79
+ </div>
80
+ <span class="font-medium text-cosmic-100">Tirage 3 cartes</span>
81
  </div>
82
+ </button>
83
+ <button id="oracle" class="bg-cosmic-700/30 rounded-lg p-4 border border-cosmic-600/30 hover:border-cosmic-400/50 transition text-left reading-type" data-type="oracle">
84
+ <div class="flex items-center">
85
+ <div class="w-10 h-10 rounded-lg bg-cosmic-600/50 flex items-center justify-center mr-3">
86
+ <i data-feather="compass" class="text-cosmic-400"></i>
87
+ </div>
88
+ <span class="font-medium text-cosmic-100">Oracle posture</span>
89
  </div>
90
+ </button>
91
+ <button id="open-question" class="bg-cosmic-700/30 rounded-lg p-4 border border-cosmic-600/30 hover:border-cosmic-400/50 transition text-left reading-type" data-type="open-question">
92
+ <div class="flex items-center">
93
+ <div class="w-10 h-10 rounded-lg bg-cosmic-600/50 flex items-center justify-center mr-3">
94
+ <i data-feather="message-circle" class="text-cosmic-400"></i>
95
+ </div>
96
+ <span class="font-medium text-cosmic-100">Question ouverte</span>
97
+ </div>
98
+ </button>
99
+ <button id="weather" class="bg-cosmic-700/30 rounded-lg p-4 border border-cosmic-600/30 hover:border-cosmic-400/50 transition text-left reading-type" data-type="weather">
100
+ <div class="flex items-center">
101
+ <div class="w-10 h-10 rounded-lg bg-cosmic-600/50 flex items-center justify-center mr-3">
102
+ <i data-feather="cloud" class="text-cosmic-400"></i>
103
+ </div>
104
+ <span class="font-medium text-cosmic-100">Météo symbolique</span>
105
+ </div>
106
+ </button>
107
+ <button id="numerology" class="bg-cosmic-700/30 rounded-lg p-4 border border-cosmic-600/30 hover:border-cosmic-400/50 transition text-left reading-type" data-type="numerology">
108
+ <div class="flex items-center">
109
+ <div class="w-10 h-10 rounded-lg bg-cosmic-600/50 flex items-center justify-center mr-3">
110
+ <i data-feather="hash" class="text-cosmic-400"></i>
111
+ </div>
112
+ <span class="font-medium text-cosmic-100">Numérologie</span>
113
+ </div>
114
+ </button>
115
+ <button id="dream" class="bg-cosmic-700/30 rounded-lg p-4 border border-cosmic-600/30 hover:border-cosmic-400/50 transition text-left reading-type" data-type="dream">
116
+ <div class="flex items-center">
117
+ <div class="w-10 h-10 rounded-lg bg-cosmic-600/50 flex items-center justify-center mr-3">
118
+ <i data-feather="moon" class="text-cosmic-400"></i>
119
+ </div>
120
+ <span class="font-medium text-cosmic-100">Interprétation de rêves</span>
121
+ </div>
122
+ </button>
123
+ <button id="photo" class="bg-cosmic-700/30 rounded-lg p-4 border border-cosmic-600/30 hover:border-cosmic-400/50 transition text-left reading-type" data-type="photo">
124
+ <div class="flex items-center">
125
+ <div class="w-10 h-10 rounded-lg bg-cosmic-600/50 flex items-center justify-center mr-3">
126
+ <i data-feather="camera" class="text-cosmic-400"></i>
127
+ </div>
128
+ <span class="font-medium text-cosmic-100">Lecture photo/paume</span>
129
+ </div>
130
+ </button>
131
+ <button id="loyalty" class="bg-cosmic-700/30 rounded-lg p-4 border border-cosmic-600/30 hover:border-cosmic-400/50 transition text-left reading-type" data-type="loyalty">
132
+ <div class="flex items-center">
133
+ <div class="w-10 h-10 rounded-lg bg-cosmic-600/50 flex items-center justify-center mr-3">
134
+ <i data-feather="gift" class="text-cosmic-600"></i>
135
+ </div>
136
+ <span class="font-medium text-cosmic-100">Fidélité</span>
137
+ </div>
138
+ </button>
139
+ </div>
140
  </div>
141
 
142
  <button id="submit-reading" class="w-full py-4 rounded-full bg-gradient-to-r from-cosmic-400 to-cosmic-600 text-cosmic-900 font-bold text-lg hover:opacity-90 transition cosmic-glow flex items-center justify-center">
 
428
  resultContainer.classList.remove('hidden');
429
 
430
  if (selectedReadingType === 'three-cards') {
431
+ // Generate different responses based on reading type
432
+ let cardsHTML = '';
433
+ let analysisHTML = '';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
434
 
435
+ switch(selectedReadingType) {
436
+ case 'three-cards':
437
+ cardsHTML = `
438
+ <div class="bg-cosmic-700/30 rounded-xl p-4 border border-cosmic-600/30 tarot-card drawing-animation" style="animation-delay: 0.1s;">
439
+ <div class="w-full h-48 bg-cosmic-600/20 rounded-lg mb-3 flex items-center justify-center">
440
+ <i data-feather="image" class="w-12 h-12 text-cosmic-400"></i>
441
+ </div>
442
+ <h3 class="font-medium text-cosmic-100 mb-2 text-center">Passé</h3>
443
+ <p class="text-sm text-cosmic-300 text-center">La Roue de Fortune</p>
444
+ </div>
445
+ <div class="bg-cosmic-700/30 rounded-xl p-4 border border-cosmic-600/30 tarot-card drawing-animation" style="animation-delay: 0.3s;">
446
+ <div class="w-full h-48 bg-cosmic-600/20 rounded-lg mb-3 flex items-center justify-center">
447
+ <i data-feather="image" class="w-12 h-12 text-cosmic-400"></i>
448
+ </div>
449
+ <h3 class="font-medium text-cosmic-100 mb-2 text-center">Présent</h3>
450
+ <p class="text-sm text-cosmic-300 text-center">Le Pendu</p>
451
+ </div>
452
+ <div class="bg-cosmic-700/30 rounded-xl p-4 border border-cosmic-600/30 tarot-card drawing-animation" style="animation-delay: 0.5s;">
453
+ <div class="w-full h-48 bg-cosmic-600/20 rounded-lg mb-3 flex items-center justify-center">
454
+ <i data-feather="image" class="w-12 h-12 text-cosmic-400"></i>
455
+ </div>
456
+ <h3 class="font-medium text-cosmic-100 mb-2 text-center">Action</h3>
457
+ <p class="text-sm text-cosmic-300 text-center">La Force</p>
458
+ </div>
459
+ `;
460
+ analysisHTML = `
461
+ <div>
462
+ <h3 class="text-lg font-medium text-cosmic-100 mb-2">Analyse</h3>
463
+ <p class="text-cosmic-200">Votre situation actuelle montre une période d'attente et de réflexion (Le Pendu). Après une phase de changements rapides (La Roue de Fortune), il est temps de prendre du recul avant d'agir avec détermination (La Force).</p>
464
+ </div>
465
+ <div>
466
+ <h3 class="text-lg font-medium text-cosmic-100 mb-2">Action concrète</h3>
467
+ <p class="text-cosmic-200">Dans les 3 prochains jours, consacrez 30 minutes à visualiser clairement votre objectif avant de passer à l'action. Notez 3 étapes précises pour y parvenir.</p>
468
+ </div>
469
+ `;
470
+ break;
471
+
472
+ case 'oracle':
473
+ cardsHTML = `
474
+ <div class="bg-cosmic-700/30 rounded-xl p-6 border border-cosmic-600/30 w-full tarot-card drawing-animation">
475
+ <div class="w-full h-48 bg-cosmic-600/20 rounded-lg mb-4 flex items-center justify-center">
476
+ <i data-feather="compass" class="w-12 h-12 text-cosmic-400"></i>
477
+ </div>
478
+ <h3 class="text-xl font-medium text-cosmic-100 mb-2 text-center">Posture recommandée</h3>
479
+ <p class="text-lg text-cosmic-400 text-center mb-4 font-medium">Confiance active</p>
480
+ <p class="text-cosmic-200 text-center">Une attitude qui allie assurance et ouverture, sans arrogance ni passivité.</p>
481
+ </div>
482
+ `;
483
+ analysisHTML = `
484
+ <div>
485
+ <h3 class="text-lg font-medium text-cosmic-100 mb-2">Signification</h3>
486
+ <p class="text-cosmic-200">Dans votre situation actuelle, l'univers suggère d'adopter une posture de confiance active. Cela signifie croire en vos capacités tout en restant réceptif aux signes et opportunités.</p>
487
+ </div>
488
+ <div>
489
+ <h3 class="text-lg font-medium text-cosmic-100 mb-2">Application concrète</h3>
490
+ <p class="text-cosmic-200">Dans les prochains jours :<br>
491
+ 1. Commencez vos phrases par "Je choisis de..." plutôt que "Je dois..."<br>
492
+ 2. Pratiquez 5 minutes de posture affirmée devant un miroir chaque matin<br>
493
+ 3. Notez 3 petites victoires quotidiennes</p>
494
+ </div>
495
+ `;
496
+ break;
497
+
498
+ case 'open-question':
499
+ cardsHTML = `
500
+ <div class="bg-cosmic-700/30 rounded-xl p-6 border border-cosmic-600/30 w-full tarot-card drawing-animation">
501
+ <div class="w-full h-48 bg-cosmic-600/20 rounded-lg mb-4 flex items-center justify-center">
502
+ <i data-feather="message-circle" class="w-12 h-12 text-cosmic-400"></i>
503
+ </div>
504
+ <h3 class="text-xl font-medium text-cosmic-100 mb-2 text-center">Réponse nuancée</h3>
505
+ <p class="text-lg text-cosmic-400 text-center mb-4 font-medium">"L'action précède la clarté"</p>
506
+ <p class="text-cosmic-200 text-center">Parfois, c'est en agissant que la réponse se révèle.</p>
507
+ </div>
508
+ `;
509
+ analysisHTML = `
510
+ <div>
511
+ <h3 class="text-lg font-medium text-cosmic-100 mb-2">Interprétation</h3>
512
+ <p class="text-cosmic-200">Votre question appelle une réponse complexe qui nécessite une approche progressive. La clarté viendra avec l'expérience plutôt que par la réflexion seule.</p>
513
+ </div>
514
+ <div>
515
+ <h3 class="text-lg font-medium text-cosmic-100 mb-2">Conseils</h3>
516
+ <p class="text-cosmic-200">1. Identifiez une petite action concrète à tester cette semaine<br>
517
+ 2. Notez vos observations après chaque essai<br>
518
+ 3. Adaptez votre approche progressivement</p>
519
+ </div>
520
+ `;
521
+ break;
522
+
523
+ case 'weather':
524
+ cardsHTML = `
525
+ <div class="bg-cosmic-700/30 rounded-xl p-6 border border-cosmic-600/30 w-full tarot-card drawing-animation">
526
+ <div class="w-full h-48 bg-cosmic-600/20 rounded-lg mb-4 flex items-center justify-center">
527
+ <i data-feather="cloud" class="w-12 h-12 text-cosmic-400"></i>
528
+ </div>
529
+ <h3 class="text-xl font-medium text-cosmic-100 mb-2 text-center">Météo énergétique</h3>
530
+ <p class="text-lg text-cosmic-400 text-center mb-4 font-medium">Nuages et éclaircies</p>
531
+ <p class="text-cosmic-200 text-center">Alternance de moments flous et d'illuminations soudaines.</p>
532
+ </div>
533
+ `;
534
+ analysisHTML = `
535
+ <div>
536
+ <h3 class="text-lg font-medium text-cosmic-100 mb-2">Prévisions</h3>
537
+ <p class="text-cosmic-200">Les prochains jours seront marqués par une énergie changeante. Préparez-vous à des moments de confusion qui pourraient déboucher sur des prises de conscience inattendues.</p>
538
+ </div>
539
+ <div>
540
+ <h3 class="text-lg font-medium text-cosmic-100 mb-2">Recommandations</h3>
541
+ <p class="text-cosmic-200">1. Gardez un carnet pour noter les idées qui surgissent<br>
542
+ 2. Soyez flexible dans vos plans<br>
543
+ 3. Profitez des moments clairs pour avancer</p>
544
+ </div>
545
+ `;
546
+ break;
547
+
548
+ // Additional cases for other reading types...
549
+ case 'numerology':
550
+ cardsHTML = `
551
+ <div class="bg-cosmic-700/30 rounded-xl p-6 border border-cosmic-600/30 w-full tarot-card drawing-animation">
552
+ <div class="w-full h-48 bg-cosmic-600/20 rounded-lg mb-4 flex items-center justify-center">
553
+ <i data-feather="hash" class="w-12 h-12 text-cosmic-400"></i>
554
+ </div>
555
+ <h3 class="text-xl font-medium text-cosmic-100 mb-2 text-center">Votre nombre</h3>
556
+ <p class="text-4xl text-cosmic-400 text-center mb-4 font-medium">7</p>
557
+ <p class="text-cosmic-200 text-center">Le chercheur, l'analytique, le spirituel.</p>
558
+ </div>
559
+ `;
560
+ analysisHTML = `
561
+ <div>
562
+ <h3 class="text-lg font-medium text-cosmic-100 mb-2">Signification</h3>
563
+ <p class="text-cosmic-200">Le 7 représente la recherche de vérité et l'introspection. C'est un nombre qui invite à l'étude et à la réflexion profonde avant d'agir.</p>
564
+ </div>
565
+ <div>
566
+ <h3 class="text-lg font-medium text-cosmic-100 mb-2">Application</h3>
567
+ <p class="text-cosmic-200">1. Prenez du temps pour méditer ou étudier cette semaine<br>
568
+ 2. Évitez les décisions impulsives<br>
569
+ 3. Recherchez des réponses dans les détails</p>
570
+ </div>
571
+ `;
572
+ break;
573
+
574
+ case 'dream':
575
+ cardsHTML = `
576
+ <div class="bg-cosmic-700/30 rounded-xl p-6 border border-cosmic-600/30 w-full tarot-card drawing-animation">
577
+ <div class="w-full h-48 bg-cosmic-600/20 rounded-lg mb-4 flex items-center justify-center">
578
+ <i data-feather="moon" class="w-12 h-12 text-cosmic-400"></i>
579
+ </div>
580
+ <h3 class="text-xl font-medium text-cosmic-100 mb-2 text-center">Symboles clés</h3>
581
+ <p class="text-lg text-cosmic-400 text-center mb-4 font-medium">Eau · Pont · Chaussures</p>
582
+ <p class="text-cosmic-200 text-center">Émotions, transition et cheminement.</p>
583
+ </div>
584
+ `;
585
+ analysisHTML = `
586
+ <div>
587
+ <h3 class="text-lg font-medium text-cosmic-100 mb-2">Interprétation</h3>
588
+ <p class="text-cosmic-200">Votre rêve suggère que vous traversez une période de transition émotionnelle. Les éléments symboliques indiquent un processus de changement dans votre façon d'avancer.</p>
589
+ </div>
590
+ <div>
591
+ <h3 class="text-lg font-medium text-cosmic-100 mb-2">Piste d'action</h3>
592
+ <p class="text-cosmic-200">1. Notez vos rêves au réveil pendant 3 jours<br>
593
+ 2. Identifiez les émotions associées<br>
594
+ 3. Cherchez des parallèles dans votre vie éveillée</p>
595
+ </div>
596
+ `;
597
+ break;
598
+
599
+ case 'photo':
600
+ cardsHTML = `
601
+ <div class="bg-cosmic-700/30 rounded-xl p-6 border border-cosmic-600/30 w-full tarot-card drawing-animation">
602
+ <div class="w-full h-48 bg-cosmic-600/20 rounded-lg mb-4 flex items-center justify-center">
603
+ <i data-feather="camera" class="w-12 h-12 text-cosmic-400"></i>
604
+ </div>
605
+ <h3 class="text-xl font-medium text-cosmic-100 mb-2 text-center">Lecture photo</h3>
606
+ <p class="text-lg text-cosmic-400 text-center mb-4 font-medium">Énergie dominante: Feu</p>
607
+ <p class="text-cosmic-200 text-center">Passion, créativité et action.</p>
608
+ </div>
609
+ `;
610
+ analysisHTML = `
611
+ <div>
612
+ <h3 class="text-lg font-medium text-cosmic-100 mb-2">Analyse</h3>
613
+ <p class="text-cosmic-200">L'énergie feu domine dans votre image, suggérant une période de forte motivation et d'initiative. Cependant, prenez garde à ne pas vous épuiser.</p>
614
+ </div>
615
+ <div>
616
+ <h3 class="text-lg font-medium text-cosmic-100 mb-2">Conseils</h3>
617
+ <p class="text-cosmic-200">1. Canalisez votre énergie vers un projet créatif<br>
618
+ 2. Alternez périodes d'action et de repos<br>
619
+ 3. Évitez les conflits inutiles</p>
620
+ </div>
621
+ `;
622
+ break;
623
+
624
+ case 'loyalty':
625
+ cardsHTML = `
626
+ <div class="bg-cosmic-700/30 rounded-xl p-6 border border-cosmic-600/30 w-full tarot-card drawing-animation">
627
+ <div class="w-full h-48 bg-cosmic-600/20 rounded-lg mb-4 flex items-center justify-center">
628
+ <i data-feather="gift" class="w-12 h-12 text-cosmic-600"></i>
629
+ </div>
630
+ <h3 class="text-xl font-medium text-cosmic-100 mb-2 text-center">Offre fidélité</h3>
631
+ <p class="text-lg text-cosmic-400 text-center mb-4 font-medium">1 lecture offerte</p>
632
+ <p class="text-cosmic-200 text-center">Après 10 lectures, la 11ème est offerte.</p>
633
+ </div>
634
+ `;
635
+ analysisHTML = `
636
+ <div>
637
+ <h3 class="text-lg font-medium text-cosmic-100 mb-2">Programme fidélité</h3>
638
+ <p class="text-cosmic-200">Nous récompensons votre fidélité avec une lecture premium gratuite après 10 consultations. Votre progression est sauvegardée dans votre compte.</p>
639
+ </div>
640
+ <div>
641
+ <h3 class="text-lg font-medium text-cosmic-100 mb-2">Avantages</h3>
642
+ <p class="text-cosmic-200">1. Lectures premium gratuites<br>
643
+ 2. Accès à des contenus exclusifs<br>
644
+ 3. Remises spéciales pour les fidèles</p>
645
+ </div>
646
+ `;
647
+ break;
648
+ }
649
 
650
+ document.querySelector('#result-container .flex.flex-col').innerHTML = cardsHTML;
651
+ document.querySelector('#result-container .space-y-6').innerHTML = analysisHTML;
 
 
 
 
 
 
 
 
 
 
 
652
  }
653
 
654
  feather.replace();