Skip to content

Commit

Permalink
Update
Browse files Browse the repository at this point in the history
  • Loading branch information
@SeeChen
SeeChen committed Nov 17, 2024
1 parent f6c78b5 commit 235dc0e
Show file tree
Hide file tree
Showing 8 changed files with 205 additions and 78 deletions.
75 changes: 73 additions & 2 deletions CascadingStyleSheets/Travel/travel.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,9 @@

--travel-Story-Country-img-left: auto;
--travel-Story-Country-img-right: 0;

--travel-Story-Img-Area-Box-width: 85%;
--travel-Story-Img-Area-Img-width: calc(100% / 4.01);
}

@media screen and (max-width: 750px) {
Expand Down Expand Up @@ -69,6 +72,9 @@

--travel-Story-Country-img-left: 0;
--travel-Story-Country-img-right: 0;

--travel-Story-Img-Area-Box-width: 90%;
--travel-Story-Img-Area-Img-width: calc(100% / 2.01);
}
}

Expand Down Expand Up @@ -301,6 +307,8 @@ div:has(> #travel_ContentExpand) {
top: 101vh;

transition: all 1s;

overflow: hidden;
}

div:has(> #travel_ContentExpand.contentExpand) {
Expand All @@ -319,7 +327,7 @@ div:has(> #travel_ContentExpand) #travel_TraveledStory {

box-sizing: border-box;

overflow: hidden scroll;
overflow: hidden hidden;

transition: all 1s;
}
Expand Down Expand Up @@ -448,6 +456,8 @@ div:has(> #travel_ContentExpand) #travel_TraveledStory::-webkit-scrollbar {
margin: 2em auto;

table-layout: fixed;

z-index: 10;
}

#traveled_Area #traveled_Area_AreaList tr td {
Expand Down Expand Up @@ -501,7 +511,7 @@ div:has(> #travel_ContentExpand) #travel_TraveledStory::-webkit-scrollbar {

display: inline-block;

transition: all 1s;
transition: all 0.5s;
}
#traveled_Area #traveled_Area_AreaList tr td.table_right span.selected {

Expand All @@ -519,6 +529,67 @@ div:has(> #travel_ContentExpand) #travel_TraveledStory::-webkit-scrollbar {
border: 0 solid var(--font-color-normal);
color: #00000000;
opacity: 0;
display: inline;
}

#traveled_Area #traveled_Area_AreaList tr td.table_right span.loadingToHide {
opacity: 0;
}

#traveled_ImgArea {

position: absolute;

top: 0;
left: 0;

overflow: hidden scroll;

padding-top: 12em;

width: 100vw;
height: 100%;

z-index: 9;
}

#traveled_ImgArea > div {
width: var(--travel-Story-Img-Area-Box-width);
margin: auto;

display: flex;
justify-content: center;
}

#traveled_ImgArea .img_area {

width: var(--travel-Story-Img-Area-Img-width);
}

#traveled_ImgArea .traveled_story_img {

width: 100%;

display: inline-block;
box-sizing: border-box;

max-height: 1000vh;

transition: all 1s;
}

#traveled_ImgArea img.test {
width: 0;
margin: 0;
padding: 0;
max-height: 0;
position: absolute;
transform: scale(0);
/* display: inline; */
}

#traveled_ImgArea::-webkit-scrollbar {
display: none;
}

