CalvinBackup/Academic-project-page-template
1
0
Fork 0
mirror of https://github.com/eliahuhorwitz/Academic-project-page-template.git synced 2026-02-12 09:52:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Modernize template: improved design, SEO, mobile support, and UX features

Browse Source
This commit is contained in:
Eliahu Horwitz
2025-09-04 20:45:42 +03:00
parent db5604084c
commit cdaa0cda9b
4 changed files with 1086 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
README.md
View File

@@ -1,5 +1,8 @@
# Academic Project Page Template
This is an academic paper project page template.
> **Update (September 2025)**: This template has been modernized with better design, SEO, and mobile support. For the original version, see the [original-version branch](https://github.com/eliahuhorwitz/Academic-project-page-template/tree/original-version).
A clean, responsive template for academic project pages.
Example project pages built using this template are:
@@ -26,25 +29,49 @@ To edit the websites contents edit the `index.html` file. It contains different
**IMPORTANT!** Make sure to replace the `favicon.ico` under `static/images/` with one of your own, otherwise your favicon is going to be a dreambooth image of me.
## Components
- Teaser video
- Images Carousel
- Youtube embedding
- Video Carousel
- PDF Poster
- Bibtex citation
## What's New
## Tips:
- The `index.html` file contains comments instructing you what to replace, you should follow these comments.
- The `meta` tags in the `index.html` file are used to provide metadata about your paper
(e.g. helping search engine index the website, showing a preview image when sharing the website, etc.)
- The resolution of images and videos can usually be around 1920-2048, there rarely a need for better resolution that take longer to load.
- All the images and videos you use should be compressed to allow for fast loading of the website (and thus better indexing by search engines). For images, you can use [TinyPNG](https://tinypng.com), for videos you can need to find the tradeoff between size and quality.
- When using large video files (larger than 10MB), it's better to use youtube for hosting the video as serving the video from the website can take time.
- Using a tracker can help you analyze the traffic and see where users came from. [statcounter](https://statcounter.com) is a free, easy to use tracker that takes under 5 minutes to set up.
- This project page can also be made into a github pages website.
- Replace the favicon to one of your choosing (the default one is of the Hebrew University).
- Suggestions, improvements and comments are welcome, simply open an issue or contact me. You can find my contact information at [https://horwitz.ai](https://horwitz.ai)
- Modern, clean design with better mobile support
- Improved SEO with proper meta tags and structured data
- Performance improvements (lazy loading, optimized assets)
- More Works dropdown
- Copy button for BibTeX citations
- Better accessibility
## Components
- Teaser video
- Image carousel
- YouTube video embedding
- Video carousel
- PDF poster viewer
- BibTeX citation
## Customization
The HTML file has TODO comments showing what to replace:
- Paper title, authors, institution, conference
- Links (arXiv, GitHub, etc.)
- Abstract and descriptions
- Videos, images, and PDFs
- Related works in the dropdown
- Meta tags for SEO and social sharing
### Meta Tags
The template includes meta tags for better search engine visibility and social media sharing. These appear in the `<head>` section and help with:
- Google Scholar indexing
- Social media previews (Twitter, Facebook, LinkedIn)
- Search engine optimization
Create a 1200x630px social preview image at `static/images/social_preview.png`.
## Tips
- Compress images with [TinyPNG](https://tinypng.com)
- Use YouTube for large videos (>10MB)
- Replace the favicon in `static/images/`
- Works with GitHub Pages
## Acknowledgments
Parts of this project page were adopted from the [Nerfies](https://nerfies.github.io/) page.

332
index.html
View File

@@ -1,60 +1,249 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Meta tags for social media banners, these should be filled in appropriatly as they are your "business card" -->
<!-- Replace the content tag with appropriate information -->
<meta name="description" content="DESCRIPTION META TAG">
<meta property="og:title" content="SOCIAL MEDIA TITLE TAG"/>
<meta property="og:description" content="SOCIAL MEDIA DESCRIPTION TAG TAG"/>
<meta property="og:url" content="URL OF THE WEBSITE"/>
<!-- Path to banner image, should be in the path listed below. Optimal dimenssions are 1200X630-->
<meta property="og:image" content="static/image/your_banner_image.png" />
<meta property="og:image:width" content="1200"/>
<meta property="og:image:height" content="630"/>
<meta name="twitter:title" content="TWITTER BANNER TITLE META TAG">
<meta name="twitter:description" content="TWITTER BANNER DESCRIPTION META TAG">
<!-- Path to banner image, should be in the path listed below. Optimal dimenssions are 1200X600-->
<meta name="twitter:image" content="static/images/your_twitter_banner_image.png">
<meta name="twitter:card" content="summary_large_image">
<!-- Keywords for your paper to be indexed by-->
<meta name="keywords" content="KEYWORDS SHOULD BE PLACED HERE">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Primary Meta Tags -->
<!-- TODO: Replace with your paper title and author names -->
<meta name="title" content="PAPER_TITLE - AUTHOR_NAMES">
<!-- TODO: Write a compelling 150-160 character description of your research -->
<meta name="description" content="BRIEF_DESCRIPTION_OF_YOUR_RESEARCH_CONTRIBUTION_AND_FINDINGS">
<!-- TODO: Add 5-10 relevant keywords for your research area -->
<meta name="keywords" content="KEYWORD1, KEYWORD2, KEYWORD3, machine learning, computer vision, AI">
<!-- TODO: List all authors -->
<meta name="author" content="FIRST_AUTHOR_NAME, SECOND_AUTHOR_NAME">
<meta name="robots" content="index, follow">
<meta name="language" content="English">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="article">
<!-- TODO: Replace with your institution or lab name -->
<meta property="og:site_name" content="INSTITUTION_OR_LAB_NAME">
<!-- TODO: Same as paper title above -->
<meta property="og:title" content="PAPER_TITLE">
<!-- TODO: Same as description above -->
<meta property="og:description" content="BRIEF_DESCRIPTION_OF_YOUR_RESEARCH_CONTRIBUTION_AND_FINDINGS">
<!-- TODO: Replace with your actual website URL -->
<meta property="og:url" content="https://YOUR_DOMAIN.com/YOUR_PROJECT_PAGE">
<!-- TODO: Create a 1200x630px preview image and update path -->
<meta property="og:image" content="https://YOUR_DOMAIN.com/static/images/social_preview.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="PAPER_TITLE - Research Preview">
<meta property="article:published_time" content="2024-01-01T00:00:00.000Z">
<meta property="article:author" content="FIRST_AUTHOR_NAME">
<meta property="article:section" content="Research">
<meta property="article:tag" content="KEYWORD1">
<meta property="article:tag" content="KEYWORD2">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<!-- TODO: Replace with your lab/institution Twitter handle -->
<meta name="twitter:site" content="@YOUR_TWITTER_HANDLE">
<!-- TODO: Replace with first author's Twitter handle -->
<meta name="twitter:creator" content="@AUTHOR_TWITTER_HANDLE">
<!-- TODO: Same as paper title above -->
<meta name="twitter:title" content="PAPER_TITLE">
<!-- TODO: Same as description above -->
<meta name="twitter:description" content="BRIEF_DESCRIPTION_OF_YOUR_RESEARCH_CONTRIBUTION_AND_FINDINGS">
<!-- TODO: Same as social preview image above -->
<meta name="twitter:image" content="https://YOUR_DOMAIN.com/static/images/social_preview.png">
<meta name="twitter:image:alt" content="PAPER_TITLE - Research Preview">
<!-- Academic/Research Specific -->
<meta name="citation_title" content="PAPER_TITLE">
<meta name="citation_author" content="FIRST_AUTHOR_LAST, FIRST_AUTHOR_FIRST">
<meta name="citation_author" content="SECOND_AUTHOR_LAST, SECOND_AUTHOR_FIRST">
<meta name="citation_publication_date" content="2024">
<meta name="citation_conference_title" content="CONFERENCE_NAME">
<meta name="citation_pdf_url" content="https://YOUR_DOMAIN.com/static/pdfs/paper.pdf">
<!-- Additional SEO -->
<meta name="theme-color" content="#2563eb">
<meta name="msapplication-TileColor" content="#2563eb">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<!-- Preconnect for performance -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://ajax.googleapis.com">
<link rel="preconnect" href="https://documentcloud.adobe.com">
<link rel="preconnect" href="https://cdn.jsdelivr.net">
<title>Academic Project Page</title>
<!-- TODO: Replace with your paper title and authors -->
<title>PAPER_TITLE - AUTHOR_NAMES | Academic Research</title>
<!-- Favicon and App Icons -->
<link rel="icon" type="image/x-icon" href="static/images/favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Google+Sans|Noto+Sans|Castoro"
rel="stylesheet">
<link rel="apple-touch-icon" href="static/images/favicon.ico">
<!-- Critical CSS - Load synchronously -->
<link rel="stylesheet" href="static/css/bulma.min.css">
<link rel="stylesheet" href="static/css/bulma-carousel.min.css">
<link rel="stylesheet" href="static/css/bulma-slider.min.css">
<link rel="stylesheet" href="static/css/fontawesome.all.min.css">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css">
<link rel="stylesheet" href="static/css/index.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
<!-- Non-critical CSS - Load asynchronously -->
<link rel="preload" href="static/css/bulma-carousel.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="static/css/bulma-slider.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="static/css/fontawesome.all.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<!-- Fallback for browsers that don't support preload -->
<noscript>
<link rel="stylesheet" href="static/css/bulma-carousel.min.css">
<link rel="stylesheet" href="static/css/bulma-slider.min.css">
<link rel="stylesheet" href="static/css/fontawesome.all.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css">
</noscript>
<!-- Fonts - Optimized loading -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<!-- Defer non-critical JavaScript -->
<script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script defer src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
<script defer src="static/js/fontawesome.all.min.js"></script>
<script src="static/js/bulma-carousel.min.js"></script>
<script src="static/js/bulma-slider.min.js"></script>
<script src="static/js/index.js"></script>
<script defer src="static/js/bulma-carousel.min.js"></script>
<script defer src="static/js/bulma-slider.min.js"></script>
<script defer src="static/js/index.js"></script>
<!-- Structured Data for Academic Papers -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "ScholarlyArticle",
"headline": "PAPER_TITLE",
"description": "BRIEF_DESCRIPTION_OF_YOUR_RESEARCH_CONTRIBUTION_AND_FINDINGS",
"author": [
{
"@type": "Person",
"name": "FIRST_AUTHOR_NAME",
"affiliation": {
"@type": "Organization",
"name": "INSTITUTION_NAME"
}
},
{
"@type": "Person",
"name": "SECOND_AUTHOR_NAME",
"affiliation": {
"@type": "Organization",
"name": "INSTITUTION_NAME"
}
}
],
"datePublished": "2024-01-01",
"publisher": {
"@type": "Organization",
"name": "CONFERENCE_OR_JOURNAL_NAME"
},
"url": "https://YOUR_DOMAIN.com/YOUR_PROJECT_PAGE",
"image": "https://YOUR_DOMAIN.com/static/images/social_preview.png",
"keywords": ["KEYWORD1", "KEYWORD2", "KEYWORD3", "machine learning", "computer vision"],
"abstract": "FULL_ABSTRACT_TEXT_HERE",
"citation": "BIBTEX_CITATION_HERE",
"isAccessibleForFree": true,
"license": "https://creativecommons.org/licenses/by/4.0/",
"mainEntity": {
"@type": "WebPage",
"@id": "https://YOUR_DOMAIN.com/YOUR_PROJECT_PAGE"
},
"about": [
{
"@type": "Thing",
"name": "RESEARCH_AREA_1"
},
{
"@type": "Thing",
"name": "RESEARCH_AREA_2"
}
]
}
</script>
<!-- Website/Organization Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "INSTITUTION_OR_LAB_NAME",
"url": "https://YOUR_INSTITUTION_WEBSITE.com",
"logo": "https://YOUR_DOMAIN.com/static/images/favicon.ico",
"sameAs": [
"https://twitter.com/YOUR_TWITTER_HANDLE",
"https://github.com/YOUR_GITHUB_USERNAME"
]
}
</script>
</head>
<body>
<!-- Scroll to Top Button -->
<button class="scroll-to-top" onclick="scrollToTop()" title="Scroll to top" aria-label="Scroll to top">
<i class="fas fa-chevron-up"></i>
</button>
<!-- More Works Dropdown -->
<div class="more-works-container">
<button class="more-works-btn" onclick="toggleMoreWorks()" title="View More Works from Our Lab">
<i class="fas fa-flask"></i>
More Works
<i class="fas fa-chevron-down dropdown-arrow"></i>
</button>
<div class="more-works-dropdown" id="moreWorksDropdown">
<div class="dropdown-header">
<h4>More Works from Our Lab</h4>
<button class="close-btn" onclick="toggleMoreWorks()">
<i class="fas fa-times"></i>
</button>
</div>
<div class="works-list">
<!-- TODO: Replace with your lab's related works -->
<a href="https://arxiv.org/abs/PAPER_ID_1" class="work-item" target="_blank">
<div class="work-info">
<!-- TODO: Replace with actual paper title -->
<h5>Paper Title 1</h5>
<!-- TODO: Replace with brief description -->
<p>Brief description of the work and its main contribution.</p>
<!-- TODO: Replace with venue and year -->
<span class="work-venue">Conference/Journal 2024</span>
</div>
<i class="fas fa-external-link-alt"></i>
</a>
<!-- TODO: Add more related works or remove extra items -->
<a href="https://arxiv.org/abs/PAPER_ID_2" class="work-item" target="_blank">
<div class="work-info">
<h5>Paper Title 2</h5>
<p>Brief description of the work and its main contribution.</p>
<span class="work-venue">Conference/Journal 2023</span>
</div>
<i class="fas fa-external-link-alt"></i>
</a>
<a href="https://arxiv.org/abs/PAPER_ID_3" class="work-item" target="_blank">
<div class="work-info">
<h5>Paper Title 3</h5>
<p>Brief description of the work and its main contribution.</p>
<span class="work-venue">Conference/Journal 2023</span>
</div>
<i class="fas fa-external-link-alt"></i>
</a>
</div>
</div>
</div>
<main id="main-content">
<section class="hero">
<div class="hero-body">
<div class="container is-max-desktop">
<div class="columns is-centered">
<div class="column has-text-centered">
<!-- TODO: Replace with your paper title -->
<h1 class="title is-1 publication-title">Academic Project Page</h1>
<div class="is-size-5 publication-authors">
<!-- Paper authors -->
<!-- TODO: Replace with your paper authors and their personal links -->
<span class="author-block">
<a href="FIRST AUTHOR PERSONAL LINK" target="_blank">First Author</a><sup>*</sup>,</span>
<span class="author-block">
@@ -65,13 +254,15 @@
</div>
<div class="is-size-5 publication-authors">
<span class="author-block">Institution Name<br>Conferance name and year</span>
<!-- TODO: Replace with your institution and conference/journal info -->
<span class="author-block">Institution Name<br>Conference name and year</span>
<!-- TODO: Remove this line if no equal contribution -->
<span class="eql-cntrb"><small><br><sup>*</sup>Indicates Equal Contribution</small></span>
</div>
<div class="column has-text-centered">
<div class="publication-links">
<!-- Arxiv PDF link -->
<!-- TODO: Update with your arXiv paper ID -->
<span class="link-block">
<a href="https://arxiv.org/pdf/<ARXIV PAPER ID>.pdf" target="_blank"
class="external-link button is-normal is-rounded is-dark">
@@ -82,7 +273,7 @@
</a>
</span>
<!-- Supplementary PDF link -->
<!-- TODO: Add your supplementary material PDF or remove this section -->
<span class="link-block">
<a href="static/pdfs/supplementary_material.pdf" target="_blank"
class="external-link button is-normal is-rounded is-dark">
@@ -93,7 +284,7 @@
</a>
</span>
<!-- Github link -->
<!-- TODO: Replace with your GitHub repository URL -->
<span class="link-block">
<a href="https://github.com/YOUR REPO HERE" target="_blank"
class="external-link button is-normal is-rounded is-dark">
@@ -104,7 +295,7 @@
</a>
</span>
<!-- ArXiv abstract Link -->
<!-- TODO: Update with your arXiv paper ID -->
<span class="link-block">
<a href="https://arxiv.org/abs/<ARXIV PAPER ID>" target="_blank"
class="external-link button is-normal is-rounded is-dark">
@@ -127,11 +318,12 @@
<section class="hero teaser">
<div class="container is-max-desktop">
<div class="hero-body">
<video poster="" id="tree" autoplay controls muted loop height="100%">
<!-- Your video here -->
<source src="static/videos/banner_video.mp4"
type="video/mp4">
<!-- TODO: Replace with your teaser video -->
<video poster="" id="tree" autoplay controls muted loop height="100%" preload="metadata">
<!-- TODO: Add your video file path here -->
<source src="static/videos/banner_video.mp4" type="video/mp4">
</video>
<!-- TODO: Replace with your video description -->
<h2 class="subtitle has-text-centered">
Aliquam vitae elit ullamcorper tellus egestas pellentesque. Ut lacus tellus, maximus vel lectus at, placerat pretium mi. Maecenas dignissim tincidunt vestibulum. Sed consequat hendrerit nisl ut maximus.
</h2>
@@ -147,6 +339,7 @@
<div class="column is-four-fifths">
<h2 class="title is-3">Abstract</h2>
<div class="content has-text-justified">
<!-- TODO: Replace with your paper abstract -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ullamcorper tellus sed ante aliquam tempus. Etiam porttitor urna feugiat nibh elementum, et tempor dolor mattis. Donec accumsan enim augue, a vulputate nisi sodales sit amet. Proin bibendum ex eget mauris cursus euismod nec et nibh. Maecenas ac gravida ante, nec cursus dui. Vivamus purus nibh, placerat ac purus eget, sagittis vestibulum metus. Sed vestibulum bibendum lectus gravida commodo. Pellentesque auctor leo vitae sagittis suscipit.
</p>
@@ -164,29 +357,30 @@
<div class="container">
<div id="results-carousel" class="carousel results-carousel">
<div class="item">
<!-- Your image here -->
<img src="static/images/carousel1.jpg" alt="MY ALT TEXT"/>
<!-- TODO: Replace with your research result images -->
<img src="static/images/carousel1.jpg" alt="First research result visualization" loading="lazy"/>
<!-- TODO: Replace with description of this result -->
<h2 class="subtitle has-text-centered">
First image description.
</h2>
</div>
<div class="item">
<!-- Your image here -->
<img src="static/images/carousel2.jpg" alt="MY ALT TEXT"/>
<img src="static/images/carousel2.jpg" alt="Second research result visualization" loading="lazy"/>
<h2 class="subtitle has-text-centered">
Second image description.
</h2>
</div>
<div class="item">
<!-- Your image here -->
<img src="static/images/carousel3.jpg" alt="MY ALT TEXT"/>
<img src="static/images/carousel3.jpg" alt="Third research result visualization" loading="lazy"/>
<h2 class="subtitle has-text-centered">
Third image description.
</h2>
</div>
<div class="item">
<!-- Your image here -->
<img src="static/images/carousel4.jpg" alt="MY ALT TEXT"/>
<img src="static/images/carousel4.jpg" alt="Fourth research result visualization" loading="lazy"/>
<h2 class="subtitle has-text-centered">
Fourth image description.
</h2>
@@ -210,7 +404,7 @@
<div class="column is-four-fifths">
<div class="publication-video">
<!-- Youtube embed code here -->
<!-- TODO: Replace with your YouTube video ID -->
<iframe src="https://www.youtube.com/embed/JkaxUblCGz0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
@@ -228,24 +422,24 @@
<h2 class="title is-3">Another Carousel</h2>
<div id="results-carousel" class="carousel results-carousel">
<div class="item item-video1">
<video poster="" id="video1" autoplay controls muted loop height="100%">
<!-- TODO: Add poster image for better preview -->
<video poster="" id="video1" controls muted loop height="100%" preload="metadata">
<!-- Your video file here -->
<source src="static/videos/carousel1.mp4"
type="video/mp4">
<source src="static/videos/carousel1.mp4" type="video/mp4">
</video>
</div>
<div class="item item-video2">
<video poster="" id="video2" autoplay controls muted loop height="100%">
<!-- TODO: Add poster image for better preview -->
<video poster="" id="video2" controls muted loop height="100%" preload="metadata">
<!-- Your video file here -->
<source src="static/videos/carousel2.mp4"
type="video/mp4">
<source src="static/videos/carousel2.mp4" type="video/mp4">
</video>
</div>
<div class="item item-video3">
<video poster="" id="video3" autoplay controls muted loop height="100%">\
<!-- TODO: Add poster image for better preview -->
<video poster="" id="video3" controls muted loop height="100%" preload="metadata">
<!-- Your video file here -->
<source src="static/videos/carousel3.mp4"
type="video/mp4">
<source src="static/videos/carousel3.mp4" type="video/mp4">
</video>
</div>
</div>
@@ -265,6 +459,7 @@
<div class="container">
<h2 class="title">Poster</h2>
<!-- TODO: Replace with your poster PDF -->
<iframe src="static/pdfs/sample.pdf" width="100%" height="550">
</iframe>
@@ -274,11 +469,24 @@
<!--End paper poster -->
<!--BibTex citation -->
<section class="section" id="BibTeX">
<div class="container is-max-desktop content">
<h2 class="title">BibTeX</h2>
<pre><code>BibTex Code Here</code></pre>
<div class="bibtex-header">
<h2 class="title">BibTeX</h2>
<button class="copy-bibtex-btn" onclick="copyBibTeX()" title="Copy BibTeX to clipboard">
<i class="fas fa-copy"></i>
<span class="copy-text">Copy</span>
</button>
</div>
<pre id="bibtex-code"><code>@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}
}</code></pre>
</div>
</section>
<!--End BibTex citation -->

675
static/css/index.css
View File

@@ -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;
}
}

135
static/js/index.js
View File

@@ -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();
})