☰

Custom Arka Plan Yöneticisi

Web siteleri için arka plan değiştirme [öncelikli manga-manhwa siteleri]

Version au 28/01/2025. Voir la dernière version.

  1. // ==UserScript==
  2. // @name         Custom Arka Plan Yöneticisi
  3. // @namespace    http://Vebascans.net/
  4. // @version      2.2.1
  5. // @description  Web siteleri için arka plan değiştirme [öncelikli manga-manhwa siteleri]
  6. // @author       www.vebascans.net
  7. // @match        https://*/*
  8. // @grant        none
  9. // @icon         https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi0QDJZNeXWcaD9lXWMN2yenYt5XGrqfPavkCFpWLe01CpSEsMn7IGpbOLqxEfjx4QUUi4wgTw0Kc7vP7FrKjPKpcaaCu1N6QRJzlZvS_Wwr2r3kA4l0-E5wl7xObsZchd8YNSxySFZATPAr2bnrkANBUrmy8Rpdexe-mxG8N6QDojEj0onaNNXF_6g-s/w800/logo.png
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     // 1) SweetAlert2 kütüphanesini otomatik yükle:
  16.     const script = document.createElement('script');
  17.     script.src = 'https://cdn.jsdelivr.net/npm/sweetalert2@11';
  18.     script.onload = main; // Kütüphane yüklendikten sonra main() fonksiyonunu çalıştır
  19.     document.head.appendChild(script);
  20.  
  21.     // 2) Tüm kodu main() içine alıyoruz:
  22.     function main() {
  23.  
  24.         /**************************************************************************
  25.          *  SweetAlert Tanımlaması
  26.          **************************************************************************/
  27.         const Toast = Swal.mixin({
  28.             toast: true,
  29.             position: "top",
  30.             showConfirmButton: false,
  31.             timer: 3000,
  32.             timerProgressBar: true,
  33.             didOpen: (toast) => {
  34.                 toast.onmouseenter = Swal.stopTimer;
  35.                 toast.onmouseleave = Swal.resumeTimer;
  36.             }
  37.         });
  38.  
  39.         /**************************************************************************
  40.          *  0) Sabitler
  41.          **************************************************************************/
  42.         const ACTIVE_KEY   = 'VebaScans.net_custom_wp_active';   // Son seçilen veri (URL/Color)
  43.         const HISTORY_KEY  = 'VebaScans.net_custom_wp_history';  // Tüm geçmiş
  44.         const SETTINGS_KEY = 'vebascans.net_custom_wp_settings'; // Arka plan ayarları (repeat/cover vs.)
  45.  
  46.         /**************************************************************************
  47.          *  1) Local Storage Yardımcı Fonksiyonları
  48.          **************************************************************************/
  49.         function getActiveData() {
  50.             try {
  51.                 const str = localStorage.getItem(ACTIVE_KEY);
  52.                 return str ? JSON.parse(str) : null;
  53.             } catch (e) {
  54.                 return null;
  55.             }
  56.         }
  57.  
  58.         function setActiveData(obj) {
  59.             localStorage.setItem(ACTIVE_KEY, JSON.stringify(obj));
  60.             applyActiveDataToBody(); // Aktif veri her değiştiğinde body'yi güncelle
  61.         }
  62.  
  63.         function removeActiveData() {
  64.             localStorage.removeItem(ACTIVE_KEY);
  65.             applyActiveDataToBody();
  66.         }
  67.  
  68.         function getHistoryData() {
  69.             try {
  70.                 const str = localStorage.getItem(HISTORY_KEY);
  71.                 return str ? JSON.parse(str) : [];
  72.             } catch (e) {
  73.                 return [];
  74.             }
  75.         }
  76.  
  77.         function addToHistory(obj) {
  78.             let history = getHistoryData();
  79.  
  80.             // 1) Eğer geçmişte aynı öğe zaten varsa ekleme yapma
  81.             const exists = history.some(item => item.type === obj.type && item.value === obj.value);
  82.             if (exists) {
  83.                 return; // Aynısı varsa, ekleme yapmadan çık
  84.             }
  85.  
  86.             // 2) Yeni öğeyi ekle
  87.             history.push(obj);
  88.  
  89.             // 3) Aynı öğelerin tekrarını önlemek için filtrele (sadece bir tane kalacak)
  90.             history = history.filter((item, index, self) =>
  91.                 index === self.findIndex(t => t.type === item.type && t.value === item.value)
  92.             );
  93.  
  94.             // 4) Güncellenmiş geçmişi kaydet
  95.             localStorage.setItem(HISTORY_KEY, JSON.stringify(history));
  96.         }
  97.  
  98.         // Yeni: Geçmişten silme
  99.         function removeFromHistory(obj) {
  100.             let history = getHistoryData();
  101.             history = history.filter(x => !(x.type === obj.type && x.value === obj.value));
  102.             localStorage.setItem(HISTORY_KEY, JSON.stringify(history));
  103.         }
  104.  
  105.         // -- Ayarlar (Tekrarlı / Tek sefer / Arkaplan sabit vs.)
  106.         function getSettings() {
  107.             try {
  108.                 const str = localStorage.getItem(SETTINGS_KEY);
  109.                 return str ? JSON.parse(str) : {};
  110.             } catch (e) {
  111.                 return {};
  112.             }
  113.         }
  114.  
  115.         function setSettings(newSettings) {
  116.             localStorage.setItem(SETTINGS_KEY, JSON.stringify(newSettings));
  117.         }
  118.  
  119.         /**************************************************************************
  120.          *  2) BODY Arkaplanını Aktif Veriye (URL/Color) ve Ayarlara Göre Uygulama
  121.          **************************************************************************/
  122.         function applyActiveDataToBody() {
  123.             const activeData = getActiveData();
  124.             const settings = getSettings();
  125.  
  126.             // Arkaplan tekrar ayarı (varsayılan = 'no-repeat')
  127.             const bgRepeat = settings.bgRepeat || 'no-repeat';
  128.             // Arkaplan sabit ayarı (varsayılan = 'scroll')
  129.             const bgAttachment = settings.bgAttachment || 'scroll';
  130.  
  131.             if (!activeData) {
  132.                 // Aktif bir şey yoksa varsayılan temize çek
  133.                 document.body.style.backgroundImage = '';
  134.                 document.body.style.backgroundColor = '';
  135.                 document.body.style.backgroundRepeat = '';
  136.                 document.body.style.backgroundAttachment = '';
  137.                 return;
  138.             }
  139.  
  140.             if (activeData.type === 'url') {
  141.                 // Body için arkaplan resmi
  142.                 document.body.style.backgroundImage = `url(${activeData.value})`;
  143.                 document.body.style.backgroundRepeat = bgRepeat;
  144.                 document.body.style.backgroundSize = 'cover';
  145.                 document.body.style.backgroundAttachment = bgAttachment;
  146.                 document.body.style.backgroundColor = '';
  147.  
  148.                 // .body-wrap için
  149.                 try {
  150.                     const bodyWrap = document.querySelector('body.text-ui-light .body-wrap');
  151.                     bodyWrap.style.backgroundImage = `url(${activeData.value})`;
  152.                     bodyWrap.style.backgroundRepeat = bgRepeat;
  153.                     bodyWrap.style.backgroundSize = 'cover';
  154.                     bodyWrap.style.backgroundAttachment = bgAttachment;
  155.                     bodyWrap.style.backgroundColor = '';
  156.                 } catch (error) { /* .body-wrap yoksa hata görmezden gel */ }
  157.  
  158.                 // .site-content için
  159.                 try {
  160.                     const sitecontent = document.querySelector('.site-content');
  161.                     sitecontent.style.backgroundImage = `url(${activeData.value})`;
  162.                     sitecontent.style.backgroundRepeat = bgRepeat;
  163.                     sitecontent.style.backgroundSize = 'cover';
  164.                     sitecontent.style.backgroundAttachment = bgAttachment;
  165.                     sitecontent.style.backgroundColor = '';
  166.                 } catch (error) { /* .site-content yoksa hata görmezden gel */ }
  167.  
  168.             } else if (activeData.type === 'color') {
  169.                 // Body için arkaplan rengi
  170.                 document.body.style.backgroundImage = 'none';
  171.                 document.body.style.backgroundColor = activeData.value;
  172.                 document.body.style.backgroundRepeat = bgRepeat;
  173.                 document.body.style.backgroundAttachment = bgAttachment;
  174.  
  175.                 // .body-wrap için
  176.                 try {
  177.                     const bodyWrap = document.querySelector('body.text-ui-light .body-wrap');
  178.                     bodyWrap.style.backgroundImage = 'none';
  179.                     bodyWrap.style.backgroundColor = activeData.value;
  180.                     bodyWrap.style.backgroundRepeat = bgRepeat;
  181.                     bodyWrap.style.backgroundAttachment = bgAttachment;
  182.                 } catch (error) { /* .body-wrap yoksa hata görmezden gel */ }
  183.  
  184.                 // .site-content için
  185.                 try {
  186.                     const sitecontent = document.querySelector('.site-content');
  187.                     sitecontent.style.backgroundImage = 'none';
  188.                     sitecontent.style.backgroundColor = activeData.value;
  189.                     sitecontent.style.backgroundRepeat = bgRepeat;
  190.                     sitecontent.style.backgroundAttachment = bgAttachment;
  191.                 } catch (error) { /* .site-content yoksa hata görmezden gel */ }
  192.             }
  193.         }
  194.  
  195.         /**************************************************************************
  196.          *  3) MODAL Arayüzü Oluşturma
  197.          **************************************************************************/
  198.         let modalOverlay, modalContent;
  199.  
  200.         window.addEventListener('load', () => {
  201.             createModal();
  202.             createToggleShortcut(); // F7 ile aç/kapa
  203.             applyActiveDataToBody(); // Sayfa açıldığında kaydedilmiş aktif veriyi uygula
  204.         });
  205.  
  206.         // F7 ile modal aç/kapa
  207.         function createToggleShortcut() {
  208.             window.addEventListener('keydown', (e) => {
  209.                 if (e.key === 'F7') {
  210.                     toggleModal();
  211.                 }
  212.             });
  213.         }
  214.  
  215.         function toggleModal(forceOpen) {
  216.             const isHidden = (modalOverlay.style.display === 'none');
  217.             if (forceOpen === true) {
  218.                 showModal();
  219.             } else if (forceOpen === false) {
  220.                 hideModal();
  221.             } else {
  222.                 if (isHidden) showModal(); else hideModal();
  223.             }
  224.         }
  225.  
  226.         function showModal() {
  227.             modalOverlay.style.display = 'block';
  228.             refreshHistoryList();
  229.             refreshActiveLabel();
  230.             refreshSettingsUI();
  231.         }
  232.  
  233.         function hideModal() {
  234.             modalOverlay.style.display = 'none';
  235.         }
  236.  
  237.         function createModal() {
  238.             // (1) Overlay
  239.             modalOverlay = document.createElement('div');
  240.             Object.assign(modalOverlay.style, {
  241.                 display: 'none',
  242.                 position: 'fixed',
  243.                 top: '0',
  244.                 left: '0',
  245.                 width: '100%',
  246.                 height: '100%',
  247.                 backgroundColor: 'rgba(0,0,0,0.5)',
  248.                 zIndex: '99999',
  249.                 color: '#000'
  250.             });
  251.             document.body.appendChild(modalOverlay);
  252.  
  253.             // (2) İçerik
  254.             modalContent = document.createElement('div');
  255.             Object.assign(modalContent.style, {
  256.                 position: 'absolute',
  257.                 top: '50%',
  258.                 left: '50%',
  259.                 transform: 'translate(-50%, -50%)',
  260.                 width: '400px',
  261.                 backgroundColor: '#fff',
  262.                 padding: '20px',
  263.                 borderTopLeftRadius: '15px',
  264.                 borderBottomRightRadius: '15px',
  265.                 border: '3px solid black',
  266.                 minHeight: '450px',
  267.                 fontFamily: 'Arial, sans-serif',
  268.                 fontSize: '14px',
  269.                 fontWeight: 'normal',
  270.                 color: '#000',
  271.             });
  272.             modalOverlay.appendChild(modalContent);
  273.  
  274.             // (3) Logo
  275.             const img = document.createElement('img');
  276.             img.src = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi0QDJZNeXWcaD9lXWMN2yenYt5XGrqfPavkCFpWLe01CpSEsMn7IGpbOLqxEfjx4QUUi4wgTw0Kc7vP7FrKjPKpcaaCu1N6QRJzlZvS_Wwr2r3kA4l0-E5wl7xObsZchd8YNSxySFZATPAr2bnrkANBUrmy8Rpdexe-mxG8N6QDojEj0onaNNXF_6g-s/w800/logo.png';
  277.             img.alt = 'Logo';
  278.             Object.assign(img.style, {
  279.                 width: '130px',
  280.                 position: 'absolute',
  281.                 top: '0',
  282.                 right: '50%',
  283.                 transform: 'translate(50%, -50%)'
  284.             });
  285.             modalContent.appendChild(img);
  286.  
  287.             // (4) Başlık
  288.             const header = document.createElement('h3');
  289.             header.innerHTML = '<a href="https://www.vebascans.net/" style="color: #402870; font-weight: 500; text-decoration: none; font-family: fantasy;">Vebascans</a> - Custom Background';
  290.             header.style.margin = '0 0 10px 0';
  291.             header.style.color = 'black';
  292.             header.style.marginTop = '45px';
  293.             modalContent.appendChild(header);
  294.  
  295.             // (5) Kapat butonu
  296.             const closeBtn = document.createElement('button');
  297.             closeBtn.innerHTML = `
  298.                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  299.                     <g fill="none" fill-rule="evenodd">
  300.                         <path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/>
  301.                         <path fill="currentColor" d="m12 14.122l5.303 5.303a1.5 1.5 0 0 0 2.122-2.122L14.12 12l5.304-5.303a1.5 1.5 0 1 0-2.122-2.121L12 9.879L6.697 4.576a1.5 1.5 0 1 0-2.122 2.12L9.88 12l-5.304 5.304a1.5 1.5 0 1 0 2.122 2.12z"/>
  302.                     </g>
  303.                 </svg>`;
  304.             Object.assign(closeBtn.style, {
  305.                 position: 'absolute',
  306.                 top: '10px',
  307.                 right: '10px',
  308.                 border: 'none',
  309.                 background: 'transparent',
  310.                 cursor: 'pointer',
  311.                 color: 'black'
  312.             });
  313.             closeBtn.onclick = () => hideModal();
  314.             modalContent.appendChild(closeBtn);
  315.  
  316.             // (6) Seçim Menüsü (URL mi Renk mi)
  317.             const selectDiv = document.createElement('div');
  318.             Object.assign(selectDiv.style, {
  319.                 display: 'flex',
  320.                 flexDirection: 'row',
  321.                 gap: '5px',
  322.                 marginBottom: '10px'
  323.             });
  324.             modalContent.appendChild(selectDiv);
  325.  
  326.             const selectLabel = document.createElement('label');
  327.             selectLabel.textContent = 'Seçim: ';
  328.             selectLabel.style.display = 'flex';
  329.             selectLabel.style.alignItems = 'center';
  330.             selectDiv.appendChild(selectLabel);
  331.  
  332.             const selectInput = document.createElement('select');
  333.             selectInput.id = 'typeSelect';
  334.             selectInput.style.background ='white';
  335.             selectInput.style.border ='2px solid black';
  336.             selectInput.style.borderRadius  ='3px';
  337.             selectInput.style.color = 'black';
  338.             const optUrl   = new Option('URL', 'url');
  339.             const optColor = new Option('Renk', 'color');
  340.             selectInput.add(optUrl);
  341.             selectInput.add(optColor);
  342.             selectDiv.appendChild(selectInput);
  343.  
  344.             // (7) URL input
  345.             const urlInput = document.createElement('input');
  346.             urlInput.type = 'text';
  347.             urlInput.id = 'urlInput';
  348.             urlInput.placeholder = 'Görsel URL giriniz...';
  349.             urlInput.style.background ='transparent';
  350.             urlInput.style.border ='2px solid black';
  351.             urlInput.style.borderRadius  ='3px';
  352.             selectDiv.appendChild(urlInput);
  353.  
  354.             // (8) Color input
  355.             const colorInput = document.createElement('input');
  356.             colorInput.type = 'color';
  357.             colorInput.id = 'colorInput';
  358.             colorInput.value = '#000000';
  359.             colorInput.style.width = '50px';
  360.             colorInput.style.height = '30px';
  361.             colorInput.style.display = 'none';
  362.             selectDiv.appendChild(colorInput);
  363.  
  364.             // Seçim değişince hangi input görünsün?
  365.             selectInput.addEventListener('change', () => {
  366.                 if (selectInput.value === 'url') {
  367.                     urlInput.style.display   = 'inline-block';
  368.                     colorInput.style.display = 'none';
  369.                 } else {
  370.                     urlInput.style.display   = 'none';
  371.                     colorInput.style.display = 'inline-block';
  372.                 }
  373.             });
  374.  
  375.             // (9) Aktar butonu
  376.             const aktarBtn = document.createElement('button');
  377.             aktarBtn.textContent = 'Aktar';
  378.             aktarBtn.style.marginLeft = '5px';
  379.             aktarBtn.style.padding = '5px 10px';
  380.             aktarBtn.style.cursor = 'pointer';
  381.             aktarBtn.style.color = 'black';
  382.             aktarBtn.style.border ='2px solid black';
  383.             aktarBtn.style.borderRadius  ='3px';
  384.             aktarBtn.style.background = 'transparent';
  385.             selectDiv.appendChild(aktarBtn);
  386.  
  387.             aktarBtn.onclick = () => {
  388.                 const currentType = selectInput.value; // 'url' | 'color'
  389.                 let currentValue = '';
  390.                 if (currentType === 'url') {
  391.                     currentValue = urlInput.value.trim();
  392.                     if (!currentValue) {
  393.                         Toast.fire({ icon: 'error', title: 'Lütfen bir URL girin.' });
  394.                         return;
  395.                     }
  396.                 } else {
  397.                     currentValue = colorInput.value; // #rrggbb
  398.                     if (!currentValue) {
  399.                         Toast.fire({ icon: 'error', title: 'Lütfen bir renk seçin.' });
  400.                         return;
  401.                     }
  402.                 }
  403.  
  404.                 // Yeni aktif obje
  405.                 const newActiveObj = { type: currentType, value: currentValue };
  406.                 setActiveData(newActiveObj);
  407.                 addToHistory(newActiveObj);
  408.  
  409.                 refreshHistoryList();
  410.                 refreshActiveLabel();
  411.  
  412.                 // URL tipini kullandıysa inputu temizleyelim
  413.                 if (currentType === 'url') {
  414.                     urlInput.value = '';
  415.                 }
  416.                 Toast.fire({ icon: 'success', title: 'Yeni aktif değer atandı ve body arkaplanı güncellendi!' });
  417.             };
  418.  
  419.             // (10) Tekrar / Tek Sefer AYARI
  420.             const repeatDiv = document.createElement('div');
  421.             repeatDiv.style.margin = '10px 0';
  422.             repeatDiv.style.display = 'flex';
  423.             repeatDiv.style.flexDirection = 'row';
  424.             repeatDiv.style.gap = '10px';
  425.             modalContent.appendChild(repeatDiv);
  426.  
  427.             const repeatLabel = document.createElement('span');
  428.             repeatLabel.textContent = 'Arkaplan Tekrarı:';
  429.             repeatLabel.style.alignSelf = 'center';
  430.             repeatDiv.appendChild(repeatLabel);
  431.  
  432.             const labelRepeat = document.createElement('label');
  433.             const radioRepeat = document.createElement('input');
  434.             radioRepeat.type = 'radio';
  435.             radioRepeat.name = 'bgRepeat';
  436.             radioRepeat.value = 'repeat';
  437.             radioRepeat.style.marginRight = '5px';
  438.             labelRepeat.appendChild(radioRepeat);
  439.             labelRepeat.appendChild(document.createTextNode('Tekrarlı'));
  440.             repeatDiv.appendChild(labelRepeat);
  441.  
  442.             const labelNoRepeat = document.createElement('label');
  443.             const radioNoRepeat = document.createElement('input');
  444.             radioNoRepeat.type = 'radio';
  445.             radioNoRepeat.name = 'bgRepeat';
  446.             radioNoRepeat.value = 'no-repeat';
  447.             radioNoRepeat.style.marginRight = '5px';
  448.             labelNoRepeat.appendChild(radioNoRepeat);
  449.             labelNoRepeat.appendChild(document.createTextNode('Tek Sefer'));
  450.             repeatDiv.appendChild(labelNoRepeat);
  451.  
  452.             [radioRepeat, radioNoRepeat].forEach(radio => {
  453.                 radio.addEventListener('change', () => {
  454.                     const newVal = radio.value; // 'repeat' | 'no-repeat'
  455.                     const s = getSettings();
  456.                     s.bgRepeat = newVal;
  457.                     setSettings(s);
  458.                     applyActiveDataToBody();
  459.                 });
  460.             });
  461.  
  462.             // (10b) Arkaplan Sabit AYARI
  463.             const attachDiv = document.createElement('div');
  464.             attachDiv.style.margin = '10px 0';
  465.             attachDiv.style.display = 'flex';
  466.             attachDiv.style.flexDirection = 'row';
  467.             attachDiv.style.gap = '10px';
  468.             modalContent.appendChild(attachDiv);
  469.  
  470.             const attachLabel = document.createElement('span');
  471.             attachLabel.textContent = 'Arkaplan Sabitliği:';
  472.             attachLabel.style.alignSelf = 'center';
  473.             attachDiv.appendChild(attachLabel);
  474.  
  475.             const labelFixed = document.createElement('label');
  476.             const radioFixed = document.createElement('input');
  477.             radioFixed.type = 'radio';
  478.             radioFixed.name = 'bgAttach';
  479.             radioFixed.value = 'fixed';
  480.             radioFixed.style.marginRight = '5px';
  481.             labelFixed.appendChild(radioFixed);
  482.             labelFixed.appendChild(document.createTextNode('Sabit (Fixed)'));
  483.             attachDiv.appendChild(labelFixed);
  484.  
  485.             const labelScroll = document.createElement('label');
  486.             const radioScroll = document.createElement('input');
  487.             radioScroll.type = 'radio';
  488.             radioScroll.name = 'bgAttach';
  489.             radioScroll.value = 'scroll';
  490.             radioScroll.style.marginRight = '5px';
  491.             labelScroll.appendChild(radioScroll);
  492.             labelScroll.appendChild(document.createTextNode('Kaydır (Scroll)'));
  493.             attachDiv.appendChild(labelScroll);
  494.  
  495.             [radioFixed, radioScroll].forEach(radio => {
  496.                 radio.addEventListener('change', () => {
  497.                     const newVal = radio.value; // 'fixed' | 'scroll'
  498.                     const s = getSettings();
  499.                     s.bgAttachment = newVal;
  500.                     setSettings(s);
  501.                     applyActiveDataToBody();
  502.                 });
  503.             });
  504.  
  505.             // (11) Aktif Veriyi Sil
  506.             const removeActiveBtn = document.createElement('button');
  507.             removeActiveBtn.textContent = 'Devre dışı bırak';
  508.             removeActiveBtn.style.marginBottom = '10px';
  509.             removeActiveBtn.style.padding = '5px 10px';
  510.             removeActiveBtn.style.cursor = 'pointer';
  511.             removeActiveBtn.style.color = 'black';
  512.             removeActiveBtn.style.background = 'transparent';
  513.             removeActiveBtn.style.border ='2px solid black';
  514.             removeActiveBtn.style.borderRadius  ='3px';
  515.             modalContent.appendChild(removeActiveBtn);
  516.  
  517.             removeActiveBtn.onclick = () => {
  518.                 removeActiveData();
  519.                 refreshHistoryList();
  520.                 refreshActiveLabel();
  521.                 Toast.fire({ icon: 'info', title: 'Aktif veri silindi. Arkaplan temizlendi.' });
  522.             };
  523.  
  524.             // (12) Şu anda aktif veriyi gösteren label
  525.             const activeDiv = document.createElement('div');
  526.             activeDiv.id = 'activeDiv';
  527.             activeDiv.style.marginTop = '10px';
  528.             modalContent.appendChild(activeDiv);
  529.  
  530.             // (13) Geçmiş Başlık
  531.             const historyTitle = document.createElement('h4');
  532.             historyTitle.textContent = 'Geçmiş';
  533.             historyTitle.style.margin = '10px 0 5px 0';
  534.             modalContent.appendChild(historyTitle);
  535.  
  536.             // (14) Geçmiş Container
  537.             const historyContainer = document.createElement('div');
  538.             historyContainer.id = 'historyContainer';
  539.             historyContainer.style.maxHeight = '200px';
  540.             historyContainer.style.overflowY = 'auto';
  541.             historyContainer.style.border = '1px solid #ccc';
  542.             historyContainer.style.padding = '5px';
  543.             modalContent.appendChild(historyContainer);
  544.         }
  545.  
  546.         /**************************************************************************
  547.          *  4) Geçmiş & Aktif Listeyi Güncelleme
  548.          **************************************************************************/
  549.         function refreshHistoryList() {
  550.             const historyContainer = document.getElementById('historyContainer');
  551.             if (!historyContainer) return;
  552.  
  553.             historyContainer.innerHTML = '';
  554.  
  555.             const historyData = getHistoryData();
  556.             const activeData  = getActiveData(); // {type:'...', value:'...'}
  557.  
  558.             historyData.forEach((item) => {
  559.                 const row = document.createElement('div');
  560.                 row.style.display = 'flex';
  561.                 row.style.alignItems = 'center';
  562.                 row.style.marginBottom = '8px';
  563.                 row.style.cursor = 'pointer';
  564.                 row.style.justifyContent = 'space-between';
  565.  
  566.                 const leftPart = document.createElement('div');
  567.                 leftPart.style.display = 'flex';
  568.                 leftPart.style.alignItems = 'center';
  569.                 leftPart.style.gap = '8px';
  570.  
  571.                 // URL ise küçük görsel
  572.                 if (item.type === 'url') {
  573.                     const imgThumb = document.createElement('img');
  574.                     imgThumb.src = item.value;
  575.                     imgThumb.alt = 'Görsel';
  576.                     imgThumb.style.width = '30px';
  577.                     imgThumb.style.height = '30px';
  578.                     imgThumb.style.objectFit = 'cover';
  579.                     leftPart.appendChild(imgThumb);
  580.  
  581.                     const label = document.createElement('span');
  582.                     label.textContent = 'URL';
  583.                     leftPart.appendChild(label);
  584.  
  585.                 } else if (item.type === 'color') {
  586.                     // Renk ise kutu
  587.                     const colorBox = document.createElement('span');
  588.                     colorBox.style.display = 'inline-block';
  589.                     colorBox.style.width = '30px';
  590.                     colorBox.style.height = '30px';
  591.                     colorBox.style.backgroundColor = item.value;
  592.                     colorBox.style.border = '1px solid #000';
  593.                     leftPart.appendChild(colorBox);
  594.  
  595.                     const label = document.createElement('span');
  596.                     label.textContent = item.value;
  597.                     leftPart.appendChild(label);
  598.                 }
  599.  
  600.                 // Aktif mi?
  601.                 if (activeData && activeData.type === item.type && activeData.value === item.value) {
  602.                     const activeSpan = document.createElement('span');
  603.                     activeSpan.textContent = ' (Aktif)';
  604.                     activeSpan.style.color = 'green';
  605.                     leftPart.appendChild(activeSpan);
  606.                 }
  607.  
  608.                 // Tıklayınca bu itemi aktif yap
  609.                 leftPart.addEventListener('click', () => {
  610.                     setActiveData(item);
  611.                     refreshHistoryList();
  612.                     refreshActiveLabel();
  613.                     Toast.fire({ icon: 'success', title: 'Aktif değer güncellendi!' });
  614.                 });
  615.  
  616.                 // Sağ kısma "Geçmişten Sil" butonu
  617.                 const rightPart = document.createElement('button');
  618.                 rightPart.innerHTML  = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m20 9l-1.995 11.346A2 2 0 0 1 16.035 22h-8.07a2 2 0 0 1-1.97-1.654L4 9m17-3h-5.625M3 6h5.625m0 0V4a2 2 0 0 1 2-2h2.75a2 2 0 0 1 2 2v2m-6.75 0h6.75"/></svg>';
  619.                 rightPart.style.border ='1px solid black';
  620.                 rightPart.style.borderRadius  ='3px';
  621.                 rightPart.style.background = 'transparent';
  622.                 rightPart.style.padding = '3px 5px';
  623.                 rightPart.style.cursor = 'pointer';
  624.  
  625.                 rightPart.addEventListener('click', (e) => {
  626.                     e.stopPropagation(); // Aktif yapma tıklamasını engelle
  627.  
  628.                     // Aktif veriyi al
  629.                     const activeData = getActiveData();
  630.  
  631.                     // Eğer silinmek istenen veri aktif veriyle eşleşiyorsa, işlemi durdur
  632.                     if (activeData && activeData.type === item.type && activeData.value === item.value) {
  633.                         Toast.fire({ icon: 'warning', title: 'Aktif olan bir veriyi silemezsiniz!' });
  634.                         return; // İşlemi durdur
  635.                     }
  636.  
  637.                     // Eğer aktif veri değilse, geçmişten sil
  638.                     removeFromHistory(item);
  639.                     refreshHistoryList();
  640.                     Toast.fire({ icon: 'info', title: 'Geçmişten silindi.' });
  641.                 });
  642.  
  643.                 row.appendChild(leftPart);
  644.                 row.appendChild(rightPart);
  645.                 historyContainer.appendChild(row);
  646.             });
  647.         }
  648.  
  649.         function refreshActiveLabel() {
  650.             const activeDiv = document.getElementById('activeDiv');
  651.             if (!activeDiv) return;
  652.  
  653.             const activeData = getActiveData();
  654.             if (!activeData) {
  655.                 activeDiv.textContent = 'Şu anda aktif bir değer yok.';
  656.             } else {
  657.                 if (activeData.type === 'url') {
  658.                     activeDiv.innerHTML = `
  659.                         Aktif: URL →
  660.                         <img src="${activeData.value}"
  661.                             alt="Aktif Görsel"
  662.                             style="width: 100px; height: auto; object-fit: cover; margin-left:5px;"/>
  663.                     `;
  664.                 } else {
  665.                     activeDiv.innerHTML = `
  666.                         Aktif: Renk →
  667.                         <span style="display:inline-block; width:20px; height:20px;
  668.                                     background-color:${activeData.value};
  669.                                     border:1px solid #000; vertical-align:middle;">
  670.                         </span>
  671.                         ${activeData.value}
  672.                     `;
  673.                 }
  674.             }
  675.         }
  676.  
  677.         /**************************************************************************
  678.          *  5) Arkaplan Ayarı (Tekrar / Tek Sefer / Sabit) Radyo Butonlarını Güncelleme
  679.          **************************************************************************/
  680.         function refreshSettingsUI() {
  681.             const settings = getSettings();
  682.             const bgRepeat = settings.bgRepeat || 'no-repeat'; // Varsayılan no-repeat
  683.             const bgAttach = settings.bgAttachment || 'scroll'; // Varsayılan scroll
  684.  
  685.             const radiosRepeat = document.getElementsByName('bgRepeat');
  686.             radiosRepeat.forEach(radio => {
  687.                 radio.checked = (radio.value === bgRepeat);
  688.             });
  689.  
  690.             const radiosAttach = document.getElementsByName('bgAttach');
  691.             radiosAttach.forEach(radio => {
  692.                 radio.checked = (radio.value === bgAttach);
  693.             });
  694.         }
  695.  
  696.     } // main() sonu
  697.  
  698. })(); // IIFE sonu