Skip to content

Commit

Permalink
Merge pull request #17 from tsaishien-chen/main
Browse files Browse the repository at this point in the history 
Improve webpage experience
  • Loading branch information
@AliaksandrSiarohin
AliaksandrSiarohin authored Mar 8, 2024
2 parents 3a1e910 + 61333aa commit 2f8d2ff
Show file tree
Hide file tree
Showing 3 changed files with 309 additions and 272 deletions.
218 changes: 109 additions & 109 deletions docs/html_pages/resources/stylesheet.css
View file
Original file line number Diff line number Diff line change
@@ -1,189 +1,189 @@
.nopadding {
padding: 0 !important;
margin: 0 !important;
padding: 0 !important;
margin: 0 !important;
}

.flex {
display: flex;
display: flex;
}

.col-seven {
width:14.285%;
float:left;
position: relative;
min-height: 1px;
padding-right: 0px;
padding-left: 0px;
}
width:14.285%;
float:left;
position: relative;
min-height: 1px;
padding-right: 0px;
padding-left: 0px;
}

h1 {
/* Extra small devices (phones, less than 768px) */
font-size: 2rem;
/* Extra small devices (phones, less than 768px) */
font-size: 2rem;
}

.paper-btn {
position: relative;
text-align: center;

display: inline-block;
margin: 8px;
padding: 8px 8px;

border-width: 0;
outline: none;
border-radius: 10px;
background-color: #3e3e40;
color: white !important;
font-size: 16px;
width: 180px;
font-weight: 350;
position: relative;
text-align: center;

display: inline-block;
margin: 8px;
padding: 8px 8px;

border-width: 0;
outline: none;
border-radius: 10px;

background-color: #3e3e40;
color: white !important;
font-size: 16px;
width: 180px;
font-weight: 350;
}
.paper-btn-parent {
display: flex;
justify-content: center;
margin: 16px 0px;
display: flex;
justify-content: center;
margin: 16px 0px;
}
.paper-btn:hover {
opacity: 0.80;
opacity: 0.80;
}

.video-teaser-container {
position: relative;
width: 25%;
margin: 0%;
overflow: hidden;
cursor: pointer;
position: relative;
width: 25%;
margin: 0%;
overflow: hidden;
cursor: pointer;
}

.video-teaser {
width: 100%;
height: auto;
filter: brightness(0.7);
transition: filter 0.3s ease-in-out;
width: 100%;
height: auto;
filter: brightness(0.7);
transition: filter 0.3s ease-in-out;
}

.video {
width: 100%;
height: auto;
width: 100%;
height: auto;
}

.hover-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
height: auto;
opacity: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: Chalkduster;
font-size: 16px;
text-align: center;
transition: opacity 0.3s ease-in-out;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
height: auto;
opacity: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: Chalkduster;
font-size: 16px;
text-align: center;
transition: opacity 0.3s ease-in-out;
}

.video-teaser-container:hover .video-teaser {
filter: brightness(1); /* Brighten the video on hover */
filter: brightness(1); /* Brighten the video on hover */
}

.video-teaser-container:hover .hover-overlay {
opacity: 0;
opacity: 0;
}

.download-table {
border-collapse: collapse;
width: auto; /* Adjust the width as needed */
border-collapse: collapse;
width: auto; /* Adjust the width as needed */
}

.download-table th, .custom-table td {
border: 1px solid black;
padding: 8px;
text-align: center;
border: 1px solid black;
padding: 8px;
text-align: center;
}

.download-table {
border-collapse: collapse;
width: auto; /* Adjust the width as needed */
border-collapse: collapse;
width: auto; /* Adjust the width as needed */
}

.footnote {
color: #79797d;
font-size: 12px;
font-weight: 200;
color: #79797d;
font-size: 12px;
font-weight: 200;
}

header {
background-color: #000;
color: #fff !important;
padding: 5px;
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
z-index: 1000;
background-color: #000;
color: #fff !important;
padding: 5px;
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
z-index: 1000;
}

header h5 {
margin: 0;
margin: 0;
}

nav {
display: flex;
display: flex;
}

nav a {
color: #fff !important;
text-decoration: none;
margin-left: 20px;
margin-right: 15px;
color: #fff !important;
text-decoration: none;
margin-left: 20px;
margin-right: 15px;
}

section {
padding: 50px;
padding: 50px;
}

div.scroll-container {
background-color: #3e3e40;
overflow: auto;
white-space: nowrap;
margin-top: 25px;
margin-bottom: 25px;
padding: 7px 7.5px 2.5px 9px;
background-color: #3e3e40;
overflow: auto;
white-space: nowrap;
margin-top: 25px;
margin-bottom: 25px;
padding: 7px 7.5px 2.5px 9px;
}

