From 638f4b4232905782805428f97385c354c06a45ff Mon Sep 17 00:00:00 2001
From: Shenghai Yuan <140951558+SHYuanBest@users.noreply.github.com>
Date: Thu, 27 Jun 2024 11:11:38 +0800
Subject: [PATCH] Update index.html

---
 index.html | 101 +++++++++++++++++++++++++++--------------------------
 1 file changed, 52 insertions(+), 49 deletions(-)

diff --git a/index.html b/index.html
index 16efaeb..fd47a3c 100644
--- a/index.html
+++ b/index.html
@@ -162,7 +162,56 @@ <h2 class="subtitle has-text-centered">
 <section class="hero teaser">
   <div class="container is-max-desktop">
     <div class="hero-body">
-      <table style="width:880px; margin-bottom:10px; border: 1px solid #ddd; margin-left: auto; margin-right: auto; border-collapse: collapse; font-family: Arial, sans-serif; font-size: 14px;">
+      <table style="width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; font-size: 14px; text-align: center;">
+        <thead style="background-color: #f2f2f2; border-bottom: 2px solid #ddd;">
+            <tr>
+                <th style="padding: 10px;">Biological</th>
+                <th style="padding: 10px;">Human Created</th>
+                <th style="padding: 10px;">Meteorological</th>
+                <th style="padding: 10px;">Physical</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td><img src="static/videos/A_0_0.gif" alt="Biological" style="width: 235px; height: 235px; padding: 5px 10px;"></td>
+                <td><img src="static/videos/A_1_0.gif" alt="Human Created" style="width: 235px; height: 235px; padding: 5px 10px;"></td>
+                <td><img src="static/videos/A_2_0.gif" alt="Meteorological" style="width: 235px; height: 235px; padding: 5px 10px;"></td>
+                <td><img src="static/videos/A_3_0.gif" alt="Physical" style="width: 235px; height: 235px; padding: 5px 10px;"></td>
+            </tr>
+            <tr style="border-bottom: 1px solid #ddd;">
+                <td style="padding: 2px 10px;">"Time-lapse of microgreens germinating and growing ..."</td>
+                <td style="padding: 2px 10px;">"Time-lapse of a modern house being constructed in ..."</td>
+                <td style="padding: 2px 10px;">"Time-lapse of a beach sunset capturing the sun's ..."</td>
+                <td style="padding: 2px 10px;">"Time-lapse of an ice cube melting on a solid ..."</td>
+            </tr>
+            <tr>
+                <td><img src="static/videos/A_0_1.gif" alt="Biological" style="width: 235px; height: 235px; padding: 5px 10px;"></td>
+                <td><img src="static/videos/A_1_1.gif" alt="Human Created" style="width: 235px; height: 235px; padding: 5px 10px;"></td>
+                <td><img src="static/videos/A_2_1.gif" alt="Meteorological" style="width: 235px; height: 235px; padding: 5px 10px;"></td>
+                <td><img src="static/videos/A_3_1.gif" alt="Physical" style="width: 235px; height: 235px; padding: 5px 10px;"></td>
+            </tr>
+            <tr style="border-bottom: 1px solid #ddd;">
+                <td style="padding: 2px 10px;">"Time-lapse of microgreens germinating and growing ..."</td>
+                <td style="padding: 2px 10px;">"Time-lapse of a 3D printing process: starting with ..."</td>
+                <td style="padding: 2px 10px;">"Time-lapse of a solar eclipse showing the moon's ..."</td>
+                <td style="padding: 2px 10px;">"Time-lapse of a cake baking in an oven, depicting ..."</td>
+            </tr>
+            <tr>
+                <td><img src="static/videos/A_0_2.gif" alt="Biological" style="width: 235px; height: 235px; padding: 5px 10px;"></td>
+                <td><img src="static/videos/A_1_2.gif" alt="Human Created" style="width: 235px; height: 235px; padding: 5px 10px;"></td>
+                <td><img src="static/videos/A_2_2.gif" alt="Meteorological" style="width: 235px; height: 235px; padding: 5px 10px;"></td>
+                <td><img src="static/videos/A_3_2.gif" alt="Physical" style="width: 235px; height: 235px; padding: 5px 10px;"></td>
+            </tr>
+            <tr>
+                <td style="padding: 2px 10px;">"Time-lapse of a butterfly metamorphosis from ..."</td>
+                <td style="padding: 2px 10px;">"Time-lapse of a busy nighttime city intersection ..."</td>
+                <td style="padding: 2px 10px;">"Time-lapse of a landscape transitioning from a ..."</td>
+                <td style="padding: 2px 10px;">"Time-lapse of a strawberry rotting: starting with ..."</td>
+            </tr>
+        </tbody>
+    </table>    
+
+      <table style="margin-top:20px; width:880px; margin-bottom:20px; border: 1px solid #ddd; margin-left: auto; margin-right: auto; border-collapse: collapse; font-family: Arial, sans-serif; font-size: 14px;">
         <thead style="background-color: #f2f2f2;">
             <tr style="border-bottom: 1px solid #ddd;">
                 <th style="padding: 10px; text-align: center;">Backbone</th>
