Skip to content

Commit

Permalink
Update
Browse files Browse the repository at this point in the history
  • Loading branch information
@SeeChen
SeeChen committed Nov 2, 2024
1 parent 1e57f0d commit 7c8a0d8
Show file tree
Hide file tree
Showing 6 changed files with 193 additions and 122 deletions.
77 changes: 77 additions & 0 deletions CSS/travel/footprint_province.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
#travel_story_title_province {
color: #CCC;
}

#content_province_title {
text-align: center;
width: 80%;
margin: auto;
font-size: 5em;
font-family: "bailufeiyunshouxieti";
color: #888;
margin-top: 1em;
}

#box_content_province ul {
padding: 0;
list-style: none;
width: 85%;
margin: 5em auto;
margin-bottom: 10em;
}

#box_content_province li {
float: left;
margin: 1.5em 0.5em;
height: 16em;
}

#box_content_province .hex {
overflow: hidden;
display: block;
width: 21em;
height: 24em;
transform: rotate(-60deg) skewY(30deg);
pointer-events: none;
}

#box_content_province .hexIn {
background-color: #ccc;
display: block;
width: 21em;
height: 24em;
line-height: 24em;
text-align: center;
transform: skewY(-30deg) rotate(60deg);
transition: all 0.5s;
cursor: pointer;
box-shadow: 2px 2px 5px #000;
pointer-events: all;
}

#box_content_province .hexIn:hover div {
top: 0;
}

#box_content_province .hexIn div {
position: absolute;
background: #CCCCCCCC;
height: 100%;
width: 100%;
top: -100%;
transition: all 0.5s;
}

#box_content_province .hexIn div p:first-child {
font-size: 2em;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}

#box_content_province li:nth-child(6n + 4) {
margin-left: 11.5em;
}
8 changes: 7 additions & 1 deletion JS/TRAVEL/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ window.onload = function() {

window.previousClick = previousClick;
window.traveledClick = traveledClick;
window.img_click = img_click;

language.loadPageLanguage(url_lang, language.getLanguage());
language.loadPageLanguage(nationa_name, language.getLanguage());
Expand All @@ -50,6 +51,11 @@ window.onload = function() {
})
}

function img_click(obj) {

console.log(obj);
}

