URL Slug Generator

<div class="sg-options-grid" style="margin-bottom:16px;">
  <div>
    <label for="sg-separator">Separator</label>
    <select id="sg-separator" onchange="sgConvert()">
      <option value="-">Hyphen ( - )</option>
      <option value="_">Underscore ( _ )</option>
      <option value=".">Dot ( . )</option>
    </select>
  </div>
  <div>
    <label for="sg-maxlen">Max Length</label>
    <input type="number" id="sg-maxlen" value="80" min="10" max="500" oninput="sgConvert()" />
  </div>
  <div style="display:flex;flex-direction:column;justify-content:flex-end;">
    <div class="sg-checkbox-row" style="margin-bottom:6px;">
      <input type="checkbox" id="sg-stopwords" onchange="sgConvert()" />
      <label for="sg-stopwords">Remove stop words</label>
    </div>
    <div class="sg-checkbox-row">
      <input type="checkbox" id="sg-translit" checked onchange="sgConvert()" />
      <label for="sg-translit">Transliterate accents</label>
    </div>
  </div>
</div>

<div style="margin-bottom:10px;">
  <div class="sg-section-label">Preview Base URL</div>
  <div class="sg-base-url-row">
    <span class="sg-base-url-prefix">https://</span>
    <input type="text" id="sg-baseurl" class="sg-base-url-input" value="example.com/" placeholder="example.com/" oninput="sgConvert()" />
  </div>
</div>

<div style="margin-bottom:8px;">
  <div class="sg-section-label">Generated Slug</div>
  <div class="sg-result-box empty" id="sg-result">Your slug will appear here…</div>
  <div class="sg-preview-box empty" id="sg-preview">Full URL preview will appear here…</div>
</div>

<div class="sg-row" style="margin-top:12px;">
  <button class="sg-copy-btn" id="sg-copy-btn" onclick="sgCopySlug()">
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
    Copy Slug
  </button>
  <button class="sg-copy-btn" id="sg-copy-url-btn" onclick="sgCopyUrl()" style="background:#0284c7;">
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
    Copy Full URL
  </button>
  <span class="sg-char-badge" id="sg-char-count">0 chars</span>
</div>

<div class="sg-options-grid" style="margin-bottom:16px;">
  <div>
    <label for="sg-bulk-separator">Separator</label>
    <select id="sg-bulk-separator" onchange="sgBulkConvert()">
      <option value="-">Hyphen ( - )</option>
      <option value="_">Underscore ( _ )</option>
      <option value=".">Dot ( . )</option>
    </select>
  </div>
  <div>
    <label for="sg-bulk-maxlen">Max Length</label>
    <input type="number" id="sg-bulk-maxlen" value="80" min="10" max="500" oninput="sgBulkConvert()" />
  </div>
  <div style="display:flex;flex-direction:column;justify-content:flex-end;">
    <div class="sg-checkbox-row" style="margin-bottom:6px;">
      <input type="checkbox" id="sg-bulk-stopwords" onchange="sgBulkConvert()" />
      <label for="sg-bulk-stopwords">Remove stop words</label>
    </div>
    <div class="sg-checkbox-row">
      <input type="checkbox" id="sg-bulk-translit" checked onchange="sgBulkConvert()" />
      <label for="sg-bulk-translit">Transliterate accents</label>
    </div>
  </div>
</div>

<div class="sg-bulk-results" id="sg-bulk-results"></div>