GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI Render</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #d7d7d7;13 }14 /* Status bar */15 .status-bar {16 position: absolute;17 top: 18px;18 left: 32px;19 right: 32px;20 height: 96px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 color: #2e2e2e;25 font-size: 42px;26 letter-spacing: 0.5px;27 }28 .status-left {29 display: flex;30 align-items: center;31 gap: 26px;32 }33 .status-right {34 display: flex;35 align-items: center;36 gap: 28px;37 }38 /* Simple icons */39 .wifi-icon, .battery-icon { width: 56px; height: 40px; }40 .ghost {41 font-size: 46px;42 line-height: 1;43 }44 45 /* Toolbar mini icons on left */46 .top-controls {47 position: absolute;48 top: 140px;49 left: 40px;50 display: flex;51 align-items: center;52 gap: 34px;53 }54 .square-box {55 width: 72px;56 height: 72px;57 border: 3px solid #bdbdbd;58 border-radius: 12px;59 background: #eaeaea;60 }61 .small-filter {62 width: 72px; height: 72px;63 display: flex; align-items: center; justify-content: center;64 }65 .small-filter svg { width: 52px; height: 52px; stroke: #3d6dd8; }66 67 /* Sections and tasks */68 .content {69 position: absolute;70 top: 230px;71 left: 36px;72 width: 620px;73 color: #111;74 }75 .section-title {76 font-weight: 800;77 font-size: 72px;78 margin: 36px 0 18px 0;79 }80 .task-row {81 display: flex;82 align-items: center;83 gap: 26px;84 padding: 20px 0;85 font-size: 46px;86 }87 .circle-check {88 width: 42px; height: 42px; border-radius: 50%;89 border: 4px solid #9fa4a8; box-sizing: border-box;90 }91 .yellow-dot {92 width: 16px; height: 16px; background: #e0b700; border-radius: 50%;93 margin-left: 68px; margin-top: 10px;94 }95 .gray-pill {96 margin-left: auto;97 margin-right: 24px;98 background: #e7e7e7;99 color: #666;100 border-radius: 22px;101 padding: 8px 16px;102 font-size: 34px;103 }104 105 /* Overlay menu card */106 .menu-card {107 position: absolute;108 top: 180px;109 right: 56px;110 width: 700px;111 background: #ffffff;112 border-radius: 36px;113 box-shadow: 0 30px 60px rgba(0,0,0,0.18);114 padding: 36px 42px;115 }116 .menu-top {117 display: flex;118 align-items: center;119 justify-content: flex-start;120 gap: 38px;121 margin-bottom: 20px;122 }123 .menu-icon {124 width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;125 }126 .menu-sub {127 color: #9aa1a6; font-size: 40px; margin: 16px 0 10px 0;128 }129 .menu-item {130 display: flex;131 align-items: center;132 gap: 30px;133 padding: 28px 8px;134 font-size: 52px;135 color: #222;136 }137 .menu-item + .menu-item { border-top: 1px solid #f0f0f0; }138 .menu-item .emoji {139 font-size: 48px;140 width: 64px; text-align: center;141 }142 .color-dots {143 display: grid;144 grid-template-columns: repeat(2, 20px);145 gap: 10px;146 width: 64px;147 height: 64px;148 }149 .dot { width: 20px; height: 20px; border-radius: 50%; }150 .dot.red { background: #ff5a4e; }151 .dot.blue { background: #3da2ff; }152 .dot.yellow { background: #ffd34d; }153 .dot.green { background: #32c077; }154 155 /* Bottom bar */156 .bottom-area {157 position: absolute;158 left: 0;159 right: 0;160 bottom: 110px;161 height: 180px;162 }163 .home-icon {164 position: absolute;165 left: 68px;166 bottom: 68px;167 width: 74px; height: 74px;168 border: 3px solid #3d6dd8;169 border-radius: 18px;170 display: flex; align-items: center; justify-content: center;171 }172 .home-icon svg { width: 46px; height: 46px; stroke: #3d6dd8; }173 .search-pill {174 position: absolute;175 left: 160px;176 right: 60px;177 bottom: 28px;178 height: 116px;179 background: #efefef;180 border-radius: 58px;181 box-shadow: 0 14px 30px rgba(0,0,0,0.12) inset;182 display: flex;183 align-items: center;184 padding: 0 36px;185 color: #7c7c7c;186 font-size: 46px;187 }188 .nav-handle {189 position: absolute;190 left: 390px;191 bottom: 16px;192 width: 300px; height: 16px;193 background: #6f6f6f; border-radius: 10px;194 }195</style>196</head>197<body>198<div id="render-target">199 200 <!-- Status bar -->201 <div class="status-bar">202 <div class="status-left">203 <div>1:42</div>204 <div class="ghost">👻</div>205 <div>34°</div>206 </div>207 <div class="status-right">208 <!-- WiFi -->209 <svg class="wifi-icon" viewBox="0 0 64 40">210 <path d="M6 12c13-12 39-12 52 0" stroke="#333" stroke-width="4" fill="none" />211 <path d="M14 20c9-9 27-9 36 0" stroke="#333" stroke-width="4" fill="none" />212 <path d="M24 28c5-5 15-5 20 0" stroke="#333" stroke-width="4" fill="none" />213 <circle cx="34" cy="34" r="4" fill="#333"/>214 </svg>215 <!-- Battery -->216 <svg class="battery-icon" viewBox="0 0 80 40">217 <rect x="2" y="6" width="64" height="28" rx="6" ry="6" stroke="#333" stroke-width="4" fill="none"/>218 <rect x="8" y="10" width="50" height="20" rx="4" fill="#333"/>219 <rect x="68" y="14" width="8" height="12" rx="2" fill="#333"/>220 </svg>221 </div>222 </div>223 224 <!-- Little controls top-left -->225 <div class="top-controls">226 <div class="square-box"></div>227 <div class="small-filter">228 <svg viewBox="0 0 64 64" fill="none">229 <path d="M10 14h44" stroke-width="6"/>230 <path d="M18 30h28" stroke-width="6"/>231 <path d="M26 46h12" stroke-width="6"/>232 </svg>233 </div>234 </div>235 236 <!-- Left content sections -->237 <div class="content">238 <div class="section-title">Today</div>239 <div class="task-row">240 <div class="circle-check"></div>241 <div>French classes</div>242 </div>243 <div class="yellow-dot"></div>244 245 <div class="section-title" style="margin-top: 40px;">Tomorrow</div>246 <div class="task-row">247 <div class="circle-check"></div>248 <div>Potluck Lunch</div>249 <div class="gray-pill">12:00 PM</div>250 </div>251 <div class="yellow-dot"></div>252 253 <div class="section-title" style="margin-top: 40px;">Upcoming</div>254 255 <div class="section-title" style="margin-top: 40px;">Someday</div>256 </div>257 258 <!-- Overlay menu card -->259 <div class="menu-card">260 <div class="menu-top">261 <!-- Sync -->262 <div class="menu-icon">263 <svg viewBox="0 0 64 64">264 <path d="M20 14c8-6 18-6 26 0l-6 6" stroke="#9aa1a6" stroke-width="4" fill="none"/>265 <path d="M44 50c-8 6-18 6-26 0l6-6" stroke="#9aa1a6" stroke-width="4" fill="none"/>266 </svg>267 </div>268 <!-- Print -->269 <div class="menu-icon">270 <svg viewBox="0 0 64 64">271 <rect x="14" y="12" width="36" height="16" rx="4" stroke="#9aa1a6" stroke-width="4" fill="none"/>272 <rect x="8" y="26" width="48" height="22" rx="4" stroke="#9aa1a6" stroke-width="4" fill="none"/>273 <rect x="18" y="38" width="28" height="12" rx="2" fill="#9aa1a6"/>274 </svg>275 </div>276 <!-- Share -->277 <div class="menu-icon">278 <svg viewBox="0 0 64 64">279 <circle cx="14" cy="32" r="6" fill="#9aa1a6"/>280 <circle cx="50" cy="16" r="6" fill="#9aa1a6"/>281 <circle cx="50" cy="48" r="6" fill="#9aa1a6"/>282 <path d="M19 31l24-12M19 33l24 12" stroke="#9aa1a6" stroke-width="4" fill="none"/>283 </svg>284 </div>285 </div>286 <div class="menu-sub">Last Sync: Just now</div>287 288 <div class="menu-item">289 <div class="menu-icon">290 <svg viewBox="0 0 64 64">291 <path d="M20 14l-10 10h18v16l18 10V24h8L44 14H20z" fill="none" stroke="#222" stroke-width="4"/>292 <path d="M22 46l20 12" stroke="#222" stroke-width="4"/>293 </svg>294 </div>295 <div>Sort</div>296 </div>297 298 <div class="menu-item">299 <div class="menu-icon">300 <svg viewBox="0 0 64 64" fill="none">301 <path d="M10 14h44M18 30h28M26 46h12" stroke="#222" stroke-width="6"/>302 </svg>303 </div>304 <div>Filter</div>305 </div>306 307 <div class="menu-item">308 <div class="menu-icon">309 <svg viewBox="0 0 64 64">310 <circle cx="32" cy="32" r="22" stroke="#222" stroke-width="4" fill="none"/>311 <path d="M22 22l20 20M42 22L22 42" stroke="#222" stroke-width="4"/>312 </svg>313 </div>314 <div>Clear</div>315 </div>316 317 <div class="menu-item">318 <div class="menu-icon">319 <svg viewBox="0 0 64 64">320 <rect x="16" y="10" width="32" height="28" rx="4" stroke="#222" stroke-width="4" fill="none"/>321 <rect x="24" y="6" width="16" height="12" rx="2" fill="#222"/>322 <rect x="20" y="40" width="24" height="12" rx="2" fill="#222"/>323 </svg>324 </div>325 <div>Import</div>326 </div>327 328 <div class="menu-item">329 <div class="color-dots">330 <div class="dot red"></div>331 <div class="dot blue"></div>332 <div class="dot yellow"></div>333 <div class="dot green"></div>334 </div>335 <div>Moment</div>336 </div>337 338 <div class="menu-item">339 <div class="menu-icon">340 <svg viewBox="0 0 64 64">341 <circle cx="32" cy="32" r="10" stroke="#222" stroke-width="4" fill="none"/>342 <path d="M32 12v8M32 44v8M12 32h8M44 32h8M18 18l6 6M40 40l6 6M46 18l-6 6M18 46l6-6" stroke="#222" stroke-width="3"/>343 </svg>344 </div>345 <div>Settings</div>346 </div>347 348 <div class="menu-item">349 <div class="menu-icon">350 <svg viewBox="0 0 64 64">351 <path d="M12 46h40l-6-18-10 8-10-8-14 18z" fill="none" stroke="#e3b700" stroke-width="4"/>352 </svg>353 </div>354 <div>Upgrade</div>355 </div>356 </div>357 358 <!-- Bottom area -->359 <div class="bottom-area">360 <div class="home-icon">361 <svg viewBox="0 0 64 64" fill="none">362 <path d="M10 30l22-16 22 16v20H38V38H26v12H10z" stroke-width="4"/>363 </svg>364 </div>365 <div class="search-pill">I want to...</div>366 <div class="nav-handle"></div>367 </div>368 369</div>370</body>371</html>