<!DOCTYPE html>
<html lang="tr">
<head>
  <script src="https://unpkg.com/ipfs@0.66.1/dist/index.min.js"></script>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <meta name="description" content="Lingoano sohbet sayfası - Dil öğrenmek isteyenlerle anonim olarak sohbet edin">
  <meta name="keywords" content="Lingoano sohbet, dil öğrenme, anonim sohbet, IPFS, WebRTC">
  <meta name="author" content="Lingoano">
  <meta name="robots" content="noindex, nofollow">
  <title data-lang="chat-title-page">Lingoano Sohbet - Dil Öğrenme Platformu</title>
  <link rel="stylesheet" href="style.css" />
  <script src="/liguanadinleserver/env.js"></script>
  <script>
    // Client-side env for chat page
    window.env = window.env || {};
    window.env.Lingoano_TOPIC_SALT = window.env.Lingoano_TOPIC_SALT || 'ŞEBNEM';
    window.env.WRTC_STAR_RELAYS = window.env.WRTC_STAR_RELAYS || 'wss://lingoanorelay.onrender.com';
    window.env.TURN_URL = window.env.TURN_URL || 'turn:relay1.expressturn.com:3480';
    window.env.TURN_USER = window.env.TURN_USER || 'efPU52K4SLOQ34W2QY';
    window.env.TURN_PASS = window.env.TURN_PASS || '1TJPNFxHKXrZfelz';
  </script>
  <script>
    // Eşleşme kontrolü ve URL parametre desteği (?topic=...)
    (function() {
      try {
        // URL parametrelerinden topic (opsiyonel: role, language/lang, level) al
        var params = new URLSearchParams(window.location.search);
        var topicParam = params.get('topic');
        if (topicParam && topicParam.trim()) {
          sessionStorage.setItem('Lingoano_topic', topicParam.trim());
          var roleParam = params.get('role');
          if (roleParam && roleParam.trim()) sessionStorage.setItem('Lingoano_role', roleParam.trim());
          var langParam = params.get('language') || params.get('lang');
          if (langParam && langParam.trim()) sessionStorage.setItem('Lingoano_language', langParam.trim());
          var levelParam = params.get('level');
          if (levelParam && levelParam.trim()) sessionStorage.setItem('Lingoano_level', levelParam.trim());
          // URL'i temizle (parametreleri kaldır)
          var cleanUrl = window.location.origin + window.location.pathname;
          window.history.replaceState({}, document.title, cleanUrl);
        }

        // Topic yoksa ana sayfaya yönlendir
        var hasTopic = !!sessionStorage.getItem('Lingoano_topic');
        if (!hasTopic) {
          window.location.replace('anasayfa.html');
        }
      } catch (e) {
        // Tarayıcı sessionStorage engelliyorsa da ana sayfaya dön
        window.location.replace('anasayfa.html');
      }
    })();
  </script>
  
  

  <style>
    body {
      margin: 0;
      padding: 0;
      background-color: var(--secondary-bg);
      color: var(--text-primary);
      font-family: 'Segoe UI', sans-serif;
      display: flex;
      flex-direction: column;
      height: 100vh;
    }

    /* Input container styling */
    .input-container {
      display: flex;
      align-items: center;
      gap: 8px;
      position: relative;
      width: 80%;
      margin: 0 auto;
    }

    .dictionary-toggle-text {
      color: var(--text-secondary);
      cursor: pointer;
      font-size: 18px;
      transition: all 0.2s;
      flex-shrink: 0;
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      line-height: 1;
      user-select: none;
      padding: 6px;
      border-radius: 4px;
      pointer-events: auto;
      z-index: 10;
      background: var(--accent-bg);
      border: 1px solid var(--border-color);
    }

    .dictionary-toggle-text:hover {
      color: var(--accent-color);
      background: var(--accent-bg);
    }

    .dictionary-toggle-text:focus {
      outline: 2px solid var(--accent-color);
      outline-offset: 2px;
    }

    /* Chat input form styling */
    .chat-input form {
      display: flex;
      gap: 12px;
      align-items: center;
      justify-content: center;
      width: 100%;
      flex-direction: column;
    }

    .chat-input input[type="text"] {
      width: 100%;
      min-width: 0;
      padding-right: 50px;
    }

    .chat-input button[type="submit"] {
      width: 80%;
      min-width: 0;
    }

    /* Dictionary widget positioning for chat */
    .chat-input .dictionary-widget {
      position: fixed !important;
      bottom: 140px !important;
      right: 20px !important;
      z-index: 999 !important;
      background: var(--bg-primary) !important;
      border: 1px solid var(--border-color) !important;
      border-radius: 8px !important;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
      display: none !important;
      width: 250px !important;
      max-height: 300px !important;
    }

    .chat-input .dictionary-widget.open {
      display: block !important;
    }

    .dictionary-widget-content {
      padding: 10px;
      max-height: 300px;
      overflow-y: auto;
    }

    /* Mobilde bağış butonunu gizle */
    @media (max-width: 768px) {
      .donate-button {
        display: none !important;
      }
      
      /* Mobilde logo büyük görünsün */
      .chat-logo {
        width: 39px !important;
        height: auto !important;
        max-width: none !important;
        object-fit: contain !important;
      }
      
      /* Orta boy mobilde header ayarları */
      .chat-header {
        padding: 0 0rem !important;
      }
      
      .header-left {
        min-width: 40px !important;
        padding: 0 1px !important;
      }
      
      /* Çok küçük ekranlarda logo daha da büyük */
      @media (max-width: 480px) {
        .chat-logo {
          width: 48px !important;
          height: auto !important;
        }
        
        /* Küçük ekranlarda header padding azalt */
        .chat-header {
          padding: 0 0rem !important;
        }
        
        .header-left {
          min-width: 20px !important;
          padding: 0 1px !important;
        }
      }
    }

    /* Desktop için sağ-sol banner reklamları */
    .desktop-ads-container {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
      z-index: 1000;
    }

    .left-banner-ad {
      position: fixed;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 160px;
      height: 600px;
      background: var(--accent-bg);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      pointer-events: auto;
      z-index: 1001;
    }

    .right-banner-ad {
      position: fixed;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 160px;
      height: 600px;
      background: var(--accent-bg);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      pointer-events: auto;
      z-index: 1001;
    }

    /* Geniş ekranlar için sağ-sol reklamları göster */
    @media (min-width: 1080px) {
      .desktop-ads-container {
        display: block;
      }
      
      .chat-header {
        margin-left: 180px;
        margin-right: 180px;
      }
      
      .chat-window {
        margin-left: 180px;
        margin-right: 180px;
      }
      
      .chat-input {
        margin-left: 180px;
        margin-right: 180px;
      }
    }

    .chat-header {
      background-color: var(--primary-bg);
      border-bottom: var(--soft-glow);
      height: 70px;
      position: relative;
      display: flex;
      align-items: center;
      padding: 0 1rem;
    }

    .header-left {
      width: auto;
      min-width: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 10px;
    }

    .header-right {
      width: auto;
      min-width: 120px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 10px;
    }

    /* Header'da tema seçici için özel stiller */
    .chat-header .theme-switcher {
      transform: scale(0.9);
      margin: 0;
    }

    .header-center {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      font-size: 1.2rem;
      font-weight: bold;
      color: #f0f0f0;
      white-space: nowrap;
    }

    .chat-logo {
      height: auto;
      width: 51px;
      cursor: pointer;
    }

    .chat-window {
      flex: 1;
      overflow-y: auto;
      padding: 1rem;
      display: flex;
      flex-direction: column;
    }

    .chat-messages {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      min-height: 100%;
    }

    .message {
      max-width: 75%;
      padding: 0.7rem 1rem;
      border-radius: 1rem;
      font-size: 1rem;
      line-height: 1.4;
      word-wrap: break-word;
      position: relative;
      margin-bottom: 0.3rem;
    }

    .message.sent {
      align-self: flex-end;
      background: linear-gradient(135deg, var(--send), var(--send1));
      color: #ffffff;
      border-bottom-right-radius: 0.3rem;
    }

    .message.received {
      align-self: flex-start;
      background-color: var(--recieved);
      color: #ffffff;
      border-bottom-left-radius: 0.3rem;
    }

    .message.system {
      align-self: center;
      background-color: #223;
      color: #ddd;
      font-style: italic;
      text-align: center;
      font-size: 0.9em;
      max-width: 80%;
      border-radius: 0.5rem;
    }

    .message[data-time]::after {
      content: attr(data-time);
      position: absolute;
      bottom: -18px;
      font-size: 0.7rem;
      color: #888;
      opacity: 0;
      transition: opacity 0.2s;
    }

    .message.sent[data-time]::after {
      right: 0;
    }

    .message.received[data-time]::after {
      left: 0;
    }

    .message:hover[data-time]::after {
      opacity: 1;
    }

    .chat-input {
      display: flex;
      padding: 0.75rem;
      border-top: 1px solid #333;
      background-color: var(--primary-bg);
    }

    .chat-input form {
      display: flex;
      flex-direction: column;
      width: 100%;
      gap: 0.5rem;
    }

    .chat-input input {
      width: 100%;
      padding: 0.8rem 1rem;
      border: none;
      border-radius: 1rem;
      background-color: var(--secondary-bg);
      color: #fff;
      font-size: 1rem;
      box-sizing: border-box;
    }

    .chat-input input:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }

    .chat-input button {
      width: 100%;
      padding: 0.8rem 1rem;
      border: none;
      border-radius: 1rem;
      background-color: var(--accent-bg);
      color: #fff;
      font-weight: bold;
      font-size: 1rem;
      cursor: pointer;
      transition: opacity 0.2s;
    }

    .chat-input button:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }

    .chat-input button:hover:not(:disabled) {
      opacity: 0.9;
    }

    .chat-input input:focus {
      outline: none;
      box-shadow: 0 0 0 2px var(--accent-bg);
    }

  .theme-switcher {
      position: absolute;
      top: 15px;
      right: 20px;
      z-index: 1001;
      width: 90px;
      height: 20px;
      background: var(--secondary-bg);
      border: 2px solid var(--border-color);
      border-radius: 20px;
      box-shadow: 0 2px 12px var(--shadow-dark);
      cursor: pointer;
  }

  .theme-track {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 4px;
  }

  .theme-indicator {
      position: absolute;
      width: 22px;
      height: 22px;
      background: var(--text-primary);
      border-radius: 50%;
      top: 50%;
      transform: translateY(-50%);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 15px var(--soft-glow);
      z-index: 2;
      border: 2px solid transparent;
      cursor: pointer;
  }

  .theme-indicator:hover {
      transform: translateY(-50%) scale(1.1);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 20px var(--soft-glow);
  }

  .theme-indicator:active {
      transform: translateY(-50%) scale(0.95);
  }

  .theme-step {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      position: absolute;
      z-index: 1;
      transition: all 0.2s ease;
      cursor: pointer;
      opacity: 0;
  }

  .theme-step:hover {
      opacity: 0.3;
      background: var(--accent-color);
  }

  /* Indicator positions for each theme (4 kademeli) */
  .theme-switcher[data-active="default"] .theme-indicator {
      left: 3px;
  }

  .theme-switcher[data-active="blue"] .theme-indicator {
      left: 23px;
  }

  .theme-switcher[data-active="purple"] .theme-indicator {
      left: 43px;
  }

  .theme-switcher[data-active="green"] .theme-indicator {
      left: 63px;
  }

  /* Theme step positions (invisible click areas) */
  .theme-step[data-theme="default"] {
      left: 3px;
      top: 50%;
      transform: translateY(-50%);
  }

  .theme-step[data-theme="blue"] {
      left: 23px;
      top: 50%;
      transform: translateY(-50%);
  }

  .theme-step[data-theme="purple"] {
      left: 43px;
      top: 50%;
      transform: translateY(-50%);
  }

  .theme-step[data-theme="green"] {
      left: 63px;
      top: 50%;
      transform: translateY(-50%);
  }

  /* Theme color previews - switch altında */
  .theme-preview {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      position: absolute;
      top: calc(100% + 6px);
      transition: all 0.2s ease;
      border: 1px solid var(--border-color);
      cursor: pointer;
      transform: translateX(-50%);
  }

  .theme-preview:hover {
      transform: translateX(-50%) scale(1.2);
  }

  .theme-preview[data-theme="default"] {
      left: 12px;
      background: linear-gradient(135deg, #000000, #000000);
  }

  .theme-preview[data-theme="blue"] {
      left: 32px;
      background: linear-gradient(135deg, #4fc3f7, #29b6f6);
  }

  .theme-preview[data-theme="purple"] {
      left: 52px;
      background: linear-gradient(135deg, #ba68c8, #ab47bc);
  }

  .theme-preview[data-theme="green"] {
      left: 72px;
      background: linear-gradient(135deg, #66bb6a, #4caf50);
  }

  /* Active preview highlight */
  .theme-switcher[data-active="default"] .theme-preview[data-theme="default"] {
      background: var(--primary-bg);
      box-shadow: none;
      border: none;
      transform: translateX(-50%) scale(1.3);
  }

  .theme-switcher[data-active="blue"] .theme-preview[data-theme="blue"] {
      background: var(--primary-bg);
      box-shadow: none;
      border: none;
      transform: translateX(-50%) scale(1.3);
  }

  .theme-switcher[data-active="purple"] .theme-preview[data-theme="purple"] {
      background: var(--primary-bg);
      box-shadow: none;
      border: none;
      transform: translateX(-50%) scale(1.3);
  }

  .theme-switcher[data-active="green"] .theme-preview[data-theme="green"] {
      background: var(--primary-bg);
      box-shadow: none;
      border: none;
      transform: translateX(-50%) scale(1.3);
  }

    @media (max-width: 600px) {
      /* Header mobil ayarları */
      .chat-header {
        height: 60px;
        padding: 0 0.5rem;
      }

      .header-center {
        font-size: 1.1rem;
      }

      .chat-logo {
        margin-left: 15px;
        width: 35px;
      }

      /* Chat window mobil ayarları */
      .chat-window {
        padding: 0.5rem;
      }

      .message {
        max-width: 85%;
        padding: 0.6rem 0.8rem;
        font-size: 1.05rem;
        margin-bottom: 0.4rem;
      }

      .message.system {
        font-size: 0.95em;
        max-width: 90%;
      }

      /* Chat input mobil ayarları */
      .chat-input {
        padding: 0.5rem;
      }

      .chat-input input,
      .chat-input button {
        font-size: 1.05rem;
        padding: 0.8rem 1rem;
      }

      .chat-input form {
        gap: 0.4rem;
      }

    }
    /* Çok küçük ekranlar için ek optimizasyon */
    @media (max-width: 400px) {
      .chat-header {
        height: 55px;
      }

      .header-center {
        font-size: 1rem;
      }

      .message {
        max-width: 90%;
        font-size: 1rem;
        padding: 0.5rem 0.7rem;
      }

      .chat-input input,
      .chat-input button {
        font-size: 1rem;
        padding: 0.6rem 0.8rem;
      }
    }
  </style>
</head>
<body>
    <!-- Desktop için sağ-sol banner reklamları -->
    <div class="desktop-ads-container">
      <div class="left-banner-ad">
        <ins class="adsbygoogle"
             style="display:block"
             data-ad-client="ca-pub-1234567890123456"
             data-ad-slot="1234567920"
             data-ad-format="auto"
             data-full-width-responsive="true"></ins>
        <script>
             (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
      </div>
      
      <div class="right-banner-ad">
        <ins class="adsbygoogle"
             style="display:block"
             data-ad-client="ca-pub-1234567890123456"
             data-ad-slot="1234567921"
             data-ad-format="auto"
             data-full-width-responsive="true"></ins>
        <script>
             (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
      </div>
    </div>



  <div class="chat-header">
    <div class="header-left">
      <a href="anasayfa.html" aria-label="Lingoano Ana Sayfa">
        <img src="logos/logo.png" alt="Logo" class="chat-logo" data-lang="logo-alt">
      </a>
    </div>
    <div class="header-center" data-lang="chat">Sohbet</div>
    <div class="header-right">
      <div class="theme-switcher" data-active="default" aria-label="Tema değiştirici" data-lang="theme-switcher-label">
        <div class="theme-track">
          <div class="theme-step" data-theme="default" title="Varsayılan Tema" data-lang="default-theme"></div>
          <div class="theme-step" data-theme="blue" title="Mavi Tema" data-lang="blue-theme"></div>
          <div class="theme-step" data-theme="purple" title="Mor Tema" data-lang="purple-theme"></div>
          <div class="theme-step" data-theme="green" title="Yeşil Tema" data-lang="green-theme"></div>
        </div>
        <div class="theme-indicator"></div>
        <div class="theme-preview" data-theme="default" title="Varsayılan Tema" data-lang="default-theme"></div>
        <div class="theme-preview" data-theme="blue" title="Mavi Tema" data-lang="blue-theme"></div>
        <div class="theme-preview" data-theme="purple" title="Mor Tema" data-lang="purple-theme"></div>
        <div class="theme-preview" data-theme="green" title="Yeşil Tema" data-lang="green-theme"></div>
      </div>
    </div>
  </div>

  <div id="chatWindow" class="chat-window">
    <div class="chat-messages" id="chatMessages">
    </div>
  </div>

    <div class="chat-input">
    <form id="messageForm">
      <div class="input-container">
        <input type="text" id="messageInput" data-lang="type-message" placeholder="Bağlantı kuruluyor..." disabled />
        <span id="dictionaryToggle" class="dictionary-toggle-text" title="Sözlük" aria-label="Sözlük" role="button" tabindex="0">
          📚
        </span>
      </div>
      <button type="submit" id="sendButton" disabled data-lang="send">Gönder</button>
    </form>
  </div>


  <!-- İletişim Popup -->
  <div id="contact-popup" class="contact-popup" style="display:none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(5px);">
    <div class="contact-popup-content" style="background-color: var(--bg-primary); margin: 15% auto; padding: 2rem; border-radius: 10px; width: 90%; max-width: 500px; text-align: center; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); border: 1px solid var(--border-color);">
      <h2 data-lang="contact-us" style="color: var(--accent-color); margin-bottom: 1rem;">Bizimle İletişime Geçin</h2>
      <p data-lang="contact-description" style="margin-bottom: 1rem; color: var(--text-primary);">Sorularınız, önerileriniz veya geri bildirimleriniz için bizimle iletişime geçebilirsiniz.</p>
      <p class="email" data-lang="contact-email" style="font-weight: bold; color: var(--accent-color); font-size: 1.1rem;">E-posta: contact@lingoano.com</p>
      <p data-lang="contact-response" style="margin-bottom: 1rem; color: var(--text-primary);">Yanıt süresi: 24-48 saat içinde</p>
      <button class="close" id="contact-close" data-lang="close" style="background-color: var(--accent-color); color: white; padding: 0.5rem 1.5rem; border: none; border-radius: 5px; cursor: pointer; font-size: 1rem; margin-top: 1rem;">Kapat</button>
    </div>
  </div>

  <!-- Donate UI -->
  <button class="donate-button">
      <span data-lang="donate-button">DONATE</span>
  </button>

  <div class="donate-popup">
      <div class="donate-popup-content">
          <div class="donate-popup-header">
              <h3 data-lang="donate">Lingoano'yu Destekle</h3>
              <button class="donate-close">&times;</button>
          </div>
          <div class="donate-popup-body">
              <p data-lang="donate-content">
                  Geliştirme aşamasındaki bu uygulamayı desteklemek isterseniz "Buy Me A Coffee" sayfasından destek olabilirsiniz
              </p>
              <a href="https://buymeacoffee.com/ahmetefeysr" target="_blank" rel="noopener noreferrer" class="bmc-button" data-lang="buy-me-coffee">
                  Buy Me a Coffee
              </a>
          </div>
      </div>
  </div>
  <script defer src="script/protocol_selector.js"></script>
  <script src="script/translations.js"></script>
  <script defer src="script/js.js"></script>
  <script defer src="script/dictionary-widget.js"></script>

  <script>
    // İletişim popup fonksiyonları (footer butonuyla uyumlu)
    (function(){
      var btn = document.getElementById('contact-btn');
      var popup = document.getElementById('contact-popup');
      var closeBtn = document.getElementById('contact-close');
      if (btn && popup) {
        btn.addEventListener('click', function(){ popup.style.display = 'block'; });
      }
      if (closeBtn && popup) {
        closeBtn.addEventListener('click', function(){ popup.style.display = 'none'; });
      }
      if (popup) {
        popup.addEventListener('click', function(e){ if (e.target === popup) popup.style.display = 'none'; });
      }
      document.addEventListener('keydown', function(e){ if (e.key === 'Escape' && popup && popup.style.display === 'block') popup.style.display = 'none'; });
    })();
  </script>

</body>
</html>
