/* PREMIUM E-COMMERCE WIDGET (Zara/Apple Style) Created by: Antigravity Features: Slider, Countdown, Autostart, Premium UI */ (function() { // 1. CSS Stillerini Enjekte Etme const css = ` :root { --widget-cream: #f8f6f2; --widget-white: #ffffff; --widget-black: #121212; --widget-gray: #767676; --widget-border: #e5e5e5; --widget-radius: 12px; --widget-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } #mwd-trigger { position: fixed; right: 0; top: 50%; transform: translateY(-50%); background: var(--widget-black); color: var(--widget-white); writing-mode: vertical-rl; padding: 20px 10px; cursor: pointer; z-index: 999998; font-family: var(--widget-font); font-size: 11px; font-weight: 600; letter-spacing: 2px; border-radius: 12px 0 0 12px; box-shadow: -4px 0 15px rgba(0,0,0,0.1); transition: 0.3s; } #mwd-trigger:hover { padding-right: 15px; background: #000; } #mwd-panel { position: fixed; right: -380px; top: 50%; transform: translateY(-50%); width: 340px; background: var(--widget-cream); border-radius: var(--widget-radius); box-shadow: 0 10px 40px rgba(0,0,0,0.12); z-index: 999999; font-family: var(--widget-font); transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); overflow: hidden; border: 1px solid var(--widget-border); } #mwd-panel.active { right: 20px; } .mwd-close { position: absolute; top: 15px; right: 15px; cursor: pointer; font-size: 20px; color: var(--widget-black); z-index: 10; } .mwd-header { padding: 30px 25px 20px; text-align: center; } .mwd-header h3 { font-size: 20px; font-weight: 700; margin: 0 0 8px 0; color: var(--widget-black); } .mwd-stock { font-size: 13px; color: #d10000; font-weight: 600; margin-bottom: 12px; } .mwd-timer { display: flex; justify-content: center; gap: 15px; font-weight: 700; font-size: 14px; color: var(--widget-black); background: rgba(0,0,0,0.03); padding: 10px; border-radius: 8px; } .mwd-slider { position: relative; height: 380px; margin: 0 25px 25px; } .mwd-product { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.8s ease; display: flex; flex-direction: column; pointer-events: none; } .mwd-product.active { opacity: 1; pointer-events: auto; } .mwd-img-box { background: #fff; border-radius: 10px; height: 240px; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; } .mwd-img-box img { max-width: 90%; max-height: 90%; object-fit: contain; } .mwd-name { font-size: 15px; font-weight: 600; margin-bottom: 5px; text-align: center; } .mwd-price { font-size: 17px; font-weight: 700; color: var(--widget-black); text-align: center; margin-bottom: 15px; } .mwd-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .mwd-btn { padding: 12px; border-radius: 8px; text-align: center; font-size: 11px; font-weight: 700; text-transform: uppercase; text-decoration: none; transition: 0.3s; cursor: pointer; } .mwd-btn-cart { background: transparent; border: 1px solid var(--widget-black); color: var(--widget-black); } .mwd-btn-buy { background: var(--widget-black); color: #fff; border: 1px solid var(--widget-black); } .mwd-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.1); } `; // 2. HTML Yapısı const html = ` `; // 3. Enjeksiyon ve Mantık const styleTag = document.createElement('style'); styleTag.innerHTML = css; document.head.appendChild(styleTag); const container = document.createElement('div'); container.innerHTML = html; document.body.appendChild(container); const panel = document.getElementById('mwd-panel'); const trigger = document.getElementById('mwd-trigger'); const closeBtn = document.querySelector('.mwd-close'); const products = document.querySelectorAll('.mwd-product'); // Aç/Kapat Fonksiyonları const togglePanel = () => panel.classList.toggle('active'); trigger.addEventListener('click', togglePanel); closeBtn.addEventListener('click', () => panel.classList.remove('active')); // Dışarı tıklayınca kapatma window.addEventListener('click', (e) => { if (!panel.contains(e.target) && !trigger.contains(e.target) && panel.classList.contains('active')) { panel.classList.remove('active'); } }); // Otomatik Açılış setTimeout(() => panel.classList.add('active'), 2500); // Slider Mantığı let currentIdx = 0; setInterval(() => { products[currentIdx].classList.remove('active'); currentIdx = (currentIdx + 1) % products.length; products[currentIdx].classList.add('active'); }, 4000); // Countdown Mantığı (Gece yarısına kadar) function updateTimer() { const now = new Date(); const tomorrow = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1); const diff = tomorrow - now; const h = Math.floor((diff / (1000 * 60 * 60)) % 24); const m = Math.floor((diff / (1000 * 60)) % 60); const s = Math.floor((diff / 1000) % 60); document.getElementById('mwd-countdown').innerHTML = ` ${h < 10 ? '0' + h : h}h : ${m < 10 ? '0' + m : m}m : ${s < 10 ? '0' + s : s}s `; } setInterval(updateTimer, 1000); updateTimer(); })();