GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Mobile UI Render</title>6<style>7 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width:1080px; height:2400px; position:relative; overflow:hidden;10 background:#2f2f2f;11 }12 13 /* Top status bar */14 .status-bar {15 position:absolute; top:0; left:0; width:100%; height:150px;16 background:#c592a1;17 color:#fff;18 padding:30px 40px;19 display:flex; align-items:center; justify-content:space-between;20 box-sizing:border-box;21 }22 .status-left { display:flex; align-items:center; gap:28px; }23 .status-time { font-size:42px; font-weight:600; }24 .status-icons { display:flex; align-items:center; gap:30px; }25 .status-right { display:flex; align-items:center; gap:30px; }26 27 /* App header */28 .top-appbar {29 position:absolute; top:150px; left:0; width:100%; height:220px;30 background:#5f5f5f; color:#fff;31 display:flex; align-items:center;32 padding:0 40px;33 box-sizing:border-box;34 }35 .hamburger { width:72px; height:72px; margin-right:30px; }36 .avatar {37 width:120px; height:120px; border-radius:60px;38 background:#eeeeee; border:6px solid #bcbcbc;39 display:flex; align-items:center; justify-content:center;40 margin-right:30px;41 }42 .title-block { flex:1; }43 .title-line { display:flex; align-items:center; gap:14px; }44 .title { font-size:60px; font-weight:700; letter-spacing:0.5px; }45 .subtitle { font-size:30px; color:#e0e0e0; margin-top:10px; }46 .appbar-right { display:flex; align-items:center; gap:30px; }47 48 /* Grid area */49 .grid-section {50 position:absolute; top:370px; left:0; width:100%;51 background:#2f2f2f;52 padding:40px 30px 0 30px;53 box-sizing:border-box;54 }55 .feature-grid {56 display:flex; flex-wrap:wrap; gap:48px 30px;57 }58 .feature {59 width:calc(25% - 22.5px);60 display:flex; flex-direction:column; align-items:center; justify-content:flex-start;61 }62 .circle {63 width:160px; height:160px; border-radius:80px;64 display:flex; align-items:center; justify-content:center;65 color:#fff;66 box-shadow:0 2px 0 rgba(0,0,0,0.15) inset;67 }68 .label {69 margin-top:18px; color:#fff; font-size:36px;70 text-align:center;71 }72 73 /* Overlay strip (middle) */74 .overlay-strip {75 position:absolute; top:960px; left:0; width:100%; height:90px;76 background:#6b5a61; display:flex; align-items:center; justify-content:space-between;77 padding:0 40px; box-sizing:border-box; color:#fff;78 }79 .overlay-handle {80 width:540px; height:12px; background:#bfbfbf; border-radius:10px; margin:0 auto;81 }82 83 /* Bottom offline banner */84 .offline-banner {85 position:absolute; bottom:110px; left:0; width:100%; height:110px;86 background:#6a6a6a; color:#eaeaea; display:flex; align-items:center; justify-content:center;87 font-size:34px;88 }89 .offline-banner .close {90 position:absolute; right:30px; top:50%; transform:translateY(-50%);91 }92 93 /* Bottom navigation area */94 .bottom-nav {95 position:absolute; bottom:0; left:0; width:100%; height:110px; background:#000;96 display:flex; align-items:center; justify-content:center;97 }98 .nav-pill { width:200px; height:14px; background:#eaeaea; border-radius:20px; opacity:0.95; }99 100 /* Utility colors for circles */101 .c-red { background:#d96b6f; }102 .c-blue { background:#8ec6d9; }103 .c-navy { background:#3c6aa3; }104 .c-yellow { background:#f2c57a; }105 .c-purple { background:#9b7bb6; }106 .c-tan { background:#dbbe9d; }107 .c-green { background:#7cc18d; }108 .c-gold { background:#e7b35a; }109 110 /* Simple icon sizing */111 svg { display:block; }112</style>113</head>114<body>115<div id="render-target">116 117 <!-- Status bar -->118 <div class="status-bar">119 <div class="status-left">120 <div class="status-time">8:36</div>121 <div class="status-icons">122 <!-- Stroller icon -->123 <svg width="46" height="46" viewBox="0 0 24 24">124 <circle cx="7" cy="18" r="2" fill="#fff"/>125 <circle cx="17" cy="18" r="2" fill="#fff"/>126 <path d="M3 6h9c3 0 4 2 4 4H6c-1.7 0-3-1.3-3-3V6z" fill="#fff" opacity="0.9"/>127 <path d="M6 10l2 5h9" stroke="#fff" stroke-width="2" fill="none"/>128 </svg>129 <!-- Calendar icon -->130 <svg width="46" height="46" viewBox="0 0 24 24">131 <rect x="3" y="5" width="18" height="16" rx="2" fill="#fff" opacity="0.95"/>132 <rect x="3" y="8" width="18" height="3" fill="#c592a1"/>133 <rect x="6" y="3" width="3" height="4" fill="#fff"/>134 <rect x="15" y="3" width="3" height="4" fill="#fff"/>135 </svg>136 </div>137 </div>138 <div class="status-right">139 <!-- Battery icon -->140 <svg width="46" height="46" viewBox="0 0 24 24">141 <rect x="3" y="6" width="16" height="12" rx="2" fill="none" stroke="#fff" stroke-width="2"/>142 <rect x="20" y="10" width="2" height="4" fill="#fff"/>143 <rect x="5" y="8" width="12" height="8" fill="#fff"/>144 </svg>145 </div>146 </div>147 148 <!-- Appbar -->149 <div class="top-appbar">150 <!-- Hamburger -->151 <svg class="hamburger" viewBox="0 0 24 24">152 <rect x="2" y="5" width="20" height="3" fill="#fff"/>153 <rect x="2" y="10.5" width="20" height="3" fill="#fff"/>154 <rect x="2" y="16" width="20" height="3" fill="#fff"/>155 </svg>156 157 <!-- Avatar with camera -->158 <div class="avatar">159 <svg width="60" height="60" viewBox="0 0 24 24">160 <circle cx="12" cy="12" r="10" fill="#bdbdbd"/>161 <rect x="7" y="8" width="10" height="8" rx="2" fill="#fff"/>162 <circle cx="12" cy="12" r="3" fill="#bdbdbd"/>163 </svg>164 </div>165 166 <!-- Title -->167 <div class="title-block">168 <div class="title-line">169 <div class="title">Research</div>170 <!-- Chevron -->171 <svg width="36" height="36" viewBox="0 0 24 24">172 <path d="M6 9l6 6 6-6" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round"/>173 </svg>174 </div>175 <div class="subtitle">9 days old (1 week)</div>176 </div>177 178 <div class="appbar-right">179 <!-- Bar chart icon -->180 <svg width="72" height="72" viewBox="0 0 24 24">181 <rect x="4" y="13" width="3" height="7" fill="#fff"/>182 <rect x="10.5" y="9" width="3" height="11" fill="#fff"/>183 <rect x="17" y="6" width="3" height="14" fill="#fff"/>184 </svg>185 </div>186 </div>187 188 <!-- Grid of features -->189 <div class="grid-section">190 <div class="feature-grid">191 <!-- Feed -->192 <div class="feature">193 <div class="circle c-red">194 <svg width="120" height="120" viewBox="0 0 24 24">195 <rect x="7" y="6" width="4" height="9" rx="1" fill="#fff"/>196 <path d="M4 15c4-3 10-3 14 0v2H4v-2z" fill="#fff" opacity="0.9"/>197 </svg>198 </div>199 <div class="label">Feed</div>200 </div>201 <!-- Diaper -->202 <div class="feature">203 <div class="circle c-blue">204 <svg width="120" height="120" viewBox="0 0 24 24">205 <rect x="3" y="6" width="18" height="8" rx="3" fill="#fff"/>206 <rect x="6" y="14" width="12" height="3" rx="1" fill="#fff" opacity="0.9"/>207 </svg>208 </div>209 <div class="label">Diaper</div>210 </div>211 <!-- Sleep -->212 <div class="feature">213 <div class="circle c-navy">214 <svg width="120" height="120" viewBox="0 0 24 24">215 <path d="M14 4a8 8 0 1 0 6 12A7 7 0 0 1 14 4z" fill="#fff"/>216 <circle cx="9" cy="9" r="1.2" fill="#3c6aa3"/>217 <circle cx="7" cy="13" r="1.2" fill="#3c6aa3"/>218 <circle cx="12" cy="15" r="1.2" fill="#3c6aa3"/>219 </svg>220 </div>221 <div class="label">Sleep</div>222 </div>223 <!-- Mood -->224 <div class="feature">225 <div class="circle c-yellow">226 <svg width="120" height="120" viewBox="0 0 24 24">227 <rect x="5" y="5" width="14" height="14" rx="3" fill="#fff"/>228 <circle cx="10" cy="11" r="1.2" fill="#f2c57a"/>229 <circle cx="14" cy="11" r="1.2" fill="#f2c57a"/>230 <path d="M9 15c2 1 4 1 6 0" stroke="#f2c57a" stroke-width="2" fill="none" stroke-linecap="round"/>231 </svg>232 </div>233 <div class="label">Mood</div>234 </div>235 236 <!-- Activity -->237 <div class="feature">238 <div class="circle c-purple">239 <svg width="120" height="120" viewBox="0 0 24 24">240 <rect x="4" y="6" width="6" height="6" fill="#fff"/>241 <rect x="12" y="6" width="6" height="6" fill="#fff"/>242 <rect x="8" y="12" width="6" height="6" fill="#fff"/>243 <text x="7.5" y="11" font-size="4" fill="#9b7bb6">A</text>244 <text x="15.5" y="11" font-size="4" fill="#9b7bb6">B</text>245 <text x="11.5" y="17" font-size="4" fill="#9b7bb6">C</text>246 </svg>247 </div>248 <div class="label">Activity</div>249 </div>250 <!-- Medical -->251 <div class="feature">252 <div class="circle c-tan">253 <svg width="120" height="120" viewBox="0 0 24 24">254 <circle cx="12" cy="8" r="3" fill="#fff"/>255 <path d="M6 19c1-4 11-4 12 0H6z" fill="#fff"/>256 </svg>257 </div>258 <div class="label">Medical</div>259 </div>260 <!-- Message -->261 <div class="feature">262 <div class="circle c-green">263 <svg width="120" height="120" viewBox="0 0 24 24">264 <path d="M4 6h16v10H10l-4 4v-4H4V6z" fill="#fff"/>265 <circle cx="9" cy="11" r="1.2" fill="#7cc18d"/>266 <circle cx="12" cy="11" r="1.2" fill="#7cc18d"/>267 <circle cx="15" cy="11" r="1.2" fill="#7cc18d"/>268 </svg>269 </div>270 <div class="label">Message</div>271 </div>272 <!-- Milestone -->273 <div class="feature">274 <div class="circle c-gold">275 <svg width="120" height="120" viewBox="0 0 24 24">276 <path d="M12 3l2.4 6.9H21l-5 3.6 1.9 6.5-5.9-3.8-5.9 3.8 1.9-6.5-5-3.6h6.6L12 3z" fill="#fff"/>277 </svg>278 </div>279 <div class="label">Milestone</div>280 </div>281 </div>282 </div>283 284 <!-- Overlay strip -->285 <div class="overlay-strip">286 <div style="width:100%; display:flex; align-items:center; justify-content:center; position:absolute; left:0;">287 <div class="overlay-handle"></div>288 </div>289 <!-- Right list icon -->290 <svg width="64" height="64" viewBox="0 0 24 24" style="position:absolute; right:30px;">291 <rect x="6" y="6" width="14" height="2" fill="#fff"/>292 <rect x="6" y="11" width="14" height="2" fill="#fff"/>293 <rect x="6" y="16" width="14" height="2" fill="#fff"/>294 <rect x="3" y="6" width="2" height="2" fill="#fff"/>295 <rect x="3" y="11" width="2" height="2" fill="#fff"/>296 <rect x="3" y="16" width="2" height="2" fill="#fff"/>297 </svg>298 </div>299 300 <!-- Offline banner -->301 <div class="offline-banner">302 You can still post while offline303 <div class="close">304 <svg width="70" height="70" viewBox="0 0 24 24">305 <circle cx="12" cy="12" r="10" fill="none" stroke="#fff" stroke-width="2" opacity="0.7"/>306 <path d="M8 8l8 8M16 8l-8 8" stroke="#fff" stroke-width="2" stroke-linecap="round"/>307 </svg>308 </div>309 </div>310 311 <!-- Bottom navigation pill -->312 <div class="bottom-nav">313 <div class="nav-pill"></div>314 </div>315 316</div>317</body>318</html>