From 39d83388ea8dfaf304552316ee8e806d6436c7b6 Mon Sep 17 00:00:00 2001
From: hao-pt <tienhaophung@gmail.com>
Date: Sat, 19 Oct 2024 22:55:41 -0400
Subject: [PATCH] update slider

---
 index.html           | 62 +++++++++++++++++++++++++++----------------
 static/css/index.css | 63 ++++++++++++++++++++++++++++----------------
 2 files changed, 81 insertions(+), 44 deletions(-)

diff --git a/index.html b/index.html
index 13dab16..7553404 100644
--- a/index.html
+++ b/index.html
@@ -306,14 +306,16 @@ <h1 class="title is-1 publication-title">DiMSUM <img src="./static/images/dimsum
           </div> -->
         <div id="results-carousel" class="carousel slide teaser-carousel" data-ride="carousel" data-interval="5000" >
           <div class="carousel-inner">
-          <ol class="carousel-indicators"></ol>
+          <!-- <ol class="carousel-indicators"></ol>
             <li data-target="#results-carousel" data-slide-to="0" class="active"></li>
             <li data-target="#results-carousel" data-slide-to="1"></li>
             <li data-target="#results-carousel" data-slide-to="2"></li>
-          </ol>
+          </ol> -->
           <div class="carousel-item">
-            <img src="static/images/sit_207_sample_cfg4.0.png"
-              class="interpolation-image" />
+            <div>
+              <img src="static/images/sit_207_sample_cfg4.0.png"
+                class="teaser-img" />
+            </div>
             <div class="card-content slider-text" style="background-color: rgba(0,0,0,0.1);">
               <div class="is-size-5 has-text-centered">
                 Class: 'Golden retriever' (207)
@@ -322,8 +324,10 @@ <h1 class="title is-1 publication-title">DiMSUM <img src="./static/images/dimsum
           </div>
 
           <div class="carousel-item active">
+            <div>
             <img src="static/images/sit_88_sample_cfg4.0.png"
-              class="interpolation-image" />
+              class="teaser-img" />
+            </div>
             <div class="card-content slider-text d-block w-80" style="background-color: rgba(0,0,0,0.1)">
               <div class="is-size-5 has-text-centered">
                 Class: 'Macaw' (88)
@@ -332,8 +336,8 @@ <h1 class="title is-1 publication-title">DiMSUM <img src="./static/images/dimsum
           </div>
 
           <div class="carousel-item">
-            <img src="static/images/sit_279_sample_cfg4.0.png"
-              class="interpolation-image" />
+            <div><img src="static/images/sit_279_sample_cfg4.0.png"
+              class="teaser-img" /></div>
             <div class="card-content slider-text" style="background-color: rgba(0,0,0,0.1)">
               <div class="is-size-5 has-text-centered">
                 Class: 'Arctic fox' (279)
@@ -342,8 +346,8 @@ <h1 class="title is-1 publication-title">DiMSUM <img src="./static/images/dimsum
           </div>
 
           <div class="carousel-item">
-            <img src="static/images/sit_360_sample_cfg4.0.png"
-              class="interpolation-image" />
+            <div><img src="static/images/sit_360_sample_cfg4.0.png"
+              class="teaser-img" /></div>
             <div class="card-content slider-text" style="background-color: rgba(0,0,0,0.1)">
               <div class="is-size-5 has-text-centered">
                 Class: 'Otter' (360)
@@ -352,8 +356,8 @@ <h1 class="title is-1 publication-title">DiMSUM <img src="./static/images/dimsum
           </div>
 
           <div class="carousel-item">
-            <img src="static/images/sit_387_sample_cfg4.0.png"
-              class="interpolation-image" />
+            <div><img src="static/images/sit_387_sample_cfg4.0.png"
+              class="teaser-img" /></div>
             <div class="card-content slider-text" style="background-color: rgba(0,0,0,0.1)">
               <div class="is-size-5 has-text-centered">
                 Class: 'Red Panda' (387)
@@ -362,8 +366,8 @@ <h1 class="title is-1 publication-title">DiMSUM <img src="./static/images/dimsum
           </div>
 
           <div class="carousel-item">
-            <img src="static/images/sit_972_sample_cfg4.0.png"
-              class="interpolation-image" />
+            <div><img src="static/images/sit_972_sample_cfg4.0.png"
+              class="teaser-img" /></div>
             <div class="card-content slider-text" style="background-color: rgba(0,0,0,0.1)">
               <div class="is-size-5 has-text-centered">
                 Class: 'Cliff' (972)
@@ -372,8 +376,8 @@ <h1 class="title is-1 publication-title">DiMSUM <img src="./static/images/dimsum
           </div>
 
           <div class="carousel-item">
-            <img src="static/images/sit_980_sample_cfg4.0.png"
-              class="interpolation-image" />
+            <div><img src="static/images/sit_980_sample_cfg4.0.png"
+              class="teaser-img" /> </div>
             <div class="card-content slider-text" style="background-color: rgba(0,0,0,0.1)">
               <div class="is-size-5 has-text-centered">
                 Class: 'Volcano' (980)
