guoziyun
/
playableads


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
							<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Coloring Page Paint On Line | Coloring Game</title>

    <script type="module" src="/src/filler/index.ts"></script>
    <meta
      name="viewport"
      content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"
    />

    <link rel="stylesheet" href="/assets/css/tools.css" type="text/css" />
    <link rel="stylesheet" href="/assets/css/setting.css" type="text/css" />
    <link rel="stylesheet" href="/assets/css/loading.css" type="text/css" />
  </head>

  <body>
    <div id="loading-overlay">
      <div class="spinner"></div>
    </div>

    <!-- 广告标识（各平台合规要求） -->
    <div id="ad-badge">Ad</div>

    <!-- 填色区域（左侧 / 竖屏全屏）；promo 也在此覆盖 -->
    <div id="game-area">
      <canvas id="canvas"></canvas>

      <!-- 进度条 + 调色板，绝对定位在底部 -->
      <div id="toolbar-bottom">
        <div id="progress-toolbar">
          <div id="progress-wrapper" class="progress-wrapper">
            <div id="progress-bar" class="progress-bar">
              <div id="progress" class="progress"></div>
            </div>
            <div id="percent" class="percent"></div>
          </div>
        </div>
        <div id="color-btns"></div>
      </div>

      <!-- 宣传界面：canvas 消失后填充此区域
           竖屏=覆盖全屏；横屏=覆盖左侧 58% -->
      <div id="promo-screen">
        <img id="promo-coloring" alt="" />
        <img id="promo-slogon" alt="" />
      </div>
    </div>

    <!-- 竖屏：fixed 叠加（logo 顶 / CTA 底）
         横屏：右侧固定栏 -->
    <div id="sidebar">
      <div id="app-logo-bar">
        <!-- logo.png = 图标，logo-txt.png = 文字；竖屏横排，横屏竖排 -->
        <img id="app-logo" alt="" />
        <img id="app-logo-txt" alt="" />
      </div>

      <!-- CTA 按钮 -->
      <div id="cta-btn-wrapper">
        <button id="cta-btn">PLAY NOW</button>
      </div>
    </div>

    <div id="toast" class="toast toast-hidden"></div>
  </body>
</html>