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>Health Tracker Dashboard</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #F5F5F5;15    border-radius: 34px;16    box-shadow: 0 8px 24px rgba(0,0,0,0.15);17  }18 19  /* Top status bar */20  .status-bar {21    height: 120px;22    padding: 0 36px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #333;27    font-weight: 600;28    font-size: 40px;29    background: #FFFFFF;30  }31  .status-icons {32    display: flex;33    align-items: center;34    gap: 24px;35  }36  .status-icons svg { width: 40px; height: 40px; fill: none; stroke: #424242; }37 38  /* Header */39  .header {40    padding: 24px 48px 32px 48px;41    background: #FFFFFF;42    display: flex;43    align-items: center;44    justify-content: space-between;45    border-bottom: 1px solid #EEEEEE;46  }47  .header .left {48    display: flex;49    align-items: center;50    gap: 12px;51  }52  .title {53    font-size: 68px;54    font-weight: 700;55    color: #222;56  }57  .header .right {58    display: flex;59    align-items: center;60    gap: 22px;61    color: #222;62    font-size: 42px;63    font-weight: 700;64  }65  .header .right .range {66    font-weight: 700;67    color: #222;68    letter-spacing: 1px;69  }70  .icon-btn svg { width: 48px; height: 48px; }71 72  /* Content area */73  .content {74    padding: 36px 48px 24px 48px;75  }76 77  .promo-card {78    background: #FFFFFF;79    border-radius: 28px;80    box-shadow: 0 10px 30px rgba(0,0,0,0.08);81    padding: 28px;82    display: flex;83    align-items: center;84    gap: 24px;85    margin-bottom: 36px;86    border: 1px solid #EEEEEE;87  }88  .promo-icon {89    width: 108px;90    height: 108px;91    border-radius: 20px;92    background: #E8EAF6;93    display: grid;94    place-items: center;95    position: relative;96  }97  .promo-text {98    font-size: 40px;99    line-height: 1.35;100    color: #333;101  }102  .promo-text b { font-weight: 800; }103 104  .section-title {105    font-size: 48px;106    font-weight: 700;107    color: #333;108    margin: 34px 0 24px 0;109  }110 111  /* Tracker grid */112  .grid {113    display: flex;114    flex-wrap: wrap;115    gap: 36px;116  }117  .card {118    width: calc((100% - 36px) / 2);119    min-height: 420px;120    background: #FFFFFF;121    border-radius: 36px;122    box-shadow: 0 8px 24px rgba(0,0,0,0.06);123    border: 1px solid #EEEEEE;124    padding: 36px;125    display: flex;126    flex-direction: column;127    justify-content: center;128    gap: 18px;129  }130  .card.center { align-items: center; text-align: center; }131  .muted { color: #9E9E9E; font-size: 34px; }132 133  .ring {134    width: 180px;135    height: 180px;136    border-radius: 90px;137    border: 12px solid #E0E0E0;138    display: grid;139    place-items: center;140    margin-bottom: 12px;141  }142  .card h3 {143    font-size: 44px;144    color: #222;145    margin: 0;146  }147 148  /* Steps icons */149  .app-icons {150    display: flex;151    gap: 18px;152    margin-bottom: 8px;153  }154  .app-dot {155    width: 54px;156    height: 54px;157    border-radius: 50%;158  }159  .app-dot.heart { background: #FF8A80; }160  .app-dot.dark { background: #424242; }161  .app-dot.blue { background: #64B5F6; }162  .app-dot.pastel { background: #B39DDB; }163 164  /* Water controls */165  .water-controls {166    display: flex;167    align-items: center;168    justify-content: center;169    gap: 22px;170    margin-bottom: 6px;171  }172  .pill-btn {173    width: 66px; height: 66px; border-radius: 33px;174    background: #EEEEEE; display: grid; place-items: center;175  }176  .pill-btn svg { width: 36px; height: 36px; stroke: #616161; }177  .cup-ring {178    width: 160px; height: 160px; border-radius: 80px; border: 12px solid #E0E0E0;179    display: grid; place-items: center;180  }181  .cup-icon svg { width: 80px; height: 80px; }182 183  /* View all card text */184  .view-all { color: #777; font-size: 42px; }185 186  /* Curated section and banner */187  .banner {188    margin-top: 24px;189    width: 100%;190    height: 520px;191    background: #E0E0E0;192    border: 1px solid #BDBDBD;193    border-radius: 28px;194    display: flex;195    align-items: center;196    justify-content: center;197    color: #757575;198    font-size: 46px;199    font-weight: 700;200  }201 202  /* Bottom area (home indicator) */203  .bottom-safe {204    position: absolute;205    left: 0; right: 0; bottom: 0;206    height: 160px;207    background: #000;208    display: flex; align-items: center; justify-content: center;209  }210  .home-pill {211    width: 240px; height: 14px; border-radius: 7px; background: #FFFFFF;212    opacity: 0.9;213  }214</style>215</head>216<body>217<div id="render-target">218 219  <!-- Status Bar -->220  <div class="status-bar">221    <div>12:21</div>222    <div class="status-icons">223      <!-- Simple muted icons -->224      <svg viewBox="0 0 24 24"><path d="M12 3v18M3 12h18" stroke-width="2"/></svg>225      <svg viewBox="0 0 24 24"><path d="M2 17c3-4 7-6 10-6s7 2 10 6" stroke-width="2"/></svg>226      <svg viewBox="0 0 24 24"><path d="M6 3h12v18H6z" stroke-width="2"/><path d="M10 5h4" stroke-width="2"/></svg>227    </div>228  </div>229 230  <!-- Header -->231  <div class="header">232    <div class="left">233      <div class="title">Today</div>234      <svg class="icon-btn" viewBox="0 0 24 24">235        <path d="M6 9l6 6 6-6" fill="none" stroke="#424242" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>236      </svg>237    </div>238    <div class="right">239      <svg class="icon-btn" viewBox="0 0 24 24">240        <path d="M13 2l-7 12h6l-1 8 7-12h-6l1-8z" fill="#FFC107" stroke="#FFC107"/>241      </svg>242      <span class="range">1 DAY</span>243      <svg class="icon-btn" viewBox="0 0 24 24">244        <circle cx="18" cy="5" r="3" fill="#424242"/>245        <circle cx="6" cy="12" r="3" fill="#424242"/>246        <circle cx="18" cy="19" r="3" fill="#424242"/>247        <path d="M8.8 11l7.4-4.4M8.8 13l7.4 4.4" stroke="#424242" stroke-width="2" fill="none"/>248      </svg>249    </div>250  </div>251 252  <div class="content">253 254    <!-- Health Connect promo -->255    <div class="promo-card">256      <div class="promo-icon">257        <svg viewBox="0 0 64 64">258          <circle cx="24" cy="32" r="16" fill="#263238"/>259          <circle cx="40" cy="32" r="16" fill="#3F51B5" opacity="0.9"/>260          <rect x="26" y="26" width="12" height="12" rx="6" fill="#FFFFFF"/>261        </svg>262      </div>263      <div class="promo-text">264        Get more detailed health data with Health Connect. <b>Learn more</b>265      </div>266    </div>267 268    <!-- Other Trackers -->269    <div class="section-title">Other Trackers</div>270 271    <div class="grid">272 273      <!-- Card: Calories Burnt -->274      <div class="card center">275        <div class="ring">276          <svg viewBox="0 0 64 64" width="80" height="80">277            <!-- simple running stick figure -->278            <circle cx="38" cy="18" r="5" fill="#3F51B5"/>279            <path d="M34 24l-6 10M28 34l-12 8M34 24l10 8M42 32l8 12" stroke="#3F51B5" stroke-width="4" stroke-linecap="round"/>280          </svg>281        </div>282        <h3>2 of 327</h3>283        <div class="muted">Cal Burnt</div>284      </div>285 286      <!-- Card: Track your steps -->287      <div class="card center">288        <div class="app-icons">289          <div class="app-dot heart"></div>290          <div class="app-dot dark"></div>291          <div class="app-dot blue"></div>292          <div class="app-dot pastel"></div>293        </div>294        <h3>Track your steps</h3>295        <div class="muted">Connect now</div>296      </div>297 298      <!-- Card: Drink water -->299      <div class="card center">300        <div class="water-controls">301          <div class="pill-btn">302            <svg viewBox="0 0 24 24"><path d="M4 12h16" stroke-width="3"/></svg>303          </div>304          <div class="cup-ring">305            <div class="cup-icon">306              <svg viewBox="0 0 64 64">307                <path d="M18 18h28l-4 28H22l-4-28z" fill="#42A5F5"/>308                <path d="M20 18h24" stroke="#1E88E5" stroke-width="4"/>309              </svg>310            </div>311          </div>312          <div class="pill-btn">313            <svg viewBox="0 0 24 24"><path d="M12 4v16M4 12h16" stroke-width="3"/></svg>314          </div>315        </div>316        <h3>Drink 9 glasses</h3>317        <div class="muted">of water</div>318      </div>319 320      <!-- Card: View All Trackers -->321      <div class="card center">322        <div class="view-all">View All<br>Trackers</div>323      </div>324 325    </div>326 327    <!-- Curated for You -->328    <div class="section-title" style="margin-top: 40px;">Curated for You</div>329 330    <div class="banner">[IMG: Fitness Festival Banner - Upto 50% Off]</div>331 332  </div>333 334  <!-- Bottom home indicator -->335  <div class="bottom-safe">336    <div class="home-pill"></div>337  </div>338 339</div>340</body>341</html>