first commit

2025-08-15 18:14:14 +08:00 · 2025-08-15 18:14:14 +08:00 · 61a68ac84e
commit 61a68ac84e
8 changed files with 433 additions and 0 deletions
--- a/README.md
+++ b/README.md
@ -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
--- a/images/bg.png
+++ b/images/bg.png
--- a/images/logo.png
+++ b/images/logo.png
--- a/images/sharelogo.png
+++ b/images/sharelogo.png
--- a/images/subg1.png
+++ b/images/subg1.png
--- a/images/subg2.png
+++ b/images/subg2.png
--- a/index.html
+++ b/index.html
@ -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>
--- a/manifest.json
+++ b/manifest.json
@ -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"
+    }
+  ]
+}