/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  color: black;
  font-family: Verdana;
}
<!-- PASANG SELURUH BLOK INI DI RENTRY.CO -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap" rel="stylesheet">
<style>
  :root{
    --bg1: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
    --glass: rgba(255,255,255,0.06);
    --accent: #c78cff;
    --accent2:#6ec1ff;
    --muted: rgba(255,255,255,0.65);
    --glass-border: rgba(255,255,255,0.08);
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  }
  body{
    margin:0;
    padding:20px;
    background:
      radial-gradient(600px 400px at 10% 10%, rgba(199,140,255,0.08), transparent 10%),
      radial-gradient(500px 300px at 90% 90%, rgba(110,193,255,0.06), transparent 10%),
      #0f1224;
    min-height:100vh;
    color: #fff;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }

  .card{
    max-width:820px;
    margin:28px auto;
    padding:28px;
    border-radius:18px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    box-shadow: 0 8px 30px rgba(2,6,23,0.6);
    border: 1px solid var(--glass-border);
    position:relative;
    overflow:hidden;
    backdrop-filter: blur(10px) saturate(120%);
  }

  .hero{
    display:flex;
    gap:20px;
    align-items:center;
  }

  .logo{
    width:84px;
    height:84px;
    border-radius:14px;
    background: linear-gradient(135deg,var(--accent),var(--accent2));
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    font-size:28px;
    color:#071026;
    box-shadow: 0 6px 18px rgba(110,193,255,0.06), inset 0 -6px 18px rgba(255,255,255,0.12);
  }

  h1{
    margin:0;
    font-size:20px;
    letter-spacing:-0.2px;
  }
  p.lead{
    margin:4px 0 0 0;
    color:var(--muted);
    font-size:13px;
  }

  .grid{
    display:grid;
    grid-template-columns: 1fr 360px;
    gap:18px;
    margin-top:18px;
  }

  /* left panel */
  .panel{
    background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));
    border-radius:12px;
    padding:14px;
    border: 1px solid rgba(255,255,255,0.03);
  }

  label{
    display:block;
    font-size:12px;
    color:var(--muted);
    margin-bottom:8px;
  }

  textarea, input[type="text"], input[type="password"]{
    width:100%;
    border-radius:10px;
    padding:12px 14px;
    border: none;
    outline:none;
    resize:vertical;
    min-height:110px;
    background: rgba(255,255,255,0.02);
    color: #fff;
    font-size:14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
  }
  input[type="text"], input[type="password"]{ min-height:44px; }

  .row{
    display:flex;
    gap:10px;
    align-items:center;
  }

  .btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 14px;
    border-radius:10px;
    border: none;
    cursor:pointer;
    font-weight:600;
    background: linear-gradient(90deg,var(--accent),var(--accent2));
    color:#071026;
    box-shadow: 0 6px 20px rgba(99,66,160,0.12);
  }
  .btn.ghost{
    background:transparent;
    color:var(--muted);
    border:1px dashed rgba(255,255,255,0.04);
    font-weight:600;
  }

  .preview{
    margin-top:12px;
    padding:12px;
    border-radius:10px;
    min-height:120px;
    background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));
    border:1px solid rgba(255,255,255,0.03);
    color:var(--muted);
    white-space:pre-wrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;
    font-size:13px;
  }

  /* right panel */
  .meta{
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .lock{
    display:flex;
    align-items:center;
    gap:12px;
  }
  .lock .icon{
    width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,0.03);
  }

  .small{
    font-size:12px;color:var(--muted);
  }

  .encoded{
    font-family: ui-monospace, "Roboto Mono", monospace;
    font-size:12px;
    min-height:80px;
    padding:9px;
    border-radius:8px;
    background: rgba(2,6,23,0.5);
    border:1px solid rgba(255,255,255,0.03);
    color:#e6e6ff;
    overflow:auto;
  }

  .controls{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
  }

  .notice{
    font-size:12px;
    color: #e7d9ff;
    opacity:0.9;
    background: linear-gradient(90deg, rgba(199,140,255,0.06), rgba(110,193,255,0.03));
    padding:8px;
    border-radius:8px;
    border:1px solid rgba(255,255,255,0.02);
  }

  .unlock-area{ display:none; margin-top:8px; }

  footer.help{
    margin-top:14px;
    font-size:12px;color:var(--muted);
  }

  @media (max-width:860px){
    .grid{ grid-template-columns: 1fr; }
    .logo{ width:64px;height:64px;font-size:22px; }
  }
