Update

CSS/travel/footprint_country.css

@@ -33,53 +33,14 @@
     text-indent: 2ch;
 }
 
-#country_header {
-    background: url(/MATERIALS//travel_story/china/0.avif), #1aa;
-    background-position: center bottom;
-    background-repeat: no-repeat;
-    background-size: cover;
-    height: 60vh;
-    width: 80vw;
-    position: relative;
-    margin: auto;
-    margin-top: 2em;
-}
-
-#country_header p {
-    font-size: 4em;
-    height: 1em;
-    text-align: center;
-    font-family: 'YeZiGongChangTangYingHei';
-    color: #88888860;
-    -webkit-text-stroke: 1px #888;
-    transform: scale(1.5, 2.5);
-    font-weight: bold;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    margin: auto;
-}
-
-#conutry_description {
-    font-size: 1.2em;
-    width: 80%;
-    text-align: left;
-    margin: 1em auto;
-    font-family: "aabairimengxiangjia";
-    color: #888;
-    text-indent: 2ch;
-}
-
-#country_img_area {
+#footpring_content_img_area {
     width: 80vw;
     margin: auto;
     margin-top: -0.5em;
     text-align: center;
 }
 
-#country_img_area .country_img {
+#footpring_content_img_area .footprint_content_img {
     height: 15em;
     display: inline-table;
     width: calc(100% / 3 - 2.5em);
@@ -94,11 +55,11 @@
     position: relative;
 }
 
-#country_img_area .country_img:hover div {
+#footpring_content_img_area .footprint_content_img:hover div {
     height: 65%;
 }
 
-#country_img_area .country_img div {
+#footpring_content_img_area .footprint_content_img div {
     background: #ffffffaa;
     height: 35%;
     width: 90%;
@@ -113,20 +74,20 @@
     transition: all 0.5s;
 }
 
-#country_img_area .country_img div > p:first-child {
+#footpring_content_img_area .footprint_content_img div > p:first-child {
     margin: 0.25em 1em 0;
     text-align: left;
     color: #000000aa;
     font-size: 1.2em;
 }
 
-#country_img_area .country_img div > p:nth-child(2) {
+#footpring_content_img_area .footprint_content_img div > p:nth-child(2) {
     text-align: left;
     margin: 0.1em 1em;
     color: #000000aa
 }
 
-#country_img_area .country_img div > p:nth-child(3) {
+#footpring_content_img_area .footprint_content_img div > p:nth-child(3) {
     overflow: scroll hidden;
     margin: 0.1em 1em;
     white-space:nowrap;
@@ -137,30 +98,30 @@
     padding: 0.5em 0;
 }
 
-#country_img_area .country_img div > p:nth-child(3) span {
+#footpring_content_img_area .footprint_content_img div > p:nth-child(3) span {
     border-radius: 0.5em;
     border: 0.1em solid #888;
     margin: auto 0.25em;
     padding: 0.1em 0.25em;
 }
 
-#country_img_area .country_img div > p:nth-child(3)::-webkit-scrollbar {
+#footpring_content_img_area .footprint_content_img div > p:nth-child(3)::-webkit-scrollbar {
     padding: 0.15em;
     height: 0.5em;
     margin: 0.15em;
 }
 
-#country_img_area .country_img div > p:nth-child(3)::-webkit-scrollbar-thumb {
+#footpring_content_img_area .footprint_content_img div > p:nth-child(3)::-webkit-scrollbar-thumb {
     border-radius: 1em;
     background: #88888800;
     transition: all 0.5s;
 }
 
-#country_img_area .country_img div > p:nth-child(3):hover::-webkit-scrollbar-thumb {
+#footpring_content_img_area .footprint_content_img div > p:nth-child(3):hover::-webkit-scrollbar-thumb {
     background: #888888FF;
 }
 
-#country_img_area .country_img div > p:nth-child(4) {
+#footpring_content_img_area .footprint_content_img div > p:nth-child(4) {
     font-family: "aabairimengxiangjia";
     color: #00000000;
     font-size: 1.1em;
@@ -169,24 +130,24 @@
     transition: all 0.5s;
 }
 
