Files
XIP/maquettes/shop/shop2.svg
arussac 2d00e78a9f Add SVG designs for shop interface: shop3 and shop4
- 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.
2026-05-23 17:49:22 +02:00

198 lines
14 KiB
XML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<?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-pub"><feGaussianBlur stdDeviation="4"/></filter>
<filter id="glow-red"><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-pub)" 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>
<!-- Breadcrumb -->
<text x="280" y="30" fill="#2a2a44" class="sans" font-size="11">Catalogue</text>
<text x="340" y="30" fill="#1a1a33" class="sans" font-size="11">/</text>
<text x="354" y="30" fill="#5566aa" class="sans" font-size="11" font-weight="bold">Cadre de Pub</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>
<!-- Active: Publicité -->
<rect x="3" y="126" width="179" height="36" fill="#181828" stroke="#242438" rx="3"/>
<rect x="3" y="126" width="3" height="36" fill="#cc4400" rx="2"/>
<text x="20" y="149" fill="#cc8844" class="sans" font-size="13" font-weight="bold">Publicite</text>
<text x="20" y="185" fill="#4a4a6a" class="sans" font-size="13">Abonnements</text>
<text x="20" y="220" fill="#4a4a6a" class="sans" font-size="13">Cosmetiques</text>
<text x="20" y="255" 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 pub actuelle -->
<rect x="8" y="560" width="169" height="80" fill="#111116" stroke="#1e1e26" rx="4"/>
<text x="93" y="578" fill="#2a2a44" text-anchor="middle" class="sans" font-size="9">MES PUBS ACTIVES</text>
<line x1="16" y1="584" x2="170" y2="584" stroke="#1a1a22" stroke-width="1"/>
<text x="93" y="603" fill="#666688" text-anchor="middle" class="sans" font-size="11">0 / 1 slot</text>
<text x="93" y="620" fill="#2a4a2a" text-anchor="middle" class="sans" font-size="10">Slot disponible</text>
<rect x="28" y="628" width="130" height="6" fill="#111116" stroke="#1e1e22" rx="3"/>
<rect x="28" y="628" width="0" height="6" fill="#33aa44" rx="3"/>
<!-- ════════════════════ CONTENU ════════════════════ -->
<!-- ── PROMO FLASH TOP ── -->
<rect x="193" y="66" width="1079" height="46" fill="#1e0800" stroke="#cc3300" stroke-width="1" rx="4"/>
<text x="270" y="84" fill="#ff5500" class="sans" font-size="12" font-weight="bold">FLASH PROMO -33%</text>
<text x="270" y="102" fill="#884422" class="sans" font-size="10">Prix normal : 15.00 € → Prix promo : 9.99 €</text>
<text x="880" y="88" fill="#ff8800" class="sans" font-size="11" font-weight="bold">Expire dans :</text>
<text x="990" y="88" fill="#ffaa00" class="mono" font-size="14" font-weight="bold">02:47:33</text>
<!-- ── TITRE PRODUIT ── -->
<text x="200" y="142" fill="#7788aa" class="sans" font-size="10">Publicite /</text>
<text x="248" y="142" fill="#aabbdd" class="sans" font-size="12" font-weight="bold">Cadre de Pub</text>
<rect x="340" y="130" width="100" height="18" fill="#bb2200" rx="9"/>
<text x="390" y="143" fill="#ffffff" text-anchor="middle" class="sans" font-size="9" font-weight="bold">-33% PROMO</text>
<!-- ════════════════════ CORPS : PREVIEW gauche + DETAIL droit ════════════════════ -->
<!-- ── PREVIEW PRODUIT (x=193, y=154, w=480, h=490) ── -->
<rect x="193" y="154" width="480" height="490" fill="#0e0e14" stroke="#1c1c28" rx="6"/>
<!-- Titre zone preview -->
<rect x="193" y="154" width="480" height="36" fill="#131320" rx="6"/>
<text x="433" y="177" fill="#555577" text-anchor="middle" class="sans" font-size="11">Apercu dans le chat XIP</text>
<!-- Mini interface XIP (1:2 scale de 1280x720) -->
<!-- Canvas simulé: 460×340 centré -->
<rect x="203" y="198" width="460" height="340" fill="#090910" stroke="#141420" rx="4"/>
<!-- Header mini XIP -->
<rect x="203" y="198" width="460" height="26" fill="#0e0e18" stroke="#1a1a28" stroke-width="0.5"/>
<text x="218" y="215" fill="#009acc" class="sans" font-size="9" font-weight="bold">XIP Chat</text>
<text x="300" y="215" fill="#3a3a5a" class="sans" font-size="8">312 connectes</text>
<!-- Bande pub gauche — highlightée en or -->
<rect x="203" y="224" width="54" height="302" fill="#0c0c08" stroke="#ffcc00" stroke-width="2" rx="2"/>
<rect x="204" y="225" width="52" height="300" fill="none" stroke="#ffaa00" stroke-width="0.5" rx="1" opacity="0.6"/>
<!-- Contenu pub dans la bande -->
<rect x="207" y="230" width="46" height="70" fill="#1a1600" stroke="#aa8800" rx="1"/>
<text x="230" y="254" fill="#cc8800" text-anchor="middle" class="sans" font-size="7" font-weight="bold">VOTRE</text>
<text x="230" y="264" fill="#cc8800" text-anchor="middle" class="sans" font-size="7" font-weight="bold">PUB</text>
<text x="230" y="278" fill="#886600" text-anchor="middle" class="sans" font-size="6">130x180px</text>
<rect x="207" y="308" width="46" height="70" fill="#181818" stroke="#333" rx="1"/>
<text x="230" y="345" fill="#2a2a2a" text-anchor="middle" class="sans" font-size="8">ad 2</text>
<rect x="207" y="386" width="46" height="70" fill="#181818" stroke="#333" rx="1"/>
<text x="230" y="423" fill="#2a2a2a" text-anchor="middle" class="sans" font-size="8">ad 3</text>
<!-- Chat messages -->
<text x="270" y="240" fill="#505070" class="mono" font-size="7" font-weight="bold">192.168.1.45</text>
<text x="270" y="252" fill="#909090" class="sans" font-size="7">Salut tout le monde !</text>
<text x="270" y="270" fill="#505070" class="mono" font-size="7" font-weight="bold">10.0.0.187</text>
<text x="270" y="282" fill="#909090" class="sans" font-size="7">Y a quoi de neuf ce soir ?</text>
<text x="270" y="300" fill="#505070" class="mono" font-size="7" font-weight="bold">172.16.254.1</text>
<text x="270" y="312" fill="#909090" class="sans" font-size="7">Le drop de demain va etre chaud</text>
<text x="270" y="330" fill="#505070" class="mono" font-size="7" font-weight="bold">203.0.113.42</text>
<text x="270" y="342" fill="#909090" class="sans" font-size="7">lol toujours pareil</text>
<!-- Input mini -->
<rect x="258" y="488" width="398" height="22" fill="#131320" stroke="#1e1e2a" rx="11"/>
<text x="268" y="503" fill="#2a2a44" class="sans" font-size="7">Entrez un message...</text>
<!-- Legende heatmap de la pub -->
<rect x="203" y="548" width="460" height="88" fill="#0c0c10" stroke="#181820" rx="4"/>
<text x="215" y="566" fill="#555577" class="sans" font-size="10" font-weight="bold">Zone surlignee = votre espace publicitaire</text>
<line x1="215" y1="572" x2="643" y2="572" stroke="#1a1a28" stroke-width="0.5"/>
<!-- Stats pub -->
<text x="225" y="592" fill="#446644" class="sans" font-size="11" font-weight="bold">1 000</text>
<text x="278" y="592" fill="#404055" class="sans" font-size="10">impressions garanties</text>
<text x="225" y="612" fill="#446644" class="sans" font-size="11" font-weight="bold">7</text>
<text x="240" y="612" fill="#404055" class="sans" font-size="10">jours de diffusion continue</text>
<text x="450" y="592" fill="#446644" class="sans" font-size="11" font-weight="bold">24/7</text>
<text x="480" y="592" fill="#404055" class="sans" font-size="10">disponibilite</text>
<text x="450" y="612" fill="#446644" class="sans" font-size="11" font-weight="bold">130px</text>
<text x="498" y="612" fill="#404055" class="sans" font-size="10">largeur x 180px hauteur</text>
<text x="215" y="632" fill="#883322" class="sans" font-size="9">Votre image ou animation sera visible par tous les utilisateurs connectes au chat public.</text>
<!-- ── DETAIL PRODUIT droite (x=685, y=154, w=580, h=490) ── -->
<rect x="685" y="154" width="580" height="490" fill="#0e0e14" stroke="#1c1c28" rx="6"/>
<!-- Titre + note -->
<text x="705" y="192" fill="#c8c8e0" class="sans" font-size="20" font-weight="bold">Cadre de Pub</text>
<text x="912" y="192" fill="#cc8800" class="sans" font-size="11">★★★★☆</text>
<text x="962" y="192" fill="#444455" class="sans" font-size="10">(142 avis)</text>
<!-- Prix - barré / promo / normal -->
<rect x="705" y="202" width="550" height="72" fill="#111118" stroke="#1e1e26" rx="4"/>
<text x="720" y="224" fill="#444455" class="sans" font-size="14" text-decoration="line-through">22.50 €</text>
<text x="777" y="224" fill="#ee3333" class="sans" font-size="12" font-weight="bold">-33%</text>
<text x="720" y="256" fill="#ffdd00" class="sans" font-size="28" font-weight="bold" filter="url(#glow-pub)" opacity="0.4">9.99 €</text>
<text x="720" y="256" fill="#ffdd00" class="sans" font-size="28" font-weight="bold">9.99 €</text>
<text x="850" y="240" fill="#444455" class="sans" font-size="11">Prix normal : 15.00 €</text>
<text x="850" y="258" fill="#883322" class="sans" font-size="10">Promo flash → expire dans 02:47</text>
<!-- Options / configurateur -->
<text x="705" y="300" fill="#7788aa" class="sans" font-size="12" font-weight="bold">Configuration</text>
<line x1="705" y1="308" x2="1255" y2="308" stroke="#1a1a28" stroke-width="1"/>
<!-- Duree -->
<text x="705" y="330" fill="#555577" class="sans" font-size="10">Duree de diffusion</text>
<rect x="705" y="336" width="122" height="30" fill="#181828" stroke="#2244aa" rx="4"/>
<text x="766" y="356" fill="#aabbdd" text-anchor="middle" class="sans" font-size="11" font-weight="bold">7 jours</text>
<rect x="835" y="336" width="122" height="30" fill="#111118" stroke="#222230" rx="4"/>
<text x="896" y="356" fill="#4a4a6a" text-anchor="middle" class="sans" font-size="11">14 jours (+8€)</text>
<rect x="965" y="336" width="122" height="30" fill="#111118" stroke="#222230" rx="4"/>
<text x="1026" y="356" fill="#4a4a6a" text-anchor="middle" class="sans" font-size="11">30 jours (+20€)</text>
<!-- Format -->
<text x="705" y="390" fill="#555577" class="sans" font-size="10">Format</text>
<rect x="705" y="396" width="170" height="30" fill="#181828" stroke="#2244aa" rx="4"/>
<text x="790" y="416" fill="#aabbdd" text-anchor="middle" class="sans" font-size="11" font-weight="bold">Image statique</text>
<rect x="883" y="396" width="170" height="30" fill="#111118" stroke="#222230" rx="4"/>
<text x="968" y="416" fill="#4a4a6a" text-anchor="middle" class="sans" font-size="11">GIF anime (+3€)</text>
<!-- URL de la pub -->
<text x="705" y="450" fill="#555577" class="sans" font-size="10">URL de destination (optionnel)</text>
<rect x="705" y="456" width="540" height="30" fill="#131320" stroke="#222232" rx="4"/>
<text x="720" y="476" fill="#2a2a44" class="sans" font-size="11">https://</text>
<!-- LIMITES D'ACHAT -->
<rect x="705" y="502" width="540" height="104" fill="#110a00" stroke="#442200" rx="4"/>
<text x="720" y="522" fill="#cc6633" class="sans" font-size="11" font-weight="bold">Limites d'achat</text>
<line x1="715" y1="528" x2="1235" y2="528" stroke="#331800" stroke-width="1"/>
<text x="720" y="546" fill="#884422" class="sans" font-size="10">/ 1 seul cadre de pub actif par compte a la fois</text>
<text x="720" y="562" fill="#884422" class="sans" font-size="10">/ Maximum 3 achats par mois (quota mensuel)</text>
<text x="720" y="578" fill="#884422" class="sans" font-size="10">/ L'image doit respecter les CGU (pas de contenu adulte)</text>
<text x="720" y="594" fill="#884422" class="sans" font-size="10">/ La pub expire automatiquement apres la duree choisie</text>
<!-- Bouton acheter principal -->
<rect x="705" y="618" width="338" height="46" fill="#cc3300" rx="23"/>
<rect x="706" y="619" width="336" height="44" fill="none" stroke="#ff6600" stroke-width="0.5" rx="22"/>
<text x="874" y="646" fill="#ffffff" text-anchor="middle" class="sans" font-size="14" font-weight="bold">Acheter — 9.99 €</text>
<!-- Bouton pack -->
<rect x="1051" y="618" width="224" height="46" fill="#111128" stroke="#2a2a5a" rx="23"/>
<text x="1163" y="641" fill="#7788bb" text-anchor="middle" class="sans" font-size="11">Voir aussi le Pack</text>
<text x="1163" y="657" fill="#7788bb" text-anchor="middle" class="sans" font-size="10">Pub + Abonnement</text>
<!-- ── AVIS CLIENTS (bas) ── -->
<rect x="193" y="656" width="1072" height="52" fill="#0c0c12" stroke="#181822" rx="4"/>
<text x="210" y="674" fill="#555577" class="sans" font-size="10" font-weight="bold">Avis des acheteurs</text>
<line x1="210" y1="680" x2="1255" y2="680" stroke="#1a1a22" stroke-width="0.5"/>
<text x="210" y="697" fill="#334433" class="sans" font-size="9">★★★★★ 192.168.x.x — "Bien visible, bonne visibilite dans le chat, je recommande !"</text>
<text x="680" y="697" fill="#334433" class="sans" font-size="9">★★★★☆ 10.x.x.x — "Prix correct, effet garanti sur mes clics."</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 · Voir les CGV · Support : shop@xip.local</text>
</svg>