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>UI Reconstruction</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: #2f2f2f;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16    color: #fff;17  }18 19  /* Status bar */20  .statusbar {21    position: absolute;22    top: 0; left: 0; right: 0;23    height: 170px;24    background: #c78ea3;25    padding: 36px 40px 0 40px;26    box-sizing: border-box;27    display: flex;28    align-items: center;29    justify-content: space-between;30  }31  .status-left {32    display: flex;33    align-items: center;34    gap: 28px;35  }36  .status-left .time {37    font-weight: 600;38    font-size: 52px;39    letter-spacing: 0.5px;40  }41  .status-icon {42    width: 44px; height: 44px;43  }44  .status-right {45    display: flex;46    align-items: center;47  }48  .battery {49    width: 40px; height: 60px;50  }51 52  /* App header */53  .app-header {54    position: absolute;55    top: 170px; left: 0; right: 0;56    height: 210px;57    background: #5e5e5e;58    display: flex;59    align-items: center;60    padding: 0 36px;61    box-sizing: border-box;62  }63  .hamburger {64    width: 80px; height: 80px; margin-right: 24px;65  }66  .header-center {67    display: flex;68    align-items: center;69    gap: 26px;70    flex: 1;71  }72  .avatar {73    width: 120px; height: 120px; border-radius: 60px;74    background: #E0E0E0; border: 1px solid #BDBDBD;75    display: flex; justify-content: center; align-items: center;76    color: #757575; font-weight: 600;77  }78  .title-wrap {79    display: flex;80    flex-direction: column;81    justify-content: center;82  }83  .title-row {84    display: flex;85    align-items: center;86    gap: 12px;87  }88  .title {89    font-size: 64px; font-weight: 700; line-height: 1;90  }91  .subtitle {92    margin-top: 12px;93    font-size: 34px; color: #e7e7e7;94  }95  .header-right {96    display: flex; align-items: center; justify-content: center;97    width: 120px;98  }99  .chart-icon { width: 68px; height: 68px; }100 101  /* Grid of actions */102  .grid {103    position: absolute;104    top: 430px; left: 0; right: 0;105    padding: 0 60px;106    box-sizing: border-box;107    display: grid;108    grid-template-columns: repeat(4, 1fr);109    column-gap: 40px;110    row-gap: 54px;111  }112  .grid-item {113    text-align: center;114  }115  .circle {116    width: 180px; height: 180px; border-radius: 50%;117    margin: 0 auto 18px auto;118    display: flex; align-items: center; justify-content: center;119    position: relative;120  }121  .circle .img-placeholder {122    width: 110px; height: 110px;123    background: #E0E0E0; border: 1px solid #BDBDBD;124    display: flex; align-items: center; justify-content: center;125    color: #757575; font-size: 20px; padding: 6px; box-sizing: border-box;126    border-radius: 14px;127  }128  .label {129    font-size: 36px;130    color: #f4f4f4;131  }132 133  /* Pager/slider bar */134  .pager {135    position: absolute;136    top: 950px; left: 0; right: 0;137    height: 70px; background: #6c5a62;138  }139  .pager-track {140    width: 540px; height: 14px; border-radius: 7px;141    background: #a6a6a6;142    position: absolute; left: 270px; top: 28px;143  }144  .pager-right {145    position: absolute; right: 0; top: 0;146    width: 160px; height: 70px;147    display: flex; align-items: center; justify-content: center;148  }149  .list-icon { width: 44px; height: 44px; }150 151  /* Connection toast */152  .toast {153    position: absolute; left: 0; right: 0; bottom: 140px;154    height: 120px; background: #5e5e5e;155    display: flex; align-items: center; justify-content: center;156    font-size: 42px; font-weight: 600; color: #fff;157  }158  .toast .close {159    position: absolute; right: 26px; top: 26px;160    width: 48px; height: 48px;161  }162 163  /* Bottom safe area */164  .bottom-area {165    position: absolute; left: 0; right: 0; bottom: 0;166    height: 140px; background: #000;167  }168  .home-pill {169    position: absolute; left: 50%; transform: translateX(-50%);170    bottom: 40px;171    width: 320px; height: 12px;172    background: #e6e6e6; border-radius: 12px;173  }174</style>175</head>176<body>177<div id="render-target">178 179  <!-- Status Bar -->180  <div class="statusbar">181    <div class="status-left">182      <div class="time">8:36</div>183      <!-- Baby stroller icon -->184      <svg class="status-icon" viewBox="0 0 24 24">185        <path fill="#ffffff" d="M3 7h10a4 4 0 0 1 4 4h-1a3 3 0 0 0-3-3H6l3 4H4L3 7zM7 19a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm10 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/>186      </svg>187      <!-- Calendar icon -->188      <svg class="status-icon" viewBox="0 0 24 24">189        <rect x="3" y="4" width="18" height="16" rx="2" fill="#ffffff"/>190        <rect x="5" y="9" width="14" height="9" fill="#c78ea3"/>191        <rect x="7" y="12" width="4" height="3" fill="#ffffff"/>192      </svg>193    </div>194    <div class="status-right">195      <!-- Battery icon -->196      <svg class="battery" viewBox="0 0 26 16">197        <rect x="1" y="1" width="22" height="14" rx="2" fill="none" stroke="#ffffff" stroke-width="2"/>198        <rect x="24" y="5" width="2" height="6" fill="#ffffff"/>199        <rect x="3" y="3" width="16" height="10" fill="#ffffff"/>200      </svg>201    </div>202  </div>203 204  <!-- App Header -->205  <div class="app-header">206    <!-- Hamburger -->207    <svg class="hamburger" viewBox="0 0 100 100">208      <rect x="10" y="22" width="80" height="10" fill="#ffffff"/>209      <rect x="10" y="45" width="80" height="10" fill="#ffffff"/>210      <rect x="10" y="68" width="80" height="10" fill="#ffffff"/>211    </svg>212 213    <div class="header-center">214      <div class="avatar">[IMG: Camera]</div>215      <div class="title-wrap">216        <div class="title-row">217          <div class="title">Research</div>218          <!-- Dropdown arrow -->219          <svg width="28" height="28" viewBox="0 0 24 24">220            <path d="M6 9l6 6 6-6" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>221          </svg>222        </div>223        <div class="subtitle">9 days old (1 week)</div>224      </div>225    </div>226 227    <div class="header-right">228      <!-- Chart icon -->229      <svg class="chart-icon" viewBox="0 0 24 24">230        <rect x="3" y="12" width="4" height="9" fill="#ffffff" rx="1"/>231        <rect x="10" y="7" width="4" height="14" fill="#ffffff" rx="1"/>232        <rect x="17" y="4" width="4" height="17" fill="#ffffff" rx="1"/>233      </svg>234    </div>235  </div>236 237  <!-- Grid of icons -->238  <div class="grid">239    <!-- Row 1 -->240    <div class="grid-item">241      <div class="circle" style="background:#d77b85;">242        <div class="img-placeholder">[IMG: Feed]</div>243      </div>244      <div class="label">Feed</div>245    </div>246    <div class="grid-item">247      <div class="circle" style="background:#9fd9ea;">248        <div class="img-placeholder">[IMG: Diaper]</div>249      </div>250      <div class="label">Diaper</div>251    </div>252    <div class="grid-item">253      <div class="circle" style="background:#5177ab;">254        <div class="img-placeholder">[IMG: Sleep]</div>255      </div>256      <div class="label">Sleep</div>257    </div>258    <div class="grid-item">259      <div class="circle" style="background:#e7c57b;">260        <div class="img-placeholder">[IMG: Mood]</div>261      </div>262      <div class="label">Mood</div>263    </div>264 265    <!-- Row 2 -->266    <div class="grid-item">267      <div class="circle" style="background:#8f76a8;">268        <div class="img-placeholder">[IMG: Activity]</div>269      </div>270      <div class="label">Activity</div>271    </div>272    <div class="grid-item">273      <div class="circle" style="background:#d7c3a0;">274        <div class="img-placeholder">[IMG: Medical]</div>275      </div>276      <div class="label">Medical</div>277    </div>278    <div class="grid-item">279      <div class="circle" style="background:#78b87b;">280        <div class="img-placeholder">[IMG: Message]</div>281      </div>282      <div class="label">Message</div>283    </div>284    <div class="grid-item">285      <div class="circle" style="background:#f0c174;">286        <div class="img-placeholder">[IMG: Milestone]</div>287      </div>288      <div class="label">Milestone</div>289    </div>290 291    <!-- Row 3 -->292    <div class="grid-item">293      <div class="circle" style="background:#9077aa;">294        <div class="img-placeholder">[IMG: Camera]</div>295      </div>296      <div class="label">Camera</div>297    </div>298    <div class="grid-item">299      <div class="circle" style="background:#9077aa;">300        <div class="img-placeholder">[IMG: Journal]</div>301      </div>302      <div class="label">Journal</div>303    </div>304    <div class="grid-item">305      <div class="circle" style="background:#2fb1c3;">306        <div class="img-placeholder">[IMG: Pump]</div>307      </div>308      <div class="label">Pump</div>309    </div>310    <div class="grid-item">311      <div class="circle" style="background:#2fb1c3;">312        <div class="img-placeholder">[IMG: Bottle]</div>313      </div>314      <div class="label">Bottle</div>315    </div>316  </div>317 318  <!-- Pager Bar -->319  <div class="pager">320    <div class="pager-track"></div>321    <div class="pager-right">322      <svg class="list-icon" viewBox="0 0 24 24">323        <rect x="4" y="6" width="16" height="2" fill="#ffffff"/>324        <rect x="4" y="11" width="16" height="2" fill="#ffffff"/>325        <rect x="4" y="16" width="16" height="2" fill="#ffffff"/>326      </svg>327    </div>328  </div>329 330  <!-- Toast -->331  <div class="toast">332    No Internet Connection333    <svg class="close" viewBox="0 0 24 24">334      <path d="M5 5l14 14M19 5L5 19" stroke="#ffffff" stroke-width="3" stroke-linecap="round"/>335    </svg>336  </div>337 338  <!-- Bottom safe area -->339  <div class="bottom-area">340    <div class="home-pill"></div>341  </div>342 343</div>344</body>345</html>