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; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #F6F4FA;14 color: #2E2E36;15 }16 17 /* Status bar (simplified) */18 .status-bar {19 height: 90px;20 display: flex;21 align-items: center;22 padding: 0 40px;23 color: #6F6F78;24 font-size: 34px;25 }26 .status-bar .right-icons {27 margin-left: auto;28 display: flex;29 align-items: center;30 gap: 28px;31 }32 .dot { width: 14px; height: 14px; background: #7B7B86; border-radius: 50%; display: inline-block; }33 34 /* Search/header */35 .header {36 padding: 0 40px;37 }38 .searchbar {39 margin-top: 10px;40 background: #EFEDF6;41 border: 1px solid #E2E0EE;42 border-radius: 44px;43 height: 100px;44 display: flex;45 align-items: center;46 padding: 0 26px;47 }48 .menu {49 width: 72px; height: 72px; border-radius: 18px; display: flex; align-items: center; justify-content: center; margin-right: 16px;50 }51 .search-placeholder {52 flex: 1;53 color: #7D7D89;54 font-size: 36px;55 }56 .avatar {57 width: 68px; height: 68px; border-radius: 50%;58 background: #2AA3A0; color: white; display: flex; align-items: center; justify-content: center; font-weight: bold;59 margin-left: 18px;60 }61 62 .tabs {63 display: flex;64 gap: 48px;65 margin-top: 22px;66 padding: 0 6px;67 font-size: 34px;68 }69 .tab {70 color: #6E6A8D;71 }72 .tab.active {73 color: #5E5ADB;74 position: relative;75 }76 .tab.active::after {77 content: "";78 position: absolute;79 left: 0; right: 0; bottom: -12px;80 height: 6px; border-radius: 3px;81 background: #5E5ADB;82 }83 .divider {84 margin-top: 30px;85 height: 1px;86 background: #E3E2EA;87 }88 89 /* List header */90 .list-head {91 display: flex;92 align-items: center;93 padding: 28px 40px 18px;94 font-size: 34px;95 color: #5B5B65;96 }97 .list-head .spacer { margin-left: 10px; }98 .list-head .right {99 margin-left: auto;100 display: flex;101 align-items: center;102 gap: 22px;103 }104 105 /* Grid of items */106 .grid {107 padding: 10px 40px 240px;108 display: grid;109 grid-template-columns: 1fr 1fr;110 gap: 60px 60px;111 }112 .item { }113 .thumb {114 height: 280px;115 background: #E0E0E0;116 border: 1px solid #BDBDBD;117 border-radius: 32px;118 display: flex;119 align-items: center;120 justify-content: center;121 color: #757575;122 font-size: 30px;123 position: relative;124 }125 .share-chip {126 position: absolute;127 right: 18px;128 bottom: 18px;129 width: 64px; height: 64px; border-radius: 50%;130 background: #E6E6EB; border: 1px solid #D0CFD6; display: flex; align-items: center; justify-content: center;131 }132 133 .label-row {134 display: flex;135 align-items: center;136 margin-top: 16px;137 font-size: 34px;138 color: #2E2E36;139 }140 .file-icon {141 padding: 4px 12px;142 border-radius: 12px;143 font-size: 26px;144 margin-right: 12px;145 color: white;146 }147 .pdf { background: #E24D43; }148 .gdoc { background: #3F6DEB; }149 .name {150 flex: 1;151 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;152 }153 .dots {154 width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; margin-left: 8px;155 }156 157 /* FAB */158 .fab {159 position: absolute;160 right: 40px;161 bottom: 360px;162 width: 140px; height: 140px;163 background: #D9D5F3;164 border-radius: 32px;165 box-shadow: 0 10px 18px rgba(120,110,190,0.25);166 display: flex; align-items: center; justify-content: center;167 }168 169 /* Bottom navigation */170 .bottom-nav {171 position: absolute;172 left: 0; bottom: 0;173 width: 100%;174 height: 220px;175 background: #ECEAF3;176 border-top: 1px solid #D9D7E4;177 display: flex;178 justify-content: space-around;179 align-items: center;180 padding-bottom: 12px;181 }182 .nav-item {183 width: 200px;184 text-align: center;185 color: #6F6F7C;186 font-size: 30px;187 }188 .nav-item .icon-wrap {189 width: 96px; height: 96px; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; border-radius: 28px;190 }191 .nav-item.active {192 color: #2E2E36;193 font-weight: 600;194 }195 .nav-item.active .icon-wrap {196 background: #D7D3F0;197 }198 /* Simple helper for SVGs */199 svg { display: block; }200</style>201</head>202<body>203<div id="render-target">204 205 <!-- Status bar -->206 <div class="status-bar">207 <div>2:51</div>208 <div class="right-icons">209 <span class="dot"></span>210 <span class="dot"></span>211 <span class="dot"></span>212 <span class="dot"></span>213 <!-- WiFi -->214 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M2 8c6-5 14-5 20 0l-2 2c-5-4-11-4-16 0L2 8zm4 4c4-3 8-3 12 0l-2 2c-3-2-5-2-8 0l-2-2zm4 4c2-1 4-1 6 0l-3 3-3-3z" fill="#6F6F78"/></svg>215 <!-- Battery -->216 <svg width="40" height="40" viewBox="0 0 24 24"><rect x="2" y="6" width="18" height="12" rx="2" fill="none" stroke="#6F6F78" stroke-width="2"/><rect x="4" y="8" width="14" height="8" fill="#6F6F78"/><rect x="20" y="10" width="2" height="6" fill="#6F6F78"/></svg>217 </div>218 </div>219 220 <!-- Header with search -->221 <div class="header">222 <div class="searchbar">223 <div class="menu">224 <!-- Hamburger -->225 <svg width="44" height="44" viewBox="0 0 24 24">226 <path d="M3 6h18v2H3zM3 11h18v2H3zM3 16h18v2H3z" fill="#5B5B65"/>227 </svg>228 </div>229 <div class="search-placeholder">Search in Drive</div>230 <div class="avatar">C</div>231 </div>232 233 <div class="tabs">234 <div class="tab active">My Drive</div>235 <div class="tab">Computers</div>236 </div>237 </div>238 <div class="divider"></div>239 240 <!-- List header -->241 <div class="list-head">242 <div>Name</div>243 <div class="spacer">244 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M7 14l5-5 5 5H7z" fill="#5B5B65"/></svg>245 </div>246 <div class="right">247 <!-- view/grid icon -->248 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M3 5h8v6H3zM13 5h8v6h-8zM3 13h8v6H3zM13 13h8v6h-8z" fill="#5B5B65"/></svg>249 </div>250 </div>251 252 <!-- Grid -->253 <div class="grid">254 <!-- Item 1: Folder -->255 <div class="item">256 <div class="thumb">[IMG: Folder thumbnail]</div>257 <div class="label-row">258 <div class="name">YMCA 2023</div>259 <div class="dots">260 <svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2" fill="#6F6F7C"/><circle cx="12" cy="12" r="2" fill="#6F6F7C"/><circle cx="12" cy="19" r="2" fill="#6F6F7C"/></svg>261 </div>262 </div>263 </div>264 265 <!-- Item 2: Generic File -->266 <div class="item">267 <div class="thumb">[IMG: Blank document thumbnail]</div>268 <div class="label-row">269 <span class="file-icon" style="background:#B0B0B7;">DOC</span>270 <div class="name">BACKUP_REMINDER_M...</div>271 <div class="dots">272 <svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2" fill="#6F6F7C"/><circle cx="12" cy="12" r="2" fill="#6F6F7C"/><circle cx="12" cy="19" r="2" fill="#6F6F7C"/></svg>273 </div>274 </div>275 </div>276 277 <!-- Item 3: PDF -->278 <div class="item">279 <div class="thumb">[IMG: PDF preview thumbnail]</div>280 <div class="label-row">281 <span class="file-icon pdf">PDF</span>282 <div class="name">Presentation_sample.pdf</div>283 <div class="dots">284 <svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2" fill="#6F6F7C"/><circle cx="12" cy="12" r="2" fill="#6F6F7C"/><circle cx="12" cy="19" r="2" fill="#6F6F7C"/></svg>285 </div>286 </div>287 </div>288 289 <!-- Item 4: Google Doc -->290 <div class="item">291 <div class="thumb">[IMG: Google Doc preview]</div>292 <div class="label-row">293 <span class="file-icon gdoc">DOC</span>294 <div class="name">Untitled document</div>295 <div class="dots">296 <svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2" fill="#6F6F7C"/><circle cx="12" cy="12" r="2" fill="#6F6F7C"/><circle cx="12" cy="19" r="2" fill="#6F6F7C"/></svg>297 </div>298 </div>299 </div>300 301 <!-- Item 5: PDF shared -->302 <div class="item">303 <div class="thumb">304 [IMG: PDF preview (shared)]305 <div class="share-chip">306 <!-- person icon -->307 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm-7 8c0-4 4-6 7-6s7 2 7 6H5z" fill="#6F6F7C"/></svg>308 </div>309 </div>310 <div class="label-row">311 <span class="file-icon pdf">PDF</span>312 <div class="name">YMCA Org..pdf</div>313 <div class="dots">314 <svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2" fill="#6F6F7C"/><circle cx="12" cy="12" r="2" fill="#6F6F7C"/><circle cx="12" cy="19" r="2" fill="#6F6F7C"/></svg>315 </div>316 </div>317 </div>318 319 <!-- Spacer cell to emulate grid alignment -->320 <div class="item">321 <div class="thumb">[IMG: Empty item space]</div>322 <div class="label-row">323 <div class="name" style="color:#9A9AA3;">Untitled</div>324 <div class="dots">325 <svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2" fill="#C0C0C7"/><circle cx="12" cy="12" r="2" fill="#C0C0C7"/><circle cx="12" cy="19" r="2" fill="#C0C0C7"/></svg>326 </div>327 </div>328 </div>329 </div>330 331 <!-- Floating Action Button -->332 <div class="fab">333 <svg width="60" height="60" viewBox="0 0 24 24"><path d="M11 5h2v14h-2zM5 11h14v2H5z" fill="#5E5ADB"/></svg>334 </div>335 336 <!-- Bottom Navigation -->337 <div class="bottom-nav">338 <div class="nav-item">339 <div class="icon-wrap">340 <svg width="42" height="42" viewBox="0 0 24 24"><path d="M12 3l9 8h-3v8H6v-8H3l9-8z" fill="#6F6F7C"/></svg>341 </div>342 <div>Home</div>343 </div>344 <div class="nav-item">345 <div class="icon-wrap">346 <svg width="42" height="42" viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.7 1.7-7.1L2 9.1l7.2-.6L12 2l2.8 6.5 7.2.6-5.5 4.8 1.7 7.1z" fill="#6F6F7C"/></svg>347 </div>348 <div>Starred</div>349 </div>350 <div class="nav-item">351 <div class="icon-wrap">352 <svg width="42" height="42" viewBox="0 0 24 24"><path d="M16 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM4 20c0-4 4-6 8-6s8 2 8 6H4z" fill="#6F6F7C"/></svg>353 </div>354 <div>Shared</div>355 </div>356 <div class="nav-item active">357 <div class="icon-wrap">358 <svg width="42" height="42" viewBox="0 0 24 24"><path d="M10 4h8l2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h4z" fill="#5E5ADB"/></svg>359 </div>360 <div>Files</div>361 </div>362 </div>363 364</div>365</body>366</html>