**Flaire** Your best music companion with lot of music commands and features use `.play` to get started  **Invite Me:**  **Support:** https:

Flaire

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Flaire — Your Best Music Companion</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
  <style>
    :root{
      --bg:#07120a;
      --card:#0b2616;
      --accent-1:#2bd67a; /* bright green */
      --accent-2:#00a86b; /* darker green */
      --muted:#a7d9b8;
      --glass: rgba(255,255,255,0.04);
      --radius:16px;
      --mono: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:var(--mono);
      background: radial-gradient(1200px 600px at 10% 10%, rgba(43,214,122,0.06), transparent 8%),
                  radial-gradient(800px 400px at 90% 90%, rgba(0,168,107,0.055), transparent 10%),
                  var(--bg);
      color:#eafaf0;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:40px;
    }

    .card{
      width:100%;
      max-width:920px;
      background: linear-gradient(180deg, rgba(11,38,22,0.9), rgba(9,29,17,0.85));
      border-radius:var(--radius);
      padding:28px;
      box-shadow: 0 10px 30px rgba(3,10,5,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
      border:1px solid rgba(43,214,122,0.08);
      display:grid;
      grid-template-columns: 1fr 360px;
      gap:20px;
      align-items:center;
    }

    .brand{
      display:flex;
      gap:18px;
      align-items:center;
    }
    .logo{
      width:88px;
      height:88px;
      border-radius:14px;
      background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:800;
      color:#04210f;
      font-size:28px;
      box-shadow: 0 6px 18px rgba(0,0,0,0.5), 0 0 30px rgba(43,214,122,0.06);
    }
    .title{
      line-height:1;
    }
    .title h1{
      margin:0;
      font-size:22px;
      font-weight:800;
      letter-spacing:-0.3px;
    }
    .title p{
      margin:6px 0 0 0;
      font-size:13px;
      color:var(--muted);
    }

    .tagline{
      margin-top:16px;
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
    }
    .pill{padding:6px 10px;border-radius:999px;background:var(--glass);font-size:13px;color:var(--muted);border:1px solid rgba(255,255,255,0.02)}
    .new-badge{
      background:linear-gradient(90deg,var(--accent-1),var(--accent-2));
      color:#04210f;
      font-weight:700;
      padding:6px 10px;
      font-size:13px;
      border-radius:999px;
      box-shadow: 0 4px 18px rgba(43,214,122,0.12);
    }

    .desc{
      margin-top:18px;
      color:#dff7e8;
      font-size:15px;
      max-width:62ch;
    }

    .commands{
      margin-top:18px;
      display:flex;
      gap:8px;
      flex-wrap:wrap;
    }
    .command{
      background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
      padding:10px 12px;
      border-radius:10px;
      font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', monospace;
      font-size:13px;
      border:1px solid rgba(255,255,255,0.02);
      color:#dff7e8;
    }

    /* right column */
    .panel{
      padding:18px;
      border-radius:12px;
      background: linear-gradient(180deg, rgba(12,44,21,0.6), rgba(7,23,13,0.45));
      border:1px solid rgba(43,214,122,0.06);
      height:100%;
      display:flex;
      flex-direction:column;
      align-items:stretch;
      justify-content:center;
      gap:14px;
    }
    .links{display:flex;flex-direction:column;gap:10px}
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding:10px 14px;
      border-radius:10px;
      font-weight:700;
      text-decoration:none;
      font-size:14px;
      border:1px solid rgba(0,0,0,0.12);
      cursor:pointer;
      transition:transform .12s ease, box-shadow .12s ease;
    }
    .btn:active{transform:scale(.995)}

    .btn-invite{
      background: linear-gradient(90deg,var(--accent-1),var(--accent-2));
      color:#04210f;
      box-shadow: 0 10px 30px rgba(40,220,120,0.12), inset 0 -2px 0 rgba(0,0,0,0.06);
    }
    .btn-support{
      background:transparent;
      color:var(--accent-1);
      border:1px solid rgba(43,214,122,0.14);
    }
    .btn-website{
      background:transparent;
      color:var(--muted);
      border:1px dashed rgba(43,214,122,0.06);
      cursor:default;
      opacity:0.9;
    }

    .hint{font-size:13px;color:var(--muted);}

    .footer{
      margin-top:6px;
      display:flex;
      gap:8px;
      align-items:center;
      justify-content:flex-start;
      color:var(--muted);
      font-size:13px;
    }

    /* small screens */
    @media (max-width:880px){
      .card{grid-template-columns:1fr; padding:20px}
      .logo{width:72px;height:72px;font-size:22px}
    }

    /* subtle animation */
    @keyframes floaty{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}
    .logo{animation:floaty 6s ease-in-out infinite}

    /* codebox style for .play example */
    .codebox{
      margin-top:10px;
      background:rgba(0,0,0,0.18);
      padding:10px 12px;
      border-radius:8px;
      font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', monospace;
      font-size:13px;
      color:#e6ffef;
      display:inline-block;
      border:1px solid rgba(43,214,122,0.06);
    }

  </style>
