GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>UI Reproduction</title>6<style>7 body { margin:0; padding:0; background: transparent; }8 #render-target {9 width:1080px; height:2400px; position:relative; overflow:hidden;10 background:#2f2f2f; color:#fff; font-family: Arial, Helvetica, sans-serif;11 }12 13 /* Status bar */14 .statusBar {15 position:absolute; top:0; left:0; width:100%; height:170px;16 background:#cf8fa3;17 }18 .statusContent { display:flex; align-items:center; justify-content:space-between; padding:34px 36px; }19 .statusLeft { display:flex; align-items:center; gap:26px; font-size:46px; }20 .statusIcons svg { width:44px; height:44px; fill:#fff; opacity:0.9; }21 .battery svg { width:50px; height:50px; fill:#fff; }22 23 /* Header */24 .header {25 position:absolute; top:170px; left:0; width:100%; height:240px;26 background:#5e5e5e;27 box-sizing:border-box;28 }29 .headerContent { display:flex; align-items:center; padding:36px; gap:34px; }30 .hamburger { width:70px; height:70px; display:flex; align-items:center; justify-content:center; }31 .hamburger svg { width:54px; height:54px; fill:#fff; opacity:0.95; }32 .avatar {33 width:120px; height:120px; border-radius:60px; background:#d7d7d7;34 display:flex; align-items:center; justify-content:center; position:relative;35 }36 .avatar svg { width:70px; height:70px; fill:#666; }37 .titleBlock { display:flex; flex-direction:column; gap:8px; }38 .appTitle { font-size:72px; font-weight:700; letter-spacing:0.5px; display:flex; align-items:center; gap:12px; }39 .subtitle { font-size:32px; color:#ddd; }40 .chev { width:26px; height:26px; border-left:12px solid transparent; border-right:12px solid transparent; border-top:18px solid #fff; margin-top:8px; }41 .chartIcon { margin-left:auto; }42 .chartIcon svg { width:64px; height:64px; fill:#fff; }43 44 /* App grid */45 .grid {46 position:absolute; top:410px; left:0; width:100%;47 padding:32px 24px 20px; background:#303030; box-sizing:border-box;48 }49 .tiles { display:flex; flex-wrap:wrap; gap:30px 38px; }50 .tile {51 width:230px; position:relative; text-align:center;52 }53 .circle {54 width:170px; height:170px; border-radius:85px; margin:0 auto 12px auto;55 display:flex; align-items:center; justify-content:center;56 }57 .tileLabel { font-size:36px; color:#fff; }58 .agoTag {59 position:absolute; top:-10px; left:10px; background:transparent;60 color:#fff; font-size:30px; font-weight:700; text-shadow:0 2px 0 rgba(0,0,0,0.6);61 }62 /* Circle colors */63 .c-feed { background:#d66f76; }64 .c-diaper { background:#8fd1e7; }65 .c-sleep { background:#3b6aa6; }66 .c-mood { background:#f1c572; }67 .c-activity { background:#8c6fc6; }68 .c-medical { background:#e7c79b; }69 .c-message { background:#79c68e; }70 .c-milestone { background:#f1c980; }71 .circle svg { width:80%; height:80%; fill:#fff; opacity:0.95; }72 73 /* Mid scrub bar */74 .scrub {75 position:absolute; top:960px; left:0; width:100%; height:64px;76 background:#6a5156; display:flex; align-items:center; justify-content:center;77 }78 .scrub .thumb {79 width:480px; height:12px; background:#b9b2b4; border-radius:6px;80 }81 .scrub .listIcon {82 position:absolute; right:26px; width:70px; height:64px; display:flex; align-items:center; justify-content:center;83 }84 .scrub .listIcon svg { width:44px; height:44px; fill:#ddd; }85 86 /* Activity feed */87 .feedList { position:absolute; top:1024px; left:0; width:100%; padding:34px 40px; box-sizing:border-box; }88 .entry { display:flex; gap:26px; padding:26px 0; border-bottom:1px solid rgba(255,255,255,0.08); }89 .entryIcon { width:96px; height:96px; border-radius:48px; display:flex; align-items:center; justify-content:center; }90 .entryIcon svg { width:70px; height:70px; fill:#fff; }91 .entryText { line-height:1.4; font-size:38px; color:#fff; }92 .entryText .dim { color:#cfcfcf; }93 .entryText strong { font-weight:800; }94 95 /* Bottom connection bar */96 .bottomBar {97 position:absolute; bottom:0; left:0; width:100%; height:160px;98 background:#5b5b5b; display:flex; align-items:center; justify-content:center;99 font-size:44px; color:#fff;100 }101 .closeX {102 position:absolute; right:26px; bottom:40px; width:84px; height:84px;103 border:2px solid #ddd; border-radius:42px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:46px; opacity:0.9;104 }105 .toast {106 position:absolute; bottom:170px; left:50%; transform:translateX(-50%);107 background:#86aaf8; color:#fff; padding:18px 28px; border-radius:16px; font-size:34px; box-shadow:0 6px 12px rgba(0,0,0,0.25);108 }109 110 /* Home indicator */111 .homeIndicator {112 position:absolute; bottom:24px; left:50%; transform:translateX(-50%);113 width:360px; height:10px; background:#fff; border-radius:6px; opacity:0.9;114 }115</style>116</head>117<body>118<div id="render-target">119 120 <!-- Status Bar -->121 <div class="statusBar">122 <div class="statusContent">123 <div class="statusLeft">124 <div>8:52</div>125 <div class="statusIcons">126 <!-- stroller icon -->127 <svg viewBox="0 0 24 24">128 <path d="M6 11h10l2-6H8a4 4 0 0 0-4 4v2zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm10 0a3 3 0 1 0 0 6 3 3 0 0 0 0-6z"/>129 </svg>130 </div>131 <div class="statusIcons">132 <!-- calendar icon -->133 <svg viewBox="0 0 24 24">134 <path d="M5 3h14v4H5zM3 8h18v13H3z"/>135 </svg>136 </div>137 </div>138 <div class="battery">139 <!-- battery icon -->140 <svg viewBox="0 0 24 24">141 <path d="M2 7h18v10H2zM20 10h2v4h-2z"/>142 </svg>143 </div>144 </div>145 </div>146 147 <!-- Header -->148 <div class="header">149 <div class="headerContent">150 <div class="hamburger">151 <svg viewBox="0 0 24 24">152 <path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/>153 </svg>154 </div>155 <div class="avatar">156 <!-- camera icon inside avatar -->157 <svg viewBox="0 0 24 24">158 <path d="M5 7h4l1-2h4l1 2h4v12H5zM12 10a4 4 0 1 0 0 8 4 4 0 0 0 0-8z"/>159 </svg>160 </div>161 <div class="titleBlock">162 <div class="appTitle">Research <span class="chev"></span></div>163 <div class="subtitle">9 days old (1 week)</div>164 </div>165 <div class="chartIcon">166 <!-- bar chart -->167 <svg viewBox="0 0 24 24">168 <path d="M3 20h18v2H3zM5 16h3v4H5zM10 10h3v10h-3zM15 6h3v14h-3z"/>169 </svg>170 </div>171 </div>172 </div>173 174 <!-- Grid of actions -->175 <div class="grid">176 <div class="tiles">177 <!-- Feed -->178 <div class="tile">179 <div class="agoTag">13m ago</div>180 <div class="circle c-feed">181 <svg viewBox="0 0 24 24">182 <path d="M7 4h6v2H7zM5 7h10v2H5zM4 10h12v7a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3v-7z"/>183 </svg>184 </div>185 <div class="tileLabel">Feed</div>186 </div>187 188 <!-- Diaper -->189 <div class="tile">190 <div class="agoTag">8m ago</div>191 <div class="circle c-diaper">192 <svg viewBox="0 0 24 24">193 <path d="M3 7h18v5H3zM5 12h4v3H5zM15 12h4v3h-4z"/>194 </svg>195 </div>196 <div class="tileLabel">Diaper</div>197 </div>198 199 <!-- Sleep -->200 <div class="tile">201 <div class="circle c-sleep">202 <svg viewBox="0 0 24 24">203 <path d="M14 3a8 8 0 1 0 7 13A7 7 0 0 1 14 3zM6 9l1 2-2-1zM18 10l1 2-2-1zM12 7l1 2-2-1z"/>204 </svg>205 </div>206 <div class="tileLabel">Sleep</div>207 </div>208 209 <!-- Mood -->210 <div class="tile">211 <div class="circle c-mood">212 <svg viewBox="0 0 24 24">213 <path d="M4 4h16v16H4zM8 9h2v2H8zM14 9h2v2h-2zM8 15h8a4 4 0 0 1-8 0z"/>214 </svg>215 </div>216 <div class="tileLabel">Mood</div>217 </div>218 219 <!-- Activity -->220 <div class="tile">221 <div class="circle c-activity">222 <svg viewBox="0 0 24 24">223 <path d="M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4z"/>224 </svg>225 </div>226 <div class="tileLabel">Activity</div>227 </div>228 229 <!-- Medical -->230 <div class="tile">231 <div class="circle c-medical">232 <svg viewBox="0 0 24 24">233 <path d="M12 4a4 4 0 1 1 0 8 4 4 0 0 1 0-8zM5 20a7 7 0 0 1 14 0H5z"/>234 </svg>235 </div>236 <div class="tileLabel">Medical</div>237 </div>238 239 <!-- Message -->240 <div class="tile">241 <div class="circle c-message">242 <svg viewBox="0 0 24 24">243 <path d="M3 5h18v12H7l-4 4V5z"/>244 </svg>245 </div>246 <div class="tileLabel">Message</div>247 </div>248 249 <!-- Milestone -->250 <div class="tile">251 <div class="circle c-milestone">252 <svg viewBox="0 0 24 24">253 <path d="M12 3l3 6 6 1-4 4 1 7-6-3-6 3 1-7-4-4 6-1z"/>254 </svg>255 </div>256 <div class="tileLabel">Milestone</div>257 </div>258 </div>259 </div>260 261 <!-- Middle scrub bar -->262 <div class="scrub">263 <div class="thumb"></div>264 <div class="listIcon">265 <svg viewBox="0 0 24 24">266 <path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z"/>267 </svg>268 </div>269 </div>270 271 <!-- Recent entries list -->272 <div class="feedList">273 <!-- Sleep entry -->274 <div class="entry">275 <div class="entryIcon" style="background:#6aa6cf;">276 <svg viewBox="0 0 24 24">277 <path d="M14 3a8 8 0 1 0 7 13A7 7 0 0 1 14 3z"/>278 </svg>279 </div>280 <div class="entryText">281 <div>Sleep: <strong>2m (1x)</strong></div>282 <div>Woke up <strong>Just Now</strong> <span class="dim">at 08:52 AM</span></div>283 </div>284 </div>285 286 <!-- Nursing entry -->287 <div class="entry">288 <div class="entryIcon" style="background:#d66f76;">289 <svg viewBox="0 0 24 24">290 <path d="M7 4h6v2H7zM4 10h12v7a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3v-7z"/>291 </svg>292 </div>293 <div class="entryText">294 <div>Nursing: <strong>2m (2m L, 0 R) (1x)</strong></div>295 <div>Last <strong>13m ago (Last: Left)</strong> <span class="dim">at 08:39 AM</span></div>296 </div>297 </div>298 299 <!-- Diaper entry -->300 <div class="entry">301 <div class="entryIcon" style="background:#8fd1e7;">302 <svg viewBox="0 0 24 24">303 <path d="M3 7h18v5H3zM5 12h4v3H5zM15 12h4v3h-4z"/>304 </svg>305 </div>306 <div class="entryText">307 <div>Diaper: <strong>1 (0 BM, 1 W)</strong></div>308 <div>Changed <strong>8m ago</strong> <span class="dim">at 08:44 AM</span></div>309 </div>310 </div>311 </div>312 313 <!-- Bottom info and toast -->314 <div class="toast">Entry saved</div>315 <div class="bottomBar">316 No Internet Connection317 <div class="closeX">×</div>318 </div>319 320 <!-- Home indicator -->321 <div class="homeIndicator"></div>322 323</div>324</body>325</html>