first commit
This commit is contained in:
齐斌
commit
61a68ac84e
99
README.md
Normal file
99
README.md
Normal file
@ -0,0 +1,99 @@
|
|||||||
|
# H5 邀请函项目
|
||||||
|
|
||||||
|
这是一个优雅的H5邀请函项目，专为微信分享优化，支持小卡片形式的分享。
|
||||||
|
|
||||||
|
## 功能特点
|
||||||
|
|
||||||
|
- 📱 响应式设计，完美适配移动端
|
||||||
|
- 🎨 优雅的渐变背景和动画效果
|
||||||
|
- 💫 飘落动画和交互反馈
|
||||||
|
- 📤 微信分享优化（小卡片显示）
|
||||||
|
- ✨ 确认参加功能
|
||||||
|
- 🎉 庆祝动画效果
|
||||||
|
- 📋 一键复制分享链接
|
||||||
|
|
||||||
|
## 文件结构
|
||||||
|
|
||||||
|
```
|
||||||
|
expo-invite/
|
||||||
|
├── index.html # 主页面文件
|
||||||
|
├── style.css # 样式文件
|
||||||
|
├── script.js # 交互脚本
|
||||||
|
├── manifest.json # PWA配置文件
|
||||||
|
├── images/ # 图片资源文件夹
|
||||||
|
└── README.md # 说明文档
|
||||||
|
```
|
||||||
|
|
||||||
|
## 使用方法
|
||||||
|
|
||||||
|
1. **直接使用**：将所有文件上传到Web服务器即可使用
|
||||||
|
2. **本地预览**：使用本地服务器（如Live Server）预览效果
|
||||||
|
3. **微信分享**：在微信中打开链接，点击右上角分享
|
||||||
|
|
||||||
|
## 自定义配置
|
||||||
|
|
||||||
|
### 修改邀请函内容
|
||||||
|
|
||||||
|
编辑 `index.html` 文件中的以下部分：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!-- 活动时间 -->
|
||||||
|
<div class="info-value">2024年12月25日 18:00</div>
|
||||||
|
|
||||||
|
<!-- 活动地点 -->
|
||||||
|
<div class="info-value">北京市朝阳区某某酒店</div>
|
||||||
|
|
||||||
|
<!-- 联系方式 -->
|
||||||
|
<span class="contact-value">138-0000-0000</span>
|
||||||
|
<span class="contact-value">event@example.com</span>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 修改分享信息
|
||||||
|
|
||||||
|
在 `index.html` 的 `<head>` 部分修改：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<meta property="og:title" content="您的邀请函标题">
|
||||||
|
<meta property="og:description" content="您的邀请函描述">
|
||||||
|
<meta property="og:image" content="./images/share-image.jpg">
|
||||||
|
```
|
||||||
|
|
||||||
|
### 自定义样式
|
||||||
|
|
||||||
|
编辑 `style.css` 文件来修改：
|
||||||
|
- 颜色主题（搜索 `#667eea` 和 `#764ba2`）
|
||||||
|
- 字体大小和间距
|
||||||
|
- 动画效果
|
||||||
|
|
||||||
|
## 微信分享优化
|
||||||
|
|
||||||
|
项目已经配置了微信分享的meta标签，确保：
|
||||||
|
|
||||||
|
1. 将 `share-image.jpg` 放置在 `images` 文件夹中
|
||||||
|
2. 图片尺寸建议为 300x300 像素
|
||||||
|
3. 确保图片链接可公网访问
|
||||||
|
|
||||||
|
## 浏览器兼容性
|
||||||
|
|
||||||
|
- ✅ iOS Safari 10+
|
||||||
|
- ✅ Android Chrome 60+
|
||||||
|
- ✅ 微信内置浏览器
|
||||||
|
- ✅ QQ浏览器
|
||||||
|
- ✅ UC浏览器
|
||||||
|
|
||||||
|
## 注意事项
|
||||||
|
|
||||||
|
1. 确保在HTTPS环境下使用以获得最佳体验
|
||||||
|
2. 微信分享图片需要可公网访问
|
||||||
|
3. 某些功能在本地文件系统中可能受限
|
||||||
|
|
||||||
|
## 技术栈
|
||||||
|
|
||||||
|
- HTML5
|
||||||
|
- CSS3 (Flexbox, Grid, Animations)
|
||||||
|
- Vanilla JavaScript
|
||||||
|
- PWA支持
|
||||||
|
|
||||||
|
## 许可证
|
||||||
|
|
||||||
|
MIT License
|
||||||
BIN
images/bg.png
Normal file
BIN
images/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 MiB |
BIN
images/logo.png
Normal file
BIN
images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
BIN
images/sharelogo.png
Normal file
BIN
images/sharelogo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
BIN
images/subg1.png
Normal file
BIN
images/subg1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
BIN
images/subg2.png
Normal file
BIN
images/subg2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 111 KiB |
312
index.html
Normal file
312
index.html
Normal file
@ -0,0 +1,312 @@
|
|||||||
|
<!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>
|
||||||
22
manifest.json
Normal file
22
manifest.json
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
{
|
||||||
|
"name": "邀请函 H5",
|
||||||
|
"short_name": "邀请函",
|
||||||
|
"description": "优雅的H5邀请函，支持微信分享",
|
||||||
|
"start_url": "./index.html",
|
||||||
|
"display": "standalone",
|
||||||
|
"background_color": "#667eea",
|
||||||
|
"theme_color": "#764ba2",
|
||||||
|
"orientation": "portrait",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "./images/icon-192.png",
|
||||||
|
"sizes": "192x192",
|
||||||
|
"type": "image/png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "./images/icon-512.png",
|
||||||
|
"sizes": "512x512",
|
||||||
|
"type": "image/png"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user