</head>
<body>
  <main class="card" role="region" aria-label="Flaire music bot showcase">
    <section>
      <div class="brand">
        <div class="logo">F</div>
        <div class="title">
          <h1>Flaire</h1>
          <p>Your best music companion — packed with commands & features</p>
          <div class="tagline">
            <span class="pill">Use <strong>.play</strong> to get started</span>
            <span class="new-badge">New: Slashcommands Added!</span>
          </div>
        </div>
      </div>

      <p class="desc">Flaire brings smooth, reliable music playback and essential music controls. Playlists, search commands, and filters are coming soon. Lightweight, responsive and easy to use.</p>

      <div class="commands" aria-hidden>
        <span class="command">.play &lt;song|url&gt;</span>
        <span class="command">.pause</span>
        <span class="command">.skip</span>
        <span class="command">.nowplaying</span></span>
        <span class="command">.join</span>
        <span class="command">.leave</span>
        <span class="command">.stop</span>
        <span class="command">.help</span>
        <span class="command">.loop</span>
      </div>

      <div class="codebox" aria-live="polite">Try: <strong>.play</strong> &lt;song name or YouTube link&gt;</div>

      <div class="footer">
        <div>Invite Me: <span style="font-weight:700; margin-left:6px;">(click invite)</span></div>
      </div>
    </section>

    <aside class="panel" aria-label="Quick links">
      <div style="font-size:13px;font-weight:800;color:var(--accent-1)">Quick Links</div>
      <div class="links">
        <a class="btn btn-invite" href="#" role="button" onclick="alert('Replace this link with your bot invite URL')">Invite Me</a>
        <a class="btn btn-support" href="https://discord.gg/EuZDpmptQW" target="_blank" rel="noopener" role="link">Support Server</a>
        <div class="btn btn-website" title="Website coming soon">Website: soon</div>
      </div>

      <div style="margin-top:8px;">
        <div class="hint">Support & community</div>
        <div style="font-size:13px;color:var(--muted)">Join the support server for setup help, commands, and updates.</div>
      </div>

      <div style="margin-top:12px; display:flex; gap:8px; align-items:center; justify-content:flex-start;">
        <div style="font-size:12px;padding:8px;border-radius:8px;background:rgba(255,255,255,0.02);">🎧 Bot • Music</div>
        <div style="font-size:12px;padding:8px;border-radius:8px;background:rgba(255,255,255,0.02);">⚡ Fast</div>
        <div style="font-size:12px;padding:8px;border-radius:8px;background:rgba(255,255,255,0.02);">🔒 Secure</div>
      </div>

    </aside>
  </main>
</body>
</html>


<html lang="en"><head></head><body><p>




<title>Flaire — Your Best Music Companion</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&amp;display=swap" rel="stylesheet">


</p><div>
  <main class="card" role="region" aria-label="Flaire music bot showcase">
    <section>
      <div class="brand">
        <div class="logo">F</div>
        <div class="title">
          <h1>Flaire</h1>
          <p>Your best music companion — packed with commands &amp; features</p>
          <div class="tagline">
            <span class="pill">Use <strong>.play</strong> to get started</span>
            <span class="new-badge">New: Slashcommands Added!</span>
          </div>
        </div>
      </div>
      <p class="desc">Flaire brings smooth, reliable music playback and essential music controls. Playlists, search commands, and filters are coming soon. Lightweight, responsive and easy to use.</p>
      <div class="commands" aria-hidden="">
        <span class="command">.play &lt;song|url&gt;</span>
        <span class="command">.pause</span>
        <span class="command">.skip</span>
        <span class="command">.nowplaying</span>
        <span class="command">.join</span>
        <span class="command">.leave</span>
        <span class="command">.stop</span>
        <span class="command">.help</span>
        <span class="command">.loop</span>
      </div>
      <div class="codebox" aria-live="polite">Try: <strong>.play</strong> &lt;song name or YouTube link&gt;</div>
      <div class="footer">
        <div>Invite Me: <span style="font-weight:700; margin-left:6px;">(click invite)</span></div>
      </div>
    </section>
    <aside class="panel" aria-label="Quick links">
      <div style="font-size:13px;font-weight:800;color:var(--accent-1)">Quick Links</div>
      <div class="links">
        <a class="btn btn-invite" href="#" role="button">Invite Me</a>
        <a class="btn btn-support" href="https://discord.gg/EuZDpmptQW" rel="noopener" role="link">Support Server</a>
        <div class="btn btn-website" title="Website coming soon">Website: soon</div>
      </div>
      <div style="margin-top:8px;">
        <div class="hint">Support &amp; community</div>
        <div style="font-size:13px;color:var(--muted)">Join the support server for setup help, commands, and updates.</div>
      </div>
      <div style="margin-top:12px; display:flex; gap:8px; align-items:center; justify-content:flex-start;">
        <div style="font-size:12px;padding:8px;border-radius:8px;background:rgba(255,255,255,0.02);">🎧 Bot • Music</div>
        <div style="font-size:12px;padding:8px;border-radius:8px;background:rgba(255,255,255,0.02);">⚡ Fast</div>
        <div style="font-size:12px;padding:8px;border-radius:8px;background:rgba(255,255,255,0.02);">🔒 Secure</div>
      </div>
    </aside>
  </main>
</div>

</body></html>

Flaire

Mời

Mời

Vote (0)

Mời

Mời

Vote (0)

Tổng quan

Flaire

Đánh giá & Nhận xét