✨ feat: add contributions and motivations

Author: TracyLucia

index.html

@@ -219,8 +219,12 @@ <h1 class="title is-1 publication-title">
             </div>
 
             <div class="lab-logos">
-              <img src="static/images/MASLab.png" alt="MAS Lab" class="lab-logo lab-logo-maslab">
-              <img src="static/images/StarLab.png" alt="STAR Lab" class="lab-logo">
+              <a href="https://github.com/HITSZ-MAS" target="_blank" rel="noopener noreferrer">
+                <img src="static/images/MASLab.png" alt="MAS Lab" class="lab-logo lab-logo-maslab">
+              </a>
+              <a href="https://github.com/Robotics-STAR-Lab" target="_blank" rel="noopener noreferrer">
+                <img src="static/images/StarLab.png" alt="STAR Lab" class="lab-logo">
+              </a>
             </div>
 
             <div class="publication-links">
@@ -302,8 +306,76 @@ <h2 class="title is-3">Abstract</h2>
 </section>
 <!-- End paper abstract -->
 
+<!-- Motivations & Contributions -->
+<section class="section motiv-contrib-section">
+  <div class="container is-max-desktop">
+    <h2 class="title is-3 has-text-centered motiv-contrib-title">Motivations &amp; Contributions</h2>
+
+    <!-- Motivations -->
+    <div class="motiv-contrib-block">
+      <h3 class="motiv-contrib-subtitle motiv-subtitle"><i class="fas fa-lightbulb"></i> Motivations</h3>
+      <div class="motiv-cards">
+        <div class="motiv-card motiv-card-1" onclick="openMotivVideo('static/videos/motivation1.mp4')">
+          <div class="motiv-card-icon motiv-card-icon-1"><i class="fas fa-project-diagram"></i></div>
+          <div class="motiv-card-body">
+            <p class="motiv-card-heading">Inadequate Task Representation <i class="fas fa-play motiv-play-hint"></i></p>
+            <p>Topology-agnostic representation overlooks the underlying connectivity of the regions.</p>
+          </div>
+        </div>
+        <div class="motiv-card motiv-card-2" onclick="openMotivVideo('static/videos/motivation2.mp4')">
+          <div class="motiv-card-icon motiv-card-icon-2"><i class="fas fa-route"></i></div>
+          <div class="motiv-card-body">
+            <p class="motiv-card-heading">Non-Contiguous Task Assignment <i class="fas fa-play motiv-play-hint"></i></p>
+            <p>Existing allocation strategies often fail to consider spatiotemporal contiguity.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Contributions -->
+    <div class="motiv-contrib-block">
+      <h3 class="motiv-contrib-subtitle contrib-subtitle"><i class="fas fa-star"></i> Contributions</h3>
+      <div class="contrib-list">
+        <div class="contrib-item contrib-item-clickable" onclick="openMotivVideo('static/videos/contribution1.mp4')">
+          <span class="contrib-index">01</span>
+          <div class="contrib-content">
+            <p class="contrib-heading">Connectivity-Aware Task Representation <i class="fas fa-play motiv-play-hint"></i></p>
+            <p>We construct a connectivity graph that decomposes disconnected unknown regions into independent task units, enabling flexible and communication-efficient task management.</p>
+          </div>
+        </div>
+        <div class="contrib-item contrib-item-clickable" onclick="openMotivVideo('static/videos/contribution2.mp4')">
+          <span class="contrib-index">02</span>
+          <div class="contrib-content">
+            <p class="contrib-heading">Contiguity-Driven Allocation Formulation <i class="fas fa-play motiv-play-hint"></i></p>
+            <p>We introduce a graph-based neighborhood penalty to discourage non-adjacent task assignments, promoting spatiotemporally contiguous allocation sequences over time.</p>
+          </div>
+        </div>
+        <div class="contrib-item contrib-item-clickable" onclick="document.getElementById('benchmark').scrollIntoView({behavior:'smooth'})">
+          <span class="contrib-index">03</span>
+          <div class="contrib-content">
+            <p class="contrib-heading">State-of-the-Art Performance <i class="fas fa-arrow-down motiv-play-hint"></i></p>
+            <p>C<sup>2</sup>-Explorer reduces average exploration time by <strong>43.1%</strong> and path length by <strong>33.3%</strong> compared to SOTA baselines, with real-world flights validating the system's feasibility.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+<!-- End Motivations & Contributions -->
+
+<!-- Motivation Video Modal -->
+<div id="motiv-video-modal" class="motiv-modal" onclick="closeMotivVideo(event)">
+  <div class="motiv-modal-inner">
+    <button class="motiv-modal-close" onclick="closeMotivVideo()" aria-label="Close">&times;</button>
+    <video id="motiv-modal-video" controls playsinline>
+      <source id="motiv-modal-source" src="" type="video/mp4">
+    </video>
+  </div>
+</div>
+<!-- End Motivation Video Modal -->
+
 <!-- Benchmark Comparison -->
