update page

Luo-Z13 · Jun 7, 2024 · dd164cc · dd164cc
1 parent 2ecf3f1
commit dd164cc
Show file tree

Hide file tree

Showing 4 changed files with 148 additions and 22 deletions.
diff --git a/head/custom.css b/head/custom.css
@@ -1,17 +1,17 @@
 .tabMenu {
-      width: 800px;
+      width: 80%;
+      max-width: 800px;
       margin: 0 auto; /* Center the tab menu */
   }
   .tabMenu ul {
       list-style: none;
-      height: 50px;
       display: flex;
-      justify-content: center; /* Center the list items */
+      justify-content: space-around; /* Distribute the list items */
       padding: 0;
       margin: 0;
   }
   .tabMenu ul li {
-      width: 33.08%;
+      flex: 1;
       text-align: center;
       line-height: 30px;
       border-right: 1px solid #C9C3C4;
@@ -35,19 +35,7 @@
   .hide {
       display: none;
   }
-  .bar {
-      width: 800px;
-      text-align: center;
-      margin-top: 30px;
-      background: rgba(233, 233, 230, 0.5);
-      color: rgba(122, 139, 139, 0.9);
-      border-right: 1px solid rgba(201, 195, 196, 0.5);
-      border-left: 1px solid rgba(201, 195, 196, 0.5);
-  }
-  .dot {
-      color: #D8BFD8;
-  }
-  .lin {
-      color: #666666;
+  .show {
+      display: block;
   }
 
diff --git a/head/custom.js b/head/custom.js
@@ -27,8 +27,4 @@ var tab = function(id) {
 }
 window.onload = function() {
   tab("tab1");
-  tab("tab2");
-  tab("tab3");
-  tab("tab4");
-  tab("tab5");
 }
diff --git a/head/system.css b/head/system.css
@@ -0,0 +1,118 @@
+* {
+      margin: 0;
+      padding: 0;
+  }
+  body {
+      font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", Arial, sans-serif;
+      font-size: 15px;
+      line-height: 20px;
+      color: #666666;
+      margin: 10px 13px;
+  }
+  ul {
+      text-align: justify;
+      text-justify: inter-character;
+  }
+  a {
+      color: #AB9BAB;
+      text-decoration: none;
+  }
+  a:hover {
+      color: rgba(255,103,0,0.6);
+      text-decoration: none;
+  }
+  a img {
+      border: 1px solid transparent;
+  }
+  a img:hover {
+      border: 1px solid #FF6700;
+      filter: alpha (Opacity = 50);
+      -moz-opacity: 0.5;
+      opacity: 0.5;
+  }
+  p {
+      width: 80%;
+      max-width: 800px;
+      margin-bottom: 9px;
+      text-align: justify;
+      text-justify: inter-character;
+  }
+  table {
+      width: 80%;
+      max-width: 800px;
+  }
+  tr, td {
+      font-size: 15px;
+      color: #666666;
+      text-align: justify;
+      text-justify: inter-character;
+  }
+  h1, h2, h3 {
+      width: 80%;
+      max-width: 800px;
+      color: #4682b4;
+      line-height: 36px;
+  }
+  h1 {
+      margin-top: 60px;
+      margin-bottom: 24px;
+      font-size: 25px;
+  }
+  h2 {
+      margin-top: 30px;
+      font-size: 20px;
+  }
+  h3 {
+      margin-top: 30px;
+      font-size: 18px;
+  }
+  h4 {
+      color: #2b5068;
+      line-height: 36px;
+      font-size: 14px;
+  }
+  hr {
+      width: 80%;
+      max-width: 800px;
+      border: 0;
+      border-bottom: 1px solid #C9C3C4;
+  }
+  code, pre {
+      font-family: Monaco, Andale Mono, Courier New, monospace;
+  }
+  code {
+      background-color: #FEE9CC;
+      color: rgba(0, 0, 0, 0.75);
+      padding: 1px 3px;
+      font-size: 11px;
+      -webkit-border-radius: 3px;
+      -moz-border-radius: 3px;
+      border-radius: 3px;
+  }
+  pre {
+      width: 776px;
+      padding: 12px;
+      margin: 6px 0 30px 0;
+      line-height: 15px;
+      font-size: 11px;
+      border: 1px solid #C9C3C4;
+      white-space: pre-wrap;
+      word-wrap: break-word;
+      display: block;
+  }
+  pre code {
+      background-color: #FFFFFF;
+      color: #666666;
+      font-size: 11px;
+      padding: 0;
+  }
+  @media screen and (min-width: 800px) {
+      body {
+          width: 800px;
+          margin: 10px auto;
+      }
+  }
+  #advantages {
+      padding-left: 40px;
+  }
+
diff --git a/index.html b/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>SkySenseGPT: A Fine-Grained Instruction Tuning Dataset and Model for Remote Sensing Vision-Language Understanding</title>
+    <link type="text/css" href="head/system.css" rel="stylesheet"/>
     <link type="text/css" href="head/custom.css" rel="stylesheet"/>
     <script type="text/javascript" src="head/custom.js"></script>
     <style>
@@ -22,5 +23,28 @@
 <body>
     <h1>SkySenseGPT: A Fine-Grained Instruction Tuning Dataset and Model for Remote Sensing Vision-Language Understanding</h1>
     <img src="overview.png" alt="Overview">
+    <div id="tab1" class="tabMenu">
+        <ul>
+            <li class="on"><h4>Geographical Distribution</h4></li>
+            <li class="off"><h4>Objects</h4></li>
+            <li class="off"><h4>Relationships</h4></li>
+            <li class="off"><h4>Download Links</h4></li>
+        </ul>
+        <div id="firstPage-tab1" class="show">
+            <img src="distr.jpg" alt="Geographical Distribution">
+        </div>
+        <div id="secondPage-tab1" class="hide">
+            <img src="obj.jpg" alt="Objects">
+        </div>
+        <div id="thirdPage-tab1" class="hide">
+            <img src="rel.jpg" alt="Relationships">
+        </div>
+        <div id="fourthPage-tab1" class="hide">
+            <ul>
+                <li>Baidu Drive: <a href="#"><b>Future opening soon</b></a></li>
+                <li>Google Drive: <a href="#"><b>Future opening soon</b></a></li>
+            </ul>
+        </div>
+    </div>
 </body>
 </html>