preload.js

const { contextBridge, ipcRenderer } = require('electron');

window.addEventListener('DOMContentLoaded', () => {
  const bar = document.createElement('div');
  bar.id = '__overlay_bar__';
  bar.innerHTML = `
    <div id="__ob_inner__">
      <div id="__ob_drag__"><span>🎮 TikTok Overlay</span></div>
      <div id="__ob_status__">
        <span id="__ob_passthrough__" class="__ob_badge__ __ob_off__">🖱 Geçirgen: KAPALI</span>
        <span id="__ob_opacity_label__" class="__ob_badge__">👁 %95</span>
      </div>
      <div id="__ob_controls__">
        <button class="__ob_btn__" id="__ob_min__">─</button>
        <button class="__ob_btn__ __ob_close__">✕</button>
      </div>
    </div>
    <div id="__ob_shortcuts__">
      <span><b>Alt+N:</b> İleri</span>
      <span><b>Alt+M:</b> Geri</span>
      <span><b>Alt+G:</b> Tık Geçirgen</span>
      <span><b>Alt+Q:</b> Kapat</span>
    </div>
  `;

  const style = document.createElement('style');
  style.textContent = `
    #__overlay_bar__ {
      position: fixed; top: 0; left: 0; right: 0; z-index: 9999999;
      background: rgba(0,0,0,0.9); border-bottom: 1px solid #333;
      font-family: sans-serif; color: white; -webkit-app-region: no-drag;
    }
    #__ob_inner__ { display: flex; align-items: center; justify-content: space-between; padding: 4px 10px; }
    #__ob_drag__ { -webkit-app-region: drag; flex: 1; cursor: move; font-size: 11px; font-weight: bold; }
    #__ob_status__ { display: flex; gap: 5px; margin-right: 10px; }
    .__ob_badge__ { font-size: 9px; padding: 2px 5px; border-radius: 3px; background: #222; border: 1px solid #444; }
    .__ob_badge__.__ob_on__ { border-color: #fe2c55; color: #fe2c55; }
    #__ob_controls__ { display: flex; gap: 4px; }
    .__ob_btn__ { background: #222; border: 1px solid #444; color: white; width: 22px; height: 22px; cursor: pointer; }
    .__ob_btn__:hover { background: #fe2c55; }
    #__ob_shortcuts__ { display: flex; gap: 15px; padding: 3px 10px; background: #111; font-size: 9px; color: #aaa; border-top: 1px solid #222; }
  `;

  document.head.appendChild(style);
  document.body.prepend(bar);

  document.getElementById('__ob_close__').onclick = () => ipcRenderer.send('close-app');
  document.getElementById('__ob_min__').onclick = () => ipcRenderer.send('minimize-app');
  
  ipcRenderer.on('passthrough-changed', (_, isOn) => {
    const b = document.getElementById('__ob_passthrough__');
    b.classList.toggle('__ob_on__', isOn);
    b.textContent = `🖱 Geçirgen: ${isOn ? 'AÇIK' : 'KAPALI'}`;
  });

  ipcRenderer.on('opacity-changed', (_, val) => {
    document.getElementById('__ob_opacity_label__').textContent = `👁 %${Math.round(val * 100)}`;
  });
});