@@ -383,7 +387,7 @@ <h1 class="title is-1 publication-title">DiMSUM <img src="./static/images/dimsum
 
           <div class="carousel-item">
             <img src="static/images/sit_992_sample_cfg4.0.png"
-              class="interpolation-image" />
+              class="teaser-img" />
             <div class="card-content slider-text" style="background-color: rgba(0,0,0,0.1)">
               <div class="is-size-5 has-text-centered">
                 Class: 'Agaric' (992)
@@ -393,7 +397,7 @@ <h1 class="title is-1 publication-title">DiMSUM <img src="./static/images/dimsum
 
           <div class="carousel-item">
             <img src="static/images/sit_417_sample_cfg4.0.png"
-              class="interpolation-image" />
+              class="teaser-img" />
             <div class="card-content slider-text" style="background-color: rgba(0,0,0,0.1)">
               <div class="is-size-5 has-text-centered">
                 Class: 'Ballon' (417)
@@ -403,7 +407,7 @@ <h1 class="title is-1 publication-title">DiMSUM <img src="./static/images/dimsum
 
           <div class="carousel-item">
             <img src="static/images/sit_393_sample_cfg4.0.png"
-              class="interpolation-image" />
+              class="teaser-img" />
             <div class="card-content slider-text" style="background-color: rgba(0,0,0,0.1)">
               <div class="is-size-5 has-text-centered">
                 Class: 'Anemone fish' (393)
@@ -413,17 +417,31 @@ <h1 class="title is-1 publication-title">DiMSUM <img src="./static/images/dimsum
 
         </div>
 
-        <a class="carousel-control-prev" href="#results-carousel" role="button" data-slide="prev">
-          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+        <a class="carousel-control-prev" href="#results-carousel" role="button" data-slide="prev"></a>
+          <div class="slider-navigation-previous">
+              <svg viewBox="0 0 50 80" xml:space="preserve">
+                  <polyline fill="white" stroke-width=".5em" stroke-linecap="round"
+                      stroke-linejoin="round" points="45.63,75.8 0.375,38.087 45.63,0.375 ">
+                  </polyline>
+              </svg>
+          </div>
           <span class="sr-only">Previous</span>
         </a>
+
         <a class="carousel-control-next" href="#results-carousel" role="button" data-slide="next">
-          <span class="carousel-control-next-icon" aria-hidden="true"></span>
-          <span class="sr-only">Next</span>
+            <div class="slider-navigation-next">
+                <svg viewBox="0 0 50 80" xml:space="preserve">
+                    <polyline fill="white" stroke-width=".5em" stroke-linecap="round"
+                        stroke-linejoin="round" points="0.375,0.375 45.63,38.087 0.375,75.8 ">
+                    </polyline>
+                </svg>
+            </div>
+            <span class="sr-only">Next</span>
         </a>
       </div>
       </div>
       </div>
+
       <!-- <div class="column is-centered ">
           <div class="content has-text-centered">
         TL;DR: We propose DiMSUM, a hybrid Mamba-Transformer diffusion model that synergistically leverages both spatial and frequency information for high-quality image synthesis.</td>
diff --git a/static/css/index.css b/static/css/index.css
index 30c4412..c4d8cce 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -166,24 +166,11 @@ body {
  text-align: center;
  }
  .carousel-item img {
-  /* width: 80%; */
+ /* width: 100%; */
  }
-
- .carousel {
-  /* max-height: 80%; */
-  max-width: 80%;
-  overflow: hidden;
-}
-
-.carousel .carousel-control-next-icon,
-.carousel-control-prev-icon {
-  filter: invert(1);
-}
-
  .carousel-inner .item img {
  margin:auto;
  }
-
  .carousel-control-next,.carousel-control-prev{
  opacity:1
  }
@@ -218,18 +205,50 @@ body {
  background:gray center center no-repeat;
  background-size:20px 20px
  }
-
  .teaser-carousel {
-    width: 60%;
+    width: 80%;
     margin: auto;
-    height: 80%;
-    /* max-height: 540px; */
+    max-height: 540px;
  }
 
- .carousel-control-next-icon {
-  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='red' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
+ /* .carousel-control.left, .carousel-control.right {
+  left: 0;
+  z-index: 1;
+} */
+
+.caption {
+  font-family: Chalkduster;
+  color: gray;
+width: auto;
+display: inline-block;
+padding: 11px 15px 11px 15px;
+border-radius: 10px;
+}
+
+.caption:hover {
+  cursor: pointer;
+  color: black;
+}
+
+.caption-active {
+  color: black;
+background-color: #F2E34C;
+}
+
+#videoCarousel{
+   margin-top:5px;
+}
+
+
+.teaser-img {
+  width: 90% !important;
 }
 
-.carousel-control-prev-icon {
-  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='red' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
+.hr-twill-colorful {
+  border: 0;
+  padding: 3px;
+  background: linear-gradient(135deg, red, orange,green, blue, purple);
+  --mask-image: repeating-linear-gradient(135deg, #000 0px, #000 1px, transparent 1px, transparent 6px);
+  -webkit-mask-image: var(--mask-image);
+  mask-image: var(--mask-image);
 }
\ No newline at end of file