|
|
@@ -0,0 +1,414 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <meta http-equiv="x-ua-compatible" content="ie=edge">
|
|
|
+ <title>Art Color</title>
|
|
|
+
|
|
|
+ <link rel="alternate" href="https://art.pcoloring.com/share/67f33f5d8f7086254fee7dd2?lang=en" hrefLang="en" />
|
|
|
+ <link rel="alternate" href="https://art.pcoloring.com/share/67f33f5d8f7086254fee7dd2?lang=zh" hrefLang="zh" />
|
|
|
+ <link rel="alternate" href="https://art.pcoloring.com/share/67f33f5d8f7086254fee7dd2?lang=es" hrefLang="es" />
|
|
|
+ <link rel="alternate" href="https://art.pcoloring.com/share/67f33f5d8f7086254fee7dd2?lang=pt" hrefLang="pt" />
|
|
|
+ <link rel="alternate" href="https://art.pcoloring.com/share/67f33f5d8f7086254fee7dd2?lang=ja" hrefLang="ja" />
|
|
|
+ <link rel="alternate" href="https://art.pcoloring.com/share/67f33f5d8f7086254fee7dd2" hrefLang="x-default" />
|
|
|
+
|
|
|
+ <meta name="description" content="Color and Relax!">
|
|
|
+ <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="Color and Relax!">
|
|
|
+ <meta property="og:image"
|
|
|
+ content="http://color.jccytech.cn/thumbs/coloring-page/done/480/67f33f5d8f7086254fee7dd2.webp">
|
|
|
+ <meta property="og:type" content="website">
|
|
|
+
|
|
|
+ <!-- <meta property="fb:page_id" content="565152927316964"> -->
|
|
|
+
|
|
|
+ <!-- MARK: Universal Link / Android App Link 的核心配置 -->
|
|
|
+ <!-- 这些 meta 标签的值应该是完整的 HTTPS 链接，Facebook 会识别并尝试拉起 App -->
|
|
|
+ <meta property="og:url" content="https://art.pcoloring.com/share/67f33f5d8f7086254fee7dd2" />
|
|
|
+ <!-- **Universal Link 路径** -->
|
|
|
+ <meta property="al:ios:url" content="https://art.pcoloring.com/share/67f33f5d8f7086254fee7dd2" />
|
|
|
+ <!-- **Universal Link 路径** -->
|
|
|
+ <meta property="al:ios:app_store_id" content="1575480118" /> <!-- **iOS App Store ID** -->
|
|
|
+ <meta property="al:ios:app_name" content="Art Color" /> <!-- **iOS 应用名称** -->
|
|
|
+
|
|
|
+ <meta property="al:android:package" content="com.pcoloring.art.puzzle.color.by.number" /> <!-- **Android 包名** -->
|
|
|
+ <meta property="al:android:url" content="https://art.pcoloring.com/share/67f33f5d8f7086254fee7dd2" />
|
|
|
+ <!-- ** Universal Link 路径** -->
|
|
|
+ <meta property="al:android:app_name" content="Art Color" /> <!-- **Android 应用名称** -->
|
|
|
+ <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 {
|
|
|
+ --primary-color: #ff6b6b;
|
|
|
+ --secondary-color: #4ecdc4;
|
|
|
+ --accent-color: #ffd166;
|
|
|
+ --background-color: #f9f9f9;
|
|
|
+ --text-color: #333;
|
|
|
+ --light-text: #666;
|
|
|
+ --border-color: #e0e0e0;
|
|
|
+ }
|
|
|
+
|
|
|
+ body {
|
|
|
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ /* 垂直方向排列子元素 */
|
|
|
+ height: 100vh;
|
|
|
+ /* 严格限制高度为视口高度，确保不超出 */
|
|
|
+ margin: 0;
|
|
|
+ padding: 20px;
|
|
|
+ /* 页面内边距 */
|
|
|
+ box-sizing: border-box;
|
|
|
+ /* 盒模型为边框盒 */
|
|
|
+ background-color: var(--background-color);
|
|
|
+ color: var(--text-color);
|
|
|
+ line-height: 1.6;
|
|
|
+ align-items: center;
|
|
|
+ /* 水平居中所有flex子项 */
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 头部容器 */
|
|
|
+ .header-container {
|
|
|
+ width: 100%;
|
|
|
+ /* 占据全部宽度 */
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding-bottom: 15px;
|
|
|
+ /* 与下方内容留出间距，略微缩小 */
|
|
|
+ flex-shrink: 0;
|
|
|
+ /* 不会收缩 */
|
|
|
+ }
|
|
|
+
|
|
|
+ .app-icon {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin: 0 auto;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .app-icon img {
|
|
|
+ width: 90px;
|
|
|
+ /* 图标调小 */
|
|
|
+ height: 90px;
|
|
|
+ /* 图标调小 */
|
|
|
+ border: 3px solid #eeeeee;
|
|
|
+ border-radius: 10px;
|
|
|
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
|
+ object-fit: contain;
|
|
|
+ }
|
|
|
+
|
|
|
+ .app-title {
|
|
|
+ font-size: 1.8rem;
|
|
|
+ /* 标题调小 */
|
|
|
+ font-weight: 700;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ /* 调整为与图标的间距，略微缩小 */
|
|
|
+ text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
|
+ text-align: center;
|
|
|
+ /* 确保标题在移动端也居中 */
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 图片和 Canvas 容器，占据剩余所有空间 */
|
|
|
+ .image-canvas-container {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ /* 占据所有可用宽度 */
|
|
|
+ max-width: 600px;
|
|
|
+ /* 限制最大宽度，保持美观 */
|
|
|
+ flex-grow: 1;
|
|
|
+ /* 占据所有剩余垂直空间 */
|
|
|
+ min-height: 0;
|
|
|
+ /* 允许flex-grow在必要时收缩 */
|
|
|
+ display: flex;
|
|
|
+ /* 内部使用flex布局来居中图片和canvas */
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
|
|
|
+ /* 添加阴影效果 */
|
|
|
+ border-radius: 12px;
|
|
|
+ /* 圆角 */
|
|
|
+ overflow: hidden;
|
|
|
+ /* 隐藏超出容器的内容 */
|
|
|
+ margin-bottom: 15px;
|
|
|
+ /* 与下方按钮留出间距，略微缩小 */
|
|
|
+ /* aspect-ratio: 1 / 1; /* 移除1:1比例，让高度自适应剩余空间 */
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 图片样式：使其响应式并填充容器 */
|
|
|
+ .image-canvas-container img {
|
|
|
+ position: absolute;
|
|
|
+ /* 绝对定位，与canvas重叠 */
|
|
|
+ display: block;
|
|
|
+ /* 移除图片底部空白 */
|
|
|
+ width: 100%;
|
|
|
+ /* 宽度填充父容器 */
|
|
|
+ height: 100%;
|
|
|
+ /* 高度填充父容器 */
|
|
|
+ object-fit: contain;
|
|
|
+ /* 保持图片比例，适应容器 */
|
|
|
+ border-radius: 12px;
|
|
|
+ /* 与容器相同的圆角 */
|
|
|
+ z-index: 100;
|
|
|
+ /* 确保图片在canvas之上 */
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Canvas 样式：绝对定位，与图片完全重叠 */
|
|
|
+ .image-canvas-container canvas {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 12px;
|
|
|
+ /* 与容器相同的圆角 */
|
|
|
+ z-index: 50;
|
|
|
+ /* 在图片之下 */
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ display: inline-block;
|
|
|
+ min-width: 180px;
|
|
|
+ background-color: var(--primary-color);
|
|
|
+ color: white;
|
|
|
+ border: none;
|
|
|
+ padding: 10px 20px;
|
|
|
+ border-radius: 20px;
|
|
|
+ font-size: 1.1rem;
|
|
|
+ font-weight: 500;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: background-color 0.3s ease;
|
|
|
+ text-decoration: none;
|
|
|
+ text-align: center;
|
|
|
+ margin-right: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn:hover {
|
|
|
+ background-color: #ff4d4d;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-secondary {
|
|
|
+ background-color: var(--secondary-color);
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-secondary:hover {
|
|
|
+ background-color: #37b0a8;
|
|
|
+ }
|
|
|
+
|
|
|
+ .play-button {
|
|
|
+ position: absolute;
|
|
|
+ display: block;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
+ background-color: rgba(255, 107, 107, 0.8);
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ z-index: 110;
|
|
|
+ /* 确保播放按钮在图片之上 */
|
|
|
+ }
|
|
|
+
|
|
|
+ .play-button:hover {
|
|
|
+ background-color: rgba(255, 107, 107, 1);
|
|
|
+ transform: translate(-50%, -50%) scale(1.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .play-button::after {
|
|
|
+ content: "";
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border-top: 15px solid transparent;
|
|
|
+ border-bottom: 15px solid transparent;
|
|
|
+ border-left: 25px solid white;
|
|
|
+ margin-left: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 按钮容器在底部 */
|
|
|
+ .buttons {
|
|
|
+ width: 100%;
|
|
|
+ /* 占据全部宽度 */
|
|
|
+ max-width: 550px;
|
|
|
+ /* 限制最大宽度 */
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ flex-direction: column;
|
|
|
+ /* 按钮垂直排列 */
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 15px;
|
|
|
+ /* 与上方内容留出间距，略微缩小 */
|
|
|
+ flex-shrink: 0;
|
|
|
+ /* 不会收缩 */
|
|
|
+ }
|
|
|
+
|
|
|
+ /* MARK: 微信引导层样式 */
|
|
|
+ .wechat-guide-overlay {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ 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;
|
|
|
+ font-size: 1.5rem;
|
|
|
+ text-align: center;
|
|
|
+ padding: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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) {
|
|
|
+ body {
|
|
|
+ padding: 10px;
|
|
|
+ /* 移动端减小内边距 */
|
|
|
+ }
|
|
|
+
|
|
|
+ .app-title {
|
|
|
+ font-size: 1.5rem;
|
|
|
+ /* 移动端标题进一步调小 */
|
|
|
+ margin-bottom: 10px;
|
|
|
+ /* 移动端调整间距 */
|
|
|
+ }
|
|
|
+
|
|
|
+ .app-icon img {
|
|
|
+ width: 70px;
|
|
|
+ /* 移动端图标进一步调小 */
|
|
|
+ height: 70px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .buttons {
|
|
|
+ margin-top: 15px;
|
|
|
+ /* 移动端调整间距 */
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ min-width: 150px;
|
|
|
+ /* 移动端按钮小一点 */
|
|
|
+ font-size: 1rem;
|
|
|
+ margin-right: 0;
|
|
|
+ /* 垂直排列时不需要右边距 */
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<!-- 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>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <div class="header-container">
|
|
|
+ <div class="app-icon">
|
|
|
+ <img src="/assets/icon/logo_640x640.webp" alt="Art Color App Logo">
|
|
|
+ </div>
|
|
|
+ <h1 class="app-title">🎨 Art Color - Color by Number 🎨</h1>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="image-canvas-container">
|
|
|
+ <img id="poster-img" src="http://color.jccytech.cn/thumbs/coloring-page/done/480/67f33f5d8f7086254fee7dd2.webp"
|
|
|
+ alt="Art Color" />
|
|
|
+ <canvas id="canvas"></canvas>
|
|
|
+ <div id="play-button" class="play-button"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="buttons">
|
|
|
+ <a href="https://pcoloring.com/anc/" class="btn btn-secondary">
|
|
|
+ Download App
|
|
|
+ </a>
|
|
|
+ <a href="https://art.pcoloring.com/share/67f33f5d8f7086254fee7dd2?pullapp=1" class="btn btn-primary">
|
|
|
+ Claim Bonus
|
|
|
+ </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">
|
|
|
+ 请点击右上角 <strong>"..."</strong> 菜单<br>
|
|
|
+ 选择 <strong>"在浏览器中打开"</strong><br>
|
|
|
+ 即可跳转到 App 或下载页面
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ const wechatGuideOverlay = document.getElementById('wechat-guide-overlay');
|
|
|
+
|
|
|
+ // MARK: 微信环境检测
|
|
|
+ function isWeChatBrowser() {
|
|
|
+ const ua = window.navigator.userAgent.toLowerCase();
|
|
|
+ return ua.includes('micromessenger');
|
|
|
+ }
|
|
|
+
|
|
|
+ function closeOverlay() {
|
|
|
+ wechatGuideOverlay.classList.remove('active');
|
|
|
+ }
|
|
|
+
|
|
|
+ if (isWeChatBrowser()) {
|
|
|
+ wechatGuideOverlay.classList.add('active');
|
|
|
+ console.log("检测到微信浏览器，显示引导层。");
|
|
|
+ } else {
|
|
|
+ wechatGuideOverlay.classList.remove('active'); // 确保隐藏
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
