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 Render</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;11    position: relative; overflow: hidden;12    background: #333737;13  }14 15  /* Top status bar */16  .status-bar {17    height: 160px;18    background: #c58aa1;19    color: #fff;20    display: flex;21    align-items: center;22    padding: 0 32px;23    box-sizing: border-box;24  }25  .status-left {26    display: flex; align-items: center; gap: 24px;27    font-size: 48px; font-weight: 600;28  }29  .status-right {30    margin-left: auto; display: flex; align-items: center; gap: 28px;31  }32  .icon-s { width: 48px; height: 48px; }33 34  /* Header area */35  .header {36    height: 320px;37    background: #5a5a5a;38    color: #fff;39    display: flex;40    align-items: center;41    padding: 0 36px;42    box-sizing: border-box;43  }44  .hamburger {45    width: 80px; height: 80px; margin-right: 28px;46  }47  .profile {48    display: flex; align-items: center; gap: 28px;49  }50  .avatar {51    width: 140px; height: 140px; border-radius: 70px;52    background: #eee; display: flex; align-items: center; justify-content: center;53    box-shadow: inset 0 0 0 12px #fff;54  }55  .avatar-inner {56    width: 104px; height: 104px; border-radius: 52px; background: #686868;57    display: flex; justify-content: center; align-items: center;58  }59  .title-group {60    display: flex; flex-direction: column; gap: 12px;61  }62  .title-row {63    display: flex; align-items: center; gap: 12px;64  }65  .app-title { font-size: 64px; font-weight: 700; }66  .subtitle { font-size: 34px; opacity: 0.9; }67  .header-right { margin-left: auto; display: flex; align-items: center; }68  .bars-icon { width: 80px; height: 80px; }69 70  /* Icon grid */71  .grid {72    background: #3c3c3c;73    padding: 36px 36px 24px 36px;74    box-sizing: border-box;75  }76  .icon-grid {77    display: grid;78    grid-template-columns: repeat(4, 1fr);79    column-gap: 30px; row-gap: 40px;80  }81  .app-item { text-align: center; color: #fff; }82  .circle {83    width: 180px; height: 180px; border-radius: 90px;84    margin: 0 auto 18px auto;85    display: flex; align-items: center; justify-content: center;86    box-shadow: 0 2px 0 rgba(0,0,0,0.15) inset;87  }88  .label { font-size: 38px; }89  .c-purple { background: #8e72b9; }90  .c-lavender { background: #b795cf; }91  .c-teal { background: #33a6c7; }92  .c-cyan { background: #43b9cf; }93  .c-yellow { background: #f5c874; color: #fff; }94  .c-yellow2 { background: #f3d383; }95  .c-rose { background: #cf6e75; }96  .c-rose2 { background: #d07178; }97 98  .circle svg { width: 96px; height: 96px; fill: #fff; }99 100  /* Mid strip */101  .mid-strip {102    height: 96px;103    background: #6a5860;104    display: flex; align-items: center;105    padding: 0 36px; box-sizing: border-box;106  }107  .scrubber {108    width: 520px; height: 16px; border-radius: 10px;109    background: #9b8d97; margin: 0 auto;110    position: relative;111  }112  .scrubber::after {113    content: ""; position: absolute; left: 40%; top: -4px;114    width: 240px; height: 24px; border-radius: 12px; background: #bfbfc0;115  }116  .mid-menu {117    margin-left: auto; width: 70px; height: 70px;118  }119 120  /* Spacer area */121  .content-spacer {122    height: 1500px;123    background: #3c3c3c;124  }125 126  /* Bottom banner */127  .offline-banner {128    position: absolute; bottom: 100px; left: 0;129    width: 100%; height: 120px; background: #666;130    color: #fff; display: flex; align-items: center; justify-content: center;131    font-size: 42px;132    box-sizing: border-box; padding-right: 120px;133  }134  .close-x {135    position: absolute; right: 36px; top: 50%;136    transform: translateY(-50%);137    width: 64px; height: 64px;138  }139 140  /* Home indicator */141  .home-indicator {142    position: absolute; bottom: 24px; left: 50%;143    transform: translateX(-50%);144    width: 220px; height: 14px; border-radius: 7px;145    background: #e6e6e6; opacity: 0.9;146  }147</style>148</head>149<body>150<div id="render-target">151 152  <!-- Top Status Bar -->153  <div class="status-bar">154    <div class="status-left">155      <div>8:36</div>156      <!-- stroller icon -->157      <svg class="icon-s" viewBox="0 0 24 24">158        <path d="M3 10h9l3-6H7a4 4 0 0 0-4 4v2zm3 7a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm11 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-9-2h9a3 3 0 0 0 3-3H8l0 3z"></path>159      </svg>160      <!-- calendar icon -->161      <svg class="icon-s" viewBox="0 0 24 24">162        <path d="M6 2h2v3h8V2h2v3h3v17H3V5h3V2zm-1 7h14v10H5V9z"></path>163      </svg>164    </div>165    <div class="status-right">166      <!-- battery icon -->167      <svg class="icon-s" viewBox="0 0 24 24">168        <path d="M17 7h2v10h-2V7zM4 7h12v10H4V7z"></path>169      </svg>170    </div>171  </div>172 173  <!-- Header -->174  <div class="header">175    <!-- Hamburger -->176    <svg class="hamburger" viewBox="0 0 24 24">177      <path fill="#fff" d="M3 6h18v2H3zM3 11h18v2H3zM3 16h18v2H3z"></path>178    </svg>179 180    <div class="profile">181      <div class="avatar">182        <div class="avatar-inner">183          <!-- camera icon -->184          <svg viewBox="0 0 24 24">185            <path d="M9 4h6l2 3h3v13H4V7h3l2-3zm3 5a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm0 2a3 3 0 1 1 0 6 3 3 0 0 1 0-6z"></path>186          </svg>187        </div>188      </div>189 190      <div class="title-group">191        <div class="title-row">192          <div class="app-title">Research</div>193          <!-- caret -->194          <svg width="28" height="28" viewBox="0 0 24 24">195            <path fill="#fff" d="M7 9l5 5 5-5H7z"></path>196          </svg>197        </div>198        <div class="subtitle">9 days old (1 week)</div>199      </div>200    </div>201 202    <div class="header-right">203      <!-- bar chart icon -->204      <svg class="bars-icon" viewBox="0 0 24 24">205        <path fill="#fff" d="M5 14h3v6H5v-6zm5-9h3v15h-3V5zm5 6h3v9h-3v-9z"></path>206      </svg>207    </div>208  </div>209 210  <!-- Icon Grid Section -->211  <div class="grid">212    <div class="icon-grid">213      <!-- Photo -->214      <div class="app-item">215        <div class="circle c-purple">216          <svg viewBox="0 0 24 24">217            <path d="M9 5h6l2 3h3v12H4V8h3l2-3zm3 5a5 5 0 1 0 0 10 5 5 0 0 0 0-10z"></path>218          </svg>219        </div>220        <div class="label">Photo</div>221      </div>222 223      <!-- Diary -->224      <div class="app-item">225        <div class="circle c-lavender">226          <svg viewBox="0 0 24 24">227            <path d="M6 3h12v18H6V3zm2 3h8v2H8V6zm0 4h8v2H8v-2zm0 4h6v2H8v-2z"></path>228          </svg>229        </div>230        <div class="label">Diary</div>231      </div>232 233      <!-- Pumping -->234      <div class="app-item">235        <div class="circle c-teal">236          <svg viewBox="0 0 24 24">237            <path d="M14 4h6v3h-6l-3 3v8a4 4 0 1 1-8 0V9h6l3-3V4z"></path>238          </svg>239        </div>240        <div class="label">Pumping</div>241      </div>242 243      <!-- Milk Stash -->244      <div class="app-item">245        <div class="circle c-cyan">246          <svg viewBox="0 0 24 24">247            <path d="M9 2h6v4l3 3v11H6V9l3-3V2zm1 8h8v2H10v-2zm0 4h8v2H10v-2zm0 4h8v2H10v-2z"></path>248          </svg>249        </div>250        <div class="label">Milk Stash</div>251      </div>252 253      <!-- Call -->254      <div class="app-item">255        <div class="circle c-yellow">256          <svg viewBox="0 0 24 24">257            <path d="M6 3l5 3-3 4 4 4 4-3 3 5c-3 3-8 4-13-1S3 6 6 3z"></path>258          </svg>259        </div>260        <div class="label">Call</div>261      </div>262 263      <!-- My Location -->264      <div class="app-item">265        <div class="circle c-yellow2">266          <svg viewBox="0 0 24 24">267            <path d="M12 2a7 7 0 0 1 7 7c0 5-7 13-7 13S5 14 5 9a7 7 0 0 1 7-7zm0 4a3 3 0 1 0 0 6 3 3 0 0 0 0-6z"></path>268          </svg>269        </div>270        <div class="label">My Location</div>271      </div>272 273      <!-- Solid -->274      <div class="app-item">275        <div class="circle c-rose">276          <svg viewBox="0 0 24 24">277            <path d="M4 15l16-8v4l-7 3 7 3v4L4 16v-1z"></path>278          </svg>279        </div>280        <div class="label">Solid</div>281      </div>282 283      <!-- Bottle -->284      <div class="app-item">285        <div class="circle c-rose2">286          <svg viewBox="0 0 24 24">287            <path d="M10 3h4v3h2v3h-2v12h-4V9H8V6h2V3zm0 6h4v2h-4V9zm0 4h4v2h-4v-2zm0 4h4v2h-4v-2z"></path>288          </svg>289        </div>290        <div class="label">Bottle</div>291      </div>292    </div>293  </div>294 295  <!-- Middle strip with scrubber and menu icon -->296  <div class="mid-strip">297    <div class="scrubber"></div>298    <svg class="mid-menu" viewBox="0 0 24 24">299      <path fill="#fff" d="M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z"></path>300    </svg>301  </div>302 303  <!-- Spacer area to match screenshot empty content -->304  <div class="content-spacer"></div>305 306  <!-- Offline banner -->307  <div class="offline-banner">308    No Internet Connection309    <svg class="close-x" viewBox="0 0 24 24">310      <path fill="#fff" d="M5 5l14 14m0-14L5 19" stroke="#fff" stroke-width="2" fill="none"></path>311    </svg>312  </div>313 314  <!-- Home indicator -->315  <div class="home-indicator"></div>316 317</div>318</body>319</html>