<?php
require_once __DIR__ . '/../config.php';
require_once __DIR__ . '/../includes/functions.php';

$page_title   = 'Base64 Encoder & Decoder – Encode and Decode Text';
$page_desc    = 'Free Base64 encoder and decoder: encode or decode any text or data to Base64 format instantly – on ipcheck.tools.';
$page_current = 'base64';

require_once __DIR__ . '/header.php';
?>

<div class="hero">
  <div class="hero-label">Tool</div>
  <div class="hero-title">Base64 Encoder &amp; Decoder</div>
  <div class="hero-sub">Encode and decode text to and from Base64 format</div>
</div>

<div class="wrap">

  <div class="ad-slot"><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8287576653347400" data-ad-slot="2715725452" data-ad-format="auto" data-full-width-responsive="true"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script></div>

  <div style="display:flex; gap:8px; margin-bottom:4px;">
    <button onclick="setMode('encode')" id="tab-encode" class="btn btn-primary" style="font-size:13px;">
      <i class="ti ti-lock"></i> Encode
    </button>
    <button onclick="setMode('decode')" id="tab-decode" class="btn btn-ghost" style="font-size:13px;">
      <i class="ti ti-lock-open"></i> Decode
    </button>
  </div>

  <div class="card card-blue">
    <div class="card-title" id="card-label"><i class="ti ti-lock"></i> Encode to Base64</div>

    <div style="margin-bottom:12px;">
      <label style="font-size:11px; color:var(--text4); letter-spacing:0.8px; text-transform:uppercase; display:block; margin-bottom:6px;">Input</label>
      <textarea id="input-text"
        style="width:100%; background:var(--bg3); border:1px solid #2d3a52; border-radius:7px; padding:12px 14px; font-size:13px; color:var(--text); font-family:var(--font-mono); outline:none; resize:vertical; min-height:100px;"
        placeholder="Enter text to encode..."
        oninput="processInput()"></textarea>
    </div>

    <div style="margin-bottom:12px;">
      <label style="font-size:11px; color:var(--text4); letter-spacing:0.8px; text-transform:uppercase; display:block; margin-bottom:6px;">Result</label>
      <textarea id="output-text" readonly
        style="width:100%; background:var(--bg3); border:1px solid #1e2a3a; border-radius:7px; padding:12px 14px; font-size:13px; color:var(--blue-dim); font-family:var(--font-mono); outline:none; resize:vertical; min-height:100px;"
        placeholder="Result appears here..."></textarea>
    </div>

    <div style="display:flex; gap:8px; flex-wrap:wrap;">
      <button class="copy-btn" onclick="copyResult()" style="margin-top:0;">
        <i class="ti ti-copy"></i> Copy result
      </button>
      <button class="copy-btn" onclick="clearAll()" style="margin-top:0; background:#1a1a2a; border-color:#2a2a3a; color:var(--text3);">
        <i class="ti ti-trash"></i> Clear
      </button>
      <button class="copy-btn" onclick="swapInputOutput()" style="margin-top:0; background:#1a2a1a; border-color:#2a3a2a; color:var(--green);">
        <i class="ti ti-arrows-exchange"></i> Use result as input
      </button>
    </div>
  </div>

  <div class="card">
    <div class="card-title"><i class="ti ti-bookmark"></i> Examples</div>
    <?php foreach ([
      ['Hello, World!', 'Simple text'],
      ['https://ipcheck.tools', 'URL'],
      ['{"key":"value"}', 'JSON'],
      ['SGVsbG8sIFdvcmxkIQ==', 'Base64 → decode this'],
    ] as [$example, $desc]): ?>
    <div class="data-row">
      <span class="dk"><?= h($desc) ?></span>
      <span class="dv">
        <a href="#" onclick="loadExample(<?= json_encode($example) ?>); return false;"
           style="font-family:var(--font-mono); font-size:11px; color:var(--blue-dim);">
          <?= h(strlen($example) > 35 ? substr($example, 0, 35) . '…' : $example) ?>
        </a>
      </span>
    </div>
    <?php endforeach; ?>
  </div>

  <div class="ad-slot"><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8287576653347400" data-ad-slot="2715725452" data-ad-format="auto" data-full-width-responsive="true"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script></div>

  <div class="tools-row">
    <a href="/en/"           class="tool-btn"><i class="ti ti-home"></i><span>My IP</span></a>
    <a href="/en/base64.php" class="tool-btn current"><i class="ti ti-code"></i><span>Base64</span></a>
    <a href="/en/hash.php"   class="tool-btn"><i class="ti ti-hash"></i><span>Hash</span></a>
    <a href="/en/url-encoder.php" class="tool-btn"><i class="ti ti-link"></i><span>URL Encoder</span></a>
    <a href="/en/json-formatter.php" class="tool-btn"><i class="ti ti-braces"></i><span>JSON</span></a>
  </div>

  <div class="seo-box">
    <h2>What is Base64?</h2>
    <p>Base64 is an encoding scheme that converts binary data into a text format using 64 ASCII characters (A-Z, a-z, 0-9, +, /). It is commonly used to transmit binary data over text-based protocols like email or HTTP. Base64 is not encryption – it is just encoding. Anyone can decode Base64 data. Common use cases include encoding images in CSS, transmitting data in JSON APIs and storing binary data in text files.</p>
  </div>

<script>
let mode = 'encode';

function setMode(m) {
  mode = m;
  const btnEncode = document.getElementById('tab-encode');
  const btnDecode = document.getElementById('tab-decode');
  const label     = document.getElementById('card-label');
  if (m === 'encode') {
    btnEncode.className = 'btn btn-primary';
    btnDecode.className = 'btn btn-ghost';
    label.innerHTML = '<i class="ti ti-lock"></i> Encode to Base64';
    document.getElementById('input-text').placeholder = 'Enter text to encode...';
  } else {
    btnEncode.className = 'btn btn-ghost';
    btnDecode.className = 'btn btn-primary';
    label.innerHTML = '<i class="ti ti-lock-open"></i> Decode from Base64';
    document.getElementById('input-text').placeholder = 'Enter Base64 to decode...';
  }
  processInput();
}

function processInput() {
  const input  = document.getElementById('input-text').value;
  const output = document.getElementById('output-text');
  if (!input.trim()) { output.value = ''; return; }
  try {
    if (mode === 'encode') {
      output.value = btoa(unescape(encodeURIComponent(input)));
    } else {
      output.value = decodeURIComponent(escape(atob(input.trim())));
    }
    output.style.color = 'var(--blue-dim)';
  } catch(e) {
    output.value = 'Error: ' + e.message;
    output.style.color = 'var(--red)';
  }
}

function copyResult() {
  const val = document.getElementById('output-text').value;
  if (val) navigator.clipboard.writeText(val);
}

function clearAll() {
  document.getElementById('input-text').value  = '';
  document.getElementById('output-text').value = '';
}

function swapInputOutput() {
  const out = document.getElementById('output-text').value;
  if (out) { document.getElementById('input-text').value = out; processInput(); }
}

function loadExample(text) {
  document.getElementById('input-text').value = text;
  if (text.endsWith('==') || text.endsWith('=')) setMode('decode');
  else setMode('encode');
}
</script>

<?php require_once __DIR__ . '/footer.php'; ?>
