<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Privnote - Encrypts your notes with links, zero-width characters, or binary</title>
<meta name="keywords" content="self-destructive notes, send notes with self-destruct, zero-width character encryption, binary encryption, secure messaging, encrypted notes, ephemeral messages,隐信云">
<meta name="description" content="Privnote.chat allows you to send self-destructive notes. Once read, the notes are automatically deleted. It also supports encryption using zero-width characters and binary, ensuring secure and private messaging.">
<meta property="og:image" content="privnote.png">
<meta property="og:url" content="https://privnote.chat">
<link rel="canonical" href="https://privnote.chat">
<meta property="og:type" content="website">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap & Font Awesome -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="language-styles.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9224406325142860" crossorigin="anonymous"></script>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">

<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "Privnote",
"url": "https://privnote.chat",
"logo": "https://privnote.chat/read/pic/noti.png",
"contactPoint": {
"@type": "ContactPoint",
"email": "joe@pdfhost.online",
"contactType": "Customer Service",
"areaServed": "US",
"availableLanguage": "English"
}
}
</script>

</head>

<body class="d-flex flex-column min-vh-100">
<header class="site-header">
<div class="container-fluid d-flex justify-content-between align-items-center">
<a class="text-decoration-none" href="https://privnote.chat">
<h1 class="logo-text">Priv<i class="fas fa-unlock-alt"></i>ote.chat</h1>
</a>
<div class="d-flex align-items-center">
<div class="dropdown me-3">
<button class="btn btn-sm btn-outline-light dropdown-toggle" type="button" id="languageDropdown" data-bs-toggle="dropdown" aria-expanded="false">
<span id="currentLanguage">English</span>
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="languageDropdown">
<li><a class="dropdown-item" href="#" onclick="switchLanguage('en')">🇺🇸 English</a></li>
<li><a class="dropdown-item" href="#" onclick="switchLanguage('zh')">🇨🇳 中文</a></li>
<li><a class="dropdown-item" href="#" onclick="switchLanguage('tw')">🇹🇼 中文</a></li>
<li><a class="dropdown-item" href="#" onclick="switchLanguage('es')">🇪🇸 Español</a></li>
<li><a class="dropdown-item" href="#" onclick="switchLanguage('fr')">🇫🇷 Français</a></li>
<li><a class="dropdown-item" href="#" onclick="switchLanguage('ja')">🇯🇵 日本語</a></li>
<li><a class="dropdown-item" href="#" onclick="switchLanguage('de')">🇩🇪 Deutsch</a></li>
</ul>
</div>
<div id="trans1" class="tagline">Secure your words, vanish your trace</div>
</div>
</div>
</header>

<!-- Navigation Links -->
<div class="container">
  <ul class="nav nav-tabs justify-content-center mb-4" id="mainNav">
    <li class="nav-item">
      <a class="nav-link active" href="index.html">
        <span id="navLinkText">Generate Link</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="encryption.html">
        <span id="navEncryptText">Character Encryption</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="decrypt.html">
        <span id="navDecryptText">Decrypt</span>
      </a>
    </li>
  </ul>
</div>