</style>

<div class="card" id="secret-card">
  <div class="hero">
    <div class="logo">S</div>
    <div>
      <h1>Secret Note — widget</h1>
      <p class="lead">Tulis pesan, kunci dengan password. Dibuka hanya saat yang punya password memasukkan kata kunci yang benar.</p>
    </div>
  </div>

  <div class="grid">
    <!-- Left: compose -->
    <div class="panel">
      <label for="msg">Tulis pesan rahasiamu</label>
      <textarea id="msg" placeholder="Tuliskan pesan yang ingin kamu rahasiakan..."></textarea>

      <div style="height:12px;"></div>

      <label for="pwd">Password (untuk mengunci)</label>
      <input id="pwd" type="password" placeholder="Ketik password (minimal 3 karakter)">

      <div style="height:12px;"></div>

      <div class="row">
        <button class="btn" id="lockBtn">🔒 Kunci pesan</button>
        <button class="btn ghost" id="clearBtn">🧹 Reset</button>
      </div>

      <div style="height:12px;"></div>

      <label>Preview terenkripsi (bagikan ini jika mau)</label>
      <div id="encoded" class="encoded">Belum ada data terenkripsi.</div>

      <div style="height:12px;"></div>

      <div class="controls">
        <button class="btn ghost" id="copyEnc">📋 Salin terenkripsi</button>
        <button class="btn ghost" id="downloadEnc">⬇️ Unduh (txt)</button>
      </div>
    </div>

    <!-- Right: buka / metadata -->
    <div class="panel meta">
      <div class="lock">
        <div class="icon">🔐</div>
        <div>
          <div style="font-weight:700">Buka pesan</div>
          <div class="small">Tempelkan teks terenkripsi (atau paste whole rentry if shared) lalu masukkan password.</div>
        </div>
      </div>

      <label for="encInput">Teks terenkripsi</label>
      <textarea id="encInput" placeholder="Tempel teks terenkripsi di sini..."></textarea>

      <div class="row">
        <input id="pwdOpen" type="password" placeholder="Masukkan password untuk membuka" style="flex:1">
        <button class="btn" id="openBtn">🔓 Buka</button>
      </div>

      <div class="unlock-area" id="unlocked">
        <div class="notice">Pesan terbuka — salin atau baca dengan aman.</div>
        <div class="preview" id="preview">—</div>
        <div style="height:8px;"></div>
        <div class="controls">
          <button class="btn ghost" id="copyMsg">📋 Salin pesan</button>
          <button class="btn ghost" id="hideMsg">🙈 Sembunyikan</button>
        </div>
      </div>

      <footer class="help">Catatan: Keamanan bersifat client-side. Jika ingin benar-benar aman, gunakan layanan enkripsi end-to-end.</footer>
    </div>
  </div>
</div>

<script>
/* Simple password-based obfuscation:
   - XOR each byte with password char codes repeated
   - then Base64 encode.
   Not secure for real secrets; hanya untuk fun/share.
*/

function toUint8Array(str){
  const enc = new TextEncoder();
  return enc.encode(str);
}
function fromUint8Array(u8){
  const dec = new TextDecoder();
  return dec.decode(u8);
}

function xorWithKey(bytes, key){
  if(!key || key.length===0) return bytes;
  const keyBytes = toUint8Array(key);
  const out = new Uint8Array(bytes.length);
  for(let i=0;i<bytes.length;i++){
    out[i] = bytes[i] ^ keyBytes[i % keyBytes.length];
  }
  return out;
}
function encodeMessage(plain, password){
  const plainBytes = toUint8Array(plain);
  const xored = xorWithKey(plainBytes, password);
  // convert to base64
  let binary = '';
  for(let i=0;i<xored.length;i++) binary += String.fromCharCode(xored[i]);
  return btoa(binary);
}
function decodeMessage(encoded, password){
  try{
    const binary = atob(encoded);
    const bytes = new Uint8Array(binary.length);
    for(let i=0;i<binary.length;i++) bytes[i] = binary.charCodeAt(i);
    const xored = xorWithKey(bytes, password);
    return fromUint8Array(xored);
  }catch(e){
    throw new Error('Format terenkripsi tidak valid.');
  }
}

