tabs/demo.html

<div class="grid">
  <div class="card" style="grid-column: span 12; text-align: center; padding: 60px 40px;">
    <h2 style="margin-bottom: 20px;">🚀 NTv3 Live Demo</h2>
    <p style="margin-bottom: 30px; color: var(--muted); line-height: 1.7;">
      Try out the NTv3 model interactively in this live demo. Predict functional tracks and genome annotation directly in your browser. Click the button below to open the interactive demo in a new window.
    </p>
    <a 
      href="https://huggingface.co/spaces/InstaDeepAI/ntv3_tracks" 
      target="_blank" 
      rel="noopener noreferrer"
      style="
        display: inline-block;
        padding: 16px 32px;
        background: var(--link);
        color: white;
        text-decoration: none;
        border-radius: 12px;
        font-weight: 600;
        font-size: 16px;
        transition: all 0.2s ease;
        box-shadow: 0 4px 12px rgba(125, 211, 252, 0.3);
      "
      onmouseover="this.style.background='#60b8e8'; this.style.transform='translateY(-2px)'; this.style.boxShadow='0 6px 16px rgba(125, 211, 252, 0.4)';"
      onmouseout="this.style.background='var(--link)'; this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 12px rgba(125, 211, 252, 0.3)';"
    >
      🚀 Open Live Demo →
    </a>
    <p style="margin-top: 30px; font-size: 13px; color: var(--muted);">
      The demo will open in a new tab. Make sure pop-ups are enabled for this site.
    </p>
  </div>
</div>