index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Research Data Portal</title>
  <link rel="stylesheet" href="css/styles.css">
  <style>
    body {
      font-family: 'Merriweather', serif;
      background-color: #f9f9f9;
      color: #333;
      margin: 0;
      padding: 0;
    }

    header {
      background: #fff;
      padding: 1rem 2rem;
      border-bottom: 1px solid #ddd;
    }

    nav {
      display: flex;
      justify-content: flex-end;
      gap: 1.5rem;
    }

    nav a {
      text-decoration: none;
      color: #0056b3;
      font-weight: 600;
    }

    nav a:hover {
      text-decoration: underline;
    }

    .hero {
      text-align: center;
      padding: 4rem 2rem;
      background: #fdfdfd;
    }

    .hero h1 {
      font-size: 2.5rem;
      margin-bottom: 1rem;
    }

    .hero p {
      font-size: 1.2rem;
      color: #555;
      max-width: 700px;
      margin: 0 auto;
    }

    .sections {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 2rem;
      padding: 3rem 2rem;
      max-width: 1100px;
      margin: 0 auto;
    }

    /* center lone items (like the Domain card) when they wrap to a new row */
    .sections {
      justify-content: center;
      justify-items: center;
    }
    /* place Domain card under the second column (beneath Cancer) */
    .sections .domain-card { grid-column: 2; }

    .card {
      background: #fff;
      padding: 2rem;
      border: 1px solid #ddd;
      border-radius: 6px;
      text-align: center;
      transition: box-shadow 0.3s ease-in-out;
    }

    .card:hover {
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
    }

    .card h2 {
      font-size: 1.4rem;
      margin-bottom: 0.75rem;
    }

    .card p {
      color: #555;
      margin-bottom: 1rem;
    }

    .card a {
      color: #fff;
      background: #0056b3;
      padding: 0.5rem 1rem;
      text-decoration: none;
      border-radius: 4px;
      font-weight: 600;
    }

    .card a:hover {
      background: #003d80;
    }

    

    footer {
      text-align: center;
      padding: 2rem;
      font-size: 0.9rem;
      color: #777;
    }
  </style>
</head>

<script>
function copyBibtex() {
  const bibtex = `@article{Shree2026.05.11.724248,
  author = {Shree, Ajita and Aditya, V and Kumar, Tanush and Zafar, Hamim},
  title = {A Comprehensive Benchmarking of Spatial Deconvolution and Domain Detection Methods across Diverse Tissues and Spatial Transcriptomic Technologies},
  journal = {bioRxiv},
  year = {2026},
  doi = {10.64898/2026.05.11.724248}
}`;

  navigator.clipboard.writeText(bibtex).then(() => {
    const msg = document.getElementById("copy-msg");

    msg.classList.add("show");

    setTimeout(() => {
      msg.classList.remove("show");
    }, 2000);
  });
}
</script>

<body>

  <header>
    <nav>
      <a href="index.html">Home</a>
      <a href="brain.html">Brain</a>
      <a href="cancer.html">Cancer</a>
      <a href="organs.html">Organs</a>
      <a href="domain.html">Domain</a>
    </nav>
  </header>

  <section class="hero">
    <h1>Benchmarking Project Data Portal</h1>
    <p>
      This site hosts the datasets accompanying our paper.  
      Explore embeddings and download the raw data directly from Figshare.

      More figures and analyses are available <a href="https://drive.google.com/drive/folders/1UFVdn0FVJxBsYD-oY-t59kryNBYxRJHb?usp=sharing">here</a> !
    </p>
  </section>
<div class="notice-box">

  <div class="notice-section">
    <div class="notice-title">
      License: <a href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank">
        CC BY-NC-ND 4.0
      </a>
    </div>

    <div class="notice-text">
      This work is licensed under the Creative Commons
      Attribution–NonCommercial–NoDerivatives 4.0 International License.
    </div>
  </div>

  <div class="notice-section">
    <div class="notice-title">
      Citation Required
    </div>

    <div class="notice-text">
      If you use any datasets, benchmark results, visualizations,
      or resources from spDDB, please cite the associated publication.
    </div>

    <a href="#" class="notice-link" onclick="copyBibtex(); return false;">
      Copy Citation →
    </a>

    <p id="copy-msg" class="copy-msg">
      Citation copied to clipboard.
    </p>
  </div>

</div>

  <section class="sections">
    <div class="card">
      <h2>🧠 Brain Datasets</h2>
      <p>Embedding visualizations and datasets for brain datasets.</p>
      <a href="brain.html">Explore</a>
    </div>

    <div class="card">
      <h2>🧬 Cancer Datasets</h2>
      <p>Embedding visualizations and datasets for cancer datasets.</p>
      <a href="cancer.html">Explore</a>
    </div>

    <div class="card">
      <h2>🫀 Organ Datasets</h2>
      <p>Embedding visualizations and datasets for organ datasets.</p>
      <a href="organs.html">Explore</a>
    </div>

    <div class="card domain-card">
      <h2>🌐 Domain Detection Datasets</h2>
      <p>Ground truth domain visualizations for datasets used in domain detection benchmarking.</p>
      <a href="domain.html">Explore</a>
    </div>
  </section>

  <footer>
    © 2026 Zafar-Lab · Built with GitHub Pages
  </footer>

</body>
</html>