313 lines
8.4 KiB
HTML
313 lines
8.4 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
|
||
|
|
<title>INVITATION LETTER - FIEE (HK) Limited</title>
|
||
|
|
|
||
|
|
<!-- Open Graph / Facebook -->
|
||
|
|
<meta property="og:type" content="website" />
|
||
|
|
<meta property="og:title" content="INVITATION LETTER - FIEE (HK) Limited" />
|
||
|
|
<meta property="og:description" content="We are pleased to invite you to visit and exchange at the MYDOME International Merchandise Expo in Osaka during Expo 2025. Exhibition Dates: August 26-28, 2025" />
|
||
|
|
<meta property="og:image" content="images/sharelogo.png" />
|
||
|
|
<meta property="og:image:width" content="1200" />
|
||
|
|
<meta property="og:image:height" content="630" />
|
||
|
|
|
||
|
|
<!-- Twitter -->
|
||
|
|
<meta property="twitter:card" content="summary_large_image" />
|
||
|
|
<meta property="twitter:title" content="INVITATION LETTER - FIEE (HK) Limited" />
|
||
|
|
<meta property="twitter:description" content="We are pleased to invite you to visit and exchange at the MYDOME International Merchandise Expo in Osaka during Expo 2025." />
|
||
|
|
<meta property="twitter:image" content="images/sharelogo.png" />
|
||
|
|
|
||
|
|
<!-- 微信分享 -->
|
||
|
|
<meta property="wxshare:title" content="INVITATION LETTER - FIEE (HK) Limited" />
|
||
|
|
<meta property="wxshare:desc" content="We are pleased to invite you to visit and exchange at the MYDOME International Merchandise Expo in Osaka during Expo 2025." />
|
||
|
|
<meta property="wxshare:image" content="images/sharelogo.png" />
|
||
|
|
|
||
|
|
<style>
|
||
|
|
* {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
|
|
overflow-x: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.invitation-container {
|
||
|
|
width: 100vw;
|
||
|
|
min-height: 100vh;
|
||
|
|
background-image: url('images/bg.png');
|
||
|
|
background-size: cover;
|
||
|
|
background-position: center;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
padding: 95px 40px 30px 40px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Logo部分 */
|
||
|
|
.logo-section {
|
||
|
|
position: relative;
|
||
|
|
z-index: 2;
|
||
|
|
margin-bottom: 40px;
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateY(-15px);
|
||
|
|
transition: all 0.8s ease-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
.logo-section.fade-in {
|
||
|
|
opacity: 1;
|
||
|
|
transform: translateY(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
.logo {
|
||
|
|
width: 135px;
|
||
|
|
height: 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 主要内容 */
|
||
|
|
.main-content {
|
||
|
|
flex: 1;
|
||
|
|
position: relative;
|
||
|
|
z-index: 2;
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateY(25px);
|
||
|
|
transition: all 1s ease-out 0.3s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.main-content.slide-up {
|
||
|
|
opacity: 1;
|
||
|
|
transform: translateY(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 标题部分 */
|
||
|
|
.title-section {
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.main-title {
|
||
|
|
display: block;
|
||
|
|
font-size: 40px;
|
||
|
|
font-weight: bold;
|
||
|
|
color: white;
|
||
|
|
line-height: 1.1;
|
||
|
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||
|
|
animation: glow 3s ease-in-out infinite alternate;
|
||
|
|
}
|
||
|
|
|
||
|
|
.subtitle-container {
|
||
|
|
position: relative;
|
||
|
|
margin-top: 20px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
padding-left: 15px;
|
||
|
|
background-image: url('images/subg1.png');
|
||
|
|
background-size: cover;
|
||
|
|
background-position: center;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
min-height: 30px;
|
||
|
|
min-width: 200px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.subtitle {
|
||
|
|
font-size: 16px;
|
||
|
|
color: white;
|
||
|
|
font-weight: 500;
|
||
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 内容部分 */
|
||
|
|
.content-section {
|
||
|
|
margin-bottom: 40px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.greeting {
|
||
|
|
display: block;
|
||
|
|
font-size: 18px;
|
||
|
|
color: white;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
|
||
|
|
.invitation-text {
|
||
|
|
display: block;
|
||
|
|
font-size: 18px;
|
||
|
|
color: white;
|
||
|
|
line-height: 1.6;
|
||
|
|
margin-bottom: 5px;
|
||
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.details {
|
||
|
|
margin-top: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.detail-item {
|
||
|
|
margin-bottom: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.detail-label {
|
||
|
|
display: block;
|
||
|
|
font-size: 16px;
|
||
|
|
color: white;
|
||
|
|
margin-bottom: 4px;
|
||
|
|
line-height: 1.4;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 签名部分 */
|
||
|
|
.signature-section {
|
||
|
|
margin-top: auto;
|
||
|
|
margin-right: -40px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: flex-end;
|
||
|
|
padding-right: 15px;
|
||
|
|
background-image: url('images/subg2.png');
|
||
|
|
background-size: cover;
|
||
|
|
background-position: right center;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
min-height: 30px;
|
||
|
|
min-width: 300px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.signature {
|
||
|
|
font-size: 18px;
|
||
|
|
/* font-weight: bold; */
|
||
|
|
color: white;
|
||
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 动画定义 */
|
||
|
|
@keyframes glow {
|
||
|
|
from {
|
||
|
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
text-shadow: 0 2px 10px rgba(255, 255, 255, 0.3), 0 2px 4px rgba(0, 0, 0, 0.1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="invitation-container">
|
||
|
|
<!-- Logo -->
|
||
|
|
<div class="logo-section" id="logoSection">
|
||
|
|
<img
|
||
|
|
src="images/logo.png"
|
||
|
|
class="logo"
|
||
|
|
alt="FIEE Logo"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 主要内容 -->
|
||
|
|
<div class="main-content" id="mainContent">
|
||
|
|
<!-- 标题部分 -->
|
||
|
|
<div class="title-section">
|
||
|
|
<div class="main-title">INVITATION</div>
|
||
|
|
<div class="main-title">LETTER</div>
|
||
|
|
<div class="subtitle-container">
|
||
|
|
<div class="subtitle">·Looking forward to coming</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 邀请内容 -->
|
||
|
|
<div class="content-section">
|
||
|
|
<div class="greeting">Dear Sir/Madam:</div>
|
||
|
|
|
||
|
|
<div class="invitation-text">
|
||
|
|
We are pleased to invite you to visit and exchange at the MYDOME International Merchandise Expo in Osaka during Expo 2025.
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="details">
|
||
|
|
<div class="detail-item">
|
||
|
|
<div class="detail-label">EXHIBITION DATES: August 26—28,2025</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="detail-item">
|
||
|
|
<div class="detail-label">HOURS: Aug 26—27,10:00—17:00;Aug 28,10:00—16:00</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="detail-item">
|
||
|
|
<div class="detail-label">VENUE: MYDOME OSAKA</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="detail-item">
|
||
|
|
<div class="detail-label">ADDRESS: 2—5 Honmachibashi,Chuo-ku,Osaka</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 底部签名 -->
|
||
|
|
<div class="signature-section">
|
||
|
|
<div class="signature">FIEE (HK) Limited</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// 页面加载完成后执行动画
|
||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
||
|
|
// 延迟显示内容，创建入场动画效果
|
||
|
|
setTimeout(function() {
|
||
|
|
const logoSection = document.getElementById('logoSection');
|
||
|
|
const mainContent = document.getElementById('mainContent');
|
||
|
|
|
||
|
|
if (logoSection) {
|
||
|
|
logoSection.classList.add('fade-in');
|
||
|
|
}
|
||
|
|
|
||
|
|
if (mainContent) {
|
||
|
|
mainContent.classList.add('slide-up');
|
||
|
|
}
|
||
|
|
}, 300);
|
||
|
|
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// 分享功能 (可选)
|
||
|
|
function shareInvitation() {
|
||
|
|
if (navigator.share) {
|
||
|
|
navigator.share({
|
||
|
|
title: 'INVITATION LETTER - FIEE (HK) Limited',
|
||
|
|
text: 'We are pleased to invite you to visit and exchange at the MYDOME International Merchandise Expo in Osaka during Expo 2025.',
|
||
|
|
url: window.location.href
|
||
|
|
}).catch(console.error);
|
||
|
|
} else {
|
||
|
|
// 回退方案：复制链接到剪贴板
|
||
|
|
navigator.clipboard.writeText(window.location.href).then(function() {
|
||
|
|
alert('邀请函链接已复制到剪贴板');
|
||
|
|
}).catch(function() {
|
||
|
|
console.log('复制失败');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 防止页面缩放
|
||
|
|
document.addEventListener('touchstart', function(event) {
|
||
|
|
if (event.touches.length > 1) {
|
||
|
|
event.preventDefault();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
let lastTouchEnd = 0;
|
||
|
|
document.addEventListener('touchend', function(event) {
|
||
|
|
const now = (new Date()).getTime();
|
||
|
|
if (now - lastTouchEnd <= 300) {
|
||
|
|
event.preventDefault();
|
||
|
|
}
|
||
|
|
lastTouchEnd = now;
|
||
|
|
}, false);
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|