<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CRYPTORON</title>
    <link rel="icon" type="image/png" href="./images/Nemo256.png">
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.15.3/dist/sweetalert2.min.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
      @font-face {
        font-family: 'CustomFont';
        src: url('./raw/LostFish-5DOz.ttf') format('truetype');
      }

      @font-face {
        font-family: 'Doodle';
        src: url('./raw/Frisky\ Puppy.ttf') format('truetype');
      }

      body {
        background-color: #f0f0f0; /* Set a fallback background color */
      }

      .founder-title {
        font-family: 'CustomFont', sans-serif;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
      }

      .ttx {
        font-family: 'CustomFont', sans-serif;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
      }

      .tty {
        font-family: 'Doodle', sans-serif;
        color: aqua;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
      }

      /* Background container style */
      #background-container {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: url('./images/nemow.jpeg');
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
        z-index: -1;
        transition: filter 0.5s ease-in-out;
      }

      /* Blur effect */
      .blur-background {
        filter: blur(8px);
      }

      .swal-button--custom {
        background-color: aqua !important;  /* Set the background color to aqua */
        color: white !important;  /* Set text color to white */
        border: none !important;  /* Remove border */
      }

      /* CSS for aqua and darkkhaki glow effect on icons */
      a svg {
        transition: all 0.3s ease-in-out;
      }

      a:hover svg {
        filter: drop-shadow(0 0 10px aqua) drop-shadow(0 0 20px darkkhaki);
        transform: scale(1.1);
      }

    </style>
  </head>
  <body class="bg-gray-100">
    
    <div id="background-container"></div>
    
    
    <header class="h-64 sm:h-96">
      <div class="flex justify-end items-top h-full px-4 sm:px-8">
        <a href="https://x.com/cute08888?t=uRQSYBKmJHsRf31A4XSGdQ&s=09" target="_blank" class="mr-4 mt-4">
          <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 24 24">
            <path fill="currentColor" d="M8.5 2h2.5L11 2h-2.5zM13 2h2.5L15.5 2h-2.5zM10.5 2h5v0h-5zM8.5 2h5v0h-5zM10 2h3.5L13.5 2h-3.5z">
              <animate fill="freeze" attributeName="d" dur="0.8s" keyTimes="0;0.3;0.5;1" values="M8.5 2h2.5L11 2h-2.5zM13 2h2.5L15.5 2h-2.5zM10.5 2h5v0h-5zM8.5 2h5v0h-5zM10 2h3.5L13.5 2h-3.5z;M8.5 2h2.5L11 22h-2.5zM13 2h2.5L15.5 22h-2.5zM10.5 2h5v2h-5zM8.5 20h5v2h-5zM10 2h3.5L13.5 22h-3.5z;M8.5 2h2.5L11 22h-2.5zM13 2h2.5L15.5 22h-2.5zM10.5 2h5v2h-5zM8.5 20h5v2h-5zM10 2h3.5L13.5 22h-3.5z;M1 2h2.5L18.5 22h-2.5zM5.5 2h2.5L23 22h-2.5zM3 2h5v2h-5zM16 20h5v2h-5zM18.5 2h3.5L5 22h-3.5z" />
            </path>
          </svg>
        </a>
        <a href="https://t.me/+Z83ftJZwwlk1NzVl" target="_blank" class="mt-4">
          <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 24 24">
            <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
              <path stroke-dasharray="20" stroke-dashoffset="20" d="M21 5l-2.5 15M21 5l-12 8.5">
                <animate fill="freeze" attributeName="stroke-dashoffset" dur="0.4s" values="20;0" />
              </path>
              <path stroke-dasharray="24" stroke-dashoffset="24" d="M21 5l-19 7.5">
                <animate fill="freeze" attributeName="stroke-dashoffset" dur="0.4s" values="24;0" />
              </path>
              <path stroke-dasharray="14" stroke-dashoffset="14" d="M18.5 20l-9.5 -6.5">
                <animate fill="freeze" attributeName="stroke-dashoffset" begin="0.4s" dur="0.3s" values="14;0" />
              </path>
              <path stroke-dasharray="10" stroke-dashoffset="10" d="M2 12.5l7 1">
                <animate fill="freeze" attributeName="stroke-dashoffset" begin="0.4s" dur="0.3s" values="10;0" />
              </path>
              <path stroke-dasharray="8" stroke-dashoffset="8" d="M12 16l-3 3M9 13.5l0 5.5">
                <animate fill="freeze" attributeName="stroke-dashoffset" begin="0.7s" dur="0.3s" values="8;0" />
              </path>
            </g>
          </svg>
        </a>
      </div>
      
      <div class="flex justify-center items-center mt-12">
        <h2 class="text-2xl sm:text-4xl font-bold text-yellow-200 founder-title">
          CRYPTORON
        </h2>
      </div>
    </header>

    
