URL Shortener + Auto Surfer (Blogger-ready) Code

URL Shortener + Auto Surfer (Blogger-ready)

This is a single-file HTML tool combining a URL Shortener (with QR code) and an Auto Surfer that rotates links on a timer. You can copy this and paste it into your own Blogger HTML gadget or theme.

<!-- ======= URL Shortener + Auto Surfer (Blogger-ready, single file) ======= -->
<style>
  :root{
    --brand:#031b4e; --accent:#00c389; --text:#0f172a; --muted:#64748b; --card:#f1f5f9;
  }
  *{box-sizing:border-box}
  body .sw-wrap{display:flex; flex-wrap:wrap; width:100%; min-height:480px; border:1px solid #e2e8f0; border-radius:14px; overflow:hidden; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial}
  .sw-left{flex:1 1 360px; background:var(--brand); color:#fff; padding:32px; position:relative}
  .sw-badge{display:flex; align-items:center; gap:8px; font-weight:700; letter-spacing:.3px}
  .sw-left h1{font-size:40px; line-height:1.1; margin:18px 0}
  .sw-left p{opacity:.9; line-height:1.6}
  .sw-form{display:flex; margin-top:22px; gap:0}
  .sw-input{flex:1; padding:12px 14px; border:none; border-radius:10px 0 0 10px; font-size:16px}
  .sw-btn{background:var(--accent); color:#fff; border:none; padding:12px 16px; font-weight:700; border-radius:0 10px 10px 0; cursor:pointer}
  .sw-btn:disabled{opacity:.6; cursor:not-allowed}
  .sw-result{margin-top:16px; background:rgba(255,255,255,.08); padding:12px; border-radius:10px; display:none}
  .sw-row{display:flex; gap:10px; align-items:center; margin-top:8px; flex-wrap:wrap}
  .sw-chip{background:#0ea5e9; color:#fff; font-size:12px; padding:4px 8px; border-radius:999px}
  .sw-copy{padding:8px 10px; border-radius:8px; border:1px solid rgba(255,255,255,.35); background:transparent; color:#fff; cursor:pointer}
  .sw-qr{width:120px; height:120px; border-radius:12px; border:1px solid rgba(255,255,255,.25); overflow:hidden}
  .sw-note{font-size:12px; opacity:.8; margin-top:10px}
  .sw-right{flex:1 1 360px; background:#d1d5db; display:flex; align-items:center; justify-content:center; padding:20px; color:#111827; position:relative}
  .sw-card{background:#fff; width:100%; max-width:720px; padding:18px; border-radius:12px; box-shadow:0 10px 30px rgba(2,6,23,.08)}
  .sw-card h3{margin:0 0 6px 0}
  .sw-controls{display:grid; grid-template-columns:1fr 140px 120px; gap:10px; margin:10px 0 14px}
  .sw-controls input,.sw-controls select,.sw-controls textarea{width:100%; padding:10px 12px; border:1px solid #e2e8f0; border-radius:10px; font-size:14px}
  .sw-controls textarea{grid-column:1/-1; min-height:70px; resize:vertical}
  .sw-actions{display:flex; gap:10px; margin:6px 0 12px}
  .sw-action{background:#111827; color:#fff; border:none; padding:10px 14px; border-radius:10px; cursor:pointer}
  .sw-action.secondary{background:#334155}
  iframe.sw-frame{width:100%; height:360px; border:1px solid #e2e8f0; border-radius:12px; background:#f8fafc}
  .sw-status{font-size:12px; color:var(--muted); margin-top:6px}
  @media (max-width:880px){
    .sw-controls{grid-template-columns:1fr}
  }
</style>

<div class="sw-wrap">
  <!-- LEFT: URL Shortener -->
  <section class="sw-left">
    <div class="sw-badge">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="#00c389" xmlns="http://www.w3.org/2000/svg"><path d="M3.9 12a4.1 4.1 0 0 1 4.1-4.1h4v2h-4a2.1 2.1 0 0 0 0 4.2h4v2h-4A4.1 4.1 0 0 1 3.9 12Zm12-4.1h-4v2h4a2.1 2.1 0 1 1 0 4.2h-4v2h4a4.1 4.1 0 1 0 0-8.2Z"/></svg>
      SHORTEN WORLD
    </div>
    <h1>URL Shortener</h1>
    <p>Shorten links with analytics and QR codes. Paste any long URL below and click <b>Shorten link</b>.</p>

    <div class="sw-form">
      <input id="longUrl" class="sw-input" type="url" placeholder="https://example.com/super/long/link" />
      <button id="shortenBtn" class="sw-btn">Shorten link</button>
    </div>

    <div id="resultBox" class="sw-result">
      <div class="sw-row">
        <span class="sw-chip">Short URL</span>
        <a id="shortUrl" href="#" target="_blank" rel="noopener" style="color:#fff;text-decoration:underline;word-break:break-all"></a>
        <button id="copyBtn" class="sw-copy">Copy</button>
      </div>
      <div class="sw-row">
        <div class="sw-qr">
          <img id="qrImg" src="" alt="QR" style="width:100%;height:100%;display:block"/>
        </div>
        <div class="sw-note">
          Tip: Share the QR code or copy the short link.  
          API: is.gd (client-side).
        </div>
      </div>
    </div>
  </section>

  <!-- RIGHT: Auto Surfer -->
  <section class="sw-right">
    <div class="sw-card">
      <h3>Inbuilt web surfer <u>auto surf</u> — loads links on a timer</h3>
      <div class="sw-controls">
        <input id="singleUrl" type="url" placeholder="Single link to surf (optional)"/>
        <input id="intervalSec" type="number" min="5" step="5" value="60" title="Seconds" />
        <select id="mode">
          <option value="single">Single link (reload)</option>
          <option value="list">List mode (rotate)</option>
        </select>
        <textarea id="urlList" placeholder="List mode: put one URL per line (https://...)"></textarea>
      </div>
      <div class="sw-actions">
        <button class="sw-action" id="startBtn">Start</button>
        <button class="sw-action secondary" id="stopBtn" disabled>Stop</button>
        <button class="sw-action secondary" id="loadShortBtn" title="Load the last created short link into the surfer">Use last short link</button>
      </div>
      <iframe class="sw-frame" id="surfFrame" sandbox="allow-scripts allow-forms allow-same-origin"></iframe>
      <div id="status" class="sw-status">Idle.</div>
    </div>
  </section>
</div>

<script>
(function(){
  // ---------- URL SHORTENER (is.gd) ----------
  const longUrl = document.getElementById('longUrl');
  const shortenBtn = document.getElementById('shortenBtn');
  const resultBox = document.getElementById('resultBox');
  const shortUrlA = document.getElementById('shortUrl');
  const copyBtn = document.getElementById('copyBtn');
  const qrImg = document.getElementById('qrImg');

  async function shorten() {
    const url = (longUrl.value || '').trim();
    if(!url){ alert('Please paste a valid URL.'); return; }
    shortenBtn.disabled = true; shortenBtn.textContent = 'Shortening...';
    try{
      const api = 'https://is.gd/create.php?format=json&url=' + encodeURIComponent(url);
      const res = await fetch(api, {method:'GET'});
      if(!res.ok) throw new Error('Network error');
      const data = await res.json();
      if(data.errorcode){ throw new Error(data.errormessage || 'Failed to shorten'); }
      const shortUrl = data.shorturl;
      shortUrlA.textContent = shortUrl;
      shortUrlA.href = shortUrl;
      qrImg.src = 'https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=' + encodeURIComponent(shortUrl);
      resultBox.style.display = 'block';
      lastShort = shortUrl;
    }catch(e){
      alert('Error: ' + e.message + '\nSome APIs may be blocked by CORS inside Blogger.');
    }finally{
      shortenBtn.disabled = false; shortenBtn.textContent = 'Shorten link';
    }
  }
  shortenBtn.addEventListener('click', shorten);
  copyBtn.addEventListener('click', async ()=> {
    try{
      await navigator.clipboard.writeText(shortUrlA.textContent);
      copyBtn.textContent = 'Copied!';
      setTimeout(()=> copyBtn.textContent='Copy', 1200);
    }catch(e){ alert('Copy failed: ' + e.message); }
  });

  // ---------- AUTO SURFER ----------
  const frame = document.getElementById('surfFrame');
  const startBtn = document.getElementById('startBtn');
  const stopBtn = document.getElementById('stopBtn');
  const loadShortBtn = document.getElementById('loadShortBtn');
  const singleUrl = document.getElementById('singleUrl');
  const urlList = document.getElementById('urlList');
  const intervalSec = document.getElementById('intervalSec');
  const modeSel = document.getElementById('mode');
  const status = document.getElementById('status');

  let timer = null, idx = 0, lastShort = '';

  function normalizeList(text){
    return text.split(/\r?\n/).map(s=>s.trim()).filter(Boolean);
  }

  function setStatus(msg){ status.textContent = msg; }

  function loadUrl(u){
    frame.src = u;
    setStatus('Loading: ' + u + ' — ' + new Date().toLocaleTimeString());
  }

  function start() {
    const sec = Math.max(5, parseInt(intervalSec.value,10) || 60);
    const mode = modeSel.value;

    let list = [];
    if(mode === 'single'){
      const u = (singleUrl.value || '').trim();
      if(!u){ alert('Enter a link in the "Single link" box, or select List mode.'); return; }
      list = [u];
    } else {
      list = normalizeList(urlList.value);
      if(list.length === 0){ alert('Add at least one URL (one per line) for List mode.'); return; }
    }

    // Initial load
    idx = 0;
    loadUrl(list[idx]);

    // Timer
    timer = setInterval(()=>{
      if(mode === 'single'){
        loadUrl(list[0]); // simply reload
      } else {
        idx = (idx + 1) % list.length;
        loadUrl(list[idx]);
      }
    }, sec*1000);

    startBtn.disabled = true;
    stopBtn.disabled = false;
    setStatus(status.textContent + ' — Interval: ' + sec + 's');
  }

  function stop(){
    if(timer){ clearInterval(timer); timer = null; }
    startBtn.disabled = false;
    stopBtn.disabled = true;
    setStatus('Stopped.');
  }

  startBtn.addEventListener('click', start);
  stopBtn.addEventListener('click', stop);

  loadShortBtn.addEventListener('click', ()=>{
    if(!lastShort){ alert('Shorten a link first.'); return; }
    singleUrl.value = lastShort;
    setStatus('Loaded last short link into the surfer.');
  });

})();
</script>
<!-- ===================== END FILE ===================== -->