.image-container {
text-align: center;
text-align: center;
}

.image-item {
opacity: 0;
width: 100%;
margin: 0px;
transition: opacity 0.5s ease-in-out;
opacity: 0;
width: 100%;
margin: 0px;
transition: opacity 0.5s ease-in-out;
}

.image-item img {
width: 100%;
height: auto;
width: 100%;
height: auto;
}

.table-container {
width: 80%;
table-layout: fixed;
margin-left: auto;
margin-right: auto;
width: 80%;
table-layout: fixed;
margin-left: auto;
margin-right: auto;
}

@media (max-width: 1000px) {
.table-container {
width: 100%;
}
.table-container {
width: 100%;
}
}
28 changes: 15 additions & 13 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
<body data-new-gr-c-s-check-loaded="14.1110.0" data-gr-ext-installed="">
<header>
<nav>
<a class="h5 pt-1" style="margin-left: 10px; color: #fff !important;" href="#panda70M">&#128060; Panda-70M</a>
<a class="h5 pt-1" style="margin-left: 10px; color: #fff !important;" href="#Panda70M">&#128060; Panda-70M</a>
</nav>
<nav>
<a href="#download">Download</a>
Expand All @@ -32,11 +32,10 @@
<a href="#statistic">Statistic</a>
<a href="#performance">Performance</a>
<a href="#acknowledgement">Acknowledgement</a>
<!-- Add more section links as needed -->
</nav>
</header>

<section class="jumbotron text-center pb-2" id="panda70M">
<section class="jumbotron text-center pb-2" id="Panda70M">
<div class="container">
<br><br><br>
<h1 class="jumbotron-heading" style="font-size: 5.5rem">&#128060; Panda-70M</h1>
Expand All @@ -54,13 +53,14 @@ <h5 class="pt-1" style="font-size: 2rem; font-weight: normal">A Large-Scale Data
<a href="https://alanspike.github.io/" style="font-size: 1.2rem; color: white !important;">Jian Ren</a>,
<a href="https://faculty.ucmerced.edu/mhyang/" style="font-size: 1.2rem; color: white !important;">Ming-Hsuan Yang</a>,
<a href="http://www.stulyakov.com/" style="font-size: 1.2rem; color: white !important;">Sergey Tulyakov</a>
<br>
<a href="https://research.snap.com/team/category/creative-vision"><img class="paper-btn" src="./assets/snap.svg" style="height: 80px; width: auto; margin-top: 50px; margin-bottom: 30px; background-color: #18191a;"></a>
<a href="https://www.ucmerced.edu/"><img class="paper-btn" src="./assets/ucmerced.svg" style="height: 80px; width: auto; margin-top: 50px; margin-bottom: 30px; margin-left: 30px; background-color: #18191a;"></a>
<div class="paper-btn-parent">
<a class="paper-btn" href="https://arxiv.org/abs/2402.19479">Read research paper</a>
<a class="paper-btn" style="width: 80px" href="https://github.com/snap-research/Panda-70M">Github</a>
<a class="paper-btn" href="./more_samples.html">View more samples</a>
<br><br><br>
<a href="https://research.snap.com/team/category/creative-vision"><img class="paper-btn" src="./assets/snap.svg" style="height: 80px; width: auto; background-color: #18191a;"></a>
<a href="https://www.ucmerced.edu/"><img class="paper-btn" src="./assets/ucmerced.svg" style="height: 80px; width: auto; background-color: #18191a;"></a>
<br><br>
<div class="paper-btn-parent">
<a class="paper-btn" href="https://arxiv.org/abs/2402.19479">Read research paper</a>
<a class="paper-btn" style="width: 80px" href="https://github.com/snap-research/Panda-70M">Github</a>
<a class="paper-btn" href="./more_samples.html">View more samples</a>
</div>
<br><br><br>
</div>
Expand Down Expand Up @@ -380,10 +380,12 @@ <h1 class="jumbotron-heading text-center">Acknowledgement</h1>

for (var i = 0; i < elements.length; i++) {
// Adjust the threshold and font size as needed
if (screenWidth < 800) {
elements[i].style.fontSize = "8px";
if (screenWidth < 600) {
elements[i].style.fontSize = "7px";
} else if (screenWidth < 800) {
elements[i].style.fontSize = "10px";
} else if (screenWidth < 1000) {
elements[i].style.fontSize = "12px";
elements[i].style.fontSize = "13px";
} else {
elements[i].style.fontSize = "16px";
}
Expand Down
Loading

0 comments on commit 2f8d2ff

Please sign in to comment.