<!-- Hey bro! I only know the basics of HTML and CSS, so this website might not be perfect. The source was generated by AI, so please bear with me if some parts don’t look great.-->
<!-- Hey bro! I only know the basics of HTML and CSS, so this website might not be perfect. The source was generated by AI, so please bear with me if some parts don’t look great.-->
<!-- Hey bro! I only know the basics of HTML and CSS, so this website might not be perfect. The source was generated by AI, so please bear with me if some parts don’t look great.-->
<!-- Hey bro! I only know the basics of HTML and CSS, so this website might not be perfect. The source was generated by AI, so please bear with me if some parts don’t look great.-->
<!-- Hey bro! I only know the basics of HTML and CSS, so this website might not be perfect. The source was generated by AI, so please bear with me if some parts don’t look great.-->
<!-- Hey bro! I only know the basics of HTML and CSS, so this website might not be perfect. The source was generated by AI, so please bear with me if some parts don’t look great.-->
<!-- Hey bro! I only know the basics of HTML and CSS, so this website might not be perfect. The source was generated by AI, so please bear with me if some parts don’t look great.-->
<!-- Hey bro! I only know the basics of HTML and CSS, so this website might not be perfect. The source was generated by AI, so please bear with me if some parts don’t look great.-->
<!-- Hey bro! I only know the basics of HTML and CSS, so this website might not be perfect. The source was generated by AI, so please bear with me if some parts don’t look great.-->
<!-- Hey bro! I only know the basics of HTML and CSS, so this website might not be perfect. The source was generated by AI, so please bear with me if some parts don’t look great.-->
<!-- Hey bro! I only know the basics of HTML and CSS, so this website might not be perfect. The source was generated by AI, so please bear with me if some parts don’t look great.-->
<!-- Hey bro! I only know the basics of HTML and CSS, so this website might not be perfect. The source was generated by AI, so please bear with me if some parts don’t look great.-->
<!-- Hey bro! I only know the basics of HTML and CSS, so this website might not be perfect. The source was generated by AI, so please bear with me if some parts don’t look great.-->
<!-- Hey bro! I only know the basics of HTML and CSS, so this website might not be perfect. The source was generated by AI, so please bear with me if some parts don’t look great.-->
<!-- Hey bro! I only know the basics of HTML and CSS, so this website might not be perfect. The source was generated by AI, so please bear with me if some parts don’t look great.-->
<!-- Hey bro! I only know the basics of HTML and CSS, so this website might not be perfect. The source was generated by AI, so please bear with me if some parts don’t look great.-->
<!-- Hey bro! I only know the basics of HTML and CSS, so this website might not be perfect. The source was generated by AI, so please bear with me if some parts don’t look great.-->
<!-- Hey bro! I only know the basics of HTML and CSS, so this website might not be perfect. The source was generated by AI, so please bear with me if some parts don’t look great.-->
<!-- Hey bro! I only know the basics of HTML and CSS, so this website might not be perfect. The source was generated by AI, so please bear with me if some parts don’t look great.-->
<!-- Hey bro! I only know the basics of HTML and CSS, so this website might not be perfect. The source was generated by AI, so please bear with me if some parts don’t look great.-->
<!-- Hey bro! I only know the basics of HTML and CSS, so this website might not be perfect. The source was generated by AI, so please bear with me if some parts don’t look great.-->
<!-- Hey bro! I only know the basics of HTML and CSS, so this website might not be perfect. The source was generated by AI, so please bear with me if some parts don’t look great.-->
<!-- Hey bro! I only know the basics of HTML and CSS, so this website might not be perfect. The source was generated by AI, so please bear with me if some parts don’t look great.-->
<!-- Hey bro! I only know the basics of HTML and CSS, so this website might not be perfect. The source was generated by AI, so please bear with me if some parts don’t look great.-->

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>DeeSyn</title>
  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;500;700;900&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet" />
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  
  <style>
    :root {
      --primary: #5865F2; 
      --accent: #F47FFF; 
      --glass-bg: rgba(255, 255, 255, 0.03);
      --glass-border: rgba(255, 255, 255, 0.08);
      --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
      --text-main: #ffffff;
      --text-muted: #a0a0b0;
      --bg-dark: #090912;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }
    
    body {
      font-family: 'Outfit', sans-serif;
      background-color: var(--bg-dark);
      color: var(--text-main);
      overflow-x: hidden;
      line-height: 1.6;
    }

    .background-blobs {
      position: fixed;
      top: 0; left: 0; width: 100%; height: 100%;
      z-index: -1;
      overflow: hidden;
    }
    .blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      opacity: 0.4;
      animation: floatBlob 10s infinite alternate;
    }
    .blob-1 { top: -10%; left: -10%; width: 50vw; height: 50vw; background: var(--primary); }
    .blob-2 { bottom: -10%; right: -10%; width: 40vw; height: 40vw; background: var(--accent); animation-delay: -5s; }
    
    @keyframes floatBlob {
      0% { transform: translate(0, 0) scale(1); }
      100% { transform: translate(30px, 50px) scale(1.1); }
    }

    nav {
      position: fixed;
      top: 20px; left: 50%;
      transform: translateX(-50%);
      width: 90%; max-width: 1200px;
      padding: 0.8rem 2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: rgba(15, 15, 25, 0.6);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid var(--glass-border);
      border-radius: 100px;
      z-index: 1000;
      transition: all 0.3s ease;
    }

    .logo-container { display: flex; align-items: center; gap: 10px; cursor: pointer; }
    .logo-img { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--primary); }
    .logo-text { font-weight: 800; font-size: 1.5rem; letter-spacing: -0.5px; }

    /* Desktop Menu */
    .nav-links { list-style: none; display: flex; gap: 30px; }
    .nav-links a {
      text-decoration: none; color: var(--text-muted); font-weight: 500;
      transition: 0.3s; position: relative;
    }
    .nav-links a:hover { color: var(--text-main); text-shadow: 0 0 10px rgba(255,255,255,0.5); }
    .nav-links a::after {
      content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px;
      background: var(--accent); transition: width 0.3s;
    }
    .nav-links a:hover::after { width: 100%; }

    .menu-toggle { display: none; font-size: 2rem; cursor: pointer; color: var(--text-main); }

    .hero {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 0 20px;
      padding-top: 80px; 
    }

    .hero h1 {
      font-size: clamp(3rem, 8vw, 6rem);
      line-height: 1.1;
      margin-bottom: 20px;
      font-weight: 900;
      background: linear-gradient(135deg, #fff 0%, var(--primary) 50%, var(--accent) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      filter: drop-shadow(0 0 30px rgba(88, 101, 242, 0.3));
    }

    .hero p {
      font-size: clamp(1rem, 2vw, 1.3rem);
      color: var(--text-muted);
      max-width: 600px;
      margin-bottom: 40px;
    }

    .btn-group { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
    .btn {
      padding: 14px 32px;
      border-radius: 50px;
      font-weight: 700;
      text-decoration: none;
      transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      position: relative;
      overflow: hidden;
    }
    
    .btn.primary {
      background: var(--primary);
      color: white;
      box-shadow: 0 10px 20px rgba(88, 101, 242, 0.4);
    }
    
    .btn.secondary {
      background: rgba(255,255,255,0.1);
      color: white;
      border: 1px solid var(--glass-border);
      backdrop-filter: blur(5px);
    }

    .btn:hover { transform: translateY(-3px) scale(1.05); }
    .btn.primary:hover { box-shadow: 0 15px 30px rgba(244, 127, 255, 0.4); background: var(--accent); }

    .section-title {
      text-align: center; font-size: 2.5rem; margin-bottom: 3rem; font-weight: 700;
      position: relative; display: inline-block; left: 50%; transform: translateX(-50%);
    }
    
    .feature-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px 4rem;
    }

    .card {
      background: var(--glass-bg);
      backdrop-filter: blur(12px);
      border: 1px solid var(--glass-border);
      border-radius: 24px;
      padding: 2.5rem;
      transition: 0.4s;
      position: relative;
      overflow: hidden;
    }
    
    .card::before {
      content: ''; position: absolute; top: 0; left: -100%;
      width: 100%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
      transition: 0.5s;
    }
    .card:hover::before { left: 100%; }
    .card:hover {
      transform: translateY(-10px);
      border-color: rgba(255,255,255,0.3);
      box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    }

    .card .icon { font-size: 3rem; color: var(--primary); margin-bottom: 1rem; }
    .card h3 { font-size: 1.5rem; margin-bottom: 10px; }
    .card p { color: var(--text-muted); font-size: 0.95rem; }

    #stats { padding: 4rem 20px; max-width: 1000px; margin: 0 auto; }
    .chart-container {
      background: rgba(10, 10, 20, 0.6);
      border: 1px solid var(--glass-border);
      border-radius: 24px;
      padding: 20px;
      box-shadow: var(--glass-shadow);
    }

    footer {
      text-align: center; padding: 3rem;
      border-top: 1px solid var(--glass-border);
      background: rgba(0,0,0,0.2);
      color: var(--text-muted);
    }

    @media (max-width: 768px) {
      nav { width: 95%; padding: 0.8rem 1.5rem; }
      
      .menu-toggle { display: block; }
      
      .nav-links {
        position: absolute;
        top: 70px; left: 0; width: 100%;
        background: rgba(15, 15, 25, 0.95);
        backdrop-filter: blur(20px);
        flex-direction: column;
        align-items: center;
        padding: 2rem 0;
        border-radius: 20px;
        border: 1px solid var(--glass-border);
        clip-path: circle(0% at 90% 10%); 
        transition: clip-path 0.5s ease-in-out;
        gap: 20px;
      }
      
      .nav-links.active { clip-path: circle(150% at 90% 10%); }
    }
  </style>
</head>
<body>

  <div class="background-blobs">
    <div class="blob blob-1"></div>
    <div class="blob blob-2"></div>
  </div>

  <header>
    <nav>
      <div class="logo-container">
        <img src="https://cdn.discordapp.com/avatars/981424058392526848/da852f5873357252fb079599592af769.webp?size=1024" alt="Logo" class="logo-img"/>
        <span class="logo-text">DeeSyn</span>
      </div>
      
      <ul class="nav-links">
        <li><a href="#features">Tính năng</a></li>
        <li><a href="#stats">Dữ liệu</a></li>
        <li><a href="terms.html">Terms</a></li>
        <li><a href="https://discord.gg/dvfyBuMY9s" target="_blank">Cộng đồng</a></li>
        <li><a href="#invite" style="color: var(--accent);">Mời Bot</a></li>
      </ul>


      <div class="menu-toggle" onclick="toggleMenu()">
        <span class="material-icons-outlined">menu</span>
      </div>
    </nav>

    <section class="hero">
      <h1>Thiết kế<br>Server với DeeSyn</h1>
      <p> DeeSyn sử dụng Ai để giúp bạn thiết kế máy chủ 1 cách nhanh chóng. </p>
      
      <div class="btn-group">
        <a href="https://discord.com/oauth2/authorize?client_id=981424058392526848" class="btn primary">
          <span class="material-icons-outlined" style="vertical-align: bottom; font-size: 20px;">add</span> Mời Bot Ngay
        </a>
        <a href="#features" class="btn secondary">Xem Tính Năng</a>
      </div>
    </section>
  </header>

  <main>
    <section id="features">
      <h2 class="section-title">Tính năng</h2>
      <div class="feature-grid">
        <div class="card">
          <span class="material-icons-outlined icon">auto_fix_high</span>
          <h3>AI Setup Auto</h3>
          <p>Phân tích chủ đề server và tự động tạo Category, Channels trong 30 giây với cấu trúc chuẩn community.</p>
        </div>
        <div class="card">
          <span class="material-icons-outlined icon">shield</span>
          <h3>Anti-Raid</h3>
          <p>Coming soon...</p>
        </div>
        <div class="card">
          <span class="material-icons-outlined icon">analytics</span>
          <h3>MC Utils</h3>
          <p>(comming soon...)Cung cấp các công cụ mạnh mẽ cho các máy chủ minecraft.</p>
        </div>
      </div>
    </section>

    <section id="stats">
      <h2 class="section-title">Tăng trưởng thực tế</h2>
      <div class="chart-container">
        <canvas id="botChart"></canvas>
      </div>
    </section>

    <section id="invite" style="text-align: center; padding: 4rem 1rem;">
      <h2 style="font-size: 2rem; margin-bottom: 1rem;">Sẵn sàng nâng cấp máy chủ?</h2>
      <a href="https://discord.com/oauth2/authorize?client_id=981424058392526848" class="btn primary" style="padding: 1rem 3rem; font-size: 1.2rem;">
        Thêm DeeSyn Vào Discord
      </a>
    </section>
  </main>

  <footer>
    <p>&copy; 2025,2026 DeeSyn.</p>
  </footer>

  <script>
    function toggleMenu() {
      const nav = document.querySelector('.nav-links');
      const icon = document.querySelector('.menu-toggle span');
      nav.classList.toggle('active');
      
      if(nav.classList.contains('active')) {
        icon.textContent = 'close';
      } else {
        icon.textContent = 'menu';
      }
    }

    document.querySelectorAll('.nav-links a').forEach(link => {
      link.addEventListener('click', () => {
        document.querySelector('.nav-links').classList.remove('active');
        document.querySelector('.menu-toggle span').textContent = 'menu';
      });
    });

    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.style.opacity = 1;
          entry.target.style.transform = 'translateY(0)';
        }
      });
    }, { threshold: 0.1 });

    document.querySelectorAll('.card').forEach(el => {
      el.style.opacity = 0;
      el.style.transform = 'translateY(30px)';
      el.style.transition = 'all 0.6s ease-out';
      observer.observe(el);
    });

    const ctx = document.getElementById('botChart').getContext('2d');
    
    let gradientServers = ctx.createLinearGradient(0, 0, 0, 400);
    gradientServers.addColorStop(0, 'rgba(88, 101, 242, 0.5)');
    gradientServers.addColorStop(1, 'rgba(88, 101, 242, 0.0)');

    const botChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: ['27/4/2025', '1/5/2025', '15/5/2025',
                 '30/5/2025', '20/9/2025', '5/10/2025',
                 '1/11/2025', '20/11/2025', '11/12/2025',
                 '22/12/2025','5/1/2026','18/1/2026',
                '16/2/2026','21/2/2026','4/3/2026','17/3/2026','26/3/2026','9/4/2026'],
        datasets: [
          {
            label: 'Servers',
            data: [1, 13, 102, 231, 540, 650, 850, 1050, 1210, 1300,1400,1500,1750,1840,1900,2000,2100,2200],
            borderColor: '#5865F2',
            backgroundColor: gradientServers,
            borderWidth: 3,
            fill: true,
            tension: 0.4,
            pointBackgroundColor: '#fff',
            pointRadius: 4
          },
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: { labels: { color: '#fff', font: {family: 'Outfit'} } },
          tooltip: {
            backgroundColor: 'rgba(0,0,0,0.8)',
            titleColor: '#fff',
            bodyColor: '#ccc',
            padding: 10,
            cornerRadius: 8,
            displayColors: false
          }
        },
        scales: {
          x: { 
            grid: { color: 'rgba(255,255,255,0.05)' },
            ticks: { color: '#888' }
          },
          y: { 
            grid: { color: 'rgba(255,255,255,0.05)' },
            ticks: { color: '#888' }
          }
        },
        interaction: {
          mode: 'index',
          intersect: false,
        },
      }
    });
  </script>
</body>
</html>