Poster
+
@@ -274,11 +469,24 @@
+
-
BibTeX
-
BibTex Code Here
+
+
@article{YourPaperKey2024,
+ title={Your Paper Title Here},
+ author={First Author and Second Author and Third Author},
+ journal={Conference/Journal Name},
+ year={2024},
+ url={https://your-domain.com/your-project-page}
+}
diff --git a/static/css/index.css b/static/css/index.css
index c455901..c29bc73 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -1,16 +1,85 @@
-body {
- font-family: 'Noto Sans', sans-serif;
+/* Modern CSS Variables for consistent theming */
+:root {
+ --primary-color: #2563eb;
+ --primary-hover: #1d4ed8;
+ --secondary-color: #64748b;
+ --accent-color: #0ea5e9;
+ --text-primary: #1e293b;
+ --text-secondary: #64748b;
+ --text-light: #94a3b8;
+ --background-primary: #ffffff;
+ --background-secondary: #f8fafc;
+ --background-accent: #f1f5f9;
+ --border-color: #e2e8f0;
+ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+ --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+ --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+ --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+ --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ --gradient-accent: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+ --gradient-subtle: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
+ --border-radius: 12px;
+ --border-radius-lg: 16px;
+ --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
+/* Smooth scrolling for better UX */
+html {
+ scroll-behavior: smooth;
+}
+
+body {
+ font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
+ color: var(--text-primary);
+ line-height: 1.6;
+ font-size: 16px;
+ background-color: var(--background-primary);
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+
+/* Modern Button Styles */
+.button {
+ border-radius: var(--border-radius) !important;
+ font-weight: 600 !important;
+ transition: var(--transition) !important;
+ border: 2px solid transparent !important;
+ position: relative;
+ overflow: hidden;
+}
+
+.button.is-dark {
+ background: var(--text-primary) !important;
+ border: none !important;
+ color: white !important;
+ box-shadow: var(--shadow-md);
+}
+
+.button.is-dark:hover {
+ transform: translateY(-2px);
+ box-shadow: var(--shadow-lg);
+ background: var(--primary-color) !important;
+}
+
+.button.is-dark:active {
+ transform: translateY(0);
+ box-shadow: var(--shadow-md);
+}
.footer .icon-link {
font-size: 25px;
- color: #000;
+ color: var(--text-secondary);
+ transition: var(--transition);
+}
+
+.footer .icon-link:hover {
+ color: var(--primary-color);
+ transform: translateY(-2px);
}
.link-block a {
- margin-top: 5px;
- margin-bottom: 5px;
+ margin: 8px 4px;
}
.dnerf {
@@ -18,22 +87,47 @@ body {
}
+/* Hero Section Modernization */
+.hero {
+ position: relative;
+ overflow: hidden;
+}
+
+.hero.is-light {
+ background: var(--background-secondary);
+ border-top: 1px solid var(--border-color);
+ border-bottom: 1px solid var(--border-color);
+}
+
+.hero-body {
+ padding: 4rem 1.5rem;
+}
+
.teaser .hero-body {
- padding-top: 0;
- padding-bottom: 3rem;
+ padding-top: 2rem;
+ padding-bottom: 4rem;
}
.teaser {
- font-family: 'Google Sans', sans-serif;
+ font-family: 'Inter', sans-serif;
}
+/* Publication Content Styling */
.publication-title {
+ font-family: 'Inter', sans-serif !important;
+ font-weight: 800 !important;
+ color: var(--text-primary) !important;
+ margin-bottom: 2rem !important;
+ line-height: 1.1 !important;
}
.publication-banner {
- max-height: parent;
-
+ max-height: 70vh;
+ border-radius: var(--border-radius-lg);
+ overflow: hidden;
+ box-shadow: var(--shadow-xl);
+ margin: 2rem 0;
}
.publication-banner video {
@@ -41,62 +135,102 @@ body {
left: auto;
top: auto;
transform: none;
- object-fit: fit;
+ object-fit: cover;
+ width: 100%;
+ height: 100%;
+ border-radius: var(--border-radius-lg);
}
.publication-header .hero-body {
-}
-
-.publication-title {
- font-family: 'Google Sans', sans-serif;
+ padding: 6rem 1.5rem 4rem;
}
.publication-authors {
- font-family: 'Google Sans', sans-serif;
+ font-family: 'Inter', sans-serif !important;
+ font-weight: 500;
+ margin-bottom: 1.5rem;
}
.publication-venue {
- color: #555;
+ color: var(--text-secondary);
width: fit-content;
- font-weight: bold;
+ font-weight: 600;
+ background: var(--background-accent);
+ padding: 0.5rem 1rem;
+ border-radius: var(--border-radius);
+ margin-top: 1rem;
+ display: inline-block;
}
.publication-awards {
- color: #ff3860;
+ color: #ef4444;
width: fit-content;
- font-weight: bolder;
-}
-
-.publication-authors {
+ font-weight: 700;
+ background: linear-gradient(135deg, #fef2f2, #fee2e2);
+ padding: 0.5rem 1rem;
+ border-radius: var(--border-radius);
+ border-left: 4px solid #ef4444;
+ margin-top: 1rem;
}
.publication-authors a {
- color: hsl(204, 86%, 53%) !important;
+ color: var(--primary-color) !important;
+ text-decoration: none;
+ font-weight: 600;
+ transition: var(--transition);
+ position: relative;
+}
+
+.publication-authors a::after {
+ content: '';
+ position: absolute;
+ width: 0;
+ height: 2px;
+ bottom: -2px;
+ left: 0;
+ background: var(--gradient-accent);
+ transition: var(--transition);
+}
+
+.publication-authors a:hover::after {
+ width: 100%;
}
.publication-authors a:hover {
- text-decoration: underline;
+ color: var(--primary-hover) !important;
}
.author-block {
display: inline-block;
+ margin-right: 0.5rem;
}
.publication-banner img {
+ border-radius: var(--border-radius-lg);
+ box-shadow: var(--shadow-lg);
+ transition: var(--transition);
}
-.publication-authors {
- /*color: #4286f4;*/
+.publication-banner img:hover {
+ transform: scale(1.02);
+ box-shadow: var(--shadow-xl);
}
+/* Modern Video and Carousel Styling */
.publication-video {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
-
overflow: hidden;
- border-radius: 10px !important;
+ border-radius: var(--border-radius-lg) !important;
+ box-shadow: var(--shadow-xl);
+ transition: var(--transition);
+}
+
+.publication-video:hover {
+ transform: translateY(-4px);
+ box-shadow: var(--shadow-xl);
}
.publication-video iframe {
@@ -105,32 +239,507 @@ body {
left: 0;
width: 100%;
height: 100%;
+ border-radius: var(--border-radius-lg);
}
.publication-body img {
+ border-radius: var(--border-radius);
+ box-shadow: var(--shadow-md);
+ transition: var(--transition);
+}
+
+.publication-body img:hover {
+ transform: translateY(-2px);
+ box-shadow: var(--shadow-lg);
}
.results-carousel {
overflow: hidden;
+ padding: 1rem 0;
}
.results-carousel .item {
- margin: 5px;
+ margin: 1rem;
overflow: hidden;
- padding: 20px;
+ padding: 1.5rem;
font-size: 0;
+ background: var(--background-primary);
+ border-radius: var(--border-radius-lg);
+ box-shadow: var(--shadow-md);
+ transition: var(--transition);
+ border: 1px solid var(--border-color);
}
+.results-carousel .item:hover {
+ transform: translateY(-4px);
+ box-shadow: var(--shadow-lg);
+}
+
+.results-carousel .item img,
.results-carousel video {
margin: 0;
+ border-radius: var(--border-radius);
+ width: 100%;
+ height: auto;
}
+.results-carousel .subtitle {
+ font-size: 1rem !important;
+ color: var(--text-secondary);
+ margin-top: 1rem;
+ font-weight: 500;
+}
+
+/* Pagination and Misc Improvements */
.slider-pagination .slider-page {
- background: #000000;
+ background: var(--primary-color);
+ border-radius: 50%;
+ transition: var(--transition);
+}
+
+.slider-pagination .slider-page.is-active {
+ background: var(--primary-hover);
+ transform: scale(1.2);
}
.eql-cntrb {
- font-size: smaller;
+ font-size: 0.875rem;
+ color: var(--text-light);
+ font-style: italic;
+}
+
+/* Section Titles */
+.title.is-3 {
+ font-family: 'Inter', sans-serif !important;
+ font-weight: 700 !important;
+ color: var(--text-primary);
+ margin-bottom: 2rem !important;
+ position: relative;
+ padding-bottom: 1rem;
+}
+
+.title.is-3::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 60px;
+ height: 3px;
+ background: var(--gradient-accent);
+ border-radius: 2px;
+}
+
+/* Content Improvements */
+.content.has-text-justified {
+ font-size: 1.1rem;
+ line-height: 1.8;
+ color: var(--text-secondary);
+}
+
+.content.has-text-justified p {
+ margin-bottom: 1.5rem;
+}
+
+/* Footer Improvements */
+.footer {
+ background: var(--background-secondary);
+ border-top: 1px solid var(--border-color);
+ padding: 3rem 1.5rem;
+}
+
+.footer .content {
+ color: var(--text-secondary);
+ line-height: 1.7;
+}
+
+.footer a {
+ color: var(--primary-color);
+ text-decoration: none;
+ transition: var(--transition);
+}
+
+.footer a:hover {
+ color: var(--primary-hover);
+ text-decoration: underline;
+}
+
+/* BibTeX Styling */
+pre {
+ background: var(--background-accent) !important;
+ border: 1px solid var(--border-color) !important;
+ border-radius: var(--border-radius) !important;
+ padding: 1.5rem !important;
+ font-size: 0.9rem !important;
+ overflow-x: auto;
+ box-shadow: var(--shadow-sm);
+}
+
+code {
+ background: var(--background-accent) !important;
+ color: var(--text-primary) !important;
+ font-family: 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', monospace !important;
+}
+
+/* BibTeX Section Improvements */
+.bibtex-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 1rem;
+}
+
+.copy-bibtex-btn {
+ background: var(--primary-color);
+ color: white;
+ border: none;
+ border-radius: var(--border-radius);
+ padding: 0.75rem 1rem;
+ font-size: 0.9rem;
+ font-weight: 600;
+ cursor: pointer;
+ transition: var(--transition);
+ display: inline-flex;
+ align-items: center;
+ gap: 0.5rem;
+}
+
+.copy-bibtex-btn:hover {
+ background: var(--primary-hover);
+ transform: translateY(-2px);
+ box-shadow: var(--shadow-md);
+}
+
+.copy-bibtex-btn.copied {
+ background: #10b981;
+}
+
+.copy-bibtex-btn.copied .copy-text::after {
+ content: "ied!";
+}
+
+/* Scroll to Top Button */
+.scroll-to-top {
+ position: fixed;
+ bottom: 2rem;
+ right: 2rem;
+ width: 50px;
+ height: 50px;
+ background: var(--primary-color);
+ color: white;
+ border: none;
+ border-radius: 50%;
+ cursor: pointer;
+ opacity: 0;
+ visibility: hidden;
+ transition: var(--transition);
+ z-index: 999;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 1.2rem;
+ box-shadow: var(--shadow-lg);
+}
+
+.scroll-to-top:hover {
+ background: var(--primary-hover);
+ transform: translateY(-3px);
+ box-shadow: var(--shadow-xl);
+}
+
+.scroll-to-top.visible {
+ opacity: 1;
+ visibility: visible;
+}
+
+
+/* More Works Dropdown */
+.more-works-container {
+ position: fixed;
+ top: 2rem;
+ right: 2rem;
+ z-index: 1000;
+}
+
+.more-works-btn {
+ background: var(--background-primary);
+ color: var(--text-primary);
+ border: 2px solid var(--border-color);
+ border-radius: var(--border-radius-lg);
+ padding: 0.75rem 1.25rem;
+ font-weight: 600;
+ font-size: 0.9rem;
+ box-shadow: var(--shadow-md);
+ transition: var(--transition);
+ cursor: pointer;
+ text-decoration: none;
+ display: inline-flex;
+ align-items: center;
+ gap: 0.5rem;
+ font-family: 'Inter', sans-serif;
+}
+
+.more-works-btn:hover {
+ transform: translateY(-2px);
+ box-shadow: var(--shadow-lg);
+ background: var(--background-secondary);
+ border-color: var(--primary-color);
+}
+
+.more-works-btn .dropdown-arrow {
+ transition: var(--transition);
+ font-size: 0.8rem;
+}
+
+.more-works-btn.active .dropdown-arrow {
+ transform: rotate(180deg);
+}
+
+.more-works-dropdown {
+ position: absolute;
+ top: calc(100% + 0.5rem);
+ right: 0;
+ width: 400px;
+ max-width: 90vw;
+ background: var(--background-primary);
+ border: 1px solid var(--border-color);
+ border-radius: var(--border-radius-lg);
+ box-shadow: var(--shadow-xl);
+ opacity: 0;
+ visibility: hidden;
+ transform: translateY(-10px);
+ transition: var(--transition);
+ max-height: 70vh;
+ overflow-y: auto;
+}
+
+.more-works-dropdown.show {
+ opacity: 1;
+ visibility: visible;
+ transform: translateY(0);
+}
+
+.dropdown-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1.5rem 1.5rem 1rem;
+ border-bottom: 1px solid var(--border-color);
+}
+
+.dropdown-header h4 {
+ margin: 0;
+ font-size: 1.1rem;
+ font-weight: 700;
+ color: var(--text-primary);
+}
+
+.close-btn {
+ background: none;
+ border: none;
+ color: var(--text-secondary);
+ cursor: pointer;
+ padding: 0.5rem;
+ border-radius: var(--border-radius);
+ transition: var(--transition);
+}
+
+.close-btn:hover {
+ background: var(--background-accent);
+ color: var(--text-primary);
+}
+
+.works-list {
+ padding: 1rem;
+}
+
+.work-item {
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ padding: 1rem;
+ border-radius: var(--border-radius);
+ text-decoration: none;
+ color: inherit;
+ transition: var(--transition);
+ margin-bottom: 0.5rem;
+}
+
+.work-item:hover {
+ background: var(--background-accent);
+ transform: translateX(4px);
+}
+
+.work-info h5 {
+ margin: 0 0 0.5rem 0;
+ font-size: 1rem;
+ font-weight: 500;
+ color: var(--text-primary);
+}
+
+.work-info p {
+ margin: 0 0 0.5rem 0;
+ font-size: 0.9rem;
+ color: var(--text-secondary);
+ line-height: 1.4;
+}
+
+.work-venue {
+ font-size: 0.8rem;
+ color: var(--text-light);
+ font-style: italic;
+}
+
+.work-item .fas {
+ color: var(--text-light);
+ font-size: 0.9rem;
+ margin-top: 0.2rem;
+ flex-shrink: 0;
+}
+
+
+/* Mobile Responsive Improvements */
+@media screen and (max-width: 768px) {
+ .hero-body {
+ padding: 2rem 1rem;
+ }
+
+ .publication-header .hero-body {
+ padding: 3rem 1rem 2rem;
+ }
+
+ .publication-title {
+ font-size: 2.5rem !important;
+ line-height: 1.2 !important;
+ margin-bottom: 1.5rem !important;
+ }
+
+ .publication-authors {
+ font-size: 1rem !important;
+ }
+
+ .button {
+ margin: 0.25rem !important;
+ font-size: 0.875rem !important;
+ padding: 0.75rem 1rem !important;
+ }
+
+ .more-works-container {
+ top: 1rem;
+ right: 1rem;
+ }
+
+ .more-works-btn {
+ padding: 0.6rem 1rem;
+ font-size: 0.8rem;
+ }
+
+ .more-works-dropdown {
+ width: calc(100vw - 2rem);
+ right: -1rem;
+ }
+
+ .results-carousel .item {
+ margin: 0.5rem;
+ padding: 1rem;
+ }
+
+ .teaser .hero-body {
+ padding: 1rem;
+ }
+
+ .content.has-text-justified {
+ font-size: 1rem;
+ }
+}
+
+@media screen and (max-width: 480px) {
+ .publication-title {
+ font-size: 2rem !important;
+ }
+
+ .hero-body {
+ padding: 1.5rem 0.75rem;
+ }
+
+ .more-works-container {
+ position: relative;
+ top: auto;
+ right: auto;
+ margin: 1rem auto;
+ display: block;
+ width: fit-content;
+ }
+
+ .more-works-dropdown {
+ position: relative;
+ top: 0.5rem;
+ right: 0;
+ width: 100%;
+ }
+
+ .link-block {
+ display: block;
+ margin-bottom: 0.5rem;
+ }
+
+ .button {
+ width: 100%;
+ justify-content: center;
+ }
+}
+
+/* Tablet Responsive */
+@media screen and (min-width: 769px) and (max-width: 1024px) {
+ .hero-body {
+ padding: 3rem 2rem;
+ }
+
+ .publication-header .hero-body {
+ padding: 4rem 2rem 3rem;
+ }
+}
+
+/* Animation for page load */
+@keyframes fadeInUp {
+ from {
+ opacity: 0;
+ transform: translateY(30px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.hero, .section {
+ animation: fadeInUp 0.6s ease-out;
+}
+
+/* Improved focus states for accessibility */
+.button:focus,
+.related-works-btn:focus,
+a:focus {
+ outline: 2px solid var(--primary-color);
+ outline-offset: 2px;
+}
+
+
+/* Print styles */
+@media print {
+ .more-works-container {
+ display: none;
+ }
+
+ .hero, .section {
+ animation: none;
+ }
+
+ .button {
+ background: transparent !important;
+ color: var(--text-primary) !important;
+ box-shadow: none !important;
+ }
}
diff --git a/static/js/index.js b/static/js/index.js
index c08a790..de8c42c 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -1,21 +1,142 @@
window.HELP_IMPROVE_VIDEOJS = false;
+// More Works Dropdown Functionality
+function toggleMoreWorks() {
+ const dropdown = document.getElementById('moreWorksDropdown');
+ const button = document.querySelector('.more-works-btn');
+
+ if (dropdown.classList.contains('show')) {
+ dropdown.classList.remove('show');
+ button.classList.remove('active');
+ } else {
+ dropdown.classList.add('show');
+ button.classList.add('active');
+ }
+}
+
+// Close dropdown when clicking outside
+document.addEventListener('click', function(event) {
+ const container = document.querySelector('.more-works-container');
+ const dropdown = document.getElementById('moreWorksDropdown');
+ const button = document.querySelector('.more-works-btn');
+
+ if (container && !container.contains(event.target)) {
+ dropdown.classList.remove('show');
+ button.classList.remove('active');
+ }
+});
+
+// Close dropdown on escape key
+document.addEventListener('keydown', function(event) {
+ if (event.key === 'Escape') {
+ const dropdown = document.getElementById('moreWorksDropdown');
+ const button = document.querySelector('.more-works-btn');
+ dropdown.classList.remove('show');
+ button.classList.remove('active');
+ }
+});
+
+// Copy BibTeX to clipboard
+function copyBibTeX() {
+ const bibtexElement = document.getElementById('bibtex-code');
+ const button = document.querySelector('.copy-bibtex-btn');
+ const copyText = button.querySelector('.copy-text');
+
+ if (bibtexElement) {
+ navigator.clipboard.writeText(bibtexElement.textContent).then(function() {
+ // Success feedback
+ button.classList.add('copied');
+ copyText.textContent = 'Cop';
+
+ setTimeout(function() {
+ button.classList.remove('copied');
+ copyText.textContent = 'Copy';
+ }, 2000);
+ }).catch(function(err) {
+ console.error('Failed to copy: ', err);
+ // Fallback for older browsers
+ const textArea = document.createElement('textarea');
+ textArea.value = bibtexElement.textContent;
+ document.body.appendChild(textArea);
+ textArea.select();
+ document.execCommand('copy');
+ document.body.removeChild(textArea);
+
+ button.classList.add('copied');
+ copyText.textContent = 'Cop';
+ setTimeout(function() {
+ button.classList.remove('copied');
+ copyText.textContent = 'Copy';
+ }, 2000);
+ });
+ }
+}
+
+// Scroll to top functionality
+function scrollToTop() {
+ window.scrollTo({
+ top: 0,
+ behavior: 'smooth'
+ });
+}
+
+// Show/hide scroll to top button
+window.addEventListener('scroll', function() {
+ const scrollButton = document.querySelector('.scroll-to-top');
+ if (window.pageYOffset > 300) {
+ scrollButton.classList.add('visible');
+ } else {
+ scrollButton.classList.remove('visible');
+ }
+});
+
+// Video carousel autoplay when in view
+function setupVideoCarouselAutoplay() {
+ const carouselVideos = document.querySelectorAll('.results-carousel video');
+
+ if (carouselVideos.length === 0) return;
+
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ const video = entry.target;
+ if (entry.isIntersecting) {
+ // Video is in view, play it
+ video.play().catch(e => {
+ // Autoplay failed, probably due to browser policy
+ console.log('Autoplay prevented:', e);
+ });
+ } else {
+ // Video is out of view, pause it
+ video.pause();
+ }
+ });
+ }, {
+ threshold: 0.5 // Trigger when 50% of the video is visible
+ });
+
+ carouselVideos.forEach(video => {
+ observer.observe(video);
+ });
+}
$(document).ready(function() {
// Check for click events on the navbar burger icon
var options = {
- slidesToScroll: 1,
- slidesToShow: 1,
- loop: true,
- infinite: true,
- autoplay: true,
- autoplaySpeed: 5000,
+ slidesToScroll: 1,
+ slidesToShow: 1,
+ loop: true,
+ infinite: true,
+ autoplay: true,
+ autoplaySpeed: 5000,
}
- // Initialize all div with carousel class
+ // Initialize all div with carousel class
var carousels = bulmaCarousel.attach('.carousel', options);
bulmaSlider.attach();
+
+ // Setup video autoplay for carousel
+ setupVideoCarouselAutoplay();
})