<main class="flex-grow-1">
<div class="container main-container" id="containerbox">
  <!-- 链接生成工具内容 -->
    <h5 class="mb-3 mt-4 pt-2 text-center" id="trans2">Encrypts your notes with links, zero-width characters, or binary, ensuring secure sharing and auto-destruction</h5>

    <div id="demo2" class="collapse info-box">
      <p class="mb-0">Privnote is a versatile encryption tool for secure notes. You can:</p>
      <ul class="mt-2 mb-0">
        <li><strong>Encrypted Link Sharing:</strong> <span class="text-muted">Generate a secure link for your note, which auto-destructs after a set time.</span></li>
        <li><strong>Zero-Width Character Encryption:</strong> <span class="text-muted">Hide your note in plain text using zero-width characters, making it invisible to the naked eye.</span></li>
        <li><strong>Binary Encryption:</strong> <span class="text-muted">Convert your note into binary (0s and 1s) for extra security.</span></li>
      </ul>
    </div>
    <div class="form-group" id="formpart">
      <label for="myTextarea" class="section-title" data-bs-toggle="collapse" data-bs-target="#demo2">
        <i class="fas fa-user-lock"></i> <span id="topbanner">New Notes</span>
      </label>
      <textarea class="form-control mb-3" rows="8" id="myTextarea" placeholder="Write Your Note Here..."></textarea>
    </div>
  
  <div class="card" id="resultlink" style="display: none">
    <div class="card-body">
      <h6 class="card-title">PrivNote has been made</h6>
      <ul class="list-group list-group-flush mb-3">
        <li class="list-group-item list-group-item-success" id="innerlink"></li>
        <li id="tranli" class="list-group-item list-group-item-warning">This note will be automatically destroyed after it is read, according to your settings.</li>
      </ul>
      <button type="button" class="btn btn-outline-secondary" id="copybutton" onclick="copylink()">
        <i class="fas fa-copy me-2"></i>Copy Link
      </button>
    </div>
  </div>

  <div id="demo" class="collapse">
    <div class="row mb-4">
      <h6 class="mb-3" id="trantou">Link URL self-destructs</h6>
      <div class="col-md-6 mb-3 mb-md-0">
        <select id="my-select" class="form-select" onchange="if(document.getElementById('expireShow')){const desc=[&quot;after reading it&quot;,&quot;1 hour from now&quot;,&quot;24 hour from now&quot;,&quot;7 days from now&quot;,&quot;24 days from now&quot;];document.getElementById('expireShow').textContent=desc[this.selectedIndex]||desc[0];}">
          <option>after reading it</option>
          <option>1 hour from now</option>
          <option>24 hour from now</option>
          <option>7 days from now</option>
          <option>24 days from now</option>
        </select>
        <div id="expireShow" style="margin-top:6px;color:#fff;font-size:1em;"></div>
      </div>
      <div class="col-md-6">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="mySwitch" value="yes" checked>
          <label class="form-check-label" for="mySwitch">
            Asking for confirmation before showing and destroying the note.
          </label>
        </div>
      </div>
    </div>

    <div class="row mb-4">
      <h5 class="mb-3"><small>Enter an optional password to encrypt the note</small></h5>
      <div class="col-md-6 mb-3 mb-md-0">
        <input type="password" class="form-control" id="pass1" placeholder="Enter Password" autocomplete="off">
      </div>
      <div class="col-md-6">
        <input type="password" class="form-control" id="pass2" placeholder="Confirm Password">
      </div>
    </div>

    <div class="row">
      <h5 class="mb-3">Read notification<br><small>E-mail to notify when note is read</small></h5>
      <div class="col-md-6 mb-3 mb-md-0">
        <input type="text" class="form-control" placeholder="Enter Email" id="emailnoti">
      </div>
      <div class="col-md-6">
        <input type="text" class="form-control" placeholder="Retype Email" id="refename">
      </div>
    </div>
  </div>

  <div class="d-grid gap-2 d-md-flex justify-content-md-center mt-4" id="buttontwo">
    <button id="tranmake" type="button" class="btn btn-primary">
      <i class="fas fa-link me-2"></i>Generate Link
    </button>
    <button id="tranoption" type="button" class="btn btn-outline-secondary" data-bs-toggle="collapse" data-bs-target="#demo">
      <i class="fas fa-cog me-2"></i>Optional Setting
    </button>
    <button id="decodemessage" type="button" class="btn btn-outline-warning" style="display: none;">
      <i class="fas fa-unlock me-2"></i><a href="decrypt.html" class="text-decoration-none text-warning">Decrypt Notes</a>
    </button>
  </div>
</div>
</main>

<section class="py-4 text-center container after-section" id="grabify" style="display: none">
<div class="row">
<div class="col-lg-8 mx-auto">
<h3 class="fst-italic mb-3">After?</h3>
<p id="tranafter" class="lead mb-4">
You can track the results of when the note link was opened, on which device it was opened, and by what IP was opened.
</p>
<div class="d-flex justify-content-center gap-3">
<a id="trana" href="https://maipdf.com/pdf/haha.php" class="btn btn-danger">
<i class="fas fa-chart-line me-2"></i>Check Open Log
</a>
<a id="tranb" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#myModal">
<i class="fas fa-question-circle me-2"></i>How to decode?
</a>
</div>
</div>
</div>
</section>

<footer class="mt-auto">
<div class="container">
  <div class="text-center mb-3" id="blog-bottom-link">
    <a href="blog/index.html" class="btn btn-outline-primary"><i class="fas fa-blog me-2"></i>Blog</a>
  </div>
