GD-ML/AndroidCode
13.4k
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>Mobile 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: #2F2F2F;13 }14 15 /* Status bar */16 .status-bar {17 position: absolute; top: 0; left: 0; right: 0;18 height: 140px; background: #C48FA0; color: #fff;19 display: flex; align-items: center; justify-content: space-between;20 padding: 0 40px; box-sizing: border-box; font-weight: 600;21 }22 .status-left { display: flex; align-items: center; gap: 22px; }23 .status-time { font-size: 40px; }24 .status-right { display: flex; align-items: center; gap: 24px; }25 .status-icon svg { width: 42px; height: 42px; }26 27 /* App header */28 .app-header {29 position: absolute; top: 140px; left: 0; right: 0;30 height: 260px; background: #5A5A5A; color: #fff;31 display: flex; align-items: center; box-sizing: border-box;32 padding: 0 40px; gap: 34px;33 }34 .hamburger { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; }35 .hamburger svg { width: 70px; height: 50px; }36 .profile {37 display: flex; align-items: center; gap: 28px;38 }39 .avatar {40 width: 130px; height: 130px; border-radius: 50%; background: #fff;41 display: flex; align-items: center; justify-content: center;42 }43 .title-wrap { display: flex; flex-direction: column; }44 .app-title {45 font-size: 68px; font-weight: 800; line-height: 1; display: flex; align-items: center; gap: 14px;46 }47 .subtitle { font-size: 34px; color: #E9E9E9; margin-top: 10px; }48 .header-right { margin-left: auto; display: flex; align-items: center; gap: 26px; }49 50 /* Grid of actions */51 .actions {52 position: absolute; top: 400px; left: 0; right: 0;53 padding: 30px 40px 0; box-sizing: border-box;54 }55 .grid {56 display: flex; flex-wrap: wrap; justify-content: space-between;57 }58 .tile {59 width: 230px; margin: 30px 0 18px; text-align: center; color: #fff;60 }61 .circle {62 width: 200px; height: 200px; border-radius: 50%;63 display: flex; align-items: center; justify-content: center;64 }65 .label { margin-top: 20px; font-size: 34px; font-weight: 600; }66 67 /* Tile colors */68 .red { background: #D77A82; }69 .blue { background: #8FD1EB; }70 .yellow { background: #F1C366; }71 .green { background: #8BC686; }72 .tan { background: #C7A26B; }73 .peach { background: #EEAD9A; }74 75 .circle svg { width: 110px; height: 110px; }76 77 /* Mid toolbar */78 .mid-toolbar {79 position: absolute; top: 1180px; left: 0; right: 0; height: 80px;80 background: #6B5861; display: flex; align-items: center; padding: 0 40px; box-sizing: border-box;81 }82 .slider-track {83 height: 10px; background: #8E7A85; border-radius: 10px; width: 600px; margin: 0 auto; position: relative;84 }85 .slider-thumb { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 200px; height: 12px; background: #BDBDBD; border-radius: 10px; }86 .list-btn { margin-left: auto; width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; }87 .list-btn svg { width: 60px; height: 50px; }88 89 /* Content area filler */90 .content {91 position: absolute; top: 1260px; left: 0; right: 0; bottom: 240px;92 background: #3A3A3A;93 }94 95 /* Snack bar */96 .snackbar {97 position: absolute; bottom: 120px; left: 0; right: 0;98 height: 120px; background: #676767; color: #fff;99 display: flex; align-items: center; justify-content: center;100 font-size: 40px; font-weight: 600;101 }102 .snack-close {103 position: absolute; right: 36px; top: 50%; transform: translateY(-50%);104 }105 .snack-close svg { width: 50px; height: 50px; }106 107 /* Gesture bar */108 .gesture {109 position: absolute; bottom: 0; left: 0; right: 0; height: 120px; background: #000;110 display: flex; align-items: center; justify-content: center;111 }112 .home-pill { width: 320px; height: 14px; background: #E6E6E6; border-radius: 10px; }113</style>114</head>115<body>116<div id="render-target">117 118 <!-- Status Bar -->119 <div class="status-bar">120 <div class="status-left">121 <div class="status-time">8:35</div>122 <div class="status-icon">123 <!-- stroller/cart icon -->124 <svg viewBox="0 0 24 24" fill="#fff">125 <circle cx="7" cy="19" r="3"></circle>126 <circle cx="17" cy="19" r="3"></circle>127 <rect x="5" y="6" width="14" height="5" rx="2"></rect>128 <rect x="4" y="10" width="2" height="5"></rect>129 </svg>130 </div>131 <div class="status-icon">132 <!-- calendar icon -->133 <svg viewBox="0 0 24 24" fill="#fff">134 <rect x="3" y="5" width="18" height="16" rx="2"></rect>135 <rect x="3" y="9" width="18" height="3"></rect>136 <rect x="6" y="13" width="4" height="4" fill="#C48FA0"></rect>137 </svg>138 </div>139 </div>140 <div class="status-right">141 <!-- battery icon -->142 <svg viewBox="0 0 28 16" fill="none" stroke="#fff" class="status-icon">143 <rect x="1" y="1" width="22" height="14" rx="2" stroke="#fff" stroke-width="2"></rect>144 <rect x="3" y="3" width="12" height="10" fill="#fff"></rect>145 <rect x="24" y="5" width="3" height="6" fill="#fff"></rect>146 </svg>147 </div>148 </div>149 150 <!-- App Header -->151 <div class="app-header">152 <div class="hamburger">153 <svg viewBox="0 0 100 70" fill="#fff">154 <rect x="0" y="0" width="100" height="12" rx="6"></rect>155 <rect x="0" y="29" width="100" height="12" rx="6"></rect>156 <rect x="0" y="58" width="100" height="12" rx="6"></rect>157 </svg>158 </div>159 160 <div class="profile">161 <div class="avatar">162 <!-- camera icon -->163 <svg viewBox="0 0 60 60">164 <rect x="10" y="22" width="40" height="26" rx="4" fill="#5A5A5A"></rect>165 <circle cx="30" cy="35" r="8" fill="#fff"></circle>166 <rect x="22" y="16" width="16" height="6" rx="3" fill="#5A5A5A"></rect>167 </svg>168 </div>169 <div class="title-wrap">170 <div class="app-title">171 <span>Research</span>172 <!-- caret -->173 <svg viewBox="0 0 24 24" width="34" height="34">174 <polygon points="4,8 12,16 20,8" fill="#fff"></polygon>175 </svg>176 </div>177 <div class="subtitle">9 days old (1 week)</div>178 </div>179 </div>180 181 <div class="header-right">182 <!-- bar chart icon -->183 <svg viewBox="0 0 60 60">184 <rect x="6" y="32" width="10" height="20" fill="#fff"></rect>185 <rect x="24" y="24" width="10" height="28" fill="#fff"></rect>186 <rect x="42" y="16" width="10" height="36" fill="#fff"></rect>187 </svg>188 </div>189 </div>190 191 <!-- Actions Grid -->192 <div class="actions">193 <div class="grid">194 <!-- Row 1 -->195 <div class="tile">196 <div class="circle tan">197 <!-- phone icon -->198 <svg viewBox="0 0 64 64">199 <path d="M18 14 L28 24 C26 28 26 28 22 30 L34 42 C36 38 36 38 40 36 L50 46" stroke="#fff" stroke-width="6" fill="none" stroke-linecap="round"></path>200 </svg>201 </div>202 <div class="label">Call</div>203 </div>204 <div class="tile">205 <div class="circle yellow">206 <!-- location pin -->207 <svg viewBox="0 0 64 64">208 <path d="M32 56 C24 44 16 36 16 26 A16 16 0 1 1 48 26 C48 36 40 44 32 56 Z" fill="#fff"></path>209 <circle cx="32" cy="26" r="6" fill="#F1C366"></circle>210 </svg>211 </div>212 <div class="label">My Location</div>213 </div>214 <div class="tile">215 <div class="circle tan">216 <!-- food/solid icon -->217 <svg viewBox="0 0 64 64">218 <rect x="12" y="24" width="40" height="18" rx="4" fill="#fff"></rect>219 <rect x="20" y="16" width="24" height="6" rx="3" fill="#fff"></rect>220 </svg>221 </div>222 <div class="label">Solid</div>223 </div>224 <div class="tile">225 <div class="circle peach">226 <!-- bottle icon -->227 <svg viewBox="0 0 64 64">228 <rect x="24" y="12" width="16" height="10" rx="3" fill="#fff"></rect>229 <rect x="20" y="22" width="24" height="28" rx="6" fill="#fff"></rect>230 <rect x="24" y="30" width="16" height="4" fill="#EEAD9A"></rect>231 <rect x="24" y="38" width="16" height="4" fill="#EEAD9A"></rect>232 </svg>233 </div>234 <div class="label">Bottle</div>235 </div>236 237 <!-- Row 2 -->238 <div class="tile">239 <div class="circle red">240 <!-- nursing icon -->241 <svg viewBox="0 0 64 64">242 <circle cx="40" cy="20" r="8" fill="#fff"></circle>243 <path d="M14 40 C22 34 32 34 42 42 L46 46 H18 Z" fill="#fff"></path>244 </svg>245 </div>246 <div class="label">Nursing</div>247 </div>248 <div class="tile">249 <div class="circle blue">250 <!-- potty icon -->251 <svg viewBox="0 0 64 64">252 <rect x="14" y="28" width="36" height="18" rx="8" fill="#fff"></rect>253 <rect x="20" y="24" width="24" height="8" rx="4" fill="#8FD1EB"></rect>254 </svg>255 </div>256 <div class="label">Potty</div>257 </div>258 <div class="tile">259 <div class="circle red">260 <!-- cup icon -->261 <svg viewBox="0 0 64 64">262 <rect x="16" y="20" width="22" height="30" rx="4" fill="#fff"></rect>263 <rect x="38" y="26" width="10" height="14" rx="4" fill="#fff"></rect>264 </svg>265 </div>266 <div class="label">Cup</div>267 </div>268 <div class="tile">269 <div class="circle yellow">270 <!-- house icon -->271 <svg viewBox="0 0 64 64">272 <polygon points="12,30 32,16 52,30 52,32 12,32" fill="#fff"></polygon>273 <rect x="18" y="32" width="28" height="18" fill="#fff"></rect>274 <rect x="28" y="38" width="8" height="12" fill="#F1C366"></rect>275 </svg>276 </div>277 <div class="label">Sign In/Out</div>278 </div>279 280 <!-- Row 3 -->281 <div class="tile">282 <div class="circle green">283 <!-- incident triangle -->284 <svg viewBox="0 0 64 64">285 <polygon points="32,12 56,52 8,52" fill="#fff"></polygon>286 <rect x="30" y="26" width="4" height="14" fill="#8BC686"></rect>287 <rect x="30" y="44" width="4" height="6" fill="#8BC686"></rect>288 </svg>289 </div>290 <div class="label">Incident Re...</div>291 </div>292 <div class="tile">293 <div class="circle green">294 <!-- checklist icon -->295 <svg viewBox="0 0 64 64">296 <rect x="16" y="16" width="32" height="36" rx="4" fill="#fff"></rect>297 <circle cx="24" cy="26" r="4" fill="#8BC686"></circle>298 <rect x="30" y="24" width="14" height="4" fill="#8BC686"></rect>299 <circle cx="24" cy="36" r="4" fill="#8BC686"></circle>300 <rect x="30" y="34" width="14" height="4" fill="#8BC686"></rect>301 </svg>302 </div>303 <div class="label">Need</div>304 </div>305 <div class="tile">306 <div class="circle yellow">307 <!-- medal icon -->308 <svg viewBox="0 0 64 64">309 <circle cx="32" cy="38" r="10" fill="#fff"></circle>310 <polygon points="24,16 32,26 40,16" fill="#fff"></polygon>311 <polygon points="20,16 24,16 28,24 24,28" fill="#fff"></polygon>312 <polygon points="36,24 40,16 44,16 40,28" fill="#fff"></polygon>313 </svg>314 </div>315 <div class="label">Behavior</div>316 </div>317 <div class="tile">318 <div class="circle yellow">319 <!-- observation document + magnifier -->320 <svg viewBox="0 0 64 64">321 <rect x="18" y="14" width="24" height="36" rx="4" fill="#fff"></rect>322 <rect x="22" y="22" width="16" height="4" fill="#F1C366"></rect>323 <rect x="22" y="30" width="16" height="4" fill="#F1C366"></rect>324 <circle cx="44" cy="40" r="7" fill="#fff"></circle>325 <rect x="49" y="45" width="10" height="3" transform="rotate(45 54 46)" fill="#fff"></rect>326 </svg>327 </div>328 <div class="label">Observation</div>329 </div>330 </div>331 </div>332 333 <!-- Mid toolbar with slider and list button -->334 <div class="mid-toolbar">335 <div class="slider-track">336 <div class="slider-thumb"></div>337 </div>338 <div class="list-btn">339 <svg viewBox="0 0 80 60" fill="#fff">340 <rect x="0" y="6" width="80" height="8" rx="4"></rect>341 <rect x="0" y="26" width="80" height="8" rx="4"></rect>342 <rect x="0" y="46" width="80" height="8" rx="4"></rect>343 </svg>344 </div>345 </div>346 347 <!-- Filler content area -->348 <div class="content"></div>349 350 <!-- Snackbar -->351 <div class="snackbar">352 No Internet Connection353 <div class="snack-close">354 <svg viewBox="0 0 24 24" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round">355 <line x1="5" y1="5" x2="19" y2="19"></line>356 <line x1="19" y1="5" x2="5" y2="19"></line>357 </svg>358 </div>359 </div>360 361 <!-- Gesture bar -->362 <div class="gesture">363 <div class="home-pill"></div>364 </div>365 366</div>367</body>368</html>