Skip to content

Commit

Permalink
Update
Browse files Browse the repository at this point in the history
  • Loading branch information
@SeeChen
SeeChen committed Oct 5, 2024
1 parent 3b8d7d0 commit 437a2ce
Show file tree
Hide file tree
Showing 6 changed files with 123 additions and 7 deletions.
5 changes: 5 additions & 0 deletions CSS/General/font_face.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,4 +31,9 @@
@font-face {
font-family: "aabairimengxiangjia";
src: url(../../MATERIALS/font/aabairimengxiangjia.ttf);
}

@font-face {
font-family: "GenJyuuGothic-Normal";
src: url(../../MATERIALS/font/GenJyuuGothic-Normal.ttf);
}
77 changes: 71 additions & 6 deletions CSS/index/lens.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,16 +35,16 @@
}

#lens_details > #details_btn_quit {
width: 6em;
height: 3em;
font-size: 1em;
width: 5em;
height: 2em;
font-size: 0.75em;
position: absolute;
left: 1em;
top: 1em;
left: 2em;
top: 2em;
margin: auto;
background: #888;
text-align: center;
line-height: 3em;
line-height: 2em;
border-radius: 10em;
color: #FFF;
cursor: pointer;
Expand All @@ -53,6 +53,65 @@
opacity: 0;
}

#lens_details #details_img_name {
width: 100%;
text-align: center;
color: #CCC;
font-size: 1.2em;
height: 3em;
line-height: 3em;
opacity: 0;
}

#lens_details #details_watermark {
position: absolute;
/* bottom: 2em; */
width: 45vw;
opacity: 0;
left: 0;
right: 0;
margin: auto;
text-align: center;
color: #CCC;
font-family: "GenJyuuGothic-Normal";
table-layout: fixed;
transform: scale(0.75);
}

#lens_details .details_left {
text-align: left;
}

#lens_details #details_model_name {
font-size: 1.15em;
}

#lens_details #details_date_time {
font-size: 0.8em;
}

#lens_details #details_parameter {
font-size: 1.05em;
}

#lens_details #details_coordinate{
font-size: 0.85em;
}

#details_logo {
text-align: right;
height: 100%;
max-height: 100%;
border-right: #fff solid 0.05em;
}

#details_logo img {
height: 100%;
width: auto;
max-width: 25%;
padding-right: 0.5em;
}

#lens-top-bar {
height: 100%;
position: relative;
Expand Down Expand Up @@ -189,4 +248,10 @@
width: 99%;
grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
}
#lens_details #details_watermark {
width: 80vw;
transform: scale(1);
font-size: 0.5em;
right: 0;
}
}
36 changes: 35 additions & 1 deletion JS/INDEX/lens.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ function lensClick(obj, str_img_data, currentIndex) {

$('#lens_details').css('pointer-events', 'auto')
$('#lens_details > div:first-child').css('pointer-events', 'auto')

$('#details_btn_quit').css('opacity', 1)

$('#navigation_bar').css('bottom', '-5em')
Expand All @@ -135,18 +135,49 @@ function lensClick(obj, str_img_data, currentIndex) {
img_height = img_data['height']
img_width = img_data['width']

$('#details_img_name').text(img_data['name']);
$('#details_img_name').css('opacity', '1');

$('#details_watermark').css('opacity', 1)
$('#details_model_name').text(img_data['camera-model']);
$('#details_date_time').text(`${img_data['date']} ${img_data['time']}`);
$('#details_parameter').html(
`  
${img_data['focal-length']}   ${img_data['f-stop']}   ${img_data['exposure-time']}   ${img_data['iso-speed'].replace('-', ' ')}
`
);
$('#details_coordinate').html(
`  
${img_data['longitude'].toFixed(4)},    ${img_data['latitude'].toFixed(4)}
`
);
$('#details_logo').html(
`<img src="../MATERIALS/COMPANYLOGO/${img_data['camera-make']}.png"/>`
)

const media_width_750 = window.matchMedia('(max-width: 750px)')
if(media_width_750.matches) {

$('#lens_details > div:first-child').css('transform', 'scale(2)')
if (img_height >= img_width) {

$('#details_watermark').css('bottom', '10em')
} else {

$('#details_watermark').css('bottom', '30em')
}
} else {

if (img_height >= img_width) {

$('#lens_details > div:first-child').css('transform', 'scale(1.75)')
$('#details_watermark').css('bottom', '2em')
$('#details_watermark').css('transform', 'scale(0.6)')
} else {

$('#lens_details > div:first-child').css('transform', 'scale(2.5)')
$('#details_watermark').css('bottom', '5em')
$('#details_watermark').css('transform', 'scale(0.75)')
}
}
}
Expand Down Expand Up @@ -183,7 +214,10 @@ function quitDetails() {
$('#lens_details').css('pointer-events', 'none')
$('#lens_details > div:first-child').css('pointer-events', 'none')

$('#details_img_name').css('opacity', 0);

$('#details_btn_quit').css('opacity', 0)
$('#details_watermark').css('opacity', 0)

$('#navigation_bar').css('bottom', '1em')
const media_width_750 = window.matchMedia('(max-width: 750px)')
Expand Down
Binary file added MATERIALS/COMPANYLOGO/HUAWEI.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added MATERIALS/font/GenJyuuGothic-Normal.ttf
View file
Binary file not shown.
12 changes: 12 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,18 @@
<div></div>
<span id="current_index"></span>
<p id="details_btn_quit" class="_switch_lang_" lang_obj="_quit_" onclick="quitDetails()">_quit_</p>
<p id="details_img_name"></p>
<table id="details_watermark">
<tr>
<td id="details_model_name" class="details_left" colspan="2">_model_name_</td>
<td id="details_logo" colspan="2" rowspan="2"></td>
<td id="details_parameter" class="details_left" colspan="3"></td>
</tr>
<tr>
<td id="details_date_time" class="details_left" colspan="2">_date_ _time_</td>
<td id="details_coordinate" class="details_left" colspan="3"></td>
</tr>
</table>
</div>
<div id="lens-top-bar">
<p class="_switch_lang_" lang_obj="_seechen_lens_">_seechen_lens_</p>
Expand Down

0 comments on commit 437a2ce

Please sign in to comment.