<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Code Display with Full Protection</title>

  <!-- Prism.js Dark Theme -->
  <link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-okaidia.css" rel="stylesheet">

  <!-- Prism.js for syntax highlighting -->
  <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.js"></script>

  <style>
    /* Styling for code blocks */
    .code-block {
      position: relative;
      margin-bottom: 20px;
      border-radius: 8px;
    }

    /* Styling for copy button */
    .copy-btn {
      position: absolute;
      top: 10px;
      right: 10px;
      background-color: #444;
      color: #fff;
      border: none;
      padding: 5px 10px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
    }

    .copy-btn:hover {
      background-color: rgb(30, 0, 255);
    }

    /* Styling for console output */
    .output-block {
      position: relative;
      margin-bottom: 20px;
      border-radius: 8px;
      background-color: #000;
      padding: 15px;
      color: #0f0;
      font-size: 14px;
      font-family: monospace;
      white-space: pre-wrap;
      border: 1px solid #444;
    }
  </style>
</head>

<body>

<h2>HTML Code Example:</h2>
<div class="code-block">
  <pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Example&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Hello, World!&lt;/h1&gt;
  &lt;/body&gt;
&lt;/html&gt;
  </code></pre>
  <button class="copy-btn">Copy</button>
</div>

<h2>JavaScript Code Example:</h2>
<div class="code-block">
  <pre><code class="language-javascript">for (let i = 1; i <= 5; i++) {
  console.log('Iteration:', i);
}
console.log('Loop completed!');
  </code></pre>
  <button class="copy-btn">Copy</button>
</div>

<h3>Console Output Example:</h3>
<div class="output-block">
Iteration: 1  
Iteration: 2  
Iteration: 3  
Iteration: 4  
Iteration: 5  
Loop completed!
</div>

<!-- JavaScript to enable copy functionality and disable inspect -->
<script>
  // Copy button functionality
  document.querySelectorAll('.copy-btn').forEach(button => {
    button.addEventListener('click', () => {
      const codeBlock = button.previousElementSibling.querySelector('code');
      const codeText = codeBlock.innerText;

      // Copy to clipboard
      navigator.clipboard.writeText(codeText).then(() => {
        // Change button text and background color
        button.innerText = 'Copied!';
        button.style.backgroundColor = '#28a745'; // Green color
        button.style.color = '#fff';

        // Reset button text and color after 2 seconds
        setTimeout(() => {
          button.innerText = 'Copy';
          button.style.backgroundColor = '#444'; // Original color
          button.style.color = '#fff';
        }, 2000);
      });
    });
  });

  // Disable text selection outside code blocks
  document.addEventListener('copy', (e) => {
    if (!e.target.closest('.code-block')) {
      e.preventDefault();
    }
  });

  // Disable right-click
  document.addEventListener('contextmenu', (e) => {
    e.preventDefault();
  });

  // Disable Ctrl+U, Ctrl+Shift+I, F12, and other keys
  document.addEventListener('keydown', (e) => {
    if (
      (e.ctrlKey && e.key === 'u') ||           // Ctrl+U
      (e.ctrlKey && e.shiftKey && e.key === 'I') || // Ctrl+Shift+I
      (e.ctrlKey && e.shiftKey && e.key === 'J') || // Ctrl+Shift+J
      (e.ctrlKey && e.key === 'p') ||           // Ctrl+P
      (e.ctrlKey && e.key === 's') ||           // Ctrl+S
      e.key === 'F12'                           // F12
    ) {
      e.preventDefault();
    }
  });

  // Detect if DevTools is open
  let devToolsOpen = false;
  const threshold = 160;

  setInterval(() => {
    const widthDiff = window.outerWidth - window.innerWidth > threshold;
    const heightDiff = window.outerHeight - window.innerHeight > threshold;
    devToolsOpen = widthDiff || heightDiff;

    if (devToolsOpen) {
      document.body.innerHTML = '<h1 style="color: red; text-align: center;">DevTools is not allowed!</h1>';
      setTimeout(() => window.close(), 3000);
    }
  }, 500);

  // Block view-source from being used
  if (window.location.href.startsWith('view-source')) {
    document.body.innerHTML = '<h1 style="color: red; text-align: center;">Source Code Viewing is Disabled!</h1>';
    setTimeout(() => window.close(), 3000);
  }
</script>

</body>
</html>