function travelStoryScroll() {

$('#my_travel_story').scroll(function() {
Expand Down Expand Up @@ -299,7 +305,7 @@ function worldMapsAction() {
}

$('#footpring_content_img_area').html( $('#footpring_content_img_area').html() +
`<div class="footprint_content_img" style="
`<div class="footprint_content_img" onclick="img_click(this)" style="
background-image: url(${img_list[_i]['url']});
background-size: cover;
background-position: center;
Expand Down
56 changes: 55 additions & 1 deletion JS/TRAVEL/national.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,11 @@ export class currentNational {
}
}

export function province_img(obj) {

console.log(obj)
}

export function nationalMapsAction(country_object) {

if (country_object.get_currentNational === 'worlds') {
Expand Down Expand Up @@ -71,7 +76,56 @@ export function nationalMapsAction(country_object) {

element.addEventListener('click', () => {


$('#travel_story_close_btn').on('click', function() {

setTimeout(() => {

$('.display_in_more:eq(0)').removeClass('display_in_more');
$(`#travel_story_title_${country_object.get_currentNational()}`).addClass('display_in_more');
$('.display_story_content:eq(0)').removeClass('display_story_content');
$(`#box_footprint_content`).addClass('display_story_content');
}, 500);
});

$('#my_travel_story').css('top', 0);

$('.display_in_more:eq(0)').removeClass('display_in_more');
$('#travel_story_title_province').addClass('display_in_more');

$('.display_story_content:eq(0)').removeClass('display_story_content');
$(`#box_content_province`).addClass('display_story_content');

$.getJSON(`/JSON/LANGUAGE/Country/travel_national_${country_object.get_currentNational()}.json`, function(province_name) {

$('#travel_story_title_province').text(province_name[language.getLanguage()][0][element.id]);
$('#content_province_title').text(province_name[language.getLanguage()][0][element.id]);
});

$.getJSON(`/JSON/LANGUAGE/${country_object.get_currentNational()}/${element.id}.json`, function(img_data) {

var img_show = '';
for (let _i = 0; _i < img_data['img-path'].length; _i++) {

img_show += `
<li>
<span class="hex">
<span class="hexIn" onclick="img_click(this)" style="
background: url(${img_data['img-path'][_i]['url']});
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: relative;
">
<div>
<p>title</p>
</div>
</span>
</span>
</li>
`;
}
$('#box_content_province ul').html(`${img_show}<div style="clear: both;"></div>`);
});
})
});
}
29 changes: 29 additions & 0 deletions JSON/LANGUAGE/CN/BeiJing.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
{
"img-path": [{
"url": "/MATERIALS/travel_story/world/0.avif"
}, {
"url": "/MATERIALS/travel_story/world/1.avif"
}, {
"url": "/MATERIALS/travel_story/world/2.avif"
}, {
"url": "/MATERIALS/travel_story/world/3.avif"
}, {
"url": "/MATERIALS/travel_story/world/4.avif"
}, {
"url": "/MATERIALS/travel_story/world/5.avif"
}, {
"url": "/MATERIALS/travel_story/world/6.avif"
}, {
"url": "/MATERIALS/travel_story/world/0.avif"
}, {
"url": "/MATERIALS/travel_story/world/1.avif"
}, {
"url": "/MATERIALS/travel_story/world/2.avif"
}, {
"url": "/MATERIALS/travel_story/world/3.avif"
}, {
"url": "/MATERIALS/travel_story/world/4.avif"
}, {
"url": "/MATERIALS/travel_story/world/5.avif"
}]
}
17 changes: 17 additions & 0 deletions JSON/LANGUAGE/CN/TianJin.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
{
"img-path": [{
"url": "/MATERIALS/travel_story/world/0.avif"
}, {
"url": "/MATERIALS/travel_story/world/1.avif"
}, {
"url": "/MATERIALS/travel_story/world/2.avif"
}, {
"url": "/MATERIALS/travel_story/world/3.avif"
}, {
"url": "/MATERIALS/travel_story/world/4.avif"
}, {
"url": "/MATERIALS/travel_story/world/5.avif"
}, {
"url": "/MATERIALS/travel_story/world/6.avif"
}]
}
128 changes: 8 additions & 120 deletions Travel/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
<link rel = "stylesheet" href="../CSS/General/font_face.css" type="text/css">
<link rel = "stylesheet" href="../CSS/travel/foot_print_world.css" type="text/css">
<link rel = "stylesheet" href="../CSS/travel/footprint_country.css" type="text/css">
<link rel = "stylesheet" href="../CSS/travel/footprint_province.css" type="text/css">

<script src="/JS/TRAVEL/footprint_world.js" type="text/javascript"></script>

Expand Down Expand Up @@ -63,6 +64,8 @@
<p id="travel_story_title_MY" class="story_title _switch_lang_" lang_obj="_story_title_malaysia_"></p>
<p id="travel_story_title_SG" class="story_title _switch_lang_" lang_obj="_story_title_singapore_"></p>

<p id="travel_story_title_province" class="story_title"></p>

<div id="en_box_footprint_world" class="normal_story_content">
<h1>HEY, THERE</h1>
<p class="en_box_footprint_world_welcome">welcome to my</p>
Expand Down Expand Up @@ -222,129 +225,14 @@ <h1>您好！</h1>

<p id="footprint_content_description">Description</p>

<div id="footpring_content_img_area">
<!-- <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 id="footpring_content_img_area"></div>
</div>

<!-- <div id="en_box_footprint_CN" class="normal_story_content">
<div id="country_header">
<p>CHINA</p>
</div>
<p id="conutry_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.</p>
<div id="country_img_area">
<div class="country_img" style="
background-image: url(/MATERIALS/travel_story/world/0.avif);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
">
<div>
<p>Title</p>
<p>city, province, country.</p>
<p><span>Label 1</span><span>Label 2</span><span>Label 3</span><span>Label 4</span><span>Label 5</span><span>Label 5</span><span>Label 7</span></p>
<p>Description Description Description</p>
</div>
</div>
<div class="country_img" style="
background-image: url(/MATERIALS/travel_story/world/1.avif);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
">
<div>
<p>Title</p>
<p>city, province, country.</p>
<p><span>Label 1</span><span>Label 2</span><span>Label 3</span><span>Label 4</span><span>Label 5</span><span>Label 5</span><span>Label 7</span></p>
</div>
</div>
<div class="country_img" style="
background-image: url(/MATERIALS/travel_story/world/2.avif);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
">
<div>
<p>Title</p>
<p>city, province, country.</p>
<p><span>Label 1</span><span>Label 2</span><span>Label 3</span><span>Label 4</span><span>Label 5</span><span>Label 5</span><span>Label 7</span></p>
</div>
</div>
<div class="country_img" style="
background-image: url(/MATERIALS/travel_story/world/3.avif);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
">
<div>
<p>Title</p>
<p>city, province, country.</p>
<p><span>Label 1</span><span>Label 2</span><span>Label 3</span><span>Label 4</span><span>Label 5</span><span>Label 5</span><span>Label 7</span></p>
</div>
</div>
<div class="country_img" style="
background-image: url(/MATERIALS/travel_story/world/4.avif);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
">
<div>
<p>Title</p>
<p>city, province, country.</p>
<p><span>Label 1</span><span>Label 2</span><span>Label 3</span><span>Label 4</span><span>Label 5</span><span>Label 5</span><span>Label 7</span></p>
</div>
</div>
<div class="country_img" style="
background-image: url(/MATERIALS/travel_story/world/5.avif);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
">
<div>
<p>Title</p>
<p>city, province, country.</p>
<p><span>Label 1</span><span>Label 2</span><span>Label 3</span><span>Label 4</span><span>Label 5</span><span>Label 5</span><span>Label 7</span></p>
</div>
</div>
<div class="country_img" style="
background-image: url(/MATERIALS/travel_story/world/6.avif);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
">
<div>
<p>Title</p>
<p>city, province, country.</p>
<p><span>Label 1</span><span>Label 2</span><span>Label 3</span><span>Label 4</span><span>Label 5</span><span>Label 5</span><span>Label 7</span></p>
</div>
</div>
</div>
</div>
<div id="zh_box_footprint_CN" class="normal_story_content">
中国
</div>
<div id="en_box_footprint_MY" class="normal_story_content">
Malaysia
</div>
<div id="zh_box_footprint_MY" class="normal_story_content">
马来西亚
</div>
<div id="en_box_footprint_SG" class="normal_story_content">
Singapore
<div id="box_content_province" class="normal_story_content">
<p id="content_province_title"></p>

<ul></ul>
</div>
<div id="zh_box_footprint_SG" class="normal_story_content">
新加坡
</div> -->
</div>
</body>
</html>

0 comments on commit 7c8a0d8

Please sign in to comment.