COLLECTOR POPUP

Promotion !

0,02 € ~~0,10 €~~

Quantité

Référence de l'article: VNYRZ 76459 INEFG 87436 UHNHF 73264 UYFRE 98743

<div id="xenodis-popup" class="xenodis-popup"> <div class="xenodis-card"> <button class="xenodis-close" onclick="closeXenodis()">×</button> <div id="xenodis-aura" class="xenodis-aura"></div> <div id="xenodis-logo" class="xenodis-logo"> VX </div> <div id="xenodis-rarity" class="xenodis-rarity"> COMMUN </div> <h2 id="xenodis-name">Xenodis</h2> <p id="xenodis-description"> Un Xenodis de collection. </p> <div class="xenodis-price"> <span>✦</span> <strong id="xenodis-value">100</strong> <span>VX</span> </div> <button id="xenodis-collect" class="xenodis-collect" onclick="collectXenodis()"> COLLECTIONNER </button> </div> </div> <style> /* ============================== POPUP ============================== */ .xenodis-popup { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.72); backdrop-filter: blur(8px); z-index: 99999; } .xenodis-popup.show { display: flex; animation: popupFade .3s ease; } @keyframes popupFade { from { opacity: 0; } to { opacity: 1; } } /* ============================== CARTE ============================== */ .xenodis-card { position: relative; width: 330px; min-height: 430px; padding: 30px; border-radius: 28px; text-align: center; color: white; background: linear-gradient( 145deg, #111827, #030712 ); border: 1px solid rgba(255,255,255,.15); box-shadow: 0 30px 80px rgba(0,0,0,.8); overflow: hidden; animation: cardAppear .55s cubic-bezier(.17,.67,.3,1.3); } @keyframes cardAppear { from { transform: translateY(80px) scale(.7) rotateX(20deg); opacity: 0; } to { transform: translateY(0) scale(1) rotateX(0); opacity: 1; } } /* ============================== FERMETURE ============================== */ .xenodis-close { position: absolute; top: 12px; right: 15px; width: 35px; height: 35px; border: 0; border-radius: 50%; color: white; background: rgba(255,255,255,.08); font-size: 25px; cursor: pointer; transition: .2s; } .xenodis-close:hover { transform: rotate(90deg) scale(1.1); } /* ============================== LOGO ============================== */ .xenodis-logo { position: relative; width: 150px; height: 150px; margin: 15px auto 25px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 42px; font-weight: 900; letter-spacing: 4px; background: linear-gradient( 135deg, #ffffff, #777777 ); color: #111; box-shadow: 0 0 40px rgba(255,255,255,.25); animation: logoFloat 3s ease-in-out infinite; } @keyframes logoFloat { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(3deg); } } /* ============================== AURA ============================== */ .xenodis-aura { position: absolute; width: 240px; height: 240px; top: 35px; left: 50%; transform: translateX(-50%); border-radius: 50%; filter: blur(40px); opacity: .35; pointer-events: none; } /* ============================== TEXTE ============================== */ .xenodis-rarity { font-size: 13px; font-weight: 900; letter-spacing: 3px; margin-bottom: 8px; } .xenodis-card h2 { margin: 5px 0; font-size: 28px; } .xenodis-card p { color: #9ca3af; font-size: 14px; line-height: 1.5; } /* ============================== PRIX ============================== */ .xenodis-price { display: flex; justify-content: center; align-items: center; gap: 7px; margin: 22px 0; font-size: 20px; } .xenodis-price span:first-child { font-size: 25px; } /* ============================== BOUTON ============================== */ .xenodis-collect { width: 100%; padding: 14px; border: 0; border-radius: 14px; color: white; background: linear-gradient( 135deg, #2563eb, #7c3aed ); font-weight: 900; cursor: pointer; transition: .25s; } .xenodis-collect:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(124,58,237,.4); } /* ============================== RARE ============================== */ .xenodis-popup.rare .xenodis-logo { background: linear-gradient( 135deg, #67e8f9, #2563eb ); box-shadow: 0 0 45px rgba(34,211,238,.65); } .xenodis-popup.rare .xenodis-aura { background: #06b6d4; } /* ============================== ÉPIQUE ============================== */ .xenodis-popup.epic .xenodis-logo { background: linear-gradient( 135deg, #c084fc, #7c3aed ); color: white; box-shadow: 0 0 55px rgba(168,85,247,.8); animation: epicSpin 5s linear infinite; } @keyframes epicSpin { from { transform: rotateY(0); } to { transform: rotateY(360deg); } } .xenodis-popup.epic .xenodis-aura { background: #9333ea; } /* ============================== LÉGENDAIRE ============================== */ .xenodis-popup.legendary .xenodis-logo { background: linear-gradient( 135deg, #fef08a, #f59e0b, #fef3c7 ); box-shadow: 0 0 70px rgba(245,158,11,.9); animation: legendary 1.5s ease-in-out infinite; } @keyframes legendary { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } } .xenodis-popup.legendary .xenodis-aura { background: #f59e0b; } /* ============================== MYTHIQUE ============================== */ .xenodis-popup.mythic .xenodis-logo { background: linear-gradient( 135deg, #f9a8d4, #a855f7, #38bdf8 ); color: white; box-shadow: 0 0 80px rgba(217,70,239,.9); animation: mythic 2s linear infinite; } @keyframes mythic { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(1.08); } 100% { transform: rotate(360deg) scale(1); } } .xenodis-popup.mythic .xenodis-aura { background: #d946ef; } /* ============================== COLLECTOR ============================== */ .xenodis-popup.collector .xenodis-card { border: 2px solid rgba(255,255,255,.7); background: linear-gradient( 145deg, #292524, #09090b, #292524 ); box-shadow: 0 0 80px rgba(255,255,255,.3), 0 30px 100px rgba(0,0,0,.9); } .xenodis-popup.collector .xenodis-logo { background: linear-gradient( 135deg, #ffffff, #d4d4d8, #737373 ); color: #18181b; box-shadow: 0 0 80px rgba(255,255,255,.8); animation: collector 4s ease-in-out infinite; } @keyframes collector { 0%,100% { transform: perspective(500px) rotateY(-12deg); } 50% { transform: perspective(500px) rotateY(12deg); } } .xenodis-popup.collector .xenodis-aura { background: white; } </style> <script> /* ============================== XENODIS DATABASE ============================== */ const xenodis = { common: { name: "Xenodis Origin", rarity: "COMMUN", value: 100, description: "Le premier symbole de la collection VX.", logo: "VX" }, rare: { name: "Xenodis Nova", rarity: "RARE", value: 500, description: "Un Xenodis recherché par les collectionneurs.", logo: "✦" }, epic: { name: "Xenodis Eclipse", rarity: "ÉPIQUE", value: 1500, description: "Une édition spéciale aux pouvoirs visuels avancés.", logo: "◈" }, legendary: { name: "Xenodis Prime", rarity: "LÉGENDAIRE", value: 5000, description: "Une pièce extrêmement rare de l'univers VX.", logo: "VX+" }, mythic: { name: "Xenodis Infinity", rarity: "MYTHIQUE", value: 15000, description: "Une édition mythique destinée aux collectionneurs.", logo: "∞" }, collector: { name: "Xenodis One", rarity: "COLLECTOR", value: 50000, description: "Édition collector extrêmement précieuse.", logo: "Ⅰ" } }; /* ============================== MÉMOIRE COLLECTION ============================== */ let collection = JSON.parse( localStorage.getItem("vx_xenodis_collection") ) || []; /* ============================== OUVRIR UN XENODIS ============================== */ function openXenodis(type = "common") { const item = xenodis[type]; if (!item) return; const popup = document.getElementById("xenodis-popup"); popup.className = "xenodis-popup show " + type; document.getElementById("xenodis-name") .textContent = item.name; document.getElementById("xenodis-rarity") .textContent = item.rarity; document.getElementById("xenodis-value") .textContent = item.value.toLocaleString(); document.getElementById("xenodis-description") .textContent = item.description; document.getElementById("xenodis-logo") .textContent = item.logo; document.getElementById("xenodis-collect") .dataset.type = type; if (collection.includes(type)) { document.getElementById("xenodis-collect") .textContent = "✓ DÉJÀ COLLECTIONNÉ"; } else { document.getElementById("xenodis-collect") .textContent = "COLLECTIONNER"; } } /* ============================== FERMER ============================== */ function closeXenodis() { document .getElementById("xenodis-popup") .classList.remove("show"); } /* ============================== COLLECTIONNER ============================== */ function collectXenodis() { const type = document.getElementById("xenodis-collect") .dataset.type; if (!type) return; if (!collection.includes(type)) { collection.push(type); localStorage.setItem( "vx_xenodis_collection", JSON.stringify(collection) ); document.getElementById("xenodis-collect") .textContent = "✓ COLLECTIONNÉ"; console.log( "Xenodis obtenu :", xenodis[type].name ); } } /* ============================== FERMETURE EN CLIQUANT À CÔTÉ ============================== */ document .getElementById("xenodis-popup") .addEventListener("click", function(event) { if (event.target === this) { closeXenodis(); } }); /* ============================== EXEMPLES ============================== */ // Pour ouvrir un Xenodis : openXenodis("rare"); // Autres possibilités : // // openXenodis("common"); // openXenodis("epic"); // openXenodis("legendary"); // openXenodis("mythic"); // openXenodis("collector"); </script>

Meilleur vente 3 fois pour les 1000 premier chaque semaine montant de 100 a 1000 euros debloquer egale collector popup Avec classement des plus ancien et les plus chere dans la page classement