<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Multi-Language Encoder — @mr_big_mouse</title>
  <meta name="referrer" content="no-referrer">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-tomorrow.css" />
  <style>
    :root{
      --bg:#071026; --muted:#9fb0c8; --accent1:#7ce7c7; --accent2:#7b61ff;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; min-height:100vh;
      background: radial-gradient(1200px 600px at 10% 10%, rgba(123,97,255,0.06), transparent 6%),
                   radial-gradient(800px 400px at 90% 90%, rgba(124,231,199,0.04), transparent 8%),
                   linear-gradient(180deg,#061020,#07142a);
      color:#e6eef6; display:flex; align-items:center; justify-content:center; padding:28px;
      -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
    }
    .container{width:100%; max-width:1200px}

    /* === Animated Header === */
    .site-header {display:flex;align-items:center;gap:16px;margin-bottom:18px;flex-direction:column;text-align:center;animation: fadeSlide .9s ease forwards;}
    .logo-animated {
      width:80px;height:80px;border-radius:16px;
      background:linear-gradient(135deg,#22d3ee,#6366f1,#ec4899,#f97316);
      display:flex;align-items:center;justify-content:center;font-size:36px;color:#fff;
      box-shadow:0 10px 30px rgba(11,14,22,0.6), 0 0 40px rgba(123,97,255,0.08);
      transform: translateZ(0);
      animation: glowPulse 3s infinite alternate;
    }
    .animated-title {
      font-size:34px;font-weight:800;line-height:1;margin:8px 0 0;
      background: linear-gradient(90deg,#22d3ee,#a855f7,#ec4899,#f97316,#10b981);
      background-size:400% 400%;
      -webkit-background-clip:text; -webkit-text-fill-color:transparent;
      animation: gradientFlow 6s ease infinite, subtleMove 8s ease-in-out infinite;
      text-shadow: 0 0 20px rgba(0,0,0,0.25);
      display:inline-block;
    }
    .subtitle {color:#9fb0c8;font-size:14px;margin-top:8px;opacity:0;animation: fadeIn 1.2s ease .3s forwards;max-width:860px}
    @keyframes gradientFlow {0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
    @keyframes glowPulse {from{box-shadow:0 0 18px rgba(56,189,248,0.45)} to{box-shadow:0 0 38px rgba(236,72,153,0.85)}}
    @keyframes fadeIn {to{opacity:1}}
    @keyframes fadeSlide {0%{opacity:0;transform:translateY(-8px)}100%{opacity:1;transform:translateY(0)}}
    @keyframes subtleMove {0%{transform:translateY(0)}50%{transform:translateY(-4px)}100%{transform:translateY(0)}}

    /* Telegram badge */
    .tg-badge {
      display:inline-flex; align-items:center; gap:10px; margin-top:12px;
      padding:8px 12px; border-radius:999px; font-weight:700; cursor:pointer;
      background: linear-gradient(90deg, rgba(123,97,255,0.12), rgba(124,231,199,0.08));
      border:1px solid rgba(255,255,255,0.04);
      transition: transform .18s ease, box-shadow .18s ease;
      box-shadow: 0 6px 18px rgba(11,14,22,0.5);
      text-decoration:none; color:inherit;
    }
    .tg-badge:hover{ transform:translateY(-4px); box-shadow: 0 18px 40px rgba(11,14,22,0.6); }
    .tg-icon {
      width:36px; height:36px; border-radius:10px; display:inline-grid;place-items:center;
      background: linear-gradient(135deg,#2eb3ff,#7b61ff); color:white; font-weight:800; font-size:18px;
      box-shadow: 0 6px 18px rgba(46,179,255,0.12), inset 0 -4px 10px rgba(0,0,0,0.12);
      transform: translateZ(0);
      animation: tgGlow 2.8s ease-in-out infinite;
    }
    .tg-username { font-size:15px; color: #e6eef6; }
    @keyframes tgGlow {
      0% { box-shadow: 0 6px 14px rgba(46,179,255,0.12); transform: translateY(0); }
      50% { box-shadow: 0 18px 40px rgba(123,97,255,0.12); transform: translateY(-3px); }
      100% { box-shadow: 0 6px 14px rgba(46,179,255,0.12); transform: translateY(0); }
    }

    .grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;margin-top:18px}
    .card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:12px;padding:14px;box-shadow:0 10px 30px rgba(2,6,23,0.6);border:1px solid rgba(255,255,255,0.03)}
    label{display:block;font-size:13px;color:var(--muted); margin-bottom:8px}
    textarea,input,select{width:100%;padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:inherit;font-family:ui-monospace,monospace;min-height:160px;resize:vertical}
    input[type="text"], select{min-height:44px}
    .controls{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
    .btn{background:linear-gradient(90deg,var(--accent1),var(--accent2));border:0;color:#012;padding:10px 14px;border-radius:10px;cursor:pointer;font-weight:700;box-shadow:0 8px 22px rgba(3,7,18,0.45);transition:transform .14s ease,box-shadow .14s}
    .btn:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(3,7,18,0.6)}
    .btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted);font-weight:600;padding:9px 12px}
    .preview-wrap{height:360px;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,0.03);background:linear-gradient(180deg, rgba(0,0,0,0.24), rgba(255,255,255,0.02));display:flex;flex-direction:column}
    .preview-toolbar{display:flex;gap:8px;padding:8px;align-items:center;background:linear-gradient(180deg, rgba(0,0,0,0.06), transparent);border-bottom:1px solid rgba(255,255,255,0.02)}
    iframe{flex:1;border:0;width:100%;height:100%}
    pre.code-block{flex:1;overflow:auto;padding:12px;margin:0;background:transparent;color:#e6eef6}
    .row{display:flex;gap:8px;align-items:center;margin-top:10px}
    .hint{font-size:13px;color:var(--muted)}
    footer{margin-top:18px;text-align:center;color:var(--muted);font-size:13px}
    @media (max-width:980px){.grid{grid-template-columns:1fr}.preview-wrap{height:260px}}
  </style>
</head>
<body>
  <div class="container" role="main" aria-live="polite">
    <header class="site-header" role="banner">
      <div class="logo-animated" aria-hidden="true">🔐</div>
      <div>
        <h1 class="animated-title">Multi-Language Encoder</h1>
        <div class="subtitle">Encrypt &amp; Decrypt any code — HTML, CSS, JS, Python, Java, JSON, Markdown or plain text. Client-side XOR + Base64; nothing is sent to servers.</div>

        <!-- Telegram badge with animated colorful style -->
        <a class="tg-badge" href="https://t.me/mr_big_mouse" target="_blank" rel="noopener noreferrer" aria-label="Open Telegram @mr_big_mouse">
          <span class="tg-icon">✈️</span>
          <span class="tg-username">@mr_big_mouse</span>
        </a>
      </div>
    </header>

    <main class="grid" role="main">
      <section class="card" aria-label="Editor">
        <label for="langSelect">Language / Type</label>
        <select id="langSelect" aria-label="Language selector">
          <option value="auto">Auto-detect (by content)</option>
          <option value="html">HTML</option>
          <option value="css">CSS</option>
          <option value="javascript">JavaScript</option>
          <option value="json">JSON</option>
          <option value="python">Python</option>
          <option value="java">Java</option>
          <option value="markdown">Markdown</option>
          <option value="text">Plain text / Other</option>
        </select>

        <label for="inputHtml" style="margin-top:12px">Input code / text</label>
        <textarea id="inputHtml" placeholder="Paste your code here..."></textarea>

        <div style="margin-top:10px;">
          <label for="keyInput">Encryption Key</label>
          <input id="keyInput" type="text" placeholder="Enter key (used for XOR)" />
        </div>

        <div class="controls">
          <button id="encodeBtn" class="btn">Encode</button>
          <button id="decodeBtn" class="btn ghost">Decode → Input</button>
          <button id="clearBtn" class="btn ghost">Clear</button>
          <div style="margin-left:auto;display:flex;gap:8px;align-items:center;">
            <button id="loadFileBtn" class="btn ghost">Load .code</button>
            <input id="fileInput" type="file" accept=".html,.js,.css,.py,.java,.json,.md,.txt" style="display:none" />
          </div>
        </div>

        <div style="margin-top:12px" class="hint">Tip: For HTML preview set Language=HTML. Use Ctrl/Cmd + Enter to encode. Drag & drop files into the editor.</div>
      </section>

      <section class="card" aria-label="Output and Preview">
        <label for="output">Output (encoded)</label>
        <textarea id="output" class="output" readonly placeholder="Encoded output will appear here..."></textarea>

        <div class="row" style="margin-top:10px">
          <button id="copyOut" class="btn ghost">Copy Output</button>
          <button id="renderBtn" class="btn">Render / Preview</button>
          <button id="openTabBtn" class="btn ghost">Open in New Tab</button>
          <button id="downloadBtn" class="btn ghost">Download Encoded</button>
          <div style="margin-left:auto;color:var(--muted)" id="status">Ready</div>
        </div>

        <div style="margin-top:12px" class="preview-wrap" aria-live="polite">
          <div class="preview-toolbar">
            <div style="font-size:13px;color:var(--muted)">Preview</div>
            <div style="margin-left:auto;color:var(--muted);font-size:13px" id="previewStatus">Idle</div>
          </div>

          <iframe id="previewFrame" sandbox="allow-scripts allow-forms"></iframe>
          <pre id="codePreview" class="code-block"><code id="codePreviewInner" class="language-markup"></code></pre>
        </div>

        <footer>Client-side only • XOR + Base64 • Keep your key safe • <a href="https://t.me/mr_big_mouse" target="_blank" rel="noopener noreferrer" style="color:inherit;text-decoration:underline;">@mr_big_mouse</a></footer>
      </section>
    </main>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-core.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
  <script>
  if(window.Prism && Prism.plugins && Prism.plugins.autoloader){
    Prism.plugins.autoloader.languages_path = 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/';
  }
  </script>

  <script>
  // Utilities
  const $ = id => document.getElementById(id);
  function strToUint8(s){ return new TextEncoder().encode(s); }
  function uint8ToStr(u8){ return new TextDecoder().decode(u8); }
  function xorWithKey(dataBytes, keyString){
    if(!keyString) return dataBytes;
    const keyBytes = strToUint8(keyString);
    const out = new Uint8Array(dataBytes.length);
    for(let i=0;i<dataBytes.length;i++) out[i] = dataBytes[i] ^ keyBytes[i % keyBytes.length];
    return out;
  }
  function bytesToBase64(u8){
    let CHUNK = 0x8000, index = 0, result = '';
    while(index < u8.length){
      let slice = u8.subarray(index, Math.min(index + CHUNK, u8.length));
      result += String.fromCharCode.apply(null, slice);
      index += CHUNK;
    }
    return btoa(result);
  }
  function base64ToBytes(b64){
    const bin = atob(b64);
    const len = bin.length;
    const bytes = new Uint8Array(len);
    for(let i=0;i<len;i++) bytes[i] = bin.charCodeAt(i);
    return bytes;
  }
  function encodeString(inputStr, key){ const bytes = strToUint8(inputStr); const xored = xorWithKey(bytes, key || ''); return bytesToBase64(xored); }
  function decodeToString(b64, key){
    try{
      const bytes = base64ToBytes(b64);
      const xored = xorWithKey(bytes, key || '');
      return uint8ToStr(xored);
    }catch(e){
      throw new Error('Invalid input for decoding');
    }
  }

  // Elements
  const inputEl = $('inputHtml'), keyEl = $('keyInput'), outEl = $('output');
  const langSelect = $('langSelect'), previewFrame = $('previewFrame'), codePreview = $('codePreview'), codeInner = $('codePreviewInner');
  const encodeBtn = $('encodeBtn'), decodeBtn = $('decodeBtn'), clearBtn = $('clearBtn');
  const copyBtn = $('copyOut'), renderBtn = $('renderBtn'), openTabBtn = $('openTabBtn'), downloadBtn = $('downloadBtn');
  const statusEl = $('status'), previewStatus = $('previewStatus');
  const loadFileBtn = $('loadFileBtn'), fileInput = $('fileInput');

  function setStatus(t){ statusEl.textContent = t; }
  function setPreviewStatus(t){ previewStatus.textContent = t; }

  // Handlers
  encodeBtn.addEventListener('click', ()=>{
    const text = inputEl.value || '';
    const key = keyEl.value || '';
    try{
      outEl.value = encodeString(text, key);
      setStatus('Encoded ✔');
      setPreviewStatus('Idle');
    }catch(e){
      setStatus('Encode error');
      console.error(e);
    }
  });

  decodeBtn.addEventListener('click', ()=>{
    const b64 = outEl.value || '';
    const key = keyEl.value || '';
    if(!b64){ setStatus('No output to decode'); return; }
    try{
      const decoded = decodeToString(b64, key);
      inputEl.value = decoded;
      setStatus('Decoded into input ✔');
    }catch(e){
      setStatus('Decode failed: invalid data or wrong key');
      console.error(e);
    }
  });

  clearBtn.addEventListener('click', ()=>{
    inputEl.value = ''; outEl.value = ''; keyEl.value = ''; setStatus('Cleared'); setPreviewStatus('Idle'); previewFrame.srcdoc=''; showCodePreview(false);
  });

  copyBtn.addEventListener('click', async ()=>{
    try{
      await navigator.clipboard.writeText(outEl.value || '');
      setStatus('Copied ✔');
    }catch(e){
      outEl.select(); document.execCommand('copy'); setStatus('Copied (fallback)');
    }
  });

  // Render / Preview
  function detectLanguage(text){
    if(!text) return 'text';
    const trimmed = text.trim();
    if(trimmed.startsWith('<') && trimmed.endsWith('>')) return 'html';
    try{ JSON.parse(trimmed); return 'json'; }catch(e){}
    if(/\bdef\s+\w+\(|\bimport\s+\w+/.test(trimmed)) return 'python';
    if(/\bclass\s+\w+\{|\bpublic\s+class\b/.test(trimmed)) return 'java';
    if(/function\s+\w+\(|=>|console\.log\(|var\s+\w+/.test(trimmed)) return 'javascript';
    return 'text';
  }
  function showCodePreview(show){
    if(show){ codePreview.style.display='block'; previewFrame.style.display='none'; } else { codePreview.style.display='none'; previewFrame.style.display='block'; }
  }

  renderBtn.addEventListener('click', ()=>{
    const b64 = outEl.value || ''; const key = keyEl.value || '';
    if(!b64){ setPreviewStatus('No encoded output'); return; }
    try{
      const decoded = decodeToString(b64, key);
      let lang = langSelect.value;
      if(lang === 'auto') lang = detectLanguage(decoded);
      if(lang === 'html'){
        showCodePreview(false);
        previewFrame.srcdoc = decoded;
        setPreviewStatus('Rendered HTML');
      } else {
        showCodePreview(true);
        let prismLang = lang === 'text' ? 'none' : (lang === 'javascript' ? 'javascript' : (lang === 'json' ? 'json' : (lang==='python'?'python':(lang==='java'?'java':(lang==='css'?'css':(lang==='markdown'?'markdown':'markup'))))));
        codeInner.className = 'language-' + prismLang;
        codeInner.textContent = decoded;
        if(window.Prism) Prism.highlightElement(codeInner);
        setPreviewStatus('Rendered code ('+lang+')');
      }
    }catch(e){
      setPreviewStatus('Render failed (wrong key or invalid)');
      console.error(e);
    }
  });

  openTabBtn.addEventListener('click', ()=>{
    const b64 = outEl.value || ''; const key = keyEl.value || '';
    if(!b64){ setPreviewStatus('Nothing to open'); return; }
    try{
      const decoded = decodeToString(b64, key);
      let lang = langSelect.value;
      if(lang === 'auto') lang = detectLanguage(decoded);
      if(lang === 'html'){
        const blob = new Blob([decoded], {type:'text/html'}); const url = URL.createObjectURL(blob); const win = window.open(url, '_blank');
        if(!win){ setPreviewStatus('Popup blocked'); URL.revokeObjectURL(url); return; }
        setPreviewStatus('Opened HTML in new tab'); setTimeout(()=> URL.revokeObjectURL(url), 15000);
      } else {
        const ext = lang === 'python' ? '.py' : (lang==='javascript'?'.js':(lang==='json'?'.json':(lang==='java'?'.java':(lang==='css'?'.css':(lang==='markdown'?'.md':'.txt')))));
        const blob = new Blob([decoded], {type:'text/plain'}); const url = URL.createObjectURL(blob);
        const a = document.createElement('a'); a.href = url; a.download = 'preview' + ext; document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(url);
        setPreviewStatus('Downloaded preview'+ext);
      }
    }catch(e){
      setPreviewStatus('Open failed (wrong key or invalid)'); console.error(e);
    }
  });

  downloadBtn.addEventListener('click', ()=>{
    const data = outEl.value || ''; const blob = new Blob([data], {type:'text/plain;charset=utf-8'}); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'encoded.txt'; document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(url); setStatus('Downloaded encoded.txt');
  });

  // file load
  loadFileBtn.addEventListener('click', ()=> fileInput.click());
  fileInput.addEventListener('change', (ev)=>{
    const f = ev.target.files && ev.target.files[0];
    if(!f) return;
    const reader = new FileReader();
    reader.onload = e => {
      inputEl.value = e.target.result || '';
      const name = f.name || ''; const ext = name.split('.').pop().toLowerCase();
      const map = {html:'html',htm:'html',css:'css',js:'javascript',py:'python',java:'java',json:'json',md:'markdown',txt:'text'};
      if(map[ext]) langSelect.value = map[ext];
      setStatus('Loaded file: ' + name);
    };
    reader.readAsText(f);
    fileInput.value = '';
  });

  // drag & drop
  inputEl.addEventListener('dragover', e=>{ e.preventDefault(); e.dataTransfer.dropEffect='copy'; });
  inputEl.addEventListener('drop', e=>{
    e.preventDefault();
    const f = e.dataTransfer.files && e.dataTransfer.files[0];
    if(f){
      const reader = new FileReader();
      reader.onload = ev => { inputEl.value = ev.target.result || ''; setStatus('Loaded dropped file: ' + f.name); };
      reader.readAsText(f);
    } else {
      inputEl.value = e.dataTransfer.getData('text/plain') || inputEl.value;
    }
  });

  // keyboard shortcut
  document.addEventListener('keydown', (e)=>{ if((e.ctrlKey||e.metaKey) && e.key === 'Enter') encodeBtn.click(); });

  // initial states
  codePreview.style.display='none';
  if(!inputEl.value) inputEl.value = '<!-- Example HTML: set language=HTML to preview -->\n<div>\n  <h2 style="color:#7ce7c7">Hello from Multi-Language Encoder</h2>\n  <p>Use key to encrypt/decrypt</p>\n</div>';
  </script>
</body>
</html>