-#country_img_area .country_img:hover div > p:nth-child(4) {
+#footpring_content_img_area .footprint_content_img:hover div > p:nth-child(4) {
     color: #000000aa;
 }
 
 @media screen and (max-width: 750px) {
 
-    #country_img_area .country_img {
+    #footpring_content_img_area .footprint_content_img {
         height: 10em;
         width: 85%;
         margin: 0.5em;
         margin-bottom: 4.5em;
     }
 
-    #country_img_area .country_img:active div {
+    #footpring_content_img_area .footprint_content_img:active div {
         height: 100%;
     }
 
-    #country_img_area .country_img div {
+    #footpring_content_img_area .footprint_content_img div {
         height: 55%;
         bottom: -20%;
     }

JS/TRAVEL/index.js

@@ -266,13 +266,57 @@ function worldMapsAction() {
             nationalShow = true
 
             $('.display_in_more:eq(0)').removeClass('display_in_more')
+            // $(`#box_footprint_content`).addClass('display_in_more')
             $(`#travel_story_title_${element.id}`).addClass('display_in_more')
             $('.display_story_content:eq(0)').removeClass('display_story_content')
-            $(`#${language.getLanguage()}_box_footprint_${element.id}`).addClass('display_story_content')
+            $(`#box_footprint_content`).addClass('display_story_content')
+            // $(`#${language.getLanguage()}_box_footprint_${element.id}`).addClass('display_story_content')
 
             // to add more
             $(`#footprint_content_header p`).text($('#page_title').text());
-
+            $.getJSON(`/JSON/LANGUAGE/${element.id}/${element.id}.json`, function(conutry_content) {
+
+                let current_lang = language.getLanguage();
+
+                let bg_setup = conutry_content.bg;
+                $('#footprint_content_header').css({
+                    "background": `url(${bg_setup.url}), #1aa`,
+                    "background-size": "cover",
+                    "background-position": `${bg_setup.x} ${bg_setup.y}`,
+                    "background-repeat": "no-repeat"
+                });
+
+                $('#footprint_content_description').text(conutry_content[current_lang][0]['_description_']);
+
+                let img_list = conutry_content["img-list"];
+                $('#footpring_content_img_area').html("");
+                for (let _i = 0; _i < img_list.length; _i++) {
+
+                    let _label_content = '';
+                    for (let _j = 0; _j < img_list[_i]['label'].length; _j++) {
+
+                        _label_content += `<span>${conutry_content[current_lang][0]['_img_label_'][img_list[_i]['label'][_j]]}</span>`;
+                    }
+
+                    $('#footpring_content_img_area').html( $('#footpring_content_img_area').html() + 
+                        `<div class="footprint_content_img" style="
+                            background-image: url(${img_list[_i]['url']});
+                            background-size: cover;
+                            background-position: center;
+                            background-repeat: no-repeat;
+                        ">
+                            <div>
+                                <p>${img_list[_i]['title']}</p>
+                                <p>${img_list[_i]['city']}, ${img_list[_i]['province']}, ${img_list[_i]['country']}.</p>
+                                <p>${_label_content}</p>
+                                <p>${img_list[_i]['desc']}</p>
+                            </div>
+                        </div>`
+                    );
+
+                    // console.log(img_list[_i])
+                }
+            })
 
             $('#maps_box').css('opacity', 0);
             $('#maps_box').css('z-index', -1);

JSON/LANGUAGE/CN/CN.json

@@ -0,0 +1,47 @@
+{
+    "zh" : [{
+        "_description_": "中国，这片充满历史和文化的土地，自古便有“江山如此多娇，引无数英雄竞折腰”的美誉。这里拥有巍峨的长城、壮丽的黄山、悠久的故宫以及数不尽的自然与人文奇观。而我，正幸运地在这片土地上求学，见证着它的现代与传统相融的独特魅力。",
+
+        "_img_label_": [
+            "标签 1",
+            "标签 2",
+            "标签 3",
+            "标签 4"
+        ]
+    }],
+
+    "en" : [{
+        "_description_": "China is a land rich in history and culture, where ancient and modern worlds converge. Known for iconic landmarks like the Great Wall, the Forbidden City, and breathtaking natural landscapes, this country offers endless opportunities for discovery. I am fortunate to study here, immersed in the charm of this dynamic and culturally rich nation.",
+
+        "_img_label_": [
+            "label 1",
+            "label 2",
+            "label 3",
+            "label 4"
+        ]
+    }],
+
+    "bg" : {
+        "url": "/MATERIALS/travel_story/china/0.avif",
+        "x": "center",
+        "y": "bottom"
+    },
+
+    "img-list": [{
+        "url": "/MATERIALS/travel_story/china/0.avif",
+        "title": "title 1",
+        "city": "Beijing",
+        "province": "Beijing",
+        "country": "China",
+        "desc": "desc 1",
+        "label": [0, 2]
+    }, {
+        "url": "/MATERIALS/travel_story/world/1.avif",
+        "title": "title 2",
+        "city": "Tianjin",
+        "province": "Tianjin",
+        "country": "China",
+        "desc": "desc 2",
+        "label": [1, 3]
+    }]
+}

JSON/LANGUAGE/MY/MY.json

@@ -0,0 +1,16 @@
+{
+    "zh" : [{
+        "_description_": "马来西亚是一个多元文化的国家，我的家乡就坐落在这里。在这片土地上，不同的文化、宗教和语言交织共存，形成了独特的和谐氛围。这里有原始的热带雨林、绵延的海岸线、迷人的历史建筑，以及热情好客的人们。身为马来西亚人，我为自己的家乡感到自豪，并愿意向大家展示它的美丽与多彩。"
+
+    }],
+
+    "en" : [{
+        "_description_": "Malaysia is a multicultural country, and it is my hometown. This land is home to a harmonious blend of cultures, religions, and languages, creating a unique and vibrant atmosphere. Here, you’ll find pristine rainforests, scenic coastlines, charming historical architecture, and warm, welcoming people. As a Malaysian, I am proud of my homeland and eager to share its beauty and diversity with others."
+    }],
+
+    "bg" : {
+        "url": "/MATERIALS/travel_story/malaysia/0.avif",
+        "x": "center",
+        "y": "center"
+    }
+}

JSON/LANGUAGE/SG/SG.json

@@ -0,0 +1,16 @@
+{
+    "zh" : [{
+        "_description_": "新加坡是一个以多元文化和高度现代化著称的城市国家。作为“花园城市”，新加坡拥有整洁的街道、丰富的绿色空间和高效的城市规划，给人一种独特的和谐感。这里融合了华族、马来族、印度族等多个民族的文化，从多样的美食到传统节庆，展现出包容且丰富的社会风貌。此外，新加坡也是全球金融和科技的中心之一，充满了创新和发展的活力。"
+
+    }],
+
+    "en" : [{
+        "_description_": "Singapore is a city-state known for its multicultural heritage and high level of modernization. Often called the \"Garden City,\" Singapore boasts clean streets, abundant green spaces, and efficient urban planning that give it a unique sense of harmony. With a blend of Chinese, Malay, Indian, and other cultures, Singapore offers a vibrant social scene, from diverse cuisines to traditional festivals. It is also one of the world's leading financial and technology hubs, filled with energy, innovation, and growth."
+    }],
+
+    "bg" : {
+        "url": "/MATERIALS/travel_story/singapore/0.avif",
+        "x": "center",
+        "y": "70%"
+    }
+}

Travel/index.html

@@ -215,26 +215,26 @@ <h1>您好！</h1>
                 <hr class="hr-solid-content" data-content=" 榨到底了 ">
             </div>
 
-            <div id="box_footprint_content">
+            <div id="box_footprint_content" class="normal_story_content">
                 <div id="footprint_content_header">
                     <p>title</p>
                 </div>
 
                 <p id="footprint_content_description">Description</p>
 
                 <div id="footpring_content_img_area">
-                    <div class="footprint_content_img">
+                    <!-- <div class="footprint_content_img">
                         <div>
                             <p>title</p>
                             <p>city, province, country.</p>
                             <p><span>label</span></p>
                             <p>Description Description</p>
                         </div>
-                    </div>
+                    </div> -->
                 </div>
             </div>
 
-            <div id="en_box_footprint_CN" class="normal_story_content">
+            <!-- <div id="en_box_footprint_CN" class="normal_story_content">
                 <div id="country_header">
                     <p>CHINA</p>
                 </div>
@@ -344,7 +344,7 @@ <h1>您好！</h1>
             </div>
             <div id="zh_box_footprint_SG" class="normal_story_content">
                 新加坡
-            </div>
+            </div> -->
         </div>
     </body>
 </html>