GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Ad - Calendar 2023</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #f5f5f5;12  }13 14  /* Status bar */15  .statusbar {16    position: absolute; left: 0; top: 0; width: 100%; height: 140px;17    background: #000; color: #fff; padding: 0 40px;18    display: flex; align-items: center; justify-content: space-between;19    box-sizing: border-box;20  }21  .status-left { display: flex; align-items: center; gap: 28px; font-weight: 600; font-size: 44px; }22  .status-icons { display: flex; align-items: center; gap: 22px; }23  .square-icon {24    width: 48px; height: 48px; background: #fff; color: #000; font-size: 24px;25    display: inline-flex; justify-content: center; align-items: center; border-radius: 6px; font-weight: 700;26  }27  .dot { width: 12px; height: 12px; background: #fff; border-radius: 50%; display: inline-block; }28  .sys-icon { width: 38px; height: 38px; border: 2px solid #fff; border-radius: 8px; }29 30  /* Top banner */31  .top-banner {32    position: absolute; left: 40px; right: 40px; top: 170px;33    background: #ffffff; border-radius: 26px; box-shadow: 0 6px 16px rgba(0,0,0,0.2);34    padding: 24px; display: flex; align-items: center; gap: 24px;35  }36  .img-ph {37    background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;38    display: flex; justify-content: center; align-items: center; text-align: center;39  }40  .banner-avatar { width: 120px; height: 120px; border-radius: 18px; }41  .banner-text { flex: 1; }42  .banner-title { font-size: 40px; color: #333; font-weight: 700; line-height: 1.2; }43  .banner-sub { font-size: 34px; color: #888; margin-bottom: 6px; }44  .refresh {45    width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;46  }47  .refresh svg { width: 48px; height: 48px; }48 49  /* Ad card */50  .ad-label {51    position: absolute; top: 360px; left: 0; right: 0; text-align: center;52    color: #717171; font-size: 38px;53  }54  .card {55    position: absolute; left: 0; right: 0; top: 410px; margin: 0 24px;56    background: #ffffff; border-radius: 32px; box-shadow: 0 10px 24px rgba(0,0,0,0.12);57    padding: 48px 56px; box-sizing: border-box;58  }59  .app-row { display: flex; align-items: center; gap: 44px; }60  .app-icon { width: 280px; height: 280px; border-radius: 48px; }61  .app-info h1 { margin: 0; font-size: 70px; color: #222; font-weight: 700; }62  .muted { color: #8a8a8a; font-size: 34px; margin-top: 18px; }63  .muted + .muted { margin-top: 14px; }64 65  .stats {66    margin-top: 60px; display: flex; align-items: center; justify-content: space-around;67    color: #666;68  }69  .stat-block { display: flex; align-items: center; gap: 16px; font-size: 38px; }70  .divider { width: 1px; height: 90px; background: #d9d9d9; }71  .small-note { font-size: 30px; color: #8a8a8a; }72 73  .gp-row { margin-top: 56px; display: flex; align-items: center; justify-content: center; gap: 20px; }74  .gp-row .gp-text { font-size: 46px; color: #5b5b5b; font-weight: 600; }75  .gp-logo svg { width: 64px; height: 64px; display: block; }76 77  .preview {78    margin-top: 36px; border-top: 1px solid #e5e5e5; padding-top: 36px;79  }80  .preview-box {81    border: 1px solid #dcdcdc; border-radius: 16px; height: 560px; background: #fff;82    position: relative; display: flex; align-items: center; justify-content: center;83  }84  .speaker { position: absolute; top: 24px; left: 24px; width: 56px; height: 56px; }85  .center-icon { width: 280px; height: 280px; }86 87  .install-wrap { padding: 40px 0 20px; display: flex; justify-content: center; }88  .install-btn {89    background: #2f7b5b; color: #fff; font-size: 46px; font-weight: 700; letter-spacing: 0.5px;90    width: 880px; padding: 30px 0; border: none; border-radius: 18px;91    box-shadow: 0 10px 18px rgba(47,123,91,0.35);92  }93 94  /* Bottom safe area / home pill */95  .safe-area {96    position: absolute; left: 0; right: 0; bottom: 0; height: 160px; background: #ffffff;97    border-top-left-radius: 32px; border-top-right-radius: 32px; box-shadow: 0 -6px 10px rgba(0,0,0,0.06) inset;98  }99  .home-pill {100    position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);101    width: 240px; height: 14px; border-radius: 10px; background: #000000;102    opacity: 0.8;103  }104  .info-icon {105    position: absolute; right: 26px; bottom: 26px; width: 44px; height: 44px;106    border: 2px solid #8aa8b0; border-radius: 50%; color: #8aa8b0; font-weight: 700;107    display: flex; align-items: center; justify-content: center;108    background: #f7fbfc;109  }110</style>111</head>112<body>113<div id="render-target">114 115  <!-- Status bar -->116  <div class="statusbar">117    <div class="status-left">118      <div>12:17</div>119      <div>TH</div>120      <div class="square-icon">TOI</div>121      <div class="square-icon">TOI</div>122      <div class="square-icon">TOI</div>123      <span class="dot"></span>124    </div>125    <div class="status-icons">126      <div class="sys-icon"></div>127      <div class="sys-icon"></div>128      <div class="sys-icon"></div>129    </div>130  </div>131 132  <!-- Loading banner -->133  <div class="top-banner">134    <div class="img-ph banner-avatar">[IMG: Clock App Avatar]</div>135    <div class="banner-text">136      <div class="banner-sub">Loading...</div>137      <div class="banner-title">World Clock Smart Alarm App</div>138    </div>139    <div class="refresh">140      <svg viewBox="0 0 24 24" fill="#4a8af4">141        <path d="M12 4a8 8 0 1 1-7.4 5h2.2A6 6 0 1 0 12 6l1.8 1.8L16 6l-4-4v2z"/>142      </svg>143    </div>144  </div>145 146  <!-- Advertisement label -->147  <div class="ad-label">Advertisement</div>148 149  <!-- Main card -->150  <div class="card">151    <div class="app-row">152      <div class="img-ph app-icon">[IMG: Calendar 31 Icon]</div>153      <div class="app-info">154        <h1>Calendar 2023</h1>155        <div class="muted">iKame Applications - Begamob Apps</div>156        <div class="muted">Event planner</div>157        <div class="muted">Get timely reminders for all your events.</div>158      </div>159    </div>160 161    <div class="stats">162      <div class="stat-block">163        <div style="font-size:46px; color:#333; font-weight:700;">4.7</div>164        <svg width="44" height="44" viewBox="0 0 24 24" fill="#808080">165          <path d="M12 2l3.1 6.3 7 1-5 4.8 1.2 6.9L12 18l-6.3 3 1.2-6.9-5-4.8 7-1L12 2z"/>166        </svg>167        <div class="small-note">7 thousand</div>168        <svg width="40" height="40" viewBox="0 0 24 24" fill="#9e9e9e">169          <path d="M12 12a5 5 0 1 0-0.001-10.001A5 5 0 0 0 12 12zm0 2c-4.4 0-8 2.2-8 5v1h16v-1c0-2.8-3.6-5-8-5z"/>170        </svg>171      </div>172 173      <div class="divider"></div>174 175      <div class="stat-block">176        <svg width="44" height="44" viewBox="0 0 24 24" fill="#808080">177          <path d="M12 3v10l4-4h-3V3h-2zm-7 14h14v2H5v-2z"/>178        </svg>179        <div class="small-note">1 million</div>180      </div>181    </div>182 183    <div class="gp-row">184      <div class="gp-logo">185        <svg viewBox="0 0 24 24">186          <polygon points="3,2 20,12 3,22" fill="#4285F4"></polygon>187          <polygon points="3,2 12,12 3,12" fill="#34A853"></polygon>188          <polygon points="3,12 12,12 3,22" fill="#FBBC05"></polygon>189          <polygon points="20,12 12,7 12,17" fill="#EA4335"></polygon>190        </svg>191      </div>192      <div class="gp-text">Google Play</div>193    </div>194 195    <div class="preview">196      <div class="preview-box">197        <div class="speaker">198          <svg viewBox="0 0 24 24" fill="#9e9e9e">199            <path d="M3 9v6h4l5 4V5L7 9H3zm13.5 3a4.5 4.5 0 0 0-2.3-3.9v7.8c1.4-.8 2.3-2.3 2.3-3.9z"/>200          </svg>201        </div>202        <div class="img-ph center-icon">[IMG: Calendar app icon]</div>203      </div>204    </div>205 206    <div class="install-wrap">207      <button class="install-btn">Install</button>208    </div>209  </div>210 211  <!-- Bottom safe area -->212  <div class="safe-area"></div>213  <div class="home-pill"></div>214  <div class="info-icon">i</div>215</div>216</body>217</html>