anto/XIP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add SVG designs for shop interface: shop3 and shop4

Browse Source 
- Created shop3.svg featuring a subscription model with monthly and annual options, including a comparison of features.
- Developed shop4.svg focusing on cosmetic options, showcasing pets and styles with a bundle offer.
This commit is contained in:
arussac
2026-05-23 17:49:22 +02:00
parent d40ed210b4
commit 2d00e78a9f
4 changed files with 844 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

239
maquettes/shop/shop4.svg Normal file
View File

@@ -0,0 +1,239 @@
<?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-gold"><feGaussianBlur stdDeviation="5"/></filter>
<filter id="glow-soft"><feGaussianBlur stdDeviation="3"/></filter>
<filter id="glow-pet"><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-soft)" 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="#aa9944" class="sans" font-size="11" font-weight="bold">Cosmetiques</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>
<text x="20" y="184" fill="#4a4a6a" class="sans" font-size="13">Abonnements</text>
<!-- Active: Cosmetiques -->
<rect x="3" y="194" width="179" height="36" fill="#181828" stroke="#242438" rx="3"/>
<rect x="3" y="194" width="3" height="36" fill="#cc9900" rx="2"/>
<text x="20" y="217" fill="#ddaa55" class="sans" font-size="13" font-weight="bold">Cosmetiques</text>
<text x="20" y="253" fill="#cc3322" class="sans" font-size="13">Promotions</text>
<line x1="10" y1="267" x2="175" y2="267" stroke="#181822" stroke-width="1"/>
<text x="16" y="289" fill="#2a2a44" class="sans" font-size="9" letter-spacing="2">MON COMPTE</text>
<text x="20" y="313" fill="#4a4a6a" class="sans" font-size="13">Mes achats</text>
<text x="20" y="345" fill="#4a4a6a" class="sans" font-size="13">Paiement</text>
<!-- Cosmetics actifs dans nav -->
<rect x="8" y="510" width="169" height="130" fill="#111116" stroke="#1e1e26" rx="4"/>
<text x="93" y="528" fill="#2a2a44" text-anchor="middle" class="sans" font-size="9">MES COSMETIQUES</text>
<line x1="16" y1="534" x2="170" y2="534" stroke="#1a1a22" stroke-width="1"/>
<text x="20" y="553" fill="#555566" class="sans" font-size="10">Style :</text>
<text x="93" y="553" fill="#cc3322" class="sans" font-size="10">Aucun actif</text>
<text x="20" y="572" fill="#555566" class="sans" font-size="10">Pets :</text>
<text x="93" y="572" fill="#cc3322" class="sans" font-size="10">0 / 3 actifs</text>
<line x1="16" y1="584" x2="170" y2="584" stroke="#1a1a22" stroke-width="1"/>
<text x="93" y="603" fill="#333344" text-anchor="middle" class="sans" font-size="9">Pets disponibles :</text>
<rect x="16" y="610" width="28" height="28" fill="#101014" stroke="#1e1e26" rx="3"/>
<text x="30" y="629" fill="#222230" text-anchor="middle" class="sans" font-size="16">+</text>
<rect x="50" y="610" width="28" height="28" fill="#101014" stroke="#1e1e26" rx="3"/>
<text x="64" y="629" fill="#222230" text-anchor="middle" class="sans" font-size="16">+</text>
<rect x="84" y="610" width="28" height="28" fill="#101014" stroke="#1e1e26" rx="3"/>
<text x="98" y="629" fill="#222230" text-anchor="middle" class="sans" font-size="16">+</text>
<text x="93" y="634" fill="#222230" text-anchor="middle" class="sans" font-size="8">0/3 slots</text>
<!-- ════════════════════ CONTENU PRINCIPAL ════════════════════ -->
<!-- ── APERCU GLOBAL (preview barre en haut) ── -->
<rect x="193" y="66" width="1079" height="78" fill="#0c0c10" stroke="#1e1e28" rx="6"/>
<!-- Titre preview -->
<text x="210" y="84" fill="#555577" class="sans" font-size="10" font-weight="bold">APERCU — Votre nom dans le chat</text>
<line x1="210" y1="90" x2="1262" y2="90" stroke="#181822" stroke-width="0.5"/>
<!-- Preview normal -->
<text x="220" y="108" fill="#404055" class="sans" font-size="9">Sans cosmetique</text>
<text x="220" y="124" fill="#505070" class="mono" font-size="13">192.168.1.45</text>
<!-- Preview style doré -->
<text x="440" y="108" fill="#404055" class="sans" font-size="9">Avec Style Dore</text>
<text x="440" y="124" fill="#aa8800" class="mono" font-size="13" font-weight="bold" filter="url(#glow-gold)" opacity="0.7">192.168.1.45</text>
<text x="440" y="124" fill="#ffdd44" class="mono" font-size="13" font-weight="bold">192.168.1.45</text>
<!-- Preview pet -->
<text x="660" y="108" fill="#404055" class="sans" font-size="9">Avec Pet (coeur)</text>
<text x="660" y="124" fill="#33aa66" class="sans" font-size="15">&#9829;</text>
<text x="682" y="124" fill="#505070" class="mono" font-size="13">192.168.1.45</text>
<text x="810" y="124" fill="#33aa66" class="sans" font-size="15">&#9829;</text>
<!-- Preview les deux -->
<text x="880" y="108" fill="#404055" class="sans" font-size="9">Style Dore + Pet etoile</text>
<text x="880" y="124" fill="#cc8800" class="sans" font-size="15">&#9733;</text>
<text x="902" y="124" fill="#aa8800" class="mono" font-size="13" font-weight="bold" filter="url(#glow-gold)" opacity="0.8">192.168.1.45</text>
<text x="902" y="124" fill="#ffdd44" class="mono" font-size="13" font-weight="bold">192.168.1.45</text>
<text x="1048" y="124" fill="#cc8800" class="sans" font-size="15">&#9733;</text>
<!-- ════════════════════════════════════════════
SECTION GAUCHE : STYLE DORE
x=193, y=152, w=520, h=490
════════════════════════════════════════════ -->
<rect x="193" y="152" width="520" height="490" fill="#100e04" stroke="#2a2000" rx="6"/>
<!-- En-tete section -->
<rect x="193" y="152" width="520" height="48" fill="#181400" stroke="#332200" rx="6"/>
<line x1="193" y1="198" x2="713" y2="198" stroke="#281e00" stroke-width="1"/>
<text x="290" y="174" fill="#cc9900" class="sans" font-size="16" font-weight="bold">Style Dore</text>
<text x="398" y="174" fill="#886600" class="sans" font-size="10">Permanent · Unique</text>
<!-- Badge stock -->
<rect x="548" y="159" width="140" height="22" fill="#331a00" stroke="#664400" rx="4"/>
<text x="618" y="174" fill="#cc7700" text-anchor="middle" class="sans" font-size="9" font-weight="bold">STOCK LIMITE : 43 / 50</text>
<!-- Barre de progression stock -->
<rect x="210" y="208" width="486" height="10" fill="#111108" stroke="#221a00" rx="5"/>
<rect x="210" y="208" width="418" height="10" fill="#884400" rx="5"/>
<rect x="210" y="208" width="418" height="10" fill="none" stroke="#aa6600" stroke-width="0.5" rx="5" opacity="0.6"/>
<text x="700" y="218" fill="#664400" class="sans" font-size="8">86%</text>
<!-- Comparatif avant/apres -->
<text x="260" y="242" fill="#334433" class="sans" font-size="9">AVANT</text>
<text x="450" y="242" fill="#554433" class="sans" font-size="9">APRES</text>
<rect x="210" y="250" width="200" height="44" fill="#0c0c10" stroke="#161620" rx="4"/>
<text x="310" y="277" fill="#555566" text-anchor="middle" class="mono" font-size="14">192.168.1.45</text>
<rect x="420" y="250" width="272" height="44" fill="#120e00" stroke="#332200" rx="4"/>
<text x="556" y="272" fill="#886600" text-anchor="middle" class="mono" font-size="14" font-weight="bold" filter="url(#glow-gold)" opacity="0.8">192.168.1.45</text>
<text x="556" y="272" fill="#ffee66" text-anchor="middle" class="mono" font-size="14" font-weight="bold">192.168.1.45</text>
<!-- Description -->
<text x="210" y="320" fill="#665500" class="sans" font-size="11">Votre adresse IP s'affiche dans une couleur doree</text>
<text x="210" y="337" fill="#665500" class="sans" font-size="11">brillante avec un subtil effet lumineux, visible par</text>
<text x="210" y="354" fill="#665500" class="sans" font-size="11">tous les participants du chat.</text>
<!-- Features -->
<text x="210" y="380" fill="#3a5a3a" class="sans" font-size="11">+ Couleur or avec effet de lueur</text>
<text x="210" y="397" fill="#3a5a3a" class="sans" font-size="11">+ Visible de tous dans le chat public</text>
<text x="210" y="414" fill="#3a5a3a" class="sans" font-size="11">+ Permanant, sans abonnement</text>
<text x="210" y="431" fill="#3a5a3a" class="sans" font-size="11">+ Remplacable par un autre style</text>
<text x="210" y="452" fill="#884422" class="sans" font-size="10">/ 1 seul style actif a la fois</text>
<text x="210" y="468" fill="#884422" class="sans" font-size="10">/ Non remboursable apres activation</text>
<text x="210" y="484" fill="#884422" class="sans" font-size="10">/ Stock definitif : 50 exemplaires disponibles</text>
<!-- Prix + bouton -->
<text x="210" y="530" fill="#ffdd00" class="sans" font-size="28" font-weight="bold" filter="url(#glow-gold)" opacity="0.4">9.99 €</text>
<text x="210" y="530" fill="#ffdd00" class="sans" font-size="28" font-weight="bold">9.99 €</text>
<text x="210" y="548" fill="#665500" class="sans" font-size="9">Achat unique · Permanent</text>
<rect x="210" y="558" width="280" height="46" fill="#664400" rx="23"/>
<rect x="211" y="559" width="278" height="44" fill="none" stroke="#cc8800" stroke-width="1" rx="22"/>
<text x="350" y="586" fill="#ffdd00" text-anchor="middle" class="sans" font-size="13" font-weight="bold">Acheter le Style Dore</text>
<!-- ════════════════════════════════════════════
SECTION DROITE : PETS
x=721, y=152, w=551, h=490
════════════════════════════════════════════ -->
<rect x="721" y="152" width="551" height="490" fill="#060c08" stroke="#0e2010" rx="6"/>
<!-- En-tete section -->
<rect x="721" y="152" width="551" height="48" fill="#081410" stroke="#102018" rx="6"/>
<line x1="721" y1="198" x2="1272" y2="198" stroke="#0e1e14" stroke-width="1"/>
<text x="818" y="174" fill="#44cc88" class="sans" font-size="16" font-weight="bold">Pets de Nom</text>
<text x="940" y="174" fill="#226644" class="sans" font-size="10">7.99 € / pet · Max 3 actifs</text>
<!-- Badge NEW -->
<rect x="1148" y="159" width="66" height="22" fill="#113322" stroke="#226644" rx="4"/>
<text x="1181" y="174" fill="#44cc88" text-anchor="middle" class="sans" font-size="9" font-weight="bold">NOUVEAU</text>
<!-- GRILLE DES PETS : 3 cols x 3 rows -->
<!-- Pet 1 — Coeur (selected) -->
<rect x="733" y="208" width="158" height="80" fill="#0a1810" stroke="#226644" stroke-width="2" rx="5"/>
<text x="812" y="254" fill="#33aa66" text-anchor="middle" class="sans" font-size="32">&#9829;</text>
<text x="812" y="278" fill="#33aa66" text-anchor="middle" class="sans" font-size="9" font-weight="bold">Coeur</text>
<rect x="812" y="208" width="0" height="0"/>
<!-- Selection marker -->
<circle cx="877" cy="214" r="7" fill="#226644" stroke="#44aa66" stroke-width="1"/>
<text x="877" y="218" fill="#44ff88" text-anchor="middle" class="sans" font-size="8" font-weight="bold">✓</text>
<!-- Pet 2 — Etoile -->
<rect x="899" y="208" width="158" height="80" fill="#101008" stroke="#332200" stroke-width="1" rx="5"/>
<text x="978" y="254" fill="#cc8800" text-anchor="middle" class="sans" font-size="32">&#9733;</text>
<text x="978" y="278" fill="#665500" text-anchor="middle" class="sans" font-size="9">Etoile</text>
<!-- Pet 3 — Croix de diamant -->
<rect x="1065" y="208" width="158" height="80" fill="#101008" stroke="#222230" stroke-width="1" rx="5"/>
<text x="1144" y="254" fill="#4488cc" text-anchor="middle" class="sans" font-size="32">&#9830;</text>
<text x="1144" y="278" fill="#334466" text-anchor="middle" class="sans" font-size="9">Diamant</text>
<!-- Pet 4 — Trefle -->
<rect x="733" y="298" width="158" height="80" fill="#101008" stroke="#222230" stroke-width="1" rx="5"/>
<text x="812" y="344" fill="#22aa44" text-anchor="middle" class="sans" font-size="32">&#9827;</text>
<text x="812" y="368" fill="#226644" text-anchor="middle" class="sans" font-size="9">Trefle</text>
<!-- Pet 5 — Couronne -->
<rect x="899" y="298" width="158" height="80" fill="#101008" stroke="#332200" stroke-width="1" rx="5"/>
<text x="978" y="344" fill="#cc8800" text-anchor="middle" class="sans" font-size="28">&#9818;</text>
<text x="978" y="368" fill="#665500" text-anchor="middle" class="sans" font-size="9">Couronne</text>
<!-- Pet 6 — Feu -->
<rect x="1065" y="298" width="158" height="80" fill="#100808" stroke="#330000" stroke-width="1" rx="5"/>
<text x="1144" y="344" fill="#cc3300" text-anchor="middle" class="sans" font-size="32">&#9762;</text>
<text x="1144" y="368" fill="#662200" text-anchor="middle" class="sans" font-size="9">Crane</text>
<!-- Options position -->
<text x="733" y="402" fill="#226644" class="sans" font-size="11" font-weight="bold">Position du pet</text>
<rect x="733" y="410" width="148" height="30" fill="#0e1e12" stroke="#226644" stroke-width="1" rx="4"/>
<text x="807" y="430" fill="#44aa66" text-anchor="middle" class="sans" font-size="10" font-weight="bold">A gauche du nom</text>
<rect x="889" y="410" width="148" height="30" fill="#080e0a" stroke="#183020" rx="4"/>
<text x="963" y="430" fill="#335544" text-anchor="middle" class="sans" font-size="10">A droite du nom</text>
<rect x="1045" y="410" width="178" height="30" fill="#080e0a" stroke="#183020" rx="4"/>
<text x="1134" y="430" fill="#335544" text-anchor="middle" class="sans" font-size="10">Des deux cotes</text>
<!-- Limites pets -->
<rect x="733" y="452" width="490" height="72" fill="#080e08" stroke="#112211" rx="4"/>
<text x="748" y="472" fill="#226644" class="sans" font-size="10" font-weight="bold">Limites d'achat</text>
<text x="748" y="490" fill="#445544" class="sans" font-size="10">/ Maximum 3 pets actifs simultanement par compte</text>
<text x="748" y="506" fill="#445544" class="sans" font-size="10">/ Chaque pet occupe un slot (gauche, droite, haut)</text>
<text x="748" y="522" fill="#445544" class="sans" font-size="10">/ Non remboursable apres activation · Transfert impossible</text>
<!-- Prix + Bouton pet -->
<text x="733" y="556" fill="#44cc88" class="sans" font-size="22" font-weight="bold" filter="url(#glow-pet)" opacity="0.4">7.99 €</text>
<text x="733" y="556" fill="#44cc88" class="sans" font-size="22" font-weight="bold">7.99 €</text>
<text x="733" y="572" fill="#226644" class="sans" font-size="9">par pet · Achat unique · Permanent</text>
<rect x="733" y="580" width="274" height="44" fill="#113322" rx="22"/>
<rect x="734" y="581" width="272" height="42" fill="none" stroke="#336644" stroke-width="1" rx="21"/>
<text x="870" y="607" fill="#44cc88" text-anchor="middle" class="sans" font-size="12" font-weight="bold">Ajouter ce pet — 7.99 €</text>
<!-- ── OFFRE BUNDLE (bas, pleine largeur) ── -->
<rect x="193" y="650" width="1079" height="56" fill="#100c00" stroke="#664400" stroke-width="1.5" rx="6"/>
<!-- Icone pack -->
<rect x="193" y="650" width="130" height="56" fill="#1a1200" rx="6"/>
<text x="258" y="678" fill="#cc8800" text-anchor="middle" class="sans" font-size="12" font-weight="bold">PACK</text>
<text x="258" y="695" fill="#886600" text-anchor="middle" class="sans" font-size="9">Bundle</text>
<line x1="323" y1="656" x2="323" y2="700" stroke="#332200" stroke-width="1"/>
<!-- Texte bundle -->
<text x="340" y="672" fill="#ffcc00" class="sans" font-size="13" font-weight="bold">Style Dore + 1 Pet au choix</text>
<text x="340" y="691" fill="#cc8800" class="sans" font-size="10">9.99 € + 7.99 € =</text>
<text x="455" y="691" fill="#ee4444" class="sans" font-size="10" text-decoration="line-through">17.98 €</text>
<text x="500" y="691" fill="#44cc44" class="sans" font-size="10">→ seulement 14.99 € (-3 €)</text>
<!-- Timer bundle -->
<text x="780" y="672" fill="#ff8800" class="sans" font-size="10">Offre Flash :</text>
<text x="860" y="672" fill="#ffaa00" class="mono" font-size="12" font-weight="bold">02:47:33</text>
<!-- Bouton bundle -->
<rect x="990" y="660" width="272" height="36" fill="#664400" rx="18"/>
<rect x="991" y="661" width="270" height="34" fill="none" stroke="#cc8800" stroke-width="0.5" rx="17"/>
<text x="1126" y="683" fill="#ffdd00" text-anchor="middle" class="sans" font-size="12" font-weight="bold">Acheter le Pack 14.99 €</text>
<!-- FOOTER -->
<rect x="0" y="710" width="1280" height="10" fill="#080810" stroke="#141420" stroke-width="1"/>
<text x="640" y="718" fill="#222233" text-anchor="middle" class="sans" font-size="7">XIP Shop · Les cosmetiques sont definitifs sauf mention contraire · CGV sur xip.local</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB