Files
XIP/maquettes/shop/shop3-.svg
Kerboul cfa2eadec9
Some checks failed
Deploy XIP / deploy (push) Failing after 37s
feat: conformite enonce - explorer, favoris, stats perso, tests, slots
Fonctionnel
- Backend messages : GET /api/messages/:id (detail) + recherche (q),
  pagination par curseur (before/limit) avec enveloppe { items, nextCursor,
  hasMore } ; le flux temps reel garde l'ancien format quand aucun parametre.
- Explorer (/explorer) : catalogue distant, recherche debouncee + annulable
  (AbortController), filtre, defilement infini, etat garde (keep-alive).
- Details par id : /message/:id et /shop/p/:id (consomment route.params).
- Favoris (/favoris) : liste perso persistee en localStorage, notation
  (note/rating/statut) via modale, refletee partout (bouton favori).
- Mes stats (/mes-stats) : agregats derives des favoris (note moyenne, top
  pays/auteurs, statuts), auto-mis a jour, route gardee si liste vide.
- Routeur : pages secondaires en lazy-load + repli, garde beforeEnter.

Technique
- Slots : PrefSection (slot defaut + slot nomme) enveloppe les 5 sections
  "Mes Persos" ; Modal (Teleport + slots).
- v-model custom : SearchBox (defineModel + debounce).
- Directive custom : v-click-outside.
- Tests Vitest : 25 tests (etat, fonctions, composants), ~86% du code metier.
- Retrait d'Ionic (inutilise). Script typecheck backend ; tsconfig @types/bun.
- Correctif type : garde stockLimit nullable dans l'achat (catalog.ts).
- README complet (URL, stack, run, tests, secrets, deploiement, mention IA).
2026-05-31 23:59:34 +02:00

