GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Mobile UI Render</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: "Segoe UI", Arial, sans-serif;11 }12 13 /* Status bar */14 .statusbar {15 position:absolute; top:0; left:0; width:100%; height:170px;16 background:#cf8fa5; display:flex; align-items:center; justify-content:space-between;17 padding:28px 42px; box-sizing:border-box; font-weight:600;18 }19 .status-left { display:flex; align-items:center; gap:28px; font-size:42px; }20 .status-right { display:flex; align-items:center; gap:26px; }21 .icon-mini svg { fill:#fff; }22 23 /* Header */24 .header {25 position:absolute; top:170px; left:0; width:100%; height:220px;26 background:#5b5b5b; display:flex; align-items:center; box-sizing:border-box;27 padding:0 38px; gap:34px;28 }29 .hamburger svg { fill:#fff; }30 .avatar {31 width:120px; height:120px; border-radius:60px; background:#e7e7e7; display:flex; align-items:center; justify-content:center;32 color:#757575; flex-shrink:0;33 }34 .title-wrap { display:flex; flex-direction:column; gap:10px; }35 .title-row { display:flex; align-items:center; gap:14px; }36 .app-title { font-size:64px; font-weight:700; }37 .subtitle { font-size:32px; opacity:0.85; }38 .header-right { margin-left:auto; display:flex; align-items:center; gap:32px; }39 40 /* Grid of actions */41 .grid {42 position:absolute; top:390px; left:0; width:100%;43 padding:40px 34px 20px; box-sizing:border-box;44 }45 .tile-row { display:flex; justify-content:space-between; margin-bottom:36px; }46 .tile {47 width:232px; display:flex; flex-direction:column; align-items:center; text-align:center;48 }49 .ago { font-size:34px; font-weight:700; color:#d9d9d9; margin-bottom:12px; text-shadow:0 2px 0 rgba(0,0,0,0.35); }50 .circle {51 width:170px; height:170px; border-radius:85px; display:flex; align-items:center; justify-content:center;52 margin-bottom:18px;53 }54 .label { font-size:36px; }55 56 /* Colors for circles */57 .c-feed { background:#d47b7b; }58 .c-diaper { background:#8cd0e8; }59 .c-sleep { background:#3a5fb8; }60 .c-mood { background:#f3d18d; color:#333; }61 .c-activity { background:#9b7bc9; }62 .c-medical { background:#ddc79f; color:#333; }63 .c-message { background:#86c792; }64 .c-milestone { background:#f0cf8e; color:#333; }65 66 /* Slider / divider */67 .slider-area { position:absolute; top:1050px; left:0; width:100%; height:20px; display:flex; align-items:center; justify-content:center; }68 .slider { width:520px; height:12px; background:#8d8d8d; border-radius:6px; }69 .list-divider { position:absolute; top:1088px; left:0; width:100%; height:70px; background:#6a5960; display:flex; align-items:center; justify-content:flex-end; padding:0 34px; box-sizing:border-box; }70 71 /* Timeline entries */72 .entries { position:absolute; top:1168px; left:0; width:100%; padding:22px 34px 0; box-sizing:border-box; }73 .entry {74 display:flex; gap:24px; padding:26px 0; border-bottom:1px solid rgba(255,255,255,0.08);75 }76 .entry .ico {77 width:82px; height:82px; border-radius:41px; display:flex; align-items:center; justify-content:center;78 flex-shrink:0;79 }80 .ico-feed { background:#d47b7b; }81 .ico-diaper { background:#8cd0e8; }82 .entry .text { font-size:40px; line-height:1.4; }83 .text b { font-weight:800; }84 85 /* Toast and bottom banner */86 .toast {87 position:absolute; bottom:210px; left:50%; transform:translateX(-50%);88 background:#7ea8f2; color:#fff; padding:20px 28px; border-radius:16px; font-size:34px; box-shadow:0 6px 14px rgba(0,0,0,0.3);89 }90 .bottom-banner {91 position:absolute; bottom:120px; left:0; width:100%; height:120px; background:#5b5b5b;92 display:flex; align-items:center; justify-content:center; box-sizing:border-box;93 }94 .bottom-banner .close {95 position:absolute; right:26px; bottom:26px;96 width:60px; height:60px; display:flex; align-items:center; justify-content:center;97 }98 99 .indicator {100 position:absolute; bottom:48px; left:50%; transform:translateX(-50%);101 width:200px; height:10px; background:#fff; border-radius:6px; opacity:0.9;102 }103 104 /* Simple svg icons styling */105 svg { display:block; }106</style>107</head>108<body>109<div id="render-target">110 111 <!-- Status bar -->112 <div class="statusbar">113 <div class="status-left">114 <div>8:46</div>115 <div class="icon-mini">116 <svg width="42" height="42" viewBox="0 0 24 24">117 <path d="M2 17h18l-2-6H6L5 8h9l-1-3H3z"></path>118 </svg>119 </div>120 <div class="icon-mini">121 <svg width="42" height="42" viewBox="0 0 24 24">122 <rect x="3" y="4" width="6" height="6"></rect>123 <rect x="13" y="4" width="8" height="6"></rect>124 <rect x="3" y="12" width="8" height="8"></rect>125 </svg>126 </div>127 </div>128 <div class="status-right">129 <div class="icon-mini">130 <svg width="38" height="38" viewBox="0 0 24 24">131 <rect x="2" y="7" width="20" height="10" rx="2" ry="2"></rect>132 <rect x="22" y="10" width="2" height="4"></rect>133 </svg>134 </div>135 </div>136 </div>137 138 <!-- Header -->139 <div class="header">140 <div class="hamburger">141 <svg width="70" height="70" viewBox="0 0 24 24">142 <rect x="3" y="5" width="18" height="2"></rect>143 <rect x="3" y="11" width="18" height="2"></rect>144 <rect x="3" y="17" width="18" height="2"></rect>145 </svg>146 </div>147 148 <div class="avatar">149 <svg width="70" height="50" viewBox="0 0 24 24">150 <rect x="5" y="10" width="14" height="9" rx="2"></rect>151 <rect x="9" y="7" width="6" height="4"></rect>152 <circle cx="12" cy="14" r="2" fill="#757575"></circle>153 </svg>154 </div>155 156 <div class="title-wrap">157 <div class="title-row">158 <div class="app-title">Research</div>159 <svg width="34" height="34" viewBox="0 0 24 24">160 <path fill="#fff" d="M7 9l5 5 5-5z"></path>161 </svg>162 </div>163 <div class="subtitle">9 days old (1 week)</div>164 </div>165 166 <div class="header-right">167 <svg width="64" height="64" viewBox="0 0 24 24">168 <rect x="3" y="13" width="4" height="8" fill="#fff"></rect>169 <rect x="10" y="9" width="4" height="12" fill="#fff"></rect>170 <rect x="17" y="6" width="4" height="15" fill="#fff"></rect>171 </svg>172 <svg width="64" height="64" viewBox="0 0 24 24">173 <rect x="4" y="5" width="16" height="2" fill="#fff"></rect>174 <rect x="4" y="11" width="16" height="2" fill="#fff"></rect>175 <rect x="4" y="17" width="16" height="2" fill="#fff"></rect>176 </svg>177 </div>178 </div>179 180 <!-- Grid of quick actions -->181 <div class="grid">182 <div class="tile-row">183 <div class="tile">184 <div class="ago">7m ago</div>185 <div class="circle c-feed">186 <svg width="92" height="92" viewBox="0 0 24 24">187 <path fill="#fff" d="M7 7h6l1-2H8z"></path>188 <rect x="7" y="9" width="9" height="9" rx="2" fill="#fff"></rect>189 </svg>190 </div>191 <div class="label">Feed</div>192 </div>193 <div class="tile">194 <div class="ago">2m ago</div>195 <div class="circle c-diaper">196 <svg width="92" height="92" viewBox="0 0 24 24">197 <path fill="#fff" d="M4 7h16v6c0 2-2 4-4 4H8c-2 0-4-2-4-4z"></path>198 <rect x="6" y="9" width="12" height="2" fill="#8cd0e8"></rect>199 </svg>200 </div>201 <div class="label">Diaper</div>202 </div>203 <div class="tile">204 <div class="ago"> </div>205 <div class="circle c-sleep">206 <svg width="92" height="92" viewBox="0 0 24 24">207 <path fill="#fff" d="M14 5a7 7 0 1 0 5 12 7 7 0 1 1-5-12z"></path>208 <circle cx="7" cy="9" r="1.2" fill="#fff"></circle>209 <circle cx="9.5" cy="12" r="1.2" fill="#fff"></circle>210 <circle cx="6.5" cy="13.5" r="1" fill="#fff"></circle>211 </svg>212 </div>213 <div class="label">Sleep</div>214 </div>215 <div class="tile">216 <div class="ago"> </div>217 <div class="circle c-mood">218 <svg width="92" height="92" viewBox="0 0 24 24">219 <circle cx="8.5" cy="10" r="1.6" fill="#333"></circle>220 <circle cx="15.5" cy="10" r="1.6" fill="#333"></circle>221 <path d="M8 15c1.5 2 6.5 2 8 0" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"></path>222 </svg>223 </div>224 <div class="label">Mood</div>225 </div>226 </div>227 228 <div class="tile-row">229 <div class="tile">230 <div class="ago"> </div>231 <div class="circle c-activity">232 <svg width="92" height="92" viewBox="0 0 24 24">233 <rect x="4" y="6" width="6" height="6" fill="#fff"></rect>234 <rect x="12" y="6" width="8" height="6" fill="#fff"></rect>235 <rect x="6" y="14" width="10" height="6" fill="#fff"></rect>236 </svg>237 </div>238 <div class="label">Activity</div>239 </div>240 <div class="tile">241 <div class="ago"> </div>242 <div class="circle c-medical">243 <svg width="92" height="92" viewBox="0 0 24 24">244 <path d="M7 8v4h3v3h4v-3h3V8h-3V5h-4v3z" fill="#333"></path>245 </svg>246 </div>247 <div class="label">Medical</div>248 </div>249 <div class="tile">250 <div class="ago"> </div>251 <div class="circle c-message">252 <svg width="92" height="92" viewBox="0 0 24 24">253 <path fill="#fff" d="M4 5h16v10H9l-5 4z"></path>254 </svg>255 </div>256 <div class="label">Message</div>257 </div>258 <div class="tile">259 <div class="ago"> </div>260 <div class="circle c-milestone">261 <svg width="92" height="92" viewBox="0 0 24 24">262 <path fill="#333" d="M12 3l2.7 5.5L20 9l-4 3.8L17 19l-5-2.7L7 19l1-6.2L4 9l5.3-.5z"></path>263 </svg>264 </div>265 <div class="label">Milestone</div>266 </div>267 </div>268 </div>269 270 <!-- Slider and list divider -->271 <div class="slider-area"><div class="slider"></div></div>272 <div class="list-divider">273 <svg width="52" height="52" viewBox="0 0 24 24">274 <rect x="4" y="6" width="14" height="2" fill="#fff"></rect>275 <rect x="4" y="11" width="14" height="2" fill="#fff"></rect>276 <rect x="4" y="16" width="14" height="2" fill="#fff"></rect>277 </svg>278 </div>279 280 <!-- Entries -->281 <div class="entries">282 <div class="entry">283 <div class="ico ico-feed">284 <svg width="46" height="46" viewBox="0 0 24 24">285 <rect x="7" y="8" width="10" height="10" rx="2" fill="#fff"></rect>286 </svg>287 </div>288 <div class="text">289 Nursing: <b>2m (2m L, 0 R) (1x)</b><br>290 Last <b>7m ago (Last: Left)</b> at 08:39 AM291 </div>292 </div>293 294 <div class="entry">295 <div class="ico ico-diaper">296 <svg width="46" height="46" viewBox="0 0 24 24">297 <path fill="#fff" d="M4 7h16v6c0 2-2 4-4 4H8c-2 0-4-2-4-4z"></path>298 </svg>299 </div>300 <div class="text">301 Diaper: <b>1 (0 BM, 1 W)</b><br>302 Changed <b>2m ago</b> at 08:44 AM303 </div>304 </div>305 </div>306 307 <!-- Toast -->308 <div class="toast">Entry saved</div>309 310 <!-- Bottom banner -->311 <div class="bottom-banner">312 <div style="font-size:46px;">No Internet Connection</div>313 <div class="close">314 <svg width="60" height="60" viewBox="0 0 24 24">315 <path fill="#fff" d="M5 5l14 14M19 5L5 19" stroke="#fff" stroke-width="2"></path>316 </svg>317 </div>318 </div>319 320 <!-- Home indicator -->321 <div class="indicator"></div>322 323</div>324</body>325</html>