index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Reiker's Links | CodeNest</title>
  <style>
    :root {
      --glass-bg: rgba(255, 255, 255, 0.08);
      --glass-border: rgba(255, 255, 255, 0.1);
      --glass-shadow: rgba(0, 0, 0, 0.2);
      --accent-color: #58a6ff;
      --accent-glow: rgba(88, 166, 255, 0.5);
      --text-color: rgba(255, 255, 255, 0.9);
      --secondary-text: rgba(255, 255, 255, 0.6);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background-color: #000;
      color: var(--text-color);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      min-height: 100vh;
      padding: 40px 20px;
      position: relative;
      overflow-x: hidden;
    }

    body::before {
      content: "";
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: 
        radial-gradient(circle at 20% 20%, rgba(88, 166, 255, 0.15), transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(255, 100, 200, 0.15), transparent 40%);
      z-index: -1;
    }

    .container {
      max-width: 500px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 24px;
      position: relative;
      z-index: 1;
    }

    .header {
      text-align: center;
      margin-bottom: 20px;
      position: relative;
    }

    h1 {
      color: var(--text-color);
      font-size: 2.5rem;
      font-weight: 700;
      margin-bottom: 10px;
      background: linear-gradient(135deg, #fff, #58a6ff);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      position: relative;
    }

    h1::after {
      content: "🌐";
      position: absolute;
      top: -15px;
      right: -30px;
      font-size: 1.5rem;
      -webkit-text-fill-color: initial;
      filter: drop-shadow(0 0 10px var(--accent-glow));
      animation: float 3s ease-in-out infinite;
    }

    .subtitle {
      color: var(--secondary-text);
      font-size: 1rem;
      margin-bottom: 30px;
    }

    .links {
      display: flex;
      flex-direction: column;
      gap: 16px;
      width: 100%;
    }

    .link {
      display: flex;
      align-items: center;
      padding: 16px 24px;
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      border-radius: 16px;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      color: var(--text-color);
      text-decoration: none;
      font-weight: 500;
      font-size: 1rem;
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      position: relative;
      overflow: hidden;
      box-shadow: 0 4px 20px var(--glass-shadow);
    }

    .link:hover {
      transform: translateY(-2px) scale(1.02);
      background: rgba(255, 255, 255, 0.12);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    }

    .link:active {
      transform: translateY(1px) scale(0.98);
    }

    .link::before {
      content: "";
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
      );
      transition: 0.5s;
    }

    .link:hover::before {
      left: 100%;
    }

    .link-icon {
      font-size: 1.5rem;
      margin-right: 16px;
      min-width: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .link-text {
      flex: 1;
    }

    .link-arrow {
      opacity: 0;
      transform: translateX(-10px);
      transition: all 0.3s ease;
    }

    .link:hover .link-arrow {
      opacity: 1;
      transform: translateX(0);
    }

    .footer {
      margin-top: 40px;
      text-align: center;
      color: var(--secondary-text);
      font-size: 0.9rem;
      position: relative;
      padding: 16px;
      background: var(--glass-bg);
      border-radius: 12px;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1px solid var(--glass-border);
      width: 100%;
      max-width: 300px;
    }

    .heart {
      display: inline-block;
      color: #ff6b6b;
      animation: pulse 1.5s ease-in-out infinite;
    }

    .blob {
      position: fixed;
      border-radius: 50%;
      filter: blur(80px);
      opacity: 0.4;
      z-index: -1;
    }

    .blob-1 {
      width: 300px;
      height: 300px;
      background: rgba(88, 166, 255, 0.4);
      top: -100px;
      right: -100px;
      animation: blob-move-1 20s infinite alternate ease-in-out;
    }

    .blob-2 {
      width: 250px;
      height: 250px;
      background: rgba(255, 107, 107, 0.4);
      bottom: -50px;
      left: -100px;
      animation: blob-move-2 15s infinite alternate ease-in-out;
    }

    @keyframes pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.2); }
    }

    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }

    @keyframes blob-move-1 {
      0% { transform: translate(0, 0) scale(1); }
      100% { transform: translate(-100px, 100px) scale(1.2); }
    }

    @keyframes blob-move-2 {
      0% { transform: translate(0, 0) scale(1); }
      100% { transform: translate(100px, -50px) scale(1.3); }
    }

    /* Mobile optimizations */
    @media (max-width: 600px) {
      h1 {
        font-size: 2rem;
      }
      
      .link {
        padding: 14px 20px;
      }
      
      .blob-1, .blob-2 {
        opacity: 0.3;
      }
    }

    /* Dark mode support */
    @media (prefers-color-scheme: dark) {
      :root {
        --glass-bg: rgba(255, 255, 255, 0.08);
        --glass-border: rgba(255, 255, 255, 0.1);
      }
    }

    /* Light mode support */
    @media (prefers-color-scheme: light) {
      :root {
        --glass-bg: rgba(255, 255, 255, 0.2);
        --glass-border: rgba(255, 255, 255, 0.3);
        --text-color: rgba(0, 0, 0, 0.8);
        --secondary-text: rgba(0, 0, 0, 0.6);
      }
      
      body {
        background-color: #000;
      }
      
      h1 {
        background: linear-gradient(135deg, #000, #0066cc);
      }
    }
  </style>
</head>
<body>
  <div class="blob blob-1"></div>
  <div class="blob blob-2"></div>
  
  <div class="container">
    <div class="header">
      <h1>Reiker's Links</h1>
      <p class="subtitle">Connect with CodeNest services</p>
    </div>

    <div class="links">
      <a href="https://CodeNest.zone.id" target="_blank" class="link">
        <span class="link-icon">🛠️</span>
        <span class="link-text">Free Pterodactyl Panel</span>
        <span class="link-arrow">→</span>
      </a>
      
      <a href="https://t.me/reikerx" target="_blank" class="link">
        <span class="link-icon">📢</span>
        <span class="link-text">Telegram Channel</span>
        <span class="link-arrow">→</span>
      </a>
      
      <a href="https://GitHub.com/ReirLair/Levi-Md" target="_blank" class="link">
        <span class="link-icon">🤖</span>
        <span class="link-text">WhatsApp Bot (Levi-Md)</span>
        <span class="link-arrow">→</span>
      </a>
      
      <a href="https://t.me/reixxverifybot" target="_blank" class="link">
        <span class="link-icon">💳</span>
        <span class="link-text">CodeNest Payment Bot</span>
        <span class="link-arrow">→</span>
      </a>
      
      <a href="https://whatsapp.com/channel/0029VasyE7u2v1Ijck0HDf2C" target="_blank" class="link">
        <span class="link-icon">📱</span>
        <span class="link-text">WhatsApp Channel</span>
        <span class="link-arrow">→</span>
      </a>
      
      <a href="https://t.me/ikjava" target="_blank" class="link">
        <span class="link-icon">👤</span>
        <span class="link-text">Telegram Username</span>
        <span class="link-arrow">→</span>
      </a>
      
      <a href="https://reikerapi.zone.id" target="_blank" class="link">
        <span class="link-icon">📡</span>
        <span class="link-text">Free Developer APIs</span>
        <span class="link-arrow">→</span>
      </a>
    </div>

    <div class="footer">
      Made with <span class="heart">❤️</span> by Reiker
    </div>
  </div>

  <script>
    // Add interactive liquid effect on mouse movement
    document.addEventListener('mousemove', function(e) {
      const blobs = document.querySelectorAll('.blob');
      const x = e.clientX / window.innerWidth;
      const y = e.clientY / window.innerHeight;
      
      blobs.forEach((blob, index) => {
        const offsetX = (index === 0) ? -x * 20 : x * 20;
        const offsetY = (index === 0) ? -y * 20 : y * 20;
        blob.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
      });
    });

    // Add touch interaction for mobile
    document.addEventListener('touchmove', function(e) {
      if (e.touches.length > 0) {
        const touch = e.touches[0];
        const x = touch.clientX / window.innerWidth;
        const y = touch.clientY / window.innerHeight;
        
        const blobs = document.querySelectorAll('.blob');
        blobs.forEach((blob, index) => {
          const offsetX = (index === 0) ? -x * 10 : x * 10;
          const offsetY = (index === 0) ? -y * 10 : y * 10;
          blob.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
        });
      }
    });

    // Add subtle animation to links on page load
    document.addEventListener('DOMContentLoaded', function() {
      const links = document.querySelectorAll('.link');
      links.forEach((link, index) => {
        link.style.opacity = '0';
        link.style.transform = 'translateY(20px)';
        
        setTimeout(() => {
          link.style.transition = 'all 0.5s cubic-bezier(0.16, 1, 0.3, 1)';
          link.style.opacity = '1';
          link.style.transform = 'translateY(0)';
        }, 100 + (index * 100));
      });
    });
  </script>
</body>
</html>