-<section class="section">
+<section class="section" id="benchmark">
   <div class="container is-max-desktop">
     <div class="columns is-centered has-text-centered">
       <div class="column is-four-fifths">

static/css/index.css

@@ -240,6 +240,16 @@ body {
   margin-bottom: 1.5rem;
 }
 
+.lab-logos a {
+  outline: none;
+  display: inline-flex;
+}
+
+.lab-logos a:focus,
+.lab-logos a:focus-visible {
+  outline: none;
+}
+
 .lab-logo {
   height: 50px;
   width: auto;
@@ -324,6 +334,246 @@ body {
   font-weight: 700;
 }
 
+/* ── Motivations & Contributions ── */
+.motiv-contrib-section {
+  background: var(--background-secondary);
+}
+
+.motiv-contrib-title {
+  margin-bottom: 2.5rem !important;
+}
+
+.motiv-contrib-block {
+  margin-bottom: 2.5rem;
+}
+
+.motiv-contrib-subtitle {
+  font-size: 1.2rem;
+  font-weight: 700;
+  color: var(--primary-color);
+  margin-bottom: 1.2rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.motiv-subtitle {
+  color: #FFD700;
+}
+
+.contrib-subtitle {
+  color: #1E90FF;
+}
+
+/* Motivation cards */
+.motiv-cards {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1.2rem;
+}
+
+@media (max-width: 640px) {
+  .motiv-cards {
+    grid-template-columns: 1fr;
+  }
+}
+
+.motiv-card {
+  display: flex;
+  gap: 1rem;
+  background: var(--background-primary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
+  padding: 1.3rem 1.5rem;
+  box-shadow: var(--shadow-sm);
+  transition: var(--transition);
+  cursor: pointer;
+}
+
+.motiv-card:hover {
+  box-shadow: var(--shadow-md);
+  transform: translateY(-3px);
+  border-color: var(--primary-color);
+}
+
+.motiv-card-1:hover {
+  border-color: #DEB887;
+}
+
+.motiv-card-2:hover {
+  border-color: #778899;
+}
+
+.motiv-card-icon {
+  flex-shrink: 0;
+  width: 2.4rem;
+  height: 2.4rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1rem;
+}
+
+.motiv-card-icon-1 {
+  background: linear-gradient(135deg, #f5ead8, #edd9b5);
+  color: #DEB887;
+}
+
+.motiv-card-icon-2 {
+  background: linear-gradient(135deg, #dde2e8, #c4ccd6);
+  color: #778899;
+}
+
+.motiv-card-heading {
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 0.3rem !important;
+}
+
+.motiv-card-body p {
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: 0.95rem;
+  line-height: 1.6;
+}
+
+/* Contribution list */
+.motiv-play-hint {
+  font-size: 0.7rem;
+  color: var(--text-light);
+  margin-left: 0.3rem;
+  vertical-align: middle;
+  transition: color 0.2s ease;
+}
+
+.motiv-card:hover .motiv-play-hint {
+  color: var(--primary-color);
+}
+
+/* Motivation video modal */
+.motiv-modal {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.75);
+  z-index: 9999;
+  align-items: center;
+  justify-content: center;
+}
+
+.motiv-modal.is-active {
+  display: flex;
+}
+
+.motiv-modal-inner {
+  position: relative;
+  width: min(800px, 80vw);
+  background: #000;
+  border-radius: var(--border-radius-lg);
+  overflow: hidden;
+  box-shadow: var(--shadow-xl);
+}
+
+.motiv-modal-inner video {
+  display: block;
+  width: 100%;
+  max-height:80vh;
+}
+
+.motiv-modal-close {
+  position: absolute;
+  top: 0.6rem;
+  right: 0.8rem;
+  background: rgba(255,255,255,0.15);
+  border: none;
+  color: #fff;
+  font-size: 1.5rem;
+  line-height: 1;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  cursor: pointer;
+  z-index: 1;
+  transition: background 0.2s ease;
+}
+
+.motiv-modal-close:hover {
+  background: rgba(255,255,255,0.35);
+}
+
+/* end motivation video modal */
+
+.contrib-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.contrib-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 1.2rem;
+  background: var(--background-primary);
+  border: 1px solid var(--border-color);
+  border-left: 4px solid var(--primary-color);
+  border-radius: var(--border-radius);
+  padding: 1.2rem 1.5rem;
+  box-shadow: var(--shadow-sm);
+  transition: var(--transition);
+}
+
+.contrib-item:hover {
+  box-shadow: var(--shadow-md);
+  transform: translateX(4px);
+}
+
+.contrib-index {
+  flex-shrink: 0;
+  font-size: 1.5rem;
+  font-weight: 800;
+  color: var(--border-color);
+  line-height: 1;
+  min-width: 2rem;
+}
+
+.contrib-heading {
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 0.3rem !important;
+}
+
+.contrib-content p {
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: 0.95rem;
+  line-height: 1.6;
+}
+
+.contrib-item-clickable {
+  cursor: pointer;
+}
+
+.contrib-item-clickable:hover {
+  box-shadow: var(--shadow-md);
+  transform: translateX(4px);
+  border-left-color: var(--primary-color);
+}
+
+.contrib-item-clickable .motiv-play-hint {
+  font-size: 0.7rem;
+  color: var(--text-light);
+  margin-left: 0.3rem;
+  vertical-align: middle;
+  transition: color 0.2s ease;
+}
+
+.contrib-item-clickable:hover .motiv-play-hint {
+  color: var(--primary-color);
+}
+
+/* end contribution video modal */
+
 .publication-banner {
   max-height: 70vh;
   border-radius: var(--border-radius-lg);

static/images/cover.jpg

@@ -36,6 +36,31 @@ function copyBibTeX() {
     }
 }
 
+// Motivation video modal
+function openMotivVideo(src) {
+  const modal = document.getElementById('motiv-video-modal');
+  const source = document.getElementById('motiv-modal-source');
+  const video = document.getElementById('motiv-modal-video');
+  source.src = src;
+  video.load();
+  video.play();
+  modal.classList.add('is-active');
+  document.body.style.overflow = 'hidden';
+}
+
+function closeMotivVideo(event) {
+  if (event && event.target !== event.currentTarget) return;
+  const modal = document.getElementById('motiv-video-modal');
+  const video = document.getElementById('motiv-modal-video');
+  video.pause();
+  modal.classList.remove('is-active');
+  document.body.style.overflow = '';
+}
+
+document.addEventListener('keydown', function(e) {
+  if (e.key === 'Escape') closeMotivVideo();
+});
+
 // Scroll to top functionality
 function scrollToTop() {
     window.scrollTo({