/* UI logic */
const msgEl = document.getElementById('msg');
const pwdEl = document.getElementById('pwd');
const lockBtn = document.getElementById('lockBtn');
const encodedEl = document.getElementById('encoded');
const copyEnc = document.getElementById('copyEnc');
const downloadEnc = document.getElementById('downloadEnc');
const clearBtn = document.getElementById('clearBtn');

const encInput = document.getElementById('encInput');
const pwdOpen = document.getElementById('pwdOpen');
const openBtn = document.getElementById('openBtn');
const unlocked = document.getElementById('unlocked');
const preview = document.getElementById('preview');
const copyMsg = document.getElementById('copyMsg');
const hideMsg = document.getElementById('hideMsg');

lockBtn.addEventListener('click', ()=>{
  const plain = msgEl.value.trim();
  const pwd = pwdEl.value;
  if(!plain){
    alert('Isi dulu pesannya ya.');
    return;
  }
  if(!pwd || pwd.length < 3){
    alert('Password minimal 3 karakter (ini untuk demo).');
    return;
  }
  const enc = encodeMessage(plain, pwd);
  encodedEl.textContent = enc;
});

copyEnc.addEventListener('click', ()=>{
  const text = encodedEl.textContent;
  if(!text || text.includes('Belum')){
    alert('Belum ada data terenkripsi.');
    return;
  }
  navigator.clipboard.writeText(text).then(()=>{
    alert('Terenkripsi disalin ke clipboard!');
  }).catch(()=>alert('Gagal menyalin.'));
});

downloadEnc.addEventListener('click', ()=>{
  const text = encodedEl.textContent;
  if(!text || text.includes('Belum')) { alert('Belum ada data terenkripsi.'); return; }
  const blob = new Blob([text], {type:'text/plain'});
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a'); a.href=url; a.download='secret.txt'; document.body.appendChild(a); a.click();
  a.remove(); URL.revokeObjectURL(url);
});

clearBtn.addEventListener('click', ()=>{
  if(!confirm('Reset semua input?')) return;
  msgEl.value=''; pwdEl.value=''; encodedEl.textContent='Belum ada data terenkripsi.';
  encInput.value=''; pwdOpen.value=''; unlocked.style.display='none'; preview.textContent='—';
});

openBtn.addEventListener('click', ()=>{
  const enc = encInput.value.trim();
  const pwd = pwdOpen.value;
  if(!enc){ alert('Tempel teks terenkripsi dulu.'); return; }
  if(!pwd){ alert('Masukkan password untuk membuka.'); return; }
  try{
    const plain = decodeMessage(enc, pwd);
    preview.textContent = plain;
    unlocked.style.display = 'block';
    // auto-scroll to preview
    unlocked.scrollIntoView({behavior:'smooth', block:'center'});
  }catch(e){
    alert('Gagal membuka pesan. Password salah atau format tidak valid.');
  }
});

copyMsg.addEventListener('click', ()=>{
  const text = preview.textContent;
  navigator.clipboard.writeText(text).then(()=>alert('Pesan disalin!')).catch(()=>alert('Gagal menyalin.'));
});

hideMsg.addEventListener('click', ()=>{
  unlocked.style.display = 'none';
  preview.textContent = '—';
});

