কপি , ডাউনলোড, শেয়ার পোস্ট রেডি করার সম্পুর্ন কোড।



CODE

<!-- PREMIUM CODE BOX START -->
<div class="premium-code-box">
  <div class="code-header">
    <div class="code-language">
      <span class="code-dot"></span>
      <span>CODE</span>
    </div>

    <div class="code-actions">
      <button class="code-btn copy-btn" onclick="copyPremiumCode(this)" title="Copy Code">
        <span class="btn-icon">⧉</span>
        <span class="btn-text">Copy</span>
      </button>

      <button class="code-btn download-btn" onclick="downloadPremiumCode(this)" title="Download Code">
        <span class="btn-icon">↓</span>
        <span class="btn-text">Download</span>
      </button>

      <button class="code-btn share-btn" onclick="sharePremiumCode(this)" title="Share Code">
        <span class="btn-icon">↗</span>
        <span class="btn-text">Share</span>
      </button>
    </div>
  </div>

  <div class="code-content">
    <pre><code><!-- এখানে আপনার কোড লিখুন -->
YOUR CODE HERE
<!-- এখানে আপনার কোড শেষ --></code></pre>
  </div>
</div>

<style>
/* ===== PREMIUM CODE BOX ===== */

.premium-code-box {
  width: 100%;
  margin: 25px 0;
  border-radius: 14px;
  overflow: hidden;
  background: #0d1117;
  border: 1px solid #252c35;
  box-shadow: 0 10px 35px rgba(0,0,0,.18);
  font-family: "Courier New", monospace;
  box-sizing: border-box;
}

/* Header */
.premium-code-box .code-header {
  min-height: 55px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: linear-gradient(135deg,#151b23,#10151c);
  border-bottom: 1px solid #252c35;
  box-sizing: border-box;
}

/* Language */
.premium-code-box .code-language {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #d7dee8;
  font-family: Arial,sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
}

.premium-code-box .code-dot {
  width: 9px;
  height: 9px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(34,197,94,.7);
}

/* Buttons */
.premium-code-box .code-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.premium-code-box .code-btn {
  border: 1px solid #303844;
  background: #1a2029;
  color: #cbd5e1;
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-family: Arial,sans-serif;
  font-size: 12px;
  font-weight: 600;
  transition: all .2s ease;
  white-space: nowrap;
}

.premium-code-box .code-btn:hover {
  background: #252d38;
  border-color: #4b5563;
  color: #fff;
  transform: translateY(-1px);
}

.premium-code-box .code-btn:active {
  transform: scale(.96);
}

.premium-code-box .btn-icon {
  font-size: 15px;
  line-height: 1;
}

/* Copied State */
.premium-code-box .copy-btn.copied {
  background: #12351f;
  border-color: #22c55e;
  color: #4ade80;
}

/* Code Area */
.premium-code-box .code-content {
  width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
}

.premium-code-box pre {
  margin: 0;
  padding: 20px;
  min-height: 80px;
  color: #e6edf3;
  font-family: "Courier New",Consolas,monospace;
  font-size: 14px;
  line-height: 1.7;
  white-space: pre;
  overflow-x: auto;
  box-sizing: border-box;
}

.premium-code-box code {
  color: inherit;
  font-family: inherit;
}

/* Scrollbar */
.premium-code-box pre::-webkit-scrollbar,
.premium-code-box .code-content::-webkit-scrollbar {
  height: 7px;
}

.premium-code-box pre::-webkit-scrollbar-track,
.premium-code-box .code-content::-webkit-scrollbar-track {
  background: #0a0e13;
}

.premium-code-box pre::-webkit-scrollbar-thumb,
.premium-code-box .code-content::-webkit-scrollbar-thumb {
  background: #394352;
  border-radius: 10px;
}

.premium-code-box pre::-webkit-scrollbar-thumb:hover,
.premium-code-box .code-content::-webkit-scrollbar-thumb:hover {
  background: #566273;
}

/* Mobile */
@media (max-width: 600px) {

  .premium-code-box .code-header {
    padding: 8px;
  }

  .premium-code-box .code-actions {
    gap: 4px;
  }

  .premium-code-box .code-btn {
    padding: 7px 8px;
  }

  .premium-code-box .btn-text {
    display: none;
  }

  .premium-code-box .btn-icon {
    font-size: 17px;
  }

  .premium-code-box pre {
    padding: 15px;
    font-size: 13px;
  }
}
</style>

<script>
/* ===== COPY CODE ===== */

function getPremiumCode(button) {
  var box = button.closest(".premium-code-box");
  var code = box.querySelector("code");

  return code.innerText || code.textContent;
}

function copyPremiumCode(button) {

  var codeText = getPremiumCode(button);
  var textSpan = button.querySelector(".btn-text");
  var iconSpan = button.querySelector(".btn-icon");

  function copiedSuccess() {

    button.classList.add("copied");

    if (textSpan) {
      textSpan.textContent = "Copied!";
    }

    if (iconSpan) {
      iconSpan.textContent = "✓";
    }

    setTimeout(function() {

      button.classList.remove("copied");

      if (textSpan) {
        textSpan.textContent = "Copy";
      }

      if (iconSpan) {
        iconSpan.textContent = "⧉";
      }

    }, 2000);
  }

  if (navigator.clipboard && window.isSecureContext) {

    navigator.clipboard.writeText(codeText)
      .then(copiedSuccess)
      .catch(function() {
        fallbackCopy(codeText, copiedSuccess);
      });

  } else {
    fallbackCopy(codeText, copiedSuccess);
  }
}


/* ===== FALLBACK COPY ===== */

function fallbackCopy(text, callback) {

  var textarea = document.createElement("textarea");

  textarea.value = text;
  textarea.style.position = "fixed";
  textarea.style.left = "-9999px";
  textarea.style.top = "0";

  document.body.appendChild(textarea);

  textarea.focus();
  textarea.select();

  try {
    document.execCommand("copy");
    callback();
  } catch (err) {
    alert("Copy failed. Please copy the code manually.");
  }

  document.body.removeChild(textarea);
}


/* ===== DOWNLOAD CODE ===== */

function downloadPremiumCode(button) {

  var codeText = getPremiumCode(button);

  var blob = new Blob(
    [codeText],
    { type: "text/plain;charset=utf-8" }
  );

  var url = URL.createObjectURL(blob);

  var link = document.createElement("a");

  link.href = url;
  link.download = "premium-code.txt";

  document.body.appendChild(link);

  link.click();

  document.body.removeChild(link);

  setTimeout(function() {
    URL.revokeObjectURL(url);
  }, 1000);
}


/* ===== SHARE CODE ===== */

function sharePremiumCode(button) {

  var codeText = getPremiumCode(button);

  var shareData = {
    title: document.title || "Code",
    text: codeText,
    url: window.location.href
  };

  if (navigator.share) {

    navigator.share(shareData)
      .catch(function(error) {

        if (error.name !== "AbortError") {
          showShareFallback();
        }

      });

  } else {

    showShareFallback();

  }
}


/* ===== SHARE FALLBACK ===== */

function showShareFallback() {

  var shareUrl = window.location.href;

  if (navigator.clipboard && window.isSecureContext) {

    navigator.clipboard.writeText(shareUrl)
      .then(function() {
        alert("Page link copied! এখন যেকোনো জায়গায় Paste করে Share করুন।");
      })
      .catch(function() {
        prompt("Copy this link:", shareUrl);
      });

  } else {

    prompt("Copy this link:", shareUrl);

  }
}
</script>
<!-- PREMIUM CODE BOX END -->

Comments