<p class="text-center mb-0">
<a href="read/selfdestructANDencoding.php" class="nav-link">
	&copy;2026 MaiPDF.com<br><span class="__cf_email__" data-cfemail="b7ddd8d2f7c7d3d1dfd8c4c399d8d9dbded9d2">[email&#160;protected]</span>
</a>
</p>
</div>
</footer>

<div class="modal fade" id="myModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">How to decode messages</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<img id="decrysrc" src="read/pic/enDecode1.png" class="img-fluid" alt="changecode">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

<!-- Add mobile-specific styles to the head section -->
<style>
/* Mobile Responsive Enhancements */
@media (max-width: 767px) {
  .site-header {
    padding: 10px 5px;
  }
  .logo-text {
    font-size: 1.3rem;
    white-space: nowrap;
  }
  .tagline {
    display: none;
  }
  .dropdown {
    margin-right: 5px;
  }
  .dropdown .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
  }
  
  /* Add a mobile tagline below header */
  .header-mobile-tagline {
    display: block;
    text-align: center;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 5px;
    font-style: italic;
    background-color: #343a40;
    padding-bottom: 8px;
  }
  
  /* Improved mobile navigation */
  #mainNav {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 2px;
    max-width: 100%;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
  }
  #mainNav::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
  }
  #mainNav .nav-link {
    padding: 0.4rem 0.6rem;
    white-space: nowrap;
    font-size: 0.9rem;
  }
  
  /* Improved form controls for mobile */
  .main-container {
    padding: 0 8px;
  }
  
  h5.mb-3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem !important;
  }
  
  .form-label {
    font-size: 0.85rem;
    margin-bottom: 0.2rem;
  }
  
  textarea.form-control {
    font-size: 0.9rem;
    padding: 0.4rem;
    rows: 5;
  }
  
  .btn {
    padding: 0.35rem 0.65rem;
    font-size: 0.9rem;
  }
  
  /* Improved alert and card styling */
  .alert {
    padding: 0.6rem;
    font-size: 0.85rem;
  }
  
  .card-body {
    padding: 0.75rem;
  }
  
  /* Adjust button containers */
  #buttontwo .btn {
    margin-bottom: 0.5rem;
  }
  
  /* Improve spacing in demo collapse */
  #demo h6, #demo h5 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }
  
  #demo .row {
    margin-bottom: 1rem !important;
  }
  
  /* Fix dropdown on mobile */
  .dropdown-menu {
    position: absolute;
    min-width: 7rem;
  }
}

/* Extra small devices (phones, 576px and down) */
@media (max-width: 576px) {
  .site-header {
    padding: 8px 4px;
  }
  .logo-text {
    font-size: 1.2rem;
  }
  #mainNav .nav-link {
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
  }
  .header-mobile-tagline {
    font-size: 0.7rem;
  }
  textarea.form-control {
    rows: 4;
    font-size: 0.85rem;
    padding: 0.35rem;
  }
  .btn {
    font-size: 0.85rem;
    padding: 0.3rem 0.6rem;
  }
  #demo .form-check-label {
    font-size: 0.8rem;
  }
  .section-title {
    font-size: 1rem;
  }
  .form-select, .form-control {
    font-size: 0.85rem;
    padding: 0.35rem;
  }
  .after-section h3 {
    font-size: 1.3rem;
  }
  .after-section p.lead {
    font-size: 0.9rem;
  }
}

/* Add button hover/active states for better mobile feedback */
.btn:active {
  transform: translateY(1px);
}

/* Ensure scrolling works properly on mobile */
body {
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Fix modal display on mobile */
.modal-dialog {
  margin: 0.5rem;
}
@media (max-width: 576px) {
  .modal-dialog {
    max-width: 95%;
    margin: 0.25rem auto;
  }
  .modal-body {
    padding: 0.5rem;
  }
  .modal-footer, .modal-header {
    padding: 0.5rem;
  }
}
</style>
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
<script src="translate.js"></script>
<script>
window.addEventListener('DOMContentLoaded', function() {
  // Initialize language using the centralized function
  // This will use the language stored in localStorage or default to 'en'
  switchLanguage(currentLanguage);
  
  // Bind Generate Link button event
  var encryptBtn = document.getElementById('tranmake');
  if (encryptBtn) {
    encryptBtn.addEventListener('click', function() {
      create();
    });
  }
});
</script>
<script src="no.js"></script>

</body>
</html>