/* minor: support drop of encoded file */
encInput.addEventListener('paste', ()=>{ /* no-op: allow paste */ });
encInput.addEventListener('dragover', (e)=> e.preventDefault());
encInput.addEventListener('drop', (e)=>{
  e.preventDefault();
  const f = e.dataTransfer.files && e.dataTransfer.files[0];
  if(f){
    const reader = new FileReader();
    reader.onload = ()=> encInput.value = reader.result;
    reader.readAsText(f);
  }
});
</script><!-- PASANG SELURUH BLOK INI DI RENTRY.CO -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap" rel="stylesheet">
<style>
  :root{
    --bg1: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
    --glass: rgba(255,255,255,0.06);
    --accent: #c78cff;
    --accent2:#6ec1ff;
    --muted: rgba(255,255,255,0.65);
    --glass-border: rgba(255,255,255,0.08);
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  }
  body{
    margin:0;
    padding:20px;
    background:
      radial-gradient(600px 400px at 10% 10%, rgba(199,140,255,0.08), transparent 10%),
      radial-gradient(500px 300px at 90% 90%, rgba(110,193,255,0.06), transparent 10%),
      #0f1224;
    min-height:100vh;
    color: #fff;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }

  .card{
    max-width:820px;
    margin:28px auto;
    padding:28px;
    border-radius:18px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    box-shadow: 0 8px 30px rgba(2,6,23,0.6);
    border: 1px solid var(--glass-border);
    position:relative;
    overflow:hidden;
    backdrop-filter: blur(10px) saturate(120%);
  }

  .hero{
    display:flex;
    gap:20px;
    align-items:center;
  }

  .logo{
    width:84px;
    height:84px;
    border-radius:14px;
    background: linear-gradient(135deg,var(--accent),var(--accent2));
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    font-size:28px;
    color:#071026;
    box-shadow: 0 6px 18px rgba(110,193,255,0.06), inset 0 -6px 18px rgba(255,255,255,0.12);
  }

  h1{
    margin:0;
    font-size:20px;
    letter-spacing:-0.2px;
  }
  p.lead{
    margin:4px 0 0 0;
    color:var(--muted);
    font-size:13px;
  }

  .grid{
    display:grid;
    grid-template-columns: 1fr 360px;
    gap:18px;
    margin-top:18px;
  }

  /* left panel */
  .panel{
    background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));
    border-radius:12px;
    padding:14px;
    border: 1px solid rgba(255,255,255,0.03);
  }

  label{
    display:block;
    font-size:12px;
    color:var(--muted);
    margin-bottom:8px;
  }

  textarea, input[type="text"], input[type="password"]{
    width:100%;
    border-radius:10px;
    padding:12px 14px;
    border: none;
    outline:none;
    resize:vertical;
    min-height:110px;
    background: rgba(255,255,255,0.02);
    color: #fff;
    font-size:14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
  }
  input[type="text"], input[type="password"]{ min-height:44px; }

  .row{
    display:flex;
    gap:10px;
    align-items:center;
  }

  .btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 14px;
    border-radius:10px;
    border: none;
    cursor:pointer;
    font-weight:600;
    background: linear-gradient(90deg,var(--accent),var(--accent2));
    color:#071026;
    box-shadow: 0 6px 20px rgba(99,66,160,0.12);
  }
  .btn.ghost{
    background:transparent;
    color:var(--muted);
    border:1px dashed rgba(255,255,255,0.04);
    font-weight:600;
  }

  .preview{
    margin-top:12px;
    padding:12px;
    border-radius:10px;
    min-height:120px;
    background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));
    border:1px solid rgba(255,255,255,0.03);
    color:var(--muted);
    white-space:pre-wrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;
    font-size:13px;
  }

  /* right panel */
  .meta{
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .lock{
    display:flex;
    align-items:center;
    gap:12px;
  }
  .lock .icon{
    width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,0.03);
  }

  .small{
    font-size:12px;color:var(--muted);
  }

  .encoded{
    font-family: ui-monospace, "Roboto Mono", monospace;
    font-size:12px;
    min-height:80px;
    padding:9px;
    border-radius:8px;
    background: rgba(2,6,23,0.5);
    border:1px solid rgba(255,255,255,0.03);
    color:#e6e6ff;
    overflow:auto;
  }

  .controls{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
  }

  .notice{
    font-size:12px;
    color: #e7d9ff;
    opacity:0.9;
    background: linear-gradient(90deg, rgba(199,140,255,0.06), rgba(110,193,255,0.03));
    padding:8px;
    border-radius:8px;
    border:1px solid rgba(255,255,255,0.02);
  }

  .unlock-area{ display:none; margin-top:8px; }

  footer.help{
    margin-top:14px;
    font-size:12px;color:var(--muted);
  }

  @media (max-width:860px){
    .grid{ grid-template-columns: 1fr; }
    .logo{ width:64px;height:64px;font-size:22px; }
  }
