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

$page_title   = 'URL Encoder & Decoder – Encode and Decode URLs';
$page_desc    = 'Free URL encoder and decoder: encode or decode URLs and special characters instantly in your browser – on ipcheck.tools.';
$page_current = 'url-encoder';

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

<div class="hero">
  <div class="hero-label">Tool</div>
  <div class="hero-title">URL Encoder &amp; Decoder</div>
  <div class="hero-sub">Encode and decode URLs and special characters</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> URL Encode</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 or URL..."
        oninput="processInput()"></textarea>
    </div>

    <div style="display:flex; gap:16px; margin-bottom:14px; flex-wrap:wrap;">
      <label style="display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text3); cursor:pointer;">
        <input type="checkbox" id="opt-full" onchange="processInput()" style="cursor:pointer;">
        Encode full URL (incl. :// / ?)
      </label>
      <label style="display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text3); cursor:pointer;">
        <input type="checkbox" id="opt-plus" onchange="processInput()" style="cursor:pointer;">
        Spaces as + (form encoding)
      </label>
    </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 ([
      ['https://example.com/search?q=hello world&lang=en', 'URL with spaces'],
      ['price=10€ & discount=5%', 'Special characters'],
      ['user@example.com', 'Email address'],
      ['Hello World!', 'Simple text'],
    ] 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) > 40 ? substr($example, 0, 40) . '…' : $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/url-encoder.php" class="tool-btn current"><i class="ti ti-link"></i><span>URL Encoder</span></a>
    <a href="/en/base64.php"      class="tool-btn"><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/json-formatter.php" class="tool-btn"><i class="ti ti-braces"></i><span>JSON</span></a>
  </div>

  <div class="seo-box">
    <h2>What is URL encoding?</h2>
    <p>URL encoding (also called percent-encoding) converts special characters into a URL-safe format. Characters like spaces, umlauts or special characters (& = ?) are converted to percent notation – for example, a space becomes <code>%20</code> and & becomes <code>%26</code>. This is necessary for URLs to be transmitted correctly, especially in GET parameters, form values or API requests.</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> URL Encode';
    document.getElementById('input-text').placeholder = 'Enter text or URL...';
  } else {
    btnEncode.className = 'btn btn-ghost';
    btnDecode.className = 'btn btn-primary';
    label.innerHTML = '<i class="ti ti-lock-open"></i> URL Decode';
    document.getElementById('input-text').placeholder = 'Enter encoded URL...';
  }
  processInput();
}

function processInput() {
  const input   = document.getElementById('input-text').value;
  const optFull = document.getElementById('opt-full').checked;
  const optPlus = document.getElementById('opt-plus').checked;
  const output  = document.getElementById('output-text');
  if (!input.trim()) { output.value = ''; return; }
  try {
    if (mode === 'encode') {
      let result = optFull ? encodeURIComponent(input) : input.replace(/[^A-Za-z0-9\-_.~:/?#\[\]@!$&'()*+,;=%]/g, c => encodeURIComponent(c));
      if (optPlus) result = result.replace(/%20/g, '+');
      output.value = result;
    } else {
      let result = input;
      if (optPlus) result = result.replace(/\+/g, '%20');
      output.value = decodeURIComponent(result);
    }
    output.style.color = 'var(--blue-dim)';
  } catch(e) {
    output.value = 'Error: invalid input – ' + 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;
  setMode('encode');
}
</script>

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