fix

routes/v2/share.js

@@ -46,7 +46,7 @@ router.get('/:id', function (req, res, next) {
     }
 
     // 渲染EJS模板到内存中
-    res.render('v2/share', data, async (err, html) => {
+    res.render('v2/share-simple', data, async (err, html) => {
       if (err) {
         // 如果渲染出错，调用next()传递错误
         return next(err);

views/v2/share copy.ejs → views/v2/share-simple.ejs

@@ -37,9 +37,6 @@
   <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
   <link rel="apple-touch-icon" sizes="180x180" href="/assets/icon/icon.png">
 
-  <script type="module" crossorigin src="/assets/share-DDyw1eeR.js"></script>
-  <link rel="modulepreload" crossorigin href="/assets/modulepreload-polyfill-B5Qt9EMX.js">
-  <link rel="modulepreload" crossorigin href="/assets/WorkLayer-RuTV64WF.js">
 
   <style>
     :root {
@@ -56,7 +53,7 @@
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
       display: flex;
       flex-direction: column;
-      height: 100vh;
+      height: 92vh;
       margin: 0;
       box-sizing: border-box;
       background-color: var(--background-color);
@@ -65,15 +62,16 @@
       align-items: center;
     }
 
+    /* 头部容器 */
     .header-container {
       width: 100%;
-      height: 20vh;
       margin-top: 10px;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
+      z-index: 100;
     }
 
     .app-icon {
@@ -85,8 +83,8 @@
     }
 
     .app-icon img {
-      width: auto;
-      height: 100%;
+      width: 64px;
+      height: 64px;
       border: 3px solid #eeeeee;
       border-radius: 10px;
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
@@ -94,6 +92,7 @@
     }
 
     .app-title {
+      color: var(--text-color);
       font-size: 1.8rem;
       font-weight: 700;
       margin-bottom: 15px;
@@ -101,48 +100,87 @@
       text-align: center;
     }
 
-    /* 图片容器 - 关键优化部分 */
+    /* 父容器，用于包裹图片和 Canvas，并使其相对定位 */
     .image-canvas-container {
       position: relative;
       max-width: 90%;
-      display: block;
-      margin: 0 auto;
+      height: auto;
+      display: inline-block;
       box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
       border-radius: 12px;
       overflow: hidden;
-      background-color: #f0f0f0;
-      /* 初始占位样式，会被JS动态修改 */
-      width: 100%;
-      height: 0;
-      padding-bottom: 75%;
-      /* 默认4:3比例，会被JS动态调整 */
     }
 
-    .image-canvas-container img,
-    .image-canvas-container canvas {
+    /* 占位容器：全屏覆盖 */
+    .image-placeholder {
       position: absolute;
       top: 0;
       left: 0;
+      height: 100%;
       width: 100%;
+      background-color: var(--background-color);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 20;
+      /* 位于 canvas 之上，图片之下 */
+    }
+
+    /* 简单的加载动画（旋转圆圈） */
+    .loading-spinner {
+      width: 40px;
+      height: 40px;
+      border: 4px solid #ddd;
+      border-top: 4px solid var(--primary-color);
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+    }
+
+    @keyframes spin {
+      0% {
+        transform: rotate(0deg);
+      }
+
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+
+    /* 图片样式：使其响应式并填充容器 */
+    .image-canvas-container img {
+      position: relative;
+      display: block;
+      max-width: 100%;
       height: 100%;
       object-fit: contain;
       border-radius: 12px;
+      z-index: 100;
     }
 
-    .image-canvas-container img {
+    /* 图片加载前隐藏，避免破碎的加载体验 */
+    #poster-img {
       opacity: 0;
       transition: opacity 0.3s ease;
-      z-index: 100;
+      /* 加载完成后淡入 */
     }
 
-    .image-canvas-container img.loaded {
+    /* 图片加载完成后显示 */
+    #poster-img.loaded {
       opacity: 1;
     }
 
+    /* Canvas 样式：绝对定位，与图片完全重叠 */
     .image-canvas-container canvas {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border-radius: 12px;
       z-index: 50;
     }
 
+    /* 按钮容器在底部 */
     .buttons {
       width: 100%;
       max-width: 550px;
@@ -153,8 +191,10 @@
       align-items: center;
       margin-top: 30px;
       flex-shrink: 0;
+      z-index: 100;
     }
 
+
     .btn {
       display: inline-block;
       min-width: 180px;
@@ -199,7 +239,7 @@
       align-items: center;
       justify-content: center;
       transition: all 0.3s ease;
-      z-index: 110;
+      z-index: 0;
     }
 
     .play-button:hover {
@@ -217,40 +257,7 @@
       margin-left: 5px;
     }
 
-    /* 加载占位符样式 */
-    .image-placeholder {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-color: #f0f0f0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      z-index: 20;
-    }
-
-    .loading-spinner {
-      width: 40px;
-      height: 40px;
-      border: 4px solid #ddd;
-      border-top: 4px solid var(--primary-color);
-      border-radius: 50%;
-      animation: spin 1s linear infinite;
-    }
-
-    @keyframes spin {
-      0% {
-        transform: rotate(0deg);
-      }
-
-      100% {
-        transform: rotate(360deg);
-      }
-    }
-
-    /* 微信引导层样式 */
+    /* MARK: 微信引导层样式 */
     .wechat-guide-overlay {
       position: fixed;
       top: 0;
@@ -258,8 +265,11 @@
       width: 100%;
       height: 100%;
       background-color: rgba(0, 0, 0, 0.75);
+      /* 半透明黑色背景 */
       z-index: 9999;
+      /* 确保在最上层 */
       display: none;
+      /* 默认隐藏 */
       justify-content: center;
       align-items: center;
       color: white;
@@ -272,26 +282,31 @@
 
     .wechat-guide-overlay.active {
       display: flex;
+      /* 显示引导层 */
     }
 
     .wechat-guide-arrow {
       position: absolute;
       top: 10px;
+      /* 箭头位置靠近右上角 */
       right: 20px;
       width: 80px;
       height: 80px;
       background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" transform="rotate(90 12 12)"/></svg>') no-repeat center center;
       background-size: contain;
       transform: rotate(90deg);
+      /* 旋转箭头指向右下 */
     }
 
     .wechat-guide-text {
       margin-top: 100px;
+      /* 留出箭头空间 */
       line-height: 1.8;
     }
 
     .wechat-guide-text strong {
       color: var(--accent-color);
+      /* 突出显示关键文字 */
     }
 
     @media (max-width: 768px) {
@@ -307,98 +322,35 @@
       }
     }
   </style>
-
-  <!-- 预加载图片尺寸的脚本 -->
-  <script>
-    // 从模板获取图片URL
-    const imageUrl = "<%= imageUrl %>";
-
-    // 预加载图片获取尺寸信息
-    function preloadImageDimensions() {
-      return new Promise((resolve, reject) => {
-        const tempImg = new Image();
-
-        // 仅加载图片元数据（尺寸）
-        tempImg.src = imageUrl;
-
-        tempImg.onload = () => {
-          resolve({
-            width: tempImg.naturalWidth,
-            height: tempImg.naturalHeight
-          });
-        };
-
-        tempImg.onerror = () => {
-          reject(new Error('Failed to load image dimensions'));
-        };
-      });
-    }
-
-    // 设置容器尺寸
-    function setContainerDimensions(width, height) {
-      const container = document.querySelector('.image-canvas-container');
-      if (!container) return;
-
-      const aspectRatio = width / height;
-      // 使用padding-bottom设置宽高比，确保容器尺寸正确
-      container.style.paddingBottom = (100 / aspectRatio) + '%';
-      container.style.backgroundColor = 'transparent';
-    }
-
-    // 执行预加载
-    preloadImageDimensions()
-      .then(dimensions => {
-        setContainerDimensions(dimensions.width, dimensions.height);
-      })
-      .catch(error => {
-        console.log('Using default dimensions due to error:', error);
-        // 失败时使用默认比例
-        const container = document.querySelector('.image-canvas-container');
-        if (container) {
-          container.style.paddingBottom = '75%'; // 默认4:3
-        }
-      });
-  </script>
 </head>
 
-<body>
-  <!-- Google tag (gtag.js) -->
-  <script async src="https://www.googletagmanager.com/gtag/js?id=G-JBGGVGLHTP"></script>
-  <script>
-    window.dataLayer = window.dataLayer || [];
-    function gtag() { dataLayer.push(arguments); }
-    gtag('js', new Date());
-    gtag('config', 'G-JBGGVGLHTP');
-  </script>
+<!-- Google tag (gtag.js) -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=G-JBGGVGLHTP"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag() { dataLayer.push(arguments); }
+  gtag('js', new Date());
+  gtag('config', 'G-JBGGVGLHTP');
+</script>
 
-  <div class="header-container">
+<body>
+  <div id="header" class="header-container">
     <div class="app-icon">
-      <img src="/assets/icon/logo_640x640.webp" alt="Art Color App Logo">
-    </div>
-    <div class="app-title">🎨 ArtColor 🎨</div>
-  </div>
-
-  <div class="image-canvas-container">
-    <!-- 加载占位符 -->
-    <div class="image-placeholder" id="imagePlaceholder">
-      <div class="loading-spinner"></div>
+      <a href="/"><img src="/assets/icon/logo_640x640.webp" alt="Art Color App Logo"></a>
     </div>
-
-    <img id="poster-img" src="<%= imageUrl %>" alt="Art Color" />
-    <canvas id="canvas"></canvas>
-    <div id="play-button" class="play-button"></div>
+    <div class="app-title">Art Color</div>
   </div>
 
-  <div class="buttons">
-    <a href="<%= applink %>" target="_blank" class="btn btn-primary">
-      Claim Bonus
+  <div id="buttons" class="buttons">
+    <a href="<%= openapplink %>" target="_blank" class="btn btn-primary">
+      <%= translate.colorNow[lang] %>
     </a>
     <a href="<%= downlink %>" class="btn btn-secondary">
       <%= translate.downloadApp[lang] %>
     </a>
   </div>
 
-  <!-- 微信引导层 -->
+  <!-- MARK: 微信引导层 -->
   <div id="wechat-guide-overlay" class="wechat-guide-overlay">
     <div class="wechat-guide-arrow" onclick="closeOverlay()"></div>
     <p class="wechat-guide-text">
@@ -409,29 +361,10 @@
   </div>
 
   <script>
-    // 图片加载完成处理
-    const posterImg = document.getElementById('poster-img');
-    const imagePlaceholder = document.getElementById('imagePlaceholder');
-
-    posterImg.onload = function () {
-      // 图片加载完成后显示
-      posterImg.classList.add('loaded');
-      // 隐藏占位符
-      if (imagePlaceholder) {
-        imagePlaceholder.style.display = 'none';
-      }
-    };
-
-    // 图片加载失败处理
-    posterImg.onerror = function () {
-      if (imagePlaceholder) {
-        imagePlaceholder.innerHTML = '<p style="color: #666;">图片加载失败</p>';
-      }
-    };
 
-    // 微信环境检测
     const wechatGuideOverlay = document.getElementById('wechat-guide-overlay');
 
+    // MARK: 微信环境检测
     function isWeChatBrowser() {
       const ua = window.navigator.userAgent.toLowerCase();
       return ua.includes('micromessenger');
@@ -445,8 +378,9 @@
       wechatGuideOverlay.classList.add('active');
       console.log("检测到微信浏览器，显示引导层。");
     } else {
-      wechatGuideOverlay.classList.remove('active');
+      wechatGuideOverlay.classList.remove('active'); // 确保隐藏
     }
+
   </script>
 </body>