#box_TravelPage #travel_TraveledList {
Expand Down
4 changes: 2 additions & 2 deletions Data/Travel/TraveledList.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@
"CN": {
"BeiJing": {
"img": [{
"src": "",
"src": "0.avif",
"alt": "",
"city": "_city0_",
"city": "_dongcheng_",
"labels": ["_test0_", "_test1_", "_test2_", "_test3_"]
}, {
"src": "",
Expand Down
Binary file added File/Image/Travel/China/BeiJing/0.avif
View file
Binary file not shown.
Binary file added File/Image/Travel/China/BeiJing/1.avif
View file
Binary file not shown.
4 changes: 3 additions & 1 deletion JavaScript/General/tools.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,9 @@ export const tools = {
country: "/Language/Area/country.json",
countryCN: "/Language/Area/CN.json",
countryMY: "/Language/Area/MY.json",
countrySG: "/Language/Area/SG.json"
countrySG: "/Language/Area/SG.json",

cityCN: "/Language/Area/City/CN.json"
};

const translateEntries = await Promise.all(
Expand Down
20 changes: 18 additions & 2 deletions JavaScript/Travel/travel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -460,16 +460,32 @@ const SeeChen_TravelPage_ImgLabels_Event = {

if (Label_Filter_City.includes(`_${element.id.split("_")[2]}_`)) {
element.classList.add("stay");
setTimeout(() => {
if (element.classList.contains("loadingToHide")) {
element.classList.remove("loadingToHide");
}
}, 500);
} else if (element.classList.contains("stay")) {
element.classList.remove("stay");
element.classList.add("loadingToHide");
setTimeout(() => {
element.classList.remove("stay");
}, 500);
}
});
table_label.querySelectorAll("span").forEach(element => {

if (Label_Filter_Label.includes(`_${element.id.split("_")[2]}_`)) {
element.classList.add("stay");
setTimeout(() => {
if (element.classList.contains("loadingToHide")) {
element.classList.remove("loadingToHide");
}
}, 500);
} else if (element.classList.contains("stay")) {
element.classList.remove("stay");
element.classList.add("loadingToHide");
setTimeout(() => {
element.classList.remove("stay");
}, 500);
}
});
}
Expand Down
75 changes: 75 additions & 0 deletions Language/Area/City/CN.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
{
"zh": {
"_dongcheng_": "东城区",
"AuHui": "安徽省",
"ChongQing": "重庆市",
"FuJian": "福建省",
"GuangDong": "广东省",
"GanSu": "甘肃省",
"GuangXi": "广西壮族自治区",
"GuiZhou": "贵州省",
"HaiNan": "海南省",
"HeBei": "河北省",
"HeNan": "河南省",
"HongKong": "香港特别行政区",
"HeiLongJiang": "黑龙江省",
"HuNan": "湖南省",
"HuBei": "湖北省",
"JiLing": "吉林省",
"JiangSu": "江苏省",
"JiangXi": "江西省",
"LiaoNing": "辽宁省",
"Macau": "澳门特别行政区",
"InnerMongolia": "内蒙古自治区",
"NingXia": "宁夏回族自治区",
"QingHai": "青海省",
"ShaanXi": "陕西省",
"SiChuan": "四川省",
"ShanDong": "山东省",
"ShangHai": "上海市",
"ShanXi": "山西省",
"TianJin": "天津市",
"TaiWan": "台湾省",
"XinJiang": "新疆维吾尔自治区",
"Tibet": "西藏藏族自治区",
"YunNan": "云南省",
"ZheJiang": "浙江省"
},

"en": {
"_dongcheng_": "Dongcheng District",
"AuHui": "ANHUI",
"ChongQing": "CHONGQING",
"FuJian": "FUJIAN",
"GuangDong": "GUANGDONG",
"GanSu": "GANSU",
"GuangXi": "GUANGXI",
"GuiZhou": "GUIZHOU",
"HaiNan": "HAINAN",
"HeBei": "HEBEI",
"HeNan": "HENAN",
"HongKong": "HONGKONG",
"HeiLongJiang": "HELONGJIANG",
"HuNan": "HUNAN",
"HuBei": "HUBEI",
"JiLing": "JILIN",
"JiangSu": "JIANGSU",
"JiangXi": "JIANGXI",
"LiaoNing": "LIAONING",
"Macau": "MACAU",
"InnerMongolia": "INNER MONGOLIA",
"NingXia": "NINGXIA",
"QingHai": "QINGHAI",
"ShaanXi": "SHAANXI",
"SiChuan": "SICHUAN",
"ShanDong": "SHANDONG",
"ShangHai": "SHANGHAI",
"ShanXi": "SHANXI",
"TianJin": "TIANJIN",
"TaiWan": "TAIWAN",
"XinJiang": "XINJIANG",
"Tibet": "TIBET",
"YunNan": "YUNNAN",
"ZheJiang": "ZHEJIANG"
}
}
105 changes: 34 additions & 71 deletions spa.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,95 +93,58 @@
<span>SINGAPORE</span>
</div>
<div id="travel_TraveledStory">
<div id="traveled_World">
<div id="travel_CN_Story" class="travel_Country_Story">
<img src="/MATERIALS/travel_story/china/0.avif" alt="">
<p class="travel_Story_Country_Name">CHINA</p>
<p class="travel_Story_Country_Desc">DescDescDescDescDesc DescDesc DescDescDesc DescDesc DescDesc.</p>
</div>
<div id="travel_MY_Story" class="travel_Country_Story">
<img src="/MATERIALS/travel_story/malaysia/0.avif" alt="">
<p class="travel_Story_Country_Name">CHINA</p>
<p class="travel_Story_Country_Desc">DescDescDescDescDesc DescDesc DescDescDesc DescDesc DescDesc.</p>
</div>
<div id="travel_SG_Story" class="travel_Country_Story">
<img src="/MATERIALS/travel_story/singapore/0.avif" alt="">
<p class="travel_Story_Country_Name">CHINA</p>
<p class="travel_Story_Country_Desc">DescDescDescDescDesc DescDesc DescDescDesc DescDesc DescDesc.</p>
</div>
</div>
<div id="traveled_World"></div>

<div id="traveled_Area">
<table id="traveled_Area_AreaList">
<tr>
<td class="table_left">City</td>
<td id="table_city" class="table_right" colspan="6">
<span>_city0_</span>
<span>_city1_</span>
<span>_city2_</span>
<span>_city3_</span>
<span>_city4_</span>
<span>_city5_</span>
<span>_city6_</span>
<span>_city0_</span>
<span>_city1_</span>
<span>_city2_</span>
<span>_city3_</span>
<span>_city4_</span>
<span>_city5_</span>
<span>_city6_</span>
<span>_city0_</span>
<span>_city1_</span>
<span>_city2_</span>
<span>_city3_</span>
<span>_city4_</span>
<span>_city5_</span>
<span>_city6_</span>
<span>_city0_</span>
<span>_city1_</span>
<span>_city2_</span>
<span>_city3_</span>
<span>_city4_</span>
<span>_city5_</span>
<span>_city6_</span>
</td>
</tr>

<tr>
<td class="table_left">Label</td>
<td id="table_label" class="table_right" colspan="6">
<span>_city0_</span>
<span>_city1_</span>
<span>_city2_</span>
<span>_city3_</span>
<span>_city4_</span>
<span>_city5_</span>
<span>_city6_</span>
<span>_city0_</span>
<span>_city1_</span>
<span>_city2_</span>
<span>_city3_</span>
<span>_city4_</span>
<span>_city5_</span>
<span>_city6_</span>
<span>_city0_</span>
<span>_city1_</span>
<span>_city2_</span>
<span>_city3_</span>
<span>_city4_</span>
<span>_city5_</span>
<span>_city6_</span>
<span>_city0_</span>
<span>_city1_</span>
<span>_city2_</span>
<span>_city3_</span>
<span>_city4_</span>
<span>_city5_</span>
<span>_city6_</span>
</td>
</tr>
</table>
</div>

<div id="traveled_ImgArea">
<div>
<div class="img_area">
<img src="/MATERIALS/TRAVEL/background.png" alt="" class="traveled_story_img">
<img src="/MATERIALS/LENS/20240329_115623.avif" alt="" class="traveled_story_img">
<img src="/MATERIALS/travel_story/malaysia/183.avif" alt="" class="traveled_story_img">
<img src="/MATERIALS/travel_story/china/0.avif" alt="" class="traveled_story_img">
<img src="/MATERIALS/LENS/20240721_205048.avif" alt="" class="traveled_story_img">
<img src="/MATERIALS/travel_story/world/3.avif" alt="" class="traveled_story_img">
<img src="/MATERIALS/travel_story/singapore/4.avif" alt="" class="traveled_story_img">
<img src="/MATERIALS/travel_story/china/105.avif" alt="" class="traveled_story_img">
<img src="/MATERIALS/travel_story/singapore/4.avif" alt="" class="traveled_story_img">
<img src="/MATERIALS/travel_story/world/1.avif" alt="" class="traveled_story_img test">
<img src="/MATERIALS/lens-background.avif" alt="" class="traveled_story_img">
<img src="/MATERIALS/LENS/20240721_210812.avif" alt="" class="traveled_story_img">
</div>
<div class="img_area">
<img src="/MATERIALS/TRAVEL/background.png" alt="" class="traveled_story_img">
<img src="/MATERIALS/LENS/20240329_115636.avif" alt="" class="traveled_story_img">
<img src="/MATERIALS/travel_story/malaysia/180.avif" alt="" class="traveled_story_img">
<img src="/MATERIALS/travel_story/china/2.avif" alt="" class="traveled_story_img">
<img src="/MATERIALS/LENS/20240721_205048.avif" alt="" class="traveled_story_img">
<img src="/MATERIALS/travel_story/world/3.avif" alt="" class="traveled_story_img">
<img src="/MATERIALS/travel_story/singapore/4.avif" alt="" class="traveled_story_img">
<img src="/MATERIALS/travel_story/china/105.avif" alt="" class="traveled_story_img">
<img src="/MATERIALS/travel_story/singapore/4.avif" alt="" class="traveled_story_img">
<img src="/MATERIALS/travel_story/world/1.avif" alt="" class="traveled_story_img test">
<img src="/MATERIALS/lens-background.avif" alt="" class="traveled_story_img">
<img src="/MATERIALS/LENS/20240721_210812.avif" alt="" class="traveled_story_img">
</div>
</div>
</div>
</div>
</div>
</div>
Expand Down

0 comments on commit 235dc0e

Please sign in to comment.