guoziyun
/
playableads-platform


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
							<!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/loading.css" type="text/css" />
  </head>

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

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

    <!-- 游戏列：flex column，上方是纯 canvas 区，下方是工具栏 -->
    <div id="game-col">
      <!-- 宣传界面：在 game-col 内 absolute 展开，覆盖 canvas+toolbar 整体区域 -->
      <div id="promo-screen">
        <img id="promo-coloring" alt="" />
        <img id="promo-slogon" alt="" />
      </div>

      <div id="game-area">
        <canvas id="canvas"></canvas>
      </div>

      <!-- 调色板，在 canvas 下方独立行，不与 canvas 重叠 -->
      <div id="toolbar-bottom">
        <div id="color-btns"></div>
      </div>
    </div>

    <!-- 竖屏：display:contents，子元素直接参与 body flex 排列
         横屏：flex column 右侧栏 -->
    <div id="sidebar">
      <div id="app-logo-bar">
        <img id="app-logo" alt="" />
        <img id="app-logo-txt" alt="" />
      </div>
      <!-- 横屏时撑开 logo 与 CTA 之间的空白 -->
      <div class="sidebar-flex-spacer"></div>
      <div id="cta-btn-wrapper">
        <button id="cta-btn">PLAY NOW</button>
      </div>
    </div>

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