|
|
@@ -17,26 +17,35 @@
|
|
|
<meta name="description" content="<%= translate.colorRelex[lang] %>">
|
|
|
<meta name="keywords" content="color, paint, app, ios, android, game">
|
|
|
|
|
|
+
|
|
|
<meta property="og:site_name" content="art.pcoloring.com">
|
|
|
<meta property="og:title" content="Art Color">
|
|
|
<meta property="og:description" content="<%= translate.colorRelex[lang] %>">
|
|
|
<meta property="og:image" content="<%= imageUrl %>">
|
|
|
<meta property="og:type" content="website">
|
|
|
-
|
|
|
<meta property="og:url" content="<%= applink %>" />
|
|
|
+
|
|
|
+ <!-- =============== 新增: Facebook App Links 元标签 =============== -->
|
|
|
+ <meta property="fb:app_id" content="2402037183154121" />
|
|
|
+ <meta property="al:web:should_fallback" content="false" />
|
|
|
+
|
|
|
+ <meta property="al:web:url" content="<%= applink %>" />
|
|
|
<meta property="al:ios:url" content="<%= applink %>" />
|
|
|
<meta property="al:ios:app_store_id" content="1575480118" />
|
|
|
<meta property="al:ios:app_name" content="Art Color" />
|
|
|
-
|
|
|
- <meta property="al:android:package" content="com.pcoloring.art.puzzle.color.by.number" />
|
|
|
<meta property="al:android:url" content="<%= applink %>" />
|
|
|
+ <meta property="al:android:package" content="com.pcoloring.art.puzzle.color.by.number" />
|
|
|
<meta property="al:android:app_name" content="Art Color" />
|
|
|
+ <meta property="al:android:class" content="YOUR_ANDROID_MAIN_ACTIVITY_CLASS" />
|
|
|
|
|
|
<meta name="apple-itunes-app" content="app-id=1575480118">
|
|
|
|
|
|
<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 {
|
|
|
@@ -74,6 +83,18 @@
|
|
|
z-index: 100;
|
|
|
}
|
|
|
|
|
|
+ /* 图片加载前隐藏，避免破碎的加载体验 */
|
|
|
+ #header {
|
|
|
+ opacity: 0;
|
|
|
+ transition: opacity 0.3s ease;
|
|
|
+ /* 加载完成后淡入 */
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 图片加载完成后显示 */
|
|
|
+ #header.loaded {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+
|
|
|
.app-icon {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
@@ -194,6 +215,17 @@
|
|
|
z-index: 100;
|
|
|
}
|
|
|
|
|
|
+ /* buttons 淡入 */
|
|
|
+ #buttons {
|
|
|
+ opacity: 0;
|
|
|
+ transition: opacity 0.3s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 图片加载完成后显示 */
|
|
|
+ #buttons.loaded {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+
|
|
|
|
|
|
.btn {
|
|
|
display: inline-block;
|
|
|
@@ -334,6 +366,9 @@
|
|
|
</script>
|
|
|
|
|
|
<body>
|
|
|
+ <div class="image-placeholder" id="imagePlaceholder">
|
|
|
+ <div class="loading-spinner"></div>
|
|
|
+ </div>
|
|
|
<div id="header" class="header-container">
|
|
|
<div class="app-icon">
|
|
|
<a href="/"><img src="/assets/icon/logo_640x640.webp" alt="Art Color App Logo"></a>
|
|
|
@@ -341,6 +376,13 @@
|
|
|
<div class="app-title">Art Color</div>
|
|
|
</div>
|
|
|
|
|
|
+ <div class="image-canvas-container">
|
|
|
+ <img id="poster-img" src="<%= imageUrl %>" alt="Art Color" />
|
|
|
+ <canvas id="canvas"></canvas>
|
|
|
+ <div id="play-button" class="play-button"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
<div id="buttons" class="buttons">
|
|
|
<a href="<%= openapplink %>" target="_blank" class="btn btn-primary">
|
|
|
<%= translate.colorNow[lang] %>
|
|
|
@@ -361,6 +403,111 @@
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
+ // =============== 新增: Facebook App Links SDK ===============
|
|
|
+ (function (d, s, id) {
|
|
|
+ var js, fjs = d.getElementsByTagName(s)[0];
|
|
|
+ if (d.getElementById(id)) return;
|
|
|
+ js = d.createElement(s); js.id = id;
|
|
|
+ js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v12.0&appId=2402037183154121";
|
|
|
+ fjs.parentNode.insertBefore(js, fjs);
|
|
|
+ }(document, 'script', 'facebook-jssdk'));
|
|
|
+ // =============== Facebook App Links SDK 结束 ===============
|
|
|
+
|
|
|
+ // claim bonus 超过1秒自动跳转到下载页
|
|
|
+ document.addEventListener('DOMContentLoaded', function () {
|
|
|
+ // 检查 URL 中是否包含 check=1 参数
|
|
|
+ const urlParams = new URLSearchParams(window.location.search);
|
|
|
+ const hasCheckParam = urlParams.has('check');
|
|
|
+ // 定义下载页面 URL（与 Download App 按钮保持一致）
|
|
|
+ const downloadUrl = document.querySelector('.btn-secondary').href;
|
|
|
+
|
|
|
+ // =============== 新增: Facebook 应用内浏览器检测 ===============
|
|
|
+ const isFacebookBrowser = navigator.userAgent.match(/FBAN|FBAV/i);
|
|
|
+
|
|
|
+ if (isFacebookBrowser) {
|
|
|
+ console.log("检测到Facebook应用内浏览器");
|
|
|
+ // 添加Facebook特定的处理逻辑
|
|
|
+ }
|
|
|
+ // =============== Facebook 检测结束 ===============
|
|
|
+
|
|
|
+
|
|
|
+ // 如果是带 check 参数的页面，则执行拉起检测逻辑
|
|
|
+ if (hasCheckParam) {
|
|
|
+ let appLaunched = false;
|
|
|
+
|
|
|
+ // 监听页面可见性变化（判断 App 是否被拉起）
|
|
|
+ document.addEventListener('visibilitychange', function () {
|
|
|
+ if (document.hidden) {
|
|
|
+ // 页面被隐藏，说明 App 可能被成功拉起
|
|
|
+ appLaunched = true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 监听页面焦点变化（辅助判断）
|
|
|
+ window.addEventListener('blur', function () {
|
|
|
+ appLaunched = true;
|
|
|
+ });
|
|
|
+
|
|
|
+ // 通用下载页，一般是在pc浏览器而非android/ios环境，直接跳转，不用等待
|
|
|
+ if (downloadUrl === 'https://art.pcoloring.com/app') {
|
|
|
+ window.location.href = downloadUrl;
|
|
|
+ } else {
|
|
|
+ // 1 秒后检查是否成功拉起 App
|
|
|
+ setTimeout(function () {
|
|
|
+ if (!appLaunched) {
|
|
|
+ // =============== 修改: 针对Facebook浏览器优化跳转逻辑 ===============
|
|
|
+ if (isFacebookBrowser) {
|
|
|
+ // 在Facebook浏览器中，使用更明显的跳转方式
|
|
|
+ window.location.href = "intent://" + "<%= applink %>".replace(/^https?:\/\//, "") + "#Intent;scheme=https;package=com.pcoloring.art.puzzle.color.by.number;end";
|
|
|
+ } else {
|
|
|
+ window.location.href = downloadUrl;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, 500);
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ // 为 Color Now 按钮添加防重复点击逻辑（可选）
|
|
|
+ const colorNowButton = document.querySelector('.btn-primary');
|
|
|
+ if (colorNowButton) {
|
|
|
+ colorNowButton.addEventListener('click', function (e) {
|
|
|
+ // 只有在没有 check 参数时才允许跳转（避免循环跳转）
|
|
|
+ if (!hasCheckParam) {
|
|
|
+ // 可添加加载状态
|
|
|
+ this.textContent = 'Launching...';
|
|
|
+ this.disabled = true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ // 图片加载逻辑
|
|
|
+ const header = document.getElementById('header');
|
|
|
+ const posterImg = document.getElementById('poster-img');
|
|
|
+ const imagePlaceholder = document.getElementById('imagePlaceholder');
|
|
|
+ const buttons = document.getElementById('buttons');
|
|
|
+
|
|
|
+ // 图片加载完成后
|
|
|
+ posterImg.onload = function () {
|
|
|
+ // header淡入
|
|
|
+ header.classList.add('loaded');
|
|
|
+ // 标记图片已加载，触发 CSS 淡入效果
|
|
|
+ posterImg.classList.add('loaded');
|
|
|
+ // buttons淡入
|
|
|
+ buttons.classList.add('loaded');
|
|
|
+ // 隐藏占位符
|
|
|
+ if (imagePlaceholder) {
|
|
|
+ imagePlaceholder.style.display = 'none';
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // 图片加载失败时（备选方案）
|
|
|
+ posterImg.onerror = function () {
|
|
|
+ imagePlaceholder.innerHTML = '<p>图片加载失败</p>'; // 显示错误提示
|
|
|
+ };
|
|
|
|
|
|
const wechatGuideOverlay = document.getElementById('wechat-guide-overlay');
|
|
|
|
