pastebin.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Mini Pastebin</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism-tomorrow.css" rel="stylesheet"/>
  <style>
    body { font-family: sans-serif; background: #1e1e1e; color: #f5f5f5; margin: 0; padding: 1rem; }
    .container { max-width: 800px; margin: auto; background: #2d2d2d; padding: 1rem; border-radius: 8px; }
    textarea, select, button { width: 100%; margin-top: 1rem; padding: 0.5rem; font-size: 1rem; }
    pre { padding: 1rem; border-radius: 8px; overflow-x: auto; background: #1e1e1e; }
    .meta { margin-top: 1rem; font-size: 0.85rem; color: #aaa; }
    .hidden { display: none; }
  </style>
</head>
<body>
  <div class="container" id="create-section">
    <h2>Create a New Paste</h2>
    <textarea id="pasteText" rows="10" placeholder="Paste your text or code here..."></textarea>
    <select id="language">
      <option value="plaintext">Plain Text</option>
      <option value="javascript">JavaScript</option>
      <option value="python">Python</option>
      <option value="bash">Bash</option>
      <option value="json">JSON</option>
      <option value="html">HTML</option>
    </select>
    <button onclick="createPaste()">Create Paste</button>
  </div>

  <div class="container hidden" id="view-section">
    <div style="display: flex; justify-content: space-between; align-items: center;">
      <h2>View Paste</h2>
      <button onclick="copyLink()">Copy Link</button>
    </div>
    <pre><code id="pasteOutput" class="language-plaintext"></code></pre>
    <div class="meta" id="metaInfo"></div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/prism.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/components/prism-python.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/components/prism-javascript.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/components/prism-json.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/components/prism-bash.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/components/prism-markup.min.js"></script>

  <script>
    const storage = window.localStorage;

    function createPaste() {
      const text = document.getElementById("pasteText").value;
      const language = document.getElementById("language").value;
      const id = Math.random().toString(36).substr(2, 8);
      const createdAt = new Date().toISOString();

      const paste = { text, language, createdAt };
      storage.setItem("paste-" + id, JSON.stringify(paste));
      window.location.hash = id;
      location.reload();
    }

    function showPaste(id) {
      const raw = storage.getItem("paste-" + id);
      if (!raw) return alert("Paste not found.");

      const { text, language, createdAt } = JSON.parse(raw);
      document.getElementById("create-section").classList.add("hidden");
      document.getElementById("view-section").classList.remove("hidden");

      const codeBlock = document.getElementById("pasteOutput");
      codeBlock.className = "language-" + language;
      codeBlock.textContent = text;
      Prism.highlightElement(codeBlock);

      document.getElementById("metaInfo").textContent = "Created at: " + new Date(createdAt).toLocaleString();
    }

    function copyLink() {
      navigator.clipboard.writeText(window.location.href);
      alert("Link copied to clipboard!");
    }

    const hash = window.location.hash.replace("#", "");
    if (hash) {
      showPaste(hash);
    }
  </script>
</body>
</html>