GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Mobile UI Render</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #121212;13    color: #E6E6E6;14  }15 16  /* Status bar */17  .status-bar {18    height: 110px;19    padding: 24px 32px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    color: #F5F5F5;24    font-size: 44px;25  }26  .status-right { display: flex; gap: 26px; align-items: center; }27  .status-icon { width: 42px; height: 42px; opacity: 0.9; }28  .status-icon svg { width: 100%; height: 100%; fill: #E6E6E6; }29 30  /* Content area */31  .content { padding: 8px 36px 0 36px; }32 33  /* Calendar strip */34  .calendar-top { color: #7E8B93; font-size: 32px; margin: 8px 0 12px; }35  .day-strip {36    display: flex;37    gap: 26px;38    align-items: center;39    background: #1c1c1c;40    border-radius: 22px;41    padding: 16px 26px;42    color: #AAB4BE;43    width: 100%;44  }45  .day-strip .days { margin-left: auto; display: flex; gap: 52px; letter-spacing: 2px; }46  .day-strip .days span.active {47    color: #FFFFFF;48    font-weight: bold;49  }50 51  /* Cards */52  .card {53    background: #1e1e1e;54    border-radius: 26px;55    padding: 32px;56    margin-top: 24px;57    position: relative;58  }59  .card-header {60    display: flex;61    align-items: center;62    justify-content: space-between;63  }64  .card-header .title {65    font-size: 46px;66    font-weight: 600;67    color: #FFFFFF;68  }69  .card-header .chevron {70    width: 40px; height: 40px; opacity: 0.8;71  }72  .sub { color: #A7ADB4; font-size: 30px; margin-top: 6px; }73 74  /* Weekly target specifics */75  .big-green { color: #24D59B; font-size: 58px; font-weight: 700; margin-right: 12px; }76  .green { color: #24D59B; font-size: 40px; }77  .progress-area { margin-top: 24px; }78  .progress-track {79    height: 22px;80    background: #2a2a2a;81    border-radius: 12px;82    margin-top: 16px;83    position: relative;84    overflow: hidden;85  }86  .progress-fill {87    height: 100%;88    width: 70px; /* small progress */89    background: #1ab07d;90  }91  .desc {92    color: #A7ADB4;93    font-size: 34px;94    line-height: 48px;95    margin-top: 28px;96    max-width: 760px;97  }98  .aha-badge {99    position: absolute;100    right: 28px;101    bottom: 28px;102    width: 180px;103    height: 160px;104    background: #E0E0E0;105    border: 1px solid #BDBDBD;106    display: flex;107    align-items: center;108    justify-content: center;109    color: #757575;110    border-radius: 18px;111    text-align: center;112    font-size: 28px;113    padding: 8px;114  }115 116  /* Workout card */117  .details { display: flex; align-items: center; gap: 14px; color: #A7ADB4; font-size: 34px; margin-top: 14px; }118  .walk-icon { width: 36px; height: 36px; opacity: 0.9; }119  .map {120    margin-top: 24px;121    height: 520px;122    background: #E0E0E0;123    border: 1px solid #BDBDBD;124    border-radius: 18px;125    display: flex;126    align-items: center;127    justify-content: center;128    color: #757575;129    font-size: 32px;130  }131 132  /* Notification card */133  .notif-title { font-size: 46px; font-weight: 600; color: #FFFFFF; display: flex; align-items: center; justify-content: space-between; }134  .close-x {135    width: 44px; height: 44px; border-radius: 50%;136    display: inline-flex; align-items: center; justify-content: center;137    color: #C4C4C4; font-size: 30px; background: transparent; border: 1px solid #333;138  }139  .notif .desc { max-width: 880px; }140  .link { color: #69A6FF; font-size: 38px; margin-top: 24px; }141 142  /* Label */143  .section-label { color: #C4C4C4; font-size: 32px; margin: 30px 8px 0; letter-spacing: 3px; }144 145  /* Floating action button */146  .fab {147    position: absolute;148    right: 52px;149    bottom: 540px;150    width: 160px;151    height: 160px;152    border-radius: 50%;153    border: none;154    box-shadow: 0 10px 24px rgba(0,0,0,0.5);155    background: #2A2A2A;156    color: #E6E6E6;157    font-size: 94px;158    line-height: 160px;159    text-align: center;160    cursor: default;161  }162 163  /* Bottom navigation */164  .bottom-nav {165    position: absolute;166    left: 0; right: 0; bottom: 134px;167    height: 190px;168    background: #1a1a1a;169    display: flex;170    padding: 22px 40px;171    justify-content: space-around;172    align-items: center;173    border-top: 1px solid #252525;174  }175  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 14px; color: #A7ADB4; }176  .nav-item .text { font-size: 34px; }177  .nav-item.active { color: #FFFFFF; }178  .nav-icon { width: 70px; height: 70px; opacity: 0.95; }179  .nav-icon svg { width: 100%; height: 100%; fill: currentColor; }180 181  /* Gesture bar */182  .gesture-bar {183    position: absolute;184    left: 50%;185    transform: translateX(-50%);186    bottom: 48px;187    width: 360px;188    height: 14px;189    background: #EAEAEA;190    border-radius: 8px;191    opacity: 0.9;192  }193</style>194</head>195<body>196<div id="render-target">197 198  <!-- Status bar -->199  <div class="status-bar">200    <div>11:43</div>201    <div class="status-right">202      <div class="status-icon">203        <!-- play triangle (approx Google Play) -->204        <svg viewBox="0 0 24 24"><path d="M5 3l14 9-14 9V3z"></path></svg>205      </div>206      <div class="status-icon">207        <!-- wifi -->208        <svg viewBox="0 0 24 24"><path d="M12 18a2 2 0 1 0 0.001 3.999A2 2 0 0 0 12 18zm-8-6a14 14 0 0 1 16 0l-2 2a10 10 0 0 0-12 0l-2-2zm4-4a18 18 0 0 1 8 0l-2 2a14 14 0 0 0-4 0l-2-2z"></path></svg>209      </div>210      <div class="status-icon">211        <!-- notifications -->212        <svg viewBox="0 0 24 24"><path d="M12 2a6 6 0 0 0-6 6v4.5L4 14v2h16v-2l-2-1.5V8a6 6 0 0 0-6-6zm0 20a3 3 0 0 0 3-3H9a3 3 0 0 0 3 3z"></path></svg>213      </div>214      <div class="status-icon">215        <!-- battery -->216        <svg viewBox="0 0 24 24"><path d="M16 4h3v3h-3V4zM5 7h11a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2zm1 3v8h9V10H6z"></path></svg>217      </div>218    </div>219  </div>220 221  <!-- Content area -->222  <div class="content">223    <div class="calendar-top">Achieved</div>224    <div class="day-strip">225      <div>W</div><div>T</div><div>F</div><div>S</div><div>S</div><div>M</div>226      <div class="days">227        <span>W</span><span>T</span><span>F</span><span>S</span><span>S</span><span>M</span><span class="active">T</span>228      </div>229    </div>230 231    <!-- Weekly target card -->232    <div class="card weekly">233      <div class="card-header">234        <div class="title">Your weekly target</div>235        <div class="chevron">236          <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"></path></svg>237        </div>238      </div>239      <div class="sub">Oct 1 – 7</div>240      <div class="progress-area">241        <span class="big-green">5</span><span class="green">of 150</span>242        <div class="progress-track">243          <div class="progress-fill"></div>244        </div>245      </div>246      <div class="desc">247        Scoring 150 Heart Points a week can help you live longer, sleep better, and boost your mood248      </div>249      <div class="aha-badge">[IMG: American Heart Association badge]</div>250    </div>251 252    <!-- Last workout card -->253    <div class="card workout">254      <div class="card-header">255        <div class="title">Last workout • Late night walk</div>256        <div class="chevron">257          <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"></path></svg>258        </div>259      </div>260      <div class="details">261        <div class="walk-icon">262          <svg viewBox="0 0 24 24"><path d="M13 3a2 2 0 1 1 .001 3.999A2 2 0 0 1 13 3zm-2 6h3l2 3-1.5 1.5L13 11l-2 3v5H8v-6l2-4z"></path></svg>263        </div>264        <div>Oct 3 • 11:41 PM • 1 min</div>265      </div>266      <div class="map">[IMG: Google Map of route]</div>267    </div>268 269    <!-- Notification card -->270    <div class="card notif">271      <div class="notif-title">272        <span>Get notifications from Fit</span>273        <span class="close-x">×</span>274      </div>275      <div class="desc">Allow Fit to send notifications to get coaching messages and tips to help you meet your goals</div>276      <div class="link">Turn on notifications</div>277    </div>278 279    <div class="section-label">TRENDS</div>280  </div>281 282  <!-- Floating action button -->283  <button class="fab">+</button>284 285  <!-- Bottom navigation -->286  <div class="bottom-nav">287    <div class="nav-item active">288      <div class="nav-icon">289        <!-- home icon (circle with heart-like center) -->290        <svg viewBox="0 0 24 24"><path d="M12 3l9 7v10a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1V10l9-7z"></path></svg>291      </div>292      <div class="text">Home</div>293    </div>294    <div class="nav-item">295      <div class="nav-icon">296        <!-- clipboard -->297        <svg viewBox="0 0 24 24"><path d="M9 3h6v2h3a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h3V3zm0 6h6v2H9V9zm0 4h6v2H9v-2z"></path></svg>298      </div>299      <div class="text">Journal</div>300    </div>301    <div class="nav-item">302      <div class="nav-icon">303        <!-- list -->304        <svg viewBox="0 0 24 24"><path d="M4 6h16v2H4V6zm0 5h16v2H4v-2zm0 5h16v2H4v-2z"></path></svg>305      </div>306      <div class="text">Feed</div>307    </div>308    <div class="nav-item">309      <div class="nav-icon">310        <!-- person -->311        <svg viewBox="0 0 24 24"><path d="M12 12a4 4 0 1 0-0.001-7.999A4 4 0 0 0 12 12zm-7 8c0-4 4-6 7-6s7 2 7 6v1H5v-1z"></path></svg>312      </div>313      <div class="text">Profile</div>314    </div>315  </div>316 317  <!-- Gesture bar -->318  <div class="gesture-bar"></div>319 320</div>321</body>322</html>