</style>

<div class="card" id="secret-card">
  <div class="hero">
    <div class="logo">S</div>
    <div>
      <h1>Secret Note — widget</h1>
      <p class="lead">Tulis pesan, kunci dengan password. Dibuka hanya saat yang punya password memasukkan kata kunci yang benar.</p>
    </div>
  </div>

  <div class="grid">
    <!-- Left: compose -->
    <div class="panel">
      <label for="msg">Tulis pesan rahasiamu</label>
      <textarea id="msg" placeholder="Tuliskan pesan yang ingin kamu rahasiakan..."></textarea>

      <div style="height:12px;"></div>

      <label for="pwd">Password (untuk mengunci)</label>
      <input id="pwd" type="password" placeholder="Ketik password (minimal 3 karakter)">

      <div style="height:12px;"></div>

      <div class="row">
        <button class="btn" id="lockBtn">🔒 Kunci pesan</button>
        <button class="btn ghost" id="clearBtn">🧹 Reset</button>
      </div>

      <div style="height:12px;"></div>

      <label>Preview terenkripsi (bagikan ini jika mau)</label>
      <div id="encoded" class="encoded">Belum ada data terenkripsi.</div>

      <div style="height:12px;"></div>

      <div class="controls">
        <button class="btn ghost" id="copyEnc">📋 Salin terenkripsi</button>
        <button class="btn ghost" id="downloadEnc">⬇️ Unduh (txt)</button>
      </div>
    </div>

    <!-- Right: buka / metadata -->
    <div class="panel meta">
      <div class="lock">
        <div class="icon">🔐</div>
        <div>
          <div style="font-weight:700">Buka pesan</div>
          <div class="small">Tempelkan teks terenkripsi (atau paste whole rentry if shared) lalu masukkan password.</div>
        </div>
      </div>

      <label for="encInput">Teks terenkripsi</label>
      <textarea id="encInput" placeholder="Tempel teks terenkripsi di sini..."></textarea>

      <div class="row">
        <input id="pwdOpen" type="password" placeholder="Masukkan password untuk membuka" style="flex:1">
        <button class="btn" id="openBtn">🔓 Buka</button>
      </div>

      <div class="unlock-area" id="unlocked">
        <div class="notice">Pesan terbuka — salin atau baca dengan aman.</div>
        <div class="preview" id="preview">—</div>
        <div style="height:8px;"></div>
        <div class="controls">
          <button class="btn ghost" id="copyMsg">📋 Salin pesan</button>
          <button class="btn ghost" id="hideMsg">🙈 Sembunyikan</button>
        </div>
      </div>

      <footer class="help">Catatan: Keamanan bersifat client-side. Jika ingin benar-benar aman, gunakan layanan enkripsi end-to-end.</footer>
    </div>
  </div>
</div>

<script>
/* Simple password-based obfuscation:
   - XOR each byte with password char codes repeated
   - then Base64 encode.
   Not secure for real secrets; hanya untuk fun/share.
*/

function toUint8Array(str){
  const enc = new TextEncoder();
  return enc.encode(str);
}
function fromUint8Array(u8){
  const dec = new TextDecoder();
  return dec.decode(u8);
}

function xorWithKey(bytes, key){
  if(!key || key.length===0) return bytes;
  const keyBytes = toUint8Array(key);
  const out = new Uint8Array(bytes.length);
  for(let i=0;i<bytes.length;i++){
    out[i] = bytes[i] ^ keyBytes[i % keyBytes.length];
  }
  return out;
}
function encodeMessage(plain, password){
  const plainBytes = toUint8Array(plain);
  const xored = xorWithKey(plainBytes, password);
  // convert to base64
  let binary = '';
  for(let i=0;i<xored.length;i++) binary += String.fromCharCode(xored[i]);
  return btoa(binary);
}
function decodeMessage(encoded, password){
  try{
    const binary = atob(encoded);
    const bytes = new Uint8Array(binary.length);
    for(let i=0;i<binary.length;i++) bytes[i] = binary.charCodeAt(i);
    const xored = xorWithKey(bytes, password);
    return fromUint8Array(xored);
  }catch(e){
    throw new Error('Format terenkripsi tidak valid.');
  }
}