<main class="h-96 sm:h-[500px]">
  <div class="flex justify-center items-center h-full">
    <svg width="500" height="300" viewBox="0 0 500 300" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <path id="curvePath" d="M50,150 Q250,-50 450,150" fill="darkkhaki" />
      </defs>

      
      <text class="ttx" fill="darkkhaki" font-size="45" text-anchor="middle">
        <textPath href="#curvePath" startOffset="50%">
          THE TICKER IS
        </textPath>
      </text>

      
      <text class="tty" fill="aqua" font-size="90" text-anchor="middle" dy="65">
        <textPath href="#curvePath" startOffset="50%">
          # N E M O
        </textPath>
      </text>

      
      <image href="./images/Nemo256.png" x="150" y="100" width="200" height="200" />
    </svg>
  </div>
</main>

    
<footer class="h-64 sm:h-96 text-white">
  <div class="flex flex-col justify-center items-center h-full px-4">
    <h2 class="text-xl sm:text-3xl font-semibold text-center">CA TOKEN</h2>
    <div class="bg-gray-800 bg-opacity-75 px-4 py-2 mt-4 rounded-md w-full sm:w-auto">
      <code id="copy-text" class="text-sm sm:text-base justify-center break-all text-center">FpZBUcaFAgUS8DsCg8CcathtY2TcCSzUHD1TydvVpump</code>
    </div>
  </div>
</footer>


    
    <script>
      document.addEventListener('DOMContentLoaded', () => {
        const bodySection = document.querySelector('main');
        const backgroundContainer = document.querySelector('#background-container');

        // Set up IntersectionObserver to track when the body section comes into view
        const observer = new IntersectionObserver(
          (entries) => {
            entries.forEach((entry) => {
              if (entry.isIntersecting) {
                // Apply the blur effect when the body section is in view
                backgroundContainer.classList.add('blur-background');
              } else {
                // Remove the blur effect when the body section is out of view
                backgroundContainer.classList.remove('blur-background');
              }
            });
          },
          {
            threshold: 0.7, // Trigger when 50% of the body section is in view
          }
        );

        // Observe the main body section
        observer.observe(bodySection);
      });
    </script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.15.3/dist/sweetalert2.all.min.js"></script>

<script>
  // Select the code element directly
  const copyTextElement = document.getElementById('copy-text');

  // Add click event listener directly to the code element
  copyTextElement.addEventListener('click', () => {
    // Use the Clipboard API to copy the text to the clipboard
    navigator.clipboard.writeText(copyTextElement.textContent)
      .then(() => {
        // SweetAlert notification for success
        Swal.fire({
          icon: 'success',
          title: 'Text copied!',
          text: 'The CA Token has been successfully copied to your clipboard.',
          confirmButtonText: 'OK',
          customClass: {
            confirmButton: 'swal-button--custom'  // Apply custom class to the button
          }
        });
      })
      .catch(err => {
        // SweetAlert notification for failure
        console.error('Error copying text: ', err);
        Swal.fire({
          icon: 'error',
          title: 'Failed to copy text',
          text: 'There was an error while copying the CA Token. Please try again.',
          confirmButtonText: 'OK'
        });
      });
  });
</script>


  </body>
</html>