@@ -232,6 +281,7 @@ <h2 class="subtitle has-text-centered">
             </tr>
         </tbody>
       </table>
+
       <div class="content has-text-justified">
         <p style="margin-top: 0;">
           <b>Overview of existing T2V benchmarks.</b> We propose ChronoMagic-Bench, a benchmark for <b>metamorphic evaluation</b> of <b>text-to-
@@ -244,54 +294,7 @@ <h2 class="subtitle has-text-centered">
             metrics and perspectives.
         </p>
       </div>
-      <table style="width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; font-size: 14px; text-align: center;">
-        <thead style="background-color: #f2f2f2; border-bottom: 2px solid #ddd;">
-            <tr>
-                <th style="padding: 10px;">Biological</th>
-                <th style="padding: 10px;">Human Created</th>
-                <th style="padding: 10px;">Meteorological</th>
-                <th style="padding: 10px;">Physical</th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr>
-                <td><img src="static/videos/A_0_0.gif" alt="Biological" style="width: 235px; height: 235px; padding: 5px 10px;"></td>
-                <td><img src="static/videos/A_1_0.gif" alt="Human Created" style="width: 235px; height: 235px; padding: 5px 10px;"></td>
-                <td><img src="static/videos/A_2_0.gif" alt="Meteorological" style="width: 235px; height: 235px; padding: 5px 10px;"></td>
-                <td><img src="static/videos/A_3_0.gif" alt="Physical" style="width: 235px; height: 235px; padding: 5px 10px;"></td>
-            </tr>
-            <tr style="border-bottom: 1px solid #ddd;">
-                <td style="padding: 2px 10px;">"Time-lapse of microgreens germinating and growing ..."</td>
-                <td style="padding: 2px 10px;">"Time-lapse of a modern house being constructed in ..."</td>
-                <td style="padding: 2px 10px;">"Time-lapse of a beach sunset capturing the sun's ..."</td>
-                <td style="padding: 2px 10px;">"Time-lapse of an ice cube melting on a solid ..."</td>
-            </tr>
-            <tr>
-                <td><img src="static/videos/A_0_1.gif" alt="Biological" style="width: 235px; height: 235px; padding: 5px 10px;"></td>
-                <td><img src="static/videos/A_1_1.gif" alt="Human Created" style="width: 235px; height: 235px; padding: 5px 10px;"></td>
-                <td><img src="static/videos/A_2_1.gif" alt="Meteorological" style="width: 235px; height: 235px; padding: 5px 10px;"></td>
-                <td><img src="static/videos/A_3_1.gif" alt="Physical" style="width: 235px; height: 235px; padding: 5px 10px;"></td>
-            </tr>
-            <tr style="border-bottom: 1px solid #ddd;">
-                <td style="padding: 2px 10px;">"Time-lapse of microgreens germinating and growing ..."</td>
-                <td style="padding: 2px 10px;">"Time-lapse of a 3D printing process: starting with ..."</td>
-                <td style="padding: 2px 10px;">"Time-lapse of a solar eclipse showing the moon's ..."</td>
-                <td style="padding: 2px 10px;">"Time-lapse of a cake baking in an oven, depicting ..."</td>
-            </tr>
-            <tr>
-                <td><img src="static/videos/A_0_2.gif" alt="Biological" style="width: 235px; height: 235px; padding: 5px 10px;"></td>
-                <td><img src="static/videos/A_1_2.gif" alt="Human Created" style="width: 235px; height: 235px; padding: 5px 10px;"></td>
-                <td><img src="static/videos/A_2_2.gif" alt="Meteorological" style="width: 235px; height: 235px; padding: 5px 10px;"></td>
-                <td><img src="static/videos/A_3_2.gif" alt="Physical" style="width: 235px; height: 235px; padding: 5px 10px;"></td>
-            </tr>
-            <tr>
-                <td style="padding: 2px 10px;">"Time-lapse of a butterfly metamorphosis from ..."</td>
-                <td style="padding: 2px 10px;">"Time-lapse of a busy nighttime city intersection ..."</td>
-                <td style="padding: 2px 10px;">"Time-lapse of a landscape transitioning from a ..."</td>
-                <td style="padding: 2px 10px;">"Time-lapse of a strawberry rotting: starting with ..."</td>
-            </tr>
-        </tbody>
-    </table>    
+      
     </div>
   </div>
 </section>