/* UI logic */
const msgEl = document.getElementById('msg');
const pwdEl = document.getElementById('pwd');
const lockBtn = document.getElementById('lockBtn');
const encodedEl = document.getElementById('encoded');
const copyEnc = document.getElementById('copyEnc');
const downloadEnc = document.getElementById('downloadEnc');
const clearBtn = document.getElementById('clearBtn');

const encInput = document.getElementById('encInput');
const pwdOpen = document.getElementById('pwdOpen');
const openBtn = document.getElementById('openBtn');
const unlocked = document.getElementById('unlocked');
const preview = document.getElementById('preview');
const copyMsg = document.getElementById('copyMsg');
const hideMsg = document.getElementById('hideMsg');

lockBtn.addEventListener('click', ()=>{
  const plain = msgEl.value.trim();
  const pwd = pwdEl.value;
  if(!plain){
    alert('Isi dulu pesannya ya.');
    return;
  }
  if(!pwd || pwd.length < 3){
    alert('Password minimal 3 karakter (ini untuk demo).');
    return;
  }
  const enc = encodeMessage(plain, pwd);
  encodedEl.textContent = enc;
});

copyEnc.addEventListener('click', ()=>{
  const text = encodedEl.textContent;
  if(!text || text.includes('Belum')){
    alert('Belum ada data terenkripsi.');
    return;
  }
  navigator.clipboard.writeText(text).then(()=>{
    alert('Terenkripsi disalin ke clipboard!');
  }).catch(()=>alert('Gagal menyalin.'));
});

downloadEnc.addEventListener('click', ()=>{
  const text = encodedEl.textContent;
  if(!text || text.includes('Belum')) { alert('Belum ada data terenkripsi.'); return; }
  const blob = new Blob([text], {type:'text/plain'});
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a'); a.href=url; a.download='secret.txt'; document.body.appendChild(a); a.click();
  a.remove(); URL.revokeObjectURL(url);
});

clearBtn.addEventListener('click', ()=>{
  if(!confirm('Reset semua input?')) return;
  msgEl.value=''; pwdEl.value=''; encodedEl.textContent='Belum ada data terenkripsi.';
  encInput.value=''; pwdOpen.value=''; unlocked.style.display='none'; preview.textContent='—';
});

openBtn.addEventListener('click', ()=>{
  const enc = encInput.value.trim();
  const pwd = pwdOpen.value;
  if(!enc){ alert('Tempel teks terenkripsi dulu.'); return; }
  if(!pwd){ alert('Masukkan password untuk membuka.'); return; }
  try{
    const plain = decodeMessage(enc, pwd);
    preview.textContent = plain;
    unlocked.style.display = 'block';
    // auto-scroll to preview
    unlocked.scrollIntoView({behavior:'smooth', block:'center'});
  }catch(e){
    alert('Gagal membuka pesan. Password salah atau format tidak valid.');
  }
});

copyMsg.addEventListener('click', ()=>{
  const text = preview.textContent;
  navigator.clipboard.writeText(text).then(()=>alert('Pesan disalin!')).catch(()=>alert('Gagal menyalin.'));
});

hideMsg.addEventListener('click', ()=>{
  unlocked.style.display = 'none';
  preview.textContent = '—';
});

/* minor: support drop of encoded file */
encInput.addEventListener('paste', ()=>{ /* no-op: allow paste */ });
encInput.addEventListener('dragover', (e)=> e.preventDefault());
encInput.addEventListener('drop', (e)=>{
  e.preventDefault();
  const f = e.dataTransfer.files && e.dataTransfer.files[0];
  if(f){
    const reader = new FileReader();
    reader.onload = ()=> encInput.value = reader.result;
    reader.readAsText(f);
  }
});
</script>