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>HealthifyMe Weight Loss Coach - Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    font-family: Arial, Helvetica, sans-serif;16    color: #222;17  }18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0; left: 0;22    width: 100%;23    height: 110px;24    background: #000;25    color: #fff;26    display: flex;27    align-items: center;28    padding: 0 32px;29    box-sizing: border-box;30  }31  .status-left { font-size: 42px; font-weight: 600; }32  .status-right {33    margin-left: auto;34    display: flex;35    align-items: center;36    gap: 28px;37  }38  .status-dot {39    width: 14px; height: 14px; background: #fff; border-radius: 50%;40    opacity: 0.75;41  }42  .icon {43    width: 48px; height: 48px;44    fill: none; stroke: #fff; stroke-width: 3;45  }46 47  /* Header area */48  .header {49    position: absolute;50    top: 110px;51    left: 0;52    width: 100%;53    padding: 52px 56px 40px 56px;54    box-sizing: border-box;55    display: flex;56    align-items: center;57    gap: 40px;58  }59  .img-ph {60    background: #E0E0E0;61    border: 1px solid #BDBDBD;62    display: flex; justify-content: center; align-items: center;63    color: #757575;64    font-size: 34px;65    text-align: center;66  }67  .app-icon {68    width: 220px; height: 220px; border-radius: 40px;69  }70  .app-info { flex: 1; }71  .title {72    font-size: 64px;73    line-height: 1.2;74    margin-bottom: 18px;75  }76  .subtitle {77    font-size: 36px;78    color: #6d6d6d;79    margin-bottom: 24px;80  }81  .install-btn {82    display: inline-block;83    padding: 22px 50px;84    background: #2e7d32;85    color: #fff;86    border-radius: 14px;87    font-size: 40px;88    font-weight: 600;89  }90  .notif-badge {91    position: absolute;92    top: 160px;93    right: 36px;94    width: 84px; height: 84px;95    background: #f5f5f5;96    border-radius: 50%;97    color: #333;98    display: flex; align-items: center; justify-content: center;99    font-size: 40px; font-weight: 600;100    box-shadow: 0 2px 0 rgba(0,0,0,0.03);101  }102 103  /* Video testimonial section */104  .video-wrap {105    position: absolute;106    left: 0;107    top: 480px;108    width: 100%;109  }110  .video-banner {111    width: 100%;112    height: 660px;113    position: relative;114    overflow: hidden;115  }116  .video-ph {117    width: 100%; height: 100%;118    font-size: 44px;119  }120  .video-overlay-left {121    position: absolute;122    left: 40px;123    bottom: 70px;124    width: 420px;125    color: #fff;126  }127  .after-card {128    width: 240px; height: 330px;129    border-radius: 22px;130    overflow: hidden;131    background: rgba(255,255,255,0.25);132  }133  .after-card .img-ph { width: 100%; height: 100%; font-size: 28px; }134  .after-label {135    position: absolute;136    left: 18px; bottom: 18px;137    background: rgba(0,0,0,0.65);138    padding: 10px 18px;139    border-radius: 12px;140    font-size: 30px;141    font-weight: 600;142  }143  .overlay-brand {144    display: flex; align-items: center; gap: 12px;145    margin: 16px 0 8px 0;146    font-size: 34px; font-weight: 700;147  }148  .overlay-text {149    font-size: 30px;150    color: #fff;151    line-height: 1.3;152  }153  .badge-center {154    position: absolute;155    left: 50%;156    bottom: 30px;157    transform: translateX(-50%);158    background: #fff;159    color: #000;160    font-weight: 800;161    font-size: 42px;162    padding: 12px 24px;163    border-radius: 12px;164    box-shadow: 0 2px 6px rgba(0,0,0,0.25);165  }166 167  /* Description area */168  .desc {169    position: absolute;170    top: 1180px;171    left: 0;172    width: 100%;173    text-align: center;174    color: #9e9e9e;175  }176  .desc h2 {177    margin: 60px 0 18px 0;178    font-size: 48px;179    font-weight: 600;180    color: #9e9e9e;181  }182  .desc p {183    margin: 0;184    font-size: 36px;185  }186 187  /* Stats row */188  .stats {189    position: absolute;190    top: 1480px;191    left: 0;192    width: 100%;193    display: flex;194    justify-content: center;195    gap: 80px;196    color: #9e9e9e;197    align-items: center;198  }199  .stat {200    display: flex; align-items: center; gap: 18px;201    font-size: 40px;202  }203  .divider {204    width: 2px; height: 64px; background: #d1d1d1;205  }206  .icon-gray { width: 44px; height: 44px; stroke: #9e9e9e; fill: none; stroke-width: 3; }207 208  /* Google Play branding */209  .play-brand {210    position: absolute;211    top: 1760px;212    left: 0; width: 100%;213    display: flex; justify-content: center; align-items: center; gap: 22px;214    color: #5f5f5f;215    font-size: 54px;216    font-weight: 600;217  }218  .play-logo {219    width: 140px; height: 100px;220  }221 222  /* Bottom navigation bar */223  .nav-bar {224    position: absolute;225    bottom: 0; left: 0;226    width: 100%; height: 120px;227    background: #000;228  }229  .home-handle {230    position: absolute;231    top: 50%;232    left: 50%;233    width: 260px; height: 12px;234    background: #e6e6e6;235    border-radius: 8px;236    transform: translate(-50%, -50%);237    opacity: 0.9;238  }239  .info-dot {240    position: absolute;241    right: 22px;242    bottom: 150px;243    width: 44px; height: 44px;244    border-radius: 50%;245    background: #e6e6e6;246    color: #2f2f2f;247    display: flex; align-items: center; justify-content: center;248    font-weight: 700;249  }250</style>251</head>252<body>253<div id="render-target">254 255  <!-- Status Bar -->256  <div class="status-bar">257    <div class="status-left">8:21</div>258    <div class="status-right">259      <div class="status-dot"></div>260      <div class="status-dot"></div>261      <div class="status-dot"></div>262      <!-- Location -->263      <svg class="icon" viewBox="0 0 24 24">264        <path d="M12 21s-7-7-7-11a7 7 0 1 1 14 0c0 4-7 11-7 11z"/>265        <circle cx="12" cy="10" r="3" fill="#fff"/>266      </svg>267      <!-- WiFi -->268      <svg class="icon" viewBox="0 0 24 24">269        <path d="M2 8c5-5 15-5 20 0M5 11c4-4 10-4 14 0M8 14c3-3 7-3 10 0M12 18l2 2-2 2-2-2z"/>270      </svg>271      <!-- Battery -->272      <svg class="icon" viewBox="0 0 24 24">273        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" />274        <rect x="21" y="10" width="2" height="4" />275        <rect x="4" y="8" width="14" height="8" fill="#fff" stroke="none"/>276      </svg>277    </div>278  </div>279 280  <!-- Header -->281  <div class="header">282    <div class="img-ph app-icon">[IMG: App Icon]</div>283    <div class="app-info">284      <div class="title">HealthifyMe Weight<br>Loss Coach</div>285      <div class="subtitle">HealthifyMe (Calorie Counter,...)</div>286      <div class="install-btn">Install</div>287    </div>288    <div class="notif-badge">4</div>289  </div>290 291  <!-- Video testimonial -->292  <div class="video-wrap">293    <div class="video-banner">294      <div class="img-ph video-ph">[IMG: Testimonial Video]</div>295 296      <!-- Left overlay -->297      <div class="video-overlay-left">298        <div class="after-card" style="position: relative;">299          <div class="img-ph">[IMG: AFTER Photo]</div>300          <div class="after-label">AFTER</div>301        </div>302 303        <div class="overlay-brand">304          <div style="width: 42px; height: 42px; border-radius: 50%; background:#fff;"></div>305          HealthifyMe306        </div>307        <div class="overlay-text">308          <strong>Pragna Bhatt</strong><br>309          Started wearing<br>310          M size from XXL311        </div>312      </div>313 314      <!-- Center badge -->315      <div class="badge-center">M size from XXL</div>316    </div>317  </div>318 319  <!-- Description -->320  <div class="desc">321    <h2>India's Most Loved Health App</h2>322    <p>Make 2023 your healthiest year by cracking your fitness...</p>323  </div>324 325  <!-- Stats -->326  <div class="stats">327    <div class="stat">328      <span style="font-weight:700; color:#7a7a7a;">4.5</span>329      <svg class="icon-gray" viewBox="0 0 24 24">330        <path d="M12 2l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" />331      </svg>332    </div>333    <div class="divider"></div>334    <div class="stat">335      <span>500 thousand</span>336      <svg class="icon-gray" viewBox="0 0 24 24">337        <circle cx="12" cy="8" r="4" />338        <path d="M4 22c0-4 4-6 8-6s8 2 8 6" />339      </svg>340    </div>341    <div class="divider"></div>342    <div class="stat">343      <svg class="icon-gray" viewBox="0 0 24 24">344        <path d="M12 4v12M7 11l5 5 5-5" />345        <rect x="4" y="19" width="16" height="2" />346      </svg>347      <span>30 million</span>348    </div>349  </div>350 351  <!-- Google Play branding -->352  <div class="play-brand">353    <div class="img-ph play-logo">[IMG: Google Play Logo]</div>354    <div>Google Play</div>355  </div>356 357  <!-- Info dot and bottom nav bar -->358  <div class="info-dot">i</div>359  <div class="nav-bar">360    <div class="home-handle"></div>361  </div>362 363</div>364</body>365</html>