162 lines
13 KiB
XML

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720">
<defs>
<style>
.sans { font-family: Arial, Helvetica, sans-serif; }
.mono { font-family: 'Courier New', Courier, monospace; }
</style>
<filter id="glow-b"><feGaussianBlur stdDeviation="4"/></filter>
<filter id="glow-g"><feGaussianBlur stdDeviation="3"/></filter>
</defs>
<!-- FOND -->
<rect width="1280" height="720" fill="#090910"/>
<!-- ════════════════════ HEADER ════════════════════ -->
<rect x="0" y="0" width="1280" height="58" fill="#0e0e18" stroke="#1a1a28" stroke-width="1"/>
<text x="20" y="28" fill="#0077aa" class="sans" font-size="20" font-weight="bold" filter="url(#glow-b)" opacity="0.4">XIP</text>
<text x="20" y="28" fill="#00aaee" class="sans" font-size="20" font-weight="bold">XIP</text>
<line x1="52" y1="10" x2="52" y2="48" stroke="#1e1e2a" stroke-width="1"/>
<text x="64" y="24" fill="#c0c0d8" class="sans" font-size="16" font-weight="bold">Shop</text>
<text x="64" y="43" fill="#383858" class="sans" font-size="10">Personnalisation · Acces · Publicite</text>
<text x="280" y="30" fill="#2a2a44" class="sans" font-size="11">Catalogue</text>
<text x="342" y="30" fill="#1a1a33" class="sans" font-size="11">/</text>
<text x="356" y="30" fill="#5566aa" class="sans" font-size="11" font-weight="bold">Abonnement NoAds</text>
<text x="1148" y="22" fill="#383858" class="sans" font-size="10" text-anchor="end">Connecte :</text>
<text x="1148" y="40" fill="#5555aa" class="mono" font-size="11" text-anchor="end">192.168.1.45</text>
<text x="1260" y="22" fill="#3a5a2a" class="sans" font-size="10" text-anchor="end">Solde :</text>
<text x="1260" y="40" fill="#44aa44" class="sans" font-size="11" text-anchor="end" font-weight="bold">24.50 €</text>
<line x1="0" y1="58" x2="1280" y2="58" stroke="#1a1a28" stroke-width="1"/>
<!-- ════════════════════ LEFT NAV ════════════════════ -->
<rect x="0" y="58" width="185" height="662" fill="#0c0c12" stroke="#181822" stroke-width="1"/>
<line x1="184" y1="58" x2="184" y2="720" stroke="#161620" stroke-width="2"/>
<text x="16" y="84" fill="#2a2a44" class="sans" font-size="9" letter-spacing="2">CATEGORIES</text>
<text x="20" y="116" fill="#4a4a6a" class="sans" font-size="13">Tout voir</text>
<text x="20" y="150" fill="#4a4a6a" class="sans" font-size="13">Publicite</text>
<!-- Active: Abonnements -->
<rect x="3" y="160" width="179" height="36" fill="#181828" stroke="#242438" rx="3"/>
<rect x="3" y="160" width="3" height="36" fill="#4455cc" rx="2"/>
<text x="20" y="183" fill="#8899dd" class="sans" font-size="13" font-weight="bold">Abonnements</text>
<text x="20" y="219" fill="#4a4a6a" class="sans" font-size="13">Cosmetiques</text>
<text x="20" y="254" fill="#cc3322" class="sans" font-size="13">Promotions</text>
<line x1="10" y1="268" x2="175" y2="268" stroke="#181822" stroke-width="1"/>
<text x="16" y="290" fill="#2a2a44" class="sans" font-size="9" letter-spacing="2">MON COMPTE</text>
<text x="20" y="314" fill="#4a4a6a" class="sans" font-size="13">Mes achats</text>
<text x="20" y="346" fill="#4a4a6a" class="sans" font-size="13">Paiement</text>
<!-- Statut abonnement -->
<rect x="8" y="540" width="169" height="100" fill="#111116" stroke="#1e1e26" rx="4"/>
<text x="93" y="558" fill="#2a2a44" text-anchor="middle" class="sans" font-size="9">MON ABONNEMENT</text>
<line x1="16" y1="564" x2="170" y2="564" stroke="#1a1a22" stroke-width="1"/>
<text x="93" y="586" fill="#cc3322" text-anchor="middle" class="sans" font-size="11" font-weight="bold">Inactif</text>
<text x="93" y="604" fill="#444455" text-anchor="middle" class="sans" font-size="10">Aucun abonnement actif</text>
<rect x="20" y="616" width="146" height="16" fill="#1a2200" stroke="#2a3800" rx="8"/>
<text x="93" y="628" fill="#446644" text-anchor="middle" class="sans" font-size="9">Souscrire pour activer</text>
<!-- ════════════════════ CONTENU ════════════════════ -->
<!-- ── OFFRE PROMO ANNUEL ── -->
<rect x="193" y="66" width="1079" height="44" fill="#080e18" stroke="#224488" stroke-width="1" rx="4"/>
<text x="220" y="84" fill="#4466aa" class="sans" font-size="11" font-weight="bold">OFFRE ANNUELLE</text>
<text x="340" y="84" fill="#334466" class="sans" font-size="10">Economisez 19.89 € par rapport au mensuel — 1er mois OFFERT a la souscription</text>
<text x="900" y="85" fill="#44aaff" class="sans" font-size="11">En savoir plus</text>
<!-- ── TITRE ── -->
<text x="200" y="136" fill="#7788aa" class="sans" font-size="10">Abonnements /</text>
<text x="278" y="136" fill="#aabbdd" class="sans" font-size="12" font-weight="bold">NoAds</text>
<text x="200" y="154" fill="#404055" class="sans" font-size="10">Supprimez toutes les publicites du chat.</text>
<!-- ══════════════════════════════════════════
CARTE MENSUEL (gauche)
x=193, y=162, w=510, h=430
══════════════════════════════════════════ -->
<rect x="193" y="162" width="510" height="430" fill="#101018" stroke="#1e1e2c" rx="8"/>
<!-- En-tete carte -->
<rect x="193" y="162" width="510" height="60" fill="#131322" rx="8"/>
<line x1="193" y1="220" x2="703" y2="220" stroke="#1e1e30" stroke-width="1"/>
<text x="448" y="188" fill="#aabbdd" text-anchor="middle" class="sans" font-size="16" font-weight="bold">Mensuel</text>
<text x="448" y="208" fill="#4a4a6a" text-anchor="middle" class="sans" font-size="10">Sans engagement</text>
<!-- Prix mensuel -->
<text x="340" y="264" fill="#8888aa" class="sans" font-size="14">a partir de</text>
<text x="340" y="300" fill="#c8c8e8" class="sans" font-size="36" font-weight="bold">4.99</text>
<text x="460" y="300" fill="#c8c8e8" class="sans" font-size="20" font-weight="bold"></text>
<text x="340" y="320" fill="#444455" class="sans" font-size="11">/mois · facture chaque mois</text>
<!-- Features liste -->
<line x1="210" y1="338" x2="695" y2="338" stroke="#1a1a2a" stroke-width="1"/>
<text x="220" y="362" fill="#3a5a3a" class="sans" font-size="12">+ Toutes les publicites masquees</text>
<text x="220" y="383" fill="#3a5a3a" class="sans" font-size="12">+ Bande gauche entierement vide</text>
<text x="220" y="404" fill="#3a5a3a" class="sans" font-size="12">+ Annulable a tout moment</text>
<text x="220" y="425" fill="#3a5a3a" class="sans" font-size="12">+ Actif immediatement apres paiement</text>
<text x="220" y="446" fill="#3a4a5a" class="sans" font-size="12">+ Navigation fluide sans interruption</text>
<text x="220" y="467" fill="#884422" class="sans" font-size="10">/ 1 abonnement actif par compte max</text>
<text x="220" y="483" fill="#884422" class="sans" font-size="10">/ Pas de remboursement partiel si annulation</text>
<text x="220" y="499" fill="#884422" class="sans" font-size="10">/ Ne s'applique pas aux messages sponsorises</text>
<!-- Bouton mensuel -->
<rect x="220" y="520" width="266" height="46" fill="#224488" rx="23"/>
<rect x="221" y="521" width="264" height="44" fill="none" stroke="#4466cc" stroke-width="0.5" rx="22"/>
<text x="353" y="548" fill="#ffffff" text-anchor="middle" class="sans" font-size="13" font-weight="bold">Souscrire — 4.99 €/mois</text>
<!-- ══════════════════════════════════════════
CARTE ANNUEL (droite) — RECOMMANDEE
x=711, y=162, w=561, h=430
══════════════════════════════════════════ -->
<rect x="711" y="162" width="561" height="430" fill="#0e1020" stroke="#334488" stroke-width="2" rx="8"/>
<!-- Badge RECOMMANDE en haut -->
<rect x="855" y="151" width="130" height="22" fill="#224488" rx="11"/>
<rect x="856" y="152" width="128" height="20" fill="#2a55bb" rx="10"/>
<text x="920" y="166" fill="#ffffff" text-anchor="middle" class="sans" font-size="10" font-weight="bold">RECOMMANDE</text>
<!-- En-tete carte annuelle -->
<rect x="711" y="162" width="561" height="60" fill="#131530" rx="8"/>
<line x1="711" y1="220" x2="1272" y2="220" stroke="#2030500" stroke-width="1"/>
<text x="991" y="188" fill="#aabbee" text-anchor="middle" class="sans" font-size="16" font-weight="bold">Annuel</text>
<text x="991" y="208" fill="#4455aa" text-anchor="middle" class="sans" font-size="10">Engagement 12 mois · Meilleure valeur</text>
<!-- Prix annuel + économie -->
<text x="740" y="250" fill="#6677aa" class="sans" font-size="11" text-decoration="line-through">59.88 € /an</text>
<rect x="810" y="238" width="80" height="18" fill="#113311" stroke="#226622" rx="9"/>
<text x="850" y="251" fill="#44cc44" text-anchor="middle" class="sans" font-size="9" font-weight="bold">-33% PROMO</text>
<text x="740" y="300" fill="#aabbee" class="sans" font-size="36" font-weight="bold" filter="url(#glow-b)" opacity="0.3">39.99</text>
<text x="740" y="300" fill="#aabbee" class="sans" font-size="36" font-weight="bold">39.99</text>
<text x="872" y="300" fill="#aabbee" class="sans" font-size="20" font-weight="bold"></text>
<text x="740" y="320" fill="#445566" class="sans" font-size="11">/an · soit 3.33 €/mois (economisez 19.89 €)</text>
<!-- 1er mois offert badge -->
<rect x="930" y="270" width="148" height="46" fill="#112233" stroke="#336688" rx="4"/>
<text x="1004" y="290" fill="#55aadd" text-anchor="middle" class="sans" font-size="11" font-weight="bold">1er MOIS</text>
<text x="1004" y="308" fill="#44aacc" text-anchor="middle" class="sans" font-size="12" font-weight="bold">OFFERT</text>
<!-- Features annuel -->
<line x1="728" y1="338" x2="1260" y2="338" stroke="#1a2a4a" stroke-width="1"/>
<text x="735" y="362" fill="#3a5a3a" class="sans" font-size="12">+ Tout ce qui est inclus dans Mensuel</text>
<text x="735" y="383" fill="#4466aa" class="sans" font-size="12">+ 1 mois gratuit offert a la souscription</text>
<text x="735" y="404" fill="#4466aa" class="sans" font-size="12">+ Acces prioritaire aux nouvelles fonctions</text>
<text x="735" y="425" fill="#4466aa" class="sans" font-size="12">+ Badge exclusif a cote de votre IP</text>
<text x="735" y="446" fill="#4466aa" class="sans" font-size="12">+ Support prioritaire par messagerie</text>
<text x="735" y="467" fill="#884422" class="sans" font-size="10">/ Engagement annuel non remboursable</text>
<text x="735" y="483" fill="#884422" class="sans" font-size="10">/ Renouvellement automatique sauf resiliation</text>
<text x="735" y="499" fill="#884422" class="sans" font-size="10">/ Resiliation possible 30j avant l'echeance</text>
<!-- Bouton annuel -->
<rect x="735" y="520" width="306" height="46" fill="#1a3a7a" rx="23"/>
<rect x="736" y="521" width="304" height="44" fill="none" stroke="#4477cc" stroke-width="1" rx="22"/>
<text x="888" y="548" fill="#ffffff" text-anchor="middle" class="sans" font-size="13" font-weight="bold">Souscrire — 39.99 €/an</text>
<!-- ── COMPARATIF FEATURES ── -->
<rect x="193" y="608" width="1079" height="80" fill="#0c0c14" stroke="#181826" rx="6"/>
<text x="210" y="628" fill="#555577" class="sans" font-size="10" font-weight="bold">Comparatif des formules</text>
<line x1="210" y1="634" x2="1262" y2="634" stroke="#181826" stroke-width="1"/>
<!-- Headers -->
<text x="530" y="650" fill="#4a4a6a" text-anchor="middle" class="sans" font-size="10">MENSUEL</text>
<text x="780" y="650" fill="#6677aa" text-anchor="middle" class="sans" font-size="10">ANNUEL</text>
<!-- Colonnes -->
<text x="210" y="668" fill="#404055" class="sans" font-size="10">Pubs masquees</text>
<text x="530" y="668" fill="#44aa44" text-anchor="middle" class="sans" font-size="11" font-weight="bold">Oui</text>
<text x="780" y="668" fill="#44aa44" text-anchor="middle" class="sans" font-size="11" font-weight="bold">Oui</text>
<text x="870" y="668" fill="#404055" class="sans" font-size="10">Badge exclusif</text>
<text x="1080" y="668" fill="#444455" text-anchor="middle" class="sans" font-size="11">Non</text>
<text x="1200" y="668" fill="#4466aa" text-anchor="middle" class="sans" font-size="11" font-weight="bold">Oui</text>
<text x="210" y="682" fill="#404055" class="sans" font-size="10">Prix mensuel</text>
<text x="530" y="682" fill="#c8c8e0" text-anchor="middle" class="sans" font-size="10">4.99 €</text>
<text x="780" y="682" fill="#44cc44" text-anchor="middle" class="sans" font-size="10">3.33 € !</text>
<!-- FOOTER -->
<rect x="0" y="696" width="1280" height="24" fill="#080810" stroke="#141420" stroke-width="1"/>
<text x="640" y="712" fill="#222233" text-anchor="middle" class="sans" font-size="9">XIP Shop · L'abonnement se renouvelle automatiquement · Annulable dans Compte > Abonnement · CGV sur xip.local</text>
</svg>