Update

CSS/General/navigation_bar.css

@@ -113,27 +113,27 @@
 
     #nav_home:hover {
         background: url('../../MATERIALS/ico_home.png');
-        background-position: top;
+        background-position: center;
         background-repeat: no-repeat;
     }
     #nav_trips:hover {
         background: url('../../MATERIALS/ico_trip.png');
-        background-position: top;
+        background-position: center;
         background-repeat: no-repeat;
     }
     #nav_camera:hover {
         background: url('../../MATERIALS/ico_camera.png');
-        background-position: top;
+        background-position: center;
         background-repeat: no-repeat;
     }
     #nav_projects:hover {
         background: url('../../MATERIALS/ico_projects.png');
-        background-position: top;
+        background-position: center;
         background-repeat: no-repeat;
     }
     #nav_language:hover {
         background: url('../../MATERIALS/ico_language.png');
-        background-position: top;
+        background-position: center;
         background-repeat: no-repeat;
     }
 

CSS/index/home.css

@@ -157,6 +157,7 @@
     text-align: center;
     font-family: 'Courier New', Courier, monospace;
     color: #888;
+    margin-bottom: 10em;
 }
 
 @media screen and (max-width: 750px) {

JS/INDEX/home.js

@@ -1,23 +1,27 @@
 function loadTimeLine() {
 
-    $.getJSON('../../JSON/LAYOUT/home_timeline.json', function(data) {
+    return new Promise((resolve, reject) => {
+        $.getJSON('../../JSON/LAYOUT/home_timeline.json', function(data) {
 
-        LenData = data.length;
-        for(var items = 0; items < LenData; items++) {
-            let item = data[items]['img'];
-            let item_src = './MATERIALS/' + item + '.avif';
-            let item_area_id = "area_" + item.replace("-", "_");
-            let item_time = item.substring(0, 4) + "." + item.substring(4, 6) + "." + item.substring(6, 8);
-            let item_lang_obj = "_t" + item.replace("-", "_") + "_";
+            LenData = data.length;
+            for(var items = 0; items < LenData; items++) {
+                let item = data[items]['img'];
+                let item_src = './MATERIALS/TIMELINE/' + item + '.avif';
+                let item_area_id = "area_" + item.replace("-", "_");
+                let item_time = item.substring(0, 4) + "." + item.substring(4, 6) + "." + item.substring(6, 8);
+                let item_lang_obj = "_t" + item.replace("-", "_") + "_";
+
+                $('#main_timeline').html(
+                    $('#main_timeline').html()
+                    + '<div id="' + item_area_id + '">'
+                    + '<img src="' + item_src + '" alt="">'
+                    + '<p class="p_time">' + item_time + '</p>'
+                    + '<p class="_switch_lang_ p_descript" lang_obj="' + item_lang_obj + '"></p>'
+                    + '</div>'
+                )
+            }
 
-            $('#main_timeline').html(
-                $('#main_timeline').html()
-                + '<div id="' + item_area_id + '">'
-                + '<img src="' + item_src + '" alt="">'
-                + '<p class="p_time">' + item_time + '</p>'
-                + '<p class="_switch_lang_ p_descript" lang_obj="' + item_lang_obj + '"></p>'
-                + '</div>'
-            )
-        }
+            resolve("Success");
+        })
     })
 }

JS/INDEX/index.js

@@ -23,10 +23,12 @@ window.onload = function() {
     language_click(home_timeline)
 
     SlideLeftAndRight();
-    loadTimeLine();
+    asyncFunction();
+}
 
+async function asyncFunction() {
+    let _temp = await loadTimeLine();
     language.loadPageLanguage(home_timeline, language.getLanguage());
-
 }
 
 function SlideLeftAndRight() {

JSON/LANGUAGE/home_timeline.json

@@ -2,12 +2,14 @@
     "zh" : [{
         "_t20000806_01_": "我出生啦！！！",
         "_t20200901_01_": "入学北京理工大学.",
+        "_t20231202_01_": "景山公园眺望故宫.",
         "_t20240630_01_": "在北京理工大学获得数据科学与大数据技术学士学位."
     }],
 
     "en" : [{
         "_t20000806_01_": "I was BORN!",
         "_t20200901_01_": "Admission to Beijing Institute of Technology.",
+        "_t20231202_01_": "Overlooking the Forbidden City from Jingshan Park.",
         "_t20240630_01_": "Received a bachelor's degree in Data Science and Big Data Technology from Beijing Institute of Technology."
     }]
 }

JSON/LAYOUT/home_timeline.json

@@ -4,6 +4,9 @@
 {
     "img": "20200901-01"
 },
+{
+    "img": "20231202-01"
+},
 {
     "img": "20240630-01"
 }]

MATERIALS/2.py

@@ -1,5 +1,5 @@
 from PIL import Image
 import pillow_avif
 
-JPGimg = Image.open('20200901-01' + '.jpg')
-JPGimg.save('20200901-01' + '.avif','AVIF', exif=None)
+JPGimg = Image.open('convert' + '.jpg')
+JPGimg.save('convert' + '.avif','AVIF', exif=None)

MATERIALS/ammap_3.21.15.free/ammap/ammap.css

@@ -0,0 +1,84 @@
+.ammapAlert
+{
+    display:table-cell;
+    vertical-align:middle;
+    text-align:center;
+    font-family:verdana,helvetica,arial,sans-serif;
+    font-size:12px;
+    color:#CC0000;
+}
+
+.ammapDescriptionWindow
+{
+   font-size:11px;
+   font-family:verdana,helvetica,arial,sans-serif;
+   background-color:#FFFFFF;
+   border-style:solid;
+   border-color:#DADADA;
+   border-width:1px;
+   color:#000000;
+   padding:8px;
+   -webkit-box-sizing: border-box;
+   -moz-box-sizing: border-box;
+   box-sizing: border-box;
+}
+
+.ammapDescriptionTitle
+{
+   font-size:12px;
+   font-weight:bold;
+   font-family:verdana,helvetica,arial,sans-serif;
+   padding-bottom:5px;
+}
+
+.ammapDescriptionWindowCloseButton
+{
+
+}
+
+.ammapObjectList ul
+{
+    padding-left:20px;
+    list-style:square outside;
+    color:#999999;
+    font-family:verdana,helvetica,arial,sans-serif;
+    font-size: 12px;
+}
+
+.ammapObjectList ul ul
+{
+    padding-left:14px;
+}
+
+.ammapObjectList a
+{
+    color:#000000;
+}
+
+.ammapObjectList a
+{
+    color:#000000;
+    text-decoration:none;
+    display:block;
+    padding:2px;
+}
+
+.ammapObjectList a:hover
+{
+    color:#CC0000;
+    text-decoration:none;
+    background:#FFFFFF;
+    cursor:pointer;
+    display:block;
+}
+
+.ammapDescriptionText
+{
+	overflow: auto;
+}
+
+
+.amChartsPlotArea
+{
+
+}