v1.2.6 update homepage citation

Author: MPX0222

index.html

@@ -447,17 +447,49 @@ <h3 class="title is-4">Additional Experimental Details</h3>
 <!--BibTex citation -->
   <section class="section" id="BibTeX">
     <div class="container is-max-desktop content">
-      <h2 class="title">BibTeX</h2>
-      <pre><code>@article{ma2025sql,
+      <h2 class="title is-3">Citation</h2>
+      <p class="has-text-centered" style="margin-bottom: 1.5rem; color: #555; font-size: 1.05rem; font-weight: 500;">
+        If you find SQL-R1 useful for your research, please consider citing our paper:
+      </p>
+      <div class="bibtex-container">
+        <button class="copy-button" onclick="copyBibTeX(this)">
+          <i class="fas fa-copy"></i> Copy
+        </button>
+        <pre><code>@article{ma2025sql,
   title={SQL-R1: Training Natural Language to SQL Reasoning Model By Reinforcement Learning},
   author={Ma, Peixian and Zhuang, Xialie and Xu, Chengjin and Jiang, Xuhui and Chen, Ran and Guo, Jian},
   journal={arXiv preprint arXiv:2504.08600},
   year={2025}
 }</code></pre>
+      </div>
     </div>
 </section>
 <!--End BibTex citation -->
 
+<script>
+function copyBibTeX(button) {
+  const code = button.nextElementSibling.querySelector('code');
+  const text = code.textContent;
+  
+  navigator.clipboard.writeText(text).then(() => {
+    const originalText = button.innerHTML;
+    button.innerHTML = '<i class="fas fa-check"></i> Copied!';
+    button.classList.add('copied');
+    
+    setTimeout(() => {
+      button.innerHTML = originalText;
+      button.classList.remove('copied');
+    }, 2000);
+  }).catch(err => {
+    console.error('Copy failed:', err);
+    button.innerHTML = '<i class="fas fa-times"></i> Failed';
+    setTimeout(() => {
+      button.innerHTML = '<i class="fas fa-copy"></i> Copy';
+    }, 2000);
+  });
+}
+</script>
+
 
   <footer class="footer">
   <div class="container">

static/css/index.css

@@ -257,5 +257,109 @@ body {
   }
 }
 
+/* BibTeX Section Styles */
+#BibTeX {
+  background: linear-gradient(135deg, #667eea10 0%, #764ba210 100%);
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
+
+#BibTeX .title {
+  color: #2c3e50;
+  font-family: 'Google Sans', sans-serif;
+  font-weight: 600;
+  font-size: 2.5rem;
+  margin-bottom: 1rem;
+  text-align: center;
+  letter-spacing: -0.5px;
+}
+
+#BibTeX pre {
+  background: #ffffff;
+  border: 1px solid #e1e4e8;
+  border-left: 4px solid #3273dc;
+  border-radius: 8px;
+  padding: 1.5rem 2rem;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  margin: 0;
+  position: relative;
+  transition: all 0.3s ease;
+}
+
+#BibTeX pre:hover {
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
+  transform: translateY(-2px);
+}
+
+#BibTeX pre code {
+  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Fira Mono', 'Roboto Mono', 'Courier New', Courier, monospace;
+  font-size: 0.95rem;
+  line-height: 1.9;
+  color: #24292e;
+  display: block;
+  overflow-x: auto;
+  font-weight: 400;
+  letter-spacing: 0.3px;
+}
+
+/* Copy button for BibTeX */
+.bibtex-container {
+  position: relative;
+}
+
+.copy-button {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  background: #3273dc;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  padding: 0.6rem 1.2rem;
+  font-size: 0.875rem;
+  font-family: 'Google Sans', sans-serif;
+  font-weight: 500;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.3s ease, background 0.2s ease, transform 0.1s ease;
+  z-index: 10;
+  box-shadow: 0 2px 8px rgba(50, 115, 220, 0.3);
+}
+
+.bibtex-container:hover .copy-button {
+  opacity: 1;
+}
+
+.copy-button:hover {
+  background: #2366d1;
+}
+
+.copy-button:active {
+  transform: scale(0.95);
+}
+
+.copy-button.copied {
+  background: #48c774;
+}
+
+/* Responsive BibTeX styles */
+@media screen and (max-width: 768px) {
+  #BibTeX pre {
+    padding: 1rem 1.25rem;
+  }
+  
+  #BibTeX pre code {
+    font-size: 0.85rem;
+    line-height: 1.6;
+  }
+  
+  .copy-button {
+    opacity: 1;
+    position: static;
+    margin-bottom: 1rem;
+    width: